Pricing(価格設定)

価格タブを表示するセクションです。

Pricing switcher(価格切り替え)

価格設定スイッチャーは、switch componentに基づいた価格設定セクションのアドオンです。 月額料金と年間料金を切り替えるのに役立ちます。

React と Vue では、三項演算子を使用するだけで、トグル スイッチに何を表示するかを決定できます。 テンプレートを見て、どのように機能するかを確認してください。

HTML テンプレートでは、data-price-output 属性を介してデータを .pricing-item-price 要素に渡す必要があります。

<div class="pricing-item-price" data-price-output='{
    "0": ["$", "35", "monthly"],
    "1": ["$", "27", "annually"]
}'>

0 は「未チェック」を表し、1 は「チェック済み」を表します。

• ドル記号は .pricing-item-price-currency 要素に出力されます。
• 金額は .pricing-item-price-amount 要素に出力されます
• 期間は .pricing-item-price-after 要素に出力されます

React と Vue では、priceOutput 状態/データを設定する必要があります。 テンプレートを見て、どのように機能するかを確認してください。

円貨、カンマ表示は、toLocaleString (opens in a new tab)を使って、カスタマイズする事ができます。

例えば

price.toLocaleString('ja-JP', {
  style: 'currency',
  currency: 'JPY',
}),

Pricing slider(価格スライダー)

Input data is passed via a data-price-input attribute to the <input type="range" /> element:

<input type="range" data-price-input='{
    "0": "1,000",
    "1": "1,250",
    "2": "1,500",
    "3": "2,000",
    "4": "2,500",
    "5": "3,500",
    "6": "6,000",
    "7": "15,000",
    "8": "50,000"
}'>

各値は文字列ではなく文字列の配列であるため、出力データの構造は少し異なります。

<div class="pricing-item-price" data-price-output='{
    "0": ["", "Free", ""],
    "1": ["$", "13", "/m"],
    "2": ["$", "17", "/m"],
    "3": ["$", "21", "/m"],
    "4": ["$", "25", "/m"],
    "5": ["$", "42", "/m"],
    "6": ["$", "58", "/m"],
    "7": ["$", "117", "/m"],
    "8": ["$", "208", "/m"]
}'>

• ドル記号は .pricing-item-price-currency 要素に出力されます。
• 金額は .pricing-item-price-amount 要素に出力されます
• 期間は .pricing-item-price-after 要素に出力されます

React と Vue では、priceInput と PriceOutput の状態/データを設定する必要があります。 テンプレートを見て、どのように機能するかを確認してください。