Skip to content

Commit f4e8bad

Browse files
sk8knutsk8knut
authored
feat(docs): tabs examples (#DS-2907) (#329)
1 parent 6481970 commit f4e8bad

36 files changed

+733
-168
lines changed

‎apps/docs/src/app/components/docs-live-example-viewer/docs-live-example-viewer.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<div class="docs-live-example__container">
22
@if (exampleData) {
3-
<div class="docs-live-example__example">
3+
<div class="docs-live-example__example docs-live-example__example_{{ exampleId }}">
44
@if (exampleComponentType && exampleModuleFactory) {
55
<ng-template
66
[ngComponentOutlet]="exampleComponentType"

‎packages/components/tabs/_tabs-common.scss

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -75,16 +75,16 @@
7575
position: absolute;
7676
left: 0;
7777
right: 0;
78-
top: -8px;
79-
bottom: -8px;
78+
top: -10px;
79+
bottom: -10px;
8080
}
8181

8282
&.kbq-tab-label_underlined:not(.kbq-tab-label_vertical).kbq-selected:after {
8383
content: '';
8484
position: absolute;
8585
left: 0;
8686
right: 0;
87-
bottom: -11px;
87+
bottom: -10px;
8888
height: 3px;
8989
border-radius: 2px 2px 0 0;
9090
background: rgba(33, 34, 44, 1);
@@ -94,6 +94,7 @@
9494
justify-content: flex-start;
9595

9696
& .kbq-tab-label__content {
97+
display: block;
9798
overflow: hidden;
9899
text-overflow: ellipsis;
99100
white-space: nowrap;

‎packages/components/tabs/_tabs-theme.scss

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,10 @@
1919
@include kbq-tab-item-state($type, $sub-type, states-hover);
2020
}
2121

22+
&.kbq-tab-label_empty {
23+
color: kbq-css-variable(foreground-contrast-secondary);
24+
}
25+
2226
&.kbq-selected {
2327
@include kbq-tab-item-state($type, $sub-type, states-selected);
2428

‎packages/components/tabs/tab-header.scss

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,8 +25,18 @@
2525
}
2626

2727
.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content {
28+
position: relative;
2829
padding: 8px 0;
29-
border-bottom: 1px solid rgba(13, 14, 18, 0.12);
30+
}
31+
32+
.kbq-tab-header_underlined:not(.kbq-tab-header_vertical) .kbq-tab-list__content:after {
33+
content: '';
34+
position: absolute;
35+
left: 0;
36+
bottom: 0;
37+
right: 0;
38+
height: 1px;
39+
background: rgba(13, 14, 18, 0.12);
3040
}
3141

3242
.kbq-tab-header__pagination {

‎packages/components/tabs/tabs.md

Lines changed: 51 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,65 @@
1-
### Default tabs
1+
Вкладки — способ отображения связанной информации на отдельных подписанных областях экрана.
22

33
<!-- example(tabs-overview) -->
44

5-
### Vertical tabs
5+
### Состояния
6+
7+
#### Вертикальные вкладки
8+
9+
Длинный список вкладок можно разместить вертикально, чтобы все элементы были видны без прокрутки.
610

711
<!-- example(tabs-vertical) -->
812

9-
### Stretch tabs
13+
Вертикальный вкладки можно использовать и без подписи. Добавляйте тултип иконкам, чтобы пояснить название раздела.
1014

11-
<!-- example(tabs-stretch) -->
15+
<!-- example(tabs-vertical-icons) -->
1216

13-
### Tabs with scroll
17+
#### Вкладки с полоской
1418

15-
<!-- example(tabs-with-scroll) -->
19+
<!-- example(tabs-underlined) -->
20+
21+
#### Disabled
22+
23+
Неактивный таб нельзя выбрать, а выбранный неактивный нельзя переключить.
1624

17-
### Empty tab
25+
<!-- example(tabs-disabled) -->
26+
27+
#### Пустая вкладка
28+
29+
Вкладка, внутри которой нет контента, может оформляться по‑особенному, чтобы заранее обозначить для пользователя, что нет нужды изучать содержимое: она будет серой в невыбранном состоянии.
1830

1931
<!-- example(tabs-empty) -->
2032

21-
### Old tabs
33+
#### Прокрутка
34+
35+
Горизонтальные вкладки скрываются за областью видимости без переноса на новую строку или колонку (для вертикальных вкладок) и появляется прокрутка.
36+
37+
<!-- example(tabs-with-scroll) -->
38+
39+
### Примеры использования
40+
41+
#### Выравнивание по ширине
42+
43+
По умолчанию ширина горизонтальных вкладов зависит от подписей внутри элементов, но при необходимости панель табов может заполнять все пространство контейнера.
44+
45+
<!-- example(tabs-stretch) -->
46+
47+
#### Кнопки в строке вкладок
48+
49+
Кнопки действий удобно разместить в строке с более высокими подчеркнутыми вкладками.
50+
51+
<!-- example(tabs-actionbar) -->
52+
53+
### Рекомендации
54+
55+
Используйте для навигации по контенту на странице, когда важно дать быстрый доступ его к отдельным частям.
56+
57+
По внешним признакам вкладки похожи на навигационное меню или на шаги формы-мастера. Дизайнеру стоит избегать этой путаницы, поэтому стилизовать эти элементы нужно по-разному. В нестандартных случаях лучше оставлять примечания для разработчика, например: обрати внимание, это не вкладки, а шаги формы.
58+
59+
Не используйте вкладки:
2260

23-
<!-- example(tabs-old) -->
61+
- Когда весь контент можно разместить на одной странице, на одном экране. Незачем прятать его части под вкладки. Когда предполагается всего одна вкладка, то панель вкладок вовсе не нужна.
62+
- Для выбора значения в формах. Не путайте вкладки с полями ввода: [радиокнопками](/components/radio), [кнопками-переключателями](/components/button-toggle). Вкладки — это навигация.
63+
- Для основной навигации, для этого есть компонент [Navbar](/components/navbar). Используйте вкладки для второстепенной навигации.
64+
- Когда надо изменить представление одних и тех же данных (список, плитка, таблица). Взамен используйте [кнопку-меню](/components/dropdown) или [кнопку-переключатель](/components/button-toggle).
65+
- Когда контент уже вложен во вкладку. В том числе нельзя одновременно использовать вертикальные и горизонтальные вкладки. Вместо этого сократите количество вкладок, используйте только один вид вкладок или кнопку-переключатель, кнопку-меню.

‎packages/docs-examples/components/tabs/index.ts

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -2,31 +2,41 @@ import { NgModule } from '@angular/core';
22
import { KbqButtonModule } from '@koobiq/components/button';
33
import { KbqIconModule } from '@koobiq/components/icon';
44
import { KbqTabsModule } from '@koobiq/components/tabs';
5+
import { KbqToolTipModule } from '@koobiq/components/tooltip';
56
import { TabActiveTabIndexExample } from './tab-active-tab-index/tab-active-tab-index-example';
67
import { TabActiveTabExample } from './tab-active-tab/tab-active-tab-example';
8+
import { TabsActionbarExample } from './tabs-actionbar/tabs-actionbar-example';
9+
import { TabsDisabledExample } from './tabs-disabled/tabs-disabled-example';
710
import { TabsEmptyExample } from './tabs-empty/tabs-empty-example';
8-
import { TabsOldExample } from './tabs-old/tabs-old-example';
911
import { TabsOverviewExample } from './tabs-overview/tabs-overview-example';
1012
import { TabsStretchExample } from './tabs-stretch/tabs-stretch-example';
13+
import { TabsUnderlinedExample } from './tabs-underlined/tabs-underlined-example';
14+
import { TabsVerticalIconsExample } from './tabs-vertical-icons/tabs-vertical-icons-example';
1115
import { TabsVerticalExample } from './tabs-vertical/tabs-vertical-example';
1216
import { TabsWithScrollExample } from './tabs-with-scroll/tabs-with-scroll-example';
1317

1418
export {
1519
TabActiveTabExample,
1620
TabActiveTabIndexExample,
21+
TabsActionbarExample,
22+
TabsDisabledExample,
1723
TabsEmptyExample,
18-
TabsOldExample,
1924
TabsOverviewExample,
2025
TabsStretchExample,
26+
TabsUnderlinedExample,
2127
TabsVerticalExample,
28+
TabsVerticalIconsExample,
2229
TabsWithScrollExample
2330
};
2431

2532
const EXAMPLES = [
33+
TabsActionbarExample,
2634
TabsOverviewExample,
27-
TabsOldExample,
35+
TabsDisabledExample,
2836
TabsStretchExample,
37+
TabsUnderlinedExample,
2938
TabsVerticalExample,
39+
TabsVerticalIconsExample,
3040
TabsWithScrollExample,
3141
TabsEmptyExample,
3242
TabActiveTabExample,
@@ -37,7 +47,8 @@ const EXAMPLES = [
3747
imports: [
3848
KbqTabsModule,
3949
KbqIconModule,
40-
KbqButtonModule
50+
KbqButtonModule,
51+
KbqToolTipModule
4152
],
4253
declarations: EXAMPLES,
4354
exports: EXAMPLES

‎packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.css

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
.docs-live-example__example_tabs-actionbar {
2+
padding-right: 0;
3+
}
4+
5+
.tabs-actionbar-example {
6+
display: flex;
7+
align-items: center;
8+
justify-content: space-between;
9+
position: relative;
10+
}
11+
12+
.tabs-actionbar-example__center {
13+
position: relative;
14+
width: 100%;
15+
height: 48px;
16+
min-width: 16px;
17+
18+
&:after {
19+
content: '';
20+
position: absolute;
21+
left: 0;
22+
bottom: 0;
23+
right: 0;
24+
height: 1px;
25+
background: rgba(13, 14, 18, 0.12);
26+
}
27+
}
28+
29+
.tabs-actionbar-example__controls {
30+
position: relative;
31+
display: flex;
32+
padding: 8px 20px 8px 0;
33+
34+
&:after {
35+
content: '';
36+
position: absolute;
37+
left: 0;
38+
bottom: 0;
39+
right: 20px;
40+
height: 1px;
41+
background: rgba(13, 14, 18, 0.12);
42+
}
43+
44+
button + button {
45+
margin-left: 8px;
46+
}
47+
}

‎packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.html

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
<div class="tabs-actionbar-example">
2+
<kbq-tab-group underlined>
3+
<kbq-tab [label]="'BitDefender'" />
4+
<kbq-tab [label]="'Fortinet'" />
5+
<kbq-tab [label]="'Kaspersky'" />
6+
</kbq-tab-group>
7+
<div class="tabs-actionbar-example__center"></div>
8+
<div class="tabs-actionbar-example__controls">
9+
<button
10+
kbq-button
11+
class="kbq-button_transparent"
12+
[color]="'contrast'"
13+
>
14+
<i
15+
kbq-icon="kbq-list_16"
16+
[color]="'theme'"
17+
></i>
18+
</button>
19+
<button
20+
kbq-button
21+
class="kbq-button_transparent"
22+
[color]="'contrast'"
23+
>
24+
<i
25+
kbq-icon="kbq-filter_16"
26+
[color]="'theme'"
27+
></i>
28+
</button>
29+
<button
30+
kbq-button
31+
[color]="'contrast'"
32+
>
33+
<i kbq-icon="kbq-plus_16"></i>
34+
Создать дашборд
35+
</button>
36+
</div>
37+
</div>

‎packages/docs-examples/components/tabs/tabs-actionbar/tabs-actionbar-example.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component, ViewEncapsulation } from '@angular/core';
2+
3+
/**
4+
* @title Tabs actionbar
5+
*/
6+
@Component({
7+
selector: 'tabs-actionbar-example',
8+
templateUrl: 'tabs-actionbar-example.html',
9+
styleUrls: ['tabs-actionbar-example.css'],
10+
encapsulation: ViewEncapsulation.None
11+
})
12+
export class TabsActionbarExample {}

‎packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.css

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
.tabs-disabled-example {
2+
kbq-tab-group + kbq-tab-group {
3+
margin-top: 16px;
4+
}
5+
}

‎packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.html

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
<div class="tabs-disabled-example">
2+
<kbq-tab-group>
3+
<kbq-tab [label]="'Bruteforce'" />
4+
<kbq-tab
5+
[disabled]="true"
6+
[label]="'Complex Attack'"
7+
/>
8+
<kbq-tab [label]="'DDoS'" />
9+
<kbq-tab [label]="'DoS'" />
10+
</kbq-tab-group>
11+
12+
<kbq-tab-group>
13+
<kbq-tab
14+
[disabled]="true"
15+
[label]="'Bruteforce'"
16+
/>
17+
<kbq-tab
18+
[disabled]="true"
19+
[label]="'Complex Attack'"
20+
/>
21+
<kbq-tab
22+
[disabled]="true"
23+
[label]="'DDoS'"
24+
/>
25+
<kbq-tab
26+
[disabled]="true"
27+
[label]="'DoS'"
28+
/>
29+
</kbq-tab-group>
30+
</div>

‎packages/docs-examples/components/tabs/tabs-disabled/tabs-disabled-example.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Component, ViewEncapsulation } from '@angular/core';
2+
3+
/**
4+
* @title Tabs disabled
5+
*/
6+
@Component({
7+
selector: 'tabs-disabled-example',
8+
templateUrl: 'tabs-disabled-example.html',
9+
styleUrls: ['tabs-disabled-example.css'],
10+
encapsulation: ViewEncapsulation.None
11+
})
12+
export class TabsDisabledExample {}

‎packages/docs-examples/components/tabs/tabs-empty/tabs-empty-example.css

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,8 @@
1-
.empty-tab-content {
2-
text-align: center;
1+
.tabs-empty-example {
2+
.empty-tab-content {
3+
display: flex;
4+
align-items: center;
5+
justify-content: center;
6+
height: 200px;
7+
}
38
}

0 commit comments

Comments
 (0)