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 209 210 211 212 213 214 215 216 217 218 219 220 221 222 | 93x 93x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x 7x | import { ComponentRender } from '../zd-component/component-render';
import { ICard, ICardEvents } from './interfaces';
/**
* Base class for Card component.
*/
export class Card extends ComponentRender implements ICard {
/**
* Configure the active CSS class applied when the link is active
*/
public activeClass = '';
/**
* Setting append prop always appends the relative path to the current path
*/
public append = false;
/**
* Applies specified color to the control. It can be the name of material color
*/
public color = '';
/**
* Removes the ability to click or target the component
*/
public disabled = false;
/**
* Designates an elevation applied to the card between 0 and 24
*/
public elevation?: number | string;
/**
* Events registered to the card
*/
public declare events: ICardEvents;
/**
* Removes the card's elevation
*/
public flat = false;
/**
* Sets the height for the card.
* Possible values for height can be 'auto', '100%', '400px' or 400
*/
public height?: number | string;
/**
* Will apply an elevation of 6dp when hovered
*/
public hover = false;
/**
* Designates the component as anchor and applies the href attribute
*/
public href?: string;
/**
* Specifies an image background for the card
*/
public img = '';
/**
* Designates that the card is a link
*/
public link = false;
/**
* Sets the maximum height for the card.
* Possible values for width can be 'auto', '100%', '400px' or 400
*/
public maxHeight: number | string = 'none';
/**
* Sets the maximum width for the card.
* Possible values for width can be 'auto', '100%', '400px' or 400
*/
public maxWidth: number | string = 'none';
/**
* Sets the minimum height for the card.
* Possible values for width can be 'auto', '100%', '400px' or 400
*/
public minHeight: number | string = 'auto';
/**
* Sets the minimum width for the card.
* Possible values for width can be 'auto', '100%', '400px' or 400
*/
public minWidth: number | string = 'auto';
/**
* Removes card elevation shadow and adds a thin border
*/
public outlined = false;
/**
* Specifies a higher default elevation (16dp)
*/
public raised = false;
/**
* Apply the ripple effect to show action from a user
*/
public ripple = false;
/**
* Removes the component's border-radius
*/
public tile = false;
/**
* Designates the component as anchor and applies the router.to attribute
*/
public to?: string;
/**
* Sets the width for the card.
* Possible values for width can be 'auto', '100%', '400px' or 400
*/
public width?: number | 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';
/**
* 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';
/**
* Defines if the component will call router.replace() or router.push()
*/
public replace = false;
/**
* Applies a large border radius on the button
*/
public round: string | number | boolean = false;
/**
* Defines card subtitle
*/
public subtitle?: string;
/**
* Root element tag
*/
public tag?: string;
/**
* Defines card text
*/
public text?: string;
/**
* Defines card title
*/
public title?: string;
/**
* Applies style to component
*/
public variant?: 'text' | 'flat' | 'elevated' | 'tonal' | 'outlined' | 'plain';
/* istanbul ignore next */
/**
* Creates a new Card.
* @param props Card properties
*/
constructor(props: ICard) {
super(props);
this.activeClass = this.getInitValue('activeClass', props.activeClass, this.activeClass);
this.append = this.getInitValue('append', props.append, this.append);
this.color = this.getInitValue('color', props.color, this.color);
this.disabled = this.getInitValue('disabled', props.disabled, this.disabled);
this.elevation = this.getInitValue('elevation', props.elevation, this.elevation);
this.flat = this.getInitValue('flat', props.flat, this.flat);
this.hover = this.getInitValue('hover', props.hover, this.hover);
this.href = this.getInitValue('href', props.href, this.href);
this.img = this.getInitValue('img', props.img, this.img);
this.link = this.getInitValue('link', props.link, this.link);
this.height = this.getInitValue('height', props.height, this.height);
this.width = this.getInitValue('width', props.width, this.width);
this.maxHeight = this.getInitValue('maxHeight', props.maxHeight, this.maxHeight);
this.maxWidth = this.getInitValue('maxWidth', props.maxWidth, this.maxWidth);
this.minHeight = this.getInitValue('minHeight', props.minHeight, this.minHeight);
this.minWidth = this.getInitValue('minWidth', props.minWidth, this.minWidth);
this.outlined = this.getInitValue('outlined', props.outlined, this.outlined);
this.raised = this.getInitValue('raised', props.raised, this.raised);
this.ripple = this.getInitValue('ripple', props.ripple, this.ripple);
this.tile = this.getInitValue('tile', props.tile, this.tile);
this.to = this.getInitValue('to', props.to, this.to);
this.border = this.getInitValue('border', props.border, this.border);
this.density = this.getInitValue('density', props.density, this.density);
this.loading = this.getInitValue('loading', props.loading, this.loading);
this.position = this.getInitValue('position', props.position, this.position);
this.replace = this.getInitValue('replace', props.replace, this.replace);
this.round = this.getInitValue('round', props.round, this.round);
this.subtitle = this.getInitValue('subtitle', props.subtitle, this.subtitle);
this.tag = this.getInitValue('tag', props.tag, this.tag);
this.text = this.getInitValue('text', props.text, this.text);
this.title = this.getInitValue('title', props.title, this.title);
this.variant = this.getInitValue('variant', props.variant, this.variant);
}
}
|