Store

Store

Storeは、ユーザーが指定した値を収集して表示するための要素です。

ストアを表示すると、ユーザーにテキストフィールドが示されます。

<Store placeholder='e.g. John' id='example.store_a'>
  Your name
</Store>

ストアに入力されたテキストは、キーcom.box.developer.$id ($idはストアで提供されるID)とともにブラウザのローカルストレージに保存されます。

フィールドの設定

ローカルストレージに保存されたオブジェクトにフィールドを設定するという高度な例もあります。たとえば、ローカルストレージのキーcom.box.developer.example.store_bにオブジェクト{}が含まれていると、以下のように、ストアではユーザーの入力内容がフィールドnameに保存されます。

<Store placeholder='e.g. John' id='example.store_b' field='name'>
  Your name
</Store>

Placeholder

ストアでは、<input />子フィールドに渡されるplaceholderがサポートされます。

ストアの検証

ストアでは、<input />子フィールドに渡され、フィールドの検証に使用されるpatternがサポートされます。

ストアの表示

以前に入力された値をユーザーに再度表示したい場合もあります。このような場合は、以下のように、ストアのインラインバージョンを作成し、編集を無効にして、機密情報をわかりにくくすることができます。

<Store id='example.store_a' disabled inline obscured>
  Your name
</Store>

値のリセット

ユーザーが値をクリアできるようにリセットボタンを表示できます。これは、com.box.developer.$id ($idは渡されたID)で始まる、ローカルストレージ内の任意のキーと一致します。

<ResetButton id='example'>
  Reset all IDs starting with example.
</ResetButton>

複数のIDは、カンマ区切りリストとして渡すことができます。

<ResetButton id='example1,example2'>
  Reset all IDs starting with example1 or example2.
</ResetButton>