@webitel/ui

Appearance

wt-app-header.vue ​

Specs ​

WtAppHeader ​

Slots

Name Scope Description
default

WtAppNavigator ​

Props

Name Required Types Default Description Example Deprecated
currentApp String - Currently opened app
apps Array [] Available apps with its links
darkMode boolean false

WtHeaderActions ​

Props

Name Required Types Default Description Example Deprecated
user Object {} User info object. Should have preferredUsername or account and name or username fields for representation.
In most cases, this is the data returned from /userinfo api.
buildInfo Object - Build info object. Should have "release" and "build" string fields for representation.

Events

Name Params Description
settings
logout

Example App Header ​

lorem ipsum
Code
vue
<script setup></script>

<template>
  <wt-app-header> lorem ipsum </wt-app-header>
</template>

Example App Navigator ​

Code
vue
<script setup>
import { WtApplication } from '@webitel/ui-sdk/enums';

const apps = [
	{
		name: WtApplication.Agent,
		href: 'https://example.com',
	},
	{
		name: WtApplication.Audit,
		href: 'https://example.com',
	},
	{
		name: WtApplication.Supervisor,
		href: 'https://example.com',
	},
	{
		name: WtApplication.Crm,
		href: 'https://example.com',
	},
	{
		name: WtApplication.Admin,
		href: 'https://example.com',
	},
	{
		name: WtApplication.History,
		href: 'https://example.com',
	},
	{
		name: WtApplication.Analytics,
		href: 'https://example.com',
	},
];
</script>

<template>
  <wt-app-header>
    <wt-app-navigator
      current-app="admin"
      :apps="apps"
      dark-mode
    />
    <wt-app-navigator
      current-app="admin"
      :apps="apps"
    />
  </wt-app-header>
</template>

<style scoped lang="scss"></style>

Example Header Actions ​

Code
vue
<script setup>
const user = {
  name: 'My name',
  preferredUsername: 'My username',
};

const buildInfo = {
  release: '21.02',
  build: 'AWS-12',
};
</script>

<template>
  <wt-app-header>
    <wt-header-actions
      :user="user"
      :build-info="buildInfo"
    />
  </wt-app-header>
</template>

<style scoped lang="scss"></style>