ページ機能

アプリケーションの主要機能を表示するコンポーネント。

使用法

PageFeatureコンポーネントは PageSectionコンポーネントで使用され、featuresを表示します。

Title

titleプロパティを使用してフィーチャーのタイトルを設定します。

title

Theme

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

Description

descriptionプロパティを使用して、フィーチャーの説明を設定します。

description

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プロパティを使用してフィーチャーのアイコンを設定します。

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

フィーチャーの向きを変更するには、orientationプロパティを使用します。デフォルトはhorizontalです。

orientation

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; }`

スロット

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.