mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
chore(button): update core button
This commit is contained in:
@@ -9,10 +9,6 @@ $button-round-padding: 0 2.6rem !default;
|
||||
/// @prop - Border radius of the round button
|
||||
$button-round-border-radius: 64px !default;
|
||||
|
||||
:host {
|
||||
visibility: inherit !important;
|
||||
}
|
||||
|
||||
|
||||
.button {
|
||||
@include text-align(center);
|
||||
@@ -39,6 +35,10 @@ $button-round-border-radius: 64px !default;
|
||||
contain: content;
|
||||
}
|
||||
|
||||
ion-button.upgraded {
|
||||
visibility: inherit;
|
||||
}
|
||||
|
||||
.button-inner {
|
||||
display: flex;
|
||||
|
||||
|
||||
@@ -67,10 +67,12 @@ type CssClassObject = { [className: string]: boolean };
|
||||
ios: 'button.ios.scss',
|
||||
md: 'button.md.scss',
|
||||
wp: 'button.wp.scss'
|
||||
}
|
||||
},
|
||||
shadow: false
|
||||
})
|
||||
export class Button {
|
||||
|
||||
@Prop() href: string;
|
||||
|
||||
/**
|
||||
* @Prop {boolean} If true, activates the large button size.
|
||||
@@ -197,41 +199,40 @@ export class Button {
|
||||
'-' + style.toLowerCase() :
|
||||
'');
|
||||
|
||||
return [].concat(
|
||||
`${className}-${mode}`,
|
||||
return [`${className}-${mode}`].concat(
|
||||
color ? `${className}-${mode}-${color}` : []
|
||||
);
|
||||
}
|
||||
|
||||
getStyleClassList(buttonType: string): string[] {
|
||||
var classList = [].concat(
|
||||
let classList = [].concat(
|
||||
this.outline ? this.getColorClassList(this.color, buttonType, 'outline', this.mode) : [],
|
||||
this.clear ? this.getColorClassList(this.color, buttonType, 'clear', this.mode) : [],
|
||||
this.solid ? this.getColorClassList(this.color, buttonType, 'solid', this.mode) : []
|
||||
);
|
||||
|
||||
if (classList.length === 0) {
|
||||
classList = [this.getColorClassList(this.color, buttonType, 'default', this.mode)];
|
||||
classList = this.getColorClassList(this.color, buttonType, 'default', this.mode);
|
||||
}
|
||||
|
||||
return classList;
|
||||
}
|
||||
|
||||
render() {
|
||||
var size =
|
||||
const size =
|
||||
(this.large ? 'large' : null) ||
|
||||
(this.small ? 'small' : null) ||
|
||||
(this.default ? 'default' : null);
|
||||
|
||||
var shape = (this.round ? 'round' : null);
|
||||
const shape = (this.round ? 'round' : null);
|
||||
|
||||
var display =
|
||||
const display =
|
||||
(this.block ? 'block' : null) ||
|
||||
(this.full ? 'full' : null);
|
||||
|
||||
var decorator = (this.strong ? 'strong' : null);
|
||||
const decorator = (this.strong ? 'strong' : null);
|
||||
|
||||
var buttonClasses: CssClassObject = []
|
||||
const buttonClasses: CssClassObject = []
|
||||
.concat(
|
||||
this.getElementClassList(this.buttonType, this.mode),
|
||||
this.getClassList(this.buttonType, shape, this.mode),
|
||||
@@ -245,8 +246,10 @@ export class Button {
|
||||
return prevValue;
|
||||
}, {});
|
||||
|
||||
const tagType = this.href ? 'a' : 'button';
|
||||
|
||||
return h(this,
|
||||
h('button', {
|
||||
h(tagType, {
|
||||
class: buttonClasses,
|
||||
props: {
|
||||
disabled: this.disabled
|
||||
|
||||
Reference in New Issue
Block a user