Modal

このページは現在調整中です

Lism UI (@lism-css/ui) はまだ準備中です。

dialog要素でモーダルを表示するコンポーネントです。

How to use

@lism-css/ui パッケージでModalとして提供しています。

Import

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

<Modal.Root>, <Modal.Inner>, <Modal.Body>, <Modal.CloseBtn>が利用できます。

Props

プロパティ	説明
`id`	Modal(`.c--modal`)にはid属性が必要です。
`<Modal.Root>` `duration`	モーダルの開閉アニメーションの時間を指定します。`--duration`変数として出力されます。
`<Modal.Inner>` `layout`	`__inner`のレイアウト用コンポーネントを指定できます。
`<Modal.Inner>` `offset`	`__inner`の非表示時の位置をずらすためのオフセット値
`<Modal.OpenBtn>` `modalId`	`data-modal-open`として出力されます。モーダルを開くトリガー要素にて、モーダルの`id`を指定します。
`<Modal.CloseBtn>` `modalId`	`data-modal-close`として出力されます。モーダルを閉じるトリガー要素にて、モーダルの`id`を指定します。

基本構造

<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>

<Modal.Root>にidをつけ、<Modal.OpenBtn> / <Modal.CloseBtn>に同じmodalIdを指定することで、そのモーダルの開閉ボタンになります。

ソースコード

ソースコードは GitHub で公開しています。

Examples

Modalはdialogを使用しています。display値を変更しないように注意してください。
::backdrop はアニメーションに問題があるため、dialogをスクリーン幅いっぱいにして背景色をつけて運用する前提で設計しています。

↓

Modal使用例

<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 がoverflow:autoでスクロール可能なエリアになっていますので、常に見せておきたいコンテンツがあればその前後に配置します。

↓

Modal使用例 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>ロレム・イプサムの座り雨。</li><li>目まぐるしい文章の流れの中で、それは静かに歩く仮の言葉です。</li><li>Elitも穏やかに続いていきますが、積み重ねられてきた「LiberroyとFoogの取り組み」は、余白のようなものです。</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>

ドロワーメニューの作成例

↓

ドロワーメニューの作成例

<Modal.OpenBtn modalId="modal-03" ai="center" g="5">
  <Icon icon="menu" fz="l" /><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" set="plain" hov="neutral" px="20" py="15">Menu item 1</Link>
        <Link href="#menu-link02" set="plain" hov="neutral" px="20" py="15">Menu item 2</Link>
        <Link href="#menu-link03" set="plain" hov="neutral" px="20" py="15">Menu item 3</Link>
        <Link href="#menu-link04" set="plain" hov="neutral" px="20" py="15">Menu item 4</Link>
      </Stack>
    </Modal.Body>
  </Modal.Inner>
</Modal.Root>