Skip to content

Commit ed699c0

Browse files
rigor789rigor789
committed
docs: cleanup SegmentedBar
1 parent 0fd4774 commit ed699c0

File tree

5 files changed

+43
-253
lines changed

5 files changed

+43
-253
lines changed

‎content/screenshots/android/SegmentedBar.png

22.2 KB
Loading

‎content/screenshots/ios/SegmentedBar.png

63.9 KB
Loading

‎content/ui/segmentedbar.md

Lines changed: 29 additions & 253 deletions
Original file line numberDiff line numberDiff line change
@@ -1,299 +1,75 @@
11
---
22
title: SegmentedBar
3+
description: UI component for discrete slection.
34
---
45

5-
<!-- TODO: Add flavors -->
6-
7-
`<SegmentedBar>` is a UI bar component that displays a set of buttons for discrete selection. Can show text or images.
8-
9-
As opposed to [`<TabView>`](#tabview):
10-
11-
- The position of `<SegmentedBar>` is not fixed.
12-
- You can place and style it as needed on the page or inside additional app elements such as hamburger menus.
13-
- You need to handle the content shown after selection separately.
14-
15-
---
6+
`<SegmentedBar>` is a UI bar component that displays a set of buttons for discrete selection.
167

178
<DeviceFrame type="ios">
18-
<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/ios-simulator103iPhone6/SegmentedBar.png"/>
9+
<img src="../screenshots/ios/SegmentedBar.png"/>
1910
</DeviceFrame>
2011
<DeviceFrame type="android">
21-
<img src="https://raw.githubusercontent.com/nativescript-vue/nativescript-vue-ui-tests/master/screenshots/android23/SegmentedBar.png" />
12+
<img src="../screenshots/android/SegmentedBar.png"/>
2213
</DeviceFrame>
2314

24-
### Creating a SegmentedBar with `SegmentedBarItem`
25-
26-
<!-- /// flavor plain -->
27-
28-
```xml
29-
<SegmentedBar>
30-
<SegmentedBarItem title="First" />
31-
<SegmentedBarItem title="Second" />
32-
<SegmentedBarItem title="Third" />
33-
</SegmentedBar>
34-
```
35-
36-
<!-- ///
37-
38-
/// flavor angular
39-
40-
```xml
41-
<SegmentedBar>
42-
<SegmentedBarItem title="First"></SegmentedBarItem>
43-
<SegmentedBarItem title="Second"></SegmentedBarItem>
44-
<SegmentedBarItem title="Third"></SegmentedBarItem>
45-
</SegmentedBar>
46-
```
47-
48-
///
49-
50-
/// flavor svelte
51-
52-
```xml
53-
<segmentedBar>
54-
<segmentedBarItem title="First" />
55-
<segmentedBarItem title="Second" />
56-
<segmentedBarItem title="Third" />
57-
</segmentedBar>
58-
```
59-
60-
///
61-
62-
/// flavor react
63-
64-
```tsx
65-
<segmentedBar>
66-
<segmentedBarItem title="First" />
67-
<segmentedBarItem title="Second" />
68-
<segmentedBarItem title="Third" />
69-
</segmentedBar>
70-
```
71-
72-
///
73-
74-
/// flavor vue
75-
76-
```xml
77-
<SegmentedBar>
78-
<SegmentedBarItem title="First" />
79-
<SegmentedBarItem title="Second" />
80-
<SegmentedBarItem title="Third" />
81-
</SegmentedBar>
82-
```
83-
84-
///
85-
-->
86-
87-
### SegmentedBar with `selectedIndex`
88-
89-
To handle a `selectedIndex` change, listen to the `selectedIndexChanged` event.
90-
91-
<!-- /// flavor plain -->
92-
93-
```xml
94-
<SegmentedBar row="0" class="m-5" selectedIndex="{{ sbSelectedIndex }}"
95-
selectedIndexChanged=" {{ onSelectedIndexChange }} ">
96-
<SegmentedBar.items>
97-
<SegmentedBarItem title="Item 1" />
98-
<SegmentedBarItem title="Item 2" />
99-
<SegmentedBarItem title="Item 3" />
100-
</SegmentedBar.items>
101-
</SegmentedBar>
102-
```
103-
104-
```ts
105-
import { Observable } from '@nativescript/core'
106-
export class HelloWorldModel extends Observable {
107-
sbSelectedIndex = 0
108-
109-
onSelectedIndexChange(args: SelectedIndexChangedEventData) {
110-
console.log('new value: ' + args.newIndex, 'old: ' + args.oldIndex)
111-
}
112-
}
113-
```
114-
115-
<!-- ///
116-
117-
/// flavor angular
118-
119-
```xml
120-
<SegmentedBar
121-
[items]="mySegmentedBarItems"
122-
selectedIndex="0"
123-
(selectedIndexChanged)="onSelectedIndexChanged($event)"
124-
>
125-
</SegmentedBar>
126-
```
127-
128-
```ts
129-
import { Component, ChangeDetectionStrategy } from '@angular/core'
130-
import {
131-
SegmentedBar,
132-
SegmentedBarItem,
133-
SelectedIndexChangedEventData
134-
} from '@nativescript/core'
135-
136-
@Component({
137-
moduleId: module.id,
138-
templateUrl: './usage.component.html',
139-
changeDetection: ChangeDetectionStrategy.OnPush
140-
})
141-
export class BasicSegmentedBarComponent {
142-
mySegmentedBarItems: Array<SegmentedBarItem> = []
143-
144-
constructor() {
145-
for (let i = 1; i < 5; i++) {
146-
const item = new SegmentedBarItem()
147-
item.title = 'Item ' + i
148-
this.mySegmentedBarItems.push(item)
149-
}
150-
}
151-
152-
public onSelectedIndexChanged(args: SelectedIndexChangedEventData) {
153-
const segmentedBar = args.object as SegmentedBar
154-
const oldIndex = args.oldIndex
155-
const newIndex = args.newIndex
156-
}
157-
}
158-
```
159-
160-
///
161-
162-
/// flavor vue
163-
164-
```xml
165-
<SegmentedBar
166-
:items="listOfItems"
167-
selectedIndex="0"
168-
@selectedIndexChanged="onSelectedIndexChange"
169-
/>
170-
```
171-
172-
`<SegmentedBar>` provides two-way data binding using `v-model`.
173-
174-
```xml
175-
<SegmentedBar :items="listOfItems" v-model="selectedItem" />
176-
```
177-
178-
///
179-
180-
/// flavor svelte
181-
182-
```xml
183-
<segmentedBar selectedIndex="0" on:selectedIndexChanged="{onSelectedIndexChange}" />
184-
```
185-
186-
`<segmentedBar>` can be populated with `{each}` block.
187-
188-
```xml
189-
<segmentedBar>
190-
{#each listOfItems as item}
191-
<segmentedBarItem title="{item}" />
192-
{/each}
193-
</segmentedBar>
194-
```
195-
196-
```js
197-
let listOfItems = ['First', 'Second', 'Third']
198-
```
199-
200-
`<segmentedBar>` provides two-way data binding of `selectedIndex`.
201-
202-
```tsx
203-
<segmentedBar bind:selectedIndex="{selectedItem}" >
204-
```
205-
206-
///
207-
208-
/// flavor react
209-
210-
```tsx
211-
<segmentedBar
212-
items={listOfItems}
213-
selectedIndex={0}
214-
selectedIndexChanged={onSelectedIndexChange}
215-
/>
216-
```
217-
218-
/// -->
15+
<<< @/../examples/src/ui/SegmentedBar/template.xml#example
21916

22017
## Props
22118

22219
### items
22320

22421
```ts
225-
const segmentedBarItem1 = new SegmentedBarItem()
226-
segmentedBarItem1.title = 'Item 1'
227-
228-
const segmentedBarItem2 = new SegmentedBarItem()
229-
segmentedBarItem2.title = 'Item 2'
230-
231-
//SegmentedBar
232-
const segmentedBar = new SegmentedBar()
233-
234-
segmentedBar.items = [segmentedBarItem1, segmentedBarItem2]
22+
items: SegmentedBarItem[]
23523
```
23624

237-
An array of items to be displayed in the SegmentedBar. Represents the button labels or icons of the SegmentedBar.
238-
239-
---
25+
An array of items to be displayed in the SegmentedBar.
24026

24127
### selectedIndex
24228

243-
```xml
244-
<SegmentedBar selectedIndex="{{ sbSelectedIndex }}">
245-
```
246-
24729
```ts
248-
export class HelloWorldModel extends Observable {
249-
sbSelectedIndex = 0
250-
}
30+
selectedIndex: number
25131
```
25232

25333
Gets or sets the index of the selected item.
25434

255-
---
256-
25735
### selectedBackgroundColor
25836

259-
```xml
260-
<SegmentedBar selectedBackgroundColor="red">
261-
</SegmentedBar>
37+
```ts
38+
selectedBackgroundColor: Color
26239
```
26340

264-
Gets or sets the background color of the selected item. To set the background color of the entire bar, use `backgroundColor`.
41+
Gets or sets the background color of the selected item.
26542

266-
---
43+
To set the background color of the entire bar, use `backgroundColor`.
26744

268-
### ...Inherited
45+
See [Color](/api/class/Color).
26946

270-
For additional inherited properties, refer to the [API Reference](https://docs.nativescript.org/api-reference/classes/segmentedbar).
47+
### ...Inherited
27148

272-
## Events
49+
For additional inherited properties, refer to the [API Reference](/api/class/SegmentedBar).
27350

274-
### selectedIndexChanged
51+
## SegmentedBarItem Props
27552

276-
```xml
277-
<SegmentedBar selectedIndexChanged=" {{ onSelectedIndexChange }} ">
278-
```
53+
### title
27954

28055
```ts
281-
onSelectedIndexChange(args: SelectedIndexChangedEventData) {
282-
const segmentedBar = args.object as SegmentedBar
283-
}
56+
title: string
28457
```
28558

286-
Emitted when the an item on the SegmentedBar is tapped. See the [SelectedIndexChangedEventData interface](#selectedindexchangedeventdata-interface) for the event data.
59+
Gets or sets the title of the SegmentedBarItem.
28760

288-
---
61+
## Events
28962

290-
### SelectedIndexChangedEventData interface
63+
### selectedIndexChanged
64+
65+
```ts
66+
on('selectedIndexChanged', (args: EventData) => {
67+
const segmentedBar = args.object as SegmentedBar
68+
console.log('SegmentedBar index changed to:', segmentedBar.selectedIndex)
69+
})
70+
```
29171

292-
The `SelectedIndexChangedEventData` object provides the following data:
293-
| Name | Type | Description |
294-
|------|------|-------------|
295-
| `oldIndex`| `number`| The old selected index.|
296-
| `newIndex`| `number`| The new selected index.|
72+
Emitted when an item in the SegmentedBar is tapped.
29773

29874
## Native component
29975

‎examples/flows/screenshots.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,5 @@ output.screenshots = [
1414
'Progress',
1515
'ScrollView',
1616
'SearchBar',
17+
'SegmentedBar',
1718
]

‎examples/src/ui/SegmentedBar/template.xml

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<Page>
2+
<GridLayout padding="8">
3+
<ContentView verticalAlignment="center">
4+
<!-- #region example -->
5+
<SegmentedBar>
6+
<SegmentedBarItem title="First" />
7+
<SegmentedBarItem title="Second" />
8+
<SegmentedBarItem title="Third" />
9+
</SegmentedBar>
10+
<!-- #endregion example -->
11+
</ContentView>
12+
</GridLayout>
13+
</Page>

0 commit comments

Comments
 (0)