I found this card component example on the internet and would like to build something similar with Vuetify. I'd like to know what is the best/easiest way to approach this? Using default v-card and add custom elements/css inside.Or building the whole card with Vuetify gid?
You can recreate something similar with an outlined v-card with only a v-card-text child. The top section looks like an outlined v-alert with left border. Use v-row and v-col (col-auto on all) grid inside, with v-spacer for the whitespace after first column. Bottom section will also have the grid. You could also put the v-alert inside v-card-title for similar effect but I don't think the banner alert is appropriate as a "card title".
Vuetify is a Vue UI library that provides ready-to-use components saving the developer time. So if the components Vuetify makes available to you are fine out of the box, you're fine, otherwise there's nothing wrong with adding custom CSS. In reference to the screenshot you attached, vuetify allows you to make that card in a practically identical way. In addition to studying the functioning of the basic components, I recommend that you take a look at the ready-made CSS classes that Vuetify provides you. Thanks to those you can do a lot of things. I hope I was helpful.
Related
Hi I come from bootstrap and Im trying to learn some vuetify. I had some questions about the framework that I couldnt find the answer to in the vuetify docs.
What is a prop? (1)
What is the difference between adding a prop and adding it as a class attr? (2)
Is there a list where I can find all the props and helper classes for the components? (3)
For example: I was trying to make a container take the full width of the screen and couldnt find any property that the vuetify docs indicated that would make my container act like, this so I had to look online. I finally read on a stack overflow post that there was a prop called full-height that did exactly what I wanted. The problem was the conatiner docs said nothing about this prop in relation to the container itself. I also looked around the customization and the styles and animations tabs on the docs and could find anything about it. Where are all these props and helper classes defined?
Vuetify uses Vue.js components, so you should be familiar with them.
However, I'll try to answer your 3 questions:
Props are a way to pass data to components. Say, for example, you are building a header component which needs to get the title from the page in which you put it in. Then, you can just declare a title property and then use that inside the component. You can then pass it like your standard HTML attributes, e.g. <the-title title="Main Page" /> If the component is called TheTitle. For more thorough information, There is a whole page about props inside the official Vue.js docs.
In your use case, a class is useful when you have the appropriate CSS styling for it, otherwise it wouldn't do anything. My suggestion would be to use props for styling individual components where you don't have the same style anywhere else and classes for cases where a style repeats itself. If the style is local to the component, make sure you add scoped to the style tag to avoid applying it anywhere else.
Vuetify has a nice API explorer which you can use to browse the entire collection of components. Each one has an API section where you can see all the details, including information about the props and other stuff.
I'm newest in web.
I want customize default scroll-bar in ag-grid. I try use ngx-scrollbar for this. In sources ngx-scrollbar I found that ngx-scrollbar using ng-content for wrapping elements(link to github source file). If wrap ag-grid-angular element then scrolling even doesn't shows because content doesn't overflow ag-grid-angular content because oveflow happen in div with class .ag-body-viewport where using stock srolls. In order to achieve needed effect I wish pass DOM element with class .ag-body-viewport to ng-content of ngx-scrollbar. Is it possible?
More info here github issue but I don't use Nice Scroll or Perfect Scrollbar
I want use ngx-scrollbar because it has capability of customization.
UPDATE
I can pass DOM element to ng-content using next sintax(agGridViewport is native element):
<ng-scrollbar>
{{ agGridViewport }}
<ng-scrollbar>
but it pass element like a copy of real DOM object but I want pass this like a refence.
Now I got UI like a stack style:
[rendered real ag-grid-angular]
[rendered ng-scrollbar with his content]
But it isn't that I need. Also I got bad rendering with artifacts and even some components doesn't appear. Now I want to try use Renderer2 for putting ng-scrollbar element between two DOM elements in tree(.ag-body-viewport-wrapper and .ag-body-viewport). But I think it's very bad idea because Renderer2 doesn't have methods for putting elements between DOM elements in tree and my code will be very unlify and complicated :( It's must be like injection.
No, I can not do injection in DOM with Angular tools. It's bad idea do it and it is not possible now. AgGrid doesn't support customization with tools like ngx-scrollbar which using ng-content for wrapping components and other elements. May be better way using other tools which working by another way or using webkit customization which supports not all web browsers.
UPDATE
Also I try to use smooth-scrollbar. I managed to get better result. I bind him to element .ag-body-viewport. It works fine but it scrolling only content of grid without header be careful. smooth-scroll bar doesn't have options for horizontal and vertical scrollbar as a different units. I know how issue can be solve. Vertical scrollbar must be bind to .ag-body-viewport and horizaontal scrollbar must be bind to .ag-root. If your can find scrollbar which let you do it that you can solve this problem. May be I write special component for Angular in near future and then add link to this answer. If you do it faster you can add yourself link or you can add link to already existing packages.
I have found lots of ways to control a QtComboBox using style sheets, but not directly from code (well, you can use the setStyleSheet method).
I have a requirement to disable all widgets when a page is disabled, and I can accomplish that requirement. The problem is trying to make a QtComboBox look disabled (also a requirement).
Is there a way to change the QtComBox drop-down arrow to another image in code?
I have found that sometimes you have to implement an entire style sheet in Qt whenever you want to change one part of the widget.
Do I have to implement a disabled style sheet in code and use the setStyleSheet method?
And then, do I have to re-implement an enabled style sheet when the page is re-enabled?
It seems there should be something like: myComboBox->setDownArrowImage(url . . .);
Am I missing something?
Thanks.
Use pseudo states.
Stylesheet example:
QComboBox:enabled {color: red;}
QComboBox::down-arrow:enabled {image:url(:/images/downarrow.png);}
QComboBox::disabled {color: white;}
QComboBox::down-arrow:disabled {image:url(:/images/downarrowdisabled.png);}
How can i implement a Section View(like in IOS) in Windows8 ListView ?
I want to break down the Listview into different Sections.
Any Directions ?
ListViews have a property called groupDataSource that lets you define how the items are grouped. You might want to look at the Grid App template in Visual Studio, which has data already set up in this way. You can also take a look at this tutorial: http://msdn.microsoft.com/en-us/library/windows/apps/hh465464.aspx
If you want any more info, you will have to be a bit more specific with your line of questioning.
In my Netflix post on codefoster.com I tried to show grouping in its simplest form. When you have a JS array, you simply make a Binding.List out of it and then you just call createGrouped sending it two lambda functions telling it how to group. Then like #Paul said, you'll get those different sections automatically in your ListView. Hope that helps.
Currently, my anythingslider has too many slides to fit in the wrapper without wrapping some elements below the others. This should make sense to users of this plugin. I'd like to show/hide some of the invisible elements as the back/forward buttons are clicked. My problem so far is that the plugin is looking for elements that have been hidden after it's been initialized.
Is there a way to re-initialize the plugin so all slides are up-to-date on the fly?
I really hope this makes some sense!
Thanks.
This functionality was added in AnythingSlider version 1.5... there have been a few updates since ;)
Calling anythingSlider(); will re initialize the the slider. No need to specify the options. Just call $("#element").anythingSlider();