wt-navigation-rail.vue

Вертикальна навігаційна панель із кнопками зверху та знизу. Не містить логіки навігації: при кліку емітить select, а аплікейшн вирішує, що робити.

Компонент не використовується напряму: його рендерить wt-page з пропа navigationRail ({ topItems, bottomItems, activeItemId }), а подію select він ретранслює як navigation-select. Панель відображається, лише якщо хоча б один зі списків не порожній; якщо обидва порожні, нічого не рендериться.

<wt-page
  :navigation-rail="{ topItems: top, bottomItems: bottom, activeItemId: active }"
  @navigation-select="active = $event.id"
>
  <wt-layout>
    <wt-content-wrapper>...</wt-content-wrapper>
  </wt-layout>
</wt-page>

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
topItems		Array	() => []	Buttons pinned to the top
bottomItems		Array	() => []	Buttons pinned to the bottom
activeItemId		string	''	Id of the active item

Events

Name	Params	Description
select		Fires on click of enabled item

Item

NavigationRailItem: { id, icon, label?, disabled?, badge?: { value, severity? } }.

• badge малює бейдж над кнопкою; severity за замовчуванням success (напр. error для пропущених дзвінків).
• Стани кнопки: default, hover, active (activeItemId = id активної кнопки).
• Градієнт фону залежить від теми (:root.theme--dark).

CSS variables

Див. src/components/wt-navigation-rail/_variables.css.

Example

Show navigation items

Active: calls
Last select event: —

Active: calls
Last select event: —

Code

<script setup>
import { computed, ref } from 'vue';

const active = ref('calls');
const lastSelected = ref('');
const showItems = ref(true);

const topList = [
	{
		id: 'calls',
		icon: 'call',
		label: 'Calls',
		badge: {
			value: 1,
			severity: 'error',
		},
	},
	{
		id: 'chats',
		icon: 'chat',
		label: 'Chats',
		badge: {
			value: 3,
		},
	},
	{
		id: 'comments',
		icon: 'comment',
		label: 'Comments',
	},
	{
		id: 'emails',
		icon: 'email',
		label: 'Emails',
	},
];
const bottomList = [
	{
		id: 'docs',
		icon: 'docs',
		label: 'Knowledge base',
	},
	{
		id: 'contacts',
		icon: 'contacts',
		label: 'Contacts',
	},
	{
		id: 'history',
		icon: 'history',
		label: 'History',
		disabled: true,
	},
];

// rail is hidden when both lists are empty
const top = computed(() => (showItems.value ? topList : []));
const bottom = computed(() => (showItems.value ? bottomList : []));
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 16px">
    <wt-checkbox v-model:selected="showItems" label="Show navigation items" />
    <div
      v-for="theme of ['', 'theme--dark']"
      :key="theme"
      :class="theme"
      style="height: 360px"
    >
      <wt-page
        :navigation-rail="{ topItems: top, bottomItems: bottom, activeItemId: active }"
        @navigation-select="active = lastSelected = $event.id"
      >
        <wt-layout>
          <wt-content-wrapper>
            Active: {{ active }}<br />
            Last select event: {{ lastSelected || '—' }}
          </wt-content-wrapper>
        </wt-layout>
      </wt-page>
    </div>
  </div>
</template>