Изменение ширины

<sf-resizer> — ручка на краю панели, которая меняет её ширину. Ширину тянут мышью, пером или касанием, меняют стрелками с клавиатуры и возвращают двойным щелчком. Подходит для колонки меню, боковой панели и области списка рядом с подробностями.

Пример

HTML

<div class="flex radius-2 border border-outline-variant overflow-hidden" style="block-size: 14rem">
  <nav class="flex flex-col gap-1 p-2 bg-surface-container flex-none" style="inline-size: var(--demo-menu-width, 14rem)" aria-label="Разделы">
    <span class="text-1/2 color-on-surface-variant">Разделы</span>
    <a class="sf-link" href="#resizer-orders">Заказы</a>
    <a class="sf-link" href="#resizer-clients">Клиенты</a>
    <a class="sf-link" href="#resizer-catalog">Каталог товаров и услуг</a>
    <sf-resizer min="10rem" max="22rem" property="--demo-menu-width" label="Ширина меню"></sf-resizer>
  </nav>
  <main class="flex-1 p-3 flex flex-col gap-1">
    <span class="text-1">Перетащите край меню, нажмите на нём стрелки или дважды щёлкните, чтобы вернуть ширину.</span>
    <output class="text-1/2 color-on-surface-variant" id="resizer-log" aria-live="polite"></output>
  </main>
</div>

JavaScript

const log = document.querySelector('#resizer-log');
document.querySelector('sf-resizer').addEventListener('sf-resize', (event) => {
  const {width, phase} = event.detail;
  if (phase !== 'move') log.textContent = `${phase === 'reset' ? 'Ширина возвращена' : 'Новая ширина'}: ${Math.round(width)} px`;
});

Применение

Панель и край

Ручка встаёт на внутренний конец (inline-end) своего родителя. Если панель — не родитель, её задают селектором ближайшего предка в target. Ручка у начала панели задаётся edge="inline-start". Панель с position: static ручка делает relative.

HTML

<nav style="inline-size: var(--menu-width, 16rem)">
  …
  <sf-resizer min="13rem" max="24rem" property="--menu-width"
              storage-key="menu" label="Ширина меню"></sf-resizer>
</nav>

min и max — пределы ширины в любых единицах CSS, токены тоже подходят; проценты считаются от родителя панели. По умолчанию 12rem и 40rem.
property — CSS-переменная, в которую записывается ширина. Без неё ширина записывается в inline-size панели.
step — шаг стрелок в пикселях, по умолчанию 16; с Shift шаг вчетверо больше.
disabled — ручка видна, но ширину не меняет.

Ручка — полоса шириной 8px, которая наполовину выходит за край панели. Она стоит на седьмой ступени слоёв (z-index: 70): выше позиционированного содержимого панели — например, корня меню администратора на шестой ступени — и ниже всплывающих слоёв страницы. У панели остаётся overflow: visible: overflow: auto или hidden обрезает внешнюю половину ручки. Прокрутку содержимого дают внутреннему элементу панели.

Где хранится ширина

Сам компонент ничего не отправляет на сервер. Есть три уровня памяти:

Без storage-key и value ширина живёт до перезагрузки страницы.
С storage-key она — персональный вид под ключом sf-resizer/<storage-key>: хранится в браузере, а если сайт подключил хранение настроек у пользователя (SF.Preferences.useHost), — ещё и у человека на сервере. Двойной щелчок её забывает.
Сайт с личными настройками без SF.Preferences.useHost слушает событие sf-resize, сохраняет ширину у человека при phase: 'end' и 'reset' и при следующем открытии передаёт её в value. value важнее памяти браузера, поэтому ширина одна и та же на любом компьютере.

Выбирайте один способ. Сайт, который подключил SF.Preferences.useHost, ставит ручке только storage-key и кладёт значение sf-resizer/<storage-key> в блок data-sf-preferences, а без значения у человека — null (см. Подключение хранилища хоста).

Событие sf-resize приходит с {width, phase}: move — во время перетаскивания, end — после перетаскивания или нажатия клавиши, reset — после возврата. Если окно стало уже, сохранённая ширина возвращается в пределы.

Сохранённую ширину ручка ставит в первом кадре после того, как Loader подключил элемент. До этого панель стоит в ширине по умолчанию из CSS, и на медленном соединении её край может сдвинуться. Чтобы панель сразу была в ширине человека, сервер, который знает его ширину, пишет её в разметку панели:

HTML

<nav class="app-menu" style="--menu-width: 352px">…</nav>

Без сервера страница ставит переменную сама, сразу после core.js: SF.Preferences уже есть, а значение лежит под ключом sf-resizer/<storage-key> в виде {v: 1, width} (ширина в пикселях):

HTML

<script>
  const kept = SF.Preferences.read('sf-resizer/menu');
  if (kept?.width) document.querySelector('.app-menu')?.style.setProperty('--menu-width', `${kept.width}px`);
</script>

Скрипт стоит после разметки панели.

Панель, которая на телефоне становится колонкой

На узком экране боковое меню обычно встаёт над содержимым во всю ширину, и менять его ширину незачем. Ширину из переменной задавайте только от md в CSS проекта, а ручку ниже md скрывайте тоже в CSS проекта: утилита hidden на <sf-resizer> не действует, потому что собственный display компонента стоит в слое компонентов, а он важнее слоя утилит (см. Утилиты и компоненты).

CSS

@layer project {
  @media (width >= 44rem) {
    .app-menu { inline-size: var(--menu-width, 16rem); }
  }
  @media (width < 44rem) {
    .app-menu sf-resizer { display: none; }
  }
}

Тот же жест для других краёв: `SF.Resizer.attach`

