mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
docs(segment): add usage for segment and segment button
This commit is contained in:
Brandy Carney
@ -2,53 +2,6 @@
|
|||||||
|
|
||||||
Segment buttons are groups of related buttons inside of a [Segment](../../segment/Segment). They are displayed in a horizontal row. A segment button can be checked by default by adding the `checked` attribute or by setting the `value` of the segment to the `value` of the segment button. Only one segment button should be selected at a time.
|
Segment buttons are groups of related buttons inside of a [Segment](../../segment/Segment). They are displayed in a horizontal row. A segment button can be checked by default by adding the `checked` attribute or by setting the `value` of the segment to the `value` of the segment button. Only one segment button should be selected at a time.
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- Segment buttons with text -->
|
|
||||||
<ion-segment>
|
|
||||||
<ion-segment-button>
|
|
||||||
Friends
|
|
||||||
</ion-segment-button>
|
|
||||||
<ion-segment-button>
|
|
||||||
Enemies
|
|
||||||
</ion-segment-button>
|
|
||||||
</ion-segment>
|
|
||||||
|
|
||||||
<!-- Segment buttons with the first checked and the last disabled -->
|
|
||||||
<ion-segment>
|
|
||||||
<ion-segment-button checked>
|
|
||||||
Paid
|
|
||||||
</ion-segment-button>
|
|
||||||
<ion-segment-button>
|
|
||||||
Free
|
|
||||||
</ion-segment-button>
|
|
||||||
<ion-segment-button disabled>
|
|
||||||
Top
|
|
||||||
</ion-segment-button>
|
|
||||||
</ion-segment>
|
|
||||||
|
|
||||||
<!-- Segment buttons with values and icons -->
|
|
||||||
<ion-segment>
|
|
||||||
<ion-segment-button value="camera">
|
|
||||||
<ion-icon name="camera"></ion-icon>
|
|
||||||
</ion-segment-button>
|
|
||||||
<ion-segment-button value="bookmark">
|
|
||||||
<ion-icon name="bookmark"></ion-icon>
|
|
||||||
</ion-segment-button>
|
|
||||||
</ion-segment>
|
|
||||||
|
|
||||||
<!-- Segment with a value that checks the last button -->
|
|
||||||
<ion-segment value="shared">
|
|
||||||
<ion-segment-button value="bookmarks">
|
|
||||||
Bookmarks
|
|
||||||
</ion-segment-button>
|
|
||||||
<ion-segment-button value="reading">
|
|
||||||
Reading List
|
|
||||||
</ion-segment-button>
|
|
||||||
<ion-segment-button value="shared">
|
|
||||||
Shared Links
|
|
||||||
</ion-segment-button>
|
|
||||||
</ion-segment>
|
|
||||||
```
|
|
||||||
|
|
||||||
<!-- Auto Generated Below -->
|
<!-- Auto Generated Below -->
|
||||||
|
|
||||||
|
|||||||
63
core/src/components/segment-button/usage/angular.md
Normal file
63
core/src/components/segment-button/usage/angular.md
Normal file
@ -0,0 +1,63 @@
|
|||||||
|
|
||||||
|
```html
|
||||||
|
<!-- Segment buttons with text and click listeners -->
|
||||||
|
<ion-segment>
|
||||||
|
<ion-segment-button (ionClick)="segmentButtonClicked($event)">
|
||||||
|
Friends
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button (ionClick)="segmentButtonClicked($event)">
|
||||||
|
Enemies
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<!-- Segment buttons with the first checked and the last disabled -->
|
||||||
|
<ion-segment>
|
||||||
|
<ion-segment-button checked>
|
||||||
|
Paid
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button>
|
||||||
|
Free
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button disabled>
|
||||||
|
Top
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<!-- Segment buttons with values and icons -->
|
||||||
|
<ion-segment>
|
||||||
|
<ion-segment-button value="camera">
|
||||||
|
<ion-icon name="camera"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="bookmark">
|
||||||
|
<ion-icon name="bookmark"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<!-- Segment with a value that checks the last button -->
|
||||||
|
<ion-segment value="shared">
|
||||||
|
<ion-segment-button value="bookmarks">
|
||||||
|
Bookmarks
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="reading">
|
||||||
|
Reading List
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="shared">
|
||||||
|
Shared Links
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'segment-button-example',
|
||||||
|
templateUrl: 'segment-button-example.html',
|
||||||
|
styleUrls: ['./segment-button-example.css'],
|
||||||
|
})
|
||||||
|
export class SegmentButtonExample {
|
||||||
|
segmentButtonClicked(ev: any) {
|
||||||
|
console.log('Segment button clicked', ev);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
58
core/src/components/segment-button/usage/javascript.md
Normal file
58
core/src/components/segment-button/usage/javascript.md
Normal file
@ -0,0 +1,58 @@
|
|||||||
|
|
||||||
|
```html
|
||||||
|
<!-- Segment buttons with text -->
|
||||||
|
<ion-segment>
|
||||||
|
<ion-segment-button>
|
||||||
|
Friends
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button>
|
||||||
|
Enemies
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<!-- Segment buttons with the first checked and the last disabled -->
|
||||||
|
<ion-segment>
|
||||||
|
<ion-segment-button checked>
|
||||||
|
Paid
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button>
|
||||||
|
Free
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button disabled>
|
||||||
|
Top
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<!-- Segment buttons with values and icons -->
|
||||||
|
<ion-segment>
|
||||||
|
<ion-segment-button value="camera">
|
||||||
|
<ion-icon name="camera"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="bookmark">
|
||||||
|
<ion-icon name="bookmark"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<!-- Segment with a value that checks the last button -->
|
||||||
|
<ion-segment value="shared">
|
||||||
|
<ion-segment-button value="bookmarks">
|
||||||
|
Bookmarks
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="reading">
|
||||||
|
Reading List
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="shared">
|
||||||
|
Shared Links
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Listen for ionClick on all segment buttons
|
||||||
|
const segmentButtons = document.querySelectorAll('ion-segment-button')
|
||||||
|
for (let i = 0; i < segmentButtons.length; i++) {
|
||||||
|
segmentButtons[i].addEventListener('ionClick', (ev) => {
|
||||||
|
console.log('Segment button clicked', ev);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
@ -4,63 +4,6 @@ Segments display a group of related buttons, sometimes known as segmented contro
|
|||||||
|
|
||||||
Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.
|
Their functionality is similar to tabs, where selecting one will deselect all others. Segments are useful for toggling between different views inside of the content. Tabs should be used instead of a segment when clicking on a control should navigate between pages.
|
||||||
|
|
||||||
```html
|
|
||||||
<!-- Default Segment -->
|
|
||||||
<ion-segment>
|
|
||||||
<ion-segment-button value="friends">
|
|
||||||
Friends
|
|
||||||
</ion-segment-button>
|
|
||||||
<ion-segment-button value="enemies">
|
|
||||||
Enemies
|
|
||||||
</ion-segment-button>
|
|
||||||
</ion-segment>
|
|
||||||
|
|
||||||
<!-- Disabled Segment -->
|
|
||||||
<ion-segment disabled>
|
|
||||||
<ion-segment-button value="sunny" checked>
|
|
||||||
Sunny
|
|
||||||
</ion-segment-button>
|
|
||||||
<ion-segment-button value="rainy">
|
|
||||||
Rainy
|
|
||||||
</ion-segment-button>
|
|
||||||
</ion-segment>
|
|
||||||
|
|
||||||
<!-- Segment with anchors -->
|
|
||||||
<ion-segment>
|
|
||||||
<ion-segment-button href="#dogs" value="dogs">
|
|
||||||
Dogs
|
|
||||||
</ion-segment-button>
|
|
||||||
<ion-segment-button href="#cats" value="cats">
|
|
||||||
Cats
|
|
||||||
</ion-segment-button>
|
|
||||||
</ion-segment>
|
|
||||||
|
|
||||||
<!-- Segment with secondary color -->
|
|
||||||
<ion-segment color="secondary">
|
|
||||||
<ion-segment-button value="standard">
|
|
||||||
Standard
|
|
||||||
</ion-segment-button>
|
|
||||||
<ion-segment-button value="hybrid">
|
|
||||||
Hybrid
|
|
||||||
</ion-segment-button>
|
|
||||||
<ion-segment-button value="sat">
|
|
||||||
Satellite
|
|
||||||
</ion-segment-button>
|
|
||||||
</ion-segment>
|
|
||||||
|
|
||||||
<!-- Segment in a toolbar -->
|
|
||||||
<ion-toolbar>
|
|
||||||
<ion-segment>
|
|
||||||
<ion-segment-button value="camera">
|
|
||||||
<ion-icon name="camera"></ion-icon>
|
|
||||||
</ion-segment-button>
|
|
||||||
<ion-segment-button value="bookmark">
|
|
||||||
<ion-icon name="bookmark"></ion-icon>
|
|
||||||
</ion-segment-button>
|
|
||||||
</ion-segment>
|
|
||||||
</ion-toolbar>
|
|
||||||
```
|
|
||||||
|
|
||||||
|
|
||||||
<!-- Auto Generated Below -->
|
<!-- Auto Generated Below -->
|
||||||
|
|
||||||
|
|||||||
@ -187,6 +187,21 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const segments = document.querySelectorAll('ion-segment')
|
||||||
|
for (let i = 0; i < segments.length; i++) {
|
||||||
|
segments[i].addEventListener('ionChange', (ev) => {
|
||||||
|
console.log('Segment value changed', ev);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// Listen for ionClick on all segment buttons
|
||||||
|
const segmentButtons = document.querySelectorAll('ion-segment-button')
|
||||||
|
for (let i = 0; i < segmentButtons.length; i++) {
|
||||||
|
segmentButtons[i].addEventListener('ionClick', (ev) => {
|
||||||
|
console.log('Segment button clicked', ev);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
</ion-content>
|
</ion-content>
|
||||||
|
|
||||||
|
|||||||
71
core/src/components/segment/usage/angular.md
Normal file
71
core/src/components/segment/usage/angular.md
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
```html
|
||||||
|
<!-- Default Segment -->
|
||||||
|
<ion-segment (ionChange)="segmentChanged($event)">
|
||||||
|
<ion-segment-button value="friends">
|
||||||
|
Friends
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="enemies">
|
||||||
|
Enemies
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<!-- Disabled Segment -->
|
||||||
|
<ion-segment (ionChange)="segmentChanged($event)" disabled>
|
||||||
|
<ion-segment-button value="sunny" checked>
|
||||||
|
Sunny
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="rainy">
|
||||||
|
Rainy
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<!-- Segment with anchors -->
|
||||||
|
<ion-segment (ionChange)="segmentChanged($event)">
|
||||||
|
<ion-segment-button href="#dogs" value="dogs">
|
||||||
|
Dogs
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button href="#cats" value="cats">
|
||||||
|
Cats
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<!-- Segment with secondary color -->
|
||||||
|
<ion-segment (ionChange)="segmentChanged($event)" color="secondary">
|
||||||
|
<ion-segment-button value="standard">
|
||||||
|
Standard
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="hybrid">
|
||||||
|
Hybrid
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="sat">
|
||||||
|
Satellite
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<!-- Segment in a toolbar -->
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-segment (ionChange)="segmentChanged($event)">
|
||||||
|
<ion-segment-button value="camera">
|
||||||
|
<ion-icon name="camera"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="bookmark">
|
||||||
|
<ion-icon name="bookmark"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-toolbar>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
import { Component } from '@angular/core';
|
||||||
|
|
||||||
|
@Component({
|
||||||
|
selector: 'segment-example',
|
||||||
|
templateUrl: 'segment-example.html',
|
||||||
|
styleUrls: ['./segment-example.css'],
|
||||||
|
})
|
||||||
|
export class SegmentExample {
|
||||||
|
segmentChanged(ev: any) {
|
||||||
|
console.log('Segment changed', ev);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
```
|
||||||
66
core/src/components/segment/usage/javascript.md
Normal file
66
core/src/components/segment/usage/javascript.md
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
```html
|
||||||
|
<!-- Default Segment -->
|
||||||
|
<ion-segment>
|
||||||
|
<ion-segment-button value="friends">
|
||||||
|
Friends
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="enemies">
|
||||||
|
Enemies
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<!-- Disabled Segment -->
|
||||||
|
<ion-segment disabled>
|
||||||
|
<ion-segment-button value="sunny" checked>
|
||||||
|
Sunny
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="rainy">
|
||||||
|
Rainy
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<!-- Segment with anchors -->
|
||||||
|
<ion-segment>
|
||||||
|
<ion-segment-button href="#dogs" value="dogs">
|
||||||
|
Dogs
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button href="#cats" value="cats">
|
||||||
|
Cats
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<!-- Segment with secondary color -->
|
||||||
|
<ion-segment color="secondary">
|
||||||
|
<ion-segment-button value="standard">
|
||||||
|
Standard
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="hybrid">
|
||||||
|
Hybrid
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="sat">
|
||||||
|
Satellite
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
|
||||||
|
<!-- Segment in a toolbar -->
|
||||||
|
<ion-toolbar>
|
||||||
|
<ion-segment>
|
||||||
|
<ion-segment-button value="camera">
|
||||||
|
<ion-icon name="camera"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
<ion-segment-button value="bookmark">
|
||||||
|
<ion-icon name="bookmark"></ion-icon>
|
||||||
|
</ion-segment-button>
|
||||||
|
</ion-segment>
|
||||||
|
</ion-toolbar>
|
||||||
|
```
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
// Listen for ionChange on all segments
|
||||||
|
const segments = document.querySelectorAll('ion-segment')
|
||||||
|
for (let i = 0; i < segments.length; i++) {
|
||||||
|
segments[i].addEventListener('ionChange', (ev) => {
|
||||||
|
console.log('Segment changed', ev);
|
||||||
|
})
|
||||||
|
}
|
||||||
|
```
|
||||||
Reference in New Issue
Block a user