Modal/ModalTrigger

Компонент Modal предоставляет модальные окна для лейаутов. Для вызова нужно использовать компонент ModalTrigger.

Использование

WARNING

Внимание! Вы должны всегда использовать копоненты внутри лейаута - триггеры в основном слоте лейаута, а модальные окна - распологать в порядке требуемом бизнес-логикой вашего проекта в слоте modals! Атрибут to триггера должен быть указан и соответсвовать id на нужной модали.

WARNING

Внимание! Высота контента передаваемого в слоте controls должна быть 40px и это остается "на проектах"!

Вы можете использовать атрибуты динамические ключи на триггерах для открытия/закрытия определенной модали, или закрытия всех открытых на лейауте модалей. Просто передайте новое значение в пропс.

Небезопасные стили

При необходимости (например, для того чтобы изменить тип отображения элемента-триггера) вы можете передать правила стилевой разметки в хост компонента через атрибут styles. Внимание!!! Это небезопасно! По умолчанию хост элемента отображается как display: inline-flex;;

HTML, Angular, Vue

  <ds-layout>
    <div slot="main">
      <ds-modal-trigger
        to="modal"
      >
        <div slot="main">Я - триггер модали!</div>
      </ds-modal-trigger>
    </div>

    <div slot="modals">
      <ds-modal id="modal" text="Button text">
        <div slot="main">
          <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
        </div>

        <div slot="controls" style="height: 40px;">Controls</div>
      </ds-modal>
    </div>
  </ds-layout>

React

import { Layout, ModalTrigger, Modal } from '@rir/ds-library';

function Component() {
  return (
    <>
      <Layout>
        <div slot="main">
          <ModalTrigger
            to="modal"
          >
            <div slot="main">Я - триггер модали!</div>
          </ModalTrigger>
        </div>

        <div slot="modals">
          <Modal id="modal" text="Button text">
            <div slot="main">
              <div>There are many variations of passages of Lorem Ipsum available, but the majority have suffered alteration in some form, by injected humour, or randomised words which don't look even slightly believable. If you are going to use a passage of Lorem Ipsum, you need to be sure there isn't anything embarrassing hidden in the middle of text. All the Lorem Ipsum generators on the Internet tend to repeat predefined chunks as necessary, making this the first true generator on the Internet. It uses a dictionary of over 200 Latin words, combined with a handful of model sentence structures, to generate Lorem Ipsum which looks reasonable. The generated Lorem Ipsum is therefore always free from repetition, injected humour, or non-characteristic words etc.</div>
            </div>

            <div slot="controls" style="height: 40px;">Controls</div>
          </Modal>
        </div>
      </Layout>
    </>
  );
}

export default Component;

API ModalTrigger

Props

Name	Type	Description	Default
to	[undefined, String]	Идентефикатор модали для которой работает триггер.	undefined
open	String	Динамический ключ для открытия модали по этому триггеру	''
close	String	Динамический ключ для закрытия модали по этому триггеру	''
all	String	Динамический ключ для закрытия всех открытых модалей	''
styles	String	"Небезопастная" строка для передачи правил CSS в компонент	''

Slots

Name	Description
main	Основной контент триггера

API Modal

Props

Name	Type	Description	Default
text	String	Текст кнопки назад. Если не задан она не выводится.	''
full	String	Пропс выключает оборачивание контентов в слотах в компонент Wraper. (Нет отступов по бокам)	''

Slots

Name	Description
main	Основной контент
controls	Контент управляющей области

Примеры проектов

React

Angular

Vue