Modal

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

構造

button[data-modal-open='modalID']
dialog.d--modal
    .d--modal__inner.l--stack
        .d--modal__body
    button[data-modal-close='modalID']

Props

プロパティ	説明
`variant`	`b--button--{variant}` クラスを出力します。デフォルトで`fill`が指定されます。そのほか、`outline`、`ghost`の2種類のスタイルを用意しています。
`id`	Modal(d—modal)にはid属性が必要です。
`layout`	レイアウト用コンポーネントを指定できます。
`duration`(`--duration`)	Modalの展開トランジションの秒数
`offset`(`--offset`)	Modalの非表示時の位置をずらすためのオフセット値
`data-modal-open`	モーダルを開くトリガー要素にて、モーダルの`id`を指定します。
`data-modal-open`	モーダルを閉じるトリガー要素にて、モーダルの`id`を指定します。

Import

import { Dialog } from '@lism-ui/core';

Usage

↓

各variant

<button data-modal-open='modal-01'>Open Modal 01</button>

<Modal.Root id='modal-01' layout={Center} p='40'>
  <Modal.Inner maxW='m' p='40' g='30' bdrs='3' bxsh='4'>
    <Center pos='a' t='0' r='0' z='1' fz='xl' p='20' m='20' bdrs='99'>
      <Modal.CloseIconBtn data-modal-close='modal-01' d='if' />
    </Center>
    <Modal.Body isFlow='s'>
      <Text fz='xl' fw='bold'>Modal</Text>
      <Dummy />
      <Dummy length='l' />
      <Lism tag='button' data-modal-close='modal-01' bgc='base-2' lh='xs' p='20' bd='none' bdrs='2'>Close Modal</Lism>
    </Modal.Body>
  </Modal.Inner>
</Modal.Root>

.d--modal__body がoverflow

でスクロール可能なエリアになっていますので、常に見せておきたいコンテンツはその前後に配置します。

↓

各variant

<button data-modal-open='modal-02'>Open Modal 02</button>

<Modal.Root id='modal-02' p='40' ac='c'>
  <Modal.Inner maxW='s' mx='a' maxH='80%' bdrs='3' bxsh='4'>
    <Modal.Header d='f' ai='c' jc='sb' py='20' bd='b'>
      <Text fz='l' fw='bold' lh='s' pis='40'>Modal Header</Text>
      <Center p='20' mx='20'>
        <Modal.CloseIconBtn data-modal-close='modal-02' d='if' fz='xl' />
      </Center>
    </Modal.Header>
    <Modal.Body isFlow='s' px='40' py='30'>
      <Dummy />
      <Dummy offset={1} />
      <Dummy length='l' />
      <Dummy length='xl' offset={3} />
      <Dummy tag='ul' />
      <Dummy length='s'/>
      <Dummy length='xl' offset={2}/>
    </Modal.Body>
    <Modal.Footer d='f' jc='e' px='40' py='30' bd='t'>
      <Lism tag='button' data-modal-close='modal-02' bgc='text' c='base' lh='xs' p='20' bd='none' bdrs='2'>Close</Lism>
    </Modal.Footer>
  </Modal.Inner>
</Modal.Root>

ドロワーメニューの例

↓

各variant

<Flex
  tag='button'
  className='re--style'
  data-modal-open='modal-03'
  ai='c'
  g='5'
>
  <Icon icon='menu' fz='xl' />
  <span>MENU</span>
</Flex>
<Modal.Root id='modal-03' offset='-100px 0'>
  <Modal.Inner maxW='25rem' w='90%' h='100%' p='40' g='30' bxsh='4'>
    <Modal.Header>
      <Center pos='a' t='0' r='0' z='1' fz='xl' p='20' m='20' bdrs='99'>
        <Modal.CloseIconBtn data-modal-close='modal-03' d='if' />
      </Center>
      <Text fz='l' fw='bold' lh='s'>MENU</Text>
    </Modal.Header>
    <Modal.Body>
      <NavMenu hasDivider bd='y'>
        <NavMenuItem>
          <NavMenuLink href='#menu-link01'>Menu item 1</NavMenuLink>
        </NavMenuItem>
        <NavMenuItem>
          <NavMenuLink href='#menu-link02'>Menu item 2</NavMenuLink>
        </NavMenuItem>
        <NavMenuItem>
          <NavMenuLink href='#menu-link03'>Menu item 3</NavMenuLink>
        </NavMenuItem>
        <NavMenuItem>
          <NavMenuLink href='#menu-link04'>Menu item 4</NavMenuLink>
        </NavMenuItem>
      </NavMenu>
    </Modal.Body>
  </Modal.Inner>
</Modal.Root>