text: webpackJsonp([62],{59:function(n,e){n.exports="## What's Omiu ?\n\nOmiu is a cross framework UI component library developed based on [OMI](https://github.com/tencent/omi), which outputs custom elements of standard web components. Any component can be used in any framework or frameless environment such as react, Vue, preact, OMI or native JS at the same time, which is very convenient. Overall, omiu has these characteristics:\n\n> [Omiu Codepen Collection](https://codepen.io/collection/XBJjke)\n\n* Cross frameworks \n* High quality UI interaction details\n* Integrated [all the MUI Icon](https://tencent.github.io/omi/components/icon/demos/icon.html)\n* Mobile terminal and PC share one set of components\n* Theme switching support at runtime (color, font, and fillets)\n* Components directly decoupled, independently polished, independently released, independently quoted\n* Extended HTML capabilities. You can pass false to an element through the string `'0'` or the string `'false'`\n\n## Usage\n\n### Install by script\n\n```html\n<script src=\"https://unpkg.com/omi\"><\/script>\n<script src=\"https://unpkg.com/@omiu/button\"><\/script>\n\n<o-button>I am button</o-button>\n```\n\n### Install by npm\n\n``` bash\nnpm install @omiu/button\n```\n\nImport to use it:\n\n```js\nimport '@omiu/button'\n```\n\nThen use it in any framework, such as Omi, react, Vue or angular:\n\n``` html\n<o-button>I am button</o-button>\n```\n\nYou can also use native JS:\n\n```js\nvar button = document.createElement('o-button')\nbutton.innerHTML = 'I am omiu button'\ndocument.body.append(button)\nbutton.addEventListener('click', function () {\n  console.log('Clicked!')\n})\n\n//or\n//document.body.innerHTML = '<o-button>I am omiu button</o-button>'\n```\n\n## HTML Extension \n\nWhen the default value is true and you need to pass false to the element, it used to be a historical problem. OMI has solved this problem perfectly. You can set it through the string `'0'` or the string `'false'`.\n\n```js\ndefine('my-element', class extends WeElement {\n  static defaultProps = {\n    show: true\n  }\n\n static propTypes = {\n    show: Boolean\n  }\n\n  render(props) {\n    ...\n    ...\n  }\n})\n```\n\nUse:\n\n```html\n<my-element show=\"false\"></my-element>\n```\n\nor\n\n```html\n<my-element show=\"0\"></my-element>\n```\n\n\n## Using omiu in Vue\n\n```html\n<script>\nimport '@omiu/icon-button'\n\nexport default {\n  name: 'HelloWorld',\n  data: function() {\n    return {\n      result: false\n    }\n  },\n  methods: {\n    myEvent: function(evt) {\n      this.result = evt.detail.isOn\n    }\n  }\n}\n<\/script>\n\n<template>\n  <div class=\"component\">\n    <p>The switch is {{result? 'on' : 'off'}}</p>\n    <o-icon-button color=\"red\" icons=\"['favorite', 'favorite_border']\" @change=\"myEvent\"></o-icon-button>\n  </div>\n</template>\n```\n\n## Using omiu in preact\n\n```tsx\nimport { useState, h } from 'preact'\nimport '@omiu/icon-button'\n\nexport default function SomeComponent(props) {\n    const [result, setSwitch] = useState(false)\n\n    return (\n      <div>\n        <p>The switch is {result ? 'on' : 'off'}</p>\n        <o-icon-button color=\"red\" icons=\"['favorite', 'favorite_border']\" onChange={e => setSwitch(e.detail.isOn)}>\n        </o-icon-button>\n      </div>\n    )\n}\n```\n\n\n## Using omiu in react\n\n```tsx\n/** @jsx nativeEvents */\nimport nativeEvents from 'jsx-native-events'\nimport { useState } from 'react'\nimport '@omiu/icon-button'\n\nexport default function SomeComponent(props) {\n    const [result, setSwitch] = useState(false)\n\n    return (\n      <div>\n        <p>The switch is {result ? 'on' : 'off'}</p>\n        <o-icon-button color=\"red\" icons=\"['favorite', 'favorite_border']\" onEventChange={e => setSwitch(e.detail.isOn)}>\n        </o-icon-button>\n      </div>\n    )\n}\n```\n\nMany thanks to calebdwilliams's [jsx-native-events](https://github.com/calebdwilliams/jsx-native-events#readme)\u3002\n\n\n## Event triggering and binding best practices\n\nDue to the need for cross framework, in order to unify component behavior in event binding, best practices for component development and use are given here. The event triggering of the omiu component is in the form of lowercase or lowercase + middle dash:\n\n```js\nthis.fire('change')\nthis.fire('my-event')\n```\n\nIn Omi or Preact :\n\n```jsx\n<my-ele onchange={this.changeHandler} onmy-event={this.myEventHandler}></my-ele>\n```\n\nIn Vue:\n\n```html\n<my-ele @change=\"changeHandler\" @my-event=\"myEventHandler\"></my-ele>\n```\n\nIn React:\n\n```jsx\n/** @jsx nativeEvents */\nimport nativeEvents from 'jsx-native-events'\n\n...\n...\n<my-ele onEventChange={this.changeHandler} onEventMyEvent={this.myEventHandler}></my-ele>\n```\n\n## Contribution\n\nBuild:\n\n```bash\nnpm run build\n```\n\nBuild Demo:\n\n```bash\nnpm start \n```\n\nGenerate the docs:\n\n```bash\nnpm run docs\n```\n\nPublic to npm:\n\n```bash\nnpm publish --access public\n```\n\n\n"}});
  //# sourceMappingURL=62.29505e4e.chunk.js.map