mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-19 11:41:20 +08:00
docs(button): match style guide and add usage
This commit is contained in:
Brandy Carney
@ -16,59 +16,6 @@ export class Button {
|
||||
|
||||
@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.
|
||||
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
|
||||
@ -83,7 +30,64 @@ export class Button {
|
||||
*/
|
||||
@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;
|
||||
|
||||
/**
|
||||
* 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.
|
||||
*/
|
||||
@ -114,17 +118,7 @@ export class Button {
|
||||
}
|
||||
|
||||
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 buttonClasses = {
|
||||
|
||||
@ -32,47 +32,6 @@ This attribute specifies the size of the button. Setting this attribute will cha
|
||||
| `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 -->
|
||||
|
||||
|
||||
@ -123,6 +82,8 @@ a toolbar, where the default is `"clear"`.
|
||||
|
||||
boolean
|
||||
|
||||
If true, the transition direction will be backwards upon navigation. Defaults to `false`.
|
||||
|
||||
|
||||
#### href
|
||||
|
||||
@ -219,6 +180,8 @@ a toolbar, where the default is `"clear"`.
|
||||
|
||||
boolean
|
||||
|
||||
If true, the transition direction will be backwards upon navigation. Defaults to `false`.
|
||||
|
||||
|
||||
#### href
|
||||
|
||||
|
||||
54
core/src/components/button/usage/angular.md
Normal file
54
core/src/components/button/usage/angular.md
Normal 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
54
core/src/components/button/usage/javascript.md
Normal 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>
|
||||
```
|
||||
Reference in New Issue
Block a user