mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
chore(): update stencil (#16506)
This commit is contained in:
Manu MA
@ -6,6 +6,316 @@ Segment buttons are groups of related buttons inside of a [Segment](../../segmen
|
||||
<!-- Auto Generated Below -->
|
||||
|
||||
|
||||
## Usage
|
||||
|
||||
### Angular
|
||||
|
||||
```html
|
||||
<!-- Segment buttons with text and click listeners -->
|
||||
<ion-segment>
|
||||
<ion-segment-button (ionSelect)="segmentButtonClicked($event)">
|
||||
<ion-label>Friends</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button (ionSelect)="segmentButtonClicked($event)">
|
||||
<ion-label>Enemies</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment buttons with the first checked and the last disabled -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-label>Paid</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-label>Free</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled>
|
||||
<ion-label>Top</ion-label>
|
||||
</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">
|
||||
<ion-label>Bookmarks</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="reading">
|
||||
<ion-label>Reading List</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="shared">
|
||||
<ion-label>Shared Links</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Label only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon top -->
|
||||
<ion-segment>
|
||||
<ion-segment-button layout="icon-top">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked layout="icon-top">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-top">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon bottom -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-bottom">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon start -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-start">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon end -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-end">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled layout="icon-end">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
```
|
||||
|
||||
```typescript
|
||||
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);
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
### Javascript
|
||||
|
||||
```html
|
||||
<!-- Segment buttons with text -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-label>Friends</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-label>Enemies</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Segment buttons with the first checked and the last disabled -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-label>Paid</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-label>Free</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled>
|
||||
<ion-label>Top</ion-label>
|
||||
</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">
|
||||
<ion-label>Bookmarks</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="reading">
|
||||
<ion-label>Reading List</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button value="shared">
|
||||
<ion-label>Shared Links</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Label only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon only -->
|
||||
<ion-segment>
|
||||
<ion-segment-button>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon top -->
|
||||
<ion-segment>
|
||||
<ion-segment-button layout="icon-top">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button checked layout="icon-top">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-top">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon bottom -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-bottom">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-bottom">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon start -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-start">
|
||||
<ion-label>Item One</ion-label>
|
||||
<ion-icon name="call"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-label>Item Two</ion-label>
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-start">
|
||||
<ion-label>Item Three</ion-label>
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
</ion-segment-button>
|
||||
</ion-segment>
|
||||
|
||||
<!-- Icon end -->
|
||||
<ion-segment>
|
||||
<ion-segment-button checked layout="icon-end">
|
||||
<ion-icon name="call"></ion-icon>
|
||||
<ion-label>Item One</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button disabled layout="icon-end">
|
||||
<ion-icon name="heart"></ion-icon>
|
||||
<ion-label>Item Two</ion-label>
|
||||
</ion-segment-button>
|
||||
<ion-segment-button layout="icon-end">
|
||||
<ion-icon name="pin"></ion-icon>
|
||||
<ion-label>Item Three</ion-label>
|
||||
</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('ionSelect', (ev) => {
|
||||
console.log('Segment button clicked', ev);
|
||||
})
|
||||
}
|
||||
```
|
||||
|
||||
|
||||
|
||||
## Properties
|
||||
|
||||
| Property | Attribute | Description | Type | Default |
|
||||
|
||||
Reference in New Issue
Block a user