javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-08-22 21:48:42 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(): update demos and segments

Browse Source
This commit is contained in:
mhartington
2018-01-10 12:46:44 -05:00
parent 3aefce179e
commit c7920b886e
15 changed files with 102 additions and 51 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
packages/core/src/components.d.ts vendored
View File

@ -2425,6 +2425,7 @@ declare global {
}
namespace JSXElements {
export interface IonSegmentButtonAttributes extends HTMLAttributes {
activated?: boolean;
checked?: boolean;
color?: string;
disabled?: boolean;

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

@ -31,15 +31,25 @@ The child buttons of the `ion-segment` component. Each `ion-segment-button` must
## Properties
#### activated
boolean
#### checked
boolean
If true, the segment button is selected. Defaults to `false`.
#### color
string
The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
#### disabled
@ -50,23 +60,38 @@ boolean
any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### value
string
The value of the segment button.
## Attributes
#### activated
boolean
#### checked
boolean
If true, the segment button is selected. Defaults to `false`.
#### color
string
The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
#### disabled
@ -77,16 +102,23 @@ boolean
any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### value
string
The value of the segment button.
## Events
#### ionClick
Emitted when the segment button is clicked.
----------------------------------------------

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

@ -12,38 +12,36 @@ export class SegmentButton {
@Element() private el: HTMLElement;
/**
* @output {SegmentButtonEvent} Emitted when the segment button is clicked.
* Emitted when the segment button is clicked.
*/
@Event() ionClick: EventEmitter<SegmentButtonEventDetail>;
@State() activated: boolean = false;
@Prop({mutable: true}) activated: boolean = false;
/**
* @input {string} The color to use from your Sass `$colors` map.
* The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color: string;
/**
* @input {string} The mode determines which platform styles to use.
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@Prop() mode: 'ios' | 'md';
/**
* @input {boolean} If true, the segment button is selected. Defaults to `false`.
* If true, the segment button is selected. Defaults to `false`.
*/
@Prop({ mutable: true }) checked: boolean = false;
/*
* @input {boolean} If true, the user cannot interact with the segment button. Default false.
* If true, the user cannot interact with the segment button. Default false.
*/
@Prop({ mutable: true }) disabled: boolean = false;
/**
* @input {string} the value of the segment button.
* The value of the segment button.
*/
@Prop({ mutable: true }) value: string;

18
packages/core/src/components/segment/readme.md
View File

@ -58,6 +58,9 @@ Segments provide functionality similar to tabs, selecting one will unselect all
string
The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
#### disabled
@ -68,11 +71,16 @@ boolean
any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### value
string
the value of the segment.
## Attributes
@ -80,6 +88,9 @@ string
string
The color to use for the text color.
Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
#### disabled
@ -90,16 +101,23 @@ boolean
any
The mode determines which platform styles to use.
Possible values are: `"ios"` or `"md"`.
#### value
string
the value of the segment.
## Events
#### ionChange
Emitted when the value property has changed.
----------------------------------------------

13
packages/core/src/components/segment/segment.tsx
View File

@ -18,31 +18,29 @@ export class Segment {
@Element() private el: HTMLElement;
/**
* @output {Event} Emitted when the value property has changed.
* Emitted when the value property has changed.
*/
@Event() ionChange: EventEmitter<SegmentEventDetail>;
/**
* @input {string} The color to use from your Sass `$colors` map.
* The color to use for the text color.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
@Prop() color: string;
/**
* @input {string} The mode determines which platform styles to use.
* The mode determines which platform styles to use.
* Possible values are: `"ios"` or `"md"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
@Prop() mode: 'ios' | 'md';
/*
* @input {boolean} If true, the user cannot interact with the segment. Default false.
* If true, the user cannot interact with the segment. Default false.
*/
@Prop({ mutable: true }) disabled: boolean = false;
/**
* @input {string} the value of the segment.
* the value of the segment.
*/
@Prop({ mutable: true }) value: string;
@ -53,7 +51,6 @@ export class Segment {
componentDidLoad() {
this.buttons = this.el.querySelectorAll('ion-segment-button');
for (var i = 0; i < this.buttons.length; i++) {
const button = this.buttons[i];

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

@ -49,10 +49,10 @@
<ion-icon name="book"></ion-icon>
</ion-segment-button>
<ion-segment-button value="Reading List">
<ion-icon ios="ios-glasses-outline" md="md-glasses"></ion-icon>
<ion-icon name="glasses"></ion-icon>
</ion-segment-button>
<ion-segment-button value="Shared Links">
<ion-icon ios="ios-at-outline" md="md-at"></ion-icon>
<ion-icon name="at"></ion-icon>
</ion-segment-button>
</ion-segment>
@ -119,6 +119,8 @@
console.log('event.target: ', event.target.value);
});
}
</script>
</ion-content>
</ion-page>