I am using angular material design for giving responsive design to my AngularJS app. I am using material design icons which I install using:
bower install material-design-icons
Then I declare the css as CDN link which is:
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
I am using the icons by:
<i class="material-icons md-36 md-dark">person</i>
My problem is that there is no way to include css from bower_components. I want to replace CDN source to css with local source from bower_components. But I don't see any css file downloaded in my bower_components.
This is how my bower_components/material-design-icons directory look like:
I followed instructions given in Material icons guide, but couldn't figure out about including CSS from bower_components.
In your materil-design-icons folder you have the iconfont folder, which contains your required CSS files.
There are 2 types of material design icons .... font icons and svg icons
The markup you have shown is for font icons
The bower package for the icon fonts is material-design-iconfont
Try bower install material-design-iconfont ---save
If I understood your question, you're trying to use material design on your web app. the package material-design-icons is just the icons info.
I believe that, to achieve what you're looking for, you should get the bower google package material design lite info, they also provide a set of templates
There's also a bootstrap material design.
Related
I am trying to customize the theme when using Semantic-UI-React, there are detailed instructions on how to customize themes in Semantic-UI, like we can override variables to change their styles.
But I didn't find any way to customize themes with Semantic-UI-React, since there is no semantic/src/themes and semantic/src/site folders for us to make changes, what comes with Semantic-UI-React is just the default CSS file (the file we import in our index.js file "semantic-ui-css/semantic.min.css").
Is there any way we can customize the theme in Semantic-UI-React? Thanks in advance!
This link may also help in addition to the theming page on the docs site.
https://jsramblings.com/how-to-use-semantic-ui-with-a-custom-theme-in-your-cra-app/
It has a setup script after you run
npm install --save-dev semantic-ui
Yes there is a way to customize themes and create your own
https://react.semantic-ui.com/theming/
Basically just follow instructions from the docs link, install semantic-ui-less, which are not compiled Less files for the Semantic-ui CSS, craco-less which is just a path plugin for CRA configured Webpack so your Less compiler can find files properly without ejecting your CRA, move the files to created folder, modify theme.config, start app and you are ready to customize your own theme, although I didn't find some kind of API for variables on Semantic-ui docs, so I had to browse semantic-ui-less package files for them.
One problem I encountered was that I tried changing the theme for all components in theme.config and it was throwing errors about missing fonts and variables. Don't do this, it's not gonna work, check the Semantic-ui docs about theming, there is a note about it
Themes are per component, so although, for example, material themes are available for menu, button, and site, changing all values to "material" will produce an error for components which are not included in that theme.
https://semantic-ui.com/usage/theming.html#browsing-for-themes
On the telerik site, I found the page
https://docs.telerik.com/kendo-ui/intro/installation/cdn-service#accessing-the-cdn
which mentions the CDN url
http://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js
However, that file doesn't have the definitions for the React components Grid and GridCell.
This even though these definitions are in the NPM package #progress/kendo-react-grid.
Is there some other CDN url that gives me the .js file for Kendo UI for React?
Alternatively, if that file is not available from a CDN, is there a single file with all Kendo UI for React code that I can serve from my own server?
I have to load Kendo UI for React using a separate script tag. I can't use webpack or browserify to pack node modules.
The kendo.all.min.js is the jquery suite.
The kendo react grid is here:
https://unpkg.com/#progress/kendo-react-grid#1.3.0/dist/cdn/js/kendo-react-grid.js
It is per-package, and there is no something like all.js at-least at this point in time.
The best public CDN is jsDelivr: https://www.jsdelivr.com/
It can serve up files and bundles directly for any NPM package, Github repo, or Wordpress plugin. You can even combine several files together into a single download.
Here's the package for Kendo UI React Grid: https://www.jsdelivr.com/package/npm/#progress/kendo-react-grid
Download the file you need there or add it to the "selected files" on the right to build your own custom script bundle.
I am using Semantic UI lib for react
https://react.semantic-ui.com/introduction.
and create-react-app boilerplate
https://github.com/facebook/create-react-app.
My app requires RTL support especially for the Step component.
while researching for a solution i found that semantic ui have a config file semantic.json where i can define RTL but i can't warp the whole thing together.
does anyone have any recommendation or best practice for that?
you can use this
.ui * {
direction: rtl;
text-align: right;
}
The RTL support is a function of the semantic-ui CSS styles and should not have anything to do with semantic-ui-react. If you compile your own styles using the build tools in semantic-ui then use those styles in your project, they will work.
If you don't want to compile your own RTL styles, I believe this CDN is hosting a compiled RTL version of the CSS:
http://rtlcss.com/cdn/css-frameworks/semantic-ui/
If you want to use semantic-ui in reactjs in RTL language such (Persian/Arabic), you can follow below steps.
With cdn
First install semantic-ui for reactjs:
npm i semantic-ui-react
Then install semantic-ui css:
npm i semantic-ui-css
Now include semantic-ui rtl in index.html (just css)
Semantic UI RTL
<link
rel="stylesheet"
href="https://cdn.rtlcss.com/semantic-ui/2.4.1/semantic.rtl.min.css"
integrity="sha384-yXUIpeQfH3cuk6u6Mwu8uyJXB2R3UOLvcha1343UCMA2TA7lQ14BFmrudI6LAP8A"
crossorigin="anonymous">
Without cdn (Recommended)
If you don't want use cdn, just download css file go to this path:
node_modules/semanti-ui-css/
Put this css here, where semantic.css is, then include this:
import 'semantic-ui-css/semantic.rtl.min.css';
This method tested and already work fine, if anyone had issue, feel free to comment and I'll respond.
Creating an app with the angular-cli, if I link the Material theme from my index.html (following instructions from https://getmdl.io/started/):
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.deep_purple-amber.min.css">
The complete code is in a github repo on linked-theme-bad branch where the components are not correctly styled with the theme:
However, if I follow the exact instructions in the angular-cli doc to include Angular Material and import the style in styles.scss:
#import '~#angular/material/prebuilt-themes/deeppurple-amber.css';
The complete code on basic-theme-works branch) where the components appear correctly:
My understanding is that the import merges into a single stylesheet and the link in the HTML page will make a separate request for the style theme. The question is why doesn't the linked style sheet approach work.
By the way, I'm running the app with ng serve but this is an isolated example from another app which also seemed to fail in the same way with files that were built with ng build.
You're importing the CSS file from the wrong source (material-design-lite). (and by the way, you're also looking at the wrong documentation. See the link below for the correct docs)
From material.angular.io:
Alternatively, you can just reference the file directly. This would look something like:
<link href="node_modules/#angular/material/prebuilt-themes/indigo-pink.css" rel="stylesheet">
More Information on using a prebuilt theme
I am trying an Angular app project with the Google Angular Material library.
Added #master branch via Bower as directed. Linked the CSS and JS fils from Bower Components to my index page as directed.
Works as expected, except things like dialogs have SVG icons, which are defined in the html an pathed as so:
<md-icon md-svg-src="img/icons/ic_close_24px.svg" aria-label="Close dialog"></md-icon>
Which is not in my project nor the Bower Components folder...
And therefore gives me a 404:
How should i configure the project to get all the images as expected? I'd create that img/icons path if I knew where to get all possible icons...
OK, I have added this to my app.js:
angular.module('app').config(function($mdIconProvider) {
// Configure URLs for icons specified by [set:]id.
$mdIconProvider
.defaultIconSet('bower_components/material-design-icons');
});
But still a 404... the bower download is like 200 mb of icons... do I need ot list each icon I want to link? As in .icon("menu", "./assets/svg/menu.svg", 24)
I did have the same problem and I was not able to find a proper answer.
After some research, I've finally found something !
https://github.com/angular/material/issues/1668#issuecomment-156368247
As "ranbuch" said, once you've loaded the font Material Icons (either from a CDN or locally), you can just use this directive :
<md-icon aria-label="Menu" class="material-icons">menu</md-icon> and replace menu by the name of the icon you're looking for.
This way, it allows you to skip the long listing of every svg.
PS : There's also a good stackoverflow answer here.
Copy all the selected svg icons you need to images/icons folder inside your application and then use them as below :
<md-icon md-svg-src="images/icons/leftArrow.svg"
ng-click="previous()" class="icon-color">
</md-icon>
If you are planning to use lots of icons, use css font icons. One css file will load all your icons, instead of multiple svg links.
Check section 1 here of material icons guide