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

jjaybrown/ionic-material-design-lite: Material Design (Lite) style override for ...

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

开源软件名称(OpenSource Name):

jjaybrown/ionic-material-design-lite

开源软件地址(OpenSource Url):

https://github.com/jjaybrown/ionic-material-design-lite

开源编程语言(OpenSource Language):

CSS 76.7%

开源软件介绍(OpenSource Introduction):

#As part of V1 this project will be moving to https://github.com/IonicMaterialDesign a mirror will be setup to ensure backwards compatibility with your existing projects Status: In Development

Stories in Ready

Material Design Lite for Ionic Framework

Join the chat at https://gitter.im/delta98/ionic-material-design-lite

Bring Material Design to your Ionic based applications. This simple module will update Ionic Frameworks's common components and directives to use Google's Material Design (Lite) for the Android platform automatically.

Example Kitchen Sink (WIP)

Codepen: http://codepen.io/delta98/pen/eNjeWJ

Demo

A demo has been included in the demo folder.

You can also see a tab example here: http://embed.plnkr.co/AomYinRm5IhcnJ6Pd4Ys/preview - plnkr originally provided by @adyba

##Why another Material Design library thing? Material Design Lite reduces a lot of the boilerplate and dependencies on external libraries and frameworks such as Polymer. Other efforts have implemented the Material Design specification badly, built it to be workflow intensive or gets outdated quickly.

This project includes the Google implementation directly allowing for a frictionless implementation and relatively quick upgrade path.

##Override styles for both platforms (iOS/Android) You can override both iOS and Android platform styles to use Material Design (Lite) by adding a single line of config to your application.

$ionicMaterialConfigProvider.enableForAllPlatforms();

Otherwise only Android will use the Material Design (Lite) styles.

Installation

Until RC-1 is released you will need to include the following additional includes above the ionic-material-design-lite scripts and css

<link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">

Manually

You can manually add the css and js files to your project by pasting ionic.material-design-lite.min.css and ionic.material-design-lite.bundle.min.js located in the dist folder into your project directory. Refer to these files by adding a <link> and a <script> element into your HTML pages.

CDN

In testing, use :

  • https://rawgit.com/delta98/ionic-material-design-lite/master/dist/css/ionic.material-design-lite.min.css
  • https://rawgit.com/delta98/ionic-material-design-lite/master/dist/js/ionic.material-design-lite.min.js

In production, use :

  • https://cdn.rawgit.com/delta98/ionic-material-design-lite/master/dist/css/ionic.material-design-lite.min.css
  • https://cdn.rawgit.com/delta98/ionic-material-design-lite/master/dist/js/ionic.material-design-lite.min.js

Bower

Assuming you have wiredep setup for your project and bower you can run:

bower install ionic-material-design-lite

This will automatically include ionic.material-design-lite.min.css and ionic.material-design-lite.bundle.min.js into your project.

Otherwise refer to these files by adding a <link> and a <script> element into your HTML pages.

Contribute

Everyone is welcome to fork and create pull requests.

Guidelines

  1. Use BEM Methodology (https://en.bem.info/) when writing and modifying Sass files.
  2. Always write and update tests, your PR won't be accepted unless it has suitable tests written and they pass.

Branching and Issues

Everyone is encouraged to create and resolve issues. When creating an issue ensure you provide as much detail as possible, including any supporting materials that demonstrate the issue OR if it's a feature a detailed statement as to what you are proposing, how it fits within Material Design in the context of Ionic and links to any supporting documents, libraries etc.

Creating a Branch and working on an issue

The project uses waffle.io to manage the issues. If a branch doesn't currently exist you should follow these steps and conventions.

  1. After you have identified an issue you would like to work on you should comment and let others know who you will be working on that issue, if it is already active proceed to Step 3.
  2. Create a branch with the following syntax <feat|bugfix>-short-name#ISSUENUM e.g. feat-material-icons#7. The issue should have enough detail as to make others aware of what the branch is for by using the issue number associated with it.
  3. Make regular updates and notify others of your progress on the issue, likewise if you would like to be involved let the issue owner know so they can tell you how you may be able to help.

Development

To get started, first install the necessary dependencies, from the root of the project:

npm install && bower install

You are good to go. But here's a helpful list of gulp commands to get you up to speed:

gulp dist - processes CSS and JS files and places them into the dist folder

gulp test - run jasmine/karma tests

gulp coverage - run jasmine/karma tests with coverage

gulp scripts - processes JS files only and minifies ready for distribution

gulp sass - processes Sass files and produces CSS and minifies ready for distribution




鲜花

握手

雷人

路过

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

请发表评论

全部评论

专题导读
热门推荐
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

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

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

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