ChooseとChoice

ChooseとChoice

Choose要素とChoice要素は、特にユーザーの選択内容を追跡するのに使用できます。これらの要素は、ObserveイベントとTriggerイベントに関する便利な抽象化を提供します。

<Grid columns='2'>

  <Choose option='example.choose_a' value='1' color='blue'>
    # Option 1

    Explantion of option
  </Choose>

  <Choose option='example.choose_a' value='2' color='red'>
    # Option 2

    Explanation of option
  </Choose>

</Grid>

<Choice option='example.choose_a' value='1' color='blue'>
  You chose option 1
</Choice>

<Choice option='example.choose_a' value='2' color='red'>
  You chose option 2
</Choice>

オプション1

オプションの説明

オプション2

オプションの説明

オプション1を選択しました

オプション2を選択しました

選択内容はページを越えて追跡され、キーcom.box.developer.observable_eventsを使用してローカルストレージに一定期間保持されます。ガイド全体で一意のオプション名と値を使用することが重要です。

スタイル

どちらの要素にも、null (デフォルトでグレー)、greenred、およびblueという4つのテーマを使用できます。さらに、テーマをnoneに設定してパディングと背景を非表示にすることもできます。

<Choose option='example.choose_c' color='none'>
  # Option 1

  Explanation of option
</Choose>

設定されていない選択肢の監視

場合によっては、値がまだ設定されていないときに何らかのテキストを表示することもできます。この場合は、unsetオプションを使用して、代わりにイベントをリッスンするよう要素を設定します。

<Choose option='example.choose_b' value='1'>
  # Option 1

  Explanation of option
</Choose>

<Choice option='example.choose_b' unset>
  This should show by default and hide when the above choice is clicked.
</Choice>

オプション1

オプションの説明

これはデフォルトで表示され、上の選択肢がクリックされると非表示になります。

遅延読み込み

デフォルトで、Choice要素のコンテンツは読み込まれた後に非表示になります。要素を遅延読み込みするには、lazy属性を渡します。

<Choice option='example.lazy' value='value'>
  The content of this element is rendered on page load
</Choice>

<Choice option='example.lazy' value='value' lazy>
  The content of this element is not rendered until the right event is triggered.
</Choice>