PricingPlan 가격계획

Github (GitHub)

가격책정 페이지에 표시할 사용자 정의된 가격책정 계획.

Usage

PricingPlan 구성요소는 제목, 설명, 가격, 기능 등을 포함하여 사용자 정의 가능한 컨텐츠가 있는 가격책정 계획을 유연하게 표시할 수 있는 방법을 제공합니다.

Solo

제목

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

title

Solo

<template>
  <UPricingPlan title="Solo" class="w-96" />
</template>

Description

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

description

Solo

For bootstrappers and indie hackers.

<template>
  <UPricingPlan title="Solo" description="For bootstrappers and indie hackers." />
</template>

Badge

badge prop를 사용하여 PricingPlan 제목 옆에 Badge를 표시합니다.

badge

Solo

Price 가격

price prop을 사용하여 PricingPlan의 가격을 설정합니다.

price

Solo

For bootstrappers and indie hackers.

$249

<template>
  <UPricingPlan title="Solo" description="For bootstrappers and indie hackers." price="$249" />
</template>

Discount 할인

discount prop을 사용하여 원래 가격과 함께 표시 될 할인 된 가격을 설정합니다 (취소 선으로 표시됩니다).

price

discount

Solo

For bootstrappers and indie hackers.

$249

$199

<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    discount="$199"
  />
</template>

Billing 결제

billing-cycle 및/또는 billing-period props를 사용하여 PricingPlan의 청구 정보를 표시합니다.

price

billingCycle

billingPeriod

Solo

For bootstrappers and indie hackers.

billed annually/month

<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$9"
    billing-cycle="/month"
    billing-period="billed annually"
  />
</template>

features 기능

features prop을 문자열 배열로 사용하여 PricingPlan에 기능 목록을 표시합니다.

Solo

For bootstrappers and indie hackers.

$249

One developer
Unlimited projects
Access to GitHub repository
Unlimited patch & minor updates
Lifetime access

<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Unlimited patch & minor updates',
      'Lifetime access'
    ]"
  />
</template>

ui.icons.success 키 아래의 app.config.ts에서 이 아이콘을 전역적으로 사용자 정의할 수 있습니다.

ui.icons.success 키 아래의 vite.config.ts에서 이 아이콘을 전역적으로 사용자 정의할 수 있습니다.

또한 다음 속성을 사용하여 객체 배열을 전달할 수 있습니다.

title: string
icon?: string (- icon?: string)

Solo

For bootstrappers and indie hackers.

$249

One developer
Unlimited projects
Access to GitHub repository
Unlimited patch & minor updates
Lifetime access

<script setup lang="ts">
import type { PricingPlanFeature } from '@nuxt/ui'

const features = ref<PricingPlanFeature[]>([
  {
    title: 'One developer',
    icon: 'i-lucide-user'
  },
  {
    title: 'Unlimited projects',
    icon: 'i-lucide-infinity'
  },
  {
    title: 'Access to GitHub repository',
    icon: 'i-lucide-github'
  },
  {
    title: 'Unlimited patch & minor updates',
    icon: 'i-lucide-refresh-cw'
  },
  {
    title: 'Lifetime access',
    icon: 'i-lucide-clock'
  }
])
</script>

<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="features"
  />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import type { PricingPlanFeature } from '@nuxt/ui'

const features = ref<PricingPlanFeature[]>([
  {
    title: 'One developer',
    icon: 'i-lucide-user'
  },
  {
    title: 'Unlimited projects',
    icon: 'i-lucide-infinity'
  },
  {
    title: 'Access to GitHub repository',
    icon: 'i-lucide-github'
  },
  {
    title: 'Unlimited patch & minor updates',
    icon: 'i-lucide-refresh-cw'
  },
  {
    title: 'Lifetime access',
    icon: 'i-lucide-clock'
  }
])
</script>

<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="features"
  />
</template>

