Select セレクト

わかりやすい選択肢のリストから選びます。

基本的な使い方

インタラクティブプレビュー

表示モード今のシーンに合った情報量を選びます。

選択中：focus

起動モード起動する前に、利用できるモードを選んでください。

使用できないセレクト

Vue のソースを表示

Vue · TypeScript

<script setup lang="ts">
import { AgmButton, AgmSelect } from 'augma'
import { shallowRef } from 'vue'

const mode = shallowRef('focus')
const destination = shallowRef<string>()
const submitted = shallowRef(false)
const options = [
  { label: '集中モード', value: 'focus' },
  { label: '探索モード', value: 'explore' },
  { label: '使用できないモード', value: 'locked', disabled: true },
]
</script>

<template>
  <div class="example-stack">
    <AgmSelect v-model="mode" label="表示モード" hint="今のシーンに合った情報量を選びます。" :options="options" />
    <output>選択中：{{ mode }}</output>
    <AgmSelect
      v-model="destination"
      label="起動モード"
      hint="起動する前に、利用できるモードを選んでください。"
      placeholder="モードを選択"
      :error="submitted && !destination ? '起動モードを選んでください' : undefined"
      :options="options"
      required
    />
    <AgmButton variant="outline" @click="submitted = true">起動モードを確定</AgmButton>
    <output v-if="submitted && destination" role="status">起動モードを確定しました。</output>
    <AgmSelect label="使用できないセレクト" placeholder="モードを選択" :options="options" disabled />
  </div>
</template>

<style scoped>
.example-stack {
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: 360px;
}
</style>

API

プロパティ	型	デフォルト	説明
id	string	undefined	トリガー要素の ID（省略時は自動生成）
hint	string	undefined	補足説明。セレクトに関連付けられ、エラー時も表示されます
error	string	undefined	エラーメッセージ。同時に無効な状態としてマークします
required	boolean	false	フォームの必須項目
modelValue	string	undefined	v-model で更新
label	string	必須	表示ラベル
options	{ label: string, value: string, disabled?: boolean }[]	必須	各 value は空でない一意の文字列にしてください
placeholder	string	'请选择'	未選択時に表示するテキスト
disabled	boolean	false	選択を無効にする
name	string	undefined	フォームのフィールド名

イベント

• update:modelValue(string)

キーボード操作と利用上の注意

Enter / Space で開き、矢印キーで移動、Enter で選択、Escape で閉じます。文字入力による検索に対応し、無効な項目はスキップします。class / style はフィールドのコンテナに残り、その他の属性とリスナーはトリガーボタンに渡されます。hint / error は自動で関連付けられます。

インストール

import { AgmSelect } from 'augma'
import 'augma/style.css'