やってみよう行を左にスッとずらしてみてください(大きくずらすと即削除)
ジェスチャーメジャー(よく見る)
スワイプアクション
Swipe Actions / Swipe to Delete
リストの行を横にスッとずらすと、裏から「削除」などのボタンが出てくる。
別名スワイプで削除スワイプ削除Swipe to Dismissスワイプメニュー
どこで使われている?
- よく見かける場所
- iPhoneのメール、LINE、Gmail、やることリストアプリ
- 使うとよい場面
- 一覧の行ごとに「削除」「アーカイブ」などの操作をすばやくしたいとき
- 避けたい場面
- 操作の存在に気づいてほしい場面(隠れているので、ボタンでも同じ操作を用意する)
AIへの指示文
これをコピーしてAIに貼り付ければOKです。Webサイトを作る前提の内容です(右上の「何を作る?」で変えられます)。
HTML / CSS / JavaScript で「スワイプアクション(Swipe Actions / Swipe to Delete)」を実装してください。 動き:リストの各行を左方向にスワイプすると、行がずれて裏側に赤い「削除」ボタンが現れる。ボタンをタップする、または大きくスワイプすると行が削除される。 使う部品:Swipe Actions(Pointer Events で自作)
もっと詳しく:プログラムでの部品名
同じ動きでも、作るものによってプログラムの中での部品の名前が違います。上の指示文にはすでに入っているので、覚える必要はありません。AIの説明に出てきた単語を確認したいときに使ってください。
| Webサイトなら | Swipe Actions(Pointer Events で自作) |
|---|---|
| iPhoneアプリなら | .swipeActions { }(削除だけなら .onDelete) |
| Androidアプリなら | SwipeToDismissBox |
| Flutterなら | Dismissible(ボタンを出すなら flutter_slidable) |
| React Nativeなら | Swipeable(react-native-gesture-handler) |