このページは Cloud Translation API によって翻訳されました。

スワイプして表示

ユーザーがコンポーネントをスワイプしてその他のアクションを表示できるようにします。

スワイプして表示コンポーネントを使用すると、チップとカードに、特にリストに表示された場合に、追加のアクションを追加できます。このコンポーネントを使用すると、ユーザーは画面から離れることなくすばやく操作できます。

チップやカードを左にスワイプしてこれらのアクションにアクセスし、アクションをタップして完了できます。チップとカードを左にスワイプして、メインアクションをすばやく実行することもできます。

このコンポーネントには、以下のアクションを行うためのスロットが 2 つあります。

構造

デベロッパーは、独自のユースケースに合わせてアクションをカスタマイズできます。これらのアクションで使用される色やアイコンは、ユーザーがその意味を理解できるようにすることを考慮してください。

すべての言語ロケールで、表示されるアクションが同じ側に表示されます。

メインアクションを実行するには、ユーザーはボタンをタップするか、左にスワイプし続けます。この場合、ボタンは画面の幅全体に広がり、ラベルが表示されます。アクションは、選択後にフェードアウトします。

最初の例は、単一ボタンのオプションを示しています。2 つ目の例は、ダブルボタンのオプションを示しています。

破壊的な操作の場合は、元に戻すコンポーネントを追加して、ユーザーが操作を元に戻すことができるようにします。プライマリアクションに元に戻す機能を追加します。

追加すると、commit されたアクションの代わりにチップを元に戻すボタンが表示されます。しばらくすると、「元に戻す」アクションがフェードアウトし、コミットされたアクションが完了します。

スワイプしてコンポーネントを表示する操作は、ユーザーが画面をどこまでスワイプするかによって異なります。

スワイプが画面の 50% 未満の場合、コンポーネントは開始位置にスナップ戻され、アクションは実行されません。
ユーザーが画面を全幅の 50% ～ 75% の範囲でスワイプすると、コンポーネントは部分的に表示されたままとなり、コンポーネントに関連付けられているアクションが表示されます。
ユーザーが画面の 75% 以上をスワイプすると、コンポーネントが表示されなくなり、システムが自動的にメインアクションを実行します。