ecomfe / san-mui

A Set of SAN Components that Implement Google's Material Design

san-mui

A Set of SAN Components that Implement Google's Material Design

使用指南

1. 通过 npm 安装

   npm i -S san-mui

2. 在代码中引入

   // 引入需要的组件
   import {Button, DatePicker} from 'san-mui';
   
   // 引入全部样式
   import 'san-mui/lib/index.css';

   或者希望只引入需要的组件，可以这么做：

   import Button from 'san-mui/lib/Button';
   import 'san-mui/lib/Button/Button.css';

开发指南

开发

npm run dev

测试

npm test

构建

我们的源码存放在 src，构建产物放在 lib 下；

启动构建命令：

npm run build

发布指南

发布源

只发布到 npm 上；

发布内容

发布内容应该只包含 package.json / readme.md / lib

发布版本

两周内发版本 [email protected] 系列

两周到一个月之内版本：[email protected]

一个月至两个月内：[email protected]

最终版本 [email protected]

[email protected]版本对应的san的版本为3.2.3

[email protected]版本对应的san的版本为3.5.2 源码对应的是version-3.3.x分支

san-mui's Issues

这个组件库支持ie8吗？

实现不在 material design 规范中的业务常用组件

目前，基本的 MD 规范中的组件已基本实现完成。但是业务中经常会用到以下组件，我们将予以支持：

• 数字输入： http://element.eleme.io/#/zh-CN/component/input-number
• 文件 & 图片上传：http://element.eleme.io/#/zh-CN/component/upload
• 时间段选择器：http://element.eleme.io/#/zh-CN/component/date-picker#xuan-ze-ri-qi-fan-wei
• 日期+时间选择器：http://element.eleme.io/#/zh-CN/component/datetime-picker
• 颜色选择器：http://element.eleme.io/#/zh-CN/component/color-picker
• 走马灯：http://element.eleme.io/#/zh-CN/component/carousel

波纹效果动画时机不太对

https://ecomfe.github.io/san-mui/#/components/Avatar 这个波纹效果手感比较奇怪，应该按下时开始效果，现在是弹起时开始的。

另外，右上角的GitHub按钮失效了 

san-mui能向san一样支持到ie低版本么

san-mui能向san一样支持到ie低版本么

组件引入问题

目前使用版本1.1.1
组件不能一次性全部加载？
目前发现Table和List组件要单独加载
（List组件缺了API）

建议List组件的展开和收起添加过渡动画

RT

Configurable Table组件传入selected属性无效

desc：Configurable Table组件data数组项中的selected为true时，渲染出的表格没有默认选中此项
详见san-mui官网中的Configurable Table示例：https://ecomfe.github.io/san-mui/#/components/Table

解决方法：
因为再TR.js已经实现了selected功能，因此在ConfigurableTable.js中的模板代码片段需要传入获取的selected属性值，如下：

static template = `
        <table class="{{className}}">
            <ui-thead>
                <ui-tr>
                    <ui-td san-for="field in fields">{{field.title}}</ui-td>
                </ui-tr>
            </ui-thead>
            <ui-tbody>
                <ui-tr san-for="item in data" selected="{=item.selected=}">
                    <ui-td san-for="field in fields">{{field | renderField(item)}}</ui-td>
                </ui-tr>
            </ui-tbody>
        </table>
    `;

在ie上打开官网提示“Symbol”未定义

用ie无法打开https://ecomfe.github.io/san-mui/
提示“Symbol”未定义

Safari下Menu/DropdownMenu无法显示下拉弹层

desc: Safari下Menu/DropdownMenu无法显示下拉弹层。
详见
https://ecomfe.github.io/san-mui/#/components/Menu/DropdownMenu

菜单组件可以缩放吗

请问不计划更新了吗？

请问不计划更新了吗？

可以加个changelog吗

clone 后 yarn dev 后报错

Base.js?cdfd:15 Uncaught TypeError: Cannot read property '0' of undefined
at eval (eval at (index.js:1557), :17:96)
at Object. (index.js:1557)
at webpack_require (index.js:556)
at fn (index.js:87)
at eval (eval at (index.js:3359), :13:13)
at Object. (index.js:3359)
at webpack_require (index.js:556)
at fn (index.js:87)
at eval (eval at (index.js:659), :8:15)
at Object. (index.js:659)

TextField 中文输入过程中hintText没有消失

Grid组件引入不方便

Grid组件引入需要利用如下方式：
import {Row, Col} from 'san-mui/lib/Grid';
官网并没有介绍，建议将Grid组件在index.js中天剑上

https://ecomfe.github.io/san-mui/无法访问

2018-05-04 https://ecomfe.github.io/san-mui/ 无法访问 Cannot read property '0' of undefined

代码报错

childs 这个书写有误 改成children 就正常了

san-mui 开发安排

1. 学习 san

2. 选择自己感兴趣的组件

   困难组：

   • Date Picker + Time Picker
   • Dialog
   • Infinite Scroll: List / Refresh Control
   • List
   • Menus: Icon Menu / DropDown Menu
   • Popover
   • Select Field: PC / mobile
   • Switches: CheckBox / Radio / Toggle
   • Table

   简易组：

   • App Bar
   • Auto Complete
   • Avatar
   • Badge
   • Bottom Navigation
   • Bottom Sheet
   • Buttons: Flat Button / Raised Button / Icon Button / Floating Action Button
   • Card
   • Chip
   • Divider
   • Drawer
   • Grid List
   • Icon
   • Pagination
   • Paper
   • Progress: Linear Progress / Circular Progress
   • Slider
   • SnackBar & Toast
   • Stepper
   • Sub header
   • Tabs
   • Text Field
   • Toolbar
   • Tooltip

   基础样式支持：

   • Grid

3. 开始开发

   优先考虑移动端

   开发注意事项：

   1. API 可以参考 museui
   2. UI 设计 / 交互设计请遵守 material design 规范
   3. 尽量完成单元测试的覆盖
   4. 统一class命名规则“sm-xx”，其中xx为组件名
   5. 可以只兼容到IE9