コンテナ

コンテナウィジェットのカテゴリーには、次のウィジェットが含まれます。

• 基本
• ダイアログ
• フレックス
• 繰り返し
• 水平方向に分割
• 垂直方向に分割
• タブ付き

次のテーブルでは、コンテナウィジェットで利用可能なプロパティの使用方法を詳しく説明します。テーブルの後に、いくつかの例を示します。

プロパティ

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": []
    },
    {
      "children": []
    },
    {
      "children": []
    }
  ],
  "tabTitles": [
    {
      "title": "Title 1"
    },
    {
      "title": "Title 2"
    },
    {
      "title": "Title 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"
    },
    {
      "title": "Title 2"
    },
    {
      "title": "Title 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 プロパティを使用すると、コンテナウィジェットの背景色と境界線を正しく設定できます。ただし、Slate アプリケーションのキャンバスの色と境界線を調整するには、ローカルスタイルシートで div.canvas-body セレクターと background-color プロパティを使用します。次の例では、スタイルエディターを使用して、Slate キャンバス、コンテナウィジェット、棒グラフの色をカスタマイズしています。

タブ付きコンテナ

タブのスタイル：

Copied!
1
2
3
4
5
6
sl-app-container table.container-titles tbody tr td.tab-title {
  color: #2786c1;
  text-transform:uppercase;
  border-left:none;
  border-right:none;
}

ホバー時のスタイル：

Copied!
1
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
sl-app-container table.container-titles tbody tr td.tab-title:last-child {
  border-left:none;
  border-right:none;
}