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.
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 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.
I have just started messing with Telerik Reporting in an MVC C# application.
Since I need to create a dozen of reports, I was asked to create an external style to be aplied to all of them.
I cannot understand how it works, how to set the rules...
Eg I can create a style to affect all HtmlTextBoxes BUT I am trying to create a rule to have all the HtmlTextBoxes contained in the Group Header having (lets say) blue Background, Bold Segoi Font and I cannot.
Any help appreciated
Styles created in a Telerik Report can be exported and then used in other reports.
You can store one or more Styles in an exported file.
The exported information is stored in an XML file.
So you can create your style rules using the Style context menu Right-clicking on the report object.
Style exporting and reusing style sheets
Use various Style Selectors to define how a style will be applied globally to items in a report. Each Style Rule that you create (either in code or using the StyleRule Collection Editor) must be created as one of the basic four selector.
Learn more about style selector.. For me the best one is the "StyleSelector" that behave like a Css Class.
Nb:
You can manage and bind your extenal StyleSheet in code behind.
Or in your calling application.
this.StyleSheet.Clear();
this.ExternalStyleSheets.Add(
new Telerik.Reporting.Drawing.ExternalStyleSheet("baseThemeRpt.xml"));
It can be done using the Descendant Type
Using Cassette.net, MVC 3, Razor, C#, relative locations, and shared layouts, how do you get references in the right order without modifying the original javascript files?
In the shared layout, I reference jQuery like this:
Bundles.Reference("~/Scripts/jquery-1.7.2.js");
Then in the view I add another reference:
Bundles.Reference("~/Scripts/myScript.js");
myScript depends on jQuery, yet Cassette references myScript in front of jQuery:
<script src="/_cassette/asset/Scripts/js/myScript.js?...
<script src="/_cassette/asset/Scripts/jquery-1.7.2.js?...
I find it odd that scripts referenced in child pages render before parent page scripts.
I see you can add notations to your scripts, e.g., /// <reference path="other.js" /> but I really don't want to modify javascript code to include this.
Update:
I added
Bundles.Reference("~/Scripts/jquery-1.7.2.js","head")
Bundles.Reference("~/Scripts/js/myScript.js","body")
which at least puts my script after the jQuery script using #Bundles.RenderScripts("head"); and #Bundles.RenderScripts("body"); within the appropriate tags. It seems to keep the scripts in the order added. I'd still like to know how to custom order these scripts with some type of Bundle.config or how to get parent pages to order scripts before child pages using Shared Layouts.
Use a bundle descriptor file. You can then force the file order.
I have a basic app I'm creating with a Top Nav button Bar a bottom button Bar and a Viewstack for content in the middle. The catch is the content, and skins are completely dynamic based on XML I'm loading. Therefore I have to create the ViewStack dynamically (because I don't know how many children it could have) and the same goes for the top and bottom Nav button bars. Now, I could handle this very neatly with Flex 3 , however I want to to do this with Flex 4 and would like to take advantage of its new logic and skinning separation architecture. I have seen many tutorials on this as far as components known at compile time but not for custom class creation. Can anyone list some good tutorials? thx - Mike
I could not find any tutorials , so I figured I would create my components dynamically as I would in Flex 3, the only difference would be that if I have a component I need to skin, in my case a button, and I'm creating it dynamically I would use :
btn_nav.setStyle("skinClass",skins.NavMainToggleButtonSkin);
Where the host component is : [HostComponent("spark.components.ToggleButton")]
I also am using custom Spark Viewstack that a developer wrote:
spark Viewstack
Also this article helped me with creating a custom component and connecting wih a skin class and how it relates to the component lifecycle:
http://flexguruin.wordpress.com/2010/12/08/flex-4-spark-component-life-cycle/
-Mike