Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

モバイルアプリとリアクティブWebアプリにのみ適用されます

 

 

OutSystems

Stacked Cards

Stacked Cards UIパターンを使用すると、複数の方向にドラッグして、拒否、承認、アーカイブなどのイベントをトリガーできるスワイプ可能なカードを追加できます。複数のカードを個別にスキャンする場合、このパターンが最適です。

Stacked Cardsパターンの使用方法

  1. Service StudioのツールボックスでStacked Cardsを検索します。

    Stacked Cardsウィジェットが表示されます。

  2. ツールボックスから、Stacked Cardsウィジェットをアプリケーション画面のメインコンテンツ領域にドラッグします。

    デフォルトで、Stacked Cardsウィジェットには[List]、[OverlayTop]、[OverlayLeft]、[OverlayRight]の各プレースホルダが含まれています。

  3. [List]プレースホルダにコンテンツを追加します。この例では、[Data]タブから[List]プレースホルダにEmployeesのリストをドラッグしています。

    GetEmployees Aggregateが自動的に作成されます。

  4. ツールボックスからIconウィジェットを[OverlayTop]プレースホルダにドラッグし、[Pick an Icon]エディタでアイコンを選択します。[OK]をクリックします。

  5. [OverlayRight]プレースホルダと[OverlayLeft]プレースホルダで手順4を繰り返します。

  6. [OverlayLeft]プレースホルダのスワイプアクションを作成するため、OnLeftSwipeの[Handler]ドロップダウンで[New Client Action]を選択します。

  7. ツールボックスからRun Server Actionをクライアントアクションにドラッグし、[Select Action]エディタで左方向へのスワイプアクションを実行するアクションに移動します。この例では、DeleteEmployeeアクションを使用します。

  8. Id]ドロップダウンでアクションのIDを選択します。この例では、IDは現在選択されている従業員です。これは、ユーザーが左にスワイプすると、現在選択されているユーザーが従業員リストから削除されることを意味します。

  1. [OverlayTop](上へのスワイプ)と[OverLayRight](右へのスワイプ)の各プレースホルダで手順7を繰り返します。

  2. Properties]タブで(オプションの)プロパティを設定し、範囲スライダのルックアンドフィールを変更できます。

これらの手順を実行してモジュールをパブリッシュした後、アプリでパターンをテストできます。

プロパティ

プロパティ 説明
StackedOptions(StackedCardsPosition Identifier型): オプション スタックカードの表示を下から、上から、またはなしに変更します。

  • Entities.StackedCardsPosition.Bottom - スタックカードが下に配置されます。これがデフォルトです。
  • Entities.StackedCardsPosition.Top - スタックカードが上に配置されます。
Rotate(Boolean型):オプション Trueの場合、スタックカードの移動ごとの回転が有効になります。これがデフォルトです。Falseの場合、移動ごとの回転は無効になります。
Items(Integer型):オプション StackedOptionsプロパティが下または上に設定されているときに表示される要素の数。

  • 空白 - 要素が5つ表示されます。これがデフォルトです。
  • 3 - 要素が3つ表示されます。
ElementsMargin StackedOptionsプロパティが下または上に設定されているときの各要素の間の距離を定義します。

  • 空白 - 要素が5つ表示されます。これがデフォルトです。
  • 3 - 要素が3つ表示されます。
UseOverlays(Boolean型):オプション Trueの場合、スワイプ要素のオーバーレイが有効になります。これがデフォルトです。Falseの場合、オーバーレイは無効になります。

他のパターンとの互換性

TabsCarouselなど、スワイプイベント/タッチイベントを使用するパターン内でのStacked Cardsパターンの使用は避けてください。

  • Was this article helpful?