material-components-vue
Version:
Material Design components for Vue.js
57 lines (42 loc) • 1.36 kB
Markdown
## TabBar
### Markup
```html
<m-tab-bar scrollable>
<m-tab href="#home">
<m-icon slot="icon" icon="home"/>
Home
</m-tab>
<m-tab active href="#social">
<m-icon slot="icon" icon="favorite"/>
Like me
</m-tab>
<m-tab href="#about">
<m-icon slot="icon" icon="person"/>
About me
</m-tab>
</m-tab-bar>
```
### Props
| Prop | Type | Default | Description |
|------|------|---------|-------------|
| scrollable | Boolean | false | whether the tab bar should be scrollable |
| iconTabBar | Boolean | false | should be set when there will be icons in the tab label |
| withIconAndText | Boolean | false | should be set when there will be icons and text in the tab label |
### Slots
| Slot | Description |
|------|-------------|
| default | tab bar content (tabs) |
## Tab
### Props
| Prop | Type | Default |Description |
|------|------|---------|------------|
| active | Boolean | false | whether the tab should be marked as active |
| label | Boolean | true | whether the label in the default slot should be visible |
Non prop events are mapped to the inner button element.
### Slots
| Slot | Description |
|------|-------------|
| default | tab label |
| icon | icon component |
### Reference
- https://github.com/material-components/material-components-web/tree/master/packages/mdc-tabs