Край, который не может быть элементом внутри панели, подключают к тому же поведению функцией SF.Resizer.attach(root, {handles, session}). Так устроены края столбцов таблицы. handles — селектор ручек внутри root (ручки могут перерисовываться); session(handle) возвращает, что меняется:

JavaScript

SF.Resizer.attach(table, {
  handles: '.column-edge',
  session: (edge) => ({
    measure: () => edge.closest('th').getBoundingClientRect().width,
    limits: () => ({min: 64, max: 480}),
    apply: (width) => width,
    commit: (width) => saveColumnWidth(edge, width),
    reset: () => resetColumnWidth(edge),
    direction: () => 1,
    step: 16,
  }),
});

Перетаскивание, клавиши, двойной щелчок, курсор и значение для доступности у всех краёв одинаковые.

Доступность

Ручка — разделитель: role="separator", она в порядке Tab, а её значение — ширина в пикселях между min и max.
Доступное имя задаёт label; без него — «Изменить ширину» на языке страницы.
Стрелки меняют ширину на шаг, Home и End ставят предел, Enter, пробел и двойной щелчок возвращают ширину из стилей страницы.

Справочник API

Раздел собран из манифеста компонента выпуска ui-106d5901f8c3 и обновляется вместе с выпуском. Чтобы исправить описание, исправьте манифест.

Каждому атрибуту соответствует свойство элемента с тем же именем в camelCase: search-placeholder — searchPlaceholder. Свойство атрибута template называется templateName.


Тег	`<sf-resizer>`
Назначение	Ручка на краю панели, которая меняет её ширину перетаскиванием, клавиатурой или возвращает её двойным щелчком, в заданных пределах; ширину можно запоминать в браузере.
Контракт	`smart.resizer`, версия `1.0.0`
Поставка	выпуск Framework `ui-106d5901f8c3`
Жизненный цикл	экспериментальный: API может меняться между выпусками
Готовность	работает в сценарии студии, продуктовой приёмки нет
Заготовка до прихода кода	нет: атрибут `data-sf-skeleton` не пишется; своего скелетона при загрузке данных нет (Заготовка до прихода кода)

Атрибуты

min — string, по умолчанию 12rem. Наименьшая ширина — длина CSS (подходят токены и проценты от родителя панели).
max — string, по умолчанию 40rem. Наибольшая ширина — длина CSS.
property — string, по умолчанию пусто. CSS-переменная панели, в которую записывается ширина; без неё ширина записывается в inline-size.
target — string, по умолчанию пусто. Селектор ближайшего предка, который является панелью; без него — родитель.
edge — string, по умолчанию inline-end, значения: inline-end, inline-start.
step — string, по умолчанию 16. На сколько пикселей сдвигает стрелка; с Shift — на четыре шага.
storage-key — string, по умолчанию пусто. Запоминает ширину в этом браузере как персональный вид под ключом sf-resizer/<key> (SF.Preferences); двойной щелчок её забывает.
label — string, по умолчанию пусто. Доступное имя; по умолчанию «Изменить ширину» на языке страницы.
disabled — boolean, по умолчанию false.
value — string, по умолчанию пусто. Ширина в пикселях, которую хранит хост (личные настройки человека); она важнее памяти браузера.

Методы

Публичных методов нет.

События

Все события приходят на сам элемент и всплывают. Общие события базового элемента перечислены в главе Жизненный цикл → Этапы.

sf-resize — detail: { width: number, phase: any }. Ширина изменилась: во время перетаскивания (move), после перетаскивания или нажатия клавиши (end) или вернулась к ширине из стилей (reset).

Персональный вид

Ключ sf-resizer/<storage-key>; версия формата — v: 1. В столбце «Для первой отрисовки» «да» значит, что сервер может положить поле в блок data-sf-preferences страницы.

Поле	Тип	Пишет	Для первой отрисовки	Что в нём
`width`	`integer`	`sf-resizer`	да	Ширина, до которой человек дотянул панель, в пикселях CSS; при применении ограничивается `min` и `max`.

Доступность

Роль: separator.
Доступное имя: рекомендуется.
Клавиши: ArrowLeft, ArrowRight, Home, End, PageUp, PageDown, Enter, Space.
Фокус: Ручка в порядке Tab, с role separator, aria-orientation vertical и aria-valuenow/min/max в пикселях. Стрелки меняют ширину на шаг (с Shift — на четыре), Home и End ставят предел, Enter, пробел и двойной щелчок возвращают ширину из стилей страницы.

Минимальная разметка

HTML

<nav style="inline-size: var(--menu-width, 16rem)"><sf-resizer min="13rem" max="24rem" property="--menu-width" storage-key="menu" label="Menu width"></sf-resizer></nav>

Источник

simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/smart/resizer
simai/ui@106d5901f8c3b4f23131ce0e7ede5dbd8abfe4f4:distr/rule/rule.json#name=cl-resizer

Навигация

Главное

Документация

Содержание

Изменение ширины

Пример

Применение

Панель и край

Где хранится ширина

Панель, которая на телефоне становится колонкой

Тот же жест для других краёв: `SF.Resizer.attach`

Доступность

Справочник API

Атрибуты

Методы

События

Персональный вид

Доступность

Минимальная разметка

Источник

См. также

Настройки

Изменение ширины

Пример

Применение

Панель и край

Где хранится ширина

Панель, которая на телефоне становится колонкой

Тот же жест для других краёв: SF.Resizer.attach

Доступность

Справочник API

Атрибуты

Методы

События

Персональный вид

Доступность

Минимальная разметка

Источник

См. также

Поиск по документации

Тот же жест для других краёв: `SF.Resizer.attach`