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).
*/
'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`.
*/
'routerDirection': 'forward' | 'back';
/**
* The button shape. Possible values are: `"round"`.
*/
'shape': 'round';
/**
* The button size. Possible values are: `"small"`, `"default"`, `"large"`.
*/
@ -914,14 +914,14 @@ declare global {
* Emitted when the button has focus.
*/
'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`.
*/
'routerDirection'?: 'forward' | 'back';
/**
* The button shape. Possible values are: `"round"`.
*/
'shape'?: 'round';
/**
* 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;
/**
* If true, activates a button with rounded corners.
* The button shape.
* Possible values are: `"round"`.
*/
@Prop() round = false;
@Prop() shape?: 'round';
/**
* The button size.
@ -120,14 +121,14 @@ export class Button {
}
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 buttonClasses = {
...getButtonClassMap(buttonType, mode),
...getButtonTypeClassMap(buttonType, expand, mode),
...getButtonTypeClassMap(buttonType, size, mode),
...getButtonTypeClassMap(buttonType, round ? 'round' : undefined, mode),
...getButtonTypeClassMap(buttonType, shape, mode),
...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode),
...getColorClassMap(buttonType, color, fill, mode),
...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).
#### round
boolean
If true, activates a button with rounded corners.
#### routerDirection
string
@ -110,6 +103,14 @@ When using a router, it specifies the transition direction when navigating to
another page using `href`.
#### shape
string
The button shape.
Possible values are: `"round"`.
#### size
string
@ -194,13 +195,6 @@ Possible values are: `"ios"` or `"md"`.
For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
#### round
boolean
If true, activates a button with rounded corners.
#### router-direction
string
@ -209,6 +203,14 @@ When using a router, it specifies the transition direction when navigating to
another page using `href`.
#### shape
string
The button shape.
Possible values are: `"round"`.
#### size
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>
</p>
<p>
<ion-button expand="block" round>Block + Round</ion-button>
<ion-button expand="full" round>Full + Round</ion-button>
<ion-button expand="block" shape="round">Block + Round</ion-button>
<ion-button expand="full" shape="round">Full + Round</ion-button>
</p>
</ion-content>

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

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