Skip to main content

 

 

 

 
Language:
 
モバイルアプリとリアクティブWebアプリにのみ適用されます
Service Studioバージョン :
 
 
OutSystems

Card Sectioned

情報を小さなブロックにグループ化してタイトル、画像、コンテンツの様々なセクションで整理し、画面で識別しやすいようにします。

Card Sectionedパターンは、少量の情報をグループ化して画面で強調表示するために使用します。

Card Sectioned UIパターンの使用方法

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

    Card Sectionedウィジェットが表示されます。

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

    デフォルトで、Card Sectionedウィジェットには[Image]、[Title]、[Content]、[Footer]の各プレースホルダが含まれています。

  3. プレースホルダにコンテンツを追加します。

    この例では、画像、タイトル、テキスト、リンクを追加しています。

  4. Properties]タブで、Card Sectionedウィジェットのルックアンドフィールを変更できます。たとえば、方向やパディングのプロパティを設定できます。

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

プロパティ

プロパティ 説明
UsePadding(Boolean型): オプション Trueの場合、コンテンツにパディングが適用されます。これがデフォルトです。Falseの場合、コンテンツにはパディングが適用されません。
IsVertical(Boolean型): オプション Trueの場合、Card Sectionedパターンは縦方向に表示されます。これがデフォルトです。Falseの場合、パターンは横方向に表示されます。
ImagePadding(Boolean型): オプション Trueの場合、24pxのパディングが画像に適用されます。これがデフォルトです。Falseの場合、画像にはパディングが適用されません。
ExtendedClass(Text型): オプション Card Sectioned UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

  • 空白 - カスタムスタイルを追加しません(デフォルト値)。
  • "myclass" - 適用されるCard Sectioned UIのスタイルに_myclass_というスタイルを追加します。
  • "myclass1" "myclass2" - 適用されるCard Sectioned UIのスタイルに_myclass1_というスタイルと_myclass2_というスタイルを追加します。
  • Was this article helpful?