PageFeature专业版

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

用法

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

标题

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

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

描述

使用 description 属性来设置该特性的描述。

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

Icon

使用 icon 属性来设置该特性的图标。

主题
使用自定义颜色、字体等来自定义 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="/getting-started/theme"
  />
</template>

方向

使用 orientation 属性来更改该特性的方向。默认为 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

属性 (Props)

属性默认值类型
as

'div'

any

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

orientation

'horizontal'

"horizontal" | "vertical"

icon

string

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

target

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

to

string | RouteLocationAsRelativeGeneric | RouteLocationAsPathGeneric

title

string

description

string

ui

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

插槽 (Slots)

插槽类型
leading

{}

title

{}

description

{}

default

{}

主题

app.config.ts
export default defineAppConfig({
  uiPro: {
    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({
      uiPro: {
        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 uiPro from '@nuxt/ui-pro/vite'

export default defineConfig({
  plugins: [
    vue(),
    uiPro({
      uiPro: {
        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'
              }
            }
          }
        }
      }
    })
  ]
})

PageCTA

一个用于在页面中展示行动号召的区块。

PageGrid

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