light react ui design asumi
Branch: master
Clone or download
Latest commit 4ae0d30 Dec 11, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
__tests__ 修复了表格如果length是0,page是1,则又可能显示1到0的问题 Mar 9, 2018
examples Message支持不关闭 Dec 10, 2018
lib 0.1.4 Dec 11, 2018
src Message支持不关闭 Dec 10, 2018
style 0.1.4 Dec 11, 2018
.babelrc init el-ui Apr 6, 2017
.editorconfig selecttest Dec 1, 2017
.eslintrc.json fix issue#8#9 Jan 31, 2018
.gitignore gitignore Nov 9, 2017
.npmignore remove node_modules Dec 7, 2017
LICENSE Update LICENSE Dec 4, 2017
README.md update readme Apr 4, 2018
jest.config.json testpagination Dec 1, 2017
package.json 0.1.4 Dec 11, 2018
webpack.config.example.js built Dec 5, 2017
webpack.config.pages.js pages Dec 4, 2017

README.md

ASUMI

HOMEPAGE

homepage

USAGE

    import React from 'react';
    import ReactDOM from 'react-dom';
    import { Button } from 'asumi';
    import 'asumi/style/index.less';
    //import 'asumi/style/asumi-default-theme.css';
    <link rel="stylesheet" href="path/to/font-awesome/css/font-awesome.min.css"/>

ICON

asumi icons use Font Awesome

Component

  • Grid
  • Button
  • Panel
  • Tag
  • Tab
  • Input
  • NumberInput
  • TagInput
  • Select
  • Radio
  • Checkbox
  • Switch
  • RadioGroup
  • CheckboxGroup
  • Markdown Editor
  • Upload
  • DateTime
  • Form
  • FormIem
  • Table
  • Pagination
  • Tooltip
  • Popover
  • Message
  • Modal
  • Dropdown
  • Menu
  • MenuItem
  • MenuItemGroup
  • SubMenu
  • Animate
  • Loading
  • Transfer

Theme

default font-size is 13px. you can change it by change @fontSize. and

@danger: #F75A36;
@l_danger: lighten(@danger, 30%);
@d_danger: darken(@danger, 4%);

@default: #F5F5F5;
@l_default: lighten(@default, 2%);
@d_default: darken(@default, 4%);

@primary: #53B6FF;
@l_primary: lighten(@primary, 30%);
@d_primary: darken(@primary, 8%);

@success: #7AD57D;
@l_success: lighten(@success, 30%);
@d_success: darken(@success, 4%);

@secondary: #FFCD36;
@l_secondary: lighten(@secondary, 35%);
@d_secondary: darken(@secondary, 4%);

@disabled: #BDBDBD;
@l_disabled: lighten(@disabled, 20%);

@border: #E0E0E0;
@shadow: rgba(0, 0, 0, .2);

@normalText: #333;
@midText: #777;
@lightText: #CCC;
@disabledText: #ECECEC;

@fontSize: 13px;
@borderRadio: 4px;
@smallBorderRadio: 2px;

@editor: #EFF2F7;
@previewColor: #1f2d3d;

you can change theme color if you want!