Sheet layout
Sheet layout ставит боковую шторку рядом с содержимым, а не поверх него, когда хватает места. Когда не хватает, шторка открывается модально.
Make the window narrower: the sheet stops sitting beside this text and opens over it.
Built from main 2 minutes ago.
<tk-sheet-layout content-min="240" style="--tk-sheet-size: 280px; min-block-size: calc(var(--space-96) * 3);">
<div>
<tk-button onclick="document.getElementById('deployment').show()">View deployment</tk-button>
<p>Make the window narrower: the sheet stops sitting beside this text and opens over it.</p>
</div>
<tk-sheet id="deployment" heading="Deployment" side="right">
<p>Built from main 2 minutes ago.</p>
<tk-button slot="footer" onclick="this.closest('tk-sheet').close()">Done</tk-button>
</tk-sheet>
</tk-sheet-layout>Как это работает
<tk-sheet-layout content-min="640">
<main>
<tk-button onclick="document.getElementById('deployment').show()">View deployment</tk-button>
</main>
<tk-sheet id="deployment" heading="Deployment" side="right">
<p>Built from main 2 minutes ago.</p>
</tk-sheet>
</tk-sheet-layout>- Положите в Sheet layout содержимое страницы и
Sheet сside="left"илиside="right". - Когда ширина Sheet layout не меньше
content-minплюс ширина шторки, шторка встраивается: открывается колонкой рядом с содержимым, а содержимое сужается. Ничего не закрыто, страницей можно пользоваться. - Когда ширины не хватает, шторка открывается модально поверх страницы.
- Если ширина меняется, пока шторка открыта, она переключается на месте. Введённый текст, прокрутка и фокус остаются.
modeу шторки подсказывает, как она открыта:dockedилиmodal.
Где ставить шторку
- Ставьте шторку
leftперед содержимым, аright— после него, чтобы порядок Tab совпадал с тем, что видно на экране. - Встроенная шторка отстоит на
space-8(8px) от краёв своей колонки и остаётся на виду, пока страница прокручивается. - Шторки
topиbottomне встраиваются. Они открываются модально. - Чтобы изменить ширину, задайте шторке
--tk-sheet-size. Sheet layout учитывает её, когда решает, хватает ли места.
Когда использовать
- Оборачивайте в Sheet layout страницу, которая открывает боковую панель, если её удобно держать открытой во время работы: подробности о записи, инспектор, фильтры, чат или справка.
- Не нужен для шторки, которая всегда должна занимать экран, например для короткой задачи, которую надо закончить прежде всего остального. Шторка сама по себе всегда открывается модально.
- Для навигации берите
Sidebar . Sheet layout — для панели, которую открывают и закрывают. - Берите
Splitter , когда границу между двумя панелями двигают сами люди.
Как выбрать content-min
- Задайте самую малую ширину, при которой содержимое ещё работает, а не размер экрана. Таблице с множеством колонок нужно больше, чем форме.
- По умолчанию 640px. Со шторкой по умолчанию в 440px она встраивается, когда ширина Sheet layout около 1100px.
Можно / нельзя
| ✅ Можно | ❌ Нельзя |
|---|---|
Задавать content-min по тому, что нужно содержимому |
Задавать его по размеру экрана |
| Использовать для панелей, которые держат открытыми во время работы | Использовать для навигации; для неё есть sidebar |
| Ставить шторку там, где она видна: left перед, right после | Ставить шторку right перед содержимым |
Связанные
Sheet : панель, которую встраивает Sheet layout.Sidebar : навигация, которая всегда на экране.Splitter : панели, размер которых меняют сами люди.
API
Атрибуты
| Атрибут | Тип | По умолчанию | Что делает |
|---|---|---|---|
content-min |
number (px) | 640 |
самая малая ширина содержимого; шторка встраивается, только если сверх неё есть место |
Слоты
| Слот | Содержимое |
|---|---|
| по умолчанию | содержимое страницы и одна или несколько tk-sheet |
У Sheet layout нет событий, методов и CSS-свойств. Своего ориентира (landmark) он не добавляет.
Токены
Sheet layout сам ничего не рисует. Встроенная колонка берёт токены
space-8 вокруг панели и duration-200 с
ease-emphasized, когда колонка раскрывается.
Доступность
Встроено:
- Встроенная шторка — немодальный диалог, имя ему даёт заголовок. До страницы доходит Tab,
её читает скринридер, а
Escзакрывает шторку, пока фокус в ней. - Когда места нет, шторка — модальный диалог, и страница за ней недоступна, пока шторка не закроется.
- При закрытии фокус возвращается к тому, что открыло шторку, сколько бы раз она ни переключалась.
- При уменьшенной анимации колонка раскрывается сразу.
На вашей стороне:
- Ставьте шторку
leftперед содержимым, аright— после. - Держите ориентиры страницы (например,
<main>) внутри содержимого.