From a23e21e0333a628c7bc56c54c57e2b565d6f9a2e Mon Sep 17 00:00:00 2001
From: 07akioni <07akioni2@gmail.com>
Date: Tue, 10 Dec 2019 22:42:17 +0800
Subject: [PATCH] doc(element)

---
 demo/demo.vue                                 |  4 ++++
 .../components/element/enUS/basic.md          | 23 +++++++++++++++++++
 .../components/element/enUS/index.md          |  6 +++++
 .../components/element/index.entry            |  0
 .../components/element/zhCN/index.md          |  0
 demo/init.js                                  |  4 +++-
 6 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 demo/documentation/components/element/enUS/basic.md
 create mode 100644 demo/documentation/components/element/enUS/index.md
 create mode 100644 demo/documentation/components/element/index.entry
 create mode 100644 demo/documentation/components/element/zhCN/index.md

diff --git a/demo/demo.vue b/demo/demo.vue
index 5c6bc1298..59ceb65c8 100644
--- a/demo/demo.vue
+++ b/demo/demo.vue
@@ -76,6 +76,10 @@ export default {
             {
               name: 'Config Consumer',
               path: `/${this.lang}/${this.theme}` + '/n-config-consumer'
+            },
+            {
+              name: 'Element',
+              path: `/${this.lang}/${this.theme}` + '/n-element'
             }
           ]
         },
diff --git a/demo/documentation/components/element/enUS/basic.md b/demo/documentation/components/element/enUS/basic.md
new file mode 100644
index 000000000..df2f59cb8
--- /dev/null
+++ b/demo/documentation/components/element/enUS/basic.md
@@ -0,0 +1,23 @@
+# Basic
+When Config Provider provides dark theme, it applies `n-dark-theme` class on it. When Config Provider provides light theme, it applies `n-light-theme` class on it. If Neither, it won't apply any additional class on it. Just like other themed Naive UI components.
+
+It is very helpful to create themed component.
+
+```html
+<n-element as="span" class="myel">
+  My Element
+</n-element>
+```
+```css
+.myel {
+  transition: color .3s cubic-bezier(.4, 0, .2, 1);
+}
+
+.myel.n-light-theme {
+  color: green;
+}
+
+.myel.n-dark-theme {
+  color: yellow;
+}
+```
\ No newline at end of file
diff --git a/demo/documentation/components/element/enUS/index.md b/demo/documentation/components/element/enUS/index.md
new file mode 100644
index 000000000..8a3c9993c
--- /dev/null
+++ b/demo/documentation/components/element/enUS/index.md
@@ -0,0 +1,6 @@
+# Element
+Element is similar to config consumer but has different class apply to it when theme changes.
+# Demos
+```demo
+basic
+```
\ No newline at end of file
diff --git a/demo/documentation/components/element/index.entry b/demo/documentation/components/element/index.entry
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/documentation/components/element/zhCN/index.md b/demo/documentation/components/element/zhCN/index.md
new file mode 100644
index 000000000..e69de29bb
diff --git a/demo/init.js b/demo/init.js
index d220e451e..4a6b696a8 100644
--- a/demo/init.js
+++ b/demo/init.js
@@ -75,6 +75,7 @@ import thing from './documentation/components/thing'
 import autoComplete from './documentation/components/autoComplete'
 import empty from './documentation/components/empty'
 import theme from './documentation/theme'
+import element from './documentation/components/element'
 
 import demo from './demo'
 import ComponentDemo from './utils/ComponentDemo'
@@ -201,7 +202,8 @@ const routes = [
       { path: '/n-thing', component: thing },
       { path: '/n-auto-complete', component: autoComplete },
       { path: '/n-empty', component: empty },
-      { path: '/n-theme', component: theme }
+      { path: '/n-theme', component: theme },
+      { path: '/n-element', component: element }
     ])
   },
   {