Angular 12 components, directives and styles based on material design lite https://getmdl.io (v: 1.3.0). This packageassumes that you are building an Angular app with TypeScript. Angular CLI makes it even easier but isn't required.
npm install @angular-mdl/core --save
You may include the material-design-lite css in your html and you're done!
<link rel="stylesheet" href="https://code.getmdl.io/1.1.3/material.indigo-pink.min.css"/>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
Under http://mseemann.io/angular2-mdl/theme you'll find a customizing tool to change the theme colors.
This package includes the scss files from material-design-lite. With these files you are able to change the colors andother variables in your own scss files:
@import "~@angular-mdl/core/scss/color-definitions";
$color-primary: $palette-blue-500;
$color-primary-dark: $palette-blue-700;
$color-accent: $palette-amber-A200;
$color-primary-contrast: $color-dark-contrast;
$color-accent-contrast: $color-dark-contrast;
@import "~@angular-mdl/core/scss/material-design-lite";
To make this working you need to find out the way how you could tell your build system where the scss is located. Forexample with webpack you can use the special ~@angular-mdl/core
syntax used above. Or you can configure theincludePaths:
sassLoader: {
includePaths: [util.root('node_modules', '@angular-mdl/core', 'scss')]
}
Additional components for @angular-mdl/core that are not part of material design lite
Name | Provided By | Description | npm | documentation | status | demo |
---|---|---|---|---|---|---|
datepicker | mseemann | a simple date picker | readme | experimental | demo | |
expansion-panel | abdulqadir93 | organise arbitrary content in an expansion panel | readme | experimental | demo | |
fab-menu | leojpod | a fab menu component | readme | experimental | demo | |
popover | tb | popover with arbitrary content | readme | experimental | demo | |
select | tb | a select box | readme | experimental | demo |
These components support AOT and TreeShaking!
Install the components via npm. Please check out the individual readme for each component from the table above.
Starting with version 0.2.0 the components each have no css styles imported by default. You need to setup your buildpipeline to include the scss files from each component you want to use. This makes it possible to configure the themingfor the components you want to use.
If you are using webpack you may use the special webpack import syntax for node_modules:
@import '~@angular-mdl/core/scss/color-definitions';
$color-primary: $palette-blue-500;
$color-primary-dark: $palette-blue-700;
$color-accent: $palette-amber-A200;
$color-primary-contrast: $color-dark-contrast;
$color-accent-contrast: $color-dark-contrast;
@import '~@angular-mdl/core/src/scss-mdl/material-design-lite';
@import '~@angular-mdl/popover/popover';
@import '~@angular-mdl/select/select';
Another way is to include each component folder in the search path for your scss preprocessor. An example for webpack:
sassLoader: {
includePaths: [
'node_modules/@angular-mdl/popover',
'node_modules/@angular-mdl/select'
]
}
The coverage report is stored under: coverage/coverage-remap/index.html
Every contribution is welcome. Please checkoutthe CONTRIBUTION.md file.
And if you would like to see a real world app that uses this package have a lookat https://www.yovelino.de/apps/tour-planner/.
第一节:初识Angular-CLI 第二节:登录组件的构建 第三节:建立一个待办事项应用 第四节:进化!模块化你的应用 第五节:多用户版本的待办事项应用 第六节:使用第三方样式库及模块优化用 第七节:给组件带来活力 Rx--隐藏在 Angular 中利剑 Redux你的 Angular 应用 第八节:查缺补漏大合集(上) 第九节:查缺补漏大合集(下) 第六节:使用第三方样式库及模块优化 生产环境初
第一节:初识Angular-CLI 第二节:登录组件的构建 第三节:建立一个待办事项应用 第四节:进化!模块化你的应用 第五节:多用户版本的待办事项应用 第六节:使用第三方样式库及模块优化用 第七节:给组件带来活力 Rx--隐藏在 Angular 中的利剑 Redux你的 Angular 应用 第八节:查缺补漏大合集(上) 第九节:查缺补漏大合集(下) 第七章:给组件带来活力 这节我们的主题是“专
Angular2 资源链接 Material Desgin 2 github https://github.com/Promact/md2 DEMO http://code.promactinfo.com/md2/#/ DEMO SRC https://github.com/Promact/md2/tree/master/src/demo-app Material Desgin Lite
问题内容: 我正在使用angular2和gulp开发一个节点应用程序。我编写了一个组件文件login.ts,如下所示: 我的bootstrap.ts文件是: 但是当我编译这些文件时,出现以下错误: 这是我的tsconfig.json: 我已经使用以下命令安装了angular2的类型: 请帮助纠正错误。 问题答案: @simon错误说的是输入错误。但是对于其他进口商品,我已经发布了此答案,可能对其他
Angular2 (Beta) -> Angular4 开发语言:ECMAScript6 的标准已经完成。浏览器可以支持模块、类、lambda 表达式、generator 等新特性。 开发模式:Web组件将很快实现。 移动化:针对移动优化,如:缓存预编译、触控支持。 ES6工具链 Angular2是面向未来的技术,浏览器需要支持ES6+,由于目前浏览器尚未实现ES6,需要使用垫片。 angular
jackblog-angular2 Jackblog 是使用 Node.js + MongoDB + 其它客户端框架开发的个人博客系统,前后端分离,仿简书模板. 服务端有: express 版 , koa 版 客户端有: angular1.x 版 , angular2.x 版 , react 版 , vue 版 移动端有: react native 版, ionic2.0 版 此为客户端angul
angular2-cookie DEPRECATED => ngx-cookie This library is deprecated and please use ngx-cookie instead. Implementation of Angular 1.x $cookies service to Angular 2 v1.2.6 Please use >=1.2.4 for Angular
angular 2+ Spring Boot Integration This example shows how to do a paginated table with Angular and Spring Boot (RestController ) Installation The Back End You'll need Maven 3+ and Java 8 The Front End
Angular2 Tutorial This repository is an example application for angular2 tutorial. Demo Ahead-of-time compilation Lazy Loading Preloading CSS in JS by using Aphrodite Hot module reload Getting Started