In Vuetify, what is the best way to manage differenly styled appbars for various pages?
And how to enable back button instead of hamburger icon programatically?
Example: There are 5 screens, 2 of them have separate controls in app bar than the rest.
For the question of coloring the app bar, if you're using the router, you can add a meta tag "color", then set v-app-bar's color property to something to the effect of
:color="$route.meta && $route.meta.color || 'blue-grey'", where blue-grey is the fallback color. Your route would look something like:
{
path: '/mycoolpath',
component: MyCoolComponent,
meta: {
//other route meta...
color: 'blue'
}
}
For the question of enabling Back, just replace the app-bar-nav-icon with the appropriate icon name (mdi-arrow-left, likely) and change it's #click to $router.go(-1) (further reading on routes)
Related
In my react-native app (using native-base as the component library). I have been trying to change the background color of the checkbox in the unchecked state but the default white background is not changing.
react-native: "0.68.5"
native-base: "3.0.3"
After spending some time and trying out multiple ways I was able to find the solution.
Add this piece of code to your theme file, change the color you want and you are good to go.
Checkbox: {
baseStyle: {
_checkbox: {
bg: "#faf3de",
},
},
},
I have a vue app which has a feature than can change the theme, for example, light/dark,
Initially, I've set in my localStorage.setItem['app_theme', 'light'],
I have my app theme changer function in the Header.vue component, and after clicking the theme changer toggle button, it also changes the localStorage['app_theme'] = 'dark'.
Now, in my other components, I have some computed values/variables/properties like this:
...
computed() {
app_card() {
return localStorage.getItem('app_theme') === 'dark' ? 'card-dark' : 'card-light'; //these are some classes with their respective theme css
},
app_text() {
return localStorage.getItem('app_theme') === 'dark' ? 'text-dark' : 'text-light'; //these are some classes with their respective theme css
}
}
...
I've thought about using polling to get the localStorage.getItem('app_theme') value every 2 secs, but I think this'll slow down my app.
Are there any other alternatives to listen for localstorage item change without polling?
This is exactly what the observer pattern is for.
You create an event "OnAppThemeChange". You can subscribe to that event with all your components.
Then whenever your App Theme changed you call your event, and all the components will refresh their App Theme.
This removes the need of Refreshing the theme every 2 seconds. It will only refresh when you actually change the theme.
Usefull links:
https://developer.mozilla.org/de/docs/Web/Guide/Events/Creating_and_triggering_events
https://refactoring.guru/design-patterns/observer
someone can help to set my drawer menu permanent depending of the user device ?
I was thinking of using the vuetify grid system to find out if I'm in lg or md or sm, but I don't know how to do it.
This is my drawer menu code :
<v-navigation-drawer
#input="updateDrawer"
:hide-overlay="true"
:mini-variant="true"
:expand-on-hover="true"
:touchless="true"
:disable-resize-watcher="false"
style="min-width: 100px!important;"
v-model="d"
//here set this: :permanent="!isMobile"
app
clipped
>
...
</v-navigation-drawer>
thanks.
In fact, You can bind permanent directly to the breakpoint, instead of computed.
:permanent="!$vuetify.breakpoint.xsOnly"
If you wanted to still allow manual toggling of the navigation drawer (using a hamburger button), you could add another computed property for the v-model. This allows the drawer to auto show/hide based on the breakpoint or be manually toggled...
computed: {
isLarge() {
return this.$vuetify.breakpoint.name !== 'xs'
},
showDrawer() {
return this.isLarge || this.drawer
}
},
<v-navigation-drawer
v-model="showDrawer"
:permanent="isLarge"
color="primary"
absolute
dark>..
</<v-navigation-drawer>
https://codeply.com/p/Y883gzgiKe
I found this solution that works for my case. I publish in case someone wants to do the same thing as me.
vuetify can give you the user device screen size basing on grid sysmtem. To get the sreen size, do it when the component is computed.
computed: {
isComputer() {
return this.$vuetify.breakpoint.name !== 'xs';
}
}
The drawer menu code can be updated with this:
<v-navigation-drawer
...
//listen if it's a computer(in my case i want md, lg, sm as computer)
:permanent="isComputer"
app
clipped
></v-navigation-drawer>
I have code that looks like the code below. how do I set this up so the components "dataPart1' and "dataPart2" won't load unless a user clicks a button to view the data? In other words, I don't want the data to just automatically show, but only if the user chooses to see it via a button click option.
var app = new Vue({
el: '#data',
data: {
show: true,
something: true,
},
components: {
dataPart1,
dataPart2
},
...other stuff...
}
});
In order to conditionally display content in the templates (text, html, components, etc), we can use conditional rendering of Vue.js and specifically v-if directive.
Short explanation: we can display content depending on certain variables defined in our component. And change value of that variable on certain events, e.g. button click.
Please, take a look at example on CodeSandbox of loading two components conditionally on buttons clicks.
In App.vue file, we have 2 buttons that trigger a handler on click and display component's if corresponding value is true.
Is it possible to take control of React-Select 2's menu positioning? I'm using it inside React Virtualized table rows but then I'm rendering the dropdown to a portal outside of the row. I have set menuPosition to fixed but React-Select 2 has delayed automatic positioning which is far too slow, so I would like to take control of the positioning myself.
You can override the Components styles by adding a styles prop to your Select, targeting the component. React-Select uses emotionCSS for styling, rather than classes, so it can key off of state changes.
const styles = {
menuPortal: (base, state) => {
let overrideProps = {};
// do something here
return Object.assign(base, overrideProps);
}
};
<Select styles={styles} />
You can find additional info in the Styles section of the documentation.