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,36 +16,48 @@ 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 }
|
||||
</Panel>
|
||||
</Col>
|
||||
)
|
||||
<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>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -58,16 +67,16 @@ class DemoGroup extends Component {
|
|||
}
|
||||
render () {
|
||||
return (
|
||||
<Row>
|
||||
{DemoArray.map((child,index) => {
|
||||
<Row>
|
||||
{DemoArray.map((child,index) => {
|
||||
|
||||
return (
|
||||
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
|
||||
)
|
||||
return (
|
||||
<Demo example= {child.example} title= {child.title} code= {child.code} scss_code= {child.scss_code} desc= {child.desc} key= {index}/>
|
||||
)
|
||||
|
||||
})}
|
||||
</Row>
|
||||
)
|
||||
})}
|
||||
</Row>
|
||||
)
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
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
27
index.html
27
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>
|
||||
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>
|
||||
<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.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>
|
||||
|
|
|
|||
10
package.json
10
package.json
|
|
@ -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