I have a huge complicated file, I don't want to go to each line and add :global(.......). Is it possible to mark the whole file global?
I think you need to add :global on each class to say that you are referring to the global instance of it. There is no other way =/
But if you need to override a lot of global classes, it probably means that the application CSS structure should be refactored or your components should be different.
If you are using React, you can try to do similar to Material-UI: https://v4.mui.com/customization/components/#overriding-styles-with-classes
Your component can receive a prop classes, that would receive an object with the CSS classes of your parent component module and apply it internally at the desired specific part of it (root, label, and so on).
So, your parent component can pass the local CSS class as prop to the child component, without needing to override any global CSS.
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 am using EditorTemplates to style all my input fields. Works like a charm, however now I want two themes of EditorTemplates, one for normal forms, and then one for my wizard forms.
I am already using an overloaded Html.BeginWizardForm() around those Html.EditorFor - but how do I make the MVC logic react on being inside Html.BeginWizardForm() ?
EditorTemplates are designed to be somewhat global. You can override them, though, just like any other view, because they are just views. For example, assuming you have something like Views\Shared\EditorTemplates\String.cshtml, you can then create a another view at Views\Foo\EditorTemplates\String.cshtml, and for any action called from FooController, the latter editor template will be used instead of the one from Shared. You might be able to make this work in your scenario if the wizard form is used in a specific controller or area context.
Short of that, though, there's no way to have this occur automatically. Some manual options still exist, though.
You can decorate the properties of the view model used within the context of the wizard with UIHint attributes. For example, assuming the same shared editor template above, you could do something like:
[UIHint("WizardString")]
public string Foo { get; set; }
That would cause it to look for Views\Shared\EditorTemplates\WizardString.cshtml instead.
You can pass the editor template to use in the call to EditorFor:
#Html.EditorFor(m => m.Foo, "WizardString")
All that said, the biggest problem here is that you seem to be violating a pretty core principal of good web design. HTML is about structure, not presentation. CSS is for presentation. As a result, if you want something to look different in a certain context, the correct approach is to apply different CSS. If things are designed well, your HTML shouldn't really have to change.
It seems is as stated by Chris Pratt not possible to have multiple EditorTemplates.
I however found a workaround by extending the MvcForm and created a WizardForm which adds a value to the ViewContext (in my case "wizardContext" => true) and on disposing setting wizardContext => false.
This allows me in the EditorTemplates to add a check for if I am inside or outside the wizardContext, which will propagate through the nested EditorFor, and in this way allow me to have different themes, without having to be specific in EditorFor.
I'm writing some simple tests for my React components using TestUtils and I'm finding that both the TestUtils.FindRenderedDOMComponentWithClass and TestUtils.FindRenderedDOMComponentWithTag methods are pretty limiting. I'd like to find a component using the typical CSS selector (i.e. tag.class [attr]) but it doesn't seem like this is an option.
Is there a simple way to find an element with a specific attribute? If not are there any useful tools for finding components apart from TestUtils?
I find it useful to simply use the browser's Element.querySelector()/querySelectorAll() method on DOM elements.
You can just call for example like this:
var domElement = FindRenderedDOMComponentWithClass('myClass');
var firstTextInput = domElement.querySelector('input[type="text"]');
React.TestUtils does not offer component searches with CSS selectors so I went with a lightweight extension of the base TestUtils class called react-testutils-addition. It offeres a find() method which parses the CSS selector style input and uses TestUtils.findAllInRenderedTree to find the component.
I have some reusable HTML snippets that I want to 'include' in a number of web2py views.
Using components with LOAD means having to write separate controller functions which need to load their own data.
Is there a way to:
Reuse dumb (no data) html snippets across views?
Reuse sub-views that would inherit the variables of the parent view, so that they can be inserted without calling controller functions and reloading data?
Reuse dumb (no data) html snippets across views?
You can use the {{include}} directive to include any view inside any other view. If you have /views/snippets/my_snippet.html, just do:
{{include 'snippets/my_snippet.html'}}
Reuse sub-views that would inherit the variables of the parent view, so that they can be inserted without calling controller functions and reloading data?
Views included as above will have access to the variables returned by the controller and any variables defined in the parent view prior to the include (as well as global variables defined in the models, just like any view).
I'm wondering: Is it possible to build the transitions mxml outside the mxml component they are meant to be used in?
For example, like how the Script tag can have a source = property.
I'd like to be able to keep the component mxml nice and tidy but also keep the transitions declared via mxml.