feat(ui): custom color support in Badge component

egoist · Dec 17, 2018 · 9c3e8db · 9c3e8db
1 parent 5a3ebd0
commit 9c3e8db
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 5 deletions.
diff --git a/src/components/Badge.vue b/src/components/Badge.vue
@@ -1,5 +1,10 @@
 <template functional>
-  <span class="badge" :class="props.type"> <slot></slot> </span>
+  <span
+    class="badge"
+    :class="props.type"
+    :style="{backgroundColor: props.color}"
+    ><slot></slot>
+  </span>
 </template>
 
 <script>
@@ -9,6 +14,9 @@ export default {
     type: {
       type: String,
       default: 'tip'
+    },
+    color: {
+      type: String
     }
   }
 }

diff --git a/website/docs/builtin-components.md b/website/docs/builtin-components.md
@@ -33,6 +33,7 @@ A small count and labeling component.
 |Prop|Type|Default|Description|
 |---|---|---|---|
 |type|<code>'tip' &#x7C; 'warning' &#x7C; 'danger'</code>|`'tip'`|Badge type|
+|color|`string`|N/A|Custom background color|
 |children|`string`|N/A|Badge text|
 
 Example:
@@ -41,11 +42,13 @@ Example:
 - Feature 1 <Badge>Stable</Badge>
 - Feature 2 <Badge type="warning">Beta</Badge>
 - Feature 3 <Badge type="danger">Deprecated</Badge>
+- Feature 4 <Badge color="magenta">Custom Color</Badge>
 ```
 
 - Feature 1 <Badge>Stable</Badge>
 - Feature 2 <Badge type="warning">Beta</Badge>
 - Feature 3 <Badge type="danger">Deprecated</Badge>
+- Feature 4 <Badge color="magenta">Custom Color</Badge>
 
 ## `<v-style>` `<v-script>`
 

diff --git a/website/docs/zh/builtin-components.md b/website/docs/zh/builtin-components.md
@@ -33,19 +33,22 @@ Docute 附带一些内置的 Vue 组件。
 |属性|类型|默认值|描述|
 |---|---|---|---|
 |type|<code>'tip' &#x7C; 'warning' &#x7C; 'danger'</code>|`'tip'`|Badge 类型|
+|color|`string`|N/A|自定义背景色|
 |children|`string`|N/A|Badge 内容|
 
 示例：
 
 ```markdown
-- Feature 1 <Badge>稳定</Badge>
+- Feature 1 <Badge>Stable</Badge>
 - Feature 2 <Badge type="warning">Beta</Badge>
-- Feature 3 <Badge type="danger">弃用</Badge>
+- Feature 3 <Badge type="danger">Deprecated</Badge>
+- Feature 4 <Badge color="magenta">Custom Color</Badge>
 ```
 
-- Feature 1 <Badge>稳定</Badge>
+- Feature 1 <Badge>Stable</Badge>
 - Feature 2 <Badge type="warning">Beta</Badge>
-- Feature 3 <Badge type="danger">弃用</Badge>
+- Feature 3 <Badge type="danger">Deprecated</Badge>
+- Feature 4 <Badge color="magenta">Custom Color</Badge>
 
 ## `<v-style>` `<v-script>`