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

Modal

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

構造

Section titled “構造”
button[data-modal-open='modalID']
dialog.d--modal#modalID
    .d--modal__inner.l--stack
        .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';

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使用例
Modal Title

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

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. 

<button data-modal-open='modal-01' className='re--style -bd: -px:20 -py:5 -bdrs:2 -hov:fade'>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' hov='fade'/>
    </Center>
    <Modal.Body isFlow='s'>
      <div className='-fz:xl -fw:bold'>Modal Title</div>
      <Dummy />
      <Dummy length='l' />
      <button data-modal-close='modal-01' className='re--style -bgc:base-2 -lh:xs -p:20 -bdrs:2 -hov:fade'>Close Modal</button>
    </Modal.Body>
  </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.

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

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. 

<button data-modal-open='modal-02' className='re--style -bd: -px:20 -py:5 -bdrs:2 -hov:fade'>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'>
    <Flex ai='c' jc='sb' py='20' bd='b'>
      <Lism fz='l' fw='bold' lh='s' mis='40'>Modal Header</Lism>
      <Center p='20' mx='20'>
        <Modal.CloseIconBtn data-modal-close='modal-02' d='if' fz='xl' />
      </Center>
    </Flex>
    <Modal.Body isFlow='s' px='40' py='30'>
      <Dummy />
      <Dummy length='xl' offset={1} />
      <Dummy length='l' />
      <Dummy length='xl' offset={3} />
      <Dummy tag='ul' />
      <Dummy length='codes'/>
      <Dummy length='xl' offset={2}/>
    </Modal.Body>
    <Flex jc='e' px='40' py='30' bd='t'>
      <Lism tag='button' data-modal-close='modal-02' bgc='text' c='base' lh='xs' px='20' py='10' bd='none' bdrs='2'>Close</Lism>
    </Flex>
  </Modal.Inner>
</Modal.Root>

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

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

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

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

MENU 

<Flex
  tag='button'
  data-modal-open='modal-03'
  className='re--style -ai:c -g:5 -hov:fade'
>
  <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' hov='fade' />
      </Center>
      <Text fz='l' fw='bold' lh='s'>MENU</Text>
    </Modal.Header>
    <Modal.Body>
      <NavMenu.Root bd='y' bdc='divider'>
      <NavMenu.Item>
        <NavMenu.Link href='#menu-link01'>Menu item 1</NavMenu.Link>
      </NavMenu.Item>
      <NavMenu.Item bd='t' bdc='inherit'>
        <NavMenu.Link href='#menu-link02'>Menu item 2</NavMenu.Link>
      </NavMenu.Item>
      ...
    </NavMenu.Root>
    </Modal.Body>
  </Modal.Inner>
</Modal.Root>