Button (### Button)

PricingPlan의 맨 아래에 버튼을 표시하려면 Button 구성 요소의 속성과 함께 button prop을 사용합니다.

button.label

Solo

For bootstrappers and indie hackers.

$249

One developer
Unlimited projects
Access to GitHub repository
Unlimited patch & minor updates
Lifetime access

<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Unlimited patch & minor updates',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
  />
</template>

onClick 필드를 사용하여 계획 구매를 트리거하는 클릭 처리기를 추가합니다.

Variant (### Variant)

variant prop을 사용하여 PricingPlan의 변형을 변경합니다.

variant

Solo

For bootstrappers and indie hackers.

$249

One developer
Unlimited projects
Access to GitHub repository
Unlimited patch & minor updates
Lifetime access

<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Unlimited patch & minor updates',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
    variant="subtle"
  />
</template>

방향

orientation prop을 사용하여 PricingPlan.Defaults의 방향을 vertical로 변경합니다.

orientation

variant

Solo

For bootstrappers and indie hackers.

One developer
Unlimited projects
Access to GitHub repository
Lifetime access

$249

<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
    orientation="horizontal"
    variant="outline"
  />
</template>

태그라인

tagline prop을 사용하여 가격 위에 태그 라인 텍스트를 표시합니다.

tagline

Solo

For bootstrappers and indie hackers.

One developer
Unlimited projects
Access to GitHub repository
Lifetime access

Pay once, own it forever

$249

<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
    orientation="horizontal"
    tagline="Pay once, own it forever"
  />
</template>

Terms (### Terms)

terms prop를 사용하여 가격 아래의 용어를 표시합니다.

terms

Solo

For bootstrappers and indie hackers.

One developer
Unlimited projects
Access to GitHub repository
Lifetime access

Pay once, own it forever

$249

Invoices and receipts available.

<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
    orientation="horizontal"
    tagline="Pay once, own it forever"
    terms="Invoices and receipts available."
  />
</template>

하이라이트

highlight prop을 사용하여 PricingPlan 주위에 강조 표시된 테두리를 표시합니다.

highlight

Solo

For bootstrappers and indie hackers.

$249

One developer
Unlimited projects
Access to GitHub repository
Unlimited patch & minor updates
Lifetime access

<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    :features="[
      'One developer',
      'Unlimited projects',
      'Access to GitHub repository',
      'Unlimited patch & minor updates',
      'Lifetime access'
    ]"
    :button="{
      label: 'Buy now'
    }"
    highlight
  />
</template>

Scale (### Scale)

scale prop을 사용하여 PricingPlan을 다른 것보다 크게 만듭니다.

PricingPlans의 scale 예제를 확인하여 자체적으로 입증하기가 어렵기 때문에 어떻게 작동하는지 확인하십시오.

API 파일

Props (### Props)

Prop	Default	Type
`as`	`'div'`	`any` The element or component this component should render as.
`title`		`string`
`description`		`string`
`badge`		`string \| BadgeProps` Display a badge next to the title. Can be a string or an object. `{ color: 'primary', variant: 'subtle' }`
`billingCycle`		`string` The unit price period that appears next to the price. Typically used to show the recurring interval.
`billingPeriod`		`string` Additional billing context that appears above the billing cycle. Typically used to show the actual billing frequency.
`price`		`string` The current price of the plan. When used with `discount`, this becomes the original price.
`discount`		`string` The discounted price of the plan. When provided, the `price` prop will be displayed as strikethrough.
`features`		`string[] \| PricingPlanFeature[]` Display a list of features under the price. Can be an array of strings or an array of objects.
`button`		`ButtonProps` Display a buy button at the bottom. `{ size: 'lg', block: true }` Use the `onClick` field to add a click handler.
`tagline`		`string` Display a tagline highlighting the pricing value proposition.
`terms`		`string` Display terms at the bottom.
`orientation`	`'vertical'`	`"vertical" \| "horizontal"` The orientation of the pricing plan.
`variant`	`'outline'`	`"soft" \| "solid" \| "outline" \| "subtle"`
`highlight`		`boolean` Display a ring around the pricing plan to highlight it.
`scale`		`boolean` Enlarge the plan to make it more prominent.
`ui`		`{ root?: SlotClass; header?: SlotClass; body?: SlotClass; footer?: SlotClass; titleWrapper?: SlotClass; title?: SlotClass; description?: SlotClass; priceWrapper?: SlotClass; price?: SlotClass; discount?: SlotClass; billing?: SlotClass; billingPeriod?: SlotClass; billingCycle?: SlotClass; features?: SlotClass; feature?: SlotClass; featureIcon?: SlotClass; featureTitle?: SlotClass; badge?: SlotClass; button?: SlotClass; tagline?: SlotClass; terms?: SlotClass; }`

Slots

Slot	Type
`badge`	`{ ui: object; }`
`title`	`{}`
`description`	`{}`
`price`	`{}`
`discount`	`{}`
`billing`	`{ ui: object; }`
`features`	`{}`
`button`	`{ ui: object; }`
`header`	`{}`
`body`	`{}`
`footer`	`{}`
`tagline`	`{}`
`terms`	`{}`

Theme 테마

app.config.ts

export default defineAppConfig({
  ui: {
    pricingPlan: {
      slots: {
        root: 'relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6',
        header: '',
        body: 'flex flex-col min-w-0',
        footer: 'flex flex-col gap-6 items-center',
        titleWrapper: 'flex items-center gap-3',
        title: 'text-highlighted truncate text-2xl sm:text-3xl text-pretty font-semibold',
        description: 'text-muted text-base text-pretty mt-2',
        priceWrapper: 'flex items-center gap-1',
        price: 'text-highlighted text-3xl sm:text-4xl font-semibold',
        discount: 'text-muted line-through text-xl sm:text-2xl',
        billing: 'flex flex-col justify-between min-w-0',
        billingPeriod: 'text-toned truncate text-xs font-medium',
        billingCycle: 'text-muted truncate text-xs font-medium',
        features: 'flex flex-col gap-3 flex-1 mt-6 grow-0',
        feature: 'flex items-center gap-2 min-w-0',
        featureIcon: 'size-5 shrink-0 text-primary',
        featureTitle: 'text-muted text-sm truncate',
        badge: '',
        button: '',
        tagline: 'text-base font-semibold text-default',
        terms: 'text-xs/5 text-muted text-center text-balance'
      },
      variants: {
        orientation: {
          horizontal: {
            root: 'grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default',
            body: 'lg:col-span-2 pb-6 lg:pb-0 lg:pe-6 justify-center',
            footer: 'lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto',
            features: 'lg:grid lg:grid-cols-2 lg:mt-12'
          },
          vertical: {
            footer: 'justify-end',
            priceWrapper: 'mt-6'
          }
        },
        variant: {
          solid: {
            root: 'bg-inverted',
            title: 'text-inverted',
            description: 'text-dimmed',
            price: 'text-inverted',
            discount: 'text-dimmed',
            billingCycle: 'text-dimmed',
            billingPeriod: 'text-dimmed',
            featureTitle: 'text-dimmed'
          },
          outline: {
            root: 'bg-default ring ring-default'
          },
          soft: {
            root: 'bg-elevated/50'
          },
          subtle: {
            root: 'bg-elevated/50 ring ring-default'
          }
        },
        highlight: {
          true: {
            root: 'ring-2 ring-inset ring-primary'
          }
        },
        scale: {
          true: {
            root: 'lg:scale-[1.1] lg:z-[1]'
          }
        }
      },
      compoundVariants: [
        {
          orientation: 'horizontal',
          variant: 'soft',
          class: {
            root: 'divide-accented'
          }
        },
        {
          orientation: 'horizontal',
          variant: 'subtle',
          class: {
            root: 'divide-accented'
          }
        }
      ],
      defaultVariants: {
        variant: 'outline'
      }
    }
  }
})

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: {
        pricingPlan: {
          slots: {
            root: 'relative grid rounded-lg p-6 lg:p-8 xl:p-10 gap-6',
            header: '',
            body: 'flex flex-col min-w-0',
            footer: 'flex flex-col gap-6 items-center',
            titleWrapper: 'flex items-center gap-3',
            title: 'text-highlighted truncate text-2xl sm:text-3xl text-pretty font-semibold',
            description: 'text-muted text-base text-pretty mt-2',
            priceWrapper: 'flex items-center gap-1',
            price: 'text-highlighted text-3xl sm:text-4xl font-semibold',
            discount: 'text-muted line-through text-xl sm:text-2xl',
            billing: 'flex flex-col justify-between min-w-0',
            billingPeriod: 'text-toned truncate text-xs font-medium',
            billingCycle: 'text-muted truncate text-xs font-medium',
            features: 'flex flex-col gap-3 flex-1 mt-6 grow-0',
            feature: 'flex items-center gap-2 min-w-0',
            featureIcon: 'size-5 shrink-0 text-primary',
            featureTitle: 'text-muted text-sm truncate',
            badge: '',
            button: '',
            tagline: 'text-base font-semibold text-default',
            terms: 'text-xs/5 text-muted text-center text-balance'
          },
          variants: {
            orientation: {
              horizontal: {
                root: 'grid-cols-1 lg:grid-cols-3 justify-between divide-y lg:divide-y-0 lg:divide-x divide-default',
                body: 'lg:col-span-2 pb-6 lg:pb-0 lg:pe-6 justify-center',
                footer: 'lg:justify-center lg:items-center lg:p-6 lg:max-w-xs lg:w-full lg:mx-auto',
                features: 'lg:grid lg:grid-cols-2 lg:mt-12'
              },
              vertical: {
                footer: 'justify-end',
                priceWrapper: 'mt-6'
              }
            },
            variant: {
              solid: {
                root: 'bg-inverted',
                title: 'text-inverted',
                description: 'text-dimmed',
                price: 'text-inverted',
                discount: 'text-dimmed',
                billingCycle: 'text-dimmed',
                billingPeriod: 'text-dimmed',
                featureTitle: 'text-dimmed'
              },
              outline: {
                root: 'bg-default ring ring-default'
              },
              soft: {
                root: 'bg-elevated/50'
              },
              subtle: {
                root: 'bg-elevated/50 ring ring-default'
              }
            },
            highlight: {
              true: {
                root: 'ring-2 ring-inset ring-primary'
              }
            },
            scale: {
              true: {
                root: 'lg:scale-[1.1] lg:z-[1]'
              }
            }
          },
          compoundVariants: [
            {
              orientation: 'horizontal',
              variant: 'soft',
              class: {
                root: 'divide-accented'
              }
            },
            {
              orientation: 'horizontal',
              variant: 'subtle',
              class: {
                root: 'divide-accented'
              }
            }
          ],
          defaultVariants: {
            variant: 'outline'
          }
        }
      }
    })
  ]
})

변경 로그

No recent changes

PageSection

A responsive section for your pages.

PricingPlans

Display a list of pricing plans in a responsive grid layout.