页面特色

GitHub
一个用于展示应用程序主要特性的组件。

用法

PageFeature 组件由 PageSection 组件使用，用于显示 features。

标题

使用 title prop 来设置 feature 的标题。

主题
<template>
  <UPageFeature title="Theme" />
</template>

描述

使用 description prop 来设置 feature 的描述。

主题
通过自定义颜色、字体等来定制 Nuxt UI。
<template>
  <UPageFeature
    title="Theme"
    description="Customize Nuxt UI with your own colors, fonts, and more."
  />
</template>

Icon

使用 icon prop 来设置 feature 的图标。

主题
通过自定义颜色、字体等来定制 Nuxt UI。
<template>
  <UPageFeature
    title="Theme"
    description="Customize Nuxt UI with your own colors, fonts, and more."
    icon="i-lucide-swatch-book"
  />
</template>

Link

您可以传递<NuxtLink>组件，例如 to、target、rel 等。

主题
通过自定义颜色、字体等来定制 Nuxt UI。
<template>
  <UPageFeature
    title="Theme"
    description="Customize Nuxt UI with your own colors, fonts, and more."
    icon="i-lucide-swatch-book"
    to="/docs/getting-started/theme/design-system"
    target="_blank"
  />
</template>

Orientation

使用 orientation prop 来改变 feature 的方向。默认值为 horizontal。

主题
通过自定义颜色、字体等来定制 Nuxt UI。
<template>
  <UPageFeature
    orientation="vertical"
    title="Theme"
    description="Customize Nuxt UI with your own colors, fonts, and more."
    icon="i-lucide-swatch-book"
  />
</template>

API

属性

属性默认值类型
as

'div'

any

此组件应渲染为的元素或组件。

图标

字符串 | 对象

当 orientation 为 horizontal 时，图标显示在标题旁边；当 orientation 为 vertical 时，图标显示在标题上方。

title

string

description

string

orientation

'horizontal'

"vertical" | "horizontal"

页面 feature 的方向。

过渡到

字符串 | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

target

null | "_blank" | "_parent" | "_self" | "_top" | string & {}

ui

{ root?: ClassNameValue; wrapper?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; }

插槽

插槽类型
前置

{}

title

{}

description

{}

default

{}

主题

app.config.ts
export default defineAppConfig({
  ui: {
    pageFeature: {
      slots: {
        root: 'relative',
        wrapper: '',
        leading: 'inline-flex items-center justify-center',
        leadingIcon: 'size-5 shrink-0 text-primary',
        title: 'text-base text-pretty font-semibold text-highlighted',
        description: 'text-[15px] text-pretty text-muted'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'flex items-start gap-2.5',
            leading: 'p-0.5'
          },
          vertical: {
            leading: 'mb-2.5'
          }
        },
        title: {
          true: {
            description: 'mt-1'
          }
        }
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        pageFeature: {
          slots: {
            root: 'relative',
            wrapper: '',
            leading: 'inline-flex items-center justify-center',
            leadingIcon: 'size-5 shrink-0 text-primary',
            title: 'text-base text-pretty font-semibold text-highlighted',
            description: 'text-[15px] text-pretty text-muted'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'flex items-start gap-2.5',
                leading: 'p-0.5'
              },
              vertical: {
                leading: 'mb-2.5'
              }
            },
            title: {
              true: {
                description: 'mt-1'
              }
            }
          }
        }
      }
    })
  ]
})

更新日志

61b60— 功能：允许传递组件而不是名称 (#4766)

5cb65— 特性：导入 @nuxt/ui-pro 组件

PageCTA

一个用于在你的页面中显示的号召性用语部分。

PageGrid

一个用于以灵活布局显示内容的响应式网格系统。