javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(components): add missing button/a props to components that render them (#17883)

Browse Source 
Adds the following properties to the components listed under them:

`rel`, `download`, `target`:
- anchor
- button
- card
- fab-button
- item-option
- item
- tab-button

`disabled`:
- back-button
- menu-button

`type`:
- back-button
- item-option
- menu-button
- segment-button

fixes #16848 closes #16889


Co-authored-by: bitflower <matthias.max@bitflower.net>
This commit is contained in:
Brandy Carney
2019-06-12 14:06:29 -04:00
committed by GitHub
parent 828eaaf3d3
commit eca4121dc6
36 changed files with 751 additions and 231 deletions
Download Patch File Download Diff File Expand all files Collapse all files

36
angular/src/directives/proxies.ts
View File

@@ -26,7 +26,7 @@ export class IonAvatar {
}
export declare interface IonBackButton extends StencilComponents<'IonBackButton'> {}
@Component({ selector: 'ion-back-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'defaultHref', 'icon', 'text'] })
@Component({ selector: 'ion-back-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'defaultHref', 'disabled', 'icon', 'text', 'type'] })
export class IonBackButton {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef) {
@@ -34,7 +34,7 @@ export class IonBackButton {
this.el = r.nativeElement;
}
}
proxyInputs(IonBackButton, ['color', 'mode', 'defaultHref', 'icon', 'text']);
proxyInputs(IonBackButton, ['color', 'mode', 'defaultHref', 'disabled', 'icon', 'text', 'type']);
export declare interface IonBackdrop extends StencilComponents<'IonBackdrop'> {}
@Component({ selector: 'ion-backdrop', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['visible', 'tappable', 'stopPropagation'] })
@@ -61,7 +61,7 @@ export class IonBadge {
proxyInputs(IonBadge, ['color', 'mode']);
export declare interface IonButton extends StencilComponents<'IonButton'> {}
@Component({ selector: 'ion-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fill', 'routerDirection', 'href', 'shape', 'size', 'strong', 'type'] })
@Component({ selector: 'ion-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fill', 'routerDirection', 'download', 'href', 'rel', 'shape', 'size', 'strong', 'target', 'type'] })
export class IonButton {
ionFocus!: EventEmitter<CustomEvent>;
ionBlur!: EventEmitter<CustomEvent>;
@@ -72,7 +72,7 @@ export class IonButton {
proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
}
}
proxyInputs(IonButton, ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fill', 'routerDirection', 'href', 'shape', 'size', 'strong', 'type']);
proxyInputs(IonButton, ['color', 'mode', 'buttonType', 'disabled', 'expand', 'fill', 'routerDirection', 'download', 'href', 'rel', 'shape', 'size', 'strong', 'target', 'type']);
export declare interface IonButtons extends StencilComponents<'IonButtons'> {}
@Component({ selector: 'ion-buttons', changeDetection: 0, template: '<ng-content></ng-content>' })
@@ -85,7 +85,7 @@ export class IonButtons {
}
export declare interface IonCard extends StencilComponents<'IonCard'> {}
@Component({ selector: 'ion-card', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'button', 'type', 'disabled', 'href', 'routerDirection'] })
@Component({ selector: 'ion-card', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'button', 'type', 'disabled', 'download', 'href', 'rel', 'routerDirection', 'target'] })
export class IonCard {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef) {
@@ -93,7 +93,7 @@ export class IonCard {
this.el = r.nativeElement;
}
}
proxyInputs(IonCard, ['color', 'mode', 'button', 'type', 'disabled', 'href', 'routerDirection']);
proxyInputs(IonCard, ['color', 'mode', 'button', 'type', 'disabled', 'download', 'href', 'rel', 'routerDirection', 'target']);
export declare interface IonCardContent extends StencilComponents<'IonCardContent'> {}
@Component({ selector: 'ion-card-content', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode'] })
@@ -222,7 +222,7 @@ proxyMethods(IonFab, ['close']);
proxyInputs(IonFab, ['horizontal', 'vertical', 'edge', 'activated']);
export declare interface IonFabButton extends StencilComponents<'IonFabButton'> {}
@Component({ selector: 'ion-fab-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'activated', 'disabled', 'href', 'routerDirection', 'show', 'translucent', 'type', 'size'] })
@Component({ selector: 'ion-fab-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'color', 'activated', 'disabled', 'download', 'href', 'rel', 'routerDirection', 'target', 'show', 'translucent', 'type', 'size'] })
export class IonFabButton {
ionFocus!: EventEmitter<CustomEvent>;
ionBlur!: EventEmitter<CustomEvent>;
@@ -233,7 +233,7 @@ export class IonFabButton {
proxyOutputs(this, this.el, ['ionFocus', 'ionBlur']);
}
}
proxyInputs(IonFabButton, ['mode', 'color', 'activated', 'disabled', 'href', 'routerDirection', 'show', 'translucent', 'type', 'size']);
proxyInputs(IonFabButton, ['mode', 'color', 'activated', 'disabled', 'download', 'href', 'rel', 'routerDirection', 'target', 'show', 'translucent', 'type', 'size']);
export declare interface IonFabList extends StencilComponents<'IonFabList'> {}
@Component({ selector: 'ion-fab-list', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['activated', 'side'] })
@@ -348,7 +348,7 @@ proxyMethods(IonInput, ['setFocus', 'getInputElement']);
proxyInputs(IonInput, ['color', 'mode', 'accept', 'autocapitalize', 'autocomplete', 'autocorrect', 'autofocus', 'clearInput', 'clearOnEdit', 'debounce', 'disabled', 'inputmode', 'max', 'maxlength', 'min', 'minlength', 'multiple', 'name', 'pattern', 'placeholder', 'readonly', 'required', 'spellcheck', 'step', 'size', 'type', 'value']);
export declare interface IonItem extends StencilComponents<'IonItem'> {}
@Component({ selector: 'ion-item', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'type'] })
@Component({ selector: 'ion-item', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'rel', 'lines', 'routerDirection', 'target', 'type'] })
export class IonItem {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef) {
@@ -356,7 +356,7 @@ export class IonItem {
this.el = r.nativeElement;
}
}
proxyInputs(IonItem, ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'href', 'lines', 'routerDirection', 'type']);
proxyInputs(IonItem, ['color', 'mode', 'button', 'detail', 'detailIcon', 'disabled', 'download', 'href', 'rel', 'lines', 'routerDirection', 'target', 'type']);
export declare interface IonItemDivider extends StencilComponents<'IonItemDivider'> {}
@Component({ selector: 'ion-item-divider', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'sticky'] })
@@ -380,7 +380,7 @@ export class IonItemGroup {
}
export declare interface IonItemOption extends StencilComponents<'IonItemOption'> {}
@Component({ selector: 'ion-item-option', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'disabled', 'expandable', 'href'] })
@Component({ selector: 'ion-item-option', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'disabled', 'download', 'expandable', 'href', 'rel', 'target', 'type'] })
export class IonItemOption {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef) {
@@ -388,7 +388,7 @@ export class IonItemOption {
this.el = r.nativeElement;
}
}
proxyInputs(IonItemOption, ['color', 'mode', 'disabled', 'expandable', 'href']);
proxyInputs(IonItemOption, ['color', 'mode', 'disabled', 'download', 'expandable', 'href', 'rel', 'target', 'type']);
export declare interface IonItemOptions extends StencilComponents<'IonItemOptions'> {}
@Component({ selector: 'ion-item-options', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['side'] })
@@ -469,7 +469,7 @@ proxyMethods(IonMenu, ['isOpen', 'isActive', 'open', 'close', 'toggle', 'setOpen
proxyInputs(IonMenu, ['contentId', 'menuId', 'type', 'disabled', 'side', 'swipeGesture', 'maxEdgeStart']);
export declare interface IonMenuButton extends StencilComponents<'IonMenuButton'> {}
@Component({ selector: 'ion-menu-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'menu', 'autoHide'] })
@Component({ selector: 'ion-menu-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode', 'disabled', 'menu', 'autoHide', 'type'] })
export class IonMenuButton {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef) {
@@ -477,7 +477,7 @@ export class IonMenuButton {
this.el = r.nativeElement;
}
}
proxyInputs(IonMenuButton, ['color', 'mode', 'menu', 'autoHide']);
proxyInputs(IonMenuButton, ['color', 'mode', 'disabled', 'menu', 'autoHide', 'type']);
export declare interface IonMenuToggle extends StencilComponents<'IonMenuToggle'> {}
@Component({ selector: 'ion-menu-toggle', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['menu', 'autoHide'] })
@@ -709,7 +709,7 @@ export class IonSegment {
proxyInputs(IonSegment, ['color', 'mode', 'disabled', 'scrollable', 'value']);
export declare interface IonSegmentButton extends StencilComponents<'IonSegmentButton'> {}
@Component({ selector: 'ion-segment-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'checked', 'disabled', 'layout', 'value'] })
@Component({ selector: 'ion-segment-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'checked', 'disabled', 'layout', 'type', 'value'] })
export class IonSegmentButton {
ionSelect!: EventEmitter<CustomEvent>;
protected el: HTMLElement;
@@ -719,7 +719,7 @@ export class IonSegmentButton {
proxyOutputs(this, this.el, ['ionSelect']);
}
}
proxyInputs(IonSegmentButton, ['mode', 'checked', 'disabled', 'layout', 'value']);
proxyInputs(IonSegmentButton, ['mode', 'checked', 'disabled', 'layout', 'type', 'value']);
export declare interface IonSelect extends StencilComponents<'IonSelect'> {}
@Component({ selector: 'ion-select', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'disabled', 'cancelText', 'okText', 'placeholder', 'name', 'selectedText', 'multiple', 'interface', 'interfaceOptions', 'compareWith', 'value'] })
@@ -835,7 +835,7 @@ export class IonTabBar {
proxyInputs(IonTabBar, ['mode', 'color', 'selectedTab', 'translucent']);
export declare interface IonTabButton extends StencilComponents<'IonTabButton'> {}
@Component({ selector: 'ion-tab-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['selected', 'mode', 'layout', 'href', 'tab', 'disabled'] })
@Component({ selector: 'ion-tab-button', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['mode', 'disabled', 'download', 'href', 'rel', 'layout', 'selected', 'tab', 'target'] })
export class IonTabButton {
protected el: HTMLElement;
constructor(c: ChangeDetectorRef, r: ElementRef) {
@@ -843,7 +843,7 @@ export class IonTabButton {
this.el = r.nativeElement;
}
}
proxyInputs(IonTabButton, ['selected', 'mode', 'layout', 'href', 'tab', 'disabled']);
proxyInputs(IonTabButton, ['mode', 'disabled', 'download', 'href', 'rel', 'layout', 'selected', 'tab', 'target']);
export declare interface IonText extends StencilComponents<'IonText'> {}
@Component({ selector: 'ion-text', changeDetection: 0, template: '<ng-content></ng-content>', inputs: ['color', 'mode'] })

27
core/api.txt
View File

@@ -72,8 +72,11 @@ ion-alert,css-prop,--width
ion-anchor,shadow
ion-anchor,prop,color,string | undefined,undefined,false,false
ion-anchor,prop,download,string | undefined,undefined,false,false
ion-anchor,prop,href,string | undefined,undefined,false,false
ion-anchor,prop,rel,string | undefined,undefined,false,false
ion-anchor,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
ion-anchor,prop,target,string | undefined,undefined,false,false
ion-anchor,css-prop,--background
ion-anchor,css-prop,--color
@@ -85,9 +88,11 @@ ion-avatar,css-prop,--border-radius
ion-back-button,scoped
ion-back-button,prop,color,string | undefined,undefined,false,false
ion-back-button,prop,defaultHref,string | undefined,undefined,false,false
ion-back-button,prop,disabled,boolean,false,false,true
ion-back-button,prop,icon,null | string | undefined,undefined,false,false
ion-back-button,prop,mode,"ios" | "md",undefined,false,false
ion-back-button,prop,text,null | string | undefined,undefined,false,false
ion-back-button,prop,type,"button" | "reset" | "submit",'button',false,false
ion-back-button,css-prop,--background
ion-back-button,css-prop,--background-focused
ion-back-button,css-prop,--background-hover
@@ -139,14 +144,17 @@ ion-button,shadow
ion-button,prop,buttonType,string,'button',false,false
ion-button,prop,color,string | undefined,undefined,false,false
ion-button,prop,disabled,boolean,false,false,true
ion-button,prop,download,string | undefined,undefined,false,false
ion-button,prop,expand,"block" | "full" | undefined,undefined,false,true
ion-button,prop,fill,"clear" | "default" | "outline" | "solid" | undefined,undefined,false,true
ion-button,prop,href,string | undefined,undefined,false,false
ion-button,prop,mode,"ios" | "md",undefined,false,false
ion-button,prop,rel,string | undefined,undefined,false,false
ion-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
ion-button,prop,shape,"round" | undefined,undefined,false,true
ion-button,prop,size,"default" | "large" | "small" | undefined,undefined,false,true
ion-button,prop,strong,boolean,false,false,false
ion-button,prop,target,string | undefined,undefined,false,false
ion-button,prop,type,"button" | "reset" | "submit",'button',false,false
ion-button,event,ionBlur,void,true
ion-button,event,ionFocus,void,true
@@ -195,9 +203,12 @@ ion-card,scoped
ion-card,prop,button,boolean,false,false,false
ion-card,prop,color,string | undefined,undefined,false,false
ion-card,prop,disabled,boolean,false,false,false
ion-card,prop,download,string | undefined,undefined,false,false
ion-card,prop,href,string | undefined,undefined,false,false
ion-card,prop,mode,"ios" | "md",undefined,false,false
ion-card,prop,rel,string | undefined,undefined,false,false
ion-card,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
ion-card,prop,target,string | undefined,undefined,false,false
ion-card,prop,type,"button" | "reset" | "submit",'button',false,false
ion-card,css-prop,--background
ion-card,css-prop,--color
@@ -327,11 +338,14 @@ ion-fab-button,shadow
ion-fab-button,prop,activated,boolean,false,false,false
ion-fab-button,prop,color,string | undefined,undefined,false,false
ion-fab-button,prop,disabled,boolean,false,false,false
ion-fab-button,prop,download,string | undefined,undefined,false,false
ion-fab-button,prop,href,string | undefined,undefined,false,false
ion-fab-button,prop,mode,"ios" | "md",undefined,false,false
ion-fab-button,prop,rel,string | undefined,undefined,false,false
ion-fab-button,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
ion-fab-button,prop,show,boolean,false,false,false
ion-fab-button,prop,size,"small" | undefined,undefined,false,false
ion-fab-button,prop,target,string | undefined,undefined,false,false
ion-fab-button,prop,translucent,boolean,false,false,false
ion-fab-button,prop,type,"button" | "reset" | "submit",'button',false,false
ion-fab-button,event,ionBlur,void,true
@@ -471,9 +485,13 @@ ion-item-group,none
ion-item-option,shadow
ion-item-option,prop,color,string | undefined,undefined,false,false
ion-item-option,prop,disabled,boolean,false,false,false
ion-item-option,prop,download,string | undefined,undefined,false,false
ion-item-option,prop,expandable,boolean,false,false,false
ion-item-option,prop,href,string | undefined,undefined,false,false
ion-item-option,prop,mode,"ios" | "md",undefined,false,false
ion-item-option,prop,rel,string | undefined,undefined,false,false
ion-item-option,prop,target,string | undefined,undefined,false,false
ion-item-option,prop,type,"button" | "reset" | "submit",'button',false,false
ion-item-option,css-prop,--background
ion-item-option,css-prop,--color
@@ -496,10 +514,13 @@ ion-item,prop,color,string | undefined,undefined,false,false
ion-item,prop,detail,boolean | undefined,undefined,false,false
ion-item,prop,detailIcon,string,'ios-arrow-forward',false,false
ion-item,prop,disabled,boolean,false,false,false
ion-item,prop,download,string | undefined,undefined,false,false
ion-item,prop,href,string | undefined,undefined,false,false
ion-item,prop,lines,"full" | "inset" | "none" | undefined,undefined,false,false
ion-item,prop,mode,"ios" | "md",undefined,false,false
ion-item,prop,rel,string | undefined,undefined,false,false
ion-item,prop,routerDirection,"back" | "forward" | "root",'forward',false,false
ion-item,prop,target,string | undefined,undefined,false,false
ion-item,prop,type,"button" | "reset" | "submit",'button',false,false
ion-item,css-prop,--background
ion-item,css-prop,--background-activated
@@ -586,8 +607,10 @@ ion-loading,css-prop,--width
ion-menu-button,shadow
ion-menu-button,prop,autoHide,boolean,true,false,false
ion-menu-button,prop,color,string | undefined,undefined,false,false
ion-menu-button,prop,disabled,boolean,false,false,false
ion-menu-button,prop,menu,string | undefined,undefined,false,false
ion-menu-button,prop,mode,"ios" | "md",undefined,false,false
ion-menu-button,prop,type,"button" | "reset" | "submit",'button',false,false
ion-menu-button,css-prop,--background
ion-menu-button,css-prop,--background-focused
ion-menu-button,css-prop,--background-hover
@@ -944,6 +967,7 @@ ion-segment-button,prop,checked,boolean,false,false,false
ion-segment-button,prop,disabled,boolean,false,false,false
ion-segment-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,'icon-top',false,false
ion-segment-button,prop,mode,"ios" | "md",undefined,false,false
ion-segment-button,prop,type,"button" | "reset" | "submit",'button',false,false
ion-segment-button,prop,value,string,'ion-sb-' + (ids++),false,false
ion-segment-button,event,ionSelect,void,true
ion-segment-button,css-prop,--background
@@ -1081,11 +1105,14 @@ ion-tab-bar,css-prop,--color
ion-tab-button,shadow
ion-tab-button,prop,disabled,boolean,false,false,false
ion-tab-button,prop,download,string | undefined,undefined,false,false
ion-tab-button,prop,href,string | undefined,undefined,false,false
ion-tab-button,prop,layout,"icon-bottom" | "icon-end" | "icon-hide" | "icon-start" | "icon-top" | "label-hide" | undefined,undefined,false,false
ion-tab-button,prop,mode,"ios" | "md",undefined,false,false
ion-tab-button,prop,rel,string | undefined,undefined,false,false
ion-tab-button,prop,selected,boolean,false,false,false
ion-tab-button,prop,tab,string | undefined,undefined,false,false
ion-tab-button,prop,target,string | undefined,undefined,false,false
ion-tab-button,css-prop,--background
ion-tab-button,css-prop,--background-focused
ion-tab-button,css-prop,--color

256
core/src/components.d.ts vendored
View File

@@ -391,13 +391,25 @@ export namespace Components {
*/
'color'?: Color;
/**
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'download': string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
'href': string | undefined;
/**
* Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
'rel': string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection': RouterDirection;
/**
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
'target': string | undefined;
}
interface IonAnchorAttributes extends StencilHTMLAttributes {
/**
@@ -405,13 +417,25 @@ export namespace Components {
*/
'color'?: Color;
/**
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'download'?: string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
'href'?: string | undefined;
/**
* Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
'rel'?: string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection'?: RouterDirection;
/**
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
'target'?: string | undefined;
}
interface IonApp {}
@@ -430,6 +454,10 @@ export namespace Components {
*/
'defaultHref'?: string;
/**
* If `true`, the user cannot interact with the button.
*/
'disabled': boolean;
/**
* The icon name to use for the back button.
*/
'icon'?: string | null;
@@ -441,6 +469,10 @@ export namespace Components {
* The text to display in the back button.
*/
'text'?: string | null;
/**
* The type of the button.
*/
'type': 'submit' | 'reset' | 'button';
}
interface IonBackButtonAttributes extends StencilHTMLAttributes {
/**
@@ -452,6 +484,10 @@ export namespace Components {
*/
'defaultHref'?: string;
/**
* If `true`, the user cannot interact with the button.
*/
'disabled'?: boolean;
/**
* The icon name to use for the back button.
*/
'icon'?: string | null;
@@ -463,6 +499,10 @@ export namespace Components {
* The text to display in the back button.
*/
'text'?: string | null;
/**
* The type of the button.
*/
'type'?: 'submit' | 'reset' | 'button';
}
interface IonBackdrop {
@@ -533,6 +573,10 @@ export namespace Components {
*/
'disabled': boolean;
/**
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'download': string | undefined;
/**
* Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
*/
'expand'?: 'full' | 'block';
@@ -543,12 +587,16 @@ export namespace Components {
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
'href': string | undefined;
/**
* The mode determines which platform styles to use.
*/
'mode': Mode;
/**
* Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
'rel': string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection': RouterDirection;
@@ -565,6 +613,10 @@ export namespace Components {
*/
'strong': boolean;
/**
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
'target': string | undefined;
/**
* The type of the button.
*/
'type': 'submit' | 'reset' | 'button';
@@ -583,6 +635,10 @@ export namespace Components {
*/
'disabled'?: boolean;
/**
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'download'?: string | undefined;
/**
* Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders.
*/
'expand'?: 'full' | 'block';
@@ -593,7 +649,7 @@ export namespace Components {
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
'href'?: string | undefined;
/**
* The mode determines which platform styles to use.
*/
@@ -607,6 +663,10 @@ export namespace Components {
*/
'onIonFocus'?: (event: CustomEvent<void>) => void;
/**
* Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
'rel'?: string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection'?: RouterDirection;
@@ -623,6 +683,10 @@ export namespace Components {
*/
'strong'?: boolean;
/**
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
'target'?: string | undefined;
/**
* The type of the button.
*/
'type'?: 'submit' | 'reset' | 'button';
@@ -729,18 +793,30 @@ export namespace Components {
*/
'disabled': boolean;
/**
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'download': string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
'href': string | undefined;
/**
* The mode determines which platform styles to use.
*/
'mode': Mode;
/**
* Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
'rel': string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection': RouterDirection;
/**
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
'target': string | undefined;
/**
* The type of the button. Only used when an `onclick` or `button` property is present.
*/
'type': 'submit' | 'reset' | 'button';
@@ -759,18 +835,30 @@ export namespace Components {
*/
'disabled'?: boolean;
/**
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'download'?: string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
'href'?: string | undefined;
/**
* The mode determines which platform styles to use.
*/
'mode'?: Mode;
/**
* Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
'rel'?: string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection'?: RouterDirection;
/**
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
'target'?: string | undefined;
/**
* The type of the button. Only used when an `onclick` or `button` property is present.
*/
'type'?: 'submit' | 'reset' | 'button';
@@ -1375,14 +1463,22 @@ export namespace Components {
*/
'disabled': boolean;
/**
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'download': string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
'href': string | undefined;
/**
* The mode determines which platform styles to use.
*/
'mode': Mode;
/**
* Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
'rel': string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection': RouterDirection;
@@ -1395,6 +1491,10 @@ export namespace Components {
*/
'size'?: 'small';
/**
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
'target': string | undefined;
/**
* If `true`, the fab button will be translucent.
*/
'translucent': boolean;
@@ -1417,9 +1517,13 @@ export namespace Components {
*/
'disabled'?: boolean;
/**
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'download'?: string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
'href'?: string | undefined;
/**
* The mode determines which platform styles to use.
*/
@@ -1433,6 +1537,10 @@ export namespace Components {
*/
'onIonFocus'?: (event: CustomEvent<void>) => void;
/**
* Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
'rel'?: string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection'?: RouterDirection;
@@ -1445,6 +1553,10 @@ export namespace Components {
*/
'size'?: 'small';
/**
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
'target'?: string | undefined;
/**
* If `true`, the fab button will be translucent.
*/
'translucent'?: boolean;
@@ -1949,17 +2061,33 @@ export namespace Components {
*/
'disabled': boolean;
/**
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'download': string | undefined;
/**
* If `true`, the option will expand to take up the available width and cover any other options.
*/
'expandable': boolean;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
'href': string | undefined;
/**
* The mode determines which platform styles to use.
*/
'mode': Mode;
/**
* Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
'rel': string | undefined;
/**
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
'target': string | undefined;
/**
* The type of the button.
*/
'type': 'submit' | 'reset' | 'button';
}
interface IonItemOptionAttributes extends StencilHTMLAttributes {
/**
@@ -1971,17 +2099,33 @@ export namespace Components {
*/
'disabled'?: boolean;
/**
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'download'?: string | undefined;
/**
* If `true`, the option will expand to take up the available width and cover any other options.
*/
'expandable'?: boolean;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
'href'?: string | undefined;
/**
* The mode determines which platform styles to use.
*/
'mode'?: Mode;
/**
* Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
'rel'?: string | undefined;
/**
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
'target'?: string | undefined;
/**
* The type of the button.
*/
'type'?: 'submit' | 'reset' | 'button';
}
interface IonItemOptions {
@@ -2012,7 +2156,7 @@ export namespace Components {
*/
'closeOpened': () => Promise<boolean>;
/**
* If `true`, the user cannot interact with the sliding-item.
* If `true`, the user cannot interact with the sliding item.
*/
'disabled': boolean;
/**
@@ -2030,7 +2174,7 @@ export namespace Components {
}
interface IonItemSlidingAttributes extends StencilHTMLAttributes {
/**
* If `true`, the user cannot interact with the sliding-item.
* If `true`, the user cannot interact with the sliding item.
*/
'disabled'?: boolean;
/**
@@ -2061,9 +2205,13 @@ export namespace Components {
*/
'disabled': boolean;
/**
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'download': string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
'href': string | undefined;
/**
* How the bottom border should be displayed on the item.
*/
@@ -2073,10 +2221,18 @@ export namespace Components {
*/
'mode': Mode;
/**
* Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
'rel': string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection': RouterDirection;
/**
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
'target': string | undefined;
/**
* The type of the button. Only used when an `onclick` or `button` property is present.
*/
'type': 'submit' | 'reset' | 'button';
@@ -2103,9 +2259,13 @@ export namespace Components {
*/
'disabled'?: boolean;
/**
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'download'?: string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string;
'href'?: string | undefined;
/**
* How the bottom border should be displayed on the item.
*/
@@ -2115,10 +2275,18 @@ export namespace Components {
*/
'mode'?: Mode;
/**
* Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
'rel'?: string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to another page using `href`.
*/
'routerDirection'?: RouterDirection;
/**
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
'target'?: string | undefined;
/**
* The type of the button. Only used when an `onclick` or `button` property is present.
*/
'type'?: 'submit' | 'reset' | 'button';
@@ -2367,6 +2535,10 @@ export namespace Components {
*/
'color'?: Color;
/**
* If `true`, the user cannot interact with the menu button.
*/
'disabled': boolean;
/**
* Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle
*/
'menu'?: string;
@@ -2374,6 +2546,10 @@ export namespace Components {
* The mode determines which platform styles to use.
*/
'mode': Mode;
/**
* The type of the button.
*/
'type': 'submit' | 'reset' | 'button';
}
interface IonMenuButtonAttributes extends StencilHTMLAttributes {
/**
@@ -2385,6 +2561,10 @@ export namespace Components {
*/
'color'?: Color;
/**
* If `true`, the user cannot interact with the menu button.
*/
'disabled'?: boolean;
/**
* Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle
*/
'menu'?: string;
@@ -2392,6 +2572,10 @@ export namespace Components {
* The mode determines which platform styles to use.
*/
'mode'?: Mode;
/**
* The type of the button.
*/
'type'?: 'submit' | 'reset' | 'button';
}
interface IonMenuController {
@@ -3925,6 +4109,10 @@ export namespace Components {
*/
'mode': Mode;
/**
* The type of the button.
*/
'type': 'submit' | 'reset' | 'button';
/**
* The value of the segment button.
*/
'value': string;
@@ -3951,6 +4139,10 @@ export namespace Components {
*/
'onIonSelect'?: (event: CustomEvent<void>) => void;
/**
* The type of the button.
*/
'type'?: 'submit' | 'reset' | 'button';
/**
* The value of the segment button.
*/
'value'?: string;
@@ -4484,13 +4676,17 @@ export namespace Components {
interface IonTabButton {
/**
* The selected tab component
* If `true`, the user cannot interact with the tab button.
*/
'disabled': boolean;
/**
* The URL which will be used as the `href` within this tab's button anchor.
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'href'?: string;
'download': string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href': string | undefined;
/**
* Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.
*/
@@ -4500,6 +4696,10 @@ export namespace Components {
*/
'mode': Mode;
/**
* Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
'rel': string | undefined;
/**
* The selected tab component
*/
'selected': boolean;
@@ -4507,16 +4707,24 @@ export namespace Components {
* A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
*/
'tab'?: string;
/**
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
'target': string | undefined;
}
interface IonTabButtonAttributes extends StencilHTMLAttributes {
/**
* The selected tab component
* If `true`, the user cannot interact with the tab button.
*/
'disabled'?: boolean;
/**
* The URL which will be used as the `href` within this tab's button anchor.
* This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want).
*/
'href'?: string;
'download'?: string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered.
*/
'href'?: string | undefined;
/**
* Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`.
*/
@@ -4526,6 +4734,10 @@ export namespace Components {
*/
'mode'?: Mode;
/**
* Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
'rel'?: string | undefined;
/**
* The selected tab component
*/
'selected'?: boolean;
@@ -4533,6 +4745,10 @@ export namespace Components {
* A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them.
*/
'tab'?: string;
/**
* Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
'target'?: string | undefined;
}
interface IonTab {

35
core/src/components/anchor/anchor.tsx
View File

@@ -1,6 +1,7 @@
import { Component, ComponentInterface, Listen, Prop } from '@stencil/core';
import { Color, Mode, RouterDirection } from '../../interface';
import { AnchorInterface } from '../../utils/element-interface';
import { createColorClasses, openURL } from '../../utils/theme';
@Component({
@@ -8,7 +9,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
styleUrl: 'anchor.scss',
shadow: true
})
export class Anchor implements ComponentInterface {
export class Anchor implements ComponentInterface, AnchorInterface {
mode!: Mode;
@Prop({ context: 'window' }) win!: Window;
@@ -20,11 +21,25 @@ export class Anchor implements ComponentInterface {
*/
@Prop() color?: Color;
/**
* This attribute instructs browsers to download a URL instead of navigating to
* it, so the user will be prompted to save it as a local file. If the attribute
* has a value, it is used as the pre-filled file name in the Save prompt
* (the user can still change the file name if they want).
*/
@Prop() download: string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href?: string;
@Prop() href: string | undefined;
/**
* Specifies the relationship of the target object to the link object.
* The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
@Prop() rel: string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to
@@ -32,6 +47,13 @@ export class Anchor implements ComponentInterface {
*/
@Prop() routerDirection: RouterDirection = 'forward';
/**
* Specifies where to display the linked URL.
* Only applies when an `href` is provided.
* Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
@Prop() target: string | undefined;
@Listen('click')
onClick(ev: Event) {
openURL(this.win, this.href, ev, this.routerDirection);
@@ -48,8 +70,15 @@ export class Anchor implements ComponentInterface {
}
render() {
const attrs = {
download: this.download,
href: this.href,
rel: this.rel,
target: this.target
};
return (
<a href={this.href}>
<a {...attrs}>
<slot></slot>
</a>
);

14
core/src/components/anchor/readme.md
View File

@@ -2,17 +2,21 @@
The Anchor component is used for navigating to a specified link. Similar to the browser's anchor tag, it can accept a href for the location, and a direction for the transition animation.
> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use an `<a>` and `routerLink` with the Angular router.
<!-- Auto Generated Below -->
## Properties
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
## CSS Custom Properties

4
core/src/components/anchor/test/basic/index.html
View File

@@ -30,11 +30,11 @@
</p>
<p>
<ion-anchor href="#" style="text-decoration: underline">Underline Anchor</ion-anchor>
<ion-anchor href="https://ionicframework.com" rel="external" style="text-decoration: underline">Underline Anchor</ion-anchor>
</p>
<p>
<ion-anchor href="#" class="custom">Custom Anchor</ion-anchor>
<ion-anchor href="#" download="yes" class="custom">Custom Anchor</ion-anchor>
</p>
<p>

5
core/src/components/back-button/back-button.scss
View File

@@ -107,6 +107,11 @@
display: block;
}
:host(.back-button-disabled) {
cursor: default;
opacity: .5;
pointer-events: none;
}
// Native Back Button
// --------------------------------------------------

31
core/src/components/back-button/back-button.tsx
View File

@@ -1,6 +1,7 @@
import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
import { Color, Config, Mode } from '../../interface';
import { ButtonInterface } from '../../utils/element-interface';
import { createColorClasses, openURL } from '../../utils/theme';
@Component({
@@ -11,7 +12,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
},
scoped: true
})
export class BackButton implements ComponentInterface {
export class BackButton implements ComponentInterface, ButtonInterface {
@Element() el!: HTMLElement;
@@ -35,6 +36,11 @@ export class BackButton implements ComponentInterface {
*/
@Prop() defaultHref?: string;
/**
* If `true`, the user cannot interact with the button.
*/
@Prop({ reflectToAttr: true }) disabled = false;
/**
* The icon name to use for the back button.
*/
@@ -45,6 +51,11 @@ export class BackButton implements ComponentInterface {
*/
@Prop() text?: string | null;
/**
* The type of the button.
*/
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
@Listen('click')
async onClick(ev: Event) {
const nav = this.el.closest('ion-nav');
@@ -80,15 +91,19 @@ export class BackButton implements ComponentInterface {
}
hostData() {
const showBackButton = this.defaultHref !== undefined;
const { color, defaultHref, disabled, mode, hasIconOnly } = this;
const showBackButton = defaultHref !== undefined;
return {
'aria-disabled': disabled ? 'true' : null,
class: {
...createColorClasses(this.color),
[`${this.mode}`]: true,
...createColorClasses(color),
[`${mode}`]: true,
'button': true, // ion-buttons target .button
'back-button-has-icon-only': this.hasIconOnly,
'back-button-disabled': disabled,
'back-button-has-icon-only': hasIconOnly,
'ion-activatable': true,
'ion-focusable': true,
'show-back-button': showBackButton
@@ -99,8 +114,12 @@ export class BackButton implements ComponentInterface {
render() {
const { backButtonIcon, backButtonText } = this;
const attrs = {
type: this.type
};
return (
<button type="button" class="button-native">
<button {...attrs} disabled={this.disabled} class="button-native">
<span class="button-inner">
{backButtonIcon && <ion-icon icon={backButtonIcon} lazy={false}></ion-icon>}
{backButtonText && <span class="button-text">{backButtonText}</span>}

16
core/src/components/back-button/readme.md
View File

@@ -239,13 +239,15 @@ export default Example;
## Properties
| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `defaultHref` | `default-href` | The url to navigate back to by default when there is no history. | `string \| undefined` | `undefined` |
| `icon` | `icon` | The icon name to use for the back button. | `null \| string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `text` | `text` | The text to display in the back button. | `null \| string \| undefined` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ------------- | -------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `defaultHref` | `default-href` | The url to navigate back to by default when there is no history. | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the button. | `boolean` | `false` |
| `icon` | `icon` | The icon name to use for the back button. | `null \| string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `text` | `text` | The text to display in the back button. | `null \| string \| undefined` | `undefined` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
## CSS Custom Properties

4
core/src/components/back-button/test/basic/index.html
View File

@@ -20,14 +20,14 @@
<ion-back-button></ion-back-button>
<ion-back-button text="Back"></ion-back-button>
<ion-back-button icon="add"></ion-back-button>
<ion-back-button text="Text Only" icon=""></ion-back-button>
<ion-back-button disabled text="Text Only" icon=""></ion-back-button>
<ion-back-button icon="heart" text="Love" color="danger"></ion-back-button>
</p>
<p>
<ion-back-button class="ion-focused"></ion-back-button>
<ion-back-button class="ion-focused" text="Back"></ion-back-button>
<ion-back-button class="ion-focused" icon="add"></ion-back-button>
<ion-back-button class="ion-focused" text="Text Only" icon=""></ion-back-button>
<ion-back-button disabled class="ion-focused" text="Text Only" icon=""></ion-back-button>
<ion-back-button class="ion-focused" icon="heart" text="Love" color="danger"></ion-back-button>
</p>

33
core/src/components/button/button.tsx
View File

@@ -1,6 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
import { Color, Mode, RouterDirection } from '../../interface';
import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import { hasShadowDom } from '../../utils/helpers';
import { createColorClasses, openURL } from '../../utils/theme';
@@ -18,7 +19,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
},
shadow: true,
})
export class Button implements ComponentInterface {
export class Button implements ComponentInterface, AnchorInterface, ButtonInterface {
private inToolbar = false;
private inItem = false;
@@ -68,11 +69,25 @@ export class Button implements ComponentInterface {
*/
@Prop() routerDirection: RouterDirection = 'forward';
/**
* This attribute instructs browsers to download a URL instead of navigating to
* it, so the user will be prompted to save it as a local file. If the attribute
* has a value, it is used as the pre-filled file name in the Save prompt
* (the user can still change the file name if they want).
*/
@Prop() download: string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href?: string;
@Prop() href: string | undefined;
/**
* Specifies the relationship of the target object to the link object.
* The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
@Prop() rel: string | undefined;
/**
* The button shape.
@@ -89,6 +104,13 @@ export class Button implements ComponentInterface {
*/
@Prop() strong = false;
/**
* Specifies where to display the linked URL.
* Only applies when an `href` is provided.
* Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
@Prop() target: string | undefined;
/**
* The type of the button.
*/
@@ -187,7 +209,12 @@ export class Button implements ComponentInterface {
const TagType = this.href === undefined ? 'button' : 'a' as any;
const attrs = (TagType === 'button')
? { type: this.type }
: { href: this.href };
: {
download: this.download,
href: this.href,
rel: this.rel,
target: this.target
};
return (
<TagType

31
core/src/components/button/readme.md
View File

@@ -214,20 +214,23 @@ export default Example;
## Properties
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- |
| `buttonType` | `button-type` | The type of button. | `string` | `'button'` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the button. | `boolean` | `false` |
| `expand` | `expand` | Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. | `"block" \| "full" \| undefined` | `undefined` |
| `fill` | `fill` | Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. | `"clear" \| "default" \| "outline" \| "solid" \| undefined` | `undefined` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| `shape` | `shape` | The button shape. | `"round" \| undefined` | `undefined` |
| `size` | `size` | The button size. | `"default" \| "large" \| "small" \| undefined` | `undefined` |
| `strong` | `strong` | If `true`, activates a button with a heavier font weight. | `boolean` | `false` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------- | ----------- |
| `buttonType` | `button-type` | The type of button. | `string` | `'button'` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the button. | `boolean` | `false` |
| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` |
| `expand` | `expand` | Set to `"block"` for a full-width button or to `"full"` for a full-width button without left and right borders. | `"block" \| "full" \| undefined` | `undefined` |
| `fill` | `fill` | Set to `"clear"` for a transparent button, to `"outline"` for a transparent button with a border, or to `"solid"`. The default style is `"solid"` except inside of a toolbar, where the default is `"clear"`. | `"clear" \| "default" \| "outline" \| "solid" \| undefined` | `undefined` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| `shape` | `shape` | The button shape. | `"round" \| undefined` | `undefined` |
| `size` | `size` | The button size. | `"default" \| "large" \| "small" \| undefined` | `undefined` |
| `strong` | `strong` | If `true`, activates a button with a heavier font weight. | `boolean` | `false` |
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
## Events

37
core/src/components/card/card.tsx
View File

@@ -1,6 +1,7 @@
import { Component, ComponentInterface, Prop } from '@stencil/core';
import { Color, Mode, RouterDirection } from '../../interface';
import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import { createColorClasses, openURL } from '../../utils/theme';
@Component({
@@ -11,7 +12,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
},
scoped: true
})
export class Card implements ComponentInterface {
export class Card implements ComponentInterface, AnchorInterface, ButtonInterface {
@Prop({ context: 'window' }) win!: Window;
@@ -42,11 +43,25 @@ export class Card implements ComponentInterface {
*/
@Prop() disabled = false;
/**
* This attribute instructs browsers to download a URL instead of navigating to
* it, so the user will be prompted to save it as a local file. If the attribute
* has a value, it is used as the pre-filled file name in the Save prompt
* (the user can still change the file name if they want).
*/
@Prop() download: string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href?: string;
@Prop() href: string | undefined;
/**
* Specifies the relationship of the target object to the link object.
* The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
@Prop() rel: string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to
@@ -54,6 +69,13 @@ export class Card implements ComponentInterface {
*/
@Prop() routerDirection: RouterDirection = 'forward';
/**
* Specifies where to display the linked URL.
* Only applies when an `href` is provided.
* Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
@Prop() target: string | undefined;
private isClickable(): boolean {
return (this.href !== undefined || this.button);
}
@@ -79,9 +101,16 @@ export class Card implements ComponentInterface {
];
}
const { href, mode, win, routerDirection, type } = this;
const { href, mode, win, routerDirection } = this;
const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;
const attrs = TagType === 'button' ? { type } : { href };
const attrs = (TagType === 'button')
? { type: this.type }
: {
download: this.download,
href: this.href,
rel: this.rel,
target: this.target
};
return (
<TagType

21
core/src/components/card/readme.md
View File

@@ -182,15 +182,18 @@ export default Example;
## Properties
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
| `button` | `button` | If `true`, a button tag will be rendered and the card will be tappable. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the card. | `boolean` | `false` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
| `button` | `button` | If `true`, a button tag will be rendered and the card will be tappable. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the card. | `boolean` | `false` |
| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` |
## CSS Custom Properties

33
core/src/components/fab-button/fab-button.tsx
View File

@@ -1,6 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Prop } from '@stencil/core';
import { Color, Mode, RouterDirection } from '../../interface';
import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
@Component({
@@ -11,7 +12,7 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
},
shadow: true
})
export class FabButton implements ComponentInterface {
export class FabButton implements ComponentInterface, AnchorInterface, ButtonInterface {
@Element() el!: HTMLElement;
@Prop({ context: 'window' }) win!: Window;
@@ -38,11 +39,25 @@ export class FabButton implements ComponentInterface {
*/
@Prop() disabled = false;
/**
* This attribute instructs browsers to download a URL instead of navigating to
* it, so the user will be prompted to save it as a local file. If the attribute
* has a value, it is used as the pre-filled file name in the Save prompt
* (the user can still change the file name if they want).
*/
@Prop() download: string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href?: string;
@Prop() href: string | undefined;
/**
* Specifies the relationship of the target object to the link object.
* The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
@Prop() rel: string | undefined;
/**
* When using a router, it specifies the transition direction when navigating to
@@ -50,6 +65,13 @@ export class FabButton implements ComponentInterface {
*/
@Prop() routerDirection: RouterDirection = 'forward';
/**
* Specifies where to display the linked URL.
* Only applies when an `href` is provided.
* Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
@Prop() target: string | undefined;
/**
* If `true`, the fab button will show when in a fab-list.
*/
@@ -113,7 +135,12 @@ export class FabButton implements ComponentInterface {
const TagType = this.href === undefined ? 'button' : 'a' as any;
const attrs = (TagType === 'button')
? { type: this.type }
: { href: this.href };
: {
download: this.download,
href: this.href,
rel: this.rel,
target: this.target
};
return (
<TagType

27
core/src/components/fab-button/readme.md
View File

@@ -101,18 +101,21 @@ export default Example
## Properties
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
| `activated` | `activated` | If `true`, the fab button will be show a close icon. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the fab button. | `boolean` | `false` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the fab button will be translucent. | `boolean` | `false` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
| `activated` | `activated` | If `true`, the fab button will be show a close icon. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the fab button. | `boolean` | `false` |
| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| `show` | `show` | If `true`, the fab button will show when in a fab-list. | `boolean` | `false` |
| `size` | `size` | The size of the button. Set this to `small` in order to have a mini fab. | `"small" \| undefined` | `undefined` |
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
| `translucent` | `translucent` | If `true`, the fab button will be translucent. | `boolean` | `false` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
## Events

57
core/src/components/fab/test/standalone/index.html
View File

@@ -12,56 +12,17 @@
</head>
<body>
<ion-fab-button href="https://ionicframework.com">
<ion-icon name="logo-ionitron"></ion-icon>
</ion-fab-button>
<ion-fab-button href="https://ionicframework.com" target="_blank">
<ion-icon name="logo-ionitron"></ion-icon>
</ion-fab-button>
<ion-fab vertical="bottom" horizontal="end" id="fab2" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab2')" color="dark" class="e2eFabBottomRight"><ion-icon name="arrow-dropleft"></ion-icon></ion-fab-button>
<ion-fab-list side="start">
<ion-fab-button onclick="openSocial('facebook', 'fab2')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab2')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab2')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('instagram', 'fab2')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-button href="https://ionicframework.com" target="_blank">
<ion-icon name="logo-ionitron"></ion-icon>
</ion-button>
<ion-fab vertical="top" horizontal="start" id="fab3" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab3')" color="secondary" class="activated e2eFabTopLeft"><ion-icon name="arrow-dropright"></ion-icon></ion-fab-button>
<ion-fab-list side="end">
<ion-fab-button onclick="openSocial('facebook', 'fab3')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab3')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab3')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('instagram', 'fab3')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab vertical="bottom" horizontal="start" id="fab4" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab4')" color="light" class="e2eFabBottomLeft"><ion-icon name="arrow-dropup"></ion-icon></ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button onclick="openSocial('facebook', 'fab4')"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('twitter', 'fab4')"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('vimeo', 'fab4')"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
<ion-fab-button onclick="openSocial('instagram', 'fab4')"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab vertical="center" horizontal="center" id="fab5" slot="fixed">
<ion-fab-button onclick="clickMainFAB('fab5')" class="e2eFabCenter"><ion-icon name="md-share"></ion-icon></ion-fab-button>
<ion-fab-list side="top">
<ion-fab-button onclick="openSocial('vimeo', 'fab5')" color="primary"><ion-icon name="logo-vimeo"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="bottom">
<ion-fab-button onclick="openSocial('facebook', 'fab5')" color="secondary"><ion-icon name="logo-facebook"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="start">
<ion-fab-button onclick="openSocial('instagram', 'fab5')" color="light"><ion-icon name="logo-instagram"></ion-icon></ion-fab-button>
</ion-fab-list>
<ion-fab-list side="end">
<ion-fab-button onclick="openSocial('twitter', 'fab5')" color="dark"><ion-icon name="logo-twitter"></ion-icon></ion-fab-button>
</ion-fab-list>
</ion-fab>
<ion-fab horizontal="end" vertical="center" slot="fixed">
<ion-fab-button color="danger" onclick="add()"><ion-icon name="add"></ion-icon></ion-fab-button>
</ion-fab>
<script>
function insertAfter(el, referenceNode) {

41
core/src/components/item-option/item-option.tsx
View File

@@ -1,6 +1,7 @@
import { Component, ComponentInterface, Element, Listen, Prop } from '@stencil/core';
import { Color, Mode } from '../../interface';
import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import { createColorClasses } from '../../utils/theme';
/**
@@ -19,7 +20,7 @@ import { createColorClasses } from '../../utils/theme';
},
shadow: true
})
export class ItemOption implements ComponentInterface {
export class ItemOption implements ComponentInterface, AnchorInterface, ButtonInterface {
@Element() el!: HTMLElement;
@@ -40,6 +41,14 @@ export class ItemOption implements ComponentInterface {
*/
@Prop() disabled = false;
/**
* This attribute instructs browsers to download a URL instead of navigating to
* it, so the user will be prompted to save it as a local file. If the attribute
* has a value, it is used as the pre-filled file name in the Save prompt
* (the user can still change the file name if they want).
*/
@Prop() download: string | undefined;
/**
* If `true`, the option will expand to take up the available width and cover any other options.
*/
@@ -49,7 +58,25 @@ export class ItemOption implements ComponentInterface {
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href?: string;
@Prop() href: string | undefined;
/**
* Specifies the relationship of the target object to the link object.
* The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
@Prop() rel: string | undefined;
/**
* Specifies where to display the linked URL.
* Only applies when an `href` is provided.
* Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
@Prop() target: string | undefined;
/**
* The type of the button.
*/
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
@Listen('click')
onClick(ev: Event) {
@@ -75,13 +102,19 @@ export class ItemOption implements ComponentInterface {
render() {
const TagType = this.href === undefined ? 'button' : 'a' as any;
const attrs = (TagType === 'button')
? { type: this.type }
: {
download: this.download,
href: this.href,
target: this.target
};
return (
<TagType
type="button"
{...attrs}
class="button-native"
disabled={this.disabled}
href={this.href}
>
<span class="button-inner">
<slot name="top"></slot>

18
core/src/components/item-option/readme.md
View File

@@ -9,13 +9,17 @@ action for the item.
## Properties
| Property | Attribute | Description | Type | Default |
| ------------ | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the item option. | `boolean` | `false` |
| `expandable` | `expandable` | If `true`, the option will expand to take up the available width and cover any other options. | `boolean` | `false` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ------------ | ------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the item option. | `boolean` | `false` |
| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` |
| `expandable` | `expandable` | If `true`, the option will expand to take up the available width and cover any other options. | `boolean` | `false` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` |
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
## Slots

2
core/src/components/item-sliding/item-sliding.tsx
View File

@@ -51,7 +51,7 @@ export class ItemSliding implements ComponentInterface {
@Prop({ context: 'queue' }) queue!: QueueApi;
/**
* If `true`, the user cannot interact with the sliding-item.
* If `true`, the user cannot interact with the sliding item.
*/
@Prop() disabled = false;
@Watch('disabled')

2
core/src/components/item-sliding/readme.md
View File

@@ -636,7 +636,7 @@ export default Example;
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ---------------------------------------------------------- | --------- | ------- |
| `disabled` | `disabled` | If `true`, the user cannot interact with the sliding-item. | `boolean` | `false` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the sliding item. | `boolean` | `false` |
## Events

42
core/src/components/item/item.tsx
View File

@@ -1,6 +1,7 @@
import { Component, ComponentInterface, Element, Listen, Prop, State } from '@stencil/core';
import { Color, CssClassMap, Mode, RouterDirection, StyleEventDetail } from '../../interface';
import { AnchorInterface, ButtonInterface } from '../../utils/element-interface';
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
/**
@@ -16,7 +17,8 @@ import { createColorClasses, hostContext, openURL } from '../../utils/theme';
},
shadow: true
})
export class Item implements ComponentInterface {
export class Item implements ComponentInterface, AnchorInterface, ButtonInterface {
private itemStyles = new Map<string, CssClassMap>();
@Element() el!: HTMLStencilElement;
@@ -58,11 +60,25 @@ export class Item implements ComponentInterface {
*/
@Prop() disabled = false;
/**
* This attribute instructs browsers to download a URL instead of navigating to
* it, so the user will be prompted to save it as a local file. If the attribute
* has a value, it is used as the pre-filled file name in the Save prompt
* (the user can still change the file name if they want).
*/
@Prop() download: string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href?: string;
@Prop() href: string | undefined;
/**
* Specifies the relationship of the target object to the link object.
* The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
@Prop() rel: string | undefined;
/**
* How the bottom border should be displayed on the item.
@@ -75,6 +91,13 @@ export class Item implements ComponentInterface {
*/
@Prop() routerDirection: RouterDirection = 'forward';
/**
* Specifies where to display the linked URL.
* Only applies when an `href` is provided.
* Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
@Prop() target: string | undefined;
/**
* The type of the button. Only used when an `onclick` or `button` property is present.
*/
@@ -141,11 +164,18 @@ export class Item implements ComponentInterface {
}
render() {
const { href, detail, mode, win, detailIcon, routerDirection, type } = this;
const { detail, mode, win, detailIcon, routerDirection } = this;
const clickable = this.isClickable();
const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div' as any;
const attrs = TagType === 'button' ? { type } : { href };
const TagType = clickable ? (this.href === undefined ? 'button' : 'a') : 'div' as any;
const attrs = (TagType === 'button')
? { type: this.type }
: {
download: this.download,
href: this.href,
rel: this.rel,
target: this.target
};
const showDetail = detail !== undefined ? detail : mode === 'ios' && clickable;
return [
@@ -153,7 +183,7 @@ export class Item implements ComponentInterface {
{...attrs}
class="item-native"
disabled={this.disabled}
onClick={(ev: Event) => openURL(win, href, ev, routerDirection)}
onClick={(ev: Event) => openURL(win, this.href, ev, routerDirection)}
>
<slot name="start"></slot>
<div class="item-inner">

27
core/src/components/item/readme.md
View File

@@ -1364,18 +1364,21 @@ Item Inputs
## Properties
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------- |
| `button` | `button` | If `true`, a button tag will be rendered and the item will be tappable. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present. | `boolean \| undefined` | `undefined` |
| `detailIcon` | `detail-icon` | The icon to use when `detail` is set to `true`. | `string` | `'ios-arrow-forward'` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the item. | `boolean` | `false` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `lines` | `lines` | How the bottom border should be displayed on the item. | `"full" \| "inset" \| "none" \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` |
| Property | Attribute | Description | Type | Default |
| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------ | --------------------- |
| `button` | `button` | If `true`, a button tag will be rendered and the item will be tappable. | `boolean` | `false` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `detail` | `detail` | If `true`, a detail arrow will appear on the item. Defaults to `false` unless the `mode` is `ios` and an `href` or `button` property is present. | `boolean \| undefined` | `undefined` |
| `detailIcon` | `detail-icon` | The icon to use when `detail` is set to `true`. | `string` | `'ios-arrow-forward'` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the item. | `boolean` | `false` |
| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `lines` | `lines` | How the bottom border should be displayed on the item. | `"full" \| "inset" \| "none" \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` |
| `routerDirection` | `router-direction` | When using a router, it specifies the transition direction when navigating to another page using `href`. | `"back" \| "forward" \| "root"` | `'forward'` |
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
| `type` | `type` | The type of the button. Only used when an `onclick` or `button` property is present. | `"button" \| "reset" \| "submit"` | `'button'` |
## Slots

9
core/src/components/menu-button/menu-button.scss
View File

@@ -77,6 +77,15 @@ ion-icon {
pointer-events: none;
}
// Menu Button: Disabled
// --------------------------------------------------
:host(.menu-button-disabled) {
cursor: default;
opacity: .5;
pointer-events: none;
}
// Menu Button: Hover
// --------------------------------------------------

32
core/src/components/menu-button/menu-button.tsx
View File

@@ -1,6 +1,7 @@
import { Component, ComponentInterface, Prop } from '@stencil/core';
import { Color, Config, Mode } from '../../interface';
import { ButtonInterface } from '../../utils/element-interface';
import { createColorClasses } from '../../utils/theme';
@Component({
@@ -11,7 +12,7 @@ import { createColorClasses } from '../../utils/theme';
},
shadow: true
})
export class MenuButton implements ComponentInterface {
export class MenuButton implements ComponentInterface, ButtonInterface {
@Prop({ context: 'config' }) config!: Config;
@@ -27,6 +28,11 @@ export class MenuButton implements ComponentInterface {
*/
@Prop() mode!: Mode;
/**
* If `true`, the user cannot interact with the menu button.
*/
@Prop() disabled = false;
/**
* Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle
*/
@@ -37,14 +43,23 @@ export class MenuButton implements ComponentInterface {
*/
@Prop() autoHide = true;
/**
* The type of the button.
*/
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
hostData() {
const { color, disabled } = this;
return {
'aria-disabled': disabled ? 'true' : null,
class: {
...createColorClasses(this.color),
...createColorClasses(color),
[`${this.mode}`]: true,
'button': true, // ion-buttons target .button
'menu-button-disabled': disabled,
'ion-activatable': true,
'ion-focusable': true
}
@@ -53,11 +68,20 @@ export class MenuButton implements ComponentInterface {
render() {
const menuIcon = this.config.get('menuIcon', 'menu');
const attrs = {
type: this.type
};
return (
<ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
<button type="button" class="button-native">
<button
{...attrs}
disabled={this.disabled}
class="button-native"
>
<slot>
<ion-icon icon={menuIcon} mode={this.mode} lazy={false} />
<ion-icon icon={menuIcon} mode={this.mode} lazy={false}></ion-icon>
</slot>
{this.mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
</button>

14
core/src/components/menu-button/readme.md
View File

@@ -8,12 +8,14 @@ Menu Button is component that automatically creates the icon and functionality t
## Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | ----------- |
| `autoHide` | `auto-hide` | Automatically hides the menu button when the corresponding menu is not active | `boolean` | `true` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ---------- | ----------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------- | ----------- |
| `autoHide` | `auto-hide` | Automatically hides the menu button when the corresponding menu is not active | `boolean` | `true` |
| `color` | `color` | The color to use from your application's color palette. Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`. For more information on colors, see [theming](/docs/theming/basics). | `string \| undefined` | `undefined` |
| `disabled` | `disabled` | If `true`, the user cannot interact with the menu button. | `boolean` | `false` |
| `menu` | `menu` | Optional property that maps to a Menu's `menuId` prop. Can also be `start` or `end` for the menu side. This is used to find the correct menu to toggle | `string \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
## CSS Custom Properties

2
core/src/components/menu-button/test/basic/index.html
View File

@@ -17,7 +17,9 @@
<ion-content>
<h1>Default</h1>
<ion-menu-button auto-hide="false"></ion-menu-button>
<ion-menu-button disabled auto-hide="false"></ion-menu-button>
<ion-menu-button auto-hide="false" class="ion-focused"></ion-menu-button>
<ion-menu-button disabled auto-hide="false" class="ion-focused"></ion-menu-button>
<h1>Custom</h1>
<ion-menu-button auto-hide="false" class="custom"></ion-menu-button>

2
core/src/components/route-redirect/readme.md
View File

@@ -2,7 +2,7 @@
A route redirect can only be used with an `ion-router` as a direct child of it.
> Note: this element should only be used with a vanilla JavaScript project. For Angular projects, use `ion-router-outlet` and the Angular router.
> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](../router-outlet) and the Angular router.
The route redirect has two configurable properties:
- `from`

4
core/src/components/route/readme.md
View File

@@ -1,8 +1,8 @@
# ion-route
Router is a component that can take a component, and render it when the Browser URl matches the url prop
The route component takes a component and renders it when the Browser URl matches the url property.
> Note: this is only meant for vanilla JavaScript project. For Angular projects, use `ion-router-outlet` and the Angular router.
> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](../router-outlet) and the Angular router.
<!-- Auto Generated Below -->

8
core/src/components/router-outlet/readme.md
View File

@@ -1,12 +1,10 @@
# ion-router-outlet
Router Outlet is a component used in routing within an Angular app.
Router Outlet behaves in a similar way as Angular's built-in Router Outlet component, but contains the logic for providing a stacked navigation, and animating views in and out.
Router outlet is a component used in routing within an Angular app. It behaves in a similar way to Angular's built-in router outlet component, but contains the logic for providing a stacked navigation, and animating views in and out.
> Note: this component should only be used with Angular projects. For vanilla or Stencil JavaScript projects, use [`ion-router`](../router) and [`ion-route`](../route).
> Note: this is only meant for Angular projects. For vanilla JavaScript, use `ion-router` and `ion-route` instead.
While Router Outlet has methods for navigating around, it's recommended to use the navigation methods in Angular's router.
Although router outlet has methods for navigating around, it's recommended to use the navigation methods in Angular's router.
### Life Cycle Hooks

7
core/src/components/router/readme.md
View File

@@ -1,6 +1,8 @@
# ion-router
Router is a component for handling routing inside vanilla JavaScript projects. For Angular projects, use `ion-router-outlet` and the Angular router.
The router is a component for handling routing inside vanilla and Stencil JavaScript projects.
> Note: this component should only be used with vanilla and Stencil JavaScript projects. For Angular projects, use [`ion-router-outlet`](../router-outlet) and the Angular router.
Apps should have a single `ion-router` component in the codebase.
This component controls all interactions with the browser history and it aggregates updates through an event system.
@@ -11,9 +13,6 @@ That means the `ion-router` never touches the DOM, it does NOT show the componen
In order to configure this relationship between components (to load/select) and URLs, `ion-router` uses a declarative syntax using JSX/HTML to define a tree of routes.
If you're using Angular, please see [ion-router-outlet](../router-outlet) instead.
<!-- Auto Generated Below -->

1
core/src/components/segment-button/readme.md
View File

@@ -629,6 +629,7 @@ export default Example;
| `disabled` | `disabled` | If `true`, the user cannot interact with the segment button. | `boolean` | `false` |
| `layout` | `layout` | Set the layout of the text and icon in the segment. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `'icon-top'` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `type` | `type` | The type of the button. | `"button" \| "reset" \| "submit"` | `'button'` |
| `value` | `value` | The value of the segment button. | `string` | `'ion-sb-' + (ids++)` |

10
core/src/components/segment-button/segment-button.tsx
View File

@@ -1,6 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, Watch } from '@stencil/core';
import { Mode, SegmentButtonLayout } from '../../interface';
import { ButtonInterface } from '../../utils/element-interface';
let ids = 0;
@@ -12,7 +13,7 @@ let ids = 0;
},
shadow: true
})
export class SegmentButton implements ComponentInterface {
export class SegmentButton implements ComponentInterface, ButtonInterface {
@Element() el!: HTMLElement;
@@ -36,6 +37,11 @@ export class SegmentButton implements ComponentInterface {
*/
@Prop() layout?: SegmentButtonLayout = 'icon-top';
/**
* The type of the button.
*/
@Prop() type: 'submit' | 'reset' | 'button' = 'button';
/**
* The value of the segment button.
*/
@@ -88,7 +94,7 @@ export class SegmentButton implements ComponentInterface {
render() {
return [
<button
type="button"
type={this.type}
aria-pressed={this.checked ? 'true' : null}
class="button-native"
disabled={this.disabled}

19
core/src/components/tab-button/readme.md
View File

@@ -164,14 +164,17 @@ export default Example;
## Properties
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
| `disabled` | `disabled` | The selected tab component | `boolean` | `false` |
| `href` | `href` | The URL which will be used as the `href` within this tab's button anchor. | `string \| undefined` | `undefined` |
| `layout` | `layout` | Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `selected` | `selected` | The selected tab component | `boolean` | `false` |
| `tab` | `tab` | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. | `string \| undefined` | `undefined` |
| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------- | ----------- |
| `disabled` | `disabled` | If `true`, the user cannot interact with the tab button. | `boolean` | `false` |
| `download` | `download` | This attribute instructs browsers to download a URL instead of navigating to it, so the user will be prompted to save it as a local file. If the attribute has a value, it is used as the pre-filled file name in the Save prompt (the user can still change the file name if they want). | `string \| undefined` | `undefined` |
| `href` | `href` | Contains a URL or a URL fragment that the hyperlink points to. If this property is set, an anchor tag will be rendered. | `string \| undefined` | `undefined` |
| `layout` | `layout` | Set the layout of the text and icon in the tab bar. It defaults to `'icon-top'`. | `"icon-bottom" \| "icon-end" \| "icon-hide" \| "icon-start" \| "icon-top" \| "label-hide" \| undefined` | `undefined` |
| `mode` | `mode` | The mode determines which platform styles to use. | `"ios" \| "md"` | `undefined` |
| `rel` | `rel` | Specifies the relationship of the target object to the link object. The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types). | `string \| undefined` | `undefined` |
| `selected` | `selected` | The selected tab component | `boolean` | `false` |
| `tab` | `tab` | A tab id must be provided for each `ion-tab`. It's used internally to reference the selected tab or by the router to switch between them. | `string \| undefined` | `undefined` |
| `target` | `target` | Specifies where to display the linked URL. Only applies when an `href` is provided. Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`. | `string \| undefined` | `undefined` |
## CSS Custom Properties

55
core/src/components/tab-button/tab-button.tsx
View File

@@ -1,6 +1,7 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Listen, Prop, QueueApi } from '@stencil/core';
import { Config, Mode, TabBarChangedEventDetail, TabButtonClickEventDetail, TabButtonLayout } from '../../interface';
import { AnchorInterface } from '../../utils/element-interface';
@Component({
tag: 'ion-tab-button',
@@ -10,7 +11,7 @@ import { Config, Mode, TabBarChangedEventDetail, TabButtonClickEventDetail, TabB
},
shadow: true
})
export class TabButton implements ComponentInterface {
export class TabButton implements ComponentInterface, AnchorInterface {
@Element() el!: HTMLElement;
@@ -18,16 +19,36 @@ export class TabButton implements ComponentInterface {
@Prop({ context: 'document' }) doc!: Document;
@Prop({ context: 'config' }) config!: Config;
/**
* The selected tab component
*/
@Prop({ mutable: true }) selected = false;
/**
* The mode determines which platform styles to use.
*/
@Prop() mode!: Mode;
/**
* If `true`, the user cannot interact with the tab button.
*/
@Prop() disabled = false;
/**
* This attribute instructs browsers to download a URL instead of navigating to
* it, so the user will be prompted to save it as a local file. If the attribute
* has a value, it is used as the pre-filled file name in the Save prompt
* (the user can still change the file name if they want).
*/
@Prop() download: string | undefined;
/**
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href: string | undefined;
/**
* Specifies the relationship of the target object to the link object.
* The value is a space-separated list of [link types](https://developer.mozilla.org/en-US/docs/Web/HTML/Link_types).
*/
@Prop() rel: string | undefined;
/**
* Set the layout of the text and icon in the tab bar.
* It defaults to `'icon-top'`.
@@ -35,9 +56,9 @@ export class TabButton implements ComponentInterface {
@Prop({ mutable: true }) layout?: TabButtonLayout;
/**
* The URL which will be used as the `href` within this tab's button anchor.
* The selected tab component
*/
@Prop() href?: string;
@Prop({ mutable: true }) selected = false;
/**
* A tab id must be provided for each `ion-tab`. It's used internally to reference
@@ -46,9 +67,11 @@ export class TabButton implements ComponentInterface {
@Prop() tab?: string;
/**
* The selected tab component
* Specifies where to display the linked URL.
* Only applies when an `href` is provided.
* Special keywords: `"_blank"`, `"_self"`, `"_parent"`, `"_top"`.
*/
@Prop() disabled = false;
@Prop() target: string | undefined;
/**
* Emitted when the tab bar is clicked
@@ -136,9 +159,17 @@ export class TabButton implements ComponentInterface {
}
render() {
const { mode, href } = this;
const { mode } = this;
const attrs = {
download: this.download,
href: this.href,
rel: this.rel,
target: this.target
};
return (
<a href={href} tabIndex={-1}>
<a {...attrs} tabIndex={-1}>
<slot></slot>
{mode === 'md' && <ion-ripple-effect type="unbounded"></ion-ripple-effect>}
</a>

20
core/src/utils/element-interface.ts Normal file
View File

@@ -0,0 +1,20 @@
// import { RouterDirection } from '../interface';
// TODO router direction
// The interfaces in this file are used to make sure our components
// have the correct properties defined that are needed to pass to
// the native HTML elements they render
export interface AnchorInterface {
href: string | undefined;
target: string | undefined;
rel: string | undefined;
download: string | undefined;
// routerDirection: RouterDirection;
}
export interface ButtonInterface {
type: 'submit' | 'reset' | 'button';
disabled: boolean;
// routerDirection: RouterDirection;
}