UNPKG

zent

Version:

一套前端设计语言和基于React的实现

116 lines (96 loc) 2.37 kB
/* eslint-disable no-console */ import React from 'react'; import Button from 'zent-button'; import Pop from '../src/index.js'; 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'; const onShow = () => { console.log('show'); }; const onClose = () => { console.log('close'); }; /* pop 有三种触发方式 */ const content = function () { return ( <div style={{ width: 160 }}> <a>我在测试</a> <div style={{ marginTop: 10 }}><input /></div> </div> ); }; const addClick = () => { console.log('额外事件'); }; const Single = function (props) { return ( <div className="zent-col zent-col-4" style={{ textAlign: 'center', marginBottom: 10 }} > <Pop content={content()} trigger={props.trigger} position="bottom-center" onShow={onShow} onClose={onClose} > {props.trigger !== 'focus' ? <Button onClick={addClick}> {props.trigger} </Button> : <input placeholder="focus" onChange={(evt) => console.log(evt.target.value)} /> } </Pop> </div> ); }; class NoneTriggerDemo extends React.Component { state = { visible: false }; close = () => { this.setState({ visible: false }); }; open = () => { this.setState({ visible: true }); }; render() { return ( <div className="zent-col zent-col-6" style={{ textAlign: 'center', marginBottom: 10 }}> <Button disabled={!this.state.visible} onClick={this.close}> 外部关闭 </Button> <span>&nbsp;</span> <Pop content={<Button onClick={this.close}>内部关闭</Button>} trigger="none" position="top-right" header="trigger is none" visible={this.state.visible} onShow={onShow} onClose={onClose} > <Button onClick={this.open}>打开(none)</Button> </Pop> </div> ); } } const Demo = function () { let arr = ['click', 'focus', 'hover']; return ( <div className="row"> {arr.map((item, index) => <Single key={index} trigger={item} />)} <NoneTriggerDemo /> </div> ); }; export default Demo;