LandingGrid
一个可定制的网格，以砌体布局显示卡片。
使用
在默认插槽中使用一些 LandingCard、PageCard 或任何其他组件来显示一个 **砌体** 网格。
调色板
从 Tailwind CSS 调色板中选择一个主要颜色和一个灰色。
完全可定制
在您的应用程序配置中或使用 ui 属性更改任何组件的样式。
图标
从最流行的图标库中选择任何 100,000 多个图标。
键盘快捷键
Nuxt UI 附带一组 Vue 组合函数，可以轻松处理快捷键。
<template>
<ULandingGrid>
<ULandingCard class="col-span-6 row-span-2" icon="i-heroicons-swatch" title="Color Palette" description="Choose a primary and a gray color from your Tailwind CSS color palette." />
<ULandingCard class="col-span-6 row-span-4" icon="i-heroicons-wrench-screwdriver" title="Fully Customizable" description="Change the style of any component in your App Config or with ui prop." />
<ULandingCard class="col-span-6 row-span-4" icon="i-heroicons-face-smile" title="Icons" description="Choose any of the 100k+ icons from the most popular icon libraries." />
<ULandingCard class="col-span-6 row-span-2" icon="i-heroicons-computer-desktop" title="Keyboard Shortcuts" description="Nuxt UI comes with a set of Vue composables to easily handle shortcuts." />
</ULandingGrid>
</template>
此组件可以直接放入一个 LandingSection 中，其内容可以轻松地从 @nuxt/content 获取
content/index.yml
features:
title: Everything you expect from a<br class="hidden lg:block"> <span class="text-primary">UI component library</span>
cards:
- title: Color Palette
description: 'Choose a primary and a gray color from your Tailwind CSS color palette. Components will be styled accordingly.'
icon: i-heroicons-swatch
to: /getting-started/theming#colors
class: 'col-span-7 row-span-3'
- title: Fully Customizable
description: 'Change the style of any component in your App Config or customize them specifically through the ui prop.'
icon: i-heroicons-wrench-screwdriver
to: /getting-started/theming#components
class: 'col-span-5 row-span-5 lg:mb-10'
- title: Icons
description: 'Choose any of the 100k+ icons from the most popular icon libraries with the Icon component or the icon prop.'
icon: i-heroicons-face-smile
to: /getting-started/theming#icons
class: 'col-span-7 row-span-3'
- title: Light & Dark
description: 'Every component is designed with dark mode in mind. Works out of the box with @nuxtjs/color-mode.'
to: /getting-started/theming#dark-mode
icon: i-heroicons-moon
class: 'col-span-5 row-span-5 lg:-mt-10 lg:mb-20'
- title: Keyboard Shortcuts
description: 'Nuxt UI comes with a set of Vue composables to easily handle keyboard shortcuts in your app.'
icon: i-heroicons-computer-desktop
to: /getting-started/shortcuts
class: 'col-span-7 row-span-3'
我们在此处使用
.yml 文件作为示例，但您可以使用 @nuxt/content 支持的任何格式，如 .md 或 .json。pages/index.vue
<script setup lang="ts">
const { data: page } = await useAsyncData('index', () => queryContent('/').findOne())
</script>
<template>
<ULandingSection :title="page.features.title">
<ULandingGrid>
<ULandingCard
v-for="(card, index) of section.cards"
:key="index"
v-bind="card"
/>
</ULandingGrid>
</ULandingSection>
</template>
属性
ui
DeepPartial<{ wrapper: string; }>
{}插槽
default
{}
配置
{
wrapper: 'flex flex-col lg:grid gap-8 lg:grid-cols-12 relative'
}