I want to use Materialize CSS library along with Ionic app. Can I use it? Will it have any performance issues?
Is there any other library so that I can give a 'Material Design' feel to my app
You can use either Materializecss or Google Material Design. Either will work fine with Ionic. Both have plenty of documentation. Assuming you're using bower -
For Google MDL
bower install material-design-lite --save
then just include the css and js in your index.html file
<link href="lib/material-design-lite/material.min.css" rel="stylesheet">
<script src="lib/material-design-lite/material.min.js"></script>
For Materializecss
bower install materialize
then include the basic files in your index.html file.
<link href="lib/materialize/dist/css/materialize.min.css" rel="stylesheet">
<script src="lib/materialize/dist/js/materialize.min.js"></script>
You may have to change the directories to the correct path of your bower installs.
Documentation on both for referring to components, css, javascript.
Google MDL = https://getmdl.io/components/index.html
Materializecss = http://materializecss.com/
Related
I can't seem to find a way on how to use bootstrap locally in react without npm or yarn bootstrap installation or even without CDN, every tutorial I find on how to use bootstrap they don't explain using bootstrap locally.
Please I need steps on how I can achieve this thanks
So I don't know this for sure, so please correct me if I am wrong. I am just trying to help you to the best of my knowledge.
There are multiple ways.
The first way is to import the CSS in the app.js (or the start of the React app). For the CSS you should have a file called bootstrap.css that contains all the CSS for Bootstrap. import './bootstrap.css'.
The second way is to import it in the html file. If you add the the <link rel="stylesheet" type="text/css" href="bootstrap.css">.
I don't know if this is the way it should be done!
Is there any ReactJs library available which i can include in my website and start write react components, similar to jQuery, without using any extra libraries (i.e Node modules)
Add these scripts to your .html:
<script src="https://unpkg.com/react#15/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.js"></script>
Is there a way to achieve this? I use react.js in the front end only and want to keep it like this.
When you build your application via Yarn/npm, that's what basically you'd be doing. The system will bundle your assets and generates an HTML file. If you open the built index.html you should see your parsed React app in plain JS and HTML.
If you plan to put the build on a CDN, all you need to do is move the assets (JS and CSS) and the index.html wherever you want to host them. Ensure that <script> and <link> are pointing to the bundled assets within your index.html.
<script type="text/javascript" src="/static/js/your-bundle-main.js"></script>
<link href="/static/css/your-bundlemain.0a265734.css" rel="stylesheet">
You can use unpkg, is a fast, global content delivery network for everything on npm. Use it to quickly and easily load any file from any package using a URL like:
<script src="unpkg.com/react#15.3.1/dist/react.min.js"></script>
<script src="unpkg.com/react-dom#15.3.1/dist/react-dom.min.js"></script>
I'm trying to implement an example of iconPicker so the files which I should import are:
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script type="text/javascript" src="//rawgithub.com/justin-lau/ui-iconpicker/v0.1.4/dist/scripts/ui-iconpicker.min.js"></script>
I installed the component with bower
<script src="#routes.Assets.versioned("bower_components/angular/angular.min.js")" type="text/javascript"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.min.js"></script>
<script src="#routes.Assets.versioned("bower_components/ui-iconpicker/dist/scripts/ui-iconpicker.min.js")"></script>
the problem is when I try to change the cdn link to local one I can't found this bootstrap-tpls.min.js I found it in angular-bootstrap and it didn't work for me there is any difference?
Please Install angular bootstrap
bower install angular-bootstrap
Ref: angular ui bootstrap doc
Please see this line.
Note: do not install 'angular-ui-bootstrap'. A separate repository -
bootstrap-bower - hosts the compiled javascript file and bower.json In
above link.
angular-ui-bootstrap : https://github.com/angular-ui/bootstrap-bower
This repository contains required ui-bootstrap.js and ui-boostrap-tpls.js files. basically its bower repository to hold Angular UI Bootstrap.
we get this files from this command bower install ui-bootstrap
ui-bootstrap-tpls.js file contains ui-bootstrap.min.js + html templates.
angular-bootstrap : https://github.com/angular-ui/bootstrap.
This is main repository for the angular bootstrap.
Here you see this line in source <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls.js"></script> because this file contains all html + template code which used to show example of bootstrap in angular. So its reuse of ui-bootstrap-tpls.js.
I suggest please install bootstrap using bower install angular-bootstrap
and remove angular-ui-bootstrap folder.
Ref: Please see this link. It shows the difference clearly. https://stackoverflow.com/a/19820670/2681997
I hope this will clear your doubt.
Thanks
Bonus: Use this to Tool for installing bower dependencies that won't include entire repos in your project.
bower installer
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.