コンテナ

コンテナウィジェットカテゴリーは以下のウィジェットから構成されます：

• ベーシック
• ダイアログ
• フレックス
• リピーティング
• 横に分割
• 縦に分割
• タブ化された

以下の表は、コンテナウィジェットで利用可能なプロパティに関する使用詳細を提供します。表の後にはいくつかの例が続きます。

プロパティ

ITabTitle

IFlexOptions

使用法

ウィジェットをコンテナにドラッグして追加し、タブから削除してコンテナから取り除きます。tabContentsプロパティは生のタブではサポートされておらず、手動で編集すべきではない、またユーザーのインタラクションからの変更にも反応しません。

例

シンプルなコンテナ

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "selectedTabIndex": 0, // 選択されているタブのインデックス
  "tabContents": [
    {
      "children": [] // タブの中のコンテンツ
    }
  ],
  "tabTitles": [
    {
      "title": "Title" // タブのタイトル
    }
  ],
  "titlesEnabled": false // タブのタイトルが有効かどうか
}

タブ付きコンテナ

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "selectedTabIndex": 1, // 選択されたタブのインデックス
  "tabContents": [
    {
      "children": [] // タブ1のコンテンツ
    },
    {
      "children": [] // タブ2のコンテンツ
    },
    {
      "children": [] // タブ3のコンテンツ
    }
  ],
  "tabTitles": [
    {
      "title": "Title 1" // タブ1のタイトル
    },
    {
      "title": "Title 2" // タブ2のタイトル
    },
    {
      "title": "Title 3" // タブ3のタイトル
    }
  ],
  "titlesEnabled": true // タブのタイトルが有効かどうか
}

別のウィジェットから選択タブを操作する

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
{
  "selectedTabIndex": "{{w8.selectedValue}}",  // 選択されているタブのインデックス
  "tabContents": [  // タブの内容
    {
      "children": []  // 子要素
    },
    {
      "children": []  // 子要素
    },
    {
      "children": []  // 子要素
    }
  ],
  "tabTitles": [  // タブのタイトル
    {
      "title": "Title 1"  // タイトル1
    },
    {
      "title": "Title 2"  // タイトル2
    },
    {
      "title": "Title 3"  // タイトル3
    }
  ],
  "titlesEnabled": false  // タイトルが有効かどうか
}

デフォルト設定

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "selectedTabIndex": 0, // 選択されているタブのインデックス
  "tabContents": [
    {
      "children": [] // タブのコンテンツ
    }
  ],
  "tabTitles": [
    {
      "title": "Title" // タブのタイトル
    }
  ],
  "titlesEnabled": false // タブのタイトルが有効かどうか
}

---

ダイアログウィジェット

以下の表は、ダイアログウィジェットで使用できるプロパティの詳細を提供します。表の後にはいくつかの例が続きます。

プロパティ

アクション

イベント

---

共通 CSS

以下の CSS を使用して、コンテナの背景色と境界線を設定できます：

Copied!
1
2
3
4
5
sl-app-container {
  background: lightgrey;  /* 背景色をライトグレーに設定 */
  border-left:none;  /* 左側のボーダーを非表示に設定 */
  border-right:none;  /* 右側のボーダーを非表示に設定 */
}

sl-app-container セレクタと background プロパティは、コンテナウィジェットの背景色とボーダーを正しく設定しますが、ローカルのスタイルシートで div.canvas-body セレクタと background-color プロパティを使用して、Slate アプリケーションキャンバスの色とボーダーを調整します。以下の例では、Styles エディタを使用して、Slate キャンバス、コンテナウィジェット、およびバーチャートの色をカスタマイズしました：

タブ付きコンテナ

タブのスタイリング：

Copied!
1
2
3
4
5
6
7
/* sl-app-container内のtable.container-titlesを対象に、その中にあるtbodyの中のtrの中のtd.tab-titleを対象にスタイルを適用します */
sl-app-container table.container-titles tbody tr td.tab-title {
  color: #2786c1; /* 文字色を#2786c1に設定します */
  text-transform:uppercase; /* 文字を大文字に変換します */
  border-left:none; /* 左側の境界線を非表示にします */
  border-right:none; /* 右側の境界線を非表示にします */
}

ホバースタイル:

Copied!
1
2
/* 日本語のコメント: ホバー時のテーブルタイトルのテキスト装飾を無効にする */
sl-app-container table.container-titles tbody tr td.tab-title:hover {text-decoration:none;}

選択スタイリング:

Copied!
1
2
3
4
sl-app-container table.container-titles tbody tr td.tab-title.selected {
  color: #394B59;  /* 選択されたタブのタイトルの色を設定します */
  border-bottom:4px solid #2786C1;  /* 選択されたタブの下線の色と幅を設定します */
}

個別のタブスタイリング:

Copied!
1
2
3
4
5
6
7
8
/* 
sl-app-containerの中のtable.container-titlesのtbodyのtrのtd.tab-titleの最後の子要素に対するスタイルを設定します。
左と右の境界線は無くします。
*/
sl-app-container table.container-titles tbody tr td.tab-title:last-child {
  border-left:none;
  border-right:none;
}