I am trying to install the below:
npm install bootstrap-material-design
I then added the below to my package.json
"dependencies": {
...
"bootstrap-material-design": "0.5.10"
}
So in angular2 using webpack, how do I import? The docs for the package say the below and the package was installed in node_modules/bootstrap-material-design/:
<!-- Bootstrap Material Design -->
<link rel="stylesheet" type="text/css" href="dist/css/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="dist/css/ripples.min.css">
So in the head do I include via the below:
<!-- Bootstrap Material Design -->
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.css">
<link rel="stylesheet" type="text/css" href="node_modules/bootstrap-material-design/dist/css/ripples.min.css">
Or will angular2 already include?
It's better you include in your main module file like in app.ts file:
// Just make sure you use the relative path here
import '../../node_modules/bootstrap-material-design/dist/css/bootstrap-material-design.css'
import '../../node_modules/bootstrap-material-design/dist/css/ripples.min.css'
// your component (example code below)
#Component({
selector: 'app',
templateUrl: 'app.template.html'
})
And that's it. Webpack will take care of the reset.
Edit:
If you have created the app using angular-cli/ng-cli then you can also include these stylesheets to angular-cli.json
Related
I'm a beginner in React and has been working with the CDN links so far, I decided to remove these links and install the dependencies as it is better to work with, so I have tried to install the dependencies as instructed in the official website with npm install, and did so in my project repository, and after importing from react and react-dom the JS script doesn't work at all, and the console shows no errors, I tried a lot of fixes (including changing the source from index.js to index.pack.js), I also tried installing react using package control of Sublime Text, but nothing worked.
I don't think it's a code problem, but here are the index.html and index.js files :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
</head>
<body>
<div id="root"></div>
<script src="js/index.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
//import React from 'react'
//import ReactDOM from 'react-dom'
const React = require("react");
const ReactDOM = require("react-dom");
const element = <h1 className="header">This is JSX</h1>
console.log(element)
ReactDOM.render(
element,
document.getElementById("root")
)
The css folder and files are all in the correct place and so is the index.js so it's not a path error, I think it's most likely a dependency error but it can be something else, does anyone have an idea on how to fix this, thanks in advance!
Sorry for the late reply as I have kinda solved the problem on the spot :D, indeed Create React App was the way to go, it builds the application nicely and it manages dependecies as well. Thanks for your answers !
Hello in my react js project I include <link> 's of blueprint.js library but browser does not recognize them. Instead I import them in index.js file then it works. Can someone briefly explain why browser does not recognize them?
index.html
<link rel="stylesheet" type="text/css" href="./src/index.css" />
<!-- add other blueprint-*.css files here -->
<link href="./node_modules/normalize.css/normalize.css" rel="stylesheet" />
<!-- blueprint-icons.css file must be included alongside blueprint.css! -->
<link href="./node_modules/#blueprintjs/icons/lib/css/blueprint-icons.css" rel="stylesheet" />
<link href="./node_modules/#blueprintjs/core/lib/css/blueprint.css" rel="stylesheet"/>
index.js
import 'normalize.css'
import '#blueprintjs/core/lib/css/blueprint.css'
import '#blueprintjs/icons/lib/css/blueprint-icons.css';
when i comment out of my import index.js web browser does not include links why?
node_modules won't exist when you build your project, so it is outside of scope. You would only be able to reference things from the index.html that are within the public folder or externally (like a CDN)
I am trying to use materialize-css in my React project. How can I set up materialize-css and use it's components with React ?
One can use https://github.com/react-materialize/react-materialize
npm install react-materialize
Add these to the default html page where you need Material Design.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="path/to/materialize.css">
</head>
<body>
<script src="path/to/materialize.js"></script>
<script src="path/to/your/bundle.js"></script>
</body>
</html>
Use the components.
import { Button, Card, Row, Col } from 'react-materialize';
Complete list and how to implement components are listed here: http://react-materialize.github.io
I've just added Froala to my Angularjs (1.5) project via bower install and it's breaking the unit tests I currently have setup. When I add 'froala' to the angular.module being defined in app.js it breaks the tests, but all of the tests pass when I remove it.
I have Froala configured in an app.js file:
angular.module('app', [ 'froala',....
I'm referencing the local/downloaded files in index.html
<link href="bower_components/froala-wysiwyg-editor/css/froala_editor.min.css" rel="stylesheet" type="text/css" />
<link href="bower_components/froala-wysiwyg-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="bower_components/froala-wysiwyg-editor/js/froala_editor.min.js"></script>
<script type="text/javascript" src="bower_components/froala-wysiwyg-editor/js/angular-froala.js"></script>
And this is the error I'm getting:
TypeError: undefined is not an object (evaluating 'ctrl.disableInput')
Here's the Karma configuration and an example test that's passing prior to adding froala.
Is there something in Froala that I need to configure in order to have passing tests?
It was a simple mistake on my part by loading angular-froala within the bower components folder. This part src="bower_components/froala-wysiwyg-editor/js/angular-froala.js" and including it within app.js angular.module('app', [ 'froala',..... I removed both of these references and only have this in the index:
<link href="bower_components/froala-wysiwyg-editor/css/froala_editor.min.css" rel="stylesheet" type="text/css" />.
<link href="bower_components/froala-wysiwyg-editor/css/froala_style.min.css" rel="stylesheet" type="text/css" />.
<script type="text/javascript" src="bower_components/froala-wysiwyg-editor/js/froala_editor.min.js"></script>.
I followed this previous stack overflow answer regarding integrating with angular and assumed I needed to include it, but it wasn't necessary.
I am currently working on a React single page application and I cannot figure out where and how to place the Bootstrap CDN in my project for my bootstrap to work.
Also if somebody could suggest how to npm install bootstrap for your project.
If you use create-react-app there is a file in public/index.html or let's say in your index html page which you first render use cdn there
like
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<title>React App</title>
</head>
CDN
<HTML>
<head>
<!-- YOU CDN -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>
<body></body>
</HTML>
npm
npm install bootstrap#3
require('bootstrap') will load all of Bootstrap's jQuery plugins onto the jQuery object. The bootstrap module itself does not export anything. You can manually load Bootstrap's jQuery plugins individually by loading the /js/*.js files under the package's top-level directory.
Bootstrap's package.json contains some additional metadata under the following keys:
less - path to Bootstrap's main Less source file
style - path to Bootstrap's non-minified CSS that's been precompiled using the default settings (no customization)
npm install --save bootstrap
after this import this in App.js
import 'bootstrap/dist/css/bootstrap.min.css';