UNPKG

zent

Version:

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

58 lines (49 loc) 1.25 kB
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'; /* 设置 header 属性可以给 pop 添加一个头部,header 可以是一个字符串,也可以是 react 元素 */ const content = function () { return ( <div style={{ width: 160 }}> <div>Pop内容</div> </div> ); }; const header = function () { return '我是一个title'; }; const Single = function (props) { return ( <div className="zent-col zent-col-offset-6 zent-col-4" style={{ textAlign: 'center', marginBottom: 10 }} > <Pop content={content()} trigger="click" position={props.position} header={props.header} > <Button block> {props.header ? '带头部' : 'Normal'} </Button> </Pop> </div> ); }; const Demo = function () { return ( <div> <div className="row"> <Single position="top-center" /> <Single header={header()} position="top-center" /> </div> </div> ); }; export default Demo;