0.0.7 • Published 4 years ago
i-mayfly v0.0.7
简介 i-mayfly Description
i-mayfly component base on react
安装 Install
npm i -S i-mayfly
怎么使用? How to use i-mayfly
引入样式 import style
// index.jsx
import "i-mayfly/lib/sass/normal.scss";
// webpack.config.js
{
test: /\.scss$/,
use: ['css-loader', "postcss-loader", 'sass-loader']
}
配置按需加载 Configure load on demand
// .babelrc
"plugins": [
[
"import",
{
"libraryName": "i-mayfly",
"libraryDirectory": "lib/component",
"style": "css" // 按需加载css文件
}
],
// ...
]
怎么改变主题? How to change theme?
// ./main.scss
$title_b:#fafafa; //标题栏背景色
$side_b:#f4f4f4; //描边 & 模块分割底色
$side_strong:#cacaca; //按钮描边
$divider_b: #E5E5E5; //divider分割线
$hint_b: #888888; //hint & disable
$icon_b: #666666; //icon & secondary
$text_b: #222222; //text
$divider_w: rgba(white, .12); //divider
$hint_w: rgba(white, .3); //hint disable
$icon_w: rgba(white, .7); //icon secondary
$text_w: rgb(255, 255, 255); //text
//color-ji
// $title_b:#f7f7f7;
//mei
// $mei_red:#e74c75;
//status
$success_green:#03b266;
$fail_red:#ff4444;
$warn_yellow:#fc7e36;
$common_blue: #318FE2;
$disable:#898183;
$disable_bg: #F7F8F9;
$disable_c:#B3B9C1;
$readOnly_c:#787E85;
$readOnly_bg:#F7F8F9;
//shadow
$shadow_color: 0 2px 2px 0 rgba(0, 0, 0, 0.05),
0 1px 4px 0 rgba(0, 0, 0, 0.08),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
//paper
$paper_color: #fff;
// Gobal
$w_space: -5px;
$theme_color:#26a597;
// input
$input_border_color: $divider_b;
$input_outline_color: $theme_color;
$input_radius: 0px;
$input_fs: 14px;
$placeholder_b: #cccccc; //input 级别的提示
$placeholder_fs: 14px;
$checkbo_bg:#F6F8F9;
$checkbo_c: inherit;
$checkbox_focus_bg: $theme_color;
$checkbox_focus_c: inherit;
$select_hover_color:$text_b;
// btn
$hoverWaveColor: $theme_color;
$btn_radius: 3px;
$btn_action_radius: 50px;
$btn_fs: 12px;
// table
$table_odd_bg: #F6F8F9;
$table_header_bg: #fff;
$table_header_c: #787E85;
$table_header_fs: 14px;
$table_hover: #E8EBED;
// steps
$steps_bar_bg:$table_odd_bg;
// tab
$tab_top_color:$side_b;
$tab_active_color:$theme_color;
How to use i-mayfly for React
// ex:
// a table and paging demo
import { Dialog, Toast, Table, Paging } from 'i-mayfly';
...
const dataconf = [{
title: 'ID',
name: 'id',
width: '25%'
}, {
title: '姓名',
name: 'name',
width: '25%'
}, {
title: '身高',
name: 'height',
width: '25%'
}, {
title: '',
width: '25%',
name: 'action2',
type: 'action',
handles: [
{
name: '配置',
btnType: 'text',
handle: (data) => {
alert('配置')
console.log(data);
}
}, {
name: '备注',
btnType: 'text',
handle: (data) => {
alert('备注')
console.log(data);
}
}]
}]
const dataset = [{
id: 1,
name: 'Apple',
height: 178
}, {
id: 2,
name: 'Boy',
height: 177
}, {
id: 3,
name: 'Cat',
height: 176
}]
const pageInfo = {
total: 119,
maxToShow: 20
}
handleChangePage = (currentPage) => {
console.log(currentPage);
}
<Table dataconf={dataconf} dataset={dataset} />
<Paging pageInfo={pageInfo} onAction={this.handleChangePage} />