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

refactor(button): adds shape prop

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-05-11 17:50:53 +02:00
parent 34ae9045b7
commit 859ff45bb7
6 changed files with 56 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -836,14 +836,14 @@ declare global {
* 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). * 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).
*/ */
'mode': Mode; 'mode': Mode;
/**
* If true, activates a button with rounded corners.
*/
'round': boolean;
/** /**
* When using a router, it specifies the transition direction when navigating to another page using `href`. * When using a router, it specifies the transition direction when navigating to another page using `href`.
*/ */
'routerDirection': 'forward' | 'back'; 'routerDirection': 'forward' | 'back';
/**
* The button shape. Possible values are: `"round"`.
*/
'shape': 'round';
/** /**
* The button size. Possible values are: `"small"`, `"default"`, `"large"`. * The button size. Possible values are: `"small"`, `"default"`, `"large"`.
*/ */
@ -914,14 +914,14 @@ declare global {
* Emitted when the button has focus. * Emitted when the button has focus.
*/ */
'onIonFocus'?: (event: CustomEvent<void>) => void; 'onIonFocus'?: (event: CustomEvent<void>) => void;
/**
* If true, activates a button with rounded corners.
*/
'round'?: boolean;
/** /**
* When using a router, it specifies the transition direction when navigating to another page using `href`. * When using a router, it specifies the transition direction when navigating to another page using `href`.
*/ */
'routerDirection'?: 'forward' | 'back'; 'routerDirection'?: 'forward' | 'back';
/**
* The button shape. Possible values are: `"round"`.
*/
'shape'?: 'round';
/** /**
* The button size. Possible values are: `"small"`, `"default"`, `"large"`. * The button size. Possible values are: `"small"`, `"default"`, `"large"`.
*/ */

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

@ -68,9 +68,10 @@ export class Button {
@Prop() href?: string; @Prop() href?: string;
/** /**
* If true, activates a button with rounded corners. * The button shape.
* Possible values are: `"round"`.
*/ */
@Prop() round = false; @Prop() shape?: 'round';
/** /**
* The button size. * The button size.
@ -120,14 +121,14 @@ export class Button {
} }
protected render() { protected render() {
const { buttonType, color, expand, fill, mode, round, size, strong } = this; const { buttonType, color, expand, fill, mode, shape, size, strong } = this;
const TagType = this.href ? 'a' : 'button'; const TagType = this.href ? 'a' : 'button';
const buttonClasses = { const buttonClasses = {
...getButtonClassMap(buttonType, mode), ...getButtonClassMap(buttonType, mode),
...getButtonTypeClassMap(buttonType, expand, mode), ...getButtonTypeClassMap(buttonType, expand, mode),
...getButtonTypeClassMap(buttonType, size, mode), ...getButtonTypeClassMap(buttonType, size, mode),
...getButtonTypeClassMap(buttonType, round ? 'round' : undefined, mode), ...getButtonTypeClassMap(buttonType, shape, mode),
...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode), ...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode),
...getColorClassMap(buttonType, color, fill, mode), ...getColorClassMap(buttonType, color, fill, mode),
...getElementClassMap(this.el.classList), ...getElementClassMap(this.el.classList),

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

@ -95,13 +95,6 @@ Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles). For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### round
boolean
If true, activates a button with rounded corners.
#### routerDirection #### routerDirection
string string
@ -110,6 +103,14 @@ When using a router, it specifies the transition direction when navigating to
another page using `href`. another page using `href`.
#### shape
string
The button shape.
Possible values are: `"round"`.
#### size #### size
string string
@ -194,13 +195,6 @@ Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles). For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### round
boolean
If true, activates a button with rounded corners.
#### router-direction #### router-direction
string string
@ -209,6 +203,14 @@ When using a router, it specifies the transition direction when navigating to
another page using `href`. another page using `href`.
#### shape
string
The button shape.
Possible values are: `"round"`.
#### size #### size
string string

4
core/src/components/button/test/expand/index.html
View File

@ -37,8 +37,8 @@
<ion-button expand="full" color="secondary" size="large">Full + Large</ion-button> <ion-button expand="full" color="secondary" size="large">Full + Large</ion-button>
</p> </p>
<p> <p>
<ion-button expand="block" round>Block + Round</ion-button> <ion-button expand="block" shape="round">Block + Round</ion-button>
<ion-button expand="full" round>Full + Round</ion-button> <ion-button expand="full" shape="round">Full + Round</ion-button>
</p> </p>
</ion-content> </ion-content>

48
core/src/components/button/test/round/index.html
View File

@ -16,32 +16,32 @@
</ion-header> </ion-header>
<ion-content id="content" padding text-center no-bounce> <ion-content id="content" padding text-center no-bounce>
<ion-button round>Default</ion-button> <ion-button shape="round">Default</ion-button>
<ion-button round color="primary">Primary</ion-button> <ion-button shape="round" color="primary">Primary</ion-button>
<ion-button round color="secondary">Secondary</ion-button> <ion-button shape="round" color="secondary">Secondary</ion-button>
<ion-button round color="tertiary">Tertiary</ion-button> <ion-button shape="round" color="tertiary">Tertiary</ion-button>
<ion-button round color="success">Success</ion-button> <ion-button shape="round" color="success">Success</ion-button>
<ion-button round color="warning">Warning</ion-button> <ion-button shape="round" color="warning">Warning</ion-button>
<ion-button round color="danger">Danger</ion-button> <ion-button shape="round" color="danger">Danger</ion-button>
<ion-button round color="light">Light</ion-button> <ion-button shape="round" color="light">Light</ion-button>
<ion-button round color="medium">Medium</ion-button> <ion-button shape="round" color="medium">Medium</ion-button>
<ion-button round color="dark">Dark</ion-button> <ion-button shape="round" color="dark">Dark</ion-button>
<ion-button fill="outline" round>Default</ion-button> <ion-button fill="outline" shape="round">Default</ion-button>
<ion-button fill="outline" round color="primary">Primary</ion-button> <ion-button fill="outline" shape="round" color="primary">Primary</ion-button>
<ion-button fill="outline" round color="secondary">Secondary</ion-button> <ion-button fill="outline" shape="round" color="secondary">Secondary</ion-button>
<ion-button fill="outline" round color="tertiary">Tertiary</ion-button> <ion-button fill="outline" shape="round" color="tertiary">Tertiary</ion-button>
<ion-button fill="outline" round color="success">Success</ion-button> <ion-button fill="outline" shape="round" color="success">Success</ion-button>
<ion-button fill="outline" round color="warning">Warning</ion-button> <ion-button fill="outline" shape="round" color="warning">Warning</ion-button>
<ion-button fill="outline" round color="danger">Danger</ion-button> <ion-button fill="outline" shape="round" color="danger">Danger</ion-button>
<ion-button fill="outline" round color="light">Light</ion-button> <ion-button fill="outline" shape="round" color="light">Light</ion-button>
<ion-button fill="outline" round color="medium">Medium</ion-button> <ion-button fill="outline" shape="round" color="medium">Medium</ion-button>
<ion-button fill="outline" round color="dark">Dark</ion-button> <ion-button fill="outline" shape="round" color="dark">Dark</ion-button>
<ion-button round fill="clear">Clear</ion-button> <ion-button shape="round" fill="clear">Clear</ion-button>
<ion-button round expand="block" color="danger">Block</ion-button> <ion-button shape="round" expand="block" color="danger">Block</ion-button>
<ion-button round expand="full" color="dark">Full</ion-button> <ion-button shape="round" expand="full" color="dark">Full</ion-button>
<ion-button round strong>Strong</ion-button> <ion-button shape="round" strong>Strong</ion-button>
</ion-content> </ion-content>
</ion-app> </ion-app>

2
core/src/components/button/test/strong/index.html
View File

@ -21,7 +21,7 @@
<p><ion-button strong fill="clear">Clear</ion-button></p> <p><ion-button strong fill="clear">Clear</ion-button></p>
<p><ion-button strong expand="block" color="danger">Block</ion-button></p> <p><ion-button strong expand="block" color="danger">Block</ion-button></p>
<p><ion-button strong expand="full" color="dark">Full</ion-button></p> <p><ion-button strong expand="full" color="dark">Full</ion-button></p>
<p><ion-button strong round>Strong</ion-button></p> <p><ion-button strong shape="round">Strong</ion-button></p>
</ion-content> </ion-content>
</ion-app> </ion-app>