Select Input

選択入力コンポーネント。ISLE ダッシュボードの一部として使用することも、スタンドアロンで使用することもできます。後者の場合、onChange 属性で変更を処理するか、bind 属性でグローバル変数に値をバインドします。

オプション

• bind | string: 割り当てられる番号のグローバル変数名. Default: ''.
• clearable | boolean: 選択をクリアしてもよいかどうかを示すブール値. Default: none.
• defaultValue | (number|string|array|object): 起動時の入力のデフォルト値. Default: none.
• disabled | boolean: 入力がアクティブかどうかを制御します。. Default: false.
• inline | boolean: は入力をインラインで表示するかどうかを示します。. Default: false.
• legend | (string|node): 脇に表示される文字. Default: ''.
• menuPlacement | string: コントロールに対するメニューの配置 (auto, top, bottom のいずれか). Default: 'auto'.
• multi | boolean: 複数の答えを選択できるかどうかを制御する. Default: false.
• onChange | function: コールバック関数. Default: onChange() {}.
• options | array: 利用可能な選択肢を示す配列. Default: [].
• placeholder | string: 最初に表示される値. Default: none.
• tooltip | string: 凡例の上にカーソルを置いたときに表示されるテキスト. Default: none.
• style | object: CSSインラインスタイル. Default: {}.

例としては、以下のようなものがあります。

ライブエディター

<SelectInput legend="Choose the test direction" defaultValue="two-sided" options={[ 'left-sided', 'right-sided', 'two-sided' ]} />

<SelectInput
    legend="Choose the test direction"
    defaultValue="two-sided"
    options={[
        'left-sided',
        'right-sided',
        'two-sided'
    ]}
/>

結果

ReferenceError: Provider is not defined