• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

mseemann/angular2-mdl: Angular 2 - 14 components, directives and styles based on ...

原作者: [db:作者] 来自: 网络 收藏 邀请

开源软件名称(OpenSource Name):

mseemann/angular2-mdl

开源软件地址(OpenSource Url):

https://github.com/mseemann/angular2-mdl

开源编程语言(OpenSource Language):

TypeScript 57.0%

开源软件介绍(OpenSource Introduction):

Angular 14 components, directives and styles based on material design lite https://getmdl.io (v: 1.3.0). This package assumes that you are building an Angular app with TypeScript. Angular CLI makes it even easier but isn't required.

CircleCI npm version Downloads Coverage Status Code Climate FOSSA Status

Status of the npm package version 14 (mdl version 1.3.0; angular 14)

  • Badges
  • Buttons
  • Cards
  • Chips
  • Dialogs (imperative and declarative)
  • Icons
  • Loading
  • Shadow
  • Toggle (Checkbox, Radio, Icon Toggle, Switch)
  • Lists
  • Slider
  • Snackbar
  • Table
  • Tooltips
  • Menu
  • Layout (standard, scroll, waterfall, tabs)
  • Tabs
  • Textfields (multiline, expandable)

Installation

npm install @angular-mdl/core --save

css from material-design-lite

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.

How to use the scss files from material-design-lite

This package includes the scss files from material-design-lite. With these files you are able to change the colors and other 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. For example with webpack you can use the special ~@angular-mdl/core syntax used above. Or you can configure the includePaths:

sassLoader: {
  includePaths: [util.root('node_modules', '@angular-mdl/core', 'scss')]
}

@angular-mdl/*

Additional components for @angular-mdl/core that are not part of material design lite

  • current angular version: 13
  • current angular-mdl version: 13

The components

Name Provided By Description npm documentation status demo
datepicker mseemann a simple date picker npm version readme experimental demo
expansion-panel abdulqadir93 organise arbitrary content in an expansion panel npm version readme experimental demo
fab-menu leojpod a fab menu component npm version readme experimental demo
popover tb popover with arbitrary content npm version readme experimental demo
select tb a select box npm version readme experimental demo

These components support AOT and TreeShaking!

How to use the components

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 build pipeline to include the scss files from each component you want to use. This makes it possible to configure the theming for 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'
	]
}

Development

  • npm start - local dev server
  • npm build - build a production release
  • npm test - run the unit tests

The coverage report is stored under: coverage/coverage-remap/index.html

Contributing

Every contribution is welcome. Please checkout the CONTRIBUTION.md file.

Remarks

And if you would like to see a real world app that uses this package have a look at https://www.yovelino.de/apps/tour-planner/.

License

FOSSA Status




鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
aashrai/Skittles: Material design FAB menu made easy发布时间:2022-08-17
下一篇:
flute/skywalker: A material design theme for ghost blog 发布时间:2022-08-17
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap