Vuetify docs define the sheet as follows:
The v-sheet is designed to power other paper components within Vuetify. It is meant to be used as a low level component.
card according to docs is this:
The v-card component is a versatile component that can be used for anything from a panel to a static image.
To me (not JS person) they seem very similar. Are they interchangeable? When to use one but not the other? Can you illustrate with examples?
Your question to me sounds little bit like "What is a difference between html div and section tags?"
Do you get me? I it is semantic thing.
"Low level" components tells me that you can use v-sheet in v-card but you shouldn't do the opposite.
Like putting span in p is ok, but doing the other way is a wrong practice.
Hope that helps you ;-)
VSheet and VCard will look quite similar and is quite similar because like most other component from vuetify VCard is made from the VSheet base.
A good use case for using VSheet is for creating your own custom component. Say you not happy with the look and feel of VCard and you want to create your own variant you would use VSheet as your base.
v-card has slots for title, subtitle, text, and actions.
v-card uses v-sheet and adds these areas.
If you do not need those areas, use v-sheet, as v-card adds extra overhead with extra HTML content and CSS styling.
Related
I want to build the simplest dark/light toggler button in react, there is. So far I have made a toggler component and gave it a state with
this.state = {style: './App.css'}
and 2 functions one is setting the this.state.style to ./darkmode.css the other one is back to ./App.css I binded them to 2 buttons. My question is, is there any way for using something like this: import 'this.state.style' instead of the import ./App.css in the App.js file? At least my way of thinking got me here, as this looked to be the easiest to do in order to change the stylesheet of the page. There is no big deal in the css files only smooth camera and bg color.
I don't think you can do that, but on the JS side you can change the class of the body element when pressing the button with .TogggleClass(). On the CSS side you just change the css.
the most suitable solution for making simple dark / light mode is by using Context API and useContext Hook it is easier, simpler and more readable than using any other solutions, you can make a whole new themes with this solution. so give it a try and you will definitely enjoy with the result and the experiment.
I'm looking to find best practices for providing developers the ability to style elements that exist within my React shared component.
For instance, I have a drop down and I wanted the developers to be able to select a predefined theme that would enable then to select a highlight color, font size, font family for the list element that exists within my drop down component. I created enums for the each of the default themes and provided a way to allow devs to define the theme object and add css to the properties that sat behind that enum. I then injected the style into the functional component.
However, I quickly realized that if I didn't provide a way for the developer to lets say adjust a facet of an element outside of the scope of the theme interface such as the font weight, the developer would not be able to style it and i'd have to go in and add it in and test that it works with all the other style combinations which became tedious and a lot of overhead.
I was wondering if there is an implementation whereby I provide refs to the elements in the component and provide and open-ended CSSProperties style prop that would allow the dev to style to their hearts content? Is there a best practice to do this? Please provide a short example if possible?
One caveat is that frameworks such as Next JS will encode the css modules and make it difficult to allow the user to provide css that'll manipulate the component due to the css element encoding or appended id's. This is why I thought the refs approach might work.
The best solution for you would be using :part . This allows styling through the shadow dom boundary of the parts of your component that you want.
See:
mozilla documentation
an explanation by the person who proposed this: explainer
and some other documentation
I have this problem:
I want the calendar icon to render a little smaller, inside the input and equidistant from the three borders.
I could achieve it by reducing the icon's padding and also its size, using CSS.
The problem is that I have no idea on how to target it.
This is the DateInput control by #atanasster for Grommet 2, the UI framework by HP.
It looks like this because I changed its size, my version is shallower than the original.
As these are styled-components I think there might be a way to style them, but I don't know how to target the component's children, its internal HTML nodes.
Repeatedly reading the docs for hours didn't help.
I'd appreciate very much some wisdom on styling, or the confirmation that what I want to do is not possible.
The example can be seen here: https://stackblitz.com/edit/dateinputstyled
I've been loving checking out styled-components, but getting a bit stuck with the concept of extracting everything out into a component, and how to tweak styles for a particular use case. For example:
<Flex>
<MyStyledTitle>Hello I am a Title</MyStyledTitle>
<MyStyledBodyText>blah</MyStyledBodyText>
</Flex>
Let's say that I wanted to make the following customisations for this use case:
styled title grey (subdued text colour),
the body text to have a right margin of 100px (don't ask why).
The styled-components way, the first part could be done like:
<MyStyledTitle colorTint='subdued' />
or even
<MyStyledTitle>
<SubduedText>MyTitle</SubduedText>
</MyStyledTitle>
Perhaps using a prop for title that lets you configure it to use subdued text or ANOTHER hild component that defines the grey text..
But what about for the second option...
<MyStyledBodyText style={{paddingRight: 100}} />
Inline style? Use a Grid or layout component around it?
At which point does something become a specific styled-component and if not, then how does one customise smaller style changes?
While i really like this idea of removing the mapping between component + class name, I guess i'm feeling a bit torn between the classical idea of having a 'style sheet' file that can contain all the classes and modifier css, then using a presenter to choose between the combinations of css classes.
I might be missing something here, but just keen to see some bigger examples of styled components in practice. Any links / tips would be greatly appreciated!
We've been using styled-components in our project extensively. Few basic patterns/conventions we use are
Components created using StyledComponents are not used across React Components. Under extreme scenarios, we pull them into external files and export.
DIV is the most extensively used styled-component (styled.div). (Ofcourse we do use other html elements like button, table td etc., but styled explicitly).
Different styles for the same HTML element (or) React Component are declared explicitly as different styles. (If you refer to FAQ section of the styled-components docs, you might notice these - https://github.com/styled-components/styled-components/blob/master/docs/faq.md)
Overall to answer your question, we have moved away from the classical stylesheet and as well thinking about combining multiple styles. It has worked well, except that looking up on unit tests is a bit painful.
Thanks
I'm trying to create a user experience that looks like this:
Basically, there is a <span> of non-editable text followed by a textarea/input and some other non-editable <span>s. A simple textarea/input poses no problem when the length of the gap is short, but when it's long, the layout gets pretty awkward. I've looked into contentEditable, but I'm not sure if it's what I need (I've also read several posts suggesting it's evil).
Do I have any other options?
Perhaps the contentEditable property can help you. Have a look here https://www.w3schools.com/JSREF/prop_html_contenteditable.asp
There is a tipical example
https://www.w3schools.com/JSREF/tryit.asp?filename=try_dom_body_contenteditable
You may switch on an editable mode for a span or inline div, for instance.
It is not possible to have an input as you're suggesting.
If you are having an issue with the layout at different sizes, perhaps look into media queries with CSS, which will allow you to alter the layout at different viewport sizes.
It might be easier for you to use a framework like bootstrap to help you layout your web page, although in my opinion frameworks like bootstrap can start to interfere with a custom design, but this will only be a problem when you are a little more experienced.