Қолданба жолағы

Compact және Silver нұсқалары бар Alixan UI навигация панелі.

Орнату

npx alixan-ui-nuxt add app-bar

Ықшам

Басты бет

Page content

<script setup lang="ts">
import { Menu } from '@lucide/vue';

import AppBar from '@/components/ui/app-bar/AppBar.vue';
import Avatar from '@/components/ui/avatar/Avatar.vue';
import IconButton from '@/components/ui/button/IconButton.vue';
import Scaffold from '@/components/ui/scaffold/Scaffold.vue';
</script>

<template>
	<Scaffold>
		<template #app-bar>
			<AppBar title="appBar.dashboard">
				<template #leading>
					<IconButton>
						<Menu />
					</IconButton>
				</template>

				<template #trailing>
					<Avatar name="Alixan" />
				</template>
			</AppBar>
		</template>

		<template #body>
			<div class="h-90 mx-4 my-8 border rounded-2xl p-6 text-sm">
				Page content
			</div>
		</template>
	</Scaffold>
</template>

Silver

Бетке айналдыру кезінде App Bar ішіне жиналатын ірі тақырып қажет болғанда Silver қолданыңыз. Bottom Navigation Bar бар экрандарда Silver App Bar қолданбаңыз. Навигация деңгейлері түсінікті болуы үшін мұндай экрандарда Compact таңдаңыз.

Басты бет

Page content

<script setup lang="ts">
import { ArrowLeft, Ellipsis, Share } from '@lucide/vue';

import IconButton from '@/components/ui/button/IconButton.vue';
import Scaffold from '@/components/ui/scaffold/Scaffold.vue';
import SilverAppBar from '@/components/ui/app-bar/SilverAppBar.vue';
</script>

<template>
	<Scaffold>
		<template #body>
			<SilverAppBar title="appBar.dashboard">
				<template #leading>
					<IconButton>
						<ArrowLeft />
					</IconButton>
				</template>

				<template #trailing>
					<IconButton>
						<Share />
					</IconButton>

					<IconButton>
						<Ellipsis />
					</IconButton>
				</template>

				<template #observer>
					<h1 class="m-4 text-3xl font-semibold">
						{{ $t('appBar.dashboard') }}
					</h1>
				</template>
			</SilverAppBar>

			<div class="h-90 mx-4 my-8 border rounded-2xl p-6 text-sm">
				Page content
			</div>
		</template>
	</Scaffold>
</template>

API анықтамасы

Қасиет	Түрі	Әдепкі	Сипаттама
title	string	-	Қолданба панелінде көрсетілетін тақырып.
titleAlign	'responsive' \| 'start' \| 'center'	'responsive'	Тақырыптың туралануын басқарады. Responsive режимінде тақырып кіші экрандарда ортаға, ал үлкен экрандарда бастапқы жаққа тураланады.

Slots

Қасиет	Сипаттама
leading	Қолданба панелінің басында көрсетілетін мазмұн, мысалы мәзір немесе артқа қайту түймесі.
trailing	Қолданба панелінің соңында көрсетілетін мазмұн, мысалы әрекеттер немесе аватар.
observer	Silver App Bar бақылайтын мазмұн. Ол көріну аймағынан шыққан кезде ықшам тақырып пен бөлгіш көрсетіледі.