Pagería

GitHub también
Un componente para mostrar las características clave de su aplicación.

xph0000xUso

El componente PageFeature es utilizado por el componente PageSection para mostrar features.

Título

Utilice el prop title para establecer el título de la característica.

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

Descripción

Utilice el prop description para establecer la descripción de la característica.

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

Utilice el prop icon para configurar el icono de la función.

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>

Enlace

Puede pasar cualquier propiedad del componente <NuxtLink> como to, target, rel, etc.

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>

Orientación

Utilice el prop orientation para cambiar la orientación de la entidad. Predeterminados a 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>

Xph090xAPI (Edición española)

Accesorios

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 (Edición española)

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

Temas

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'
              }
            }
          }
        }
      }
    })
  ]
})

xph04xChangelog (Edición española)

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.