lesson 130: style the tabs depending on the state
This commit is contained in:
parent
63f0e3d148
commit
aca6d408e3
|
@ -1,9 +1,13 @@
|
||||||
<template>
|
<template>
|
||||||
<base-card>
|
<base-card>
|
||||||
<base-button @click="setSelectedTab('stored-resources')"
|
<base-button
|
||||||
|
@click="setSelectedTab('stored-resources')"
|
||||||
|
:mode="storedResourcesActive"
|
||||||
>Stored Resources</base-button
|
>Stored Resources</base-button
|
||||||
>
|
>
|
||||||
<base-button @click="setSelectedTab('add-resources')"
|
<base-button
|
||||||
|
@click="setSelectedTab('add-resource')"
|
||||||
|
:mode="addResourceActive"
|
||||||
>Add Resource</base-button
|
>Add Resource</base-button
|
||||||
>
|
>
|
||||||
</base-card>
|
</base-card>
|
||||||
|
@ -37,6 +41,22 @@ export default {
|
||||||
]
|
]
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
storedResourcesActive() {
|
||||||
|
if (this.selectedTab === 'stored-resources') {
|
||||||
|
return null;
|
||||||
|
} else {
|
||||||
|
return 'flat';
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addResourceActive() {
|
||||||
|
if (this.selectedTab === 'add-resource') {
|
||||||
|
return null;
|
||||||
|
} else {
|
||||||
|
return 'flat';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
methods: {
|
methods: {
|
||||||
setSelectedTab(tab) {
|
setSelectedTab(tab) {
|
||||||
this.selectedTab = tab;
|
this.selectedTab = tab;
|
||||||
|
|
Reference in New Issue