I'm using the v-app-bar label for my header and I want the shadow of the element to be lighter since it looks too prominent. I'm unable to apply box-shadow attribute to the v-app-bar element.
should I do?
Method 1
You can use component prop called elevation. Look into the app bar docs into API section (https://vuetifyjs.com/en/components/app-bars/#api) and select PROPS tab you can see elevation prop.
Method 2
You can use builtin elevation classes. You can read more about them here: https://vuetifyjs.com/en/styles/elevation/
Method 3
Vuetify allows you to customize sass styles.
If you go here: https://vuetifyjs.com/en/components/app-bars/#api and select SASS tab you can see that they provide some variables which you can edit.
One of them is elevation which is responsible for box-shadow.
Of course to do so you need to have vuetify installed as a vue-cli plugin or in a we pack environment as you can read here: https://vuetifyjs.com/en/customization/sass-variables/
Method 4
You can apply css directly but not to the v-app-bar because it's only vuetify component name which then gets generated into HTML. You can inspect your page using e.g. chrome dev tools and see what structure app bar has and then apply css styles to the right element.
Related
I am looking for the syntax needed to reference an item in Docusaurus allowing me to modify the background color/text color of a collapsed item.
Example image
enter image description here
How exactly can I reference docusaurus code to modify the coloring of these bubbles?
it is not clear what exactly you are asking.
You can find how to add styling and layout here: https://docusaurus.io/docs/styling-layout
You can create custom react components and add them to the documentation to completely customise the html element. Alternatively you could inspect the element to find the class used by docusaurus to change the css of the elements you want.
I have written a very simple, learning "hello world" type component, in the vue 2/typescript 4 project at:
https://github.com/sldev2/vr-vtsv-timeline
This project was made with vue ui. I've added #vue/composition-api 1.0.3 and vuetify 2.4.0
The component is called CompositionApiEg.vue. It doesn't use any explicit vuetify styles. When you browse to http://localhost:8080/, It displays 3 names, and allows you to increase "capacity" by clicking the button with text "Increase Capacity". (The button border does not show. I know not why; I assume I need a vuetify button style) There are no runtime errors in the browser.
The CompositionApiEg.vue file is here.
I've tried transplanting this component into another vue2/typescript 4 project also made with vue ui, with the composition-api added, but that has tailwind instead of vuetify. The component was not modified in any way. In particular, no tailwind styles were added.
This project is at: https://github.com/sldev2/v23tstw
Now, however, this component is throwing a bunch of runtime errors, such as:
warning eg:
vue.runtime.esm.js?d04a:619 [Vue warn]: Property or method "spacesLeft" is not defined on the instance but referenced during render. Make sure that this property is reactive, either in the data option, or for class-based components, by initializing the property. See: https://v2.vuejs.org/v2/guide/reactivity.html#Declaring-Reactive-Properties.
error eg:
vue.runtime.esm.js?d04a:1897 TypeError: _vm.increaseCapacity is not a function
at click (CompositionApiEg.vue?c6d9:27)
at invokeWithErrorHandling (vue.runtime.esm.js?d04a:1863)
at HTMLButtonElement.invoker (vue.runtime.esm.js?d04a:2188)
at HTMLButtonElement.original._wrapper (vue.runtime.esm.js?d04a:6961)
Why does the exact same, very simple component succeed in one vue2 project, but not in another?
I am opening an NgbModal passing a TemplateRef to create the dialog body, and passing in a custom class via the windowClass property of the NgbModalOptions object that I pass to the open() method. I define the class in a referenced styleUrl in the component and am serving the modal via an injectable service in the component. The modal is loading fine, and I can see the class name when I inspect the DOM, but the class appears to have no bearing on the modal. I would like to use it to customize the size of the modal (css is defined to affect the child div where the size is set), but I have also played with properties that I can see in the Styles tab of the Chrome dev tools, but cannot see it affecting anything. When I inspect in Firefox dev tools, I can find the CSS as an inline style sheet and it has a reference to the ngContent identifier assigned by Angular, so I am assuming that is does not affect the entire document, nor those parts added by ng-bootstrap that constitute the modal wrapper. Has anyone been able to make this work successfully? I am at my wit's end. I would even be happy if I could get an ElementRef of the modal-header dive, but since I am using a template (which is not fully loaded in the DOM at init time) I have not been able to. One of my requirements is that we do all DOM manipulation via Angular to maintain platform independence in the project ... so no jQuery. Any thoughts? And thanks in advance!!
I use windowClass and size attributes of NgbModalOptions to customize the modal. Sample code follows:
this.modalService.open(<your_template_ref_var>, {size: 'lg', windowClass: 'modal-adaptive-s1'});
Whereas
.modal-adaptive-s1 .modal-lg {width: 400px !important; max-width: 400px;}
Is it possible to use VusJS Components into Moqui Screens?
I know for sure that you can render Basic HTML but I wasn't able to find a hook for the VueJS app.
The need comes from the following scenario:
While form-single widget can be made collapsible, form-list cannot. So I wanted to use vue-collapsible (https://github.com/vue-comps/vue-collapsible) but I don't know where I am supposed to register the component.
If there's no way to use vue, maybe you can help me with my concrete issue.
In the 'vuet' render mode which is used in the /vapps path (as opposed to /apps) it isn't actually HTML sent to the client it is a Vue Template. If you look at the text returned by the server you'll see a number of Vue Components already being used (see the WebrootVue.js file for their source). You can see this in Chrome using the Sources or Network tab in the tools window or similar tools in other browsers. If you inspect an element you'll be looking at the rendered HTML, ie after Vue runs the components to change the Vue Template to HTML.
This means that if you include the necessary JavaScript file(s), and CSS file(s) if needed, then you can use any Vue component in the Vue Template returned. You can do this inline in XML Screen files using the render-mode.text element with the #type=vuet.
None of this runs under NPM in the way VueJS is used in Moqui Framework through XML Screens. In other words it isn't a pre-packaged Vue app with 100% client/browser rendering but rather is a hybrid client and server rendered approach.
You can include scripts in this Moqui hybrid approach using the script element with a #src attribute for the script file which the WebrootVue.js file loads on the fly. There are various examples of this for additional JS scripts like Chart.JS
In ExtJS 4, what's the difference between componentCls, cls and bodyCls ?
ExtJS provide many options in styling the components. Each of these property have its place in implementing proper theming of your components.
cls: This is applied to the component's root element. Quoting from the docs:
An optional extra CSS class that will be added to this component's
Element. This can be useful for adding customized styles to the
component or any of its children using standard CSS rules.
By default, this is empty. If you need to style some child elements (by elements don't mean ExtJs components.. instead, they are HTML elements auto generated by the framework) of a component then, you can use this. For example, If you want to change background color of you's tab panel's inner area, you can do something like this:
.customCss x-box-inner {
background-color: yellow;
}
componentCls: This also gets applied to the component's root element. But, this property is meant to hold CSS styles for the component as a whole. Quoting from the docs:
CSS Class to be added to a components root level element to give
distinction to it via styling.
From result point of view, both cls and componentCls gets applied to the root element. But, the are used for different purposes.
bodyCls: This is available for Panels. You will not find this styling for a button because, there is no body. If you want to provide custom styles for your panel's body region.. you can do so by setting this property.