用法
构建在Card 组件之上，PricingCard 可以用于PricingGrid 中。
使用 title、description、price、discount 和 cycle 属性来自定义卡片。
单一
最受欢迎适用于初创企业和独立黑客。
$199
/月
- 一个开发者
- 无限项目
- 无限次小版本和补丁更新
- 终身访问
<template>
<UPricingCard
title="Solo"
description="For bootstrappers and indie hackers."
price="$199"
discount=""
cycle="/month"
:highlight="false"
:badge="{ label: 'Most popular' }"
:button="{ label: 'Buy now' }"
orientation="vertical"
align="bottom"
:features="['One developer', 'Unlimited projects', 'Unlimited minor & patch updates', 'Lifetime access']"
/>
</template>
插槽
页眉
{}
标题
{}
描述
{}
功能
{}
金额
{}
周期
{}
底部
{}
页脚
{}
属性
标题
字符串
未定义描述
字符串
未定义ui
任何
{}按钮
按钮 & { click?: (...args: any[]) => void; }
未定义对齐
"top" | "bottom"
"bottom"方向
"vertical" | "horizontal"
"vertical"功能
字符串数组
[]徽章
徽章
未定义价格
字符串
未定义折扣
字符串
未定义周期
字符串
未定义突出显示
布尔值
false缩放
布尔值
false配置
{
wrapper: 'relative flex flex-col self-stretch w-full',
highlight: 'ring-2 ring-primary dark:ring-primary',
scale: 'lg:scale-[1.1] lg:z-10',
rounded: 'rounded-xl',
body: {
base: 'flex-1 gap-6 lg:gap-x-8 xl:gap-x-10 flex flex-col',
padding: 'p-6 lg:p-8 xl:p-10'
},
inner: 'flex items-center gap-3',
title: 'text-2xl text-gray-900 dark:text-white sm:text-3xl font-semibold truncate',
description: 'text-sm sm:text-base text-gray-500 dark:text-gray-400 mt-2',
amount: {
base: 'flex flex-row items-baseline gap-x-1',
discount: 'text-gray-500 dark:text-gray-400 line-through text-xl sm:text-2xl font-medium',
price: 'text-gray-900 dark:text-white text-2xl sm:text-4xl font-semibold',
cycle: 'text-gray-500 dark:text-gray-400 text-sm/6 font-medium truncate'
},
features: {
vertical: 'space-y-3 text-sm',
horizontal: 'grid lg:grid-cols-2 text-sm gap-3',
item: {
base: 'flex items-center gap-x-3 min-w-0',
label: 'text-gray-600 dark:text-gray-400 truncate',
icon: {
base: 'w-5 h-5 flex-shrink-0 text-primary',
name: 'i-heroicons-check-circle-20-solid'
}
}
},
divider: 'my-6 lg:my-8',
left: '',
right: ''
}