mirror of
https://gitee.com/baidu/amis.git
synced 2024-11-30 02:48:55 +08:00
加个复制代码和回到顶部
This commit is contained in:
rickcole
parent
d34c5c707e
commit
93aef7c5a1
@ -1,9 +1,9 @@
|
||||
---
|
||||
title: 起步
|
||||
title: 介绍
|
||||
description: ddsaad
|
||||
type: 0
|
||||
group: 💡 概念
|
||||
menuName: 起步
|
||||
menuName: 介绍
|
||||
icon:
|
||||
order: 8
|
||||
---
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
---
|
||||
title: 自定义组件
|
||||
title: 自定义
|
||||
---
|
||||
|
||||
如果默认的组件不能满足需求，可以通过自定义组件来进行扩展，在 amis 中有两种方法：
|
||||
|
||||
@ -3,10 +3,6 @@ title: 快速开始
|
||||
description:
|
||||
---
|
||||
|
||||
## 速搭
|
||||
|
||||
suda
|
||||
|
||||
## npm
|
||||
|
||||
### 安装
|
||||
@ -15,7 +11,7 @@ suda
|
||||
npm i amis
|
||||
```
|
||||
|
||||
### 使用说明
|
||||
### 使用
|
||||
|
||||
可以在 React Component 这么使用（TypeScript）。
|
||||
|
||||
@ -72,7 +72,8 @@ export class App extends React.PureComponent {
|
||||
themes: themes,
|
||||
theme: themes[localStorage.getItem('themeIndex') || 0],
|
||||
locale: localStorage.getItem('locale') || '',
|
||||
navigations: []
|
||||
navigations: [],
|
||||
scrollTop: 0
|
||||
};
|
||||
|
||||
constructor(props) {
|
||||
@ -93,6 +94,7 @@ export class App extends React.PureComponent {
|
||||
`link[title=${this.state.theme.value}]`
|
||||
).disabled = false;
|
||||
}
|
||||
document.addEventListener('scroll', this.handleScroll.bind(this));
|
||||
}
|
||||
|
||||
componentDidUpdate(preProps, preState) {
|
||||
@ -120,6 +122,16 @@ export class App extends React.PureComponent {
|
||||
}
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
document.removeEventListener('scroll', this.handleScroll.bind(this));
|
||||
}
|
||||
|
||||
handleScroll(e) {
|
||||
this.setState({
|
||||
scrollTop: e.target.scrollingElement.scrollTop
|
||||
});
|
||||
}
|
||||
|
||||
toggleAside() {
|
||||
this.setAsideFolded(!this.state.asideFolded);
|
||||
}
|
||||
@ -328,6 +340,14 @@ export class App extends React.PureComponent {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* 完了加个动画吧 */}
|
||||
<div
|
||||
className={`Backtop ${this.state.scrollTop > 450 ? 'visible' : ''}`}
|
||||
onClick={() => scrollTo({top: 0})}
|
||||
>
|
||||
<i className="fa fa-rocket"></i>
|
||||
</div>
|
||||
|
||||
{React.cloneElement(this.props.children, {
|
||||
...this.props.children.props,
|
||||
setNavigations: this.setNavigations,
|
||||
|
||||
@ -1,11 +1,11 @@
|
||||
import React from 'react';
|
||||
import makeMarkdownRenderer from './MdRenderer';
|
||||
import {flattenTree, filterTree} from '../../src/utils/helper';
|
||||
import {flattenTree, filterTree, mapTree} from '../../src/utils/helper';
|
||||
|
||||
export const docs = [
|
||||
{
|
||||
// prefix: ({classnames: cx}) => <li className={cx('AsideNav-divider')} />,
|
||||
label: '开始',
|
||||
label: '📌 开始',
|
||||
children: [
|
||||
{
|
||||
label: '介绍',
|
||||
@ -18,15 +18,15 @@ export const docs = [
|
||||
|
||||
{
|
||||
label: '快速开始',
|
||||
path: '/docs/start/usage',
|
||||
path: '/docs/start/getting-started',
|
||||
getComponent: (location, cb) =>
|
||||
require(['../../docs/start/usage.md'], doc => {
|
||||
require(['../../docs/start/getting-started.md'], doc => {
|
||||
cb(null, makeMarkdownRenderer(doc));
|
||||
})
|
||||
},
|
||||
|
||||
{
|
||||
label: '自定义组件',
|
||||
label: '自定义',
|
||||
path: '/docs/start/custom',
|
||||
getComponent: (location, cb) =>
|
||||
require(['../../docs/start/custom.md'], doc => {
|
||||
@ -57,7 +57,7 @@ export const docs = [
|
||||
},
|
||||
|
||||
{
|
||||
label: '概念',
|
||||
label: '💡 概念',
|
||||
children: [
|
||||
{
|
||||
label: '配置与组件',
|
||||
@ -127,7 +127,7 @@ export const docs = [
|
||||
},
|
||||
|
||||
{
|
||||
label: '类型',
|
||||
label: '🎼 类型',
|
||||
children: [
|
||||
{
|
||||
label: 'SchemaNode',
|
||||
@ -149,7 +149,7 @@ export const docs = [
|
||||
},
|
||||
|
||||
{
|
||||
label: '组件',
|
||||
label: '⚙ 组件',
|
||||
children: [
|
||||
{
|
||||
label: '组件介绍',
|
||||
@ -985,7 +985,17 @@ export default class Doc extends React.PureComponent {
|
||||
}
|
||||
|
||||
setDocFooter() {
|
||||
const flattenDocs = flattenTree(docs).filter(i => !!i.path);
|
||||
const newDocs = mapTree(docs, doc => ({
|
||||
...doc,
|
||||
children:
|
||||
Array.isArray(doc.children) && doc.children.length
|
||||
? doc.children.map(item => ({
|
||||
...item,
|
||||
group: doc.group || doc.label
|
||||
}))
|
||||
: null
|
||||
}));
|
||||
const flattenDocs = flattenTree(newDocs).filter(i => !!i.path);
|
||||
const docIndex = flattenDocs.findIndex(d => d.path === location.pathname);
|
||||
this.setState({
|
||||
prevDoc: flattenDocs[docIndex - 1],
|
||||
|
||||
@ -184,8 +184,6 @@ export default function (doc) {
|
||||
}
|
||||
|
||||
render() {
|
||||
console.log('this.props', this.props);
|
||||
|
||||
const {prevDoc, nextDoc} = this.props;
|
||||
|
||||
return (
|
||||
|
||||
@ -8,6 +8,7 @@ import LazyComponent from '../../src/components/LazyComponent';
|
||||
import {default as DrawerContainer} from '../../src/components/Drawer';
|
||||
import {Portal} from 'react-overlays';
|
||||
import {withRouter} from 'react-router';
|
||||
import copy from 'copy-to-clipboard';
|
||||
function loadEditor() {
|
||||
return new Promise(resolve =>
|
||||
require(['../../src/components/Editor'], component =>
|
||||
@ -30,6 +31,10 @@ export default function (schema) {
|
||||
this.setState({
|
||||
open: !this.state.open
|
||||
});
|
||||
copyCode = () => {
|
||||
copy(JSON.stringify(schema));
|
||||
toast.success('页面配置JSON已复制到粘贴板');
|
||||
};
|
||||
close = () =>
|
||||
this.setState({
|
||||
open: false
|
||||
@ -178,25 +183,48 @@ export default function (schema) {
|
||||
const ns = this.props.classPrefix;
|
||||
const showCode = this.props.showCode;
|
||||
return (
|
||||
<div className="schema-wrapper">
|
||||
<>
|
||||
<div className="schema-wrapper">
|
||||
{showCode !== false ? (
|
||||
<DrawerContainer
|
||||
classPrefix={ns}
|
||||
size="lg"
|
||||
onHide={this.close}
|
||||
show={this.state.open}
|
||||
overlay={false}
|
||||
closeOnOutside={true}
|
||||
position="right"
|
||||
>
|
||||
{this.state.open ? this.renderCode() : null}
|
||||
</DrawerContainer>
|
||||
) : null}
|
||||
{this.renderSchema()}
|
||||
</div>
|
||||
{showCode !== false ? (
|
||||
<DrawerContainer
|
||||
classPrefix={ns}
|
||||
size="lg"
|
||||
onHide={this.close}
|
||||
show={this.state.open}
|
||||
position="right"
|
||||
>
|
||||
{this.state.open ? this.renderCode() : null}
|
||||
</DrawerContainer>
|
||||
// <div className="schema-toolbar-wrapper">
|
||||
// <div onClick={this.toggleCode}>
|
||||
// 查看页面配置 <i className="fa fa-code p-l-xs"></i>
|
||||
// </div>
|
||||
// <div onClick={this.copyCode}>
|
||||
// 复制页面配置 <i className="fa fa-copy p-l-xs"></i>
|
||||
// </div>
|
||||
// </div>
|
||||
<div className="Doc-toc">
|
||||
<div className="Doc-headingList">
|
||||
<div className="Doc-headingList-item">
|
||||
<a onClick={this.toggleCode}>
|
||||
查看页面配置 <i className="fa fa-code p-l-xs"></i>
|
||||
</a>
|
||||
</div>
|
||||
<div className="Doc-headingList-item">
|
||||
<a onClick={this.copyCode}>
|
||||
复制页面配置 <i className="fa fa-copy p-l-xs"></i>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
) : null}
|
||||
{this.renderSchema()}
|
||||
{showCode !== false ? (
|
||||
<span onClick={this.toggleCode} className="view-code-btn">
|
||||
查看配置 <i className="fa fa-code p-l-xs"></i>
|
||||
</span>
|
||||
) : null}
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
@ -201,8 +201,8 @@ body {
|
||||
|
||||
.Doc {
|
||||
.anchor {
|
||||
padding-top: 110px;
|
||||
margin-top: -110px;
|
||||
padding-top: 100px;
|
||||
margin-top: -100px;
|
||||
}
|
||||
|
||||
a {
|
||||
@ -325,6 +325,10 @@ body {
|
||||
|
||||
a {
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
}
|
||||
|
||||
&.is-active {
|
||||
@ -380,7 +384,7 @@ body {
|
||||
}
|
||||
|
||||
&-footer {
|
||||
margin: 60px 0 80px;
|
||||
margin: 60px 40px 80px;
|
||||
padding-bottom: 25px;
|
||||
border-bottom: 2px solid #e0e8ef;
|
||||
|
||||
@ -439,33 +443,8 @@ body {
|
||||
}
|
||||
|
||||
> .schema-wrapper {
|
||||
.view-code-btn {
|
||||
position: absolute;
|
||||
font-weight: bold;
|
||||
right: -100px;
|
||||
top: 112px;
|
||||
color: #666;
|
||||
cursor: pointer;
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: -21px;
|
||||
bottom: 0;
|
||||
content: ' ';
|
||||
border-left: 1px solid #e8ebee;
|
||||
width: 1px;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: #333;
|
||||
}
|
||||
|
||||
> i {
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
flex: 1 auto;
|
||||
width: 0;
|
||||
> .a-Page,
|
||||
> .cxd-Page,
|
||||
> .dark-Page {
|
||||
@ -482,6 +461,33 @@ body {
|
||||
}
|
||||
}
|
||||
|
||||
.Backtop {
|
||||
position: fixed;
|
||||
right: 40px;
|
||||
bottom: 40px;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
text-align: center;
|
||||
line-height: 44px;
|
||||
border: 1px solid #e8ebee;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12),
|
||||
0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 9px 28px 8px rgba(0, 0, 0, 0.05);
|
||||
cursor: pointer;
|
||||
color: #666;
|
||||
font-size: 16px;
|
||||
transition: all 0.3s ease-in-out;
|
||||
opacity: 0;
|
||||
|
||||
&:hover {
|
||||
color: #108cee;
|
||||
}
|
||||
|
||||
&.visible {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@include media-breakpoint-up(lg) {
|
||||
.Doc {
|
||||
display: flex;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user