PageFeature

GitHub
Eine Komponente, um die wichtigsten Funktionen Ihrer Anwendung zu präsentieren.

Bearbeiten

Die Komponente PageFeature wird von der Komponente PageSection verwendet, um features anzuzeigen.

title

Verwenden Sie die title-Prop, um den Titel des Features festzulegen.

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

Beschreibung

Verwenden Sie die description-Prop, um die Beschreibung des Features festzulegen.

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 Bearbeiten

Verwenden Sie die icon-Prop, um das Symbol der Funktion festzulegen.

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 auf

Sie können jede Eigenschaft der Komponente <NuxtLink> übergeben, z. B. to, target, rel usw.

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>

Ausrichtung

Verwenden Sie die orientation-prop, um die Ausrichtung des Features zu ändern. Standardmäßig ist 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 (englisch)

Props (englisch)

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 Bearbeiten

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

Theme (englisch)

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 (englisch)

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.