I've been asked to switch a Quasar project to Vuetify, and one of the components I'm trying to find an equivalent for is Quasar's QSplitter component, specifically to create a vertically-oriented draggable divider. Does Vuetify have an equivalent?
It looks like the answer is "No", but I was able to find a substitute in the third-party package splitpanes.
Related
I have installed vue 3 with vuetify alpha version for vue 3 using vite. But almost none of the UI components works correctly. The colors are diferent, even if I copy-paste the template and script tags for the respective UI component.
For example this is how it looks for me:
And this is how it looks on their website:
AM I doing something incorrectly ? Or is it really incompatible and not reliable with vue 3
The upgrade is not very straightforward because a lot of props has been changed. And the documentation for vuetify 3 is outdated so you can't just copy and paste from the documentation. Currently, I'm a afraid that you should look into the source code to figure it out.
In React, in order to style a component, I simply import the style file that sits in the same directory as the component, e.g., import './style.scss'. It's simple and easy, no problems there.
However, I can't seem to make this work in Preact. The style file just never get applied, even after following the docs and of course installing node-sass and sass-loader. I see plenty of examples out there using CSS modules and a few with CSS in JS, but I'd like to do a bog-standard import if possible.
Thanks in advance for any help you can provide.
Apparently the solution was to disable CSS modules altogether by installing css-loader and adding the following to my preact.config.js:
const css = helpers.getLoadersByName(config, 'css-loader')[0];
css.loader.options.modules = false;
I need to have over 10 language in my Nativescript-vue app. I have looked at "vue-i18next" but i don't understand how it works with single file components. I don't understand how it will work if i have exempel app.vue, register.vue, login.vue and so on.. The docs didn't show how to do it on single file components.
Can someone give me a example with nativescript-vue "vue-i18next" or another language plugin? Just show me one single file component how its done ;)
Today I've started using ionic 3 for the first time. I don't really know anything about it, so that's why I wanna learn how it works.
I've created a sidemenu project and now I want to add some global styling in my app.scss, so I can use it in any page of my project. Well, I've added simple styling to my app.scss but nothing happens on my page. Everything still looks the same. Now my question is: Do I have to import the app.scss somewhere? If so, where? Or how can I use the app.scss?
I thought it would happen automatically, that my page uses also the classes of my app.scss and not only of it's own stylesheet, but to me it seems like it doesn't even know the classes of the app.scss.
within the app.scss you can create class use them normally as class="class-name" on html.
Hope I helped you.
You can just use it, no need to import it anywhere. A few things to keep in mind though:
There are things you would like to add at a global scope like for example if you want to enable newlines in toast messages you add the following:
.toast-message {
white-space: pre-line;
}
If you want to add something only for iOS you add it as a sub element of the ios class:
.ios {
... // your iOS-specific css rules
}
If you want to add somehing only for Android (material design) you add it as a sub element of the md class:
.md {
... // your android-specific css rules
}
An there is also a wp class for windows phone if you should need it.
Make sure you have a look at ionics theming docs.
I specifically mean the reactJS & material-ui project:
http://www.material-ui.com/
searching on theme-forest etc. doesn't turn up anything.
there are themes that use other front-end material design packages
such as:
http://preview.themeforest.net/item/materio-material-design-mobile-app-landing-page/full_screen_preview/10910350
^ materializecss
or
http://www.strapui.com/product-category/react.js-themes/
^ react + bootstrap
Converting the JS components to a different library seems like a whole lot of work... same as building from scratch really.
Thanks for any suggestions or quick ways to get a designed layouted site up and running!