|
11 | 11 |
|
12 | 12 | @ContentAndMedia { |
13 | 13 | Components are gathered by group or families. You can find all of theme in the [online documentation](https://ios.unified-design-system.orange.com/documentation/oudscomponents). |
14 | | - For exmeple, in *control* family you will find *checkboxes*, *radio buttons*, *switch items* and some *inputs* fields. |
| 14 | + For exemple, in *control* family you will find *checkboxes*, *radio buttons*, *switch items* and some *inputs* fields. |
15 | 15 | *Layouts* provides *dividers*, *buttons* are in *actions* group, *bullet lists* in *display* family. |
16 | 16 | } |
17 | 17 |
|
18 | 18 | @Steps { |
19 | 19 | @Step { |
20 | 20 | Define a basic `Control` `View` with in its *body* a `VStack` with *theme.spaces.fixedNone* spacing. |
21 | | - Add inside the components you want, for exemple *checkbox item*, *radio item*, *switch item*, *text input* and *password input*. |
| 21 | + Add inside the components you want, for exemple [*checkbox item*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudscheckboxitem), [*radio item*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudsradioitem/), [*switch item*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudsswitchitem), [*text input*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudstextinput) and [*password input*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudspasswordinput). |
22 | 22 | Do not forget the Xcode preview. |
23 | 23 |
|
24 | 24 | @Code(name: "Control.swift", file: "tutorial-onboarding-3-1.swift") { |
|
29 | 29 | @Step { |
30 | 30 | OUDS provides also components as *indicators* like *badges* and *tags*. |
31 | 31 | Define an `Indicator` `View`, with a `VStack` applying *theme.spaces.scaledMedium* spacing token for a *vertical size class*, and containing an `HStack` with a *theme.spaces.fixedSmall* spacing. |
32 | | - Add inside badges: do not hesitate to change their *status* and *size*. |
| 32 | + Add inside [badges](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudsbadge/): do not hesitate to change their *status* and *size*. |
33 | 33 | Make your tests with the Xcode preview. |
34 | 34 |
|
35 | 35 | @Code(name: "Indicator.swift", file: "tutorial-onboarding-3-2.swift") { |
|
39 | 39 |
|
40 | 40 | @Step { |
41 | 41 | There are also *navigation* components in OUDS like *links* and *tab bars*. |
42 | | - Define a `Navigation` `View` with in its body a `VStack` with *theme.spaces.fixedNone* spacing and three links: a *next"* link, a *back* link and an *informational* link opening a URL. |
| 42 | + Define a `Navigation` `View` with in its body a `VStack` with *theme.spaces.fixedNone* spacing and three [links](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudslink): a *next* link, a *back* link and an *informational* link opening a URL. |
43 | 43 |
|
44 | 44 | Use a `VStack` containing `Image` and `Text` `View` objects. |
45 | 45 |
|
|
65 | 65 | } |
66 | 66 |
|
67 | 67 | @Step { |
68 | | - Then define a `CategorySelector` `View`: it must display a *filter chip* for all *ComponentGroup* cases and keep a *selected component group* as *Binding*. Use the *theme.spaces.fixedSmall* token for horizontal spacing between the chips. |
| 68 | + Then define a `CategorySelector` `View`: it must display a [*filter chip*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudsfilterchip/) for all *ComponentGroup* cases and keep a *selected component group* as *Binding*. Use the *theme.spaces.fixedSmall* token for horizontal spacing between the chips. |
69 | 69 |
|
70 | 70 | @Code(name: "CategorySelector.swift", file: "tutorial-onboarding-3-5.swift") |
71 | 71 | } |
|
87 | 87 |
|
88 | 88 | @Steps { |
89 | 89 | @Step { |
90 | | - If you want to apply a theme everywhere in your app, or on specific view, one special `View` is for you: the `OUDSThemeableView`. This object will get a theme you instanciated and apply it as environment value. It will also instanciates some environment objects the components may need. |
| 90 | + If you want to apply a theme everywhere in your app, or on specific view, one special `View` is for you: the [`OUDSThemeableView`](https://ios.unified-design-system.orange.com/documentation/oudsthemescontract/oudsthemeableview). This object will get a theme you instanciated and apply it as environment value. It will also instanciates some environment objects the components may need. |
91 | 91 | Define a `ContentView` `View`, add in its *body* the `OUDSThemeableView` with an instance of `OrangeTheme`, and add inside your previously defined `HomeScreen` `View`. |
92 | | - |
93 | | - *navigation* components like a *tab bar*. The *tab bar* is quite particular: its rendering will change depending if Liquid Glass is applied (i.e. iOS 26+) or not (i.e. until iOS 18). |
94 | | - Add a *tab bar*, with 3 items inside it: the `HomeScreen` `View` and two fake views. |
95 | 92 |
|
96 | 93 | @Code(name: "ContentView.swift", file: "tutorial-onboarding-3-7.swift") { |
97 | 94 | @Image(source: "tutorial-onboarding-3-7.png", alt: "A view with images and texts") |
|
100 | 97 |
|
101 | 98 | @Step { |
102 | 99 | OUDS provides *navigation* components like a *tab bar*. The *tab bar* is quite particular: its rendering will change depending if Liquid Glass is applied (i.e. iOS 26+) or not (i.e. until iOS 18). |
103 | | - Add a *tab bar*, with 3 items inside it: the `HomeScreen` `View` and two fake views. |
| 100 | + Add a [*tab bar*](https://ios.unified-design-system.orange.com/documentation/oudscomponents/oudstabbar/), with 3 items inside it: the `HomeScreen` `View` and two fake views. |
104 | 101 |
|
105 | 102 | You can see how it looks like with other themes like `SoshTheme`, `WireframeTheme` or `OrangeCompactTheme`. |
106 | 103 |
|
107 | 104 | @Code(name: "ContentView.swift", file: "tutorial-onboarding-3-8.swift") { |
108 | | - @Image(source: "tutorial-onboarding-3-8.png", alt: "A view with a tab bar in the bottom") |
| 105 | + @Image(source: "tutorial-onboarding-3-8-LiquidGlass.png", alt: "A view with a tab bar in the bottom") |
109 | 106 | } |
110 | 107 | } |
111 | 108 | } |
|
0 commit comments