PricingPlanPRO

GitHub
一个可自定义的定价计划，用于在定价页面中显示。

用法

PricingPlan 组件提供了一种灵活的方式来显示定价计划，包括可定制的内容，如标题、描述、价格、功能等。

个人版
最受欢迎
适用于白手起家者和独立开发者。
$249
$199
 /月
  • 一位开发者
  • 无限项目
  • 访问 GitHub 仓库
  • 无限补丁及次要更新
  • 终身访问
使用 PricingPlans 组件以响应式网格布局显示多个定价计划。

标题

使用 title 属性设置 PricingPlan 的标题。

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

描述

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

个人版
适用于白手起家者和独立开发者。
<template>
  <UPricingPlan title="Solo" description="For bootstrappers and indie hackers." />
</template>

Badge

使用 badge 属性在 PricingPlan 标题旁边显示一个 Badge。

个人版
最受欢迎
适用于白手起家者和独立开发者。
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    badge="Most popular"
  />
</template>

您可以传入 Badge 组件的任何属性来自定义它。

个人版
最受欢迎
适用于白手起家者和独立开发者。
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    :badge="{
      label: 'Most popular',
      color: 'neutral',
      variant: 'solid'
    }"
  />
</template>

价格

使用 price 属性设置 PricingPlan 的价格。

个人版
适用于白手起家者和独立开发者。
$249
<template>
  <UPricingPlan title="Solo" description="For bootstrappers and indie hackers." price="$249" />
</template>

折扣

使用 discount 属性设置折扣价格，它将与原始价格一起显示（原始价格将显示为删除线）。

个人版
适用于白手起家者和独立开发者。
$249
$199
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$249"
    discount="$199"
  />
</template>

计费

使用 billing-cycle 和/或 billing-period 属性显示 PricingPlan 的计费信息。

个人版
适用于白手起家者和独立开发者。
$9
按年计费/月
<template>
  <UPricingPlan
    title="Solo"
    description="For bootstrappers and indie hackers."
    price="$9"
    billing-cycle="/month"
    billing-period="billed annually"
  />
</template>

功能

使用 features 属性作为字符串数组，以在 PricingPlan 上显示功能列表

个人版
适用于白手起家者和独立开发者。
$249
  • 一位开发者
  • 无限项目
  • 访问 GitHub 仓库
  • 无限补丁及次要更新
  • 终身访问
<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>
您可以在 app.config.ts 文件中通过 ui.icons.success 键全局自定义此图标。
您可以在 vite.config.ts 文件中通过 ui.icons.success 键全局自定义此图标。

您还可以传入一个包含以下属性的对象数组

  • title: string
  • icon?: string
个人版
适用于白手起家者和独立开发者。
$249
  • 一位开发者
  • 无限项目
  • 访问 GitHub 仓库
  • 无限补丁及次要更新
  • 终身访问
<script setup lang="ts">
const features = ref([
  {
    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 组件的任何属性与 button 属性一起使用，以在 PricingPlan 底部显示一个按钮。

个人版
适用于白手起家者和独立开发者。
$249
  • 一位开发者
  • 无限项目
  • 访问 GitHub 仓库
  • 无限补丁及次要更新
  • 终身访问
<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 属性更改 PricingPlan 的变体。

个人版
适用于白手起家者和独立开发者。
$249
  • 一位开发者
  • 无限项目
  • 访问 GitHub 仓库
  • 无限补丁及次要更新
  • 终身访问
<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 属性更改 PricingPlan 的方向。默认为 vertical。

个人版
适用于白手起家者和独立开发者。
  • 一位开发者
  • 无限项目
  • 访问 GitHub 仓库
  • 终身访问
$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 属性在价格上方显示标语文本。

个人版
适用于白手起家者和独立开发者。
  • 一位开发者
  • 无限项目
  • 访问 GitHub 仓库
  • 终身访问
一次付费，永久拥有
$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 属性在价格下方显示条款。

个人版
适用于白手起家者和独立开发者。
  • 一位开发者
  • 无限项目
  • 访问 GitHub 仓库
  • 终身访问
一次付费，永久拥有
$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"
    terms="Invoices and receipts available."
  />
</template>

高亮显示

使用 highlight 属性在 PricingPlan 周围显示突出显示的边框。

个人版
适用于白手起家者和独立开发者。
$249
  • 一位开发者
  • 无限项目
  • 访问 GitHub 仓库
  • 无限补丁及次要更新
  • 终身访问
<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 属性使某个定价计划比其他计划更大。

请查看 PricingPlans 的 scale 示例，了解它是如何工作的，因为单独演示很难。

API

属性

属性默认值类型
as

'div'

any (任意)

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

title (标题)

string (字符串)

description (描述)

string (字符串)

徽章

string | BadgeProps

在标题旁边显示徽章。可以是字符串或对象。{ color: 'primary', variant: 'subtle' }

billingCycle (计费周期)

string (字符串)

显示在价格旁边的单价周期。通常用于显示重复计费间隔。

billingPeriod (计费期限)

string (字符串)

显示在计费周期上方的额外计费上下文。通常用于显示实际的计费频率。

price (价格)

string (字符串)

方案的当前价格。与 discount 一起使用时，这成为原始价格。

discount (折扣)

string (字符串)

方案的折扣价格。如果提供，price 属性将以删除线显示。

features (功能)

string[] | PricingPlanFeature[]

在价格下方显示功能列表。可以是字符串数组或对象数组。

button (按钮)

ButtonProps

在底部显示一个购买按钮。{ size: 'lg', block: true } 使用 onClick 字段添加点击处理程序。

tagline (标语)

string (字符串)

显示突出定价价值主张的标语。

terms (条款)

string (字符串)

在底部显示条款。

orientation (方向)

'vertical'

"horizontal" | "vertical"

定价计划的方向。

variant (变体)

'outline'

"solid" | "outline" | "soft" | "subtle"

高亮

boolean (布尔值)

在定价方案周围显示一个环以突出显示它。

scale (缩放)

boolean (布尔值)

放大计划使其更突出。

ui

{ root?: ClassNameValue; header?: ClassNameValue; body?: ClassNameValue; footer?: ClassNameValue; titleWrapper?: ClassNameValue; title?: ClassNameValue; description?: ClassNameValue; priceWrapper?: ClassNameValue; price?: ClassNameValue; discount?: ClassNameValue; billing?: ClassNameValue; billingPeriod?: ClassNameValue; billingCycle?: ClassNameValue; features?: ClassNameValue; feature?: ClassNameValue; featureIcon?: ClassNameValue; featureTitle?: ClassNameValue; badge?: ClassNameValue; button?: ClassNameValue; tagline?: ClassNameValue; terms?: ClassNameValue; }

插槽

插槽类型
徽章

{}

title (标题)

{}

description (描述)

{}

price (价格)

{}

discount (折扣)

{}

billing (计费)

{}

features (功能)

{}

button (按钮)

{}

页头

{}

主体

{}

页脚

{}

tagline (标语)

{}

terms (条款)

{}

主题

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

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

Popover (气泡卡片)

一种非模态对话框，围绕触发元素浮动。

PricingPlans (定价计划)

以响应式网格布局显示定价计划列表。