Within a VueNative project that utilizes NativeBase as a component library, with tags prefixed by nb-, the code snippet below is found within the <template> tags of the footer.vue file which houses navigation buttons. This piece of logic successfully changes the color of the tab (button) upon user interaction, marking it as active.
<nb-button :active="tab2" :onPress="toggleTab2" :style="{ backgroundColor: (activeTab == 'tab2') ? 'rgb(117, 110, 116)' : 'rgb(82, 74, 81)' }">
<nb-text class="text">Instructions</nb-text>
</nb-button>
The goal is to substitute the usage of :style with :class, ensuring all nb-button tags in the file refer to class names rather than hardcoded background colors. Below are the attempted modifications -
within the <template> tags:
<nb-button :active="tab2" :onPress="toggleTab2" :class="{ (activeTab == 'tab2') ? "active" : "inactive" }">
<nb-text class="text">Instructions</nb-text>
</nb-button>
inside the <style> section:
.inactive {
background-color: rgb(82, 74, 81);
}
.active {
background-color: rgb(117, 110, 116);
}
However, an error indication appears under the :class line in the code editor stating "'v-bind' directives require an attribute value". How can this be adjusted for functionality?
Edit In alignment with information from this post, an alternative attempt has been made:
<nb-button :active="tab2" :onPress="toggleTab2" :style="(activeTab == 'tab2') ? 'active' : 'inactive'">
Nevertheless, the outcome seems to disregard the designated class names. When selecting tab2, the default active color gets displayed instead of the specified color within the active style.