Қаңқа

Беттің негізгі макет құрылымын, соның ішінде тақырып, мазмұн аймағы және төменгі колонтитулды қамтамасыз етеді.

Орнату

npx alixan-ui-nuxt add scaffold

Қолдану

App Bar

Body

Bottom Navigation Bar

<script setup lang="ts">
import Scaffold from '@/components/ui/scaffold/Scaffold.vue'
</script>

<template>
	<Scaffold>
		<template #app-bar>
			<div class="h-14 flex items-center justify-center px-4 border-b">
				<h1 class="text-xl font-semibold">App Bar</h1>
			</div>
		</template>

		<template #body>
			<h1 class="mb-4 text-xl font-semibold">Body</h1>
			<div class="h-80 rounded-2xl bg-secondary" />
		</template>

		<template #bottom-navigation-bar>
			<div class="h-14 flex items-center justify-center px-4 border-t">
				<h1 class="text-xl font-semibold">
					Bottom Navigation Bar
				</h1>
			</div>
		</template>
	</Scaffold>
</template>

API анықтамасы

Slots

Қасиет	Сипаттама
app-bar	Қолданбаның жоғарғы тақтасын көрсетеді.
body	Негізгі айналдырылатын мазмұн аймағын көрсетеді.
bottom-navigation-bar	Төменгі навигация тақтасын көрсетеді.