页面节

GitHub
一个用于您页面的响应式章节。

用法

PageSection 组件将您的内容包裹在容器中，同时保持全宽灵活性，方便添加背景颜色、图像或图案。它提供了一种灵活的方式，可以在默认插槽中显示带插图的内容。

功能

精美的 Vue UI 组件

Nuxt UI 提供了一套全面的组件和实用工具，帮助您使用 Vue 和 Nuxt 构建精美且易于访问的 Web 应用程序。
  • 图标
    Nuxt UI 与 Nuxt Icon 集成，可访问 Iconify 中的 200,000 多个图标。
  • 字体
    Nuxt UI 集成了 Nuxt Fonts，为您提供即插即用的字体优化。
  • 颜色模式
    Nuxt UI 集成了 Nuxt Color Mode，可在亮色和暗色之间切换。

在PageHero组件之后使用

<template>
  <UPageHero />

  <UPageSection />
</template>

标题

使用 title 属性设置部分的标题。

精美的 Vue UI 组件

<template>
  <UPageSection title="Beautiful Vue UI components" />
</template>

描述

使用 description 属性设置部分的描述。

精美的 Vue UI 组件

Nuxt UI 提供了一套全面的组件和实用工具，帮助您使用 Vue 和 Nuxt 构建精美且易于访问的 Web 应用程序。
<template>
  <UPageSection
    title="Beautiful Vue UI components"
    description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
  />
</template>

标题行

使用 headline 属性设置部分的标题。

功能

精美的 Vue UI 组件

Nuxt UI 提供了一套全面的组件和实用工具，帮助您使用 Vue 和 Nuxt 构建精美且易于访问的 Web 应用程序。
<template>
  <UPageSection
    title="Beautiful Vue UI components"
    description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    headline="Features"
  />
</template>

Icon

使用 icon 属性设置部分的图标。

精美的 Vue UI 组件

Nuxt UI 提供了一套全面的组件和实用工具，帮助您使用 Vue 和 Nuxt 构建精美且易于访问的 Web 应用程序。
<template>
  <UPageSection
    title="Beautiful Vue UI components"
    description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    icon="i-lucide-rocket"
  />
</template>

功能

使用 features 属性在描述下方显示 PageFeature 列表，作为具有以下属性的对象数组

  • title?: string
  • description?: string
  • icon?: string
  • orientation?: 'horizontal' | 'vertical'

您可以传递 Link 组件的任何属性，例如 to、target 等。

精美的 Vue UI 组件

Nuxt UI 提供了一套全面的组件和实用工具，帮助您使用 Vue 和 Nuxt 构建精美且易于访问的 Web 应用程序。
  • 图标
    Nuxt UI 与 Nuxt Icon 集成，可访问 Iconify 中的 200,000 多个图标。
  • 字体
    Nuxt UI 集成了 Nuxt Fonts，为您提供即插即用的字体优化。
  • 颜色模式
    Nuxt UI 集成了 Nuxt Color Mode，可在亮色和暗色之间切换。
<script setup lang="ts">
const features = ref([
  {
    title: 'Icons',
    description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/docs/getting-started/integrations/icons'
  },
  {
    title: 'Fonts',
    description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/docs/getting-started/integrations/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/docs/getting-started/integrations/color-mode'
  }
])
</script>

<template>
  <UPageSection
    title="Beautiful Vue UI components"
    description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    :features="features"
  />
</template>

链接

使用 links prop 在描述下方显示一个 Button 列表。

精美的 Vue UI 组件

