demo修改
This commit is contained in:
liushaozhen
parent
0512f0e378
commit
e43809218c
|
|
@ -22,13 +22,13 @@ hue-6-2: #e6c07b
|
|||
display: block;
|
||||
overflow-x: auto;
|
||||
padding: 0.5em;
|
||||
color: #abb2bf;
|
||||
background: #282c34;
|
||||
color: #424242;
|
||||
background: #FAFAFA;
|
||||
}
|
||||
|
||||
.hljs-comment,
|
||||
.hljs-quote {
|
||||
color: #5c6370;
|
||||
color: #424242;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
|
|
@ -94,3 +94,129 @@ hue-6-2: #e6c07b
|
|||
.hljs-link {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.component-demo .u-panel {
|
||||
padding: 18px 20px;
|
||||
border: 1px solid #F0F0F0;
|
||||
}
|
||||
.component-demo .u-panel-default .u-panel-heading{
|
||||
background-color: #fff;
|
||||
padding: 0;
|
||||
position: relative;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.component-demo p{
|
||||
margin: 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.component-demo .component-title{
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.component-demo .component-code{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
top: 0;
|
||||
color: #E14C46;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.component-demo .u-panel .u-panel-body{
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.component-drawerc .pre-js,.component-drawerc .pre-css{
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
|
||||
.component-drawerc .drawer-body {
|
||||
padding: 20px 20px;
|
||||
}
|
||||
.component-drawerc .component-code-copy {
|
||||
font-size: 14px;
|
||||
font-weight: 800;
|
||||
color: #424242;
|
||||
padding: 10px 0;
|
||||
position: relative;
|
||||
}
|
||||
.component-drawerc .component-code-copy .uf-copy::before{
|
||||
content: "\e6fc";
|
||||
}
|
||||
.component-drawerc .component-code-copy .uf{
|
||||
font-weight: 100;
|
||||
}
|
||||
.component-drawerc .component-code-copy.copy-css{
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.component-drawerc .component-code-copy .u-clipboard{
|
||||
position: absolute;
|
||||
right: 0;
|
||||
}
|
||||
/* 抽屉组件样式覆盖 */
|
||||
.component-drawerc{
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: 100000;
|
||||
width: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.component-drawerc .drawer-mask{
|
||||
background-color: rgba(0,0,0,.3);
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transition: transform 300ms ease-in-out, opacity 300ms ease-in-out;
|
||||
}
|
||||
.component-drawerc .drawer-close{
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
font-size: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.component-drawerc .drawer{
|
||||
position: fixed;
|
||||
background-color: #fff;
|
||||
transition: transform 300ms ease-in-out;
|
||||
overflow: auto;
|
||||
}
|
||||
.component-drawerc .drawer-left{
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.component-drawerc .drawer-right{
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
.component-drawerc .drawer-top{
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.component-drawerc .drawer-bottom{
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
}
|
||||
.component-drawerc .drawer-header{
|
||||
padding: 0 20px;
|
||||
border-radius: 0;
|
||||
background: #E14C46;
|
||||
color: #fff;
|
||||
border-bottom: 1px solid #e8e8e8;
|
||||
}
|
||||
.component-drawerc .drawer-header-title{
|
||||
margin: 0;
|
||||
color: #fff;
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
}
|
||||
|
|
@ -1,15 +1,12 @@
|
|||
|
||||
import { Con, Row, Col } from 'bee-layout';
|
||||
import { Panel } from 'bee-panel';
|
||||
import Button from 'bee-button';
|
||||
import React, { Component } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { Con, Row, Col } from 'bee-layout';
|
||||
import { Panel } from 'bee-panel';
|
||||
import Drawer from 'bee-drawer';
|
||||
import Clipboard from 'bee-clipboard';
|
||||
import Button from '../src';
|
||||
|
||||
|
||||
const CARET = <i className="uf uf-arrow-down"></i>;
|
||||
|
||||
const CARETUP = <i className="uf uf-arrow-up"></i>;
|
||||
|
||||
|
||||
{demolist}
|
||||
|
||||
|
|
@ -19,34 +16,46 @@ class Demo extends Component {
|
|||
this.state = {
|
||||
open: false
|
||||
}
|
||||
this.handleClick = this.handleClick.bind(this);
|
||||
}
|
||||
handleClick() {
|
||||
handleClick=()=> {
|
||||
this.setState({ open: !this.state.open })
|
||||
}
|
||||
fCloseDrawer=()=>{
|
||||
this.setState({
|
||||
open: false
|
||||
})
|
||||
}
|
||||
|
||||
render () {
|
||||
const { title, example, code, desc, scss_code } = this.props;
|
||||
let caret = this.state.open ? CARETUP : CARET;
|
||||
let text = this.state.open ? "隐藏代码" : "查看代码";
|
||||
|
||||
const header = (
|
||||
<div>
|
||||
{example}
|
||||
<Button style={{"marginTop": "10px"}} shape="block" onClick={ this.handleClick }>
|
||||
{ caret }
|
||||
{ text }
|
||||
</Button>
|
||||
<p className='component-title'>{ title }</p>
|
||||
<p>{ desc }</p>
|
||||
<span className='component-code' onClick={this.handleClick}> 查看源码 <i className='uf uf-arrow-right'/> </span>
|
||||
</div>
|
||||
);
|
||||
return (
|
||||
<Col md={12} id={title.trim()} >
|
||||
<h3>{ title }</h3>
|
||||
<p>{ desc }</p>
|
||||
<Panel copyable collapsible headerContent expanded={ this.state.open } colors='bordered' header={ header } footerStyle = {{padding: 0}}>
|
||||
<pre><code className="hljs javascript">{ code }</code></pre>
|
||||
{ !!scss_code ? <pre><code className="hljs css">{ scss_code }</code></pre> : null }
|
||||
<Col md={12} id={title.trim()} className='component-demo'>
|
||||
<Panel header={header}>
|
||||
{example}
|
||||
</Panel>
|
||||
|
||||
<Drawer className='component-drawerc' title={title} show={this.state.open} placement='right' onClose={this.fCloseDrawer}>
|
||||
<div className='component-code-copy'> JS代码
|
||||
<Clipboard action="copy" text={code}/>
|
||||
</div>
|
||||
<pre className="pre-js">
|
||||
<code className="hljs javascript">{ code }</code>
|
||||
</pre >
|
||||
{!!scss_code ?<div className='component-code-copy copy-css'> SCSS代码
|
||||
<Clipboard action="copy" text={scss_code}/>
|
||||
</div>:null }
|
||||
{ !!scss_code ? <pre className="pre-css">
|
||||
<code className="hljs css">{ scss_code }</code>
|
||||
</pre> : null }
|
||||
</Drawer>
|
||||
</Col>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
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
25
index.html
25
index.html
|
|
@ -2,24 +2,23 @@
|
|||
<html>
|
||||
<head>
|
||||
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
|
||||
<title>tinper-bee demo</title>
|
||||
<title>neoui-react-button</title>
|
||||
<link rel="stylesheet" href="./dist/demo.css">
|
||||
<link rel="stylesheet" href="./demo/atom-one-dark.css">
|
||||
<link href="//design.yonyoucloud.com/static/tinper-bee/latest/assets/tinper-bee.css" rel="stylesheet" media="screen" />
|
||||
<!-- <link href="https://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet"> -->
|
||||
</head>
|
||||
<body style="background: #eceff1">
|
||||
<div id="tinperBeeDemo"></div>
|
||||
<script src="//cdn.jsdelivr.net/highlight.js/9.8.0/highlight.min.js"></script>
|
||||
<script>
|
||||
<div id="tinperBeeDemo"></div>
|
||||
<script src="//cdn.jsdelivr.net/highlight.js/9.8.0/highlight.min.js"></script>
|
||||
<script>
|
||||
hljs.initHighlightingOnLoad();
|
||||
</script>
|
||||
<script src="//design.yonyoucloud.com/static/console-polyfill/console-polyfill.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/es5-shim/es5-shim.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/es5-shim/es5-sham.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react.development.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/react/16.0.0/umd/react-dom.development.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/prop-types/15.6.0/prop-types.min.js"></script>
|
||||
<script src="./dist/demo.js"></script>
|
||||
</script>
|
||||
<script src="//design.yonyoucloud.com/static/console-polyfill/console-polyfill.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/es5-shim/es5-shim.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/es5-shim/es5-sham.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/react/16.8.4/umd/react.production.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/react/16.8.4/umd/react-dom.production.min.js"></script>
|
||||
<script src="//design.yonyoucloud.com/static/prop-types/15.6.0/prop-types.min.js"></script>
|
||||
<script src="./dist/demo.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -73,9 +73,10 @@
|
|||
},
|
||||
"devDependencies": {
|
||||
"babel-jest": "^22.0.4",
|
||||
"bee-panel": "latest",
|
||||
"bee-clipboard": "^2.0.0",
|
||||
"bee-drawer": "0.0.2",
|
||||
"bee-layout": "latest",
|
||||
"tinper-bee": "latest",
|
||||
"bee-panel": "latest",
|
||||
"chai": "^3.5.0",
|
||||
"console-polyfill": "~0.2.1",
|
||||
"cz-conventional-changelog": "^2.1.0",
|
||||
|
|
@ -84,6 +85,7 @@
|
|||
"jest": "^22.0.4",
|
||||
"react": "^16.6.3",
|
||||
"react-addons-test-utils": "^15.5.0",
|
||||
"react-dom": "^16.6.3"
|
||||
"react-dom": "^16.6.3",
|
||||
"tinper-bee": "latest"
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue