I'm looking to use some material design components such as <md-autocomplete>. However, this particular tag along with several others are not yet available through the official Angular 2 material design NPM
Is there any way to use them by specifying them as a normal class:
<div class="md-autocomplete">Content</div>
until the component is available in Angular2? If so should I include the material design CSS script in my index.html file?
Adding it as a calss will not help you much. You can always create your own component and assign any selector you want but you will still have to do all functionality yourself. Other option is to use some existing one, like ng2-auto-complete
Related
I am working on a Vue component that is going to be shared between two different platforms (Web/Mobile). I also want the component to have the same style/look on both platforms. Each platform is using a different CSS framework.
What is the best way to go about making the style/look the same? Without having two completely different components.
I can think of a few options
Having a prop to set the style
Two different templates and use a mixin
Similar to 1 but have a CSS module that can be toggled
Scope the style so it is not dependent on the platform css framework
I like the DataGrid from Clarity Design System. But I want just to use the DataGrid in one component. The other components shouldn't be affected.
I'm using Angular CLI for my project.
The DataGrid just works if I reference the CSS in the .angular-cli.json as follows:
"styles": [
"../node_modules/bootstrap-4-grid/css/grid.css",
"../node_modules/clarity-icons/clarity-icons.min.css"
]
The DataGrid doesn't work if I copy the styles directly to the componet's .css file.
How can my problem be solved?
Unfortunately, Clarity does not provide support for the use of just individual components, and you must include the full clarity-ui styles in your styles array for it to work. Including it inside of the component styles will cause issues because of encapsulation mode in Angular and how it will process the CSS in ways that the Datagrid will not understand.
Clarity is intentionally created as a full design system, and we don't bundle any of the components individually for consumption. There are many reasons, but the major one is that to ensure proper and consistent UX Clarity expects to be the foundation of your application design. The best suggestion I can make is to let Clarity define your design instead of Bootstrap.
UPDATE: The project on NPM is now at #clr/ui instead of clarity-ui.
I'm working on a web application which is using Materialize as a front-end framework along with Kendo UI for the grid component.
I'm hitting problems in cases where both Kendo UI and Materialize have styles for the same element - for example they both override the styling on check boxes - this results in a broken layout due to the clash.
One option I realize is to pick either Materialize or Kendo UI and drop the other... however I would like to avoid this if possible as they in the most part have complemented each others weaknesses well.
If it was simply one element here or there putting specific overrides in would be an option however with the scale of the two frameworks this would be a maintenance nightmare as when one changed the overrides would possibly have to be refactored.
Are there any ways to solve this issue that I am missing?
One way to workaround such a clash is to build your MaterializeCSS to include only the parts you so need for your project.
For instance, if you do not need the buttons styling of MaterializeCSS, you could simply, via sass, compile the materialize.scss and cherry pick buttons out of the file.
If going down the path of building your custom .css of Materialize is a long short for you, you can try using materialize.khophi.co (Disclaimer: I built it).
Find more about how to customize your MaterializeCSS: http://materializecss.com/getting-started.html
I know it's usually suggested not to duplicate code, and you want to try steering away from overrides, but would it be possible to find the section of css you like (i.e. select box from materialize) and copy that in to a new custom css file, renaming the selector so you can use it seperately from Materialize/Kendo UI?
You can manually edit the stylesheet of eighter party. Take the non-minified CSS, and prepend every base path with a short prefix:
.card {
....
}
becomes
.mat.card {
....
}
That way, for every materialize style, you use .mat before anything. Or, if you mainly use materialize, do the same thing for Kendo UI.
This is a lot of pain, but would solve your issue.
As I become more familiar with Angular, and the vast number of modules out there for making an application really shine, I am also becoming overwhelmed at understanding the basic logic of CSS overloading, and how to manage the imports to get the desired behavior.
For instance, I have pulled the following libraries into my Angular application; Boostrap, Bootcards, boostrap-select, font-awesome, and some custom bootstrap-wizard libraries for a modal tab-based wizard.
All of these libraries require being defined in the index.html page of my Angular app (both the CSS files the JS files). How do you manage the desired behaviors so that one components styles don't override another components styles? What are the best practices around bringing in multiple components and using them in an Angular app, without negatively affecting the applications previous behaviors?
You have 3 choices:
Place more important CSS files AFTER less important ones so the more important override when both have same attribute names.
Manually go in stylesheet and change attribute names.
Instead of including the stylesheet in index, include it in your html file
When using Flash Builder to create a new component Skin based on an existing Skin, one has the option to include Actionscript styling code or not. Wouldn't this code always be necessary?
Here is an example of two people, both of whom have skinned the spark Panel.
With styling code:
http://blog.flexexamples.com/2009/10/19/repositioning-the-control-bar-on-a-spark-panel-container-in-flex-4/
Without styling code:
http://www.popamihai.com/2010/11/flex/skinning-flex-4-components-skinning-the-spark-panel-component/
But they both seem to run fine. How can this be?
The styling code still gets applied due to the fact that you're extending a class.
You should add the styling code when you intend to change it.