PageSection^PRO

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 属性设置 section 的标题。

title

精美的 Vue UI 组件

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

描述

使用 description 属性设置 section 的描述。

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 属性设置 section 的主标题。

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 属性设置 section 的图标。

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: '/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 属性在描述下方显示一个 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 属性更改默认插槽的方向。默认为 vertical。

orientation

精美的 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 属性反转默认插槽的方向。

orientation

reverse

精美的 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`
`orientation`	`'vertical'`	`"horizontal" \| "vertical"`
`icon`		`string` 显示在标题上方的图标。
`reverse`	`false`	`boolean` 反转默认插槽的顺序。
`title`		`string`
`description`		`string`
`links`		`ButtonProps[]` 在描述下方显示一个 Button 列表。 `{ size: 'lg' }`
`headline`		`string` 显示在标题上方的头条。
`features`		`PageFeatureProps[]` 在描述下方显示 PageFeature 列表。
`ui`		`{ root?: ClassNameValue; container?: ClassNameValue; wrapper?: ClassNameValue; headline?: ClassNameValue; leading?: ClassNameValue; ... 4 more ...; features?: ClassNameValue; }`

插槽

插槽	类型
`默认`	`{}`
`顶部`	`{}`
`底部`	`{}`
`headline`	`{}`
`前导`	`{}`
`title`	`{}`
`description`	`{}`
`links`	`{}`
`features`	`{}`

主题

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: '',
        headline: 'mb-3',
        leading: 'flex items-center mb-6',
        leadingIcon: 'size-10 shrink-0 text-primary',
        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',
        links: 'mt-8 flex flex-wrap gap-x-6 gap-y-3',
        features: 'mt-8 grid'
      },
      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: ''
        },
        features: {
          true: ''
        }
      },
      compoundVariants: [
        {
          orientation: 'vertical',
          title: true,
          class: {
            features: 'mt-16'
          }
        },
        {
          orientation: 'vertical',
          description: true,
          class: {
            features: 'mt-16'
          }
        },
        {
          orientation: 'vertical',
          features: true,
          class: {
            links: '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: '',
            headline: 'mb-3',
            leading: 'flex items-center mb-6',
            leadingIcon: 'size-10 shrink-0 text-primary',
            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',
            links: 'mt-8 flex flex-wrap gap-x-6 gap-y-3',
            features: 'mt-8 grid'
          },
          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: ''
            },
            features: {
              true: ''
            }
          },
          compoundVariants: [
            {
              orientation: 'vertical',
              title: true,
              class: {
                features: 'mt-16'
              }
            },
            {
              orientation: 'vertical',
              description: true,
              class: {
                features: 'mt-16'
              }
            },
            {
              orientation: 'vertical',
              features: true,
              class: {
                links: '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: '',
            headline: 'mb-3',
            leading: 'flex items-center mb-6',
            leadingIcon: 'size-10 shrink-0 text-primary',
            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',
            links: 'mt-8 flex flex-wrap gap-x-6 gap-y-3',
            features: 'mt-8 grid'
          },
          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: ''
            },
            features: {
              true: ''
            }
          },
          compoundVariants: [
            {
              orientation: 'vertical',
              title: true,
              class: {
                features: 'mt-16'
              }
            },
            {
              orientation: 'vertical',
              description: true,
              class: {
                features: 'mt-16'
              }
            },
            {
              orientation: 'vertical',
              features: true,
              class: {
                links: 'mt-16'
              }
            }
          ]
        }
      }
    })
  ]
})

PageMarquee

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

Pagination

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

PageSectionPRO

精美的 Vue UI 组件

精美的 Vue UI 组件

精美的 Vue UI 组件

精美的 Vue UI 组件

精美的 Vue UI 组件

精美的 Vue UI 组件

精美的 Vue UI 组件

精美的 Vue UI 组件

精美的 Vue UI 组件

PageSection^PRO