mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 19:21:34 +08:00
refactor(reorder): using fallback slot
This commit is contained in:
8
core/package-lock.json
generated
8
core/package-lock.json
generated
@ -2325,7 +2325,7 @@
|
|||||||
},
|
},
|
||||||
"onetime": {
|
"onetime": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
|
"resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
|
||||||
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
|
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
@ -6559,7 +6559,7 @@
|
|||||||
},
|
},
|
||||||
"onetime": {
|
"onetime": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
|
"resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
|
||||||
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
|
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
@ -6712,7 +6712,7 @@
|
|||||||
},
|
},
|
||||||
"onetime": {
|
"onetime": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
|
"resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
|
||||||
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
|
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
@ -8068,7 +8068,7 @@
|
|||||||
},
|
},
|
||||||
"onetime": {
|
"onetime": {
|
||||||
"version": "1.1.0",
|
"version": "1.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
|
"resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
|
||||||
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
|
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Component, Element, Prop } from '@stencil/core';
|
import { Component, Prop } from '@stencil/core';
|
||||||
import { Config } from '../../index';
|
import { Config } from '../../index';
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -13,8 +13,6 @@ import { Config } from '../../index';
|
|||||||
})
|
})
|
||||||
export class MenuButton {
|
export class MenuButton {
|
||||||
|
|
||||||
private custom = true;
|
|
||||||
|
|
||||||
@Prop({ context: 'config' }) config!: Config;
|
@Prop({ context: 'config' }) config!: Config;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -27,20 +25,14 @@ export class MenuButton {
|
|||||||
*/
|
*/
|
||||||
@Prop() autoHide = true;
|
@Prop() autoHide = true;
|
||||||
|
|
||||||
@Element() el!: HTMLElement;
|
|
||||||
|
|
||||||
componentWillLoad() {
|
|
||||||
this.custom = this.el.childElementCount > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const menuIcon = this.config.get('menuIcon', 'menu');
|
const menuIcon = this.config.get('menuIcon', 'menu');
|
||||||
return (
|
return (
|
||||||
<ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
|
<ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
|
||||||
<ion-button>
|
<ion-button>
|
||||||
{this.custom
|
<slot>
|
||||||
? <slot/>
|
<ion-icon slot="icon-only" name={menuIcon}/>
|
||||||
: <ion-icon slot="icon-only" name={menuIcon}/>}
|
</slot>
|
||||||
</ion-button>
|
</ion-button>
|
||||||
</ion-menu-toggle>
|
</ion-menu-toggle>
|
||||||
);
|
);
|
||||||
|
@ -1,5 +1,4 @@
|
|||||||
import { Component, Element } from '@stencil/core';
|
import { Component } from '@stencil/core';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
tag: 'ion-reorder',
|
tag: 'ion-reorder',
|
||||||
@ -13,28 +12,12 @@ import { Component, Element } from '@stencil/core';
|
|||||||
})
|
})
|
||||||
export class Reorder {
|
export class Reorder {
|
||||||
|
|
||||||
private custom = true;
|
|
||||||
|
|
||||||
@Element() el!: HTMLElement;
|
|
||||||
|
|
||||||
componentWillLoad() {
|
|
||||||
this.custom = this.el.childElementCount > 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
hostData() {
|
|
||||||
const hostClasses = {
|
|
||||||
'reorder-custom': this.custom
|
|
||||||
};
|
|
||||||
|
|
||||||
return {
|
|
||||||
class: hostClasses
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
return (this.custom)
|
return (
|
||||||
? <slot/>
|
<slot>
|
||||||
: <ion-icon class="reorder-icon" name="reorder"/>;
|
<ion-icon class="reorder-icon" name="reorder"/>
|
||||||
|
</slot>
|
||||||
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
Reference in New Issue
Block a user