Giter Club home page Giter Club logo

mdui's Introduction

mdui logo

mdui

A Material Design 3 (Material You) library of Web Components.
https://www.mdui.org

npm version CSS gzip size JS gzip size downloads license


  • 🧩 Works with all frameworks
  • 🚛 Works with CDNs
  • 🏙️ Material 3 design system
  • 🌛 Includes dark theme and dynamic color
  • 🆚 Optimized for WebStorm and VSCode
  • 😸 Open source

Docs

Installation

npm install mdui --save

Usage

Import CSS and JS:

import 'mdui/mdui.css';
import 'mdui';

Use the component:

<mdui-button>Button</mdui-button>

Using CDN

<!doctype html>
<html>
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://unpkg.com/mdui@2/mdui.css">
    <script src="https://unpkg.com/mdui@2/mdui.global.js"></script>
  </head>
  <body>
    <mdui-button>Hello, world!</mdui-button>
  </body>
</html>

License

MIT

mdui's People

Contributors

baffinlee avatar kermanx avatar rikkaw avatar zdhxiong avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

mdui's Issues

可滚动的 tab 显示出了滚动条

只在 Mac 上 Webkit 内核的浏览器发现了这个问题。
UserAgent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12) AppleWebKit/604.1.2 (KHTML, like Gecko) Version/10.2 Safari/604.1.2

分页组件

目前还没有这个组件,希望后面可以加上。虽然移动端多是用下拉的,但是PC端还是需要的。

菜单无法根据 item 定位

在 Material 规范里 Menu 打开后,其位置应该与当前选中的项目有关。

image

目前 MDUI 的 Menu 不具有此功能,希望能添加。

在 Angular2 应用中无法使用组件

如题。在 Angular 2 中无法使用抽屉和 Collapse,原因不明。其他组件未尝试,应该也有相同情况。

如果通过 HTML 方式调用组件,无任何反应。
如果通过 Javascript 方式,在 new 实例化的时候就会报错:
Cannot read property 'mduiDomDataStorage' of null

该 Angular 2 应用 使用 typescript 编写。

多個帶遮罩的抽屜式導航

有多個帶遮罩的導航同時出現之後,無法關閉導航。例如說

<div class="mdui-drawer mdui-drawer-right" id="drawer1">...</div>
<div class="mdui-drawer mdui-drawer-right" id="drawer2">...</div>

...
inst1.open();
inst2.open();

這之後點選遮罩,沒辦法關掉任一個導航。

涟漪动画的问题

在移动端 如果同时触摸两个带涟漪动画的元素 遮罩不会消失 多按几次遮罩会一直叠加

.mdui-panel-item-title .mdui-panel-item-summary 寬度

這兩個類別的寬度沒有在規範裡,是不是可以刪除?

/* 面板项标题 */
.mdui-panel-item-title {
width: 36%;
float: left;
font-weight: 500;
}

/* 面板项内容 */
.mdui-panel-item-summary {
width: 56%;
float: left;
color: @color-black-secondary;
}

帶遮罩的抽屜式導航

抽屜式導航在寬屏下是預設開啟,但是設定帶遮罩的情況下,預設開啟的時候並沒有遮罩。

請問這是預料中的動作,或是這裡出現一個小錯誤?

偶尔出现鼠标滚动无效

浏览器为Chrome v57

不知道什么原因,偶尔网页就像卡了一样,鼠标滚动失效,只能拖动滚动条

与vue 单页面应用一起使用时存在的问题

有几个问题 想请教一下
.1 我用 vue 搭建的spa 项目,在main.js 中把 mdui.js 导入了,但是路由改变之后,tab 切换等效果就不起作用了,需要重新 new 一下组建,不然的话 就调到 a 设置的target链接的地方了,希望仔细回答一下,困扰好久了..

node.js express环境下报错

如题
......
/node_modules/mdui/dist/js/mdui.js:5070
})(window, document);
^

ReferenceError: window is not defined.......

mdui-table 调用 mdui.updateTables() 报错

<div class="mdui-table-fluid"> <table class="mdui-table mdui-table-selectable mdui-table-hoverable"> <thead> <tr> <th>设备名</th> <th>IP</th> <th>消息</th> </tr> </thead> <tbody> <tr> <td>7.1.2xxxxxxxxxxxxxx</td> <td>10.0.0.100</td> <td>无</td> </tr> <tr> <td></td> <td></td> <td></td> </tr> </tbody> </table> </div>
这里显示是正常的
当执行 mdui.updateTables() 时则报错 mdui/js/mdui.js (1675) "Uncaught TypeError: Cannot read property 'init' of null"

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.