NavigationRailБоковая панель навигации
Боковая панель навигации предоставляет доступ к различным основным разделам страницы на планшетах и настольных компьютерах.
При необходимости импортируйте компоненты:
import 'mdui/components/navigation-rail.js';
import 'mdui/components/navigation-rail-item.js';
При необходимости импортируйте типы TypeScript:
import type { NavigationRail } from 'mdui/components/navigation-rail.js';
import type { NavigationRailItem } from 'mdui/components/navigation-rail-item.js';
Пример использования: (Пример с style="position: relative" добавлен только для демонстрации, при реальном использовании удалите этот стиль.)
Recent
Images
Library
<mdui-navigation-rail value="recent" style="position: relative">
<mdui-navigation-rail-item icon="watch_later--outlined" value="recent">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" value="images">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined" value="library">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
Примечания:
Этот компонент по умолчанию использует позиционирование position: fixed и автоматически добавляет стиль padding-left или padding-right к body, чтобы содержимое страницы не перекрывалось компонентом.
Однако в следующих двух случаях по умолчанию используется позиционирование position: absolute:
- Когда атрибут
contained компонента <mdui-navigation-rail> имеет значение true. В этом случае стили padding-left или padding-right добавляются к родительскому элементу.
- Когда компонент находится внутри
<mdui-layout></mdui-layout>. В этом случае стили padding-left или padding-right не добавляются.
По умолчанию боковая панель навигации отображается относительно текущего окна, слева или справа от страницы. Если вы хотите разместить панель внутри указанного контейнера, добавьте атрибут contained к компоненту <mdui-navigation-rail>. В этом случае панель будет отображаться относительно родительского элемента (вам нужно самостоятельно добавить родительскому элементу стиль position: relative).
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Содержимое страницы</div>
</div>
</div>
Исходный код
Установите атрибут placement у компонента <mdui-navigation-rail> в значение right, чтобы панель отображалась справа.
<div style="position: relative">
<mdui-navigation-rail placement="right" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Содержимое страницы</div>
</div>
</div>
Исходный код
Добавьте атрибут divider к компоненту <mdui-navigation-rail>, чтобы добавить разделитель для отделения панели от содержимого страницы.
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Содержимое страницы</div>
</div>
</div>
Исходный код
В компоненте <mdui-navigation-rail> вы можете добавлять элементы в верхней и нижней части через слоты top и bottom.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-button-icon icon="menu" slot="top"></mdui-button-icon>
<mdui-fab lowered icon="edit--outlined" slot="top"></mdui-fab>
<mdui-button-icon icon="settings" slot="bottom"></mdui-button-icon>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 600px;overflow: auto">
<div style="height: 1000px">Содержимое страницы</div>
</div>
</div>
Исходный код
Используйте атрибут alignment у компонента <mdui-navigation-rail>, чтобы изменить вертикальное выравнивание элементов навигации.
Recent
Images
Library
start
center
end
<div class="example-alignment" style="position: relative">
<mdui-navigation-rail alignment="start" contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 360px;overflow: auto">
<mdui-segmented-button-group value="start" selects="single">
<mdui-segmented-button value="start">start</mdui-segmented-button>
<mdui-segmented-button value="center">center</mdui-segmented-button>
<mdui-segmented-button value="end">end</mdui-segmented-button>
</mdui-segmented-button-group>
</div>
</div>
<script>
const example = document.querySelector(".example-alignment");
const navigationRail = example.querySelector("mdui-navigation-rail");
const segmentedButtonGroup = example.querySelector("mdui-segmented-button-group");
segmentedButtonGroup.addEventListener("change", (event) => {
navigationRail.alignment = event.target.value;
});
</script>
Исходный код
У компонента <mdui-navigation-rail-item> можно использовать атрибут icon для неактивного состояния и атрибут active-icon для активного состояния. Также можно использовать слоты icon и active-icon для указания элементов иконок.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined" active-icon="image--filled">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item>
Library
<mdui-icon slot="icon" name="library_music--outlined"></mdui-icon>
<mdui-icon slot="active-icon" name="library_music--filled"></mdui-icon>
</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Содержимое страницы</div>
</div>
</div>
Исходный код
Компонент <mdui-navigation-rail-item> может содержать только иконку, без текста.
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined"></mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined"></mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Содержимое страницы</div>
</div>
</div>
Исходный код
Установите атрибут href у компонента <mdui-navigation-rail-item>, чтобы превратить элемент навигации в ссылку. При этом также можно использовать связанные с ссылками атрибуты: download, target, rel.
<div style="position: relative">
<mdui-navigation-rail divider contained>
<mdui-navigation-rail-item
href="https://www.mdui.org"
target="_blank"
icon="watch_later--outlined"
>Recent</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Содержимое страницы</div>
</div>
</div>
Исходный код
В компоненте <mdui-navigation-rail-item> можно добавить бейдж через слот badge.
Recent
99+
Images
Library
<div style="position: relative">
<mdui-navigation-rail contained>
<mdui-navigation-rail-item icon="watch_later--outlined">
Recent
<mdui-badge slot="badge">99+</mdui-badge>
</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="image--outlined">Images</mdui-navigation-rail-item>
<mdui-navigation-rail-item icon="library_music--outlined">Library</mdui-navigation-rail-item>
</mdui-navigation-rail>
<div style="height: 260px;overflow: auto">
<div style="height: 1000px">Содержимое страницы</div>
</div>
</div>
Исходный код| Атрибут | Свойство | Reflect | Тип | По умолчанию |
|---|
icon | icon | | string | - |
Имя иконки Material Icons в неактивном состоянии. Можно задать через slot="icon".
|
active-icon | activeIcon | | string | - |
Имя иконки Material Icons в активном состоянии. Можно задать через slot="active-icon".
|
value | value | | string | - |
Значение элемента панели навигации.
|
href | href | | string | - |
Целевой URL ссылки.
Если задано это свойство, компонент будет отображаться как элемент <a> и можно использовать свойства, связанные со ссылками.
|
download | download | | string | - |
Имя файла для скачивания при переходе по ссылке.
Примечание: Это свойство действует только при заданном свойстве href.
|
target | target | | '_blank' | '_parent' | '_self' | '_top' | - |
Определяет, где будет открыта ссылка. Возможные значения:
_blank — открывает ссылку в новом окне_parent — открывает ссылку в родительском фрейме_self — открывает ссылку в текущем фрейме (по умолчанию)_top — открывает ссылку во всём окне
Примечание: Это свойство действует только при заданном свойстве href.
|
rel | rel | | 'alternate' | 'author' | 'bookmark' | 'external' | 'help' | 'license' | 'me' | 'next' | 'nofollow' | 'noreferrer' | 'opener' | 'prev' | 'search' | 'tag' | - |
Определяет тип связи между текущим документом и связанным документом. Возможные значения:
alternate — альтернативная версия текущего документаauthor — автор текущего документа или статьиbookmark — постоянная ссылка на ближайший родительский разделexternal — ссылка ведёт на другой сайтhelp — ссылка на соответствующую справочную документациюlicense — основное содержимое текущего документа лицензируется по лицензии связанного файлаme — текущий документ представляет владельца связанного контентаnext — текущий документ является частью серии, а цитируемый документ — следующим в серииnofollow — не передавать ссылке весnoreferrer — не передаёт заголовок Referer. Эффект аналогичен noopeneropener — если гиперссылка создаёт контекст просмотра верхнего уровня (то есть значение атрибута target равно _blank), создаётся вспомогательный контекст просмотраprev — текущий документ является частью серии, а цитируемый документ — предыдущим в серииsearch — содержит ссылку на ресурс, который можно использовать для поиска по текущему файлу и связанным с ним страницамtag — указывает тег, относящийся к текущему документу (определяется по указанному адресу)
Примечание: Доступно только при заданном свойстве href.
|
autofocus | autofocus | | boolean | false |
Определяет, будет ли элемент автоматически получать фокус после загрузки страницы.
|
tabindex | tabIndex | | number | - |
Порядок перехода к элементу при нажатии клавиши Tab.
|
| Название | Параметры | Возвращаемое значение |
|---|
click | | void |
Имитирует щелчок мыши по элементу.
|
focus | options: FocusOptions (Опционально)
| void |
Устанавливает фокус на текущий элемент.
В качестве аргумента можно передать объект со свойством:
preventScroll: по умолчанию после получения фокуса страница прокручивается, чтобы элемент появился в области видимости. Чтобы этого избежать, задайте для этого свойства значение true.
|
blur | | void |
Убирает фокус с текущего элемента.
|
| Название |
|---|
focus |
Срабатывает при получении фокуса.
|
blur |
Срабатывает при потере фокуса.
|
| Атрибут | Свойство | Reflect | Тип | По умолчанию |
|---|
value | value | | string | - |
Значение текущего выбранного <mdui-navigation-rail-item>.
|
placement | placement | | 'left' | 'right' | 'left' |
Положение панели навигации. Возможные значения:
left — слеваright — справа
|
alignment | alignment | | 'start' | 'center' | 'end' | 'start' |
Выравнивание элементов <mdui-navigation-rail-item>. Возможные значения:
start — по верхнему краюcenter — по центруend — по нижнему краю
|
contained | contained | | boolean | false |
По умолчанию панель навигации позиционируется относительно элемента body. При задании этого свойства в true панель будет позиционироваться относительно своего родительского элемента.
Примечание: При задании этого свойства необходимо вручную задать родительскому элементу стиль position: relative;.
|
divider | divider | | boolean | false |
Определяет, добавлять ли разделитель между панелью и содержимым страницы.
|
order | order | | number | - |
Порядок этого компонента в <mdui-layout> (по возрастанию). По умолчанию 0.
|
| Название |
|---|
change |
Срабатывает при изменении значения.
|
| Название |
|---|
| (по умолчанию) |
Компоненты <mdui-navigation-rail-item>.
|
top |
Элементы в верхней части.
|
bottom |
Элементы в нижней части.
|
| Название |
|---|
top |
Контейнер элементов в верхней части.
|
bottom |
Контейнер элементов в нижней части.
|
items |
Контейнер компонентов <mdui-navigation-rail-item>.
|
| Название |
|---|
--shape-corner |
Размер скругления углов компонента. Можно указать конкретное значение в пикселях, но рекомендуется использовать дизайн-токены.
|
--z-index |
Значение CSS z-index компонента.
|
Предыдущая глава
NavigationDrawer Выдвижная панель навигации
Следующая глава
Radio Радиокнопка
