新增tooltip示例
This commit is contained in:
jonyshi
parent
00c8feb178
commit
bac10e9356
|
|
@ -9,6 +9,7 @@
|
|||
@import "../node_modules/bee-checkbox/src/Checkbox.scss";
|
||||
@import "../node_modules/bee-select/src/Select.scss";
|
||||
@import "../node_modules/bee-form/src/Form.scss";
|
||||
@import "../node_modules/bee-popover/src/Popover.scss";
|
||||
@import "../node_modules/bee-tooltip/src/Tooltip.scss";
|
||||
@import "../src/Table.scss";
|
||||
|
||||
|
|
|
|||
|
|
@ -1,31 +1,70 @@
|
|||
/**
|
||||
*
|
||||
* @title 简单表格
|
||||
* @title 简单表格，以及两种tip
|
||||
* 一种是bee-popover实现
|
||||
* 一种是标签本身的tooltip
|
||||
* @description
|
||||
*
|
||||
*/
|
||||
|
||||
import React, { Component } from "react";
|
||||
import Popover from 'bee-popover';
|
||||
import Button from "bee-button";
|
||||
import Table from "../../src";
|
||||
|
||||
function getTitleTip(text){
|
||||
return(<div>
|
||||
<h3>{text}</h3>
|
||||
</div>)
|
||||
}
|
||||
|
||||
|
||||
const columns = [
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width: 100 },
|
||||
{ id: "123", title: "性别", dataIndex: "b", key: "b", width: 100 },
|
||||
{ title: "年龄", dataIndex: "c", key: "c", width: 200 },
|
||||
{ title: "用户名", dataIndex: "a", key: "a", width:80 ,
|
||||
render(text, record, index) {
|
||||
return(<div style={{position: 'relative'}}>
|
||||
<Popover
|
||||
placement="leftTop"
|
||||
content={getTitleTip(text)}
|
||||
trigger="hover"
|
||||
id="leftTop"
|
||||
>
|
||||
<span
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 5,
|
||||
left: 0,
|
||||
width: "80px",
|
||||
textOverflow:"ellipsis",
|
||||
overflow:"hidden",
|
||||
whiteSpace:"nowrap"
|
||||
}}>{text}</span>
|
||||
</Popover>
|
||||
</div>);
|
||||
}},
|
||||
{
|
||||
title: "操作",
|
||||
dataIndex: "d",
|
||||
key: "d",
|
||||
render(text, record, index) {
|
||||
return (
|
||||
<a
|
||||
href="#"
|
||||
onClick={() => {
|
||||
alert('这是第'+index+'列，内容为:'+text);
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
<div style={{position: 'relative'}} title={text} >
|
||||
<a
|
||||
href="#"
|
||||
tooltip={text}
|
||||
onClick={() => {
|
||||
alert('这是第'+index+'列，内容为:'+text);
|
||||
}}
|
||||
style={{
|
||||
position: 'absolute',
|
||||
top: 5,
|
||||
left: 0
|
||||
}}
|
||||
>
|
||||
一些操作
|
||||
</a>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
@ -33,7 +72,7 @@ const columns = [
|
|||
|
||||
const data = [
|
||||
{ a: "令狐冲", b: "男", c: 41, d: "操作", key: "1" },
|
||||
{ a: "杨过", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "杨过叔叔的女儿黄蓉", b: "男", c: 67, d: "操作", key: "2" },
|
||||
{ a: "郭靖", b: "男", c: 25, d: "操作", key: "3" }
|
||||
];
|
||||
|
||||
|
|
@ -45,7 +84,7 @@ class Demo1 extends Component {
|
|||
data={data}
|
||||
title={currentData => <div>标题: 这是一个标题</div>}
|
||||
footer={currentData => <div>表尾: 我是小尾巴</div>}
|
||||
/>
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -7481,6 +7481,125 @@ ul {
|
|||
top: 2px;
|
||||
margin-right: 2px; }
|
||||
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
.u-popover {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 1540;
|
||||
display: none;
|
||||
padding: 1px;
|
||||
font-style: normal;
|
||||
font-weight: 400;
|
||||
letter-spacing: normal;
|
||||
line-break: auto;
|
||||
line-height: 1.42857143;
|
||||
text-align: left;
|
||||
text-decoration: none;
|
||||
text-shadow: none;
|
||||
text-transform: none;
|
||||
white-space: normal;
|
||||
word-break: normal;
|
||||
word-spacing: normal;
|
||||
word-wrap: normal;
|
||||
font-size: 14px;
|
||||
background-color: #fff;
|
||||
background-clip: padding-box;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 6px;
|
||||
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2); }
|
||||
.u-popover > .arrow, .u-popover > .arrow:after {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-color: transparent;
|
||||
border-style: solid; }
|
||||
.u-popover > .arrow {
|
||||
border-width: 10px; }
|
||||
.u-popover > .arrow:after {
|
||||
border-width: 10px;
|
||||
content: ""; }
|
||||
.u-popover.top, .u-popover.top-right, .u-popover.top-left {
|
||||
margin-top: -10px; }
|
||||
.u-popover.top .arrow, .u-popover.top-right .arrow, .u-popover.top-left .arrow {
|
||||
left: 50%;
|
||||
margin-left: -11px;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: #999;
|
||||
bottom: -11px; }
|
||||
.u-popover.top .arrow:after, .u-popover.top-right .arrow:after, .u-popover.top-left .arrow:after {
|
||||
content: " ";
|
||||
bottom: 1px;
|
||||
margin-left: -10px;
|
||||
border-bottom-width: 0;
|
||||
border-top-color: #fff; }
|
||||
.u-popover.top-right .arrow {
|
||||
left: auto;
|
||||
right: 20px; }
|
||||
.u-popover.top-left .arrow {
|
||||
left: 20px; }
|
||||
.u-popover.right, .u-popover.right-top, .u-popover.right-bottom {
|
||||
margin-left: 10px; }
|
||||
.u-popover.right .arrow, .u-popover.right-top .arrow, .u-popover.right-bottom .arrow {
|
||||
top: 50%;
|
||||
left: -11px;
|
||||
margin-top: -11px;
|
||||
border-left-width: 0;
|
||||
border-right-color: #999; }
|
||||
.u-popover.right .arrow:after, .u-popover.right-top .arrow:after, .u-popover.right-bottom .arrow:after {
|
||||
content: " ";
|
||||
left: 1px;
|
||||
bottom: -10px;
|
||||
border-left-width: 0;
|
||||
border-right-color: #fff; }
|
||||
.u-popover.right-top .arrow {
|
||||
top: 20px; }
|
||||
.u-popover.right-bottom .arrow {
|
||||
top: auto;
|
||||
bottom: 10px; }
|
||||
.u-popover.left, .u-popover.left-top, .u-popover.left-bottom {
|
||||
margin-left: -10px; }
|
||||
.u-popover.left .arrow, .u-popover.left-top .arrow, .u-popover.left-bottom .arrow {
|
||||
top: 50%;
|
||||
right: -11px;
|
||||
margin-top: -11px;
|
||||
border-right-width: 0;
|
||||
border-left-color: #999; }
|
||||
.u-popover.left .arrow:after, .u-popover.left-top .arrow:after, .u-popover.left-bottom .arrow:after {
|
||||
content: " ";
|
||||
right: 1px;
|
||||
border-right-width: 0;
|
||||
border-left-color: #fff;
|
||||
bottom: -10px; }
|
||||
.u-popover.left-top .arrow {
|
||||
top: 20px; }
|
||||
.u-popover.left-bottom .arrow {
|
||||
top: auto;
|
||||
bottom: 10px; }
|
||||
.u-popover.bottom, .u-popover.bottom-right, .u-popover.bottom-left {
|
||||
margin-top: 10px; }
|
||||
.u-popover.bottom .arrow, .u-popover.bottom-right .arrow, .u-popover.bottom-left .arrow {
|
||||
left: 50%;
|
||||
margin-left: -11px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #999;
|
||||
top: -11px; }
|
||||
.u-popover.bottom .arrow:after, .u-popover.bottom-right .arrow:after, .u-popover.bottom-left .arrow:after {
|
||||
content: " ";
|
||||
top: 1px;
|
||||
margin-left: -10px;
|
||||
border-top-width: 0;
|
||||
border-bottom-color: #fff; }
|
||||
.u-popover.bottom-right .arrow {
|
||||
right: 20px;
|
||||
left: auto; }
|
||||
.u-popover.bottom-left .arrow {
|
||||
left: 20px; }
|
||||
.u-popover .u-popover-content {
|
||||
padding: 9px 14px; }
|
||||
|
||||
/* FormGroup */
|
||||
/* Navlayout */
|
||||
.u-tooltip {
|
||||
|
|
|
|||
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
|
|
@ -47,6 +47,7 @@
|
|||
},
|
||||
"dependencies": {
|
||||
"bee-loading": "^1.0.3",
|
||||
"bee-popover": "^1.0.2",
|
||||
"bee-select": "file:///Users/jony/workspaces/yonyou/component/bee-select",
|
||||
"classnames": "^2.2.5",
|
||||
"object-path": "^0.11.3",
|
||||
|
|
|
|||
Loading…
Reference in New Issue