Skip to content

Commit 6b902ba

Browse files
pgbrosspgbross
authored andcommitted
fix(mdc-tab-bar): Remove obsolete support for primary/secondary indicators.
1 parent 62d9251 commit 6b902ba

File tree

3 files changed

+65
-39
lines changed

3 files changed

+65
-39
lines changed

components/tabs/README.md

Lines changed: 34 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,54 @@
11
## Usage
22

33
```html
4-
<mdc-tab-bar>
5-
<mdc-tab>item one</mdc-tab>
6-
<mdc-tab>item two</mdc-tab>
7-
<mdc-tab>item three</mdc-tab>
4+
<mdc-tab-bar @change="onSelected">
5+
<mdc-tab>item one</mdc-tab>
6+
<mdc-tab>item two</mdc-tab>
7+
<mdc-tab>item three</mdc-tab>
88
</mdc-tab-bar>
99
```
1010

11+
```javascript
12+
var vm = new Vue({
13+
methods: {
14+
onSelected(idx) {
15+
console.log(`selected index: ${idx}`);
16+
},
17+
},
18+
});
19+
```
20+
1121
### props
1222

1323
#### mdc-tab
1424

1525
mdc-tab behaves as a navigational link. Add an `href` for simple link behavior
1626
or the `to` property for router-link behavior. mdc-tab dispatches `@click` event.
1727

18-
19-
| prop | Type | Default | Description |
20-
|-------|------|---------|-------------|
21-
|`active`|Boolean| false | set the tab active |
22-
|`event`|String| optional | optional event to emit on click |
23-
|`event-target`|Object| vm.$root | optional event target, defaults to root bus |
24-
|`event-args`|Array| [] | optional event args |
25-
|`to`|String, Object| undefined | router-link property _(*)_ |
26-
|`replace`|Boolean| false | router-link property _(*)_ |
27-
|`append`|Boolean| false | router-link property _(*)_ |
28-
|`exact`|Boolean| false | router-link property _(*)_ |
29-
|`active-class`|String| router-link-active | router-link property _(*)_ |
30-
|`exact-active-class`|String| router-link-exact-active | router-link property _(*)_ |
31-
32-
> _(*)_ Requires [vue-router](https://router.vuejs.org)
28+
| prop | Type | Default | Description |
29+
| -------------------- | -------------- | ------------------------ | ------------------------------------------- |
30+
| `active` | Boolean | false | set the tab active |
31+
| `event` | String | optional | optional event to emit on click |
32+
| `event-target` | Object | vm.$root | optional event target, defaults to root bus |
33+
| `event-args` | Array | [] | optional event args |
34+
| `to` | String, Object | undefined | router-link property _(\*)_ |
35+
| `replace` | Boolean | false | router-link property _(\*)_ |
36+
| `append` | Boolean | false | router-link property _(\*)_ |
37+
| `exact` | Boolean | false | router-link property _(\*)_ |
38+
| `active-class` | String | router-link-active | router-link property _(\*)_ |
39+
| `exact-active-class` | String | router-link-exact-active | router-link property _(\*)_ |
40+
41+
> _(\*)_ Requires [vue-router](https://router.vuejs.org)
3342
> If the `to` property is defined, the item behaves as a
3443
> [router-link](https://router.vuejs.org/en/api/router-link.html)
3544
3645
#### mdc-tab-bar
3746

38-
| prop | Type | Default | Description |
39-
|-------|------|---------|-------------|
40-
|`indicator-primary`|Boolean| false | whether the indicator has the primary color |
41-
|`indicator-accent`|Boolean| false | whether the indicator has the accent color |
42-
43-
> emits `@change` event with the active index as parameter
47+
### events
4448

49+
| props | args | Description |
50+
| --------- | ------ | ---------------------------------------------------- |
51+
| `@change` | number | notify listeners with the active index as parameter. |
4552

4653
### Tabs with icons
4754

@@ -66,4 +73,5 @@ or the `to` property for router-link behavior. mdc-tab dispatches `@click` event
6673
```
6774

6875
### reference
69-
- <https://material.io/components/web/catalog/tabs>
76+
77+
* <https://material.io/components/web/catalog/tabs>

components/tabs/demo.vue

Lines changed: 30 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -2,19 +2,44 @@
22
<div class="">
33
<h3>Simple</h3>
44
<section class="mdc-demo mdc-demo--container">
5-
<mdc-tab-bar indicator-accent>
6-
<mdc-tab>item one</mdc-tab>
7-
<mdc-tab>item two</mdc-tab>
8-
<mdc-tab>item three</mdc-tab>
5+
<mdc-tab-bar @change="onSelected">
6+
<mdc-tab v-for="item in items" :key="item">{{item}}</mdc-tab>
97
</mdc-tab-bar>
108
</section>
9+
<br>
10+
<div v-if="selectedItem">
11+
Selected: <span class="demo-tabs-selected">{{selectedItem}}</span>
12+
</div>
1113
<h3>With icons and text</h3>
1214
<section class="mdc-demo mdc-demo--container">
13-
<mdc-tab-bar indicator-accent>
15+
<mdc-tab-bar>
1416
<mdc-tab icon="phone">Recents</mdc-tab>
1517
<mdc-tab icon="favorite">Favorites</mdc-tab>
1618
<mdc-tab icon="personal_pin">Nearby</mdc-tab>
1719
</mdc-tab-bar>
1820
</section>
1921
</div>
2022
</template>
23+
24+
<script>
25+
export default {
26+
data() {
27+
const items = ['item one', 'item two', 'item three'];
28+
return {
29+
selectedItem: items[0],
30+
items,
31+
};
32+
},
33+
methods: {
34+
onSelected(idx) {
35+
this.selectedItem = this.items[idx];
36+
},
37+
},
38+
};
39+
</script>
40+
41+
<style>
42+
.demo-tabs-selected {
43+
font-style: italic;
44+
}
45+
</style>

components/tabs/mdc-tab-bar.vue

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,16 +12,9 @@ import MDCTabFoundation from '@material/tabs/tab/foundation';
1212
1313
export default {
1414
name: 'mdc-tab-bar',
15-
props: {
16-
'indicator-primary': Boolean,
17-
'indicator-accent': Boolean,
18-
},
1915
data() {
2016
return {
21-
classes: {
22-
'mdc-tab-bar--indicator-primary': this.indicatorPrimary,
23-
'mdc-tab-bar--indicator-accent': this.indicatorAccent,
24-
},
17+
classes: {},
2518
indicatorStyles: {},
2619
tabs: [],
2720
};

0 commit comments

Comments
 (0)