omim - update docs
This commit is contained in:
dntzhang
parent
13658c8204
commit
76d3c88086
|
|
@ -1,6 +1,6 @@
|
|||
# Omim
|
||||
|
||||
Cross-Frameworks components, powered by Material Design and [Omi](https://github.com/Tencent/omi).
|
||||
Cross **frameworks** and **themes** components by [Omi](https://github.com/Tencent/omi).
|
||||
|
||||
* [DOCS & REPL](https://tencent.github.io/omi/packages/omim/docs/build/index.html)
|
||||
|
||||
|
|
|
|||
|
|
@ -1,12 +1,12 @@
|
|||
{
|
||||
"cn.css": "static/css/cn.d7592a4b.css",
|
||||
"cn.css.map": "static/css/cn.d7592a4b.css.map",
|
||||
"cn.js": "static/js/cn.102fbe78.js",
|
||||
"cn.js.map": "static/js/cn.102fbe78.js.map",
|
||||
"cn.js": "static/js/cn.f765523a.js",
|
||||
"cn.js.map": "static/js/cn.f765523a.js.map",
|
||||
"index.css": "static/css/index.d7592a4b.css",
|
||||
"index.css.map": "static/css/index.d7592a4b.css.map",
|
||||
"index.js": "static/js/index.c50faa45.js",
|
||||
"index.js.map": "static/js/index.c50faa45.js.map",
|
||||
"index.js": "static/js/index.97a2acf5.js",
|
||||
"index.js.map": "static/js/index.97a2acf5.js.map",
|
||||
"static/js/0.fedf87f8.chunk.js": "static/js/0.fedf87f8.chunk.js",
|
||||
"static/js/0.fedf87f8.chunk.js.map": "static/js/0.fedf87f8.chunk.js.map",
|
||||
"static/js/1.db587cfb.chunk.js": "static/js/1.db587cfb.chunk.js",
|
||||
|
|
@ -23,8 +23,8 @@
|
|||
"static/js/103.18e9795a.chunk.js.map": "static/js/103.18e9795a.chunk.js.map",
|
||||
"static/js/104.89703d94.chunk.js": "static/js/104.89703d94.chunk.js",
|
||||
"static/js/104.89703d94.chunk.js.map": "static/js/104.89703d94.chunk.js.map",
|
||||
"static/js/105.3b6b98b1.chunk.js": "static/js/105.3b6b98b1.chunk.js",
|
||||
"static/js/105.3b6b98b1.chunk.js.map": "static/js/105.3b6b98b1.chunk.js.map",
|
||||
"static/js/105.0691d225.chunk.js": "static/js/105.0691d225.chunk.js",
|
||||
"static/js/105.0691d225.chunk.js.map": "static/js/105.0691d225.chunk.js.map",
|
||||
"static/js/106.ac4bab45.chunk.js": "static/js/106.ac4bab45.chunk.js",
|
||||
"static/js/106.ac4bab45.chunk.js.map": "static/js/106.ac4bab45.chunk.js.map",
|
||||
"static/js/107.9216a3d6.chunk.js": "static/js/107.9216a3d6.chunk.js",
|
||||
|
|
@ -137,8 +137,8 @@
|
|||
"static/js/39.59bbd8a7.chunk.js.map": "static/js/39.59bbd8a7.chunk.js.map",
|
||||
"static/js/4.fd41f18f.chunk.js": "static/js/4.fd41f18f.chunk.js",
|
||||
"static/js/4.fd41f18f.chunk.js.map": "static/js/4.fd41f18f.chunk.js.map",
|
||||
"static/js/40.06003d33.chunk.js": "static/js/40.06003d33.chunk.js",
|
||||
"static/js/40.06003d33.chunk.js.map": "static/js/40.06003d33.chunk.js.map",
|
||||
"static/js/40.0fb91d63.chunk.js": "static/js/40.0fb91d63.chunk.js",
|
||||
"static/js/40.0fb91d63.chunk.js.map": "static/js/40.0fb91d63.chunk.js.map",
|
||||
"static/js/41.03979e58.chunk.js": "static/js/41.03979e58.chunk.js",
|
||||
"static/js/41.03979e58.chunk.js.map": "static/js/41.03979e58.chunk.js.map",
|
||||
"static/js/42.99556ae6.chunk.js": "static/js/42.99556ae6.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>Omim - Material Design for the Web, powered by Omi.</title><link href="./static/css/cn.d7592a4b.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.102fbe78.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>Omim - Material Design for the Web, powered by Omi.</title><link href="./static/css/cn.d7592a4b.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.f765523a.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>Omim - Material Design for the Web, powered by Omi.</title><link href="./static/css/index.d7592a4b.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.c50faa45.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>Omim - Material Design for the Web, powered by Omi.</title><link href="./static/css/index.d7592a4b.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.97a2acf5.js"></script></body></html>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,2 @@
|
|||
webpackJsonp([105],{61:function(n,e){n.exports="# Omim\n\n Cross **frameworks** and **themes** components by [Omi](https://github.com/Tencent/omi).\n\n\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## Cross Frameworks\n\n* [Using Omim in React](https://tencent.github.io/omi/packages/omim/test-react/build/index.html) & [Source Code](https://github.com/Tencent/omi/blob/master/packages/omim/test-react/src/HookTest.js)\n* [Using Omim in Vue](https://tencent.github.io/omi/packages/omim/test-vue/dist/index.html) & [Source Code](https://github.com/Tencent/omi/blob/master/packages/omim/test-vue/app.vue)\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@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\n```\n\nThen:\n\n```js\nimport 'omim/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 Color\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\nAll the config:\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 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## Usage in React\n\n```jsx\n/** @jsx nativeEvents */\nimport nativeEvents from 'jsx-native-events'\nimport { useState } from 'react'\nimport 'omim/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 <m-icon-button color=\"red\" icons=\"['favorite', 'favorite_border']\" onEventChange={e => setSwitch(e.detail.isOn)}>\n </m-icon-button>\n </div>\n )\n}\n```\n\nMany thanks to calebdwilliams's [jsx-native-events](https://github.com/calebdwilliams/jsx-native-events#readme).\n\n## Usage in Vue\n\n```html\n<script>\nimport 'omim/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 <m-icon-button color=\"red\" icons=\"['favorite', 'favorite_border']\" @change=\"myEvent\"></m-icon-button>\n </div>\n</template>\n```\n\n> Note that in order to display icon in react or vue app, you need to put this in HTML:\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\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"}});
|
||||
//# sourceMappingURL=105.0691d225.chunk.js.map
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -1,2 +0,0 @@
|
|||
webpackJsonp([105],{61:function(n,e){n.exports="# Omim\n\nCross-Frameworks components, powered by Material Design and [Omi](https://github.com/Tencent/omi).\n\n\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## Cross Frameworks\n\n* [Using Omim in React](https://tencent.github.io/omi/packages/omim/test-react/build/index.html) & [Source Code](https://github.com/Tencent/omi/blob/master/packages/omim/test-react/src/HookTest.js)\n* [Using Omim in Vue](https://tencent.github.io/omi/packages/omim/test-vue/dist/index.html) & [Source Code](https://github.com/Tencent/omi/blob/master/packages/omim/test-vue/app.vue)\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@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\n```\n\nThen:\n\n```js\nimport 'omim/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 Color\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\nAll the config:\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 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## Usage in React\n\n```jsx\n/** @jsx nativeEvents */\nimport nativeEvents from 'jsx-native-events'\nimport { useState } from 'react'\nimport 'omim/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 <m-icon-button color=\"red\" icons=\"['favorite', 'favorite_border']\" onEventChange={e => setSwitch(e.detail.isOn)}>\n </m-icon-button>\n </div>\n )\n}\n```\n\nMany thanks to calebdwilliams's [jsx-native-events](https://github.com/calebdwilliams/jsx-native-events#readme).\n\n## Usage in Vue\n\n```html\n<script>\nimport 'omim/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 <m-icon-button color=\"red\" icons=\"['favorite', 'favorite_border']\" @change=\"myEvent\"></m-icon-button>\n </div>\n</template>\n```\n\n> Note that in order to display icon in react or vue app, you need to put this in HTML:\n\n```html\n<link rel=\"stylesheet\" href=\"https://fonts.googleapis.com/icon?family=Material+Icons\">\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"}});
|
||||
//# sourceMappingURL=105.3b6b98b1.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
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -1,6 +1,6 @@
|
|||
# Omim
|
||||
|
||||
Cross-Frameworks components, powered by Material Design and [Omi](https://github.com/Tencent/omi).
|
||||
Cross **frameworks** and **themes** components by [Omi](https://github.com/Tencent/omi).
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
# Omim
|
||||
|
||||
[Omi](https://github.com/Tencent/omi) 打造的 Material Design 框架无关标准组件，任意框架都可以使用。
|
||||
[Omi](https://github.com/Tencent/omi) 打造的跨框架、跨主题组件库。任意框架使用、主题自由定制。
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue