Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 | 93x 93x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x 48x | import { ComponentRender } from '../zd-component/component-render';
import { IButton, IButtonEvents } from './interfaces';
/**
* Base class for Button component.
*/
export class Button extends ComponentRender implements IButton {
// Applies position absolute to the button
public absolute = false;
// Expands the button to 100% of available space
public block = false;
/**
* Aligns the button towards the bottom.
* This should be used with the absolute or fixed props
*/
public bottom = false;
/**
* Applies specified color to the control.
* It can be the name of material or css color in hexa
*/
public color = 'primary';
// * Removes the ability to click or target the button
public disabled = false;
// Events registered to the button
public declare events: IButtonEvents;
// Designates the button as a floating-action-button
public fab = false;
// Applies position fixed to the button
public fixed = false;
// Makes the background transparent (equal to text prop in Vuetify)
public flat = false;
// Designates the component as anchor and applies the href attribute
public href = '';
// Designates the button as icon, round and flat
public icon = false;
// Defines the button icon, that will be rendered before the label
public iconName = '';
// Defines the button label
public label = '';
// Makes the button large
public large = false;
/**
* Aligns the button towards the left.
* This should be used with the absolute or fixed props
*/
public left = false;
// Makes the background transparent and applies a thin border
public outline = false;
// Change the icon to the right.
public reverse = false;
/**
* Aligns the button towards the right.
* This should be used with the absolute or fixed props
*/
public right = false;
// Applies a large border radius on the button
public round: string | number | boolean = false;
// Makes the button small
public small = false;
// Designates the target attribute when the button has href or to prop
public target = '_self';
// Removes the component's border-radius
public tile = false;
// Denotes the target route of the link
public to = '';
/**
* Aligns the content towards the top.
* This should be used with the absolute or fixed props
*/
public top = false;
// Sets button type
public type = 'button';
/**
* Sets the width for the card.
* Possible values for width can be 'auto', '100%', '400px' or 400
*/
public width: number | string = '';
// Controls the active state of the item. This is typically used to highlight the component
public active?: boolean = undefined;
// Icon to be added after the text.
public appendIcon?: string;
// Applies border style to component
public border: string | number | boolean = false;
/**
* Adjusts the vertical height of the component
* Possible values: 'default', 'comfortable' and 'compact'
*/
public density: 'default' | 'comfortable' | 'compact' = 'default';
// Defines the elevation (0 to 24) of the component
public elevation?: string | number;
// Displays the loading progress bar
public loading: string | boolean = false;
/**
* Defines the position of the component.
* Possible values: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky'
*/
public position?: 'relative' | 'absolute' | 'static' | 'fixed' | 'sticky';
// Icon to be added before the text.
public prependIcon?: string;
// Defines if the component will call router.replace() or router.push()
public replace = false;
// Shows the ripple when clicked
public ripple = true;
// Class to be added when selected
public selectedClass?: string;
/**
* Defines the height and width of the component
* Possible values: x-small, small, default, large, and x-large
*/
public size?: 'x-small' | 'small' | 'default' | 'large' | 'x-large';
// Displays the component as flex column (icon above the text)
public stacked = false;
// Root element tag
public tag?: string;
// Applies style to component
public variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain';
/* istanbul ignore next */
/**
* Create a new Button
* @param props Button definition
*/
constructor(props: IButton) {
super(props);
this.absolute = this.getInitValue('absolute', props.absolute, this.absolute);
this.block = this.getInitValue('block', props.block, this.block);
this.bottom = this.getInitValue('bottom', props.bottom, this.bottom);
this.color = this.getInitValue('color', props.color, this.color);
this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
this.fab = this.getInitValue('fab', props.fab, this.fab);
this.fixed = this.getInitValue('fixed', props.fixed, this.fixed);
this.flat = this.getInitValue('flat', props.flat, this.flat);
this.href = this.getInitValue('href', props.href, this.href);
this.icon = this.getInitValue('icon', props.icon, this.icon);
this.iconName = this.getInitValue('iconName', props.iconName, this.iconName);
this.label = this.getInitValue('label', props.label, this.label);
this.large = this.getInitValue('large', props.large, this.large);
this.left = this.getInitValue('left', props.left, this.left);
this.outline = this.getInitValue('outline', props.outline, this.outline);
this.right = this.getInitValue('right', props.right, this.right);
this.reverse = this.getInitValue('reverse', props.reverse, this.reverse);
this.round = this.getInitValue('round', props.round, this.round);
this.small = this.getInitValue('small', props.small, this.small);
this.target = this.getInitValue('target', props.target, this.target);
this.tile = this.getInitValue('tile', props.tile, this.tile);
this.to = this.getInitValue('to', props.to, this.to);
this.top = this.getInitValue('top', props.top, this.top);
this.type = this.getInitValue('type', props.type, this.type);
this.width = this.getInitValue('width', props.width, this.width);
// Zeedhi 3.0
this.active = this.getInitValue('active', props.active, this.active);
this.appendIcon = this.getInitValue('appendIcon', props.appendIcon, this.appendIcon);
this.border = this.getInitValue('border', props.border, this.border);
this.density = this.getInitValue('density', props.density, this.density);
this.elevation = this.getInitValue('elevation', props.elevation, this.elevation);
this.loading = this.getInitValue('loading', props.loading, this.loading);
this.position = this.getInitValue('position', props.position, this.position);
this.prependIcon = this.getInitValue('prependIcon', props.prependIcon, this.prependIcon);
this.replace = this.getInitValue('replace', props.replace, this.replace);
this.ripple = this.getInitValue('ripple', props.ripple, this.ripple);
this.selectedClass = this.getInitValue('selectedClass', props.selectedClass, this.selectedClass);
this.size = this.getInitValue('size', props.size, this.size);
this.stacked = this.getInitValue('stacked', props.stacked, this.stacked);
this.tag = this.getInitValue('tag', props.tag, this.tag);
this.variant = this.getInitValue('variant', props.variant, this.variant);
}
}
|