Modal

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

構造

button[data-modal-open='modalID']
dialog.d--modal#modalID.set-plain
    .d--modal_inner
        .d--modal_body ...Contents...
    button[data-modal-close='modalID']

.d--modalにidをつけ、<button>にdata-modal-open属性とdata-modal-close属性をつけることでそのモーダルの開閉ボタンになります。

CSS

JavaScript

Import

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

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

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

Props

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

Usage

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' className='u-trimItems'>
      <div className='-fz:xl -fw:bold'>Modal Title</div>
      <Dummy />
    </Modal.Body>
  </Modal.Inner>
</Modal.Root>

.d--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>
      <HTML.span fz='l' fw='bold' lh='s' mx-s='30'>Modal Header</HTML.span>
      <Modal.CloseBtn modalId='modal-02' autofocus fz='xl' p='15' mx='15'/>
    </Flex>
    <Modal.Body layout='flow' px='30' py='20' ov-y='auto'>
      <Dummy />
      <Dummy length='xl' offset={1} />
      <Dummy length='l' />
      <Dummy length='xl' offset={3} />
      <Dummy tag='ul' />
      <Dummy 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='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'>
      <HTML.span fz='l'>MENU</HTML.span>
      <Modal.CloseBtn modalId='modal-03' autofocus fz='xl' p='5'/>
    </Flex>
    <Modal.Body ov-y='auto'>
      <Stack className='u-collapseGrid' bd-b p='0' ov='clip'>
        <HTML.a href='#menu-link01' className='set-plain' hov='o' px='20' py='15'>Menu item 1</HTML.a>
        <HTML.a href='#menu-link02' className='set-plain' hov='o' px='20' py='15'>Menu item 2</HTML.a>
        <HTML.a href='#menu-link03' className='set-plain' hov='o' px='20' py='15'>Menu item 3</HTML.a>
        <HTML.a href='#menu-link04' className='set-plain' hov='o' px='20' py='15'>Menu item 4</HTML.a>
      </Stack>
    </Modal.Body>
  </Modal.Inner>
</Modal.Root>