Nuxt UI 提供了一套全面的组件和实用工具，帮助您使用 Vue 和 Nuxt 构建精美且易于访问的 Web 应用程序。
开始使用探索组件
<script setup lang="ts">
const links = ref([
  {
    label: 'Get started',
    to: '/docs/getting-started',
    icon: 'i-lucide-square-play',
    color: 'neutral'
  },
  {
    label: 'Explore components',
    to: '/docs/components/app',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageSection
    title="Beautiful Vue UI components"
    description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    :links="links"
  />
</template>

Orientation

使用 orientation prop 来更改默认插槽的布局方向。默认为 vertical。

精美的 Vue UI 组件

Nuxt UI 提供了一套全面的组件和实用工具，帮助您使用 Vue 和 Nuxt 构建精美且易于访问的 Web 应用程序。
  • 图标
    Nuxt UI 与 Nuxt Icon 集成，可访问 Iconify 中的 200,000 多个图标。
  • 字体
    Nuxt UI 集成了 Nuxt Fonts，为您提供即插即用的字体优化。
  • 颜色模式
    Nuxt UI 集成了 Nuxt Color Mode，可在亮色和暗色之间切换。
探索组件
<script setup lang="ts">
const features = ref([
  {
    title: 'Icons',
    description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/docs/getting-started/integrations/icons'
  },
  {
    title: 'Fonts',
    description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/docs/getting-started/integrations/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/docs/getting-started/integrations/color-mode'
  }
])
const links = ref([
  {
    label: 'Explore components',
    to: '/docs/components/app',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageSection
    title="Beautiful Vue UI components"
    description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    icon="i-lucide-rocket"
    orientation="horizontal"
    :features="features"
    :links="links"
  >
    <img
      src="https://picsum.photos/704/1294"
      width="352"
      height="647"
      alt="Illustration"
      class="w-full rounded-lg"
    />
  </UPageSection>
</template>

反转

使用 reverse prop 反转默认插槽的方向。

精美的 Vue UI 组件

Nuxt UI 提供了一套全面的组件和实用工具，帮助您使用 Vue 和 Nuxt 构建精美且易于访问的 Web 应用程序。
  • 图标
    Nuxt UI 与 Nuxt Icon 集成，可访问 Iconify 中的 200,000 多个图标。
  • 字体
    Nuxt UI 集成了 Nuxt Fonts，为您提供即插即用的字体优化。
  • 颜色模式
    Nuxt UI 集成了 Nuxt Color Mode，可在亮色和暗色之间切换。
探索组件
<script setup lang="ts">
const features = ref([
  {
    title: 'Icons',
    description: 'Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.',
    icon: 'i-lucide-smile',
    to: '/docs/getting-started/integrations/icons'
  },
  {
    title: 'Fonts',
    description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/docs/getting-started/integrations/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/docs/getting-started/integrations/color-mode'
  }
])
const links = ref([
  {
    label: 'Explore components',
    to: '/docs/components/app',
    color: 'neutral',
    variant: 'subtle',
    trailingIcon: 'i-lucide-arrow-right'
  }
])
</script>

<template>
  <UPageSection
    title="Beautiful Vue UI components"
    description="Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt."
    icon="i-lucide-rocket"
    orientation="horizontal"
    reverse
    :features="features"
    :links="links"
  >
    <img
      src="https://picsum.photos/704/1294"
      width="352"
      height="647"
      alt="Illustration"
      class="w-full rounded-lg"
    />
  </UPageSection>
</template>

API

属性

属性默认值类型
as'section'any

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

headlinestring

显示在标题上方的标题。

图标any

显示在标题上方的图标。

titlestring
descriptionstring
linksButtonProps[]

在描述下方显示按钮列表。{ size: 'lg' }

功能PageFeatureProps[]

在描述下方显示 PageFeature 列表。

orientation'vertical'"vertical" | "horizontal"

部分的朝向。

reversefalseboolean

反转默认插槽的顺序。

ui{ root?: ClassNameValue; container?: ClassNameValue; wrapper?: ClassNameValue; header?: ClassNameValue; leading?: ClassNameValue; leadingIcon?: ClassNameValue; headline?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; body?: ClassNameValue; features?: ClassNameValue; footer?: ClassNameValue; links?: ClassNameValue; }

插槽

插槽类型
top{}
页头{}
前置{ ui: object; }
headline{}
title{}
description{}
主体{}
功能{}
页脚{}
links{}
default{}
bottom{}

主题

app.config.ts
export default defineAppConfig({
  ui: {
    pageSection: {
      slots: {
        root: 'relative isolate',
        container: 'flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16',
        wrapper: '',
        header: '',
        leading: 'flex items-center mb-6',
        leadingIcon: 'size-10 shrink-0 text-primary',
        headline: 'mb-3',
        title: 'text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted',
        description: 'text-base sm:text-lg text-muted',
        body: 'mt-8',
        features: 'grid',
        footer: 'mt-8',
        links: 'flex flex-wrap gap-x-6 gap-y-3'
      },
      variants: {
        orientation: {
          horizontal: {
            container: 'lg:grid-cols-2 lg:items-center',
            description: 'text-pretty',
            features: 'gap-4'
          },
          vertical: {
            container: '',
            headline: 'justify-center',
            leading: 'justify-center',
            title: 'text-center',
            description: 'text-center text-balance',
            links: 'justify-center',
            features: 'sm:grid-cols-2 lg:grid-cols-3 gap-8'
          }
        },
        reverse: {
          true: {
            wrapper: 'lg:order-last'
          }
        },
        headline: {
          true: {
            headline: 'font-semibold text-primary flex items-center gap-1.5'
          }
        },
        title: {
          true: {
            description: 'mt-6'
          }
        },
        description: {
          true: ''
        },
        body: {
          true: ''
        }
      },
      compoundVariants: [
        {
          orientation: 'vertical',
          title: true,
          class: {
            body: 'mt-16'
          }
        },
        {
          orientation: 'vertical',
          description: true,
          class: {
            body: 'mt-16'
          }
        },
        {
          orientation: 'vertical',
          body: true,
          class: {
            footer: 'mt-16'
          }
        }
      ]
    }
  }
})
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: {
        pageSection: {
          slots: {
            root: 'relative isolate',
            container: 'flex flex-col lg:grid py-16 sm:py-24 lg:py-32 gap-8 sm:gap-16',
            wrapper: '',
            header: '',
            leading: 'flex items-center mb-6',
            leadingIcon: 'size-10 shrink-0 text-primary',
            headline: 'mb-3',
            title: 'text-3xl sm:text-4xl lg:text-5xl text-pretty tracking-tight font-bold text-highlighted',
            description: 'text-base sm:text-lg text-muted',
            body: 'mt-8',
            features: 'grid',
            footer: 'mt-8',
            links: 'flex flex-wrap gap-x-6 gap-y-3'
          },
          variants: {
            orientation: {
              horizontal: {
                container: 'lg:grid-cols-2 lg:items-center',
                description: 'text-pretty',
                features: 'gap-4'
              },
              vertical: {
                container: '',
                headline: 'justify-center',
                leading: 'justify-center',
                title: 'text-center',
                description: 'text-center text-balance',
                links: 'justify-center',
                features: 'sm:grid-cols-2 lg:grid-cols-3 gap-8'
              }
            },
            reverse: {
              true: {
                wrapper: 'lg:order-last'
              }
            },
            headline: {
              true: {
                headline: 'font-semibold text-primary flex items-center gap-1.5'
              }
            },
            title: {
              true: {
                description: 'mt-6'
              }
            },
            description: {
              true: ''
            },
            body: {
              true: ''
            }
          },
          compoundVariants: [
            {
              orientation: 'vertical',
              title: true,
              class: {
                body: 'mt-16'
              }
            },
            {
              orientation: 'vertical',
              description: true,
              class: {
                body: 'mt-16'
              }
            },
            {
              orientation: 'vertical',
              body: true,
              class: {
                footer: 'mt-16'
              }
            }
          ]
        }
      }
    })
  ]
})

更新日志

dd81d— feat: 添加 data-slot 属性 (#5447)

63c0a— feat: 在使用的 slot prop 中暴露 ui (#5207)

61b60— 功能：允许传递组件而不是名称 (#4766)

5cb65— 特性：导入 @nuxt/ui-pro 组件

PageLogos

要在页面上显示的徽标或图像列表。

PricingPlan

可在定价页面中显示的自定义定价方案。