1
1
## Usage
2
2
3
3
``` 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 >
8
8
</mdc-tab-bar >
9
9
```
10
10
11
+ ``` javascript
12
+ var vm = new Vue ({
13
+ methods: {
14
+ onSelected (idx ) {
15
+ console .log (` selected index: ${ idx} ` );
16
+ },
17
+ },
18
+ });
19
+ ```
20
+
11
21
### props
12
22
13
23
#### mdc-tab
14
24
15
25
mdc-tab behaves as a navigational link. Add an ` href ` for simple link behavior
16
26
or the ` to ` property for router-link behavior. mdc-tab dispatches ` @click ` event.
17
27
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 )
33
42
> If the ` to ` property is defined, the item behaves as a
34
43
> [ router-link] ( https://router.vuejs.org/en/api/router-link.html )
35
44
36
45
#### mdc-tab-bar
37
46
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
44
48
49
+ | props | args | Description |
50
+ | --------- | ------ | ---------------------------------------------------- |
51
+ | ` @change ` | number | notify listeners with the active index as parameter. |
45
52
46
53
### Tabs with icons
47
54
@@ -66,4 +73,5 @@ or the `to` property for router-link behavior. mdc-tab dispatches `@click` event
66
73
```
67
74
68
75
### reference
69
- - < https://material.io/components/web/catalog/tabs >
76
+
77
+ * < https://material.io/components/web/catalog/tabs >
0 commit comments