ionic-angular
Version:
A powerful framework for building mobile and progressive web apps with JavaScript and Angular
209 lines (208 loc) • 5.87 kB
TypeScript
import { ElementRef, Renderer } from '@angular/core';
import { Config } from '../../config/config';
import { Ion } from '../ion';
/**
* @name Button
* @module ionic
* @description
* Buttons are simple components in Ionic. They can consist of text and icons
* and be enhanced by a wide range of attributes.
*
* @usage
*
* ```html
*
* <!-- Colors -->
* <button ion-button>Default</button>
*
* <button ion-button color="secondary">Secondary</button>
*
* <button ion-button color="danger">Danger</button>
*
* <button ion-button color="light">Light</button>
*
* <button ion-button color="dark">Dark</button>
*
* <!-- Shapes -->
* <button ion-button full>Full Button</button>
*
* <button ion-button block>Block Button</button>
*
* <button ion-button round>Round Button</button>
*
* <!-- Outline -->
* <button ion-button full outline>Outline + Full</button>
*
* <button ion-button block outline>Outline + Block</button>
*
* <button ion-button round outline>Outline + Round</button>
*
* <!-- Icons -->
* <button ion-button icon-start>
* <ion-icon name="star"></ion-icon>
* Left Icon
* </button>
*
* <button ion-button icon-end>
* Right Icon
* <ion-icon name="star"></ion-icon>
* </button>
*
* <button ion-button icon-only>
* <ion-icon name="star"></ion-icon>
* </button>
*
* <!-- Sizes -->
* <button ion-button large>Large</button>
*
* <button ion-button>Default</button>
*
* <button ion-button small>Small</button>
* ```
*
* @advanced
*
* ```html
*
* <!-- Bind the color and outline inputs to an expression -->
* <button ion-button [color]="isDanger ? 'danger' : 'primary'" [outline]="isOutline">
* Danger (Solid)
* </button>
*
* <!-- Bind the color and round inputs to an expression -->
* <button ion-button [color]="myColor" [round]="isRound">
* Secondary (Round)
* </button>
*
* <!-- Bind the color and clear inputs to an expression -->
* <button ion-button [color]="isSecondary ? 'secondary' : 'primary'" [clear]="isClear">
* Primary (Clear)
* </button>
*
* <!-- Bind the color, outline and round inputs to an expression -->
* <button ion-button [color]="myColor2" [outline]="isOutline" [round]="isRound">
* Dark (Solid + Round)
* </button>
*
* <!-- Bind the click event to a method -->
* <button ion-button (click)="logEvent($event)">
* Click me!
* </button>
* ```
*
* ```ts
* @Component({
* templateUrl: 'main.html'
* })
* class E2EPage {
* isDanger: boolean = true;
* isSecondary: boolean = false;
* isRound: boolean = true;
* isOutline: boolean = false;
* isClear: boolean = true;
* myColor: string = 'secondary';
* myColor2: string = 'dark';
*
* logEvent(event) {
* console.log(event)
* }
* }
*
* ```
*
* @demo /docs/demos/src/button/
* @see {@link /docs/components#buttons Button Component Docs}
* @see {@link /docs/components#fabs FabButton Docs}
* @see {@link ../../fab/FabButton FabButton API Docs}
* @see {@link ../../fab/FabContainer FabContainer API Docs}
*/
export declare class Button extends Ion {
/** @hidden */
_role: string;
/** @hidden */
_size: string;
/** @hidden */
_style: string;
/** @hidden */
_shape: string;
/** @hidden */
_display: string;
/** @hidden */
_decorator: string;
/** @hidden */
_init: boolean;
/**
* @input {boolean} If true, activates the large button size.
*/
large: boolean;
/**
* @input {boolean} If true, activates the small button size.
*/
small: boolean;
/**
* @input {boolean} If true, activates the default button size. Normally the default, useful for buttons in an item.
*/
default: boolean;
/**
* @input {boolean} If true, activates a transparent button style with a border.
*/
outline: boolean;
/**
* @input {boolean} If true, activates a transparent button style without a border.
*/
clear: boolean;
/**
* @input {boolean} If true, activates a solid button style. Normally the default, useful for buttons in a toolbar.
*/
solid: boolean;
/**
* @input {boolean} If true, activates a button with rounded corners.
*/
round: boolean;
/**
* @input {boolean} If true, activates a button style that fills the available width.
*/
block: boolean;
/**
* @input {boolean} If true, activates a button style that fills the available width without
* a left and right border.
*/
full: boolean;
/**
* @input {boolean} If true, activates a button with a heavier font weight.
*/
strong: boolean;
/**
* @input {string} The mode determines which platform styles to use.
* Possible values are: `"ios"`, `"md"`, or `"wp"`.
* For more information, see [Platform Styles](/docs/theming/platform-specific-styles).
*/
mode: string;
/** @hidden */
_attr(type: string, attrName: string, attrValue: boolean): void;
/**
* @input {string} The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"danger"`, `"light"`, and `"dark"`.
* For more information, see [Theming your App](/docs/theming/theming-your-app).
*/
color: string;
constructor(ionButton: string, config: Config, elementRef: ElementRef, renderer: Renderer);
/** @hidden */
ngAfterContentInit(): void;
/**
* @hidden
*/
setRole(val: string): void;
/**
* @hidden
*/
_assignCss(assignCssClass: boolean): void;
/**
* @hidden
*/
_setClass(type: string, assignCssClass: boolean): void;
/**
* @hidden
*/
_updateColor(color: string, isAdd: boolean): void;
}