PageSection专业版

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

用法

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

功能

精美的 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 prop 设置 section 的标题。

精美的 Vue UI 组件

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

描述

使用 description prop 设置 section 的描述。

精美的 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 prop 设置 section 的标题行。

功能

精美的 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 prop 设置 section 的图标。

精美的 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 prop 在描述下方显示一个 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: '/getting-started/icons'
  },
  {
    title: 'Fonts',
    description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/getting-started/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/getting-started/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: '/getting-started',
    icon: 'i-lucide-square-play',
    color: 'neutral'
  },
  {
    label: 'Explore components',
    to: '/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 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: '/getting-started/icons'
  },
  {
    title: 'Fonts',
    description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/getting-started/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/getting-started/color-mode'
  }
])
const links = ref([
  {
    label: 'Explore components',
    to: '/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: '/getting-started/icons'
  },
  {
    title: 'Fonts',
    description: 'Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.',
    icon: 'i-lucide-a-large-small',
    to: '/getting-started/fonts'
  },
  {
    title: 'Color Mode',
    description: 'Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.',
    icon: 'i-lucide-sun-moon',
    to: '/getting-started/color-mode'
  }
])
const links = ref([
  {
    label: 'Explore components',
    to: '/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

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

标题行

string

显示在标题上方的标题行。

图标

string

显示在标题上方的图标。

标题

string

描述

string

links

ButtonProps[]

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

特性

PageFeatureProps[]

在描述下方显示一个 PageFeature 列表。

orientation

'vertical'

"horizontal" | "vertical"

section 的方向。

reverse

false

boolean

反转默认插槽的顺序。

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

插槽

插槽类型
顶部

{}

页头

{}

前置

{}

标题行

{}

标题

{}

描述

{}

主体

{}

特性

{}

页脚

{}

links

{}

默认

{}

底部

{}

主题

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

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

PageMarquee

一个用于创建无限滚动内容的组件。

Pagination

一个用于页面导航的按钮或链接列表。