Container

The Container Widget category consist of the following widgets:

• Basic
• Dialog
• Flex
• Repeating
• Split horizontally
• Split vertically
• Tabbed

The following tables offer usage details about the properties available to Container widgets. Several examples follow the tables.

Properties

ITabTitle

IFlexOptions

Usage

Drag widgets into and out of containers to add and remove them from the currently selected tab. The tabContents property is unsupposed in the raw tab and should not be edited manually, nor will it respond to changes from user interaction.

Examples

Simple Container

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "selectedTabIndex": 0,
  "tabContents": [
    {
      "children": []
    }
  ],
  "tabTitles": [
    {
      "title": "Title"
    }
  ],
  "titlesEnabled": false
}

Tabbed Container

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
}

Driving the selected tab from another widget

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
}

Defaults

Copied!
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
  "selectedTabIndex": 0,
  "tabContents": [
    {
      "children": []
    }
  ],
  "tabTitles": [
    {
      "title": "Title"
    }
  ],
  "titlesEnabled": false
}

---

Dialog widget

The following tables offer usage details about the properties available to dialog widgets. Several examples follow the tables.

Properties

Actions

Events

---

Common CSS

You can use the below CSS to set the background color and borders of a container:

Copied!
1
2
3
4
5
sl-app-container {
  background: lightgrey;
  border-left:none;
  border-right:none;
}

Though the sl-app-container selector and background property will correctly set the background color and borders of a container widget, use the div.canvas-body selector and background-color property in your local stylesheet to adjust the colors and borders of the Slate application canvas. In the example below, we customized the Slate canvas, container widget, and bar chart colors using the Styles editor:

Tabbed containers

Tabs styling:

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;
}

Hover styling:

Copied!
1
sl-app-container table.container-titles tbody tr td.tab-title:hover {text-decoration:none;}

Selection styling:

Copied!
1
2
3
4
sl-app-container table.container-titles tbody tr td.tab-title.selected {
  color: #394B59;
  border-bottom:4px solid #2786C1;
}

Individual tab styling:

Copied!
1
2
3
4
sl-app-container table.container-titles tbody tr td.tab-title:last-child {
  border-left:none;
  border-right:none;
}