コンテンツにスキップ
Lism CSS

Modal

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

構造

Section titled “構造”
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

Section titled “CSS”

Import

Section titled “Import”
import { Modal } from 'lism-css/react';

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

Props

Section titled “Props”
プロパティ説明
idModal(d—modal)にはid属性が必要です。
layoutレイアウト用コンポーネントを指定できます。
offset(--offset)Modalの非表示時の位置をずらすためのオフセット値
data-modal-openモーダルを開くトリガー要素にて、モーダルのidを指定します。
data-modal-openモーダルを閉じるトリガー要素にて、モーダルのidを指定します。

Usage

Section titled “Usage”

Modal.Rootをgridレイアウト系にしてしまうと、 Modal.Inner(.d--modal_inner) の max-height 100% が効かなくなるので注意してください。

↓
Modal使用例
Modal Title

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi. 

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


<Modal.Root id='modal-01' layout='stack' jc='center' isContainer='m' p='40'>
  <Modal.Inner pos='relative' p='40' g='30' bdrs='20' bxsh='40'>
    <Modal.CloseBtn modalId='modal-01' pos='absolute' t='0' r='0' z='1' fz='xl' p='10' m='20' />
    <Modal.Body layout='flow' flow='s'>
      <div className='-fz:xl -fw:bold'>Modal Title</div>
      <Dummy />
    </Modal.Body>
    <Flex>
      <Modal.CloseBtn modalId='modal-01' bgc='base-2' p='20' bdrs='10'>Close Modal</Modal.CloseBtn>
    </Flex>
  </Modal.Inner>
</Modal.Root>

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

↓
Modal使用例
Modal Header

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi.

Consectetur adipisicing elit, sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.

Lorem ipsum dolor sit, amet consectetur adipisicing elit, sed do eiusmod tempor. Non facere laudantium ex eos doloribus aut dolore nisi provident libero, eum nulla sunt, porro sed dicta. Impedit ullam eveniet obcaecati minima.

Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente.

  • Lorem ipsum dolor sit,
  • amet consectetur adipisicing elit,
  • sed do eiusmod tempor.
  • Non facere laudantium ex eos doloribus aut dolore nisi.

Sed do eiusmod tempor. Amet ab commodi rerum voluptas iusto dolores numquam cum ratione, dignissimos quia recusandae assumenda magnam, molestiae necessitatibus quas minus, quod consectetur pariatur. Possimus eligendi ipsam rerum, nihil incidunt, commodi impedit eum blanditiis, quisquam maiores corrupti rem. Provident tempora vitae, quo at inventore est sapiente. 

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


<Modal.Root id='modal-02' layout='stack' jc='center' isContainer='s' px='40' py='60'>
  <Modal.Inner bdrs='20' bxsh='40'>
    <Flex ai='center' jc='between' py='20' bd-b>
      <HTML.span fz='l' fw='bold' lh='s' mx-s='40'>Modal Header</HTML.span>
      <Modal.CloseBtn modalId='modal-02' fz='xl' p='20' mx='20'/>
    </Flex>
    <Modal.Body layout='flow' px='40' py='30'>
      <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='40' py='30' bd-t>
      <Modal.CloseBtn modalId='modal-02' bgc='text' c='base' lh='xs' px='20' py='10' bd='none' bdrs='10'>Close</Modal.CloseBtn>
    </Flex>
  </Modal.Inner>
</Modal.Root>

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

Section titled “ドロワーメニューの作成例”

以下では、追加インポートが必要なNavMenuも併用しています。

↓
ドロワーメニューの作成例
MENU
Menu item 1 Menu item 2 Menu item 3 Menu item 4 
<Modal.OpenBtn modalId='modal-03' ai='center' g='5'>
  <Icon icon='menu' fz='xl' /><span>MENU</span>
</Modal.OpenBtn>


<Modal.Root id='modal-03' offset='-100px 0'>
  <Modal.Inner max-w='24rem' h='100%' bxsh='40'>
    <Flex bd-b ai='center' jc='between' p='30'>
      <HTML.span fz='l'>MENU</HTML.span>
      <Modal.CloseBtn modalId='modal-03' fz='xl' p='5'/>
    </Flex>
    <Modal.Body>
      <Stack className='u-itemDivider' bdc='line' bd-b p='0' ov='clip'>
        <HTML.a href='#menu-link01' className='set-plain' hov='o' px='30' py='20'>Menu item 1</HTML.a>
        <HTML.a href='#menu-link02' className='set-plain' hov='o' px='30' py='20'>Menu item 2</HTML.a>
        <HTML.a href='#menu-link03' className='set-plain' hov='o' px='30' py='20'>Menu item 3</HTML.a>
        <HTML.a href='#menu-link04' className='set-plain' hov='o' px='30' py='20'>Menu item 4</HTML.a>
      </Stack>
    </Modal.Body>
  </Modal.Inner>
</Modal.Root>