VCard API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| append-avatar | ||
| Appends a v-avatar component after default content in the append slot. | ||
| append-icon | ||
| Creates a v-icon component after default content in the append slot. | ||
| border | ||
| Designates the border-radius applied to the component. This can be xs, sm, md, lg, xl. | ||
| color | ||
| Applies specified color to the control - supports utility colors (for example success or purple) or css color (#033 or rgba(255, 0, 0, 0.5)). Find a list of built-in classes on the colors page . | ||
| density | ||
| Adjusts the vertical height used by the component. | ||
| disabled | ||
| Removes the ability to click or target the component. | ||
| elevation | ||
| Designates an elevation applied to the component between 0 and 24. You can find more information on the elevation page . | ||
| exact | ||
| Exactly match the link. Without this, ‘/’ will match every route. You can find more information about the exact prop on the vue-router documentation. | ||
| flat | ||
| Removes the card’s elevation. | ||
| height | ||
| Sets the height for the component. | ||
| hover | ||
| Applies 4dp of elevation when hovered (default 2dp). You can find more information on the elevation page . | ||
| href | ||
| Designates the component as anchor and applies the href attribute. | ||
| image | ||
| Apply a specific background image to the component. | ||
| link | ||
| Designates that the component is a link. This is automatic when using the href or to prop. | ||
| loading | ||
| Displays linear progress bar. Can either be a String which specifies which color is applied to the progress bar (any material color or theme color - primary, secondary, success, info, warning, error) or a Boolean which uses the component color (set by color prop - if it’s supported by the component) or the primary color. | ||
| location | ||
| Specifies the component’s location. Can combine by using a space separated string. | ||
| max-height | ||
| Sets the maximum height for the component. | ||
| max-width | ||
| Sets the maximum width for the component. | ||
| min-height | ||
| Sets the minimum height for the component. | ||
| min-width | ||
| Sets the minimum width for the component. | ||
| position | ||
| Sets the position for the component. | ||
| prepend-avatar | ||
| Prepends a v-avatar component in the prepend slot before default content. | ||
| prepend-icon | ||
| Prepends a v-icon component to the header | ||
| replace | ||
| Setting replace prop will call router.replace() instead of router.push() when clicked, so the navigation will not leave a history record. You can find more information about the replace prop on the vue-router documentation. | ||
| ripple | ||
| Applies the v-ripple directive. | ||
| rounded | ||
| Designates the border-radius applied to the component. This can be 0, xs, sm, true, lg, xl, pill, circle, and shaped. Find more information on available border radius classes on the Border Radius page . | ||
| subtitle | ||
| Specify a subtitle text for the component. | ||
| tag | ||
| Specify a custom tag used on the root element. | ||
| text | ||
| Specify content text for the component. | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| title | ||
| Specify a title text for the component. | ||
| to | ||
| Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation. | ||
| variant | ||
| Applies a distinct style to the component. | ||
| width | ||
| Sets the width for the component. | ||
插槽
| actions |
| The slot used for the card actions; located at the bottom of the card. |
| append |
| Adds an item inside the input and after input content. |
| default |
| The default Vue slot. |
| image |
| The slot used for the card image. This is used with the image prop. |
| item |
| Define a custom item appearance. |
| loader |
| Slot for custom loader (displayed when loading prop is equal to true). |
| prepend |
| Adds an item outside the input and before input content. |
| subtitle |
| Slot for the component’s subtitle content. |
| text |
| Slot for the component’s text content. |
| title |
| Slot for the component’s title content. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $card-actions-flex | |
| $card-actions-min-height | |
| $card-actions-padding | |
| $card-append-padding-inline-start | |
| $card-avatar-align-self | |
| $card-avatar-header-padding | |
| $card-avatar-padding | |
| $card-background | |
| $card-border | |
| $card-border-color | |
| $card-border-radius | |
| $card-border-style | |
| $card-border-thin-width | |
| $card-border-width | |
| $card-color | |
| $card-disabled-opacity | |
| $card-elevation | |
| $card-header-flex | |
| $card-hover-elevation | |
| $card-img-flex | |
| $card-item-align-items | |
| $card-item-padding | |
| $card-loader-bottom | |
| $card-loader-top | |
| $card-overflow-wrap | |
| $card-padding | |
| $card-plain-opacity | |
| $card-positions | |
| $card-prepend-padding-inline-end | |
| $card-subtitle-color | |
| $card-subtitle-comfortable-line-height | |
| $card-subtitle-compact-line-height | |
| $card-subtitle-density-line-height | |
| $card-subtitle-flex | |
| $card-subtitle-font-size | |
| $card-subtitle-font-weight | |
| $card-subtitle-header-padding | |
| $card-subtitle-letter-spacing | |
| $card-subtitle-line-height | |
| $card-subtitle-opacity | |
| $card-subtitle-overflow | |
| $card-subtitle-padding | |
| $card-subtitle-text-overflow | |
| $card-subtitle-text-transform | |
| $card-subtitle-white-space | |
| $card-text-comfortable-line-height | |
| $card-text-compact-line-height | |
| $card-text-density-line-height | |
| $card-text-flex | |
| $card-text-font-size | |
| $card-text-font-weight | |
| $card-text-letter-spacing | |
| $card-text-line-height | |
| $card-text-opacity | |
| $card-text-padding | |
| $card-text-padding-bottom | |
| $card-text-text-transform | |
| $card-title-comfortable-line-height | |
| $card-title-compact-line-height | |
| $card-title-densities | |
| $card-title-flex | |
| $card-title-font-size | |
| $card-title-font-weight | |
| $card-title-header-padding | |
| $card-title-hyphens | |
| $card-title-letter-spacing | |
| $card-title-line-height | |
| $card-title-overflow | |
| $card-title-overflow-wrap | |
| $card-title-padding | |
| $card-title-padding-top | |
| $card-title-text-overflow | |
| $card-title-text-transform | |
| $card-title-white-space | |
| $card-title-word-break | |
| $card-title-word-wrap | |
| $card-transition-duration | |
| $card-transition-property | |
| $card-transition-timing-function | |
| $card-variants | |