update site
This commit is contained in:
parent
d793519733
commit
bd7d4c8436
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"cn.css": "static/css/cn.fb9dfd08.css",
|
||||
"cn.css.map": "static/css/cn.fb9dfd08.css.map",
|
||||
"cn.js": "static/js/cn.e4f60d19.js",
|
||||
"cn.js.map": "static/js/cn.e4f60d19.js.map",
|
||||
"cn.js": "static/js/cn.8d84e04f.js",
|
||||
"cn.js.map": "static/js/cn.8d84e04f.js.map",
|
||||
"index.css": "static/css/index.fb9dfd08.css",
|
||||
"index.css.map": "static/css/index.fb9dfd08.css.map",
|
||||
"index.js": "static/js/index.492dce67.js",
|
||||
"index.js.map": "static/js/index.492dce67.js.map",
|
||||
"index.js": "static/js/index.1fbfd61e.js",
|
||||
"index.js.map": "static/js/index.1fbfd61e.js.map",
|
||||
"static/js/0.f770eb0e.chunk.js": "static/js/0.f770eb0e.chunk.js",
|
||||
"static/js/0.f770eb0e.chunk.js.map": "static/js/0.f770eb0e.chunk.js.map",
|
||||
"static/js/1.0d025b66.chunk.js": "static/js/1.0d025b66.chunk.js",
|
||||
|
@ -35,10 +35,10 @@
|
|||
"static/js/2.9632a8c5.chunk.js.map": "static/js/2.9632a8c5.chunk.js.map",
|
||||
"static/js/20.579215c0.chunk.js": "static/js/20.579215c0.chunk.js",
|
||||
"static/js/20.579215c0.chunk.js.map": "static/js/20.579215c0.chunk.js.map",
|
||||
"static/js/21.fc4d0781.chunk.js": "static/js/21.fc4d0781.chunk.js",
|
||||
"static/js/21.fc4d0781.chunk.js.map": "static/js/21.fc4d0781.chunk.js.map",
|
||||
"static/js/22.d0e764c7.chunk.js": "static/js/22.d0e764c7.chunk.js",
|
||||
"static/js/22.d0e764c7.chunk.js.map": "static/js/22.d0e764c7.chunk.js.map",
|
||||
"static/js/21.0b7ceb91.chunk.js": "static/js/21.0b7ceb91.chunk.js",
|
||||
"static/js/21.0b7ceb91.chunk.js.map": "static/js/21.0b7ceb91.chunk.js.map",
|
||||
"static/js/22.7cadae94.chunk.js": "static/js/22.7cadae94.chunk.js",
|
||||
"static/js/22.7cadae94.chunk.js.map": "static/js/22.7cadae94.chunk.js.map",
|
||||
"static/js/23.b1e284bd.chunk.js": "static/js/23.b1e284bd.chunk.js",
|
||||
"static/js/23.b1e284bd.chunk.js.map": "static/js/23.b1e284bd.chunk.js.map",
|
||||
"static/js/24.d0714382.chunk.js": "static/js/24.d0714382.chunk.js",
|
||||
|
@ -57,12 +57,12 @@
|
|||
"static/js/3.1c5042fb.chunk.js.map": "static/js/3.1c5042fb.chunk.js.map",
|
||||
"static/js/4.74864855.chunk.js": "static/js/4.74864855.chunk.js",
|
||||
"static/js/4.74864855.chunk.js.map": "static/js/4.74864855.chunk.js.map",
|
||||
"static/js/5.f187d1bc.chunk.js": "static/js/5.f187d1bc.chunk.js",
|
||||
"static/js/5.f187d1bc.chunk.js.map": "static/js/5.f187d1bc.chunk.js.map",
|
||||
"static/js/6.62a98a69.chunk.js": "static/js/6.62a98a69.chunk.js",
|
||||
"static/js/6.62a98a69.chunk.js.map": "static/js/6.62a98a69.chunk.js.map",
|
||||
"static/js/7.70efbb66.chunk.js": "static/js/7.70efbb66.chunk.js",
|
||||
"static/js/7.70efbb66.chunk.js.map": "static/js/7.70efbb66.chunk.js.map",
|
||||
"static/js/5.051f31bf.chunk.js": "static/js/5.051f31bf.chunk.js",
|
||||
"static/js/5.051f31bf.chunk.js.map": "static/js/5.051f31bf.chunk.js.map",
|
||||
"static/js/6.412e09ae.chunk.js": "static/js/6.412e09ae.chunk.js",
|
||||
"static/js/6.412e09ae.chunk.js.map": "static/js/6.412e09ae.chunk.js.map",
|
||||
"static/js/7.df2bc85a.chunk.js": "static/js/7.df2bc85a.chunk.js",
|
||||
"static/js/7.df2bc85a.chunk.js.map": "static/js/7.df2bc85a.chunk.js.map",
|
||||
"static/js/8.06eeaa91.chunk.js": "static/js/8.06eeaa91.chunk.js",
|
||||
"static/js/8.06eeaa91.chunk.js.map": "static/js/8.06eeaa91.chunk.js.map",
|
||||
"static/js/9.c60ec43c.chunk.js": "static/js/9.c60ec43c.chunk.js",
|
||||
|
|
|
@ -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>Omi - Next Front End Framework</title><link href="./static/css/cn.fb9dfd08.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.e4f60d19.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>Omi - Next Front End Framework</title><link href="./static/css/cn.fb9dfd08.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.8d84e04f.js"></script></body></html>
|
|
@ -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>Omi - Next Front End Framework</title><link href="./static/css/index.fb9dfd08.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.492dce67.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>Omi - Next Front End Framework</title><link href="./static/css/index.fb9dfd08.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.1fbfd61e.js"></script></body></html>
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([21],{47:function(e,t){e.exports="## Ecosystem of Omi\n\n| **Project** | **Description** |\n| ------------------------------- | ----------------------------------- |\n| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| \u76f4\u63a5\u4f7f\u7528 Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u6216 H5 SPA\uff01\uff01\uff01|\n| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| Omi for old browsers(IE8+ and mobile browsers).|\n| [omix](https://github.com/Tencent/omi/tree/master/packages/omix)| Tiny size mini programe framework.|\n| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| Simple HTML5 Charts using chart-x tag.|\n| [md2site](https://tencent.github.io/omi/assets/md2site/)| Static Site Generator with markdown powered by Omio.|\n| [omi-mvvm](https://github.com/Tencent/omi/blob/master/tutorial/omi-mvvm.md)| MVVM comes back bravely with [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) strong support.|\n| [omi-html](https://github.com/Tencent/omi/tree/master/packages/omi-html)| Using [htm](https://github.com/developit/htm) in omi.|\n| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| Useful Omi snippets that you can understand in 30 seconds.|\n| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Perfect fusion of web components, jsx and canvas.|\n| [omi-mp](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| Develop and generate Web HTML5 Single-Page Applications by wechat mini program. The output source is base on omi + [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router)|\n| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi official router in 1KB js. [\u2192 DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/) |\n| [omi-devtools](https://github.com/f/omi-devtools)| Browser DevTools extension |\n| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| Project scaffolding |\n| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper |\n| [omi-vscode](https://github.com/ZainChen/omi-vscode)| Vscode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |\n| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js extension(TypeScript) |\n| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi / [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) integration. Made css3 transform super easy in your Omi project.|\n| [omi-tap](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Native tap event support(omi v4.0.24+\uff09|\n| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Support touch and gesture events in your Omi project.|\n| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|Smooth scrolling, rotation, pull to refresh and any motion for the web.|\n| [omi-use](https://github.com/Tencent/omi/blob/master/docs/main-concepts.md#use)|React hooks like API|\n| [omi-native](https://github.com/Tencent/omi/tree/master/packages/omi-native)|Render web components to native|\n|[omi-i18n](https://github.com/i18next/omi-i18n)| Internationalization solution for omi.js using i18next ecosystem |\n| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) |Tiny client-side router by [page](https://github.com/visionmedia/page.js)|\n\n## Examples\n\n* [\u2192 Omi Examples](https://github.com/Tencent/omi/tree/master/packages/omi/examples)\n* [\u2192 Omio Examples](https://github.com/Tencent/omi/tree/master/packages/omio/examples)"}});
|
||||
//# sourceMappingURL=21.0b7ceb91.chunk.js.map
|
File diff suppressed because one or more lines are too long
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([21],{47:function(t,e){t.exports="## Ecosystem of Omi\n\n| **Project** | **Description** |\n| ------------------------------- | ----------------------------------- |\n| [omi-docs](https://github.com/Tencent/omi/blob/master/docs/main-concepts.md)| Omi official documents |\n| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| \u76f4\u63a5\u4f7f\u7528 Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u6216 H5 SPA\uff01\uff01\uff01|\n| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| Omi for old browsers(IE8+ and mobile browsers).|\n| [omiu](https://tencent.github.io/omi/packages/omiu/examples/build/index.html)| Omi official UI|\n| [omix](https://github.com/Tencent/omi/tree/master/packages/omix)| Tiny size mini programe framework.|\n| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| Simple HTML5 Charts using chart-x tag.|\n| [md2site](https://tencent.github.io/omi/assets/md2site/)| Static Site Generator with markdown powered by Omio.|\n| [omi-mvvm](https://github.com/Tencent/omi/blob/master/tutorial/omi-mvvm.md)| MVVM comes back bravely with [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) strong support.|\n| [omi-html](https://github.com/Tencent/omi/tree/master/packages/omi-html)| Using [htm](https://github.com/developit/htm) in omi.|\n| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| Useful Omi snippets that you can understand in 30 seconds.|\n| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Perfect fusion of web components, jsx and canvas.|\n| [omi-mp](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| Develop and generate Web HTML5 Single-Page Applications by wechat mini program. The output source is base on omi + [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router)|\n| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi official router in 1KB js. [\u2192 DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/) |\n| [omi-devtools](https://github.com/f/omi-devtools)| Browser DevTools extension |\n| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| Project scaffolding |\n| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper |\n| [omi-vscode](https://github.com/ZainChen/omi-vscode)| Vscode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |\n| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js extension(TypeScript) |\n| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi / [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) integration. Made css3 transform super easy in your Omi project.|\n| [omi-tap](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Native tap event support(omi v4.0.24+\uff09|\n| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Support touch and gesture events in your Omi project.|\n| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|Smooth scrolling, rotation, pull to refresh and any motion for the web.|\n| [omi-use](https://github.com/Tencent/omi/blob/master/docs/main-concepts.md#use)|React hooks like API|\n| [omi-native](https://github.com/Tencent/omi/tree/master/packages/omi-native)|Render web components to native|\n|[omi-i18n](https://github.com/i18next/omi-i18n)| Internationalization solution for omi.js using i18next ecosystem |\n| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) |Tiny client-side router by [page](https://github.com/visionmedia/page.js)|\n\n## Examples\n\n* [\u2192 Omi Examples](https://github.com/Tencent/omi/tree/master/packages/omi/examples)\n* [\u2192 Omio Examples](https://github.com/Tencent/omi/tree/master/packages/omio/examples)"}});
|
||||
//# sourceMappingURL=21.fc4d0781.chunk.js.map
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([22],{46:function(n,e){n.exports="# Omim\n\nCross-Frameworks components, powered by Material Design and [Omi](https://github.com/Tencent/omi).\n\n* [DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/index.html)\n\n![](https://tencent.github.io/omi/packages/omim/assets/pv4.jpeg?a=1)\n\n## Features\n\n* Render by Custom Elements of Web Components\n* Any framework can use the components, such as Omi, React, Vue and Angular \n* Support both JSX and native HTML elements \n* Each element can be used independently\n* Super easy to change theme colors, fonts and rounded corners\n* Extended HTML capabilities, you can pass false attributes to elements through string `'0'` or string `'flase'`\n\n## Usage\n\n### Via script\n\n```html\n<script src=\"https://unpkg.com/omi\"><\/script>\n<script src=\"https://unpkg.com/@omim/core@latest/button/index.js\"><\/script>\n\n<m-button>I am button</m-button>\n```\n\n### Via npm\n\n``` bash\nnpm install @omim/core\n```\n\nThen:\n\n```js\nimport '@omim/core/button'\n```\n\nThen use the element in Omi, React, Vue or Angular:\n\n``` html\n<m-button>I am button</m-button>\n```\n\nIt can also be used in pure js:\n\n```js\nvar button = document.createElement('m-button')\nbutton.innerHTML = 'I am button'\ndocument.body.append(button)\nbutton.addEventListener('click', function () {\n console.log('Clicked!')\n})\n\n//or\n//document.body.innerHTML = '<m-button>I am button</m-button>'\n```\n\n## Change Theme\n\n```js\ndocument.body.style.setProperty('--mdc-theme-primary', 'red')\ndocument.body.style.setProperty('--mdc-theme-secondary', 'blue')\ndocument.body.style.setProperty('--mdc-shape-small-component-radius', '2px')\n```\n\nAll the config:\n\n```\n--mdc-theme-primary: #0072d9;\n--mdc-theme-secondary: #2170b8;\n--mdc-theme-error: #f5222d;\n--mdc-theme-surface: #ffffff;\n--mdc-theme-on-primary: #ffffff;\n--mdc-theme-on-secondary: #ffffff;\n--mdc-theme-on-error: #ffffff;\n--mdc-theme-on-surface: #000000;\n--mdc-theme-background: #ffffff;\n--mdc-shape-small-component-radius: 4px;\n--mdc-shape-medium-component-radius: 4px;\n--mdc-shape-large-component-radius: 0px;\n--mdc-typography--font-family: Roboto, sans-serif;\n```\n\n## HTML Extention \n\nYou can set boolean prop to false from markup by 0 or false string.\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## Contribution\n\n### CMD\n\nBuild component:\n\n```bash\nnpm run build -- component-name\n```\n\nBuild all components:\n\n```bash\nnpm run build-all\n```\n\nBuild demo:\n\n```bash\nnpm start demo-name\n```\n\nPublish:\n\n```bash\nnpm publish --access public\n```\n\n### Links\n\n* [material.io docs](https://material.io/develop/web/components/buttons/) \n* [material.io demo](https://material-components.github.io/material-components-web-catalog/#/) \n* [material-theme-builder](https://material-theme-builder.glitch.me/)\n* [material-components-web](https://github.com/material-components/material-components-web)\n* [material-icons](https://material.io/tools/icons/?style=baseline)\n"}});
|
||||
//# sourceMappingURL=22.7cadae94.chunk.js.map
|
File diff suppressed because one or more lines are too long
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([22],{46:function(n,e){n.exports="## Omiu \n\nOmiu is the official UI component library of Omi, based on Omio(IE8+) and compatible with Omi, using the design style of Wechat 7.0.\n\n[\u2192 Omiu Docs && REPL](https://tencent.github.io/omi/packages/omiu/examples/build/index.html)\n\n## Colors\n\n| **Color** | **Meaning** |\n| ------------- |:-------------:|\n| #07C160 | Noble Vigorous Green | \n| #171717 | Steady Elegant Black | \n| #FEFEFE | Transcendent White | \n| #F95050 | Temperament Eye-catching Red | \n| #ECECEC | Lost Indifferent Gray | \n\n\n## Use it immediately\n\n```\nnpm i omi-cli -g \nomi init my-app \ncd my-app \nnpm start \nnpm run build \n```\n\n> `npx omi-cli init my-app` is also supported(npm v5.2.0+).\n\n## Use it in existing project\n\n```js\nnpm i omiu\n```\n\n```js\nimport { WeElement, define, render } from 'omi'\n//written by E6+, you need to set JS under node modules to run normally after Babel or TS compilation\nimport 'omiu/button'\n//or import all, published by ES5\n//import 'omiu'\n\ndefine('my-app', class extends WeElement {\n onClick = () => {\n console.log('Hello omiu!');\n }\n\n render() {\n return (\n <o-button onClick={this.onClick}>I am button.</o-button>\n )\n }\n})\n\nrender(<my-app />, 'body')\n```\n\n"}});
|
||||
//# sourceMappingURL=22.d0e764c7.chunk.js.map
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["../static/js/22.d0e764c7.chunk.js","docs/en/omiu.md"],"names":["webpackJsonp","46","module","exports"],"mappings":"AAAAA,cAAc,KAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/22.d0e764c7.chunk.js","sourcesContent":["webpackJsonp([22],{\n\n/***/ 46:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Omiu \\n\\nOmiu is the official UI component library of Omi, based on Omio(IE8+) and compatible with Omi, using the design style of Wechat 7.0.\\n\\n[→ Omiu Docs && REPL](https://tencent.github.io/omi/packages/omiu/examples/build/index.html)\\n\\n## Colors\\n\\n| **Color** | **Meaning** |\\n| ------------- |:-------------:|\\n| #07C160 | Noble Vigorous Green | \\n| #171717 | Steady Elegant Black | \\n| #FEFEFE | Transcendent White | \\n| #F95050 | Temperament Eye-catching Red | \\n| #ECECEC | Lost Indifferent Gray | \\n\\n\\n## Use it immediately\\n\\n```\\nnpm i omi-cli -g \\nomi init my-app \\ncd my-app \\nnpm start \\nnpm run build \\n```\\n\\n> `npx omi-cli init my-app` is also supported(npm v5.2.0+).\\n\\n## Use it in existing project\\n\\n```js\\nnpm i omiu\\n```\\n\\n```js\\nimport { WeElement, define, render } from 'omi'\\n//written by E6+, you need to set JS under node modules to run normally after Babel or TS compilation\\nimport 'omiu/button'\\n//or import all, published by ES5\\n//import 'omiu'\\n\\ndefine('my-app', class extends WeElement {\\n onClick = () => {\\n console.log('Hello omiu!');\\n }\\n\\n render() {\\n return (\\n <o-button onClick={this.onClick}>I am button.</o-button>\\n )\\n }\\n})\\n\\nrender(<my-app />, 'body')\\n```\\n\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/22.d0e764c7.chunk.js","module.exports = \"## Omiu \\n\\nOmiu is the official UI component library of Omi, based on Omio(IE8+) and compatible with Omi, using the design style of Wechat 7.0.\\n\\n[→ Omiu Docs && REPL](https://tencent.github.io/omi/packages/omiu/examples/build/index.html)\\n\\n## Colors\\n\\n| **Color** | **Meaning** |\\n| ------------- |:-------------:|\\n| #07C160 | Noble Vigorous Green | \\n| #171717 | Steady Elegant Black | \\n| #FEFEFE | Transcendent White | \\n| #F95050 | Temperament Eye-catching Red | \\n| #ECECEC | Lost Indifferent Gray | \\n\\n\\n## Use it immediately\\n\\n```\\nnpm i omi-cli -g \\nomi init my-app \\ncd my-app \\nnpm start \\nnpm run build \\n```\\n\\n> `npx omi-cli init my-app` is also supported(npm v5.2.0+).\\n\\n## Use it in existing project\\n\\n```js\\nnpm i omiu\\n```\\n\\n```js\\nimport { WeElement, define, render } from 'omi'\\n//written by E6+, you need to set JS under node modules to run normally after Babel or TS compilation\\nimport 'omiu/button'\\n//or import all, published by ES5\\n//import 'omiu'\\n\\ndefine('my-app', class extends WeElement {\\n onClick = () => {\\n console.log('Hello omiu!');\\n }\\n\\n render() {\\n return (\\n <o-button onClick={this.onClick}>I am button.</o-button>\\n )\\n }\\n})\\n\\nrender(<my-app />, 'body')\\n```\\n\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/en/omiu.md\n// module id = 46\n// module chunks = 22"],"sourceRoot":""}
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([5],{63:function(t,e){t.exports="## Omi \u751f\u6001\n\n[\u2192 Omi \u751f\u6001\u5b66\u4e60\u8def\u7ebf\u56fe](https://github.com/Tencent/omi/tree/master/assets/rm.md)\n\n| **\u9879\u76ee** | **\u63cf\u8ff0** |\n| ------------------------------- | ----------------------------------- |\n| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| \u76f4\u63a5\u4f7f\u7528 Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u6216 H5 SPA\uff01\uff01\uff01|\n| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| \u517c\u5bb9\u8001\u6d4f\u89c8\u5668\u7684 Omi \u7248\u672c(\u652f\u6301\u5230IE8+\u548c\u79fb\u52a8\u7aef\u6d4f\u89c8\u5668)\u3002|\n| [omix](https://github.com/Tencent/omi/tree/master/packages/omix)| \u6781\u5c0f\u5374\u7cbe\u5de7\u7684\u5c0f\u7a0b\u5e8f\u6846\u67b6\u3002|\n| [omi-mp](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| \u901a\u8fc7\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u548c\u751f\u6210 Web \u5355\u9875\u5e94\u7528(H5 SPA)|\n| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi \u5b98\u65b9\u8def\u7531,\u8d85\u7ea7\u5c0f\u7684\u5c3a\u5bf8\uff0c\u53ea\u6709 1KB \u7684 js\u3002[\u2192 DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)|\n| [md2site](https://tencent.github.io/omi/assets/md2site/)| \u7528 markdown \u751f\u6210\u9759\u6001\u7f51\u7ad9\u6587\u6863.|\n| [omi-mvvm](https://github.com/Tencent/omi/blob/master/tutorial/omi-mvvm.cn.md)| MVVM \u738b\u8005\u5f52\u6765, [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) \u5f3a\u529b\u52a0\u6301\u3002|\n| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| \u4e00\u4e2a chart-x \u6807\u7b7e\u641e\u5b9a\u62a5\u8868|\n| [mp-mvvm](https://github.com/Tencent/omi/tree/master/packages/mp-mvvm)| \u5c0f\u7a0b\u5e8f\u63d2\u4e0a MVVM \u7684\u7fc5\u8180, [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) \u5f3a\u529b\u52a0\u6301\u3002|\n| [omi-html](https://github.com/Tencent/omi/tree/master/packages/omi-html)| Using [htm](https://github.com/developit/htm) in omi.|\n| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| 30 \u79d2\u7406\u89e3\u4e00\u6bb5\u6709\u7528\u7684 Omi \u4ee3\u7801\u7247\u6bb5.|\n| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper |\n| [omi-vscode](https://github.com/ZainChen/omi-vscode)| Vscode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |\n| [omi-sprite](https://github.com/Tencent/omi/tree/master/packages/omi-sprite)| Web Components, JSX \u548c Canvas \u7684\u5b8c\u7f8e\u878d\u5408|\n| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Web Components, JSX \u548c Canvas \u7684\u5b8c\u7f8e\u878d\u5408|\n| [omi-devtools](https://github.com/f/omi-devtools)| \u8c37\u6b4c\u6d4f\u89c8\u5668\u5f00\u53d1\u5de5\u5177\u6269\u5c55|\n| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| \u9879\u76ee\u811a\u624b\u67b6\u5de5\u5177\uff0c\u5404\u79cd\u6a21\u677f\u4efb\u4f60\u9009\u3002 |\n| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js \u6269\u5c55(TypeScript) |\n| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi \u548c [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) \u5b8c\u7f8e\u7ed3\u5408. \u8ba9 css3 transform \u5728\u4f60\u7684 Omi\u9879\u76ee\u4e2d\u53d8\u5f97\u8d85\u7ea7\u7b80\u5355.|\n| [omi-tap](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Omi \u539f\u751f\u652f\u6301 tap \u4e8b\u4ef6\uff08omi v4.0.24+\uff09|\n| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Omi \u5b98\u65b9\u624b\u52bf\u5e93|\n| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|\u4e1d\u822c\u987a\u6ed1\u7684\u89e6\u6478\u8fd0\u52a8|\n| [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md)|\u9884\u6e32\u67d3\u9aa8\u67b6\u5c4f|\n|[omi-i18n](https://github.com/i18next/omi-i18n)| Omi \u56fd\u9645\u5316\u89e3\u51b3\u65b9\u6848 |\n| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) | \u57fa\u4e8e [page.js](https://github.com/visionmedia/page.js) \u7684 Omi \u8def\u7531|\n\n## \u4e00\u4e9b\u4f8b\u5b50\n\n* [\u2192 \u4e00\u4e9b Omi \u4f8b\u5b50](https://github.com/Tencent/omi/tree/master/packages/omi/examples)\n* [\u2192 \u4e00\u4e9b Omio \u4f8b\u5b50](https://github.com/Tencent/omi/tree/master/packages/omio/examples)"}});
|
||||
//# sourceMappingURL=5.051f31bf.chunk.js.map
|
File diff suppressed because one or more lines are too long
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([5],{63:function(t,e){t.exports="## Omi \u751f\u6001\n\n[\u2192 Omi \u751f\u6001\u5b66\u4e60\u8def\u7ebf\u56fe](https://github.com/Tencent/omi/tree/master/assets/rm.md)\n\n| **\u9879\u76ee** | **\u63cf\u8ff0** |\n| ------------------------------- | ----------------------------------- |\n| [omi-docs](https://github.com/Tencent/omi/blob/master/docs/main-concepts.cn.md)| Omi \u5b98\u65b9\u6587\u6863 |\n| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| \u76f4\u63a5\u4f7f\u7528 Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u6216 H5 SPA\uff01\uff01\uff01|\n| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| \u517c\u5bb9\u8001\u6d4f\u89c8\u5668\u7684 Omi \u7248\u672c(\u652f\u6301\u5230IE8+\u548c\u79fb\u52a8\u7aef\u6d4f\u89c8\u5668)\u3002|\n| [omiu](https://tencent.github.io/omi/packages/omiu/examples/build/zh-cn.html)| Omi \u5b98\u65b9 UI\u3002|\n| [omix](https://github.com/Tencent/omi/tree/master/packages/omix)| \u6781\u5c0f\u5374\u7cbe\u5de7\u7684\u5c0f\u7a0b\u5e8f\u6846\u67b6\u3002|\n| [omi-mp](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| \u901a\u8fc7\u5fae\u4fe1\u5c0f\u7a0b\u5e8f\u5f00\u53d1\u548c\u751f\u6210 Web \u5355\u9875\u5e94\u7528(H5 SPA)|\n| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi \u5b98\u65b9\u8def\u7531,\u8d85\u7ea7\u5c0f\u7684\u5c3a\u5bf8\uff0c\u53ea\u6709 1KB \u7684 js\u3002[\u2192 DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)|\n| [md2site](https://tencent.github.io/omi/assets/md2site/)| \u7528 markdown \u751f\u6210\u9759\u6001\u7f51\u7ad9\u6587\u6863.|\n| [omi-mvvm](https://github.com/Tencent/omi/blob/master/tutorial/omi-mvvm.cn.md)| MVVM \u738b\u8005\u5f52\u6765, [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) \u5f3a\u529b\u52a0\u6301\u3002|\n| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| \u4e00\u4e2a chart-x \u6807\u7b7e\u641e\u5b9a\u62a5\u8868|\n| [mp-mvvm](https://github.com/Tencent/omi/tree/master/packages/mp-mvvm)| \u5c0f\u7a0b\u5e8f\u63d2\u4e0a MVVM \u7684\u7fc5\u8180, [mappingjs](https://github.com/Tencent/omi/tree/master/packages/mappingjs) \u5f3a\u529b\u52a0\u6301\u3002|\n| [omi-html](https://github.com/Tencent/omi/tree/master/packages/omi-html)| Using [htm](https://github.com/developit/htm) in omi.|\n| [omi-30-seconds](https://github.com/Tencent/omi/tree/master/packages/omi-30-seconds)| 30 \u79d2\u7406\u89e3\u4e00\u6bb5\u6709\u7528\u7684 Omi \u4ee3\u7801\u7247\u6bb5.|\n| [omi-swiper](https://github.com/loo41/Omi-Swiper)| Omi + Swiper |\n| [omi-vscode](https://github.com/ZainChen/omi-vscode)| Vscode extension for omi, [Install now!](https://marketplace.visualstudio.com/items?itemName=ZainChen.omi) |\n| [omi-sprite](https://github.com/Tencent/omi/tree/master/packages/omi-sprite)| Web Components, JSX \u548c Canvas \u7684\u5b8c\u7f8e\u878d\u5408|\n| [omi-canvas](https://github.com/Tencent/omi/tree/master/packages/omi-canvas)| Web Components, JSX \u548c Canvas \u7684\u5b8c\u7f8e\u878d\u5408|\n| [omi-devtools](https://github.com/f/omi-devtools)| \u8c37\u6b4c\u6d4f\u89c8\u5668\u5f00\u53d1\u5de5\u5177\u6269\u5c55|\n| [omi-cli](https://github.com/Tencent/omi/tree/master/packages/omi-cli)| \u9879\u76ee\u811a\u624b\u67b6\u5de5\u5177\uff0c\u5404\u79cd\u6a21\u677f\u4efb\u4f60\u9009\u3002 |\n| [omi-ex](https://github.com/Tencent/omi/tree/master/packages/omi-ex)| Omi.js \u6269\u5c55(TypeScript) |\n| [omi-transform](https://github.com/Tencent/omi/tree/master/packages/omi-transform)|Omi \u548c [css3transform](https://tencent.github.io/omi/packages/omi-transform/css3transform/) \u5b8c\u7f8e\u7ed3\u5408. \u8ba9 css3 transform \u5728\u4f60\u7684 Omi\u9879\u76ee\u4e2d\u53d8\u5f97\u8d85\u7ea7\u7b80\u5355.|\n| [omi-tap](https://github.com/Tencent/omi/releases/tag/v4.0.24)| Omi \u539f\u751f\u652f\u6301 tap \u4e8b\u4ef6\uff08omi v4.0.24+\uff09|\n| [omi-finger](https://github.com/Tencent/omi/tree/master/packages/omi-finger)|Omi \u5b98\u65b9\u624b\u52bf\u5e93|\n| [omi-touch](https://github.com/Tencent/omi/tree/master/packages/omi-touch)|\u4e1d\u822c\u987a\u6ed1\u7684\u89e6\u6478\u8fd0\u52a8|\n| [omi-snap](https://github.com/Tencent/omi/blob/master/tutorial/omi-snap.cn.md)|\u9884\u6e32\u67d3\u9aa8\u67b6\u5c4f|\n|[omi-i18n](https://github.com/i18next/omi-i18n)| Omi \u56fd\u9645\u5316\u89e3\u51b3\u65b9\u6848 |\n| [omi-page](https://github.com/Tencent/omi/tree/master/packages/omi-page) | \u57fa\u4e8e [page.js](https://github.com/visionmedia/page.js) \u7684 Omi \u8def\u7531|\n\n## \u4e00\u4e9b\u4f8b\u5b50\n\n* [\u2192 \u4e00\u4e9b Omi \u4f8b\u5b50](https://github.com/Tencent/omi/tree/master/packages/omi/examples)\n* [\u2192 \u4e00\u4e9b Omio \u4f8b\u5b50](https://github.com/Tencent/omi/tree/master/packages/omio/examples)"}});
|
||||
//# sourceMappingURL=5.f187d1bc.chunk.js.map
|
File diff suppressed because one or more lines are too long
|
@ -1,2 +1,2 @@
|
|||
webpackJsonp([7],{61:function(n,t){n.exports="## Omip\n\n\u4f7f\u7528 Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u6216 H5 SPA\n\n> \u73b0\u5728\uff0cOmi \u4e0d\u4ec5\u4ec5\u53ef\u4ee5\u5f00\u53d1\u684c\u9762 Web\u3001\u79fb\u52a8 H5\uff0c\u8fd8\u53ef\u4ee5\u76f4\u63a5\u5f00\u53d1\u5c0f\u7a0b\u5e8f\uff01\n\n* Write Once, Run Anywhere\n* Learn Once, Write Anywhere\n\n![](https://github.com/Tencent/omi/raw/master/assets/omip-pv.png)\n\n## Omip \u7279\u6027\n\n* \u4e00\u6b21\u5b66\u4e60\uff0c\u591a\u5904\u5f00\u53d1\uff0c\u4e00\u6b21\u5f00\u53d1\uff0c\u591a\u5904\u8fd0\u884c\n* \u4f7f\u7528 JSX\uff0c\u8868\u8fbe\u80fd\u529b\u548c\u7f16\u7a0b\u4f53\u9a8c\u5927\u4e8e\u6a21\u677f\n* \u652f\u6301\u4f7f\u7528 npm/yarn \u5b89\u88c5\u7ba1\u7406\u7b2c\u4e09\u65b9\u4f9d\u8d56\n* \u652f\u6301\u4f7f\u7528 ES6+\n* \u652f\u6301\u4f7f\u7528 CSS \u9884\u7f16\u8bd1\u5668\n* \u5c0f\u7a0b\u5e8f API \u4f18\u5316\uff0c\u5f02\u6b65 API Promise \u5316\n* \u8d85\u8f7b\u91cf\u7684\u4f9d\u8d56\u5305\uff0c\u987a\u4ece\u5c0f\u7a0b\u5e8f\u6807\u7b7e\u548c\u7ec4\u4ef6\u7684\u8bbe\u8ba1\n\n## \u5feb\u901f\u5f00\u59cb\n\n```bash\nnpm i omi-cli -g\nomi init-p my-app\ncd my-app\nnpm start //\u5f00\u53d1\u5c0f\u7a0b\u5e8f\nnpm run dev:h5 //\u5f00\u53d1 h5\nnpm run build:h5 //\u53d1\u5e03 h5\n```\n> node \u7248\u672c\u8981\u6c42 >= 8\n\n> \u4e5f\u652f\u6301\u4e00\u6761\u547d\u4ee4 `npx omi-cli init-p my-app` (npm v5.2.0+)\n\n\u628a\u5c0f\u7a0b\u5e8f\u76ee\u5f55\u8bbe\u7f6e\u5230 dist \u76ee\u5f55\u5c31\u53ef\u4ee5\u6109\u5feb\u5730\u8c03\u8bd5\u4e86\uff01\n\n\u4e5f\u53ef\u4ee5\u521d\u59cb\u5316 TypeScript \u6a21\u677f\u9879\u76ee:\n\n```js\nomi init-p-ts my-app\n```\n\n> \u4e5f\u652f\u6301\u4e00\u6761\u547d\u4ee4 `npx omi-cli init-p-ts my-app` (npm v5.2.0+)\n\n## \u4ee3\u7801\u793a\u4f8b\n\n```jsx\nimport { WeElement, define } from 'omi'\nimport './index.css'\n\ndefine('page-counter', class extends WeElement {\n config = {\n navigationBarTitleText: 'Counter'\n }\n\n data = {\n count: 1\n }\n\n sub = () => {\n this.data.count--\n this.update()\n }\n\n add = () => {\n this.data.count++\n this.update()\n }\n\n render() {\n return (\n <view>\n <button onClick={this.sub}>-</button>\n <text>{this.data.count}</text>\n <button onClick={this.add}>+</button>\n </view>\n )\n }\n})\n```\n\n## \u6269\u5c55\n\n`this.update` \u65b9\u6cd5\u53ef\u4ee5\u4f20\u9012\u6700\u77ed\u8def\u5f84\uff0c\u8fdb\u884c\u66f4\u65b0\uff0c\u6bd4\u5982\u4e0b\u9762\u4e24\u79cd\u5199\u6cd5\u662f\u7b49\u4ef7\u7684\u3002\n\n```js\nthis.update({\n count: 1\n})\n```\n\n\u7b49\u4ef7\u4e8e:\n\n```js\nthis.data.count = 1\nthis.update()\n```\n\n\u4e5f\u53ef\u4ee5\u548c setData \u4e00\u6837\u4f20\u9012 path:\n\n```js\nthis.update({\n 'list[1].obj.name': 'Omip'\n})\n```\n\n\u7531\u4e8e\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u66f4\u65b0\u662f\u5f02\u6b65\u7684\uff0c\u5982\u679c\u9700\u8981\u83b7\u53d6\u89c6\u56fe\u66f4\u65b0\u540e\u7684\u56de\u8c03\uff0c\u53ef\u4ee5\u4f7f\u7528\u7b2c\u4e8c\u4e2a\u53c2\u6570:\n\n```js\nthis.update({\n 'list[1].obj.name': 'Omip'\n}, () => {\n console.log('\u66f4\u65b0\u5b8c\u6210')\n})\n```\n\n\u6216\u8005\u53ea\u6709\u4e00\u4e2a\u53c2\u6570\uff0c\u4e14\u8be5\u53c2\u6570\u4e3a\u51fd\u6570:\n\n```js\nthis.update(() => {\n console.log('\u66f4\u65b0\u5b8c\u6210')\n})\n```\n\n## \u6ce8\u610f\u4e8b\u9879\n\n\u5728 JSX \u6216\u8005\u4e00\u4e9b\u8981\u4f7f\u7528\u56fe\u7247\u8d44\u6e90\u7684 API\uff0c\u9700\u8981\u4f7f\u7528 import \u6216\u8005 require \u5148\u5bfc\u5165\u56fe\u7247\u518d\u4f7f\u7528\uff0c\u4e0d\u80fd\u76f4\u63a5\u4f7f\u7528\u76f8\u5bf9\u5730\u5740\uff01\n\n\u5982\uff1a\n\n```js\n onShareAppMessage(){\n\t\treturn {\n title: '\u5206\u4eab\u6807\u9898',\n path: '/pages/index/index?id=123',\n imageUrl: require('./share.jpg'),\n success: (res) => {\n console.log(\"\u8f6c\u53d1\u6210\u529f\", res);\n },\n fail: (res) => {\n console.log(\"\u8f6c\u53d1\u5931\u8d25\", res);\n }\n }\n }\n```\n\n\u518d\u6bd4\u5982:\n\n```jsx\nimport src from './my-image.png'\n...\n...\n\n\n render() {\n return (\n <view>\n <image src={src}></image>\n </view>\n )\n }\n...\n...\n\n```\n\n## \u83b7\u53d6\u6700\u65b0\u7684 omip \u7248\u672c\n\n\u4f60\u53ea\u9700\u8981\u91cd\u65b0\u62c9\u53bb\u6a21\u677f\u4fbf\u53ef\u4ee5\u66f4\u65b0\u5230\u6700\u65b0\u7684 omip:\n\n```\nomi init-p my-app\n```\n\n## \u5b9e\u6218\u6848\u4f8b\n\n![](../../assets/omip-douban-list.png)\n\n![](../../assets/omip-douban-detail.png)\n\n## License\n\nMIT \xa9 dntzhang\n\n#### Open Source Software Licensed Under the MIT License:\n\n[tarojs](https://github.com/NervJS/taro) 1.2.13\nCopyright (c) 2019 O2Team\n"}});
|
||||
//# sourceMappingURL=7.70efbb66.chunk.js.map
|
||||
webpackJsonp([6],{62:function(n,t){n.exports="## Omip\n\n\u4f7f\u7528 Omi \u5f00\u53d1\u5c0f\u7a0b\u5e8f\u6216 H5 SPA\n\n> \u73b0\u5728\uff0cOmi \u4e0d\u4ec5\u4ec5\u53ef\u4ee5\u5f00\u53d1\u684c\u9762 Web\u3001\u79fb\u52a8 H5\uff0c\u8fd8\u53ef\u4ee5\u76f4\u63a5\u5f00\u53d1\u5c0f\u7a0b\u5e8f\uff01\n\n* Write Once, Run Anywhere\n* Learn Once, Write Anywhere\n\n![](https://github.com/Tencent/omi/raw/master/assets/omip-pv.png)\n\n## Omip \u7279\u6027\n\n* \u4e00\u6b21\u5b66\u4e60\uff0c\u591a\u5904\u5f00\u53d1\uff0c\u4e00\u6b21\u5f00\u53d1\uff0c\u591a\u5904\u8fd0\u884c\n* \u4f7f\u7528 JSX\uff0c\u8868\u8fbe\u80fd\u529b\u548c\u7f16\u7a0b\u4f53\u9a8c\u5927\u4e8e\u6a21\u677f\n* \u652f\u6301\u4f7f\u7528 npm/yarn \u5b89\u88c5\u7ba1\u7406\u7b2c\u4e09\u65b9\u4f9d\u8d56\n* \u652f\u6301\u4f7f\u7528 ES6+\n* \u652f\u6301\u4f7f\u7528 CSS \u9884\u7f16\u8bd1\u5668\n* \u5c0f\u7a0b\u5e8f API \u4f18\u5316\uff0c\u5f02\u6b65 API Promise \u5316\n* \u8d85\u8f7b\u91cf\u7684\u4f9d\u8d56\u5305\uff0c\u987a\u4ece\u5c0f\u7a0b\u5e8f\u6807\u7b7e\u548c\u7ec4\u4ef6\u7684\u8bbe\u8ba1\n\n## \u5feb\u901f\u5f00\u59cb\n\n```bash\nnpm i omi-cli -g\nomi init-p my-app\ncd my-app\nnpm start //\u5f00\u53d1\u5c0f\u7a0b\u5e8f\nnpm run dev:h5 //\u5f00\u53d1 h5\nnpm run build:h5 //\u53d1\u5e03 h5\n```\n> node \u7248\u672c\u8981\u6c42 >= 8\n\n> \u4e5f\u652f\u6301\u4e00\u6761\u547d\u4ee4 `npx omi-cli init-p my-app` (npm v5.2.0+)\n\n\u628a\u5c0f\u7a0b\u5e8f\u76ee\u5f55\u8bbe\u7f6e\u5230 dist \u76ee\u5f55\u5c31\u53ef\u4ee5\u6109\u5feb\u5730\u8c03\u8bd5\u4e86\uff01\n\n\u4e5f\u53ef\u4ee5\u521d\u59cb\u5316 TypeScript \u6a21\u677f\u9879\u76ee:\n\n```js\nomi init-p-ts my-app\n```\n\n> \u4e5f\u652f\u6301\u4e00\u6761\u547d\u4ee4 `npx omi-cli init-p-ts my-app` (npm v5.2.0+)\n\n## \u4ee3\u7801\u793a\u4f8b\n\n```jsx\nimport { WeElement, define } from 'omi'\nimport './index.css'\n\ndefine('page-counter', class extends WeElement {\n config = {\n navigationBarTitleText: 'Counter'\n }\n\n data = {\n count: 1\n }\n\n sub = () => {\n this.data.count--\n this.update()\n }\n\n add = () => {\n this.data.count++\n this.update()\n }\n\n render() {\n return (\n <view>\n <button onClick={this.sub}>-</button>\n <text>{this.data.count}</text>\n <button onClick={this.add}>+</button>\n </view>\n )\n }\n})\n```\n\n## \u6269\u5c55\n\n`this.update` \u65b9\u6cd5\u53ef\u4ee5\u4f20\u9012\u6700\u77ed\u8def\u5f84\uff0c\u8fdb\u884c\u66f4\u65b0\uff0c\u6bd4\u5982\u4e0b\u9762\u4e24\u79cd\u5199\u6cd5\u662f\u7b49\u4ef7\u7684\u3002\n\n```js\nthis.update({\n count: 1\n})\n```\n\n\u7b49\u4ef7\u4e8e:\n\n```js\nthis.data.count = 1\nthis.update()\n```\n\n\u4e5f\u53ef\u4ee5\u548c setData \u4e00\u6837\u4f20\u9012 path:\n\n```js\nthis.update({\n 'list[1].obj.name': 'Omip'\n})\n```\n\n\u7531\u4e8e\u5c0f\u7a0b\u5e8f\u89c6\u56fe\u66f4\u65b0\u662f\u5f02\u6b65\u7684\uff0c\u5982\u679c\u9700\u8981\u83b7\u53d6\u89c6\u56fe\u66f4\u65b0\u540e\u7684\u56de\u8c03\uff0c\u53ef\u4ee5\u4f7f\u7528\u7b2c\u4e8c\u4e2a\u53c2\u6570:\n\n```js\nthis.update({\n 'list[1].obj.name': 'Omip'\n}, () => {\n console.log('\u66f4\u65b0\u5b8c\u6210')\n})\n```\n\n\u6216\u8005\u53ea\u6709\u4e00\u4e2a\u53c2\u6570\uff0c\u4e14\u8be5\u53c2\u6570\u4e3a\u51fd\u6570:\n\n```js\nthis.update(() => {\n console.log('\u66f4\u65b0\u5b8c\u6210')\n})\n```\n\n## \u6ce8\u610f\u4e8b\u9879\n\n\u5728 JSX \u6216\u8005\u4e00\u4e9b\u8981\u4f7f\u7528\u56fe\u7247\u8d44\u6e90\u7684 API\uff0c\u9700\u8981\u4f7f\u7528 import \u6216\u8005 require \u5148\u5bfc\u5165\u56fe\u7247\u518d\u4f7f\u7528\uff0c\u4e0d\u80fd\u76f4\u63a5\u4f7f\u7528\u76f8\u5bf9\u5730\u5740\uff01\n\n\u5982\uff1a\n\n```js\n onShareAppMessage(){\n\t\treturn {\n title: '\u5206\u4eab\u6807\u9898',\n path: '/pages/index/index?id=123',\n imageUrl: require('./share.jpg'),\n success: (res) => {\n console.log(\"\u8f6c\u53d1\u6210\u529f\", res);\n },\n fail: (res) => {\n console.log(\"\u8f6c\u53d1\u5931\u8d25\", res);\n }\n }\n }\n```\n\n\u518d\u6bd4\u5982:\n\n```jsx\nimport src from './my-image.png'\n...\n...\n\n\n render() {\n return (\n <view>\n <image src={src}></image>\n </view>\n )\n }\n...\n...\n\n```\n\n## \u83b7\u53d6\u6700\u65b0\u7684 omip \u7248\u672c\n\n\u4f60\u53ea\u9700\u8981\u91cd\u65b0\u62c9\u53bb\u6a21\u677f\u4fbf\u53ef\u4ee5\u66f4\u65b0\u5230\u6700\u65b0\u7684 omip:\n\n```\nomi init-p my-app\n```\n\n## \u5b9e\u6218\u6848\u4f8b\n\n![](../../assets/omip-douban-list.png)\n\n![](../../assets/omip-douban-detail.png)\n\n## License\n\nMIT \xa9 dntzhang\n\n#### Open Source Software Licensed Under the MIT License:\n\n[tarojs](https://github.com/NervJS/taro) 1.2.13\nCopyright (c) 2019 O2Team\n"}});
|
||||
//# sourceMappingURL=6.412e09ae.chunk.js.map
|
File diff suppressed because one or more lines are too long
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([6],{62:function(n,o){n.exports="## Omiu \n\nOmiu \u662f Omi \u5b98\u65b9 UI \u7ec4\u4ef6\u5e93\uff0c\u57fa\u4e8e Omio(IE8+) \u4e14\u517c\u5bb9 Omi,\u4f7f\u7528\u5fae\u4fe1 7.0 \u8bbe\u8ba1\u98ce\u683c\u3002\n\n[\u2192 Omiu Docs && REPL](https://tencent.github.io/omi/packages/omiu/examples/build/zh-cn.html)\n\n## \u8272\u5f69\n\n| **\u989c\u8272** | **\u610f\u4e49** |\n| ------------- |:-------------:|\n| #07C160 | \u5c0a\u8d35\u6d3b\u529b\u7eff | \n| #171717 | \u6c89\u7a33\u5178\u96c5\u9ed1 | \n| #FEFEFE | \u6e05\u65b0\u8131\u4fd7\u767d | \n| #F95050 | \u6c14\u8d28\u9192\u76ee\u7ea2 | \n| #ECECEC | \u8ff7\u60d8\u6de1\u6cca\u7070 | \n\n## \u65b0\u9879\u76ee\u5feb\u901f\u4f7f\u7528\n\n```\nnpm i omi-cli -g \nomi init my-app \ncd my-app \nnpm start \nnpm run build \n```\n\n> `npx omi-cli init my-app` \u4e5f\u652f\u6301(\u8981\u6c42 npm v5.2.0+)\n\n## \u73b0\u6709\u9879\u76ee\u4f7f\u7528\n\n```js\nnpm i omiu\n```\n\n```js\nimport { WeElement, define, render } from 'omi'\n//node modules \u4e0b\u7684 omiu \u7ec4\u4ef6\u90fd\u662f E6+,\u4f60\u9700\u8981\u628a node modules \u4e0b\u7684 js \u4e5f\u8bbe\u7f6e\u6210\u7ecf\u8fc7 babel \u6216 ts \u7f16\u8bd1\u624d\u80fd\u6b63\u5e38\u8dd1\u8d77\u6765\nimport 'omiu/button'\n\n//\u6216\u8005\u5bfc\u5165\u6240\u6709\u7ec4\u4ef6\uff0cnode modules \u7684 omi.js \u662f ES5 \u7684\uff0c\u4e0d\u9700\u8981\u989d\u5916\u914d\u7f6e\n//import 'omiu'\n\ndefine('my-app', class extends WeElement {\n onClick = () => {\n console.log('Hello omiu!');\n }\n\n render() {\n return (\n <o-button onClick={this.onClick}>\u6309\u94ae</o-button>\n )\n }\n})\n\nrender(<my-app />, 'body')\n```\n"}});
|
||||
//# sourceMappingURL=6.62a98a69.chunk.js.map
|
|
@ -1 +0,0 @@
|
|||
{"version":3,"sources":["../static/js/6.62a98a69.chunk.js","docs/zh-cn/omiu.md"],"names":["webpackJsonp","62","module","exports"],"mappings":"AAAAA,cAAc,IAERC,GACA,SAAUC,EAAQC,GCHxBD,EAAAC,QAAA","file":"static/js/6.62a98a69.chunk.js","sourcesContent":["webpackJsonp([6],{\n\n/***/ 62:\n/***/ (function(module, exports) {\n\nmodule.exports = \"## Omiu \\n\\nOmiu 是 Omi 官方 UI 组件库,基于 Omio(IE8+) 且兼容 Omi,使用微信 7.0 设计风格。\\n\\n[→ Omiu Docs && REPL](https://tencent.github.io/omi/packages/omiu/examples/build/zh-cn.html)\\n\\n## 色彩\\n\\n| **颜色** | **意义** |\\n| ------------- |:-------------:|\\n| #07C160 | 尊贵活力绿 | \\n| #171717 | 沉稳典雅黑 | \\n| #FEFEFE | 清新脱俗白 | \\n| #F95050 | 气质醒目红 | \\n| #ECECEC | 迷惘淡泊灰 | \\n\\n## 新项目快速使用\\n\\n```\\nnpm i omi-cli -g \\nomi init my-app \\ncd my-app \\nnpm start \\nnpm run build \\n```\\n\\n> `npx omi-cli init my-app` 也支持(要求 npm v5.2.0+)\\n\\n## 现有项目使用\\n\\n```js\\nnpm i omiu\\n```\\n\\n```js\\nimport { WeElement, define, render } from 'omi'\\n//node modules 下的 omiu 组件都是 E6+,你需要把 node modules 下的 js 也设置成经过 babel 或 ts 编译才能正常跑起来\\nimport 'omiu/button'\\n\\n//或者导入所有组件,node modules 的 omi.js 是 ES5 的,不需要额外配置\\n//import 'omiu'\\n\\ndefine('my-app', class extends WeElement {\\n onClick = () => {\\n console.log('Hello omiu!');\\n }\\n\\n render() {\\n return (\\n <o-button onClick={this.onClick}>按钮</o-button>\\n )\\n }\\n})\\n\\nrender(<my-app />, 'body')\\n```\\n\"\n\n/***/ })\n\n});\n\n\n// WEBPACK FOOTER //\n// static/js/6.62a98a69.chunk.js","module.exports = \"## Omiu \\n\\nOmiu 是 Omi 官方 UI 组件库,基于 Omio(IE8+) 且兼容 Omi,使用微信 7.0 设计风格。\\n\\n[→ Omiu Docs && REPL](https://tencent.github.io/omi/packages/omiu/examples/build/zh-cn.html)\\n\\n## 色彩\\n\\n| **颜色** | **意义** |\\n| ------------- |:-------------:|\\n| #07C160 | 尊贵活力绿 | \\n| #171717 | 沉稳典雅黑 | \\n| #FEFEFE | 清新脱俗白 | \\n| #F95050 | 气质醒目红 | \\n| #ECECEC | 迷惘淡泊灰 | \\n\\n## 新项目快速使用\\n\\n```\\nnpm i omi-cli -g \\nomi init my-app \\ncd my-app \\nnpm start \\nnpm run build \\n```\\n\\n> `npx omi-cli init my-app` 也支持(要求 npm v5.2.0+)\\n\\n## 现有项目使用\\n\\n```js\\nnpm i omiu\\n```\\n\\n```js\\nimport { WeElement, define, render } from 'omi'\\n//node modules 下的 omiu 组件都是 E6+,你需要把 node modules 下的 js 也设置成经过 babel 或 ts 编译才能正常跑起来\\nimport 'omiu/button'\\n\\n//或者导入所有组件,node modules 的 omi.js 是 ES5 的,不需要额外配置\\n//import 'omiu'\\n\\ndefine('my-app', class extends WeElement {\\n onClick = () => {\\n console.log('Hello omiu!');\\n }\\n\\n render() {\\n return (\\n <o-button onClick={this.onClick}>按钮</o-button>\\n )\\n }\\n})\\n\\nrender(<my-app />, 'body')\\n```\\n\"\n\n\n//////////////////\n// WEBPACK FOOTER\n// ./src/docs/zh-cn/omiu.md\n// module id = 62\n// module chunks = 6"],"sourceRoot":""}
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([7],{61:function(n,e){n.exports="# Omim\n\n[Omi](https://github.com/Tencent/omi) \u6253\u9020\u7684 Material Design \u6846\u67b6\u65e0\u5173\u6807\u51c6\u7ec4\u4ef6\uff0c\u4efb\u610f\u6846\u67b6\u90fd\u53ef\u4ee5\u4f7f\u7528\u3002\n\n![](https://tencent.github.io/omi/packages/omim/assets/pv4.jpeg?a=1)\n\n## \u7279\u6027\n\n* \u4f7f\u7528\u6807\u51c6 Web Components \u7684 Custom Elements \u6e32\u67d3 \n* \u4efb\u610f\u6846\u67b6\u90fd\u53ef\u4ee5\u4f7f\u7528\u8fd9\u4e9b\u7ec4\u4ef6(\u6bd4\u5982 Omi, React, Vue and Angular)\n* \u540c\u65f6\u652f\u6301 JSX \u548c \u539f\u751f HTML \u6807\u7b7e\u7684\u4f7f\u7528\u65b9\u5f0f \n* \u6bcf\u4e2a\u7ec4\u4ef6\u53ef\u4ee5\u5355\u72ec\u4f7f\u7528\n* \u8d85\u7ea7\u5bb9\u6613\u66f4\u6362\u4e3b\u9898\u989c\u8272\u3001\u5b57\u4f53\u548c\u5706\u89d2\n* \u6269\u5c55\u4e86 HTML \u80fd\u529b\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u5b57\u7b26\u4e32 `'0'` \u6216\u8005\u5b57\u7b26\u4e32 `'false'` \u4f20\u9012 false \u7ed9\u5143\u7d20\n\n## \u4f7f\u7528\u6307\u5357\n\n### \u901a\u8fc7 script\n\n```html\n<script src=\"https://unpkg.com/omi\"><\/script>\n<script src=\"https://unpkg.com/@omim/core@latest/button/index.js\"><\/script>\n\n<m-button>I am button</m-button>\n```\n\n### \u901a\u8fc7 npm\n\n``` bash\nnpm install @omim/core\n```\n\nThen:\n\n```js\nimport '@omim/core/button'\n```\n\n\u7136\u540e\u5728\u4efb\u610f\u6846\u67b6\u4e2d\u4f7f\u7528\uff0c\u6bd4\u5982 Omi, React, Vue or Angular:\n\n``` html\n<m-button>I am button</m-button>\n```\n\nIt can also be used in pure js:\n\n```js\nvar button = document.createElement('m-button')\nbutton.innerHTML = 'I am button'\ndocument.body.append(button)\nbutton.addEventListener('click', function () {\n console.log('Clicked!')\n})\n\n//or\n//document.body.innerHTML = '<m-button>I am button</m-button>'\n```\n\n## \u66f4\u6539\u4e3b\u9898\n\n```js\ndocument.body.style.setProperty('--mdc-theme-primary', 'red')\ndocument.body.style.setProperty('--mdc-theme-secondary', 'blue')\ndocument.body.style.setProperty('--mdc-theme-error', 'yellow')\n```\n\n\u6240\u6709\u914d\u7f6e\u5982\u4e0b:\n\n```css\n--mdc-theme-primary: #0072d9;\n--mdc-theme-secondary: #2170b8;\n--mdc-theme-error: #f5222d;\n--mdc-theme-surface: #ffffff;\n--mdc-theme-on-primary: #ffffff;\n--mdc-theme-on-secondary: #ffffff;\n--mdc-theme-on-error: #ffffff;\n--mdc-theme-on-surface: #000000;\n--mdc-theme-background: #ffffff;\n--mdc-shape-small-component-radius: 4px;\n--mdc-shape-medium-component-radius: 4px;\n--mdc-shape-large-component-radius: 0px;\n--mdc-typography--font-family: Roboto, sans-serif;\n```\n\n## HTML \u6269\u5c55 \n\n\u5f53\u9ed8\u8ba4\u503c\u4e3a true\uff0c\u9700\u8981\u4f20\u9012 false \u7ed9 element \u7684\u65f6\u5019\uff0c\u4ee5\u524d\u662f\u5386\u53f2\u96be\u9898\uff0cOmi \u5b8c\u7f8e\u89e3\u51b3\u4e86\u8fd9\u4e00\u70b9\uff0c\u4f60\u53ef\u4ee5\u901a\u8fc7\u5b57\u7b26\u4e32 `'0'` \u6216\u8005 \u5b57\u7b26\u4e32 `'false'` \u6765\u8bbe\u7f6e\u3002\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## \u8d21\u732e\n\n### \u4e00\u4e9b\u547d\u4ee4\n\nBuild \u7ec4\u4ef6:\n\n```bash\nnpm run build -- component-name\n```\n\nBuild \u6240\u6709\u7ec4\u4ef6:\n\n```bash\nnpm run build-all\n```\n\nBuild \u4f8b\u5b50:\n\n```bash\nnpm start demo-name\n```\n\n\u53d1\u5e03:\n\n```bash\nnpm publish --access public\n```\n\n## \u76f8\u5173\u94fe\u63a5\n\n* [material.io docs](https://material.io/develop/web/components/buttons/) \n* [material.io demo](https://material-components.github.io/material-components-web-catalog/#/) \n* [material-theme-builder](https://material-theme-builder.glitch.me/)\n* [material-components-web](https://github.com/material-components/material-components-web)\n"}});
|
||||
//# sourceMappingURL=7.df2bc85a.chunk.js.map
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -24,12 +24,12 @@ const config = {
|
|||
{
|
||||
title: '其他',
|
||||
list: [
|
||||
{ name: 'Omim', md: 'omim' },
|
||||
{ name: '路由', md: 'router' },
|
||||
{ name: '服务端渲染', md: 'ssr' },
|
||||
{ name: '生态与例子', md: 'other' },
|
||||
{ name: 'Mps', md: 'mps' },
|
||||
{ name: 'Omip 多端开发', md: 'omip' },
|
||||
{ name: '服务端渲染', md: 'ssr' },
|
||||
{ name: '路由', md: 'router' },
|
||||
{ name: 'Omiu', md: 'omiu' }
|
||||
{ name: 'Omip 多端开发', md: 'omip' }
|
||||
]
|
||||
}
|
||||
],
|
||||
|
@ -57,10 +57,10 @@ const config = {
|
|||
{
|
||||
title: 'Other',
|
||||
list: [
|
||||
{ name: 'Ecosystem and examples', md: 'other' },
|
||||
{ name: 'Server-Side Rendering', md: 'ssr' },
|
||||
{ name: 'Omim', md: 'omim' },
|
||||
{ name: 'Router', md: 'router' },
|
||||
{ name: 'Omiu', md: 'omiu' }
|
||||
{ name: 'Server-Side Rendering', md: 'ssr' },
|
||||
{ name: 'Ecosystem and examples', md: 'other' }
|
||||
]
|
||||
}
|
||||
]
|
||||
|
|
|
@ -0,0 +1,154 @@
|
|||
# Omim
|
||||
|
||||
Cross-Frameworks components, powered by Material Design and [Omi](https://github.com/Tencent/omi).
|
||||
|
||||
* [DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/index.html)
|
||||
|
||||
![](https://tencent.github.io/omi/packages/omim/assets/pv4.jpeg?a=1)
|
||||
|
||||
## Features
|
||||
|
||||
* Render by Custom Elements of Web Components
|
||||
* Any framework can use the components, such as Omi, React, Vue and Angular
|
||||
* Support both JSX and native HTML elements
|
||||
* Each element can be used independently
|
||||
* Super easy to change theme colors, fonts and rounded corners
|
||||
* Extended HTML capabilities, you can pass false attributes to elements through string `'0'` or string `'flase'`
|
||||
|
||||
## Usage
|
||||
|
||||
### Via script
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/omi"></script>
|
||||
<script src="https://unpkg.com/@omim/core@latest/button/index.js"></script>
|
||||
|
||||
<m-button>I am button</m-button>
|
||||
```
|
||||
|
||||
### Via npm
|
||||
|
||||
``` bash
|
||||
npm install @omim/core
|
||||
```
|
||||
|
||||
Then:
|
||||
|
||||
```js
|
||||
import '@omim/core/button'
|
||||
```
|
||||
|
||||
Then use the element in Omi, React, Vue or Angular:
|
||||
|
||||
``` html
|
||||
<m-button>I am button</m-button>
|
||||
```
|
||||
|
||||
It can also be used in pure js:
|
||||
|
||||
```js
|
||||
var button = document.createElement('m-button')
|
||||
button.innerHTML = 'I am button'
|
||||
document.body.append(button)
|
||||
button.addEventListener('click', function () {
|
||||
console.log('Clicked!')
|
||||
})
|
||||
|
||||
//or
|
||||
//document.body.innerHTML = '<m-button>I am button</m-button>'
|
||||
```
|
||||
|
||||
## Change Theme
|
||||
|
||||
```js
|
||||
document.body.style.setProperty('--mdc-theme-primary', 'red')
|
||||
document.body.style.setProperty('--mdc-theme-secondary', 'blue')
|
||||
document.body.style.setProperty('--mdc-shape-small-component-radius', '2px')
|
||||
```
|
||||
|
||||
All the config:
|
||||
|
||||
```
|
||||
--mdc-theme-primary: #0072d9;
|
||||
--mdc-theme-secondary: #2170b8;
|
||||
--mdc-theme-error: #f5222d;
|
||||
--mdc-theme-surface: #ffffff;
|
||||
--mdc-theme-on-primary: #ffffff;
|
||||
--mdc-theme-on-secondary: #ffffff;
|
||||
--mdc-theme-on-error: #ffffff;
|
||||
--mdc-theme-on-surface: #000000;
|
||||
--mdc-theme-background: #ffffff;
|
||||
--mdc-shape-small-component-radius: 4px;
|
||||
--mdc-shape-medium-component-radius: 4px;
|
||||
--mdc-shape-large-component-radius: 0px;
|
||||
--mdc-typography--font-family: Roboto, sans-serif;
|
||||
```
|
||||
|
||||
## HTML Extention
|
||||
|
||||
You can set boolean prop to false from markup by 0 or false string.
|
||||
|
||||
```js
|
||||
define('my-element', class extends WeElement {
|
||||
static defaultProps = {
|
||||
show: true
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
show: Boolean
|
||||
}
|
||||
|
||||
render(props) {
|
||||
...
|
||||
...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Use:
|
||||
|
||||
```html
|
||||
<my-element show="false"></my-element>
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```html
|
||||
<my-element show="0"></my-element>
|
||||
```
|
||||
|
||||
## Contribution
|
||||
|
||||
### CMD
|
||||
|
||||
Build component:
|
||||
|
||||
```bash
|
||||
npm run build -- component-name
|
||||
```
|
||||
|
||||
Build all components:
|
||||
|
||||
```bash
|
||||
npm run build-all
|
||||
```
|
||||
|
||||
Build demo:
|
||||
|
||||
```bash
|
||||
npm start demo-name
|
||||
```
|
||||
|
||||
Publish:
|
||||
|
||||
```bash
|
||||
npm publish --access public
|
||||
```
|
||||
|
||||
### Links
|
||||
|
||||
* [material.io docs](https://material.io/develop/web/components/buttons/)
|
||||
* [material.io demo](https://material-components.github.io/material-components-web-catalog/#/)
|
||||
* [material-theme-builder](https://material-theme-builder.glitch.me/)
|
||||
* [material-components-web](https://github.com/material-components/material-components-web)
|
||||
* [material-icons](https://material.io/tools/icons/?style=baseline)
|
|
@ -1,57 +0,0 @@
|
|||
## Omiu
|
||||
|
||||
Omiu is the official UI component library of Omi, based on Omio(IE8+) and compatible with Omi, using the design style of Wechat 7.0.
|
||||
|
||||
[→ Omiu Docs && REPL](https://tencent.github.io/omi/packages/omiu/examples/build/index.html)
|
||||
|
||||
## Colors
|
||||
|
||||
| **Color** | **Meaning** |
|
||||
| ------------- |:-------------:|
|
||||
| #07C160 | Noble Vigorous Green |
|
||||
| #171717 | Steady Elegant Black |
|
||||
| #FEFEFE | Transcendent White |
|
||||
| #F95050 | Temperament Eye-catching Red |
|
||||
| #ECECEC | Lost Indifferent Gray |
|
||||
|
||||
|
||||
## Use it immediately
|
||||
|
||||
```
|
||||
npm i omi-cli -g
|
||||
omi init my-app
|
||||
cd my-app
|
||||
npm start
|
||||
npm run build
|
||||
```
|
||||
|
||||
> `npx omi-cli init my-app` is also supported(npm v5.2.0+).
|
||||
|
||||
## Use it in existing project
|
||||
|
||||
```js
|
||||
npm i omiu
|
||||
```
|
||||
|
||||
```js
|
||||
import { WeElement, define, render } from 'omi'
|
||||
//written by E6+, you need to set JS under node modules to run normally after Babel or TS compilation
|
||||
import 'omiu/button'
|
||||
//or import all, published by ES5
|
||||
//import 'omiu'
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
onClick = () => {
|
||||
console.log('Hello omiu!');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-button onClick={this.onClick}>I am button.</o-button>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')
|
||||
```
|
||||
|
|
@ -2,10 +2,8 @@
|
|||
|
||||
| **Project** | **Description** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-docs](https://github.com/Tencent/omi/blob/master/docs/main-concepts.md)| Omi official documents |
|
||||
| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| 直接使用 Omi 开发小程序或 H5 SPA!!!|
|
||||
| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| Omi for old browsers(IE8+ and mobile browsers).|
|
||||
| [omiu](https://tencent.github.io/omi/packages/omiu/examples/build/index.html)| Omi official UI|
|
||||
| [omix](https://github.com/Tencent/omi/tree/master/packages/omix)| Tiny size mini programe framework.|
|
||||
| [omi-chart](https://github.com/Tencent/omi/tree/master/packages/omi-chart)| Simple HTML5 Charts using chart-x tag.|
|
||||
| [md2site](https://tencent.github.io/omi/assets/md2site/)| Static Site Generator with markdown powered by Omio.|
|
||||
|
|
|
@ -0,0 +1,151 @@
|
|||
# Omim
|
||||
|
||||
[Omi](https://github.com/Tencent/omi) 打造的 Material Design 框架无关标准组件,任意框架都可以使用。
|
||||
|
||||
![](https://tencent.github.io/omi/packages/omim/assets/pv4.jpeg?a=1)
|
||||
|
||||
## 特性
|
||||
|
||||
* 使用标准 Web Components 的 Custom Elements 渲染
|
||||
* 任意框架都可以使用这些组件(比如 Omi, React, Vue and Angular)
|
||||
* 同时支持 JSX 和 原生 HTML 标签的使用方式
|
||||
* 每个组件可以单独使用
|
||||
* 超级容易更换主题颜色、字体和圆角
|
||||
* 扩展了 HTML 能力,你可以通过字符串 `'0'` 或者字符串 `'false'` 传递 false 给元素
|
||||
|
||||
## 使用指南
|
||||
|
||||
### 通过 script
|
||||
|
||||
```html
|
||||
<script src="https://unpkg.com/omi"></script>
|
||||
<script src="https://unpkg.com/@omim/core@latest/button/index.js"></script>
|
||||
|
||||
<m-button>I am button</m-button>
|
||||
```
|
||||
|
||||
### 通过 npm
|
||||
|
||||
``` bash
|
||||
npm install @omim/core
|
||||
```
|
||||
|
||||
Then:
|
||||
|
||||
```js
|
||||
import '@omim/core/button'
|
||||
```
|
||||
|
||||
然后在任意框架中使用,比如 Omi, React, Vue or Angular:
|
||||
|
||||
``` html
|
||||
<m-button>I am button</m-button>
|
||||
```
|
||||
|
||||
It can also be used in pure js:
|
||||
|
||||
```js
|
||||
var button = document.createElement('m-button')
|
||||
button.innerHTML = 'I am button'
|
||||
document.body.append(button)
|
||||
button.addEventListener('click', function () {
|
||||
console.log('Clicked!')
|
||||
})
|
||||
|
||||
//or
|
||||
//document.body.innerHTML = '<m-button>I am button</m-button>'
|
||||
```
|
||||
|
||||
## 更改主题
|
||||
|
||||
```js
|
||||
document.body.style.setProperty('--mdc-theme-primary', 'red')
|
||||
document.body.style.setProperty('--mdc-theme-secondary', 'blue')
|
||||
document.body.style.setProperty('--mdc-theme-error', 'yellow')
|
||||
```
|
||||
|
||||
所有配置如下:
|
||||
|
||||
```css
|
||||
--mdc-theme-primary: #0072d9;
|
||||
--mdc-theme-secondary: #2170b8;
|
||||
--mdc-theme-error: #f5222d;
|
||||
--mdc-theme-surface: #ffffff;
|
||||
--mdc-theme-on-primary: #ffffff;
|
||||
--mdc-theme-on-secondary: #ffffff;
|
||||
--mdc-theme-on-error: #ffffff;
|
||||
--mdc-theme-on-surface: #000000;
|
||||
--mdc-theme-background: #ffffff;
|
||||
--mdc-shape-small-component-radius: 4px;
|
||||
--mdc-shape-medium-component-radius: 4px;
|
||||
--mdc-shape-large-component-radius: 0px;
|
||||
--mdc-typography--font-family: Roboto, sans-serif;
|
||||
```
|
||||
|
||||
## HTML 扩展
|
||||
|
||||
当默认值为 true,需要传递 false 给 element 的时候,以前是历史难题,Omi 完美解决了这一点,你可以通过字符串 `'0'` 或者 字符串 `'false'` 来设置。
|
||||
|
||||
```js
|
||||
define('my-element', class extends WeElement {
|
||||
static defaultProps = {
|
||||
show: true
|
||||
}
|
||||
|
||||
static propTypes = {
|
||||
show: Boolean
|
||||
}
|
||||
|
||||
render(props) {
|
||||
...
|
||||
...
|
||||
}
|
||||
})
|
||||
```
|
||||
|
||||
Use:
|
||||
|
||||
```html
|
||||
<my-element show="false"></my-element>
|
||||
```
|
||||
|
||||
or
|
||||
|
||||
```html
|
||||
<my-element show="0"></my-element>
|
||||
```
|
||||
|
||||
## 贡献
|
||||
|
||||
### 一些命令
|
||||
|
||||
Build 组件:
|
||||
|
||||
```bash
|
||||
npm run build -- component-name
|
||||
```
|
||||
|
||||
Build 所有组件:
|
||||
|
||||
```bash
|
||||
npm run build-all
|
||||
```
|
||||
|
||||
Build 例子:
|
||||
|
||||
```bash
|
||||
npm start demo-name
|
||||
```
|
||||
|
||||
发布:
|
||||
|
||||
```bash
|
||||
npm publish --access public
|
||||
```
|
||||
|
||||
## 相关链接
|
||||
|
||||
* [material.io docs](https://material.io/develop/web/components/buttons/)
|
||||
* [material.io demo](https://material-components.github.io/material-components-web-catalog/#/)
|
||||
* [material-theme-builder](https://material-theme-builder.glitch.me/)
|
||||
* [material-components-web](https://github.com/material-components/material-components-web)
|
|
@ -1,56 +0,0 @@
|
|||
## Omiu
|
||||
|
||||
Omiu 是 Omi 官方 UI 组件库,基于 Omio(IE8+) 且兼容 Omi,使用微信 7.0 设计风格。
|
||||
|
||||
[→ Omiu Docs && REPL](https://tencent.github.io/omi/packages/omiu/examples/build/zh-cn.html)
|
||||
|
||||
## 色彩
|
||||
|
||||
| **颜色** | **意义** |
|
||||
| ------------- |:-------------:|
|
||||
| #07C160 | 尊贵活力绿 |
|
||||
| #171717 | 沉稳典雅黑 |
|
||||
| #FEFEFE | 清新脱俗白 |
|
||||
| #F95050 | 气质醒目红 |
|
||||
| #ECECEC | 迷惘淡泊灰 |
|
||||
|
||||
## 新项目快速使用
|
||||
|
||||
```
|
||||
npm i omi-cli -g
|
||||
omi init my-app
|
||||
cd my-app
|
||||
npm start
|
||||
npm run build
|
||||
```
|
||||
|
||||
> `npx omi-cli init my-app` 也支持(要求 npm v5.2.0+)
|
||||
|
||||
## 现有项目使用
|
||||
|
||||
```js
|
||||
npm i omiu
|
||||
```
|
||||
|
||||
```js
|
||||
import { WeElement, define, render } from 'omi'
|
||||
//node modules 下的 omiu 组件都是 E6+,你需要把 node modules 下的 js 也设置成经过 babel 或 ts 编译才能正常跑起来
|
||||
import 'omiu/button'
|
||||
|
||||
//或者导入所有组件,node modules 的 omi.js 是 ES5 的,不需要额外配置
|
||||
//import 'omiu'
|
||||
|
||||
define('my-app', class extends WeElement {
|
||||
onClick = () => {
|
||||
console.log('Hello omiu!');
|
||||
}
|
||||
|
||||
render() {
|
||||
return (
|
||||
<o-button onClick={this.onClick}>按钮</o-button>
|
||||
)
|
||||
}
|
||||
})
|
||||
|
||||
render(<my-app />, 'body')
|
||||
```
|
|
@ -4,10 +4,8 @@
|
|||
|
||||
| **项目** | **描述** |
|
||||
| ------------------------------- | ----------------------------------- |
|
||||
| [omi-docs](https://github.com/Tencent/omi/blob/master/docs/main-concepts.cn.md)| Omi 官方文档 |
|
||||
| [omip](https://github.com/Tencent/omi/tree/master/packages/omip)| 直接使用 Omi 开发小程序或 H5 SPA!!!|
|
||||
| [omio](https://github.com/Tencent/omi/tree/master/packages/omio)| 兼容老浏览器的 Omi 版本(支持到IE8+和移动端浏览器)。|
|
||||
| [omiu](https://tencent.github.io/omi/packages/omiu/examples/build/zh-cn.html)| Omi 官方 UI。|
|
||||
| [omix](https://github.com/Tencent/omi/tree/master/packages/omix)| 极小却精巧的小程序框架。|
|
||||
| [omi-mp](https://github.com/Tencent/omi/tree/master/packages/omi-mp)| 通过微信小程序开发和生成 Web 单页应用(H5 SPA)|
|
||||
| [omi-router](https://github.com/Tencent/omi/tree/master/packages/omi-router) |Omi 官方路由,超级小的尺寸,只有 1KB 的 js。[→ DEMO](https://tencent.github.io/omi/packages/omi-router/examples/spa/build/)|
|
||||
|
|
|
@ -15,7 +15,7 @@ define('my-footer', class extends WeElement {
|
|||
] = this.use
|
||||
const pre = this.store.getPre()
|
||||
const next = this.store.getNext()
|
||||
console.log(pre,next)
|
||||
|
||||
return (
|
||||
<div class='ft'>
|
||||
{pre &&<a href={'#/' + pre.md + `?index=${pre.index}&subIndex=${pre.subIndex}`} class='pre'>← {pre.name}</a>}
|
||||
|
|
|
@ -4,6 +4,10 @@ import logo from './omi-logo2019.svg'
|
|||
define('my-head', class extends WeElement {
|
||||
static css = require('./_index.css')
|
||||
|
||||
static use = [
|
||||
'position'
|
||||
]
|
||||
|
||||
toggleMenus = evt => {
|
||||
this.store.toogleSidebar()
|
||||
evt.stopPropagation()
|
||||
|
@ -34,9 +38,9 @@ define('my-head', class extends WeElement {
|
|||
<li style='color:#aaa;'>|</li>
|
||||
<li class="github_li m_show">
|
||||
{this.store.data.lan === 'en' ? (
|
||||
<a href="cn.html">中文</a>
|
||||
<a href={`cn.html${location.hash}`}>中文</a>
|
||||
) : (
|
||||
<a href="index.html">English</a>
|
||||
<a href={`index.html${location.hash}`}>English</a>
|
||||
)}
|
||||
</li>
|
||||
</ul>
|
||||
|
|
Loading…
Reference in New Issue