НачалоОсновыКомпонентыТексты
Обзор
Кнопка Кнопка-иконка Кнопка с меню Группа кнопок Кнопка-переключатель Группа переключателей
Бейдж Баннер Пустое состояние Индикатор прогресса Кольцо прогресса Сообщение в разделе Скелетон Индикатор загрузки Уведомление
Field Поле ввода Textarea Number input Number stepper Search field OTP input Поле телефона Чекбокс Радиогруппа Переключатель Слайдер Карточка выбора Редактирование на месте
Select family Select Combobox Multiselect Country select Выбор даты Выбор периода Выбор времени Календарь Выбор эмодзи
Диалог Шторка Поповер Меню Подсказка
Боковая панель Навигационное меню Вкладки Сегментированный переключатель Хлебные крошки Пагинация Дерево
Таблица Таблица данных Аватар Группа аватаров Тег Иконка Изображение
Текст Prose Ссылка Блок кода Kbd
Аккордеон Раскрывающийся блок Разделитель Область прокрутки Разделитель панелей Соотношение сторон
Заголовок страницы

Шторка

Шторка — модальная панель, которая выезжает с края экрана. Её ещё называют выдвижной или боковой панелью.

Стабильный Figma
ОбзорИспользованиеAPIДоступность
Show filters Unread Starred Clear Apply 
<tk-button onclick="document.getElementById('sheet').show()">Show filters</tk-button>
<tk-sheet id="sheet" heading="Filters" side="right">
  <tk-checkbox>Unread</tk-checkbox>
  <tk-checkbox>Starred</tk-checkbox>
  <tk-button slot="footer" onclick="this.closest('tk-sheet').close()">Clear</tk-button>
  <tk-button slot="footer" variant="primary" onclick="this.closest('tk-sheet').close()">Apply</tk-button>
</tk-sheet>

Анатомия

Часть Что это
заголовок heading: заголовок и доступное имя, обязателен
кнопка закрытия встроена, справа вверху
тело слот по умолчанию; прокручивается
подвал слот footer: ваши кнопки, по правому краю; без кнопок скрыт
подложка затемняет страницу и блокирует её
part dialog панель

Стороны

<tk-button onclick="document.getElementById('filters').show()">Show filters</tk-button>
<tk-sheet id="filters" heading="Filters" side="right">
  <tk-checkbox>Unread</tk-checkbox>
  <tk-checkbox>Starred</tk-checkbox>
  <tk-button slot="footer" onclick="this.closest('tk-sheet').close()">Clear</tk-button>
  <tk-button slot="footer" variant="primary" onclick="this.closest('tk-sheet').close()">Apply</tk-button>
</tk-sheet>
side Форма
right (по умолчанию) во всю высоту, ширина 440px
left во всю высоту, ширина 440px
top во всю ширину, высота по содержимому
bottom во всю ширину, высота по содержимому
  • Панель выезжает со своей стороны и уезжает обратно при закрытии.
  • Боковая шторка сужается под окно и оставляет space-16 (16px). Верхняя или нижняя растёт до высоты окна минус 16px, дальше прокручивается её тело.
  • Ширину боковой шторки меняет --tk-sheet-size. Атрибута size нет.
  • Длинное содержимое прокручивается в теле, а заголовок и подвал стоят на месте. У края, за которым есть ещё содержимое, оно плавно гаснет.

Открытие и закрытие

<tk-button onclick="document.getElementById('details').show()">View details</tk-button>
<tk-sheet id="details" heading="Order 1024" side="right">
  <p>Shipped on 12 March to Ada Lovelace, London.</p>
</tk-sheet>
  • show() открывает шторку, всегда модально. close(value) закрывает её, а в обработчике close значение лежит в returnValue. Фокус возвращается к элементу, который открыл шторку.
  • Шторка закрывается так же, как Dialog: Esc, кнопкой закрытия, кликом по подложке или вашими кнопками. Закрытие ничего не сохраняет.
  • Шторка с <form> внутри не закрывается по клику на подложку, чтобы случайный клик не стёр работу. Esc и кнопка закрытия по-прежнему закрывают её.
  • Чтобы спросить, прежде чем пропадут несохранённые изменения, слушайте cancel: Esc и клик по подложке сначала отправляют его, и preventDefault() оставляет шторку открытой. Затем откройте поверх неё подтверждение «Сбросить изменения?».
  • persistent отключает Esc и подложку. Кнопка закрытия и ваши кнопки работают по-прежнему. Оставьте это для задачи, которую обязательно нужно закончить.