Каркас

Предоставляет базовую структуру макета для страницы, включая заголовок, область контента и подвал.

Установка

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	Отображает нижнюю панель навигации.