Skip to main content

 

 

 

 

Template:OutSystems/Documentation_KB/Breadcrumb_New_Layout

 

 

Template:OutSystems/OSLanguageSwitcher

 

Applies only to Traditional Web Apps

 

 

OutSystems

Fieldset

コントロールやラベルなど、テーマに関連する要素をグループ化します。

Fieldsetは、関連するインターフェイス要素とフィールドのグループをラベル付けするために使用します。これによってレイアウトが改善され、ユーザーが情報を理解しやすくなります。

使用方法

Fieldsetのラベルを設定し、[Content]プレースホルダにInputウィジェットをドラッグします。

  1. Fieldsetパターンをプレビューにドラッグします。

  2. Titleパラメータを設定します。

  3. プレースホルダに必要なコンテンツを設定します。

  4. パブリッシュしてテストします。

入力パラメータ

入力名 説明 必須 デフォルト値
Title Fieldsetの凡例になるタイトル。 Text True なし
ExtendedClass このブロックにカスタムスタイルクラスを追加します。Text False なし

レイアウトおよびクラス

高度なユースケース

Fieldsetのスタイルを変更する

Fieldsetのスタイルを変更するには、カスタムCSSを使用します。これを行う方法は、以下の例に示す2つのみです。これらをアプリケーションで使用するには、以下のCSSコードをコピーしてテーマに追加します。

例1:

.fieldset {
  position: relative;
}

.fieldset-legend {
  background: var(--color-background-body);
  padding: 0 var(--space-xs);
  position: absolute;
  right: var(--space-m);
  top: -15px;
}

例2:

.fieldset {
  border: 0;
  padding: var(--space-m) 0;
}

.fieldset-legend {
  border-bottom: 1px solid var(--color-neutral-5);
  padding-bottom: var(--space-s);
  width: 100%;
}

  • Was this article helpful?