material-light::light_bulb:用于Angular(版本4+)的Material Design UI组件

  • I6_532608
  • 2.1MB
  • zip
  • 0
  • VIP专享
  • 0
  • 2022-06-15 09:44
材质灯 **用于Angular(版本4 +)的Material Design UI组件** 特征: 100%永久免费。 快速 光 简单易用 真正的组件库,将Typescipt代码,CSS和HTML封装为原子单位 简单快速的表格验证 在移动应用程序上表现出色。 自适应内容适用于台式机和移动设备 组件也可作为允许代码拆分/延迟加载的Angular模块使用。 这意味着仅在运行时加载所需的组件 准备提前进行时间编译(AOT) 在主要的桌面/移动浏览器中进行了测试:Chrome(Android,IOS,桌面),FF,Edge,IE,Opera。 没有来自其他库的依赖,例如JQuery或Bootstrap。 注意:不支持服务器端渲染 目的 主要目标是实现极简主义和高性能,而不是涵盖所有可能的选项或UI组件(这也是Material Design Light的理念)。 您始终可以添加其他来源的其他组件。 如果您认为该项目有用并且将要使用,请在回购中加星号,并注明作者和 许可下的使用条款。 作者 YagoLópez: 网站: 电子邮件:yago.lopez([at])gmail.c
<p align="center"></p> <h1><p align="center">Material Light</p></h1> <p align="center">**Material Designt UI components for Angular (versions 4 +)**</p> Features: - 100% Free forever. - Fast - Light - Easy and fun to use - Library of true componentes encapsulating Typescipt code, CSS and HTML as atomic units - Easy and quick form validation - Great performance on mobile apps. - Responsive content adaptable to desktop and mobile - Components available also as Angular Modules allowing Code-Splitting/Lazy-loading. This implies loading only the components needed at runtime - Ready for Ahead of Time Compilation (AOT) - Tested in main desktop/mobile browsers: Chrome (Android, IOS, desktop), FF, Edge, IE, Opera. <a href="" target="_blank" rel='nofollow' onclick='return false;'>(Browsers supported)</a> - No dependencies from other libraries like JQuery or Bootstrap. - Note: Server Side Rendering not supported ## Objective The main goal was to achieve minimalism and performance, not to encompass all posible kind of options or UI components (this is the philosophy of Material Design Light too). You can always add other components from other sources. If you find this project useful and are going to use it, please **give a star in the repo** and credits to the author and to <a href="" target="_blank" rel='nofollow' onclick='return false;'>Material Design Lite from Google</a> Terms of use under <a href="LICENSE.txt" rel='nofollow' onclick='return false;'>MIT</a> license. ## Author Yago López: - Website: <a href="" target="_blank" rel='nofollow' onclick='return false;'></a> - Email: yago.lopez ([at]) ## Demo - <a href="" target="_blank" rel='nofollow' onclick='return false;'>Mobile Simulator (For Desktop)</a>. <b>Warning:</b> Content in external iframes may have javascript restrictions for security reasons (i. e. alert dialogs). Run the full screen version for unrestricted features. - <a href="" target="_blank" rel='nofollow' onclick='return false;'>Full Screen (For Mobile)</a> ## Insallation and Use - Using Node/Npm/Yarn, in a project generated with Angular-CLI, run: `npm install YagoLopez/material-light --save` - Whitout Node/Npm: Clone or fork the repository - Install dependencies with `npm install` - <b>IMPORTANT</b>: Adjust the `basePath` in <a href="" target="_blank" rel='nofollow' onclick='return false;'> mlDemoAppMod.ts</a> to your environment - Run: `ng serve` from project directory ## Notes - This project can be used with the **angular-cli** although not mandatory. - Material Icons must be included from `{project-folder}/src/assets/fonts/mlIcons.css` in your `index.html` - To have AOT working you must execute the following steps: - Copy `{project-folder}/node_modules/material-light/src/app/ml/` folder to your `/src/app` folder - Copy `{project-folder}/node_modules/material-light/src/assets/` folder to your `/src/` folder - Import the component modules from `{project-folder}/src/app/ml/components` in your own module. Component modules have `*Mod.ts` file name. For example, if you want to use `MlButton`, import `MlButtonMod.ts` in your module and place `<ml-button>my button</ml-button>` in your template - Use the components following the examples in the `{project-folder}/node_modules/material-light/src/app/pages` directory. - Use `<ml-layout>` as base component to place inside it all other components - This project does not work in full strict Typescript mode. (`strict` flag must be `false` in `tsconfig.json`) ## Theming Basisc theming can be achieved using Angular special selectors in the root component: ```CSS <style> /* Header theme */ :host /deep/ ml-header { background: cornflowerblue; color: yellow; } /* Content theme */ :host /deep/ ml-content { background: lightblue; } </style> ``` For advanced theming, CSS selectors must be used. Inspect the DOM using developer tools. For example: ```CSS <style> /* Button colored theme */ :host /deep/ ml-button.mdl-button--raised.mdl-button--colored { background: brown; } /* Button accent theme */ :host /deep/ ml-button.mdl-button--raised.mdl-button--accent { background: green; } </style> ``` ## Running the demo You can run the compiled demo pointing a web server to `{project-folder}/node_modules/material-light/dist/index.html` If you want to compile the project: - Clone or download the repo - Inside the project folder run `npm install` - Adjust the `basePath` in `mlDemoAppMod.ts` to your environment and run it with `ng serve` ## Testing <div>Tests with the colaboration of:</div> <a href="" target="_blank" rel='nofollow' onclick='return false;'></a> ## Disclaimers: - This project is based on <a href="" target="_blank" rel='nofollow' onclick='return false;'>Material Design Lite from Google</a>. It is an adaptation of MDL JavaScript components to Angular components with the permission of the MDL team. - Material Design is a Google's registered trade mark probably. - This is an open-source project without commercial or profit intention. <p><a href="#" rel='nofollow' onclick='return false;'>Back to top</a>