页面功能

GitHub
一个展示应用程序关键特性的组件。

用法

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

标题

使用title属性设置特性的标题。

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

说明

使用description prop设置功能的描述。

Theme
Customize Nuxt UI with your own colors, fonts, and more.
<template>
  <UPageFeature
    title="Theme"
    description="Customize Nuxt UI with your own colors, fonts, and more."
  />
</template>

Icon

使用icon道具设置功能的图标。

Theme
Customize Nuxt UI with your own colors, fonts, and more.
<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等。

Theme
Customize Nuxt UI with your own colors, fonts, and more.
<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属性将特征. xp的方向更改为horizontal。

Theme
Customize Nuxt UI with your own colors, fonts, and more.
<template>
  <UPageFeature
    orientation="vertical"
    title="Theme"
    description="Customize Nuxt UI with your own colors, fonts, and more."
    icon="i-lucide-swatch-book"
  />
</template>

API

Props

Prop Default Type
as
'div'
any

The element or component this component should render as.

icon
any

The icon displayed next to the title when orientation is horizontal and above the title when orientation is vertical.

title
string
description
string
orientation
'horizontal'
"horizontal" | "vertical"

The orientation of the page feature.

to
string | it | et
target
null | "_blank" | "_parent" | "_self" | "_top" | string
ui
{ root?: SlotClass; wrapper?: SlotClass; leading?: SlotClass; leadingIcon?: SlotClass; title?: SlotClass; description?: SlotClass; }

Slots

Slot Type
leading
{ ui: object; }
title
{}
description
{}
default
{}

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    pageFeature: {
      slots: {
        root: 'relative rounded-sm',
        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'
          }
        },
        to: {
          true: {
            root: [
              'outline-primary/25 has-focus-visible:outline-3',
              'transition'
            ]
          }
        },
        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 rounded-sm',
            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'
              }
            },
            to: {
              true: {
                root: [
                  'outline-primary/25 has-focus-visible:outline-3',
                  'transition'
                ]
              }
            },
            title: {
              true: {
                description: 'mt-1'
              }
            }
          }
        }
      }
    })
  ]
})

Changelog

No recent changes

PageCTA

A call to action section to display in your pages.

PageGrid

A responsive grid system for displaying content in a flexible layout.