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

DannyMoerkerke/material-webcomponents: Material Design implemented in Web Compon ...

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

开源软件名称(OpenSource Name):

DannyMoerkerke/material-webcomponents

开源软件地址(OpenSource Url):

https://github.com/DannyMoerkerke/material-webcomponents

开源编程语言(OpenSource Language):

JavaScript 96.5%

开源软件介绍(OpenSource Introduction):

Material Web Components

Material Design implemented in Web Components (Custom Elements v1) https://dannymoerkerke.github.io/material-webcomponents/

Getting started

To install Material Web Components run:

npm install @dannymoerkerke/material-webcomponents

Then simply import the component you need in your script, for example:

import './node_modules/@dannymoerkerke/material-webcomponents/src/material-button.js';

Or include it with a script tag as an ES6 module:

<script src="node_modules/@dannymoerkerke/material-webcomponents/src/material-button.js" type="module"></script>

Add the HTML tag:

<material-button label="Confirm" raised></material-button>

...and you're in business!

Documentation

Refer to https://dannymoerkerke.github.io/material-webcomponents/ for documentation of each component.

Demo

To run the demo, run npm install once and then npm start and view the demo on http://localhost:8080/material-webcomponents

Testing

Run npm test and view the results on http://localhost:8080/ or run npm run test:headless to run the tests on the command line.

This repo also contains the configuration file wallaby.js to run the tests from your IDE using Wallaby.js

Browser support

  • Chrome 53+
  • Firefox 63+
  • Safari 10+
  • iOS Safari 10+
  • Chrome Android 71+
  • Firefox Android 64+
  • Edge 16+ (with polyfill)

Polyfilling Edge 16+

Refer to /lib/polyfill-loader.js to see how the webcomponentsjs polyfill and the Webpack bundle are loaded. The Webpack bundle only parses the CSS inside Shadow DOM. Note that the webpack loader is only suitable for browsers that do not support Shadow DOM.




鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
上一篇:
LuckyJayce/Material-Design发布时间:2022-08-18
下一篇:
ChinaLHR/JianDou: 豆瓣Material Design风格的Android客户端发布时间:2022-08-18
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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