Modal in calcite-components-react

awatson32 — Tue, 16 May 2023 14:18:57 GMT

Am I missing something? Does the React Modal component not have a contents or title prop? I can't even get anything to show in the footer. If this is documented somewhere, can someone please point me in the right direction? Is there any more documentation outside of the small example included in the calcite-components-examples repo?

https://codesandbox.io/s/competent-babbage-n8q3ol?file=/src/App.js

Re: Modal in calcite-components-react

KittyHurley — Tue, 16 May 2023 14:59:33 GMT

@awatson32 For placement of content in the modal, such as a header or contents, you can leverage the modal's slots.

For instance:

<CalciteModal open={isOpen} onCalciteModalClose={() => setIsOpen(undefined)}> <h3 slot="header">A modal header</h3> <p slot="content">Some modal contents</p> <CalciteButton slot="back" kind="neutral" width="full"> Back </CalciteButton> <CalciteButton id="save-button" slot="primary" width="full"> Save and close </CalciteButton> </CalciteModal>

There is also a core concepts page, which provides some background and context on web components, including slots, shadow DOM, CSS variables, and more.

topic Modal in calcite-components-react in Calcite Design System Questions

Modal in calcite-components-react

Re: Modal in calcite-components-react