Skip to main content

 

 

 

 
Language:

 

 
従来のWebアプリにのみ適用されます

 

 
 
OutSystems

Card Sectioned

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

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

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

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

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

![](<images/cardsection-1-ss.png>)

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

![](<images/cardsection-2-ss.png>)

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

1.プレースホルダにコンテンツを追加します。この例では、画像、タイトル、テキスト、リンクを追加しています。

![](<images/cardsection-4-ss.png>)

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

![](<images/cardsection-5-ss.png>)

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

プロパティ

プロパティ 説明
Orientation(Orientation Identifier型): オプション カードの方向を設定します。

  • 空白 - コンテンツは縦方向に表示されます。これがデフォルトです。
  • Entities.Orientation.Horizontal - コンテンツは横方向に表示されます。
ImagePadding(Boolean型): オプション Trueの場合、24pxのパディングが画像に適用されます。これがデフォルトです。Falseの場合、画像にはパディングが適用されません。
IsRight(Boolean型): オプション Trueの場合、コンテンツは左揃えになります。Falseの場合、コンテンツは右揃えになります。これがデフォルトです。注記: このプロパティは、OrientationプロパティがHorizontalに設定されているときにのみ適用されます。
ExtendedClass(Text型): オプション Card Sectioned UIパターンにカスタムスタイルクラスを追加します。CSSを使用して、アプリケーションのカスタムスタイルクラスを定義します。

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