やってみよう曜日のボタンを押してみてください
ボタン・操作部品マイナー(知る人ぞ知る)
トグルボタン(曜日の選択)
Toggle Button Group
「月 火 水…」の丸いボタンが並び、押すと色が付いて選べる。いくつでも選べる。
別名曜日選択トグルボタングループ丸い選択ボタン複数選べるボタン
どこで使われている?
- よく見かける場所
- 目覚ましアラームの繰り返し、習慣アプリ、お店の営業日の設定
- 使うとよい場面
- 少ない選択肢から、いくつかを選んでもらうとき
- 避けたい場面
- 1つだけ選ぶとき(セグメントコントロールかラジオボタンを使う)
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。
HTML / CSS / JavaScript で「トグルボタン(曜日の選択)(Toggle Button Group)」を実装してください。 動き:選べるものを同じ大きさの丸いボタンで横に並べ、押すたびに選択(塗りつぶし)と解除(ふちだけ)を切り替える。複数選べ、下に「平日」「毎日」などの選び方の要約を出す。 使う部品:aria-pressed を持つボタンを並べる(自作)
もっと詳しく:プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | aria-pressed を持つボタンを並べる(自作) |
|---|---|
| iPhoneアプリなら | 自作(Toggle の button スタイル) |
| Androidアプリなら | FilterChip(または IconToggleButton)を並べる |
| Flutterなら | ToggleButtons(または FilterChip) |
| React Nativeなら | 自作 |