mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-18 11:17:19 +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": {
|
||||
"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=",
|
||||
"dev": true
|
||||
},
|
||||
@ -6559,7 +6559,7 @@
|
||||
},
|
||||
"onetime": {
|
||||
"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=",
|
||||
"dev": true
|
||||
},
|
||||
@ -6712,7 +6712,7 @@
|
||||
},
|
||||
"onetime": {
|
||||
"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=",
|
||||
"dev": true
|
||||
},
|
||||
@ -8068,7 +8068,7 @@
|
||||
},
|
||||
"onetime": {
|
||||
"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=",
|
||||
"dev": true
|
||||
},
|
||||
|
@ -1,4 +1,4 @@
|
||||
import { Component, Element, Prop } from '@stencil/core';
|
||||
import { Component, Prop } from '@stencil/core';
|
||||
import { Config } from '../../index';
|
||||
|
||||
@Component({
|
||||
@ -13,8 +13,6 @@ import { Config } from '../../index';
|
||||
})
|
||||
export class MenuButton {
|
||||
|
||||
private custom = true;
|
||||
|
||||
@Prop({ context: 'config' }) config!: Config;
|
||||
|
||||
/**
|
||||
@ -27,20 +25,14 @@ export class MenuButton {
|
||||
*/
|
||||
@Prop() autoHide = true;
|
||||
|
||||
@Element() el!: HTMLElement;
|
||||
|
||||
componentWillLoad() {
|
||||
this.custom = this.el.childElementCount > 0;
|
||||
}
|
||||
|
||||
render() {
|
||||
const menuIcon = this.config.get('menuIcon', 'menu');
|
||||
return (
|
||||
<ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
|
||||
<ion-button>
|
||||
{this.custom
|
||||
? <slot/>
|
||||
: <ion-icon slot="icon-only" name={menuIcon}/>}
|
||||
<slot>
|
||||
<ion-icon slot="icon-only" name={menuIcon}/>
|
||||
</slot>
|
||||
</ion-button>
|
||||
</ion-menu-toggle>
|
||||
);
|
||||
|
@ -1,5 +1,4 @@
|
||||
import { Component, Element } from '@stencil/core';
|
||||
|
||||
import { Component } from '@stencil/core';
|
||||
|
||||
@Component({
|
||||
tag: 'ion-reorder',
|
||||
@ -13,28 +12,12 @@ import { Component, Element } from '@stencil/core';
|
||||
})
|
||||
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() {
|
||||
return (this.custom)
|
||||
? <slot/>
|
||||
: <ion-icon class="reorder-icon" name="reorder"/>;
|
||||
return (
|
||||
<slot>
|
||||
<ion-icon class="reorder-icon" name="reorder"/>
|
||||
</slot>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
Reference in New Issue
Block a user