DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

docs: rebuild

This commit is contained in:
dntzhang 2020-05-06 21:52:08 +08:00
parent f1fa66e300
commit 344f8dc151
13 changed files with 62 additions and 40 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

66
components/docs-src/src/docs/en/introduction.md
View File

@ -88,28 +88,6 @@ or
<my-element show="0"></my-element>
```
## Using omiu in react
```tsx
/** @jsx nativeEvents */
import nativeEvents from 'jsx-native-events'
import { useState } from 'react'
import '@omiu/icon-button'
export default function SomeComponent(props) {
const [result, setSwitch] = useState(false)
return (
<div>
<p>The switch is {result ? 'on' : 'off'}</p>
<o-icon-button color="red" icons="['favorite', 'favorite_border']" onEventChange={e => setSwitch(e.detail.isOn)}>
</o-icon-button>
</div>
)
}
```
Many thanks to calebdwilliams's [jsx-native-events](https://github.com/calebdwilliams/jsx-native-events#readme)。
## Using omiu in Vue
@ -140,6 +118,50 @@ export default {
</template>
```
## Using omiu in preact
```tsx
import { useState, h } from 'preact'
import '@omiu/icon-button'
export default function SomeComponent(props) {
const [result, setSwitch] = useState(false)
return (
<div>
<p>The switch is {result ? 'on' : 'off'}</p>
<o-icon-button color="red" icons="['favorite', 'favorite_border']" onChange={e => setSwitch(e.detail.isOn)}>
</o-icon-button>
</div>
)
}
```
## Using omiu in react
```tsx
/** @jsx nativeEvents */
import nativeEvents from 'jsx-native-events'
import { useState } from 'react'
import '@omiu/icon-button'
export default function SomeComponent(props) {
const [result, setSwitch] = useState(false)
return (
<div>
<p>The switch is {result ? 'on' : 'off'}</p>
<o-icon-button color="red" icons="['favorite', 'favorite_border']" onEventChange={e => setSwitch(e.detail.isOn)}>
</o-icon-button>
</div>
)
}
```
Many thanks to calebdwilliams's [jsx-native-events](https://github.com/calebdwilliams/jsx-native-events#readme)。
## Event triggering and binding best practices
Due 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:

12
components/docs/asset-manifest.json
View File

@ -1,12 +1,12 @@
{
"cn.css": "static/css/cn.0726442c.css",
"cn.css.map": "static/css/cn.0726442c.css.map",
"cn.js": "static/js/cn.9e0624fc.js",
"cn.js.map": "static/js/cn.9e0624fc.js.map",
"cn.js": "static/js/cn.8f3f373d.js",
"cn.js.map": "static/js/cn.8f3f373d.js.map",
"index.css": "static/css/index.0726442c.css",
"index.css.map": "static/css/index.0726442c.css.map",
"index.js": "static/js/index.2c789b25.js",
"index.js.map": "static/js/index.2c789b25.js.map",
"index.js": "static/js/index.5719c92d.js",
"index.js.map": "static/js/index.5719c92d.js.map",
"static/js/0.0e3827aa.chunk.js": "static/js/0.0e3827aa.chunk.js",
"static/js/0.0e3827aa.chunk.js.map": "static/js/0.0e3827aa.chunk.js.map",
"static/js/1.1524fda4.chunk.js": "static/js/1.1524fda4.chunk.js",
@ -111,8 +111,8 @@
"static/js/54.31ccdf38.chunk.js.map": "static/js/54.31ccdf38.chunk.js.map",
"static/js/55.7ec9c6f5.chunk.js": "static/js/55.7ec9c6f5.chunk.js",
"static/js/55.7ec9c6f5.chunk.js.map": "static/js/55.7ec9c6f5.chunk.js.map",
"static/js/56.053d4447.chunk.js": "static/js/56.053d4447.chunk.js",
"static/js/56.053d4447.chunk.js.map": "static/js/56.053d4447.chunk.js.map",
"static/js/56.404fc266.chunk.js": "static/js/56.404fc266.chunk.js",
"static/js/56.404fc266.chunk.js.map": "static/js/56.404fc266.chunk.js.map",
"static/js/57.8632628f.chunk.js": "static/js/57.8632628f.chunk.js",
"static/js/57.8632628f.chunk.js.map": "static/js/57.8632628f.chunk.js.map",
"static/js/58.9dcc32a2.chunk.js": "static/js/58.9dcc32a2.chunk.js",

2
components/docs/cn.html
View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>OMIU - Cross-Frameworks UI Framework</title><link href="./static/css/cn.0726442c.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/cn.9e0624fc.js"></script></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>OMIU - Cross-Frameworks UI Framework</title><link href="./static/css/cn.0726442c.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/cn.8f3f373d.js"></script></body></html>

2
components/docs/index.html
View File

@ -1 +1 @@
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>OMIU - Cross-Frameworks UI Framework</title><link href="./static/css/index.0726442c.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.2c789b25.js"></script></body></html>
<!doctype html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="shortcut icon" href="./favicon.ico"><link rel="stylesheet" href="./highlight/prism.css"><style>*{-webkit-tap-highlight-color:rgba(255,255,255,0);-moz-user-focus:none}</style><title>OMIU - Cross-Frameworks UI Framework</title><link href="./static/css/index.0726442c.css" rel="stylesheet"></head><body><script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script><script src="./highlight/prism.js"></script><script src="./js/remarkable.min.js"></script><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="./static/js/index.5719c92d.js"></script></body></html>

2
components/docs/service-worker.js
View File

File diff suppressed because one or more lines are too long

2
components/docs/static/js/56.053d4447.chunk.js vendored
View File

@ -1,2 +0,0 @@
webpackJsonp([56],{58: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## 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## 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## 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=56.053d4447.chunk.js.map

1
components/docs/static/js/56.053d4447.chunk.js.map vendored
View File

File diff suppressed because one or more lines are too long

2
components/docs/static/js/56.404fc266.chunk.js vendored Normal file
View File

@ -0,0 +1,2 @@
webpackJsonp([56],{58: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=56.404fc266.chunk.js.map

1
components/docs/static/js/56.404fc266.chunk.js.map vendored Normal file
View File

File diff suppressed because one or more lines are too long

4
components/docs/static/js/cn.9e0624fc.js → components/docs/static/js/cn.8f3f373d.js vendored
View File

File diff suppressed because one or more lines are too long

2
components/docs/static/js/cn.9e0624fc.js.map → components/docs/static/js/cn.8f3f373d.js.map vendored
View File

File diff suppressed because one or more lines are too long

4
components/docs/static/js/index.2c789b25.js → components/docs/static/js/index.5719c92d.js vendored
View File

File diff suppressed because one or more lines are too long

2
components/docs/static/js/index.2c789b25.js.map → components/docs/static/js/index.5719c92d.js.map vendored
View File

File diff suppressed because one or more lines are too long