PageSection 페이지섹션

Github (GitHub)
당신의 페이지에 대한 응답 섹션입니다.

Usage

PageSection 구성 요소는 전체 너비 유연성을 유지하면서 배경색, 이미지 또는 패턴을 쉽게 추가할 수 있도록 컨텐츠를 [Container](/docs/components/containerxph04x로 래핑합니다. 이 구성 요소는 기본 슬롯에 그림과 함께 컨텐츠를 표시하는 유연한 방법을 제공합니다.

Features

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.
  • Icons
    Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
  • Fonts
    Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
  • Color Mode
    Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.

PageHero 구성 요소 다음에 사용합니다.

<template>
  <UPageHero />

  <UPageSection />
</template>

Title 파일

title prop 을 사용하여 섹션의 제목을 설정합니다.

Beautiful Vue UI components

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

설명

description prop 을 사용하여 섹션에 대한 설명을 설정합니다.

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.
<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을 사용하여 섹션의 제목을 설정합니다.

Features

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.
<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 을 사용하여 섹션의 아이콘을 설정합니다.

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.
<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 (- title?: string)
  • description?: string - {lang="ts-type"}
  • icon?: string (- icon?: string)
  • orientation?: 'horizontal' | 'vertical' / - {lang="ts-type"}

Link 구성 요소(예: to, target 등)에서 모든 속성을 전달할 수 있습니다.

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.
  • Icons
    Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
  • Fonts
    Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
  • Color Mode
    Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.
<script setup lang="ts">
import type { PageFeatureProps } from '@nuxt/ui'

const features = ref<PageFeatureProps[]>([
  {
    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>
<script setup lang="ts">
import { ref, provide } from 'vue'
import type { PageFeatureProps } from '@nuxt/ui'

const features = ref<PageFeatureProps[]>([
  {
    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 목록을 표시합니다.

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.
Get startedExplore components
<script setup lang="ts">
import type { ButtonProps } from '@nuxt/ui'

const links = ref<ButtonProps[]>([
  {
    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>
<script setup lang="ts">
import { ref } from 'vue'
import type { ButtonProps } from '@nuxt/ui'

const links = ref<ButtonProps[]>([
  {
    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 소품을 사용하여 기본 슬롯을 사용하여 방향을 변경합니다. 기본값은 vertical입니다.

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.
  • Icons
    Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
  • Fonts
    Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
  • Color Mode
    Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.
Explore components
<script setup lang="ts">
import type { PageFeatureProps, ButtonProps } from '@nuxt/ui'

const features = ref<PageFeatureProps[]>([
  {
    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<ButtonProps[]>([
  {
    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"
      loading="lazy"
    />
  </UPageSection>
</template>
<script setup lang="ts">
import { ref, provide } from 'vue'
import type { PageFeatureProps, ButtonProps } from '@nuxt/ui'

const features = ref<PageFeatureProps[]>([
  {
    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<ButtonProps[]>([
  {
    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"
      loading="lazy"
    />
  </UPageSection>
</template>

역

reverse 소품을 사용하여 기본 슬롯의 방향을 반대로 합니다.

Beautiful Vue UI components

Nuxt UI provides a comprehensive suite of components and utilities to help you build beautiful and accessible web applications with Vue and Nuxt.
  • Icons
    Nuxt UI integrates with Nuxt Icon to access over 200,000+ icons from Iconify.
  • Fonts
    Nuxt UI integrates with Nuxt Fonts to provide plug-and-play font optimization.
  • Color Mode
    Nuxt UI integrates with Nuxt Color Mode to switch between light and dark.
Explore components
<script setup lang="ts">
import type { PageFeatureProps, ButtonProps } from '@nuxt/ui'

const features = ref<PageFeatureProps[]>([
  {
    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<ButtonProps[]>([
  {
    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"
      loading="lazy"
    />
  </UPageSection>
</template>
<script setup lang="ts">
import { ref, provide } from 'vue'
import type { PageFeatureProps, ButtonProps } from '@nuxt/ui'

const features = ref<PageFeatureProps[]>([
  {
    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<ButtonProps[]>([
  {
    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"
      loading="lazy"
    />
  </UPageSection>
</template>

API 파일

Props (### Props)

Prop Default Type
as
'section'
any

The element or component this component should render as.

headline
string

The headline displayed above the title.

icon
any

The icon displayed above the title.

title
string
description
string
links
ButtonProps[]

Display a list of Button under the description. { size: 'lg' }

features
PageFeatureProps[]

Display a list of PageFeature under the description.

orientation
'vertical'
"vertical" | "horizontal"

The orientation of the section.

reverse
false
boolean

Reverse the order of the default slot.

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

Slots

Slot Type
top
{}
header
{}
leading
{ ui: object; }
headline
{}
title
{}
description
{}
body
{}
features
{}
footer
{}
links
{}
default
{}
bottom
{}

Theme (## Theme)

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

변경 로그

No recent changes

PageLogos

A list of logos or images to display on your pages.

PricingPlan

A customizable pricing plan to display in a pricing page.