doc(element)

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'
             }
           ]
         },

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;
+}
+```

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
+```

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 }
     ])
   },
   {