VFab API
组件页面
属性
| 名称 | 类型 | 默认值 |
|---|---|---|
| absolute | ||
| Applies position: absolute to the component. | ||
| active | ||
| Controls the active state of the item. This is typically used to highlight the component. | ||
| app | ||
| If true, attaches to the closest layout and positions according to the value of location. | ||
| appear | ||
| Used to control the animation of the FAB. | ||
| 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 | ||
| Expands the button to 100% of available space. | ||
| 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. | ||
| extended | ||
| An alternate style for the FAB that expects text. | ||
| flat | ||
| Removes the button box shadow. This is different than using the ‘flat’ variant. | ||
| height | ||
| Sets the height for the component. | ||
| href | ||
| Designates the component as anchor and applies the href attribute. | ||
| icon | ||
| Apply a specific icon using the v-icon component. The button will become round. | ||
| layout | ||
| If true, will effect layout dimensions based on size and position. | ||
| 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 | ||
| The location of the fab relative to the layout. Only works when using app. | ||
| 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. | ||
| model-value | ||
| The v-model value of the component. If component supports the multiple prop, this defaults to an empty array. | ||
| name | ||
| Assign a specific name for layout registration. | ||
| offset | ||
| Translates the Fab up or down, depending on if location is set to top or bottom. | ||
| order | ||
| Adjust the order of the component in relation to its registration order. | ||
| position | ||
| Sets the position for the component. | ||
| 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 | ||
| 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 . | ||
| selected-class | ||
| Configure the active CSS class applied when an item is selected. | ||
| size | ||
| Sets the height and width of the component. Default unit is px. Can also use the following predefined sizes: x-small, small, default, large, and x-large. | ||
| slim | ||
| Reduces padding to 0 8px. | ||
| stacked | ||
| Displays the button as a flex-column. | ||
| symbol | ||
| The Symbol used to hook into group functionality for components like v-btn-toggle and v-bottom-navigation . | ||
| 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. | ||
| to | ||
| Denotes the target route of the link. You can find more information about the to prop on the vue-router documentation. | ||
| transition | ||
| Sets the component transition. Can be one of the built in or custom transition. | ||
| value | ||
| The value used when the component is selected in a group. If not provided, a unique ID will be used. | ||
| variant | ||
| Applies a distinct style to the component. | ||
| width | ||
| Sets the width for the component. | ||
事件
| 名称 | 类型 |
|---|---|
| update:modelValue | |
| Event that is emitted when the component’s model changes. | |
插槽
| default |
| The default Vue slot. |
SASS 变量
| 名称 | 默认值 |
|---|---|
| $fab-border-radius | |
| $fab-border-radius-multiplier | |
| $fab-font-size | |
| $fab-font-weight | |
| $fab-padding-ratio | |
| $fab-size-scales | |
| $fab-sizes | |
| $fab-transition-duration | |
| $fab-transition-timing-function | |
| $fab-width-ratio | |