Modal

This page is currently under construction

Lism UI (@lism-css/ui) is still in preparation.

A component for displaying modals using the dialog element.

Usage

Provided as Modal from the @lism-css/ui package.

Import

import { Modal } from '@lism-css/ui/react';

<Modal.Root>, <Modal.Inner>, <Modal.Body>, and <Modal.CloseBtn> are available.

Props

Property	Description
`id`	The `id` attribute is required on Modal (`c--modal`).
`<Modal.Root>` `duration`	Sets the duration of the modal open/close animation. Output as the `--duration` variable.
`<Modal.Inner>` `layout`	Specifies the layout component for `__inner`.
`<Modal.Inner>` `offset`	Offset value to shift the position of `__inner` when hidden.
`<Modal.OpenBtn>` `modalId`	Output as `data-modal-open`. Specifies the modal `id` on the trigger element that opens the modal.
`<Modal.CloseBtn>` `modalId`	Output as `data-modal-close`. Specifies the modal `id` on the trigger element that closes the modal.

Structure

<Modal.OpenBtn modalId="modalID">Open</Modal.OpenBtn>
<Modal.Root id="modalID">
  <Modal.Inner>
    <Modal.Body>...Contents...</Modal.Body>
    <Modal.CloseBtn modalId="modalID" />
  </Modal.Inner>
</Modal.Root>

Add an id to <Modal.Root>, and pass the same modalId to <Modal.OpenBtn> / <Modal.CloseBtn> to wire up the open/close triggers.

Source Code

The source code is available on GitHub.

Examples

Modal uses dialog. Be careful not to change the display value.
Due to animation issues with ::backdrop, the design assumes the dialog covers the full screen width with a background color applied.

↓

Modal usage example

<Modal.OpenBtn modalId="modal-01" className="-bd -px:15 -py:5 -bdrs:10">Open Modal 01</Modal.OpenBtn>

<Modal.Root id="modal-01" isWrapper isContainer p="30">
  <Modal.Inner layout="stack" pos="relative" p="30" bdrs="20" bxsh="40">
    <Modal.CloseBtn modalId="modal-01" autofocus pos="absolute" t="0" r="0" z="1" fz="xl" p="10" m="15" />
    <Modal.Body layout="stack" g="30" util="trimAll">
      <div className="-fz:xl -fw:bold">Modal Title</div>
      <DummyText />
    </Modal.Body>
  </Modal.Inner>
</Modal.Root>

c--modal_body is a scrollable area with overflow:auto. Place any content that should always remain visible before or after it.

↓

Modal usage example 2

<Modal.OpenBtn modalId="modal-02" className="-bd -px:15 -py:5 -bdrs:10">Open Modal 02</Modal.OpenBtn>

<Modal.Root id="modal-02" isWrapper="s" isContainer px="30" py="50">
  <Modal.Inner layout="stack" max-h="100%" bdrs="20" bxsh="40">
    <Flex ai="center" jc="between" py="15" bd-b>
      <Inline fz="l" fw="bold" lh="s" mx-s="30">Modal Header</Inline>
      <Modal.CloseBtn modalId="modal-02" autofocus fz="xl" p="15" mx="15"/>
    </Flex>
    <Modal.Body layout="flow" px="30" py="20" ov-y="auto">
      <DummyText />
      <DummyText length="xl" offset={1} />
      <DummyText length="l" />
      <DummyText length="xl" offset={3} />
      <ul><li>Lorem ipsum dolor sit amet.</li><li>Consectetur adipiscing elit.</li><li>Labore et dolore magna aliqua.</li></ul>
      <DummyText length="xl" offset={2}/>
    </Modal.Body>
    <Flex jc="end" px="30" py="20" bd-t>
      <Modal.CloseBtn modalId="modal-02" bgc="text" c="base" lh="s" px="15" py="10" bd="none" bdrs="10">Close</Modal.CloseBtn>
    </Flex>
  </Modal.Inner>
</Modal.Root>

↓

Drawer menu example

<Modal.OpenBtn modalId="modal-03" ai="center" g="5">
  <Icon icon="menu" fz="xl" /><span>MENU</span>
</Modal.OpenBtn>

<Modal.Root id="modal-03">
  <Modal.Inner layout="stack" max-w="24rem" h="100%" bxsh="40" offset="-100px 0">
    <Flex bd-b ai="center" jc="between" p="20">
      <Inline fz="l">MENU</Inline>
      <Modal.CloseBtn modalId="modal-03" autofocus fz="xl" p="5"/>
    </Flex>
    <Modal.Body ov-y="auto">
      <Stack util="divide" bd-b>
        <Link href="#menu-link01" className="set--plain" hov="-o" px="20" py="15">Menu item 1</Link>
        <Link href="#menu-link02" className="set--plain" hov="-o" px="20" py="15">Menu item 2</Link>
        <Link href="#menu-link03" className="set--plain" hov="-o" px="20" py="15">Menu item 3</Link>
        <Link href="#menu-link04" className="set--plain" hov="-o" px="20" py="15">Menu item 4</Link>
      </Stack>
    </Modal.Body>
  </Modal.Inner>
</Modal.Root>