javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-23 05:58:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix(segment): get segment button working with no values

Browse Source
This commit is contained in:
Brandy Carney
2018-02-06 10:15:28 -05:00
parent 3c82b1f639
commit 1c9cf53f09
4 changed files with 32 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
packages/core/src/components/segment-button/readme.md
View File

@ -1,11 +1,11 @@
# ion-segment-button
The child buttons of the `ion-segment` component. Each `ion-segment-button` must have a value.
Segment buttons are a group of related buttons inside of a [Segment](../../segment/Segment). They are displayed in a horizontal row. Only one segment button can be selected at a time.
```html
<ion-content>
<!-- Segment buttons with icons -->
<ion-segment [(ngModel)]="icons" color="secondary">
<ion-segment>
<ion-segment-button value="camera">
<ion-icon name="camera"></ion-icon>
</ion-segment-button>
@ -15,11 +15,11 @@ The child buttons of the `ion-segment` component. Each `ion-segment-button` must
</ion-segment>
<!-- Segment buttons with text -->
<ion-segment [(ngModel)]="relationship" color="primary">
<ion-segment-button value="friends" (ionSelect)="selectedFriends()">
<ion-segment>
<ion-segment-button value="friends">
Friends
</ion-segment-button>
<ion-segment-button value="enemies" (ionSelect)="selectedEnemies()">
<ion-segment-button value="enemies">
Enemies
</ion-segment-button>
</ion-segment>

29
packages/core/src/components/segment-button/segment-button.tsx
View File

@ -1,6 +1,7 @@
import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
import { createThemedClasses, getElementClassMap } from '../../utils/theme';
let ids = 0;
@Component({
tag: 'ion-segment-button'
@ -10,11 +11,6 @@ export class SegmentButton {
@Element() private el: HTMLElement;
/**
* Emitted when the segment button is clicked.
*/
@Event() ionClick: EventEmitter<SegmentButtonEventDetail>;
@Prop({ mutable: true }) activated = false;
/**
@ -32,12 +28,12 @@ export class SegmentButton {
/**
* If true, the segment button is selected. Defaults to `false`.
*/
@Prop({ mutable: true }) checked = false;
@Prop() checked = false;
/*
* If true, the user cannot interact with the segment button. Default false.
*/
@Prop({ mutable: true }) disabled = false;
@Prop() disabled = false;
/**
* Contains a URL or a URL fragment that the hyperlink points to.
@ -50,6 +46,17 @@ export class SegmentButton {
*/
@Prop({ mutable: true }) value: string;
/**
* Emitted when the segment button is clicked.
*/
@Event() ionClick: EventEmitter;
componentWillLoad() {
if (!this.value) {
this.value = `ion-sb-${ids++}`;
}
}
/**
* Emit the click event to the parent segment
*/
@ -87,11 +94,3 @@ export class SegmentButton {
];
}
}
export interface SegmentButtonEvent extends CustomEvent {
detail: SegmentButtonEventDetail;
}
export interface SegmentButtonEventDetail {
}

12
packages/core/src/components/segment/test/basic/index.html
View File

@ -44,6 +44,18 @@
</ion-toolbar>
<div padding>
<ion-segment>
<ion-segment-button>Seg 1</ion-segment-button>
<ion-segment-button>Seg 2</ion-segment-button>
<ion-segment-button>Seg 3</ion-segment-button>
</ion-segment>
<ion-segment disabled>
<ion-segment-button>Seg 2 1</ion-segment-button>
<ion-segment-button checked>Seg 2 2</ion-segment-button>
<ion-segment-button>Seg 2 3</ion-segment-button>
</ion-segment>
<ion-segment color="dark" value="Reading List">
<ion-segment-button value="Bookmarks">
<ion-icon name="book"></ion-icon>

2
packages/core/src/index.d.ts vendored
View File

@ -89,7 +89,7 @@ export { Reorder } from './components/reorder/reorder';
export { Scroll, ScrollCallback, ScrollDetail } from './components/scroll/scroll';
export { Searchbar } from './components/searchbar/searchbar';
export { Segment } from './components/segment/segment';
export { SegmentButton, SegmentButtonEvent } from './components/segment-button/segment-button';
export { SegmentButton } from './components/segment-button/segment-button';
export { SelectPopoverOption, SelectPopover } from './components/select-popover/select-popover';
export { Select } from './components/select/select';
export { SelectOption } from './components/select-option/select-option';