VBtn API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| active | ||
| 控制项的 active 状态。这通常用于高亮显示组件。 | ||
| append-icon | ||
| Creates a v-icon component after default content in the append slot. | ||
| base-color | ||
| Sets the color of component when not focused. | ||
| block | ||
| 将按钮扩大到可用空间的 100％。 | ||
| 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 | ||
| 调整组件使用的垂直高度。 | ||
| disabled | ||
| 移除组件的单击或 target 功能。 | ||
| elevation | ||
| 组件的海拔可接受 0 到 24 之间的值。你可以在 elevation page 浏览更多信息。 | ||
| exact | ||
| 完全匹配链接。如果没有这个链接，‘/’ 将匹配每个路由。你能够在 vue-router 文档浏览更多 exact prop 。 | ||
| flat | ||
| Removes the button box shadow. This is different than using the ‘flat’ variant. | ||
| height | ||
| 设定组件的高度。 | ||
| href | ||
| 指定组件为锚点并应用 href 属性。 | ||
| icon | ||
| Apply a specific icon using the v-icon component. The button will become round. | ||
| 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 | ||
| 设定组件的最大高度。 | ||
| max-width | ||
| 设定组件的最大宽度。 | ||
| min-height | ||
| 设定组件的最小高度。 | ||
| min-width | ||
| 设定组件的最小宽度。 | ||
| position | ||
| 设定组件的 position 属性。 | ||
| prepend-icon | ||
| Creates a v-icon component in the prepend slot before default content. | ||
| readonly | ||
| Puts the button in a readonly state. Cannot be clicked or navigated to by keyboard. | ||
| 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 | ||
| 应用 v-ripple 指令。 | ||
| 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 . | ||
| selected-class | ||
| 配置被选中项目时应用的 CSS 类名。 | ||
| size | ||
| 设置组件的高度和宽度。默认单位是px。也可以使用以下预定义的大小：x-small、small、default、large和x-large。 | ||
| slim | ||
| Reduces padding to 0 8px. | ||
| stacked | ||
| 以 flex-column 形式显示此按钮 | ||
| symbol | ||
| The Symbol used to hook into group functionality for components like v-btn-toggle and v-bottom-navigation . | ||
| tag | ||
| 指定在根元素上使用的自定义标签。 | ||
| text | ||
| 设置组件的内容文本。 | ||
| theme | ||
| Specify a theme for this component and all of its children. | ||
| tile | ||
| Removes any applied border-radius from the component. | ||
| to | ||
| 表示链接的目标路由。你可以在 vue-router 文档浏览更多 to prop 。 | ||
| value | ||
| 在组中选择组件时使用的值。如果没有提供，则使用唯一 ID。 | ||
| variant | ||
| Applies a distinct style to the component. | ||
| width | ||
| 设定组件的宽度。 | ||
事件
| 名称 | 类型 |
|---|---|
| group:selected | |
| Event that is emitted when an item is selected within a group. | |
插槽
| append |
| Adds an item inside the input and after input content. |
| default |
| 默认Vue 插槽。 |
| loader |
| Slot for custom loader (displayed when loading prop is equal to true). |
| prepend |
| Adds an item outside the input and before input content. |
可用属性
| group |
| Internal representation when used in VBtnToggle. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $button-background | |
| $button-banner-actions-padding | |
| $button-border | |
| $button-border-color | |
| $button-border-radius | |
| $button-border-style | |
| $button-border-thin-width | |
| $button-border-width | |
| $button-card-actions-margin | |
| $button-card-actions-padding | |
| $button-color | |
| $button-colored-disabled | |
| $button-density | |
| $button-disabled-opacity | |
| $button-disabled-overlay | |
| $button-elevation | |
| $button-font-size | |
| $button-font-weight | |
| $button-height | |
| $button-icon-border-radius | |
| $button-icon-density | |
| $button-icon-font-size | |
| $button-line-height | |
| $button-loader-size | |
| $button-margin-end | |
| $button-margin-end-multiplier | |
| $button-margin-start | |
| $button-margin-start-multiplier | |
| $button-max-width | |
| $button-padding-ratio | |
| $button-pagination-border-radius | |
| $button-pagination-rounded-border-radius | |
| $button-plain-opacity | |
| $button-positions | |
| $button-rounded-border-radius | |
| $button-sizes | |
| $button-snackbar-action-padding | |
| $button-stacked-density | |
| $button-stacked-height | |
| $button-stacked-icon-margin | |
| $button-stacked-line-height | |
| $button-stacked-padding-ratio | |
| $button-stacked-sizes | |
| $button-stacked-width-ratio | |
| $button-text-letter-spacing | |
| $button-text-transform | |
| $button-transition-property | |
| $button-variants | |
| $button-vertical-align | |
| $button-white-space | |
| $button-width-ratio | |