コンテンツ v1.0.0

料金表

月額/年額切り替え付きの料金プラン表示。横並びのカード形式、 またはおすすめプランをハイライトした機能比較表形式で利用できます。

カード

機能リスト付きの横並び料金カード

オプション

名前 型 デフォルト 説明
plans * Array 必須 Array of plan hashes with :name, :price, :yearly_price, :period, :description, :features, :cta_label, :cta_href, :popular
currency String "$" Currency symbol
billing_period Boolean false Show monthly/yearly toggle
monthly_label String "Monthly" Monthly toggle label
yearly_label String "Yearly" Yearly toggle label
yearly_discount String "Save 20%" Yearly discount badge text

比較表

プラン間のチェックマーク付き機能比較テーブル

オプション

名前 型 デフォルト 説明
plans * Array 必須 Array of plan hashes with :name, :price, :yearly_price, :cta_label, :cta_href, :popular
feature_groups * Array 必須 Array of feature group hashes with :name and :features array
currency String "$"
billing_period Boolean false
monthly_label String "Monthly"
yearly_label String "Yearly"
yearly_discount String "Save 20%"

変更履歴 v1.0.0

- Initial release with cards and comparison styles
- Monthly/yearly billing toggle
- Popular plan highlighting

フルアクセスを取得

このコンポーネントと他のすべてのソースコードをアンロックしましょう。一回のお支払いで永久アクセス。

今すぐアクセスを取得