Demo修改
This commit is contained in:
parent
f0a4d4101d
commit
f42d7ab073
|
@ -33,9 +33,12 @@
|
||||||
|
|
||||||
}
|
}
|
||||||
.opt-btns .u-button{
|
.opt-btns .u-button{
|
||||||
|
margin: 0 4px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #505F79;
|
background: #505F79;
|
||||||
|
border-color: #505F79;
|
||||||
&:hover, &:active{
|
&:hover, &:active{
|
||||||
background: #344563;
|
background: #344563;
|
||||||
|
border-color: #505F79;
|
||||||
}
|
}
|
||||||
}
|
}
|
|
@ -77,7 +77,7 @@ class Demo33 extends Component {
|
||||||
overlay={menu1}
|
overlay={menu1}
|
||||||
animation="slide-up"
|
animation="slide-up"
|
||||||
>
|
>
|
||||||
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)'}}></Icon>
|
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -6,10 +6,6 @@
|
||||||
* demo0702
|
* demo0702
|
||||||
*/
|
*/
|
||||||
|
|
||||||
/**
|
|
||||||
* @description
|
|
||||||
*/
|
|
||||||
|
|
||||||
import React, { Component } from 'react';
|
import React, { Component } from 'react';
|
||||||
import {Icon,Checkbox,Dropdown,Menu} from "tinper-bee";
|
import {Icon,Checkbox,Dropdown,Menu} from "tinper-bee";
|
||||||
|
|
||||||
|
@ -17,8 +13,7 @@ import Table from '../../src';
|
||||||
import multiSelect from '../../src/lib/multiSelect';
|
import multiSelect from '../../src/lib/multiSelect';
|
||||||
import sort from '../../src/lib/sort';
|
import sort from '../../src/lib/sort';
|
||||||
|
|
||||||
const SubMenu = Menu.SubMenu;
|
const { Item } = Menu;
|
||||||
const MenuItemGroup = Menu.ItemGroup;
|
|
||||||
|
|
||||||
const data27 = [
|
const data27 = [
|
||||||
{
|
{
|
||||||
|
@ -106,37 +101,33 @@ class Demo27 extends Component {
|
||||||
getSelectedDataFunc = data => {
|
getSelectedDataFunc = data => {
|
||||||
console.log(data);
|
console.log(data);
|
||||||
}
|
}
|
||||||
onClick = (item) => {
|
onSelect = (item) => {
|
||||||
console.log(item);
|
console.log(item);
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
const menu1 = (
|
const menu1 = (
|
||||||
<Menu onClick={this.onClick} style={{ width: 240 }} mode="vertical" >
|
<Menu
|
||||||
<SubMenu key="sub1" title={<span><span>组织 1</span></span>}>
|
onSelect={this.onSelect}>
|
||||||
<MenuItemGroup title="Item 1">
|
<Item key="1">模态弹出</Item>
|
||||||
<Menu.Item key="1">选项 1</Menu.Item>
|
<Item key="2">链接跳转</Item>
|
||||||
<Menu.Item key="2">选项 2</Menu.Item>
|
<Item key="3">打开新页</Item>
|
||||||
</MenuItemGroup>
|
</Menu>);
|
||||||
<MenuItemGroup title="Iteom 2">
|
|
||||||
<Menu.Item key="3">选项 3</Menu.Item>
|
|
||||||
<Menu.Item key="4">选项 4</Menu.Item>
|
|
||||||
</MenuItemGroup>
|
|
||||||
</SubMenu>
|
|
||||||
</Menu>)
|
|
||||||
let multiObj = {
|
let multiObj = {
|
||||||
type: "checkbox"
|
type: "checkbox"
|
||||||
};
|
};
|
||||||
let columns27 = [
|
let columns27 = [
|
||||||
{
|
{ title: "关联",dataIndex: "link",key: "link",width: 80,
|
||||||
title: "", width: 40, dataIndex: "key", key: "key", render: (text, record, index) => {
|
render: (text, record, index) => {
|
||||||
return <Dropdown
|
return (
|
||||||
|
<Dropdown
|
||||||
trigger={['click']}
|
trigger={['click']}
|
||||||
overlay={menu1}
|
overlay={menu1}
|
||||||
animation="slide-up"
|
animation="slide-up"
|
||||||
>
|
>
|
||||||
<Icon style={{ "visibility": "hidden" }} type="uf-eye" />
|
<Icon type="uf-link" style={{color:'rgb(0, 72, 152)',fontSize:'12px'}}></Icon>
|
||||||
</Dropdown>
|
</Dropdown>
|
||||||
|
)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -92,7 +92,10 @@ class Demo105 extends Component {
|
||||||
}
|
}
|
||||||
|
|
||||||
getHoverContent=()=>{
|
getHoverContent=()=>{
|
||||||
return <div className="opt-btns"><Button size="sm" onClick={this.handleClick}>一些操作</Button> </div>
|
return <div className="opt-btns">
|
||||||
|
<Button size="sm" onClick={this.handleClick}>编辑</Button>
|
||||||
|
<Button size="sm" onClick={this.handleClick}>删除</Button>
|
||||||
|
</div>
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 拖拽改变行顺序
|
* @title 拖拽改变行顺序
|
||||||
* @parent 拖拽改变行顺序
|
* @parent 行操作-拖拽
|
||||||
* @description 拖拽改变行顺序
|
* @description 拖拽改变行顺序
|
||||||
* Demo1201
|
* Demo1201
|
||||||
*/
|
*/
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 多选表格
|
* @title 多选功能
|
||||||
* @parent 行操作-选择
|
* @parent 行操作-选择
|
||||||
* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数,返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中,添加_disabled参数可禁止选择当前数据。
|
* @description 支持多选、全选和禁止选择。getSelectedDataFunc方法是选中行的回调函数,返回当前选中的数据数组。给data数据添加_checked参数可设置当前数据是否选中,添加_disabled参数可禁止选择当前数据。
|
||||||
* demo1301
|
* demo1301
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
/**
|
/**
|
||||||
*
|
*
|
||||||
* @title 表格单选,且选中行填充颜色
|
* @title 单选功能
|
||||||
* @parent 表格-单选-radio-行选中
|
* @parent 行操作-选择
|
||||||
* @description 表格增加单选、radio 和背景色的示例。
|
* @description 表格支持单选行操作,可自定义选中行背景色。
|
||||||
* Demo1304
|
* Demo1304
|
||||||
*/
|
*/
|
||||||
|
|
||||||
|
@ -11,8 +11,6 @@ import {Button,Tooltip,Radio} from "tinper-bee";
|
||||||
|
|
||||||
import Table from "../../src";
|
import Table from "../../src";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
const data = [
|
const data = [
|
||||||
{ check: "ASVAL_201903280005",a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
{ check: "ASVAL_201903280005",a: "ASVAL_201903280005", b: "小张", c: "男", d: "财务二科", key: "1" },
|
||||||
{ check: "ASVAL_201903200004",a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
{ check: "ASVAL_201903200004",a: "ASVAL_201903200004", b: "小明", c: "男", d: "财务一科", key: "2" },
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -631,10 +631,13 @@
|
||||||
right: 15px; }
|
right: 15px; }
|
||||||
|
|
||||||
.opt-btns .u-button {
|
.opt-btns .u-button {
|
||||||
|
margin: 0 4px;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
background: #505F79; }
|
background: #505F79;
|
||||||
|
border-color: #505F79; }
|
||||||
.opt-btns .u-button:hover, .opt-btns .u-button:active {
|
.opt-btns .u-button:hover, .opt-btns .u-button:active {
|
||||||
background: #344563; }
|
background: #344563;
|
||||||
|
border-color: #505F79; }
|
||||||
|
|
||||||
.demo04.u-table tr:nth-child(2n) {
|
.demo04.u-table tr:nth-child(2n) {
|
||||||
background: #f7f9fb; }
|
background: #f7f9fb; }
|
||||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -56,6 +56,7 @@
|
||||||
"bee-loading": "^1.0.6",
|
"bee-loading": "^1.0.6",
|
||||||
"bee-locale": "0.0.11",
|
"bee-locale": "0.0.11",
|
||||||
"bee-menus": "^2.0.2",
|
"bee-menus": "^2.0.2",
|
||||||
|
"bee-radio": "^2.0.8",
|
||||||
"bee-select": "^2.0.9",
|
"bee-select": "^2.0.9",
|
||||||
"classnames": "^2.2.5",
|
"classnames": "^2.2.5",
|
||||||
"component-classes": "^1.2.6",
|
"component-classes": "^1.2.6",
|
||||||
|
|
Loading…
Reference in New Issue