Skip to content

Commit 87a75a9

Browse files
raininforestraininforest
committed
docs(sdds-acore/uikit-compose): documentation was improved for CollapsingNavigationBar, NavigationBar, Wheel, TabBar (#682)
1 parent 14ee4d1 commit 87a75a9

File tree

12 files changed

+630
-14
lines changed

12 files changed

+630
-14
lines changed

‎.ignore-changed-modules‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
:tokens:plasma.giga.app.compose
2-
:tokens:plasma.giga.compose
32
:tokens:stylessalute.compose
43
:tokens:stylessalute.view
54
:sdds-core:docs

‎build-system/docs-template/compose-template/docs/components/NavigationBarUsage.md‎

Lines changed: 42 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,44 @@ title: NavigationBar
55

66
В качестве текста, контента и экшенов может принимать произвольный контент.
77

8+
### Простой пример NavigationBar с встроенным текстом и экшеном в конце
9+
810
```kotlin
911
// @sample: com/sdds/compose/uikit/fixtures/samples/navigationbar/NavigationBar_Simple.kt
1012
```
1113

1214
<!-- @screenshot: com.sdds.compose.uikit.fixtures.samples.navigationbar.NavigationBar_Simple -->
1315

16+
### Пример NavigationBar с встроенными title и description
17+
18+
```kotlin
19+
// @sample: com/sdds/compose/uikit/fixtures/samples/navigationbar/NavigationBar_TitleDescription.kt
20+
```
21+
22+
### Пример NavigationBar с встроенным текстом и контентом снизу
23+
24+
```kotlin
25+
// @sample: com/sdds/compose/uikit/fixtures/samples/navigationbar/NavigationBar_BottomContentInlineText.kt
26+
```
27+
28+
### Пример NavigationBar с текстом и контентом снизу, двумя экшенами справа
29+
30+
```kotlin
31+
// @sample: com/sdds/compose/uikit/fixtures/samples/navigationbar/NavigationBar_BottomTextAndContentMultiplyActions.kt
32+
```
33+
34+
### Пример NavigationBar c абсолютным центрированием встроенного текста
35+
36+
```kotlin
37+
// @sample: com/sdds/compose/uikit/fixtures/samples/navigationbar/NavigationBar_CenterAbsolute.kt
38+
```
39+
40+
### Пример NavigationBar c относительным центрированием встроенного текста
41+
42+
```kotlin
43+
// @sample: com/sdds/compose/uikit/fixtures/samples/navigationbar/NavigationBar_CenterRelative.kt
44+
```
45+
1446
## Стиль NavigationBar
1547

1648
Стиль NavigationBar можно настроить с помощью NavigationBarStyle.builder(). Так же существует набор сгенерированных стилей.
@@ -36,4 +68,13 @@ title: NavigationBar
3668

3769
- Start (Текст расположен слева, оба экшена справа),
3870
- Center (Текст расположен в центре, левый экшен слева, правый экшен справа),
39-
- End (Текст расположен справа, оба экшена слева)
71+
- End (Текст расположен справа, оба экшена слева)
72+
73+
## NavBarCenterAlignmentStrategy
74+
75+
Режим центрирования текстового блока. Работает только при `NavigationBarTextAlign.Center` и `NavigationBarTextPlacement.Inline` (см. [NavigationBarTextAlign](#NavigationBarTextAlign), [NavigationBarTextPlacement](#NavigationBarTextPlacement))
76+
77+
Возможные значения:
78+
79+
- Relative (Текст центрируется в доступном пространстве между экшенами)
80+
- Absolute (Текст центрируется по ширине компонента независимо от того, сколько пространства занимают экшены)

‎build-system/docs-template/compose-template/docs/components/TabBarUsage.md‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,12 +9,26 @@ TabBarItem в качестве extra ожидает [Counter](CounterUsage.md),
99
По умолчанию элементы добавляются с weight = 1 и равномерно занимают доступную ширину TabBar.
1010
Если необходимо добавить элемент произвольной ширины, необходимо при использовании функции tabItem() установить параметр weight = null.
1111

12+
### Простой пример TabBar
13+
1214
```kotlin
1315
// @sample: com/sdds/compose/uikit/fixtures/samples/tabbar/TabBar_Simple.kt
1416
```
1517

1618
<!-- @screenshot: com.sdds.compose.uikit.fixtures.samples.tabbar.TabBar_Simple -->
1719

20+
### Пример TabBar с Counter
21+
22+
```kotlin
23+
// @sample: com/sdds/compose/uikit/fixtures/samples/tabbar/TabBar_WithCounter.kt
24+
```
25+
26+
### Пример TabBar с кастомным центральным элементом с фиксированной шириной
27+
28+
```kotlin
29+
// @sample: com/sdds/compose/uikit/fixtures/samples/tabbar/TabBar_CustomItem.kt
30+
```
31+
1832
## Стиль TabBar
1933

2034
Для TabBar существует набор сгенерированных стилей. Также стиль можно настроить с помощью TabBarStyle.builder().

‎build-system/docs-template/compose-template/docs/components/WheelUsage.md‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,12 +5,29 @@ title: Wheel
55
Вертикальное колесо выбора.
66
Используется для выбора одного значения из списка с визуальным фокусом на текущем значении.
77

8+
### Простой пример Wheel с одним колесом
9+
810
```kotlin
911
// @sample: com/sdds/compose/uikit/fixtures/samples/wheel/Wheel_Simple.kt
1012
```
1113

1214
<!-- @screenshot: com.sdds.compose.uikit.fixtures.samples.wheel.Wheel_Simple -->
1315

16+
### Пример будильника с контролами и разделителем "двоеточие"
17+
```kotlin
18+
// @sample: com/sdds/compose/uikit/fixtures/samples/wheel/Wheel_AlarmClockWithControlsAndSeparator.kt
19+
```
20+
21+
### Пример будильника с выраниванием по центру и Divider в качестве разделителя
22+
```kotlin
23+
// @sample: com/sdds/compose/uikit/fixtures/samples/wheel/Wheel_CenteredAlarmClockWithControlsAndDivider.kt
24+
```
25+
26+
### Пример будильника с расположением чисел на колесе, начиная сверху колеса
27+
```kotlin
28+
// @sample: com/sdds/compose/uikit/fixtures/samples/wheel/Wheel_AlarmClockWithEdgePlacement.kt
29+
```
30+
1431
## Стиль Wheel
1532

1633
Стиль Wheel можно настроить с помощью WheelStyle.builder(). Так же существует набор сгенерированных стилей.
@@ -20,3 +37,63 @@ title: Wheel
2037
```kotlin
2138
// @sample: com/sdds/compose/uikit/fixtures/samples/wheel/Wheel_Style.kt
2239
```
40+
41+
## WheelConstraints
42+
43+
Ограничение колёс по ширине.
44+
Возможные значения:
45+
- `Strict` Каждое колесо ограничено по ширине 1/3 доступного пространства в компоненте
46+
- `Loose` У колёс нет ограничений по ширине
47+
48+
### WheelAlignment
49+
50+
Выравнивание составных частей компонента.
51+
Возможные значения:
52+
- `Start` Все колёса имеют выравнивание по левому краю
53+
- `End` Все колёса имеют выравнивание по правому краю
54+
- `Center` Все колёса имеют выравнивание по центру
55+
- `Mixed` Колеса до центрального имеют выравнивание по левому краю, центральное - по центру, колеса после центрального - по правому краю
56+
57+
### DataEdgePlacement
58+
59+
Способ размещения данных на колесе.
60+
Возможные значения:
61+
- `WheelCenter` Данные начинаются и заканчиваются на середине колеса
62+
- `WheelEdge` Данные начинаются и заканчиваются на краю колеса
63+
64+
### WheelSeparator
65+
66+
Тип разделителя.
67+
Возможные значения:
68+
- `None` Разделитель отсутствует
69+
- `Dots` Две точки в качестве разделителя
70+
- `Divider` Divider в качестве разделителя
71+
72+
### WheelDataSet
73+
74+
Набор данных, необходимый для отображения колеса.
75+
76+
Свойства:
77+
- `dataSet: List<WheelItemData>`
78+
Основной набор данных. Содержит список элементов колеса типа WheelItemData.
79+
80+
- `description: String?`
81+
Опциональное, значение по умолчанию: null
82+
Текстовое описание набора данных. Может быть пустым или отсутствовать.
83+
84+
- `initialIndex: Int`
85+
Значение по умолчанию: 0
86+
Начальный индекс, указывающий на позицию элемента, который должен быть виден первым при отображении колеса.
87+
88+
### WheelItemData
89+
90+
Класс, описывающий данные отдельного элемента колеса.
91+
92+
Свойства:
93+
- `text: String`
94+
Значение по умолчанию: ""
95+
Основной текст элемента колеса. Отображается как ключевая информация.
96+
97+
- `textAfter: String`
98+
Значение по умолчанию: ""
99+
Дополнительный текст, который может отображаться после основного текста элемента. Используется для уточнений или вспомогательной информации.

‎sdds-core/uikit-compose-fixtures/src/main/kotlin/com/sdds/compose/uikit/fixtures/samples/navigationbar/NavigationBarSamples.kt‎

Lines changed: 127 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,16 @@
11
package com.sdds.compose.uikit.fixtures.samples.navigationbar
22

3+
import androidx.compose.foundation.clickable
34
import androidx.compose.foundation.shape.RoundedCornerShape
45
import androidx.compose.runtime.Composable
6+
import androidx.compose.ui.Modifier
57
import androidx.compose.ui.graphics.Color
68
import androidx.compose.ui.res.painterResource
79
import androidx.compose.ui.text.TextStyle
810
import androidx.compose.ui.unit.dp
911
import com.sdds.compose.docs.composableCodeSnippet
1012
import com.sdds.compose.uikit.Icon
13+
import com.sdds.compose.uikit.NavBarCenterAlignmentStrategy
1114
import com.sdds.compose.uikit.NavigationBar
1215
import com.sdds.compose.uikit.NavigationBarContentPlacement
1316
import com.sdds.compose.uikit.NavigationBarStyle
@@ -24,18 +27,139 @@ fun NavigationBar_Simple() {
2427
composableCodeSnippet {
2528
NavigationBar(
2629
textPlacement = NavigationBarTextPlacement.Inline,
27-
contentPlacement = NavigationBarContentPlacement.Inline,
28-
textAlign = NavigationBarTextAlign.Start,
2930
textContent = { Text("Text") },
30-
content = { Text("Content") },
3131
actionStart = {
3232
Icon(
33+
modifier = Modifier.clickable { /* действие */ },
34+
painter = painterResource(com.sdds.icons.R.drawable.ic_search_24),
35+
contentDescription = "",
36+
)
37+
},
38+
actionEnd = {
39+
Icon(
40+
modifier = Modifier.clickable { /* действие */ },
41+
painter = painterResource(com.sdds.icons.R.drawable.ic_menu_24),
42+
contentDescription = "",
43+
)
44+
},
45+
)
46+
}
47+
}
48+
49+
@Composable
50+
@DocSample(needScreenshot = true)
51+
fun NavigationBar_TitleDescription() {
52+
composableCodeSnippet {
53+
NavigationBar(
54+
textPlacement = NavigationBarTextPlacement.Inline,
55+
titleContent = { Text("Title") },
56+
descriptionContent = { Text("Description") },
57+
actionStart = {
58+
Icon(
59+
modifier = Modifier.clickable { /* действие */ },
60+
painter = painterResource(com.sdds.icons.R.drawable.ic_search_24),
61+
contentDescription = "",
62+
)
63+
},
64+
actionEnd = {
65+
Icon(
66+
modifier = Modifier.clickable { /* действие */ },
67+
painter = painterResource(com.sdds.icons.R.drawable.ic_menu_24),
68+
contentDescription = "",
69+
)
70+
},
71+
)
72+
}
73+
}
74+
75+
@Composable
76+
@DocSample(needScreenshot = true)
77+
fun NavigationBar_CenterAbsolute() {
78+
composableCodeSnippet {
79+
NavigationBar(
80+
centerAlignmentStrategy = NavBarCenterAlignmentStrategy.Absolute,
81+
textPlacement = NavigationBarTextPlacement.Inline,
82+
titleContent = { Text("Title") },
83+
descriptionContent = { Text("Description") },
84+
actionEnd = {
85+
Icon(
86+
modifier = Modifier.clickable { /* действие */ },
87+
painter = painterResource(com.sdds.icons.R.drawable.ic_search_24),
88+
contentDescription = "",
89+
)
90+
Icon(
91+
modifier = Modifier.clickable { /* действие */ },
92+
painter = painterResource(com.sdds.icons.R.drawable.ic_menu_24),
93+
contentDescription = "",
94+
)
95+
},
96+
)
97+
}
98+
}
99+
100+
@Composable
101+
@DocSample(needScreenshot = true)
102+
fun NavigationBar_CenterRelative() {
103+
composableCodeSnippet {
104+
NavigationBar(
105+
centerAlignmentStrategy = NavBarCenterAlignmentStrategy.Relative,
106+
textPlacement = NavigationBarTextPlacement.Inline,
107+
titleContent = { Text("Title") },
108+
descriptionContent = { Text("Description") },
109+
actionEnd = {
110+
Icon(
111+
modifier = Modifier.clickable { /* действие */ },
33112
painter = painterResource(com.sdds.icons.R.drawable.ic_search_24),
34113
contentDescription = "",
35114
)
115+
Icon(
116+
modifier = Modifier.clickable { /* действие */ },
117+
painter = painterResource(com.sdds.icons.R.drawable.ic_menu_24),
118+
contentDescription = "",
119+
)
36120
},
121+
)
122+
}
123+
}
124+
125+
@Composable
126+
@DocSample(needScreenshot = true)
127+
fun NavigationBar_BottomContentInlineText() {
128+
composableCodeSnippet {
129+
NavigationBar(
130+
textPlacement = NavigationBarTextPlacement.Inline,
131+
contentPlacement = NavigationBarContentPlacement.Bottom,
132+
textAlign = NavigationBarTextAlign.Start,
133+
textContent = { Text("Text") },
134+
content = { Text("Content") },
135+
actionEnd = {
136+
Icon(
137+
modifier = Modifier.clickable { /* действие */ },
138+
painter = painterResource(com.sdds.icons.R.drawable.ic_menu_24),
139+
contentDescription = "",
140+
)
141+
},
142+
)
143+
}
144+
}
145+
146+
@Composable
147+
@DocSample(needScreenshot = true)
148+
fun NavigationBar_BottomTextAndContentMultiplyActions() {
149+
composableCodeSnippet {
150+
NavigationBar(
151+
textPlacement = NavigationBarTextPlacement.Bottom,
152+
contentPlacement = NavigationBarContentPlacement.Bottom,
153+
textAlign = NavigationBarTextAlign.Center,
154+
textContent = { Text("Text") },
37155
actionEnd = {
38156
Icon(
157+
modifier = Modifier.clickable { /* действие */ },
158+
painter = painterResource(com.sdds.icons.R.drawable.ic_search_24),
159+
contentDescription = "",
160+
)
161+
Icon(
162+
modifier = Modifier.clickable { /* действие */ },
39163
painter = painterResource(com.sdds.icons.R.drawable.ic_menu_24),
40164
contentDescription = "",
41165
)

0 commit comments

Comments
 (0)