From 4a2286c3ff4df3d34b6e7466586f2e80cb59b614 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AB=98=E5=AE=81?= Date: Tue, 1 Nov 2016 11:43:01 +0800 Subject: [PATCH] update site appearnce --- libs/markdown/index.js | 19 +++- site/docs/zh-CN/badge.md | 71 +++++++++++++ site/docs/zh-CN/progress.md | 52 ++++++++++ site/pages/badge/index.js | 75 +------------- site/pages/badge/style.scss | 4 +- site/pages/index.js | 96 ++++++++++++------ site/pages/progress/index.js | 44 +-------- site/pages/progress/style.scss | 14 +-- site/pages/style/base.scss | 175 ++++++++++++++++++--------------- 9 files changed, 318 insertions(+), 232 deletions(-) create mode 100644 site/docs/zh-CN/badge.md create mode 100644 site/docs/zh-CN/progress.md diff --git a/libs/markdown/index.js b/libs/markdown/index.js index 05f2919fc..f4d678375 100644 --- a/libs/markdown/index.js +++ b/libs/markdown/index.js @@ -44,7 +44,17 @@ export default class Markdown extends Component { const renderer = new marked.Renderer(); renderer.code = (text) => { - return text + if (/demo-block/.test(text)) { + return text; + } else { + return ` +
+ 
+              ${highlight.highlightAuto(text).value}
+
+
+ ` + } } marked.setOptions({ @@ -54,12 +64,13 @@ export default class Markdown extends Component { }); const html = marked(this.props.children.replace(/:::\s?demo\s?([^]+?):::/g, (match, p1, offset) => { - return p1.replace(/(.*)\n?(```[^]+)/, (match, p1, p2) => { + return p1.replace(/([^]*)\n?(```[^]+```)/, (match, p1, p2) => { const id = offset.toString(36); const matched = p2.match(/```(.*)\n([^]+)```/); const lang = matched[1], code = matched[2].replace(/this/g, 'context'); - let transformTarget = null + let transformTarget = null; + if (lang === 'javascript'){ transformTarget = code }else{ @@ -76,7 +87,7 @@ export default class Markdown extends Component {
-
${marked(p1)}
+
${p1 && marked(p1)}
${marked(p2)}
diff --git a/site/docs/zh-CN/badge.md b/site/docs/zh-CN/badge.md new file mode 100644 index 000000000..d9334d674 --- /dev/null +++ b/site/docs/zh-CN/badge.md @@ -0,0 +1,71 @@ +## Badge 标记 + +出现在按钮、图标旁的数字或状态标记。 + +### 基础用法 +展示新消息数量。 + +:::demo 定义`value`属性，它接受`Number`或者`String`。 + +```html + + + + + + + +``` +::: + +### 最大值 +可自定义最大值。 + +:::demo 由`max`属性定义，它接受一个`Number`，需要注意的是，只有当`value`为`Number`时，它才会生效。 + +```html + + + + + + +``` +::: + +### 自定义内容 +可以显示数字以外的文本内容。 + +:::demo 定义`value`为`String`类型是时可以用于显示自定义文本。 + +```html + + + + + + +``` +::: + +### 小红点 +以红点的形式标注需要关注的内容。 + +:::demo 除了数字外，设置`isDot`属性，它接受一个`Boolean`。 + +```html + + 数据查询 + + + + +``` +::: + +### Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|------------- |---------------- |---------------- |---------------------- |-------- | +| value | 显示值 | string, number | — | — | +| max | 最大值，超过最大值会显示 '{max}+'，要求 value 是 Number 类型 | number | — | — | +| isDot | 小圆点 | boolean | — | false | diff --git a/site/docs/zh-CN/progress.md b/site/docs/zh-CN/progress.md new file mode 100644 index 000000000..7191b70b3 --- /dev/null +++ b/site/docs/zh-CN/progress.md @@ -0,0 +1,52 @@ +## Progress 进度条 + +用于展示操作进度，告知用户当前状态和预期。 + +### 线形进度条 — 百分比外显 + +:::demo Progress 组件设置`percentage`属性即可，表示进度条对应的百分比，**必填**，必须在 0-100。 + +```html + + + + +``` +::: + +### 线形进度条 — 百分比内显 + +百分比不占用额外控件，适用于文件上传等场景。 + +:::demo Progress 组件可通过 `stroke-width` 属性更改进度条的高度，并可通过 `desc-inside` 属性来将进度条描述置于进度条内部。 + +```html + + + + +``` +::: + +### 环形进度条 + +:::demo Progress 组件可通过 `type` 属性来指定使用环形进度条，在环形进度条中，还可以通过 `width` 属性来设置其大小。 + +```html + + + + +``` +::: + +### Attributes +| 参数 | 说明 | 类型 | 可选值 | 默认值 | +|------------- |---------------- |---------------- |---------------------- |-------- | +| **percentage** | **百分比（必填）** | number | 0-100 | 0 | +| type | 进度条类型 | string | line/circle | line | +| stroke-width | 进度条的宽度，单位 px | number | — | 6 | +| text-inside | 进度条显示文字内置在进度条内（只在 type=line 时可用） | Boolean | — | false | +| status | 进度条当前状态 | string | success/exception | — | +| width | 环形进度条画布宽度（只在 type=circle 时可用） | number | | 126 | +| show-text | 是否显示进度条文字内容 | boolean | — | true | diff --git a/site/pages/badge/index.js b/site/pages/badge/index.js index 6da608325..ac196ffe5 100644 --- a/site/pages/badge/index.js +++ b/site/pages/badge/index.js @@ -1,76 +1,11 @@ -import React from 'react'; -import { Button, Badge } from '../../../src'; - import './style.scss'; +import React from 'react'; +import { Component, Markdown } from '../../../libs'; +import template from '../../docs/zh-CN/badge.md'; + export default class Playground extends React.Component { render() { - return ( -
-
-
-

Badge 标记

-

出现在按钮、图标旁的数字或状态标记。

-
-
-
-
-

基础用法

-

展示新消息数量。

-
-
- - - - - - - -
-
-
-
-

最大值

-

可自定义最大值。

-
-
- - - - - - -
-
-
-
-

自定义内容

-

可以显示数字以外的文本内容。

-
-
- - - - - - -
-
-
-
-

小红点

-

以红点的形式标注需要关注的内容。

-
-
- - 数据查询 - - - - -
-
-
- ) + return {template} } } diff --git a/site/pages/badge/style.scss b/site/pages/badge/style.scss index 341288aba..42ed4596f 100644 --- a/site/pages/badge/style.scss +++ b/site/pages/badge/style.scss @@ -1,3 +1,5 @@ .demo-badge { - margin-right: 40px; + .el-badge { + margin-right: 40px; + } } diff --git a/site/pages/index.js b/site/pages/index.js index 732b97433..5851612e6 100644 --- a/site/pages/index.js +++ b/site/pages/index.js @@ -21,39 +21,63 @@ import Tree from './tree' // pages是有序的Object, 会影响到左侧的菜单顺序. const pages = { - layout: { title: 'Layout 布局', component: Layout }, - button: { title: 'Button 按钮', component: Button }, - radio: { title: 'Radio 单选框', component: Radio }, - progress: { title: 'Progress 进度条', component: Progress }, - tree: { title: 'Tree 树形控件', component: Tree }, - badge: { title: 'Badge 标记', component: Badge }, - alert: { title: 'Alert 警告', component: Alert }, - loading: { title: 'Loading 加载', component: Loading }, - message: { title: 'Message 消息提示', component: Message }, - messageBox: { title: 'Message Box 弹框', component: MessageBox }, - notification: { title: 'Notification 通知', component: Notification }, - dialog: { title: 'Dialog 对话框', component: Dialog }, - card: { title: 'Card 卡片', component: Card } + 'Basic': { + layout: { title: 'Layout 布局', component: Layout }, + button: { title: 'Button 按钮', component: Button }, + }, + 'Form': { + radio: { title: 'Radio 单选框', component: Radio }, + }, + 'Data': { + progress: { title: 'Progress 进度条', component: Progress }, + tree: { title: 'Tree 树形控件', component: Tree }, + badge: { title: 'Badge 标记', component: Badge }, + }, + 'Notice': { + alert: { title: 'Alert 警告', component: Alert }, + loading: { title: 'Loading 加载', component: Loading }, + message: { title: 'Message 消息提示', component: Message }, + messageBox: { title: 'Message Box 弹框', component: MessageBox }, + notification: { title: 'Notification 通知', component: Notification }, + }, + 'Nav': { + + }, + 'Others': { + dialog: { title: 'Dialog 对话框', component: Dialog }, + card: { title: 'Card 卡片', component: Card } + } }; -const HASH_OFFSET = 1 class App extends React.Component { constructor(props) { super(props); this.state = { - page: location.hash.substr(HASH_OFFSET) || 'layout' // Do not change this line + page: this.getPage() || 'layout' // Do not change this line }; } componentDidMount() { window.addEventListener("hashchange", e => { this.setState({ - page: location.hash.substr(HASH_OFFSET) + page: this.getPage() }) }, false); } + getPage() { + return location.hash.substr(1); + } + + getComponent(page) { + this.components = this.components || Object.assign.apply(this, [{}].concat(Object.keys(pages).map(group => { + return pages[group] + }))); + + return this.components[page].component; + } + render() { return (
@@ -61,32 +85,42 @@ class App extends React.Component {

Element-React

-
) } - - onSelect(page) { - this.setState({ page }) - } } ReactDOM.render(, document.getElementById('app')); diff --git a/site/pages/progress/index.js b/site/pages/progress/index.js index ed1bf8a0c..55d0fbad7 100644 --- a/site/pages/progress/index.js +++ b/site/pages/progress/index.js @@ -1,49 +1,11 @@ import './style.scss'; import React from 'react'; -import { Progress } from '../../../src'; +import { Component, Markdown } from '../../../libs'; +import template from '../../docs/zh-CN/progress.md'; export default class Playground extends React.Component { render() { - return ( -
-
-
-

Progress 进度条

-

用于展示操作进度，告知用户当前状态和预期。

-

线形进度条 — 百分比外显

-
-
- - - - -
-
-
-
-

线形进度条 — 百分比外显

-

百分比不占用额外控件，适用于文件上传等场景。

-
-
- - - - -
-
-
-
-

环形进度条

-
-
- - - - -
-
-
- ) + return {template} } } diff --git a/site/pages/progress/style.scss b/site/pages/progress/style.scss index dcfdacb02..b310c71e9 100644 --- a/site/pages/progress/style.scss +++ b/site/pages/progress/style.scss @@ -1,7 +1,9 @@ -.demo-progress .el-progress--line { - margin-bottom: 15px; - width: 350px; -} -.demo-progress .el-progress--circle { - margin-right: 15px; +.demo-box.demo-progress { + .el-progress--line { + margin-bottom: 15px; + width: 350px; + } + .el-progress--circle { + margin-right: 15px; + } } diff --git a/site/pages/style/base.scss b/site/pages/style/base.scss index d78b64c3c..3b694d6f1 100644 --- a/site/pages/style/base.scss +++ b/site/pages/style/base.scss @@ -30,94 +30,107 @@ body { .main { display: flex; + } +} - .menu { - padding: 25px; - border-right: 1px solid #f0f0f0; - - ul { - list-style: none; - } +.content { + flex: 1; + padding: 25px; + overflow: hidden; - .menu-item { - width: 200px; - font-size: 13px; - color: #5e6d82; - line-height: 40px; - height: 40px; - cursor: pointer; - - a { - display: block; - height: 40px; - line-height: 40px; - font-size: 13px; - padding-left: 24px; - color: #5e6d82; - margin: 0; - padding: 0; - text-decoration: none; - position: relative; - -webkit-transition: all .3s; - transition: all .3s; - } - - a:hover { - color: #20a0ff; - } - } - } + h2 { + font-size: 28px; + color: #1f2d3d; + margin: 0; + } - .content { - flex: 1; - padding: 25px; - overflow: hidden; + h3 { + font-size: 22px; + margin: 45px 0 15px; + } - h2 { - font-size: 28px; - color: #1f2d3d; - margin: 0; - } + h2, h3, h4, h5 { + font-weight: normal; + color: #1f2f3d; + } - h3 { - font-size: 22px; - margin: 45px 0 15px; - } + table { + border-collapse: collapse; + width: 100%; + background-color: #fff; + color: #5e6d82; + font-size: 14px; + margin-bottom: 45px; - h2, h3, h4, h5 { - font-weight: normal; - color: #1f2f3d; - } + strong { + font-weight: normal; + } - table { - border-collapse: collapse; - width: 100%; - background-color: #fff; - color: #5e6d82; - font-size: 14px; - margin-bottom: 45px; + th { + text-align: left; + border-top: 1px solid #eaeefb; + background-color: #EFF2F7; + } - strong { - font-weight: normal; - } + td, th { + border-bottom: 1px solid #eaeefb; + padding: 10px; + } - th { - text-align: left; - border-top: 1px solid #eaeefb; - background-color: #EFF2F7; - } + th:first-child, td:first-child { + padding-left: 10px; + } + } +} - td, th { - border-bottom: 1px solid #eaeefb; - padding: 10px; - } +.side-nav { + width: 200px; + padding: 30px; - th:first-child, td:first-child { - padding-left: 10px; + li { + list-style: none; + } + ul { + padding: 0; + margin: 0; + overflow: hidden; + } + .nav-item { + a { + font-size: 16px; + color: #5e6d82; + line-height: 40px; + height: 40px; + margin: 0; + padding: 0; + text-decoration: none; + display: block; + position: relative; + transition: all .3s; + &.active { + color: #20a0ff; + } + } + .nav-item { + a { + display: block; + height: 40px; + line-height: 40px; + font-size: 13px; + padding-left: 24px; + &:hover { + color: #20a0ff; } } } } + .nav-group__title { + font-size: 12px; + color: #99a9bf; + padding-left: 8px; + line-height: 26px; + margin-top: 10px; + } } .demo-block { @@ -171,15 +184,19 @@ body { .highlight { width: 60%; + display: flex; + } + + pre { + background-color: #f9fafc; + overflow-x: auto; + padding: 18px 24px; line-height: 1.8; font-size: 12px; - background-color: #f9fafc; - display: flex; + } - pre { - overflow-x: auto; - padding: 18px 24px; - } + pre.fixed { + white-space: pre-line; } .demo-block-control {