zent
Version:
一套前端设计语言和基于React的实现
93 lines (80 loc) • 2.68 kB
JavaScript
import React from 'react';
import Button from 'zent-button';
import Pop from '../src';
import 'zent-popover/assets/index.scss';
import 'zent-button/assets/index.scss';
import 'zent-layout/assets/index.scss';
import '../assets/index.scss';
import '../assets/example.scss';
/* 为 pop 设置 position 字段可以影响组件的展示方式,我们使用pos-pos的组合,第一个代表 pop 框相对于目标元素的位置,第二个是他们的对齐标线的位置 */
const content = function () {
return (
<div style={{ width: 160 }}>
<p>我在测试</p>
<p>我在测试</p>
<p>我在测试</p>
</div>
);
};
const Single = function (props) {
return (
<div
className={`zent-col zent-col-3 ${props.className}`}
style={{ textAlign: 'center', marginBottom: 10 }}
>
<Pop
content={content()}
trigger="hover"
centerArrow={props.centerArrow}
position={props.type}
>
<Button block>{props.type}</Button>
</Pop>
</div>
);
};
class Demo extends React.Component {
state = {
centerArrow: false
};
onCenterArrowChange = (evt) => {
const { target: { checked } } = evt;
this.setState({
centerArrow: checked
});
};
render() {
let arr = [
{ name: 'top-left', className: 'zent-col-offset-6' },
{ name: 'top-center', className: 'zent-col-offset-1' },
{ name: 'top-right', className: 'zent-col-offset-1' },
{},
{ name: 'left-top', className: 'zent-col-offset-2' },
{ name: 'right-top', className: 'zent-col-offset-13' },
{},
{ name: 'left-center', className: 'zent-col-offset-2' },
{ name: 'right-center', className: 'zent-col-offset-13' },
{},
{ name: 'left-bottom', className: 'zent-col-offset-2' },
{ name: 'right-bottom', className: 'zent-col-offset-13' },
{},
{ name: 'bottom-left', className: 'zent-col-offset-6' },
{ name: 'bottom-center', className: 'zent-col-offset-1' },
{ name: 'bottom-right', className: 'zent-col-offset-1' }
];
const { centerArrow } = this.state;
return (
<div>
<label><input type="checkbox" value={centerArrow} onChange={this.onCenterArrowChange} /> always align arrow to the center of trigger</label><br />
<div className="row" style={{ marginTop: 20 }}>
{arr.map((item, index) => {
return item.name ?
<Single key={index} type={item.name} centerArrow={centerArrow} className={item.className} /> :
<hr key={index} className="zent-col-24" />;
})}
</div>
</div>
);
}
}
export default Demo;