← 一覧へ

やってみよう行を左にスッとずらしてみてください(大きくずらすと即削除)

ジェスチャーメジャー(よく見る)

スワイプアクション

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)