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

docs(button): match style guide and add usage

Browse Source
This commit is contained in:
Brandy Carney
2018-04-10 18:26:18 -04:00
parent 9b9aab9f2b
commit 89b46ac52f
5 changed files with 176 additions and 105 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
core/src/components.d.ts vendored
View File

@ -781,6 +781,9 @@ declare global {
* Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
*/ */
'fill': 'clear' | 'outline' | 'solid' | 'default'; 'fill': 'clear' | 'outline' | 'solid' | 'default';
/**
* If true, the transition direction will be backwards upon navigation. Defaults to `false`.
*/
'goBack': boolean; 'goBack': boolean;
/** /**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
@ -844,6 +847,9 @@ declare global {
* Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. * Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`.
*/ */
'fill'?: 'clear' | 'outline' | 'solid' | 'default'; 'fill'?: 'clear' | 'outline' | 'solid' | 'default';
/**
* If true, the transition direction will be backwards upon navigation. Defaults to `false`.
*/
'goBack'?: boolean; 'goBack'?: boolean;
/** /**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. * Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.

122
core/src/components/button/button.tsx
View File

@ -16,59 +16,6 @@ export class Button {
@State() keyFocus: boolean; @State() keyFocus: boolean;
/**
* The type of the button.
* Possible values are: `"submit"`, `"reset"` and `"button"`.
* Default value is: `"button"`
*/
@Prop() type = 'button';
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href: string;
/**
* The type of button.
* Possible values are: `"button"`, `"bar-button"`.
*/
@Prop({mutable: true}) buttonType = 'button';
/**
* The button size.
* Possible values are: `"small"`, `"default"`, `"large"`.
*/
@Prop() size: 'small' | 'default' | 'large';
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
@Prop() disabled = false;
/**
* Set to `"clear"` for a transparent button, to `"outline"` for a transparent
* button with a border, or to `"solid"`. The default style is `"solid"` except inside of
* a toolbar, where the default is `"clear"`.
*/
@Prop() fill: 'clear' | 'outline' | 'solid' | 'default' = 'default';
/**
* If true, activates a button with rounded corners.
*/
@Prop() round = false;
/**
* Set to `"block"` for a full-width button or to `"full"` for a full-width button
* without left and right borders.
*/
@Prop() expand: 'full' | 'block';
/**
* If true, activates a button with a heavier font weight.
*/
@Prop() strong = false;
/** /**
* The color to use from your Sass `$colors` map. * The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. * Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@ -83,7 +30,64 @@ export class Button {
*/ */
@Prop() mode: 'ios' | 'md'; @Prop() mode: 'ios' | 'md';
/**
* The type of button.
* Possible values are: `"button"`, `"bar-button"`.
*/
@Prop({ mutable: true }) buttonType = 'button';
/**
* If true, the user cannot interact with the button. Defaults to `false`.
*/
@Prop() disabled = false;
/**
* Set to `"block"` for a full-width button or to `"full"` for a full-width button
* without left and right borders.
*/
@Prop() expand: 'full' | 'block';
/**
* Set to `"clear"` for a transparent button, to `"outline"` for a transparent
* button with a border, or to `"solid"`. The default style is `"solid"` except inside of
* a toolbar, where the default is `"clear"`.
*/
@Prop() fill: 'clear' | 'outline' | 'solid' | 'default' = 'default';
/**
* If true, the transition direction will be backwards upon navigation. Defaults to `false`.
*/
@Prop() goBack = false; @Prop() goBack = false;
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href: string;
/**
* If true, activates a button with rounded corners.
*/
@Prop() round = false;
/**
* The button size.
* Possible values are: `"small"`, `"default"`, `"large"`.
*/
@Prop() size: 'small' | 'default' | 'large';
/**
* If true, activates a button with a heavier font weight.
*/
@Prop() strong = false;
/**
* The type of the button.
* Possible values are: `"submit"`, `"reset"` and `"button"`.
* Default value is: `"button"`
*/
@Prop() type = 'button';
/** /**
* Emitted when the button has focus. * Emitted when the button has focus.
*/ */
@ -114,17 +118,7 @@ export class Button {
} }
protected render() { protected render() {
const { buttonType, color, expand, fill, mode, round, size, strong } = this;
const {
buttonType,
color,
expand,
fill,
mode,
round,
size,
strong
} = this;
const TagType = this.href ? 'a' : 'button'; const TagType = this.href ? 'a' : 'button';
const buttonClasses = { const buttonClasses = {

45
core/src/components/button/readme.md
View File

@ -32,47 +32,6 @@ This attribute specifies the size of the button. Setting this attribute will cha
| `large` | Button with more height and padding. | | `large` | Button with more height and padding. |
```html
<!-- Colors -->
<ion-button>Default</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="dark">Dark</ion-button>
<!-- Expand -->
<ion-button expand="full">Full Button</ion-button>
<ion-button expand="block">Block Button</ion-button>
<ion-button round>Round Button</ion-button>
<!-- Fill -->
<ion-button expand="full" fill="outline">Outline + Full</ion-button>
<ion-button expand="block" fill="outline">Outline + Block</ion-button>
<ion-button round fill="outline">Outline + Round</ion-button>
<!-- Icons -->
<ion-button>
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>
<ion-button>
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
<!-- Sizes -->
<ion-button size="large">Large</ion-button>
<ion-button>Default</ion-button>
<ion-button size="small">Small</ion-button>
```
<!-- Auto Generated Below --> <!-- Auto Generated Below -->
@ -123,6 +82,8 @@ a toolbar, where the default is `"clear"`.
boolean boolean
If true, the transition direction will be backwards upon navigation. Defaults to `false`.
#### href #### href
@ -219,6 +180,8 @@ a toolbar, where the default is `"clear"`.
boolean boolean
If true, the transition direction will be backwards upon navigation. Defaults to `false`.
#### href #### href

54
core/src/components/button/usage/angular.md Normal file
View File

@ -0,0 +1,54 @@
```html
<!-- Default -->
<ion-button>Default</ion-button>
<!-- Anchor -->
<ion-button href="#">Anchor</ion-button>
<!-- Anchor with backwards transition -->
<ion-button href="/" goBack>Backwards Anchor</ion-button>
<!-- Colors -->
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>
<!-- Expand -->
<ion-button expand="full">Full Button</ion-button>
<ion-button expand="block">Block Button</ion-button>
<!-- Round -->
<ion-button round>Round Button</ion-button>
<!-- Fill -->
<ion-button expand="full" fill="outline">Outline + Full</ion-button>
<ion-button expand="block" fill="outline">Outline + Block</ion-button>
<ion-button round fill="outline">Outline + Round</ion-button>
<!-- Icons -->
<ion-button>
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>
<ion-button>
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
<!-- Sizes -->
<ion-button size="large">Large</ion-button>
<ion-button>Default</ion-button>
<ion-button size="small">Small</ion-button>
```

54
core/src/components/button/usage/javascript.md Normal file
View File

@ -0,0 +1,54 @@
```html
<!-- Default -->
<ion-button>Default</ion-button>
<!-- Anchor -->
<ion-button href="#">Anchor</ion-button>
<!-- Anchor with backwards transition -->
<ion-button href="/" go-back>Backwards Anchor</ion-button>
<!-- Colors -->
<ion-button color="primary">Primary</ion-button>
<ion-button color="secondary">Secondary</ion-button>
<ion-button color="tertiary">Tertiary</ion-button>
<ion-button color="success">Success</ion-button>
<ion-button color="warning">Warning</ion-button>
<ion-button color="danger">Danger</ion-button>
<ion-button color="light">Light</ion-button>
<ion-button color="medium">Medium</ion-button>
<ion-button color="dark">Dark</ion-button>
<!-- Expand -->
<ion-button expand="full">Full Button</ion-button>
<ion-button expand="block">Block Button</ion-button>
<!-- Round -->
<ion-button round>Round Button</ion-button>
<!-- Fill -->
<ion-button expand="full" fill="outline">Outline + Full</ion-button>
<ion-button expand="block" fill="outline">Outline + Block</ion-button>
<ion-button round fill="outline">Outline + Round</ion-button>
<!-- Icons -->
<ion-button>
<ion-icon slot="start" name="star"></ion-icon>
Left Icon
</ion-button>
<ion-button>
Right Icon
<ion-icon slot="end" name="star"></ion-icon>
</ion-button>
<ion-button>
<ion-icon slot="icon-only" name="star"></ion-icon>
</ion-button>
<!-- Sizes -->
<ion-button size="large">Large</ion-button>
<ion-button>Default</ion-button>
<ion-button size="small">Small</ion-button>
```