docs: readme

README.CN.md

@@ -1,7 +1,6 @@
 [English](./README.md) | 简体中文 
 
 <p align="center"><img src="https://tencent.github.io/omi/assets/logo.svg" alt="omi" width="100"/></p>
-<p align="center"><img src="https://tencent.github.io/omi/assets/omi-v6.jpg" alt="omi" width="1000"/></p>
 <h2 align="center">Omi - 前端跨框架跨平台框架</h2>
 <p align="center"><b>基于 Web Components 跨框架并支持小程序开发(omi-kbone)</b></p>
 

README.md

@@ -1,9 +1,7 @@
 English | [简体中文](./README.CN.md) 
 
 <p align="center"><img src="https://tencent.github.io/omi/assets/logo.svg" alt="omi" width="100"/></p>
-<p align="center"><img src="https://tencent.github.io/omi/assets/omi-v6.jpg" alt="omi" width="1000"/></p>
 <h2 align="center">Omi -  Front End Cross-Frameworks Framework</h2>
-<p align="center">Merge Web Components, JSX, Virtual DOM, Functional style, observe or Proxy into one framework with tiny size and high performance. Write components once, using in everywhere, such as Omi, React, Preact, Vue or Angular.</p>
 
 ## With TypeScript
 

index.html

@@ -320,32 +320,70 @@
   </div>
   <pre style="position:absolute;left:40px;top:40px;transform:rotateZ(5deg);pointer-events: none;text-transform:none;">
       <code>
-import { define, render } from 'omi'
+import { tag, WeElement, h, extractClass } from 'omi'
+import * as css from './index.scss'
 
-class Store {
-  data = {
-    count: 1
-  }
-  sub = () => {
-    this.data.count--
-  }
-  add = () => {
-    this.data.count++
-  }
+interface Props {
+  size?: 'medium' | 'small' | 'mini',
+  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text'
+  plain?: boolean,
+  round?: boolean,
+  circle?: boolean,
+  loading?: boolean,
+  disabled?: boolean,
+  icon?: string,
+  autofocus?: boolean,
+  nativeType?: 'button' | 'submit' | 'reset',
+  block?: boolean
+  text?: string
 }
 
-define('my-counter', _ =>
-  &lt;&gt;
-    &lt;button onClick={_.store.sub}&gt;-&lt;/button&gt;
-    &lt;span&gt;{_.store.data.count}&lt;/span&gt;
-    &lt;button onClick={_.store.add}&gt;+&lt;/button&gt;
-  &lt;/&gt;, {
-    use: ['count']
-  }
-))
+@tag('o-button')
+export default class Button extends WeElement&lt;Props&gt;{
+  static css = css
 
-render(&lt;my-counter /&gt;, 'body', new Store)
-       </code>
+  static defaultProps = {
+    plain: false,
+    round: false,
+    circle: false,
+    loading: false,
+    disabled: false,
+    autofocus: false,
+    nativeType: 'button',
+    block: false
+  }
+
+  static propTypes = {
+    size: String,
+    type: String,
+    plain: Boolean,
+    round: Boolean,
+    circle: Boolean,
+    loading: Boolean,
+    disabled: Boolean,
+    icon: String,
+    autofocus: Boolean,
+    nativeType: String,
+    block: Boolean,
+    text: String
+  }
+
+  render(props) {
+    return &lt;button disabled={props.disabled} {...extractClass(props, 'o-button', {
+      ['o-button-' + props.type]: props.type,
+      ['o-button-' + props.size]: props.size,
+      'is-plain': props.plain,
+      'is-round': props.round,
+      'is-circle': props.circle,
+      'is-disabled': props.disabled,
+      'is-block': props.block
+    })} type={props.nativeType} &gt;
+      {props.loading && &lt;i class='icon-loading'&gt;&lt;/i&gt;}
+      {props.text}
+      &lt;slot&gt;&lt;/slot&gt;
+    &lt;/button&gt;
+  }
+}</code>
   </pre>
 
 
@@ -369,4 +407,4 @@ render(&lt;my-counter /&gt;, 'body', new Store)
   </script>
 </body>
 
-</html>
+</html>