From 73fb4a929237cb55f3b4938194b594b53286733b Mon Sep 17 00:00:00 2001 From: EGOIST <0x142857@gmail.com> Date: Mon, 17 Dec 2018 23:23:16 +0800 Subject: [PATCH] feat(ui): add Note component --- src/components/Badge.vue | 40 +++++++-- src/components/Note.vue | 80 +++++++++++++++++ src/css/main.css | 25 ------ src/css/vars.css | 5 ++ src/index.js | 2 + website/docs/builtin-components.md | 121 +++++++++++++++++++++----- website/docs/zh/builtin-components.md | 108 +++++++++++++++++++---- 7 files changed, 315 insertions(+), 66 deletions(-) create mode 100644 src/components/Note.vue diff --git a/src/components/Badge.vue b/src/components/Badge.vue index fb27cbb7..3eb1a668 100644 --- a/src/components/Badge.vue +++ b/src/components/Badge.vue @@ -1,9 +1,9 @@ @@ -12,8 +12,7 @@ export default { name: 'Badge', props: { type: { - type: String, - default: 'tip' + type: String }, color: { type: String @@ -21,3 +20,34 @@ export default { } } + + diff --git a/src/components/Note.vue b/src/components/Note.vue new file mode 100644 index 00000000..8ad83304 --- /dev/null +++ b/src/components/Note.vue @@ -0,0 +1,80 @@ + + + + + diff --git a/src/css/main.css b/src/css/main.css index f2c8b041..b438e311 100644 --- a/src/css/main.css +++ b/src/css/main.css @@ -29,28 +29,3 @@ a { margin: 0 auto; } } - -/** Badge */ -.badge { - display: inline-block; - vertical-align: top; - font-size: 13px; - height: 18px; - line-height: 18px; - border-radius: 9px; - padding: 0 5px; - color: #fff; - margin-right: 5px; - - &.tip { - background: #42b983; - } - - &.warn, &.warning { - background: #e7c000; - } - - &.danger { - background: #d82f2f; - } -} diff --git a/src/css/vars.css b/src/css/vars.css index b7bdfe09..8fae66ba 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -6,4 +6,9 @@ --border-color: #eaeaea; --header-height: 60px; --code-font: SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace; + + --tip-color: rgb(6, 125, 247); + --success-color: #42b983; + --warning-color: #ff9800; + --danger-color: rgb(255, 0, 31); } diff --git a/src/index.js b/src/index.js index 9bb6bf50..51fe2360 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ import alternativeComponents from './utils/alternativeComponents' import ImageZoom from './components/ImageZoom.vue' import Badge from './components/Badge.vue' import DocuteSelect from './components/DocuteSelect.vue' +import Note from './components/Note.vue' import ExternalLinkIcon from './components/icons/ExternalLinkIcon.vue' // Built-in plugins @@ -18,6 +19,7 @@ import versionsPlugin from './plugins/versions' Vue.component(ImageZoom.name, ImageZoom) Vue.component(Badge.name, Badge) Vue.component(DocuteSelect.name, DocuteSelect) +Vue.component(Note.name, Note) Vue.component(ExternalLinkIcon.name, ExternalLinkIcon) Vue.use(alternativeComponents) diff --git a/website/docs/builtin-components.md b/website/docs/builtin-components.md index 67ca3ebf..98e54c72 100644 --- a/website/docs/builtin-components.md +++ b/website/docs/builtin-components.md @@ -6,14 +6,16 @@ Docute comes with a set of built-in Vue components. Use medium-style zoom effect to display certain image. -|Prop|Type|Default|Description| -|---|---|---|---| -|url|`string`|N/A|URL to image| -|alt|`string`|N/A|Placeholder text| -|border|`boolean`|`false`|Show border around image| -|width|`string`|N/A|Image width| +| Prop | Type | Default | Description | +| ------ | --------- | ------- | ------------------------ | +| url | `string` | N/A | URL to image | +| alt | `string` | N/A | Placeholder text | +| border | `boolean` | `false` | Show border around image | +| width | `string` | N/A | Image width | -Example: +
+ +Example: ```markdown - ## `` A small count and labeling component. -|Prop|Type|Default|Description| -|---|---|---|---| -|type|'tip' | 'warning' | 'danger'|`'tip'`|Badge type| -|color|`string`|N/A|Custom background color| -|children|`string`|N/A|Badge text| +| Prop | Type | Default | Description | +| -------- | --------------------------------------------------- | ------- | ----------------------- | +| type | 'tip' | 'success' | 'warning' | 'danger' | N/A | Badge type | +| color | `string` | N/A | Custom background color | +| children | `string` | N/A | Badge text | + +
Example: ```markdown -- Feature 1 Stable -- Feature 2 Beta -- Feature 3 Deprecated -- Feature 4 Custom Color +- Feature 1 Badge +- Feature 2 Tip +- Feature 3 Success +- Feature 4 Warning +- Feature 5 Danger +- Feature 6 Custom Color ``` -- Feature 1 Stable -- Feature 2 Beta -- Feature 3 Deprecated -- Feature 4 Custom Color +- Feature 1 Badge +- Feature 2 Tip +- Feature 3 Success +- Feature 4 Warning +- Feature 5 Danger +- Feature 6 Custom Color + +## `` + +Colored note blocks, to emphasize part of your page. + +| Prop | Type | Default | Description | +| -------- | ------------------------------------------------------------------- | ------------------- | ------------------------------------------------- | +| type | 'tip' | 'warning' | 'alert' | 'success' | N/A | Note type | +| label | `string` `boolean` | The value of `type` | Custom note label text, use `false` to hide label | +| children | `string` | N/A | Note content | + +
+ +Examples: + +```markdown + + +This is a note that details something important.
+[A link to helpful information.](https://docute.org) + + + + + + +This is a tip for something that is possible. + + + + + + +This is a warning for something very important. + + + + + + +This is a danger for something to take action for. + + +``` + + + +This is a note that details something important.
+[A link to helpful information.](https://docute.org) + + + + + + +This is a tip for something that is possible. + + + + + + +This is a warning for something very important. + + + + + + +This is a danger for something to take action for. + + ## `` `` diff --git a/website/docs/zh/builtin-components.md b/website/docs/zh/builtin-components.md index 23944755..cea86ef2 100644 --- a/website/docs/zh/builtin-components.md +++ b/website/docs/zh/builtin-components.md @@ -28,27 +28,105 @@ Docute 附带一些内置的 Vue 组件。 ## `` -用于计数和展示标签的组件。 +A small count and labeling component. -|属性|类型|默认值|描述| -|---|---|---|---| -|type|'tip' | 'warning' | 'danger'|`'tip'`|Badge 类型| -|color|`string`|N/A|自定义背景色| -|children|`string`|N/A|Badge 内容| +| Prop | Type | Default | Description | +| -------- | --------------------------------------------------- | ------- | ----------------------- | +| type | 'tip' | 'success' | 'warning' | 'danger' | N/A | Badge type | +| color | `string` | N/A | Custom background color | +| children | `string` | N/A | Badge text | -示例： +
+ +Example: ```markdown -- Feature 1 Stable -- Feature 2 Beta -- Feature 3 Deprecated -- Feature 4 Custom Color +- Feature 1 Badge +- Feature 2 Tip +- Feature 3 Success +- Feature 4 Warning +- Feature 5 Danger +- Feature 6 Custom Color ``` -- Feature 1 Stable -- Feature 2 Beta -- Feature 3 Deprecated -- Feature 4 Custom Color +- Feature 1 Badge +- Feature 2 Tip +- Feature 3 Success +- Feature 4 Warning +- Feature 5 Danger +- Feature 6 Custom Color + +## `` + +Colored note blocks, to emphasize part of your page. + +| Prop | Type | Default | Description | +| -------- | ------------------------------------------------------------------- | ------------------- | ------------------------------------------------- | +| type | 'tip' | 'warning' | 'alert' | 'success' | N/A | Note type | +| label | `string` `boolean` | The value of `type` | Custom note label text, use `false` to hide label | +| children | `string` | N/A | Note content | + +
+ +Examples: + +```markdown + + +This is a note that details something important.
+[A link to helpful information.](https://docute.org) + + + + + + +This is a tip for something that is possible. + + + + + + +This is a warning for something very important. + + + + + + +This is a danger for something to take action for. + + +``` + + + +This is a note that details something important.
+[A link to helpful information.](https://docute.org) + + + + + + +This is a tip for something that is possible. + + + + + + +This is a warning for something very important. + + + + + + +This is a danger for something to take action for. + + ## `` ``