Skip to content

Commit edfcdcd

Browse files
MartoYankovMartoYankov
committed
feat: add css support for tabs widget
1 parent c9a0b71 commit edfcdcd

19 files changed

Lines changed: 495 additions & 81 deletions

File tree

‎e2e/ui-tests-app/app/tabs/background-color-page.css‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,18 @@ Tabs {
22
background-color: gold;
33
}
44

5+
TabContentItem.special {
6+
background-color: olive;
7+
}
8+
59
TabStrip {
610
background-color: skyblue;
11+
}
12+
13+
TabStripItem.special {
14+
background-color: teal;
15+
}
16+
17+
TabStripItem.special:active {
18+
background-color: yellowgreen;
719
}

‎e2e/ui-tests-app/app/tabs/background-color-page.xml‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,20 @@
55

66
<Tabs>
77
<TabStrip>
8-
<TabStripItem title="First"></TabStripItem>
9-
<TabStripItem title="Second"></TabStripItem>
8+
<TabStripItem title="First" class="special"></TabStripItem>
9+
<TabStripItem title="Second"></TabStripItem>
1010
</TabStrip>
1111

12-
<TabContentItem>
13-
<GridLayout>
14-
<Label text="First View" />
15-
</GridLayout>
12+
<TabContentItem class="special">
13+
<GridLayout>
14+
<Label text="First View" />
15+
</GridLayout>
1616
</TabContentItem>
1717

1818
<TabContentItem>
19-
<GridLayout>
20-
<Label text="Second View" />
21-
</GridLayout>
19+
<GridLayout>
20+
<Label text="Second View" />
21+
</GridLayout>
2222
</TabContentItem>
2323
</Tabs>
2424
</Page>

‎e2e/ui-tests-app/app/tabs/color-page.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Tabs {
2+
color: gold;
3+
}
4+
5+
TabContentItem.special {
6+
color: olive;
7+
}
8+
9+
TabStrip {
10+
color: skyblue;
11+
}
12+
13+
TabStripItem.special {
14+
color: teal;
15+
}
16+
17+
TabStripItem.special:active {
18+
color: yellowgreen;
19+
}

‎e2e/ui-tests-app/app/tabs/color-page.xml‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,24 @@
11
<Page class="page">
2+
23
<ActionBar title="Tabs color" icon="" class="action-bar">
34
</ActionBar>
45

5-
<Tabs style="color: green;">
6+
<Tabs>
67
<TabStrip>
7-
<TabStripItem title="First"></TabStripItem>
8-
<TabStripItem title="Second"></TabStripItem>
8+
<TabStripItem title="First" class="special"></TabStripItem>
9+
<TabStripItem title="Second"></TabStripItem>
910
</TabStrip>
1011

11-
<TabContentItem>
12-
<GridLayout>
13-
<Label text="First View" />
14-
</GridLayout>
12+
<TabContentItem class="special">
13+
<GridLayout>
14+
<Label text="First View" />
15+
</GridLayout>
1516
</TabContentItem>
1617

1718
<TabContentItem>
18-
<GridLayout>
19-
<Label text="Second View" />
20-
</GridLayout>
19+
<GridLayout>
20+
<Label text="Second View" />
21+
</GridLayout>
2122
</TabContentItem>
2223
</Tabs>
2324
</Page>

‎e2e/ui-tests-app/app/tabs/font-page.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Tabs {
2+
font: 24 'Times New Roman', Times, serif;
3+
}
4+
5+
TabContentItem.special {
6+
font: italic bold 12 Georgia, serif;
7+
}
8+
9+
TabStrip {
10+
font: 15 arial, sans-serif;
11+
}
12+
13+
TabStripItem.special {
14+
font: 12 monospace;
15+
}
16+
17+
TabStripItem.special:active {
18+
font: 16 monospace;
19+
}

‎e2e/ui-tests-app/app/tabs/font-page.xml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<Page class="page">
2+
3+
<ActionBar title="Tabs font" icon="" class="action-bar">
4+
</ActionBar>
5+
6+
<Tabs>
7+
<TabStrip>
8+
<TabStripItem title="First" class="special"></TabStripItem>
9+
<TabStripItem title="Second"></TabStripItem>
10+
</TabStrip>
11+
12+
<TabContentItem class="special">
13+
<GridLayout>
14+
<Label text="First View" />
15+
</GridLayout>
16+
</TabContentItem>
17+
18+
<TabContentItem>
19+
<GridLayout>
20+
<Label text="Second View" />
21+
</GridLayout>
22+
</TabContentItem>
23+
</Tabs>
24+
</Page>

‎e2e/ui-tests-app/app/tabs/highlight-color-page.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
TabStrip {
2+
highlight-color: crimson;
3+
}

‎e2e/ui-tests-app/app/tabs/highlight-color-page.xml‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<Page class="page">
2+
3+
<ActionBar title="Tabs highlight-color" icon="" class="action-bar">
4+
</ActionBar>
5+
6+
<Tabs>
7+
<TabStrip>
8+
<TabStripItem title="First" class="special"></TabStripItem>
9+
<TabStripItem title="Second"></TabStripItem>
10+
</TabStrip>
11+
12+
<TabContentItem class="special">
13+
<GridLayout>
14+
<Label text="First View" />
15+
</GridLayout>
16+
</TabContentItem>
17+
18+
<TabContentItem>
19+
<GridLayout>
20+
<Label text="Second View" />
21+
</GridLayout>
22+
</TabContentItem>
23+
</Tabs>
24+
</Page>

‎e2e/ui-tests-app/app/tabs/main-page.ts‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,15 @@ export function pageLoaded(args: EventData) {
1212
export function loadExamples() {
1313
const examples = new Map<string, string>();
1414
examples.set("tabs", "tabs/tabs-page");
15-
examples.set("issue-5470", "tabs/issue-5470");
15+
examples.set("issue-5470", "tabs/issue-5470-page");
1616
examples.set("background-color", "tabs/background-color-page");
17-
examples.set("color", "tabs/color");
18-
examples.set("icon-title-placement", "tabs/icon-title-placement");
19-
examples.set("icon-change", "tabs/icon-change");
20-
examples.set("swipe-enabled", "tabs/swipe-enabled");
17+
examples.set("color", "tabs/color-page");
18+
examples.set("font", "tabs/font-page");
19+
examples.set("text-transform", "tabs/text-transform-page");
20+
examples.set("highlight-color", "tabs/highlight-color-page");
21+
examples.set("icon-title-placement", "tabs/icon-title-placement-page");
22+
examples.set("icon-change", "tabs/icon-change-page");
23+
examples.set("swipe-enabled", "tabs/swipe-enabled-page");
2124
examples.set("tabs-position", "tabs/tabs-position-page");
2225
examples.set("tabs-binding", "tabs/tabs-binding-page");
2326

‎e2e/ui-tests-app/app/tabs/text-transform-page.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
Tabs {
2+
text-transform: lowercase;
3+
}
4+
5+
TabContentItem.special {
6+
text-transform: uppercase;
7+
}
8+
9+
TabStrip {
10+
text-transform: capitalize;
11+
}
12+
13+
TabStripItem.special {
14+
text-transform: lowercase;
15+
}
16+
17+
TabStripItem.special:active {
18+
text-transform: uppercase;
19+
}

0 commit comments

Comments
 (0)