mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-20 12:29:55 +08:00
chore(components): update core components
This commit is contained in:
@ -1,4 +1,4 @@
|
|||||||
import { Component } from '../index';
|
import { Component, h, Ionic } from '../index';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -9,4 +9,10 @@ import { Component } from '../index';
|
|||||||
wp: 'badge.wp.scss'
|
wp: 'badge.wp.scss'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export class Badge {}
|
export class Badge {
|
||||||
|
render() {
|
||||||
|
return h(this, Ionic.theme(this, 'badge'),
|
||||||
|
h('slot')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Component, h, Ionic, Prop } from '../index';
|
import { Component, h, Prop } from '../index';
|
||||||
type CssClassObject = { [className: string]: boolean };
|
type CssClassObject = { [className: string]: boolean };
|
||||||
|
|
||||||
/**
|
/**
|
||||||
@ -71,6 +71,13 @@ type CssClassObject = { [className: string]: boolean };
|
|||||||
})
|
})
|
||||||
export class Button {
|
export class Button {
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @Prop {boolean} If true, activates the large button size.
|
||||||
|
* Type: size
|
||||||
|
*/
|
||||||
|
@Prop() role: string = 'button';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @Prop {boolean} If true, activates the large button size.
|
* @Prop {boolean} If true, activates the large button size.
|
||||||
* Type: size
|
* Type: size
|
||||||
@ -211,8 +218,6 @@ export class Button {
|
|||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
var role = 'button';
|
|
||||||
|
|
||||||
var size =
|
var size =
|
||||||
(this.large ? 'large' : null) ||
|
(this.large ? 'large' : null) ||
|
||||||
(this.small ? 'small' : null) ||
|
(this.small ? 'small' : null) ||
|
||||||
@ -228,12 +233,12 @@ export class Button {
|
|||||||
|
|
||||||
var buttonClasses: CssClassObject = []
|
var buttonClasses: CssClassObject = []
|
||||||
.concat(
|
.concat(
|
||||||
this.getElementClassList(role, this.mode),
|
this.getElementClassList(this.role, this.mode),
|
||||||
this.getClassList(role, shape, this.mode),
|
this.getClassList(this.role, shape, this.mode),
|
||||||
this.getClassList(role, display, this.mode),
|
this.getClassList(this.role, display, this.mode),
|
||||||
this.getClassList(role, size, this.mode),
|
this.getClassList(this.role, size, this.mode),
|
||||||
this.getClassList(role, decorator, this.mode),
|
this.getClassList(this.role, decorator, this.mode),
|
||||||
this.getStyleClassList(role)
|
this.getStyleClassList(this.role)
|
||||||
)
|
)
|
||||||
.reduce((prevValue, cssClass) => {
|
.reduce((prevValue, cssClass) => {
|
||||||
prevValue[cssClass] = true;
|
prevValue[cssClass] = true;
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Component } from '../index';
|
import { Component, h, Ionic } from '../index';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -9,4 +9,10 @@ import { Component } from '../index';
|
|||||||
wp: 'card-content.wp.scss'
|
wp: 'card-content.wp.scss'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export class CardContent {}
|
export class CardContent {
|
||||||
|
render() {
|
||||||
|
return h(this, Ionic.theme(this, 'card-content'),
|
||||||
|
h('slot')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Component } from '../index';
|
import { Component, h, Ionic } from '../index';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -9,4 +9,10 @@ import { Component } from '../index';
|
|||||||
wp: 'card-header.wp.scss'
|
wp: 'card-header.wp.scss'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export class CardHeader {}
|
export class CardHeader {
|
||||||
|
render() {
|
||||||
|
return h(this, Ionic.theme(this, 'card-header'),
|
||||||
|
h('slot')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Component } from '../index';
|
import { Component, h, Ionic } from '../index';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -9,4 +9,10 @@ import { Component } from '../index';
|
|||||||
wp: 'card-title.wp.scss'
|
wp: 'card-title.wp.scss'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export class CardTitle {}
|
export class CardTitle {
|
||||||
|
render() {
|
||||||
|
return h(this, Ionic.theme(this, 'card-title'),
|
||||||
|
h('slot')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { Component } from '../index';
|
import { Component, h, Ionic } from '../index';
|
||||||
|
|
||||||
|
|
||||||
@Component({
|
@Component({
|
||||||
@ -9,4 +9,10 @@ import { Component } from '../index';
|
|||||||
wp: 'card.wp.scss'
|
wp: 'card.wp.scss'
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
export class Card {}
|
export class Card {
|
||||||
|
render() {
|
||||||
|
return h(this, Ionic.theme(this, 'card'),
|
||||||
|
h('slot')
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
0
src/themes/ionic.scss
Normal file
0
src/themes/ionic.scss
Normal file
@ -70,7 +70,7 @@ export interface ScrollDetail extends GestureDetail {
|
|||||||
contentWidth?: number;
|
contentWidth?: number;
|
||||||
contentTop?: number;
|
contentTop?: number;
|
||||||
contentBottom?: number;
|
contentBottom?: number;
|
||||||
domWrite?: RequestAnimationFrame;
|
domWrite?: DomControllerCallback;
|
||||||
contentElement?: HTMLElement;
|
contentElement?: HTMLElement;
|
||||||
fixedElement?: HTMLElement;
|
fixedElement?: HTMLElement;
|
||||||
scrollElement?: HTMLElement;
|
scrollElement?: HTMLElement;
|
||||||
@ -103,8 +103,8 @@ export interface ContentDimensions {
|
|||||||
export interface IonicGlobal {
|
export interface IonicGlobal {
|
||||||
staticDir?: string;
|
staticDir?: string;
|
||||||
components?: LoadComponents;
|
components?: LoadComponents;
|
||||||
loadComponents?: {(bundleId: string): void};
|
loadComponents?: {(bundleId: string, modulesImporterFn: ModulesImporterFn, cmp0?: ComponentModeData, cmp1?: ComponentModeData, cmp2?: ComponentModeData): void};
|
||||||
eventNamePrefix?: string;
|
eventNameFn?: {(eventName: string): string};
|
||||||
config?: Object;
|
config?: Object;
|
||||||
ConfigCtrl?: ConfigApi;
|
ConfigCtrl?: ConfigApi;
|
||||||
DomCtrl?: DomControllerApi;
|
DomCtrl?: DomControllerApi;
|
||||||
@ -123,9 +123,9 @@ export interface NextTick {
|
|||||||
|
|
||||||
|
|
||||||
export interface DomControllerApi {
|
export interface DomControllerApi {
|
||||||
read: RequestAnimationFrame;
|
read: DomControllerCallback;
|
||||||
write: RequestAnimationFrame;
|
write: DomControllerCallback;
|
||||||
raf: RequestAnimationFrame;
|
raf: DomControllerCallback;
|
||||||
}
|
}
|
||||||
|
|
||||||
export interface RafCallback {
|
export interface RafCallback {
|
||||||
@ -133,7 +133,7 @@ export interface RafCallback {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export interface RequestAnimationFrame {
|
export interface DomControllerCallback {
|
||||||
(cb: RafCallback): void;
|
(cb: RafCallback): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -178,11 +178,6 @@ export interface ComponentModeData {
|
|||||||
* component mode styles
|
* component mode styles
|
||||||
*/
|
*/
|
||||||
[6]: string;
|
[6]: string;
|
||||||
|
|
||||||
/**
|
|
||||||
* import component function
|
|
||||||
*/
|
|
||||||
[7]: ComponentModeImporterFn;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -219,7 +214,7 @@ export interface ComponentWatchersData {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
export interface ComponentModeImporterFn {
|
export interface ModulesImporterFn {
|
||||||
(importer: any, h: Hyperscript, Ionic: Ionic): void;
|
(importer: any, h: Hyperscript, Ionic: Ionic): void;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -307,9 +302,9 @@ export interface ComponentMeta {
|
|||||||
watchers?: Watchers;
|
watchers?: Watchers;
|
||||||
shadow?: boolean;
|
shadow?: boolean;
|
||||||
obsAttrs?: string[];
|
obsAttrs?: string[];
|
||||||
hostCss?: string;
|
|
||||||
componentModule?: any;
|
componentModule?: any;
|
||||||
modes: {[modeName: string]: ComponentMode};
|
modes: {[modeName: string]: ComponentMode};
|
||||||
|
priority?: 'high'|'low';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -383,6 +378,9 @@ export interface ProxyElement extends HTMLElement {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
export type Side = 'left' | 'right' | 'start' | 'end';
|
||||||
|
|
||||||
|
|
||||||
export interface RendererApi {
|
export interface RendererApi {
|
||||||
(oldVnode: VNode | Element, vnode: VNode, manualSlotProjection?: boolean): VNode;
|
(oldVnode: VNode | Element, vnode: VNode, manualSlotProjection?: boolean): VNode;
|
||||||
}
|
}
|
||||||
@ -396,10 +394,10 @@ export interface Hyperscript {
|
|||||||
(sel: Node, data: VNodeData): VNode;
|
(sel: Node, data: VNodeData): VNode;
|
||||||
(sel: any, data: VNodeData): VNode;
|
(sel: any, data: VNodeData): VNode;
|
||||||
(sel: any, text: string): VNode;
|
(sel: any, text: string): VNode;
|
||||||
(sel: any, children: Array<any>): VNode;
|
(sel: any, children: Array<VNode | undefined | null>): VNode;
|
||||||
(sel: any, data: VNodeData, text: string): VNode;
|
(sel: any, data: VNodeData, text: string): VNode;
|
||||||
(sel: any, data: VNodeData, children: Array<any|string>): VNode;
|
(sel: any, data: VNodeData, children: Array<VNode | undefined | null>): VNode;
|
||||||
(sel: any, data: VNodeData, children: any): VNode;
|
(sel: any, data: VNodeData, children: VNode): VNode;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
@ -430,7 +428,7 @@ export interface VNodeData {
|
|||||||
export interface PlatformApi {
|
export interface PlatformApi {
|
||||||
registerComponent: (tag: string, data: any[]) => ComponentMeta;
|
registerComponent: (tag: string, data: any[]) => ComponentMeta;
|
||||||
getComponentMeta: (tag: string) => ComponentMeta;
|
getComponentMeta: (tag: string) => ComponentMeta;
|
||||||
loadComponent: (bundleId: string, cb: Function) => void;
|
loadComponent: (bundleId: string, priority: string, cb: Function) => void;
|
||||||
nextTick: NextTick;
|
nextTick: NextTick;
|
||||||
|
|
||||||
isElement: (node: Node) => node is Element;
|
isElement: (node: Node) => node is Element;
|
||||||
|
Reference in New Issue
Block a user