omim - chore

* Update readme
* Update dependencies of vue demo
* Update dependencies of react demo
* Use omim instead of @omim
This commit is contained in:
dntzhang 2019-07-14 15:12:03 +08:00
parent be0a7f90e6
commit 38d88636d5
5 changed files with 34 additions and 35 deletions

View File

@ -123,30 +123,6 @@ or
<my-element show="0"></my-element>
```
## Usage in React
```jsx
/** @jsx nativeEvents */
import nativeEvents from 'jsx-native-events'
import { useState } from 'react'
import 'omim/icon-button'
export default function SomeComponent(props) {
const [result, setSwitch] = useState(false)
return (
<div>
<p>The switch is {result ? 'on' : 'off'}</p>
<m-icon-button color="red" icons="['favorite', 'favorite_border']" onEventChange={e => setSwitch(e.detail.isOn)}>
</m-icon-button>
</div>
)
}
```
Many thanks to calebdwilliams's [jsx-native-events](https://github.com/calebdwilliams/jsx-native-events#readme).
## Usage in Vue
```html
@ -176,6 +152,29 @@ export default {
</template>
```
## Usage in React
```jsx
/** @jsx nativeEvents */
import nativeEvents from 'jsx-native-events'
import { useState } from 'react'
import 'omim/icon-button'
export default function SomeComponent(props) {
const [result, setSwitch] = useState(false)
return (
<div>
<p>The switch is {result ? 'on' : 'off'}</p>
<m-icon-button color="red" icons="['favorite', 'favorite_border']" onEventChange={e => setSwitch(e.detail.isOn)}>
</m-icon-button>
</div>
)
}
```
Many thanks to calebdwilliams's [jsx-native-events](https://github.com/calebdwilliams/jsx-native-events#readme).
> Note that in order to display icon in react or vue app, you need to put this in HTML:
```html

View File

@ -3,7 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
"@omim/core": "^0.6.5",
"omim": "latest",
"jsx-native-events": "^1.0.1",
"react": "^16.8.6",
"react-dom": "^16.8.6",

View File

@ -1,7 +1,7 @@
import React from 'react';
import logo from './logo.svg';
import './App.css';
import '@omim/core/button'
import 'omim/button'
import MyComponent from './MyComponent'
import HookTest from './HookTest'

View File

@ -2,16 +2,16 @@
import nativeEvents from 'jsx-native-events'
import React from 'react';
import '@omim/core/icon-button'
import '@omim/core/button'
import '@omim/core/checkbox'
import '@omim/core/radio'
import '@omim/core/pagination'
import 'omim/icon-button'
import 'omim/button'
import 'omim/checkbox'
import 'omim/radio'
import 'omim/pagination'
class MyComponent extends React.Component {
onClick = (evt) => {
import('@omim/core/loading').then(() => {
import('omim/loading').then(() => {
this.showLoading = true
this.forceUpdate()
})
@ -28,7 +28,7 @@ class MyComponent extends React.Component {
return (
<div>
<m-button onClick={this.onClick}>Click me to dynamic Import @omim/core/loading</m-button>
<m-button onClick={this.onClick}>Click me to dynamic Import omim/loading</m-button>
<div>
<m-loading size="25"></m-loading>
<m-loading size="35"></m-loading>
@ -72,4 +72,4 @@ class MyComponent extends React.Component {
}
}
export default MyComponent
export default MyComponent

View File

@ -4,7 +4,7 @@
"description": "",
"main": "",
"dependencies": {
"@omim/core": "^0.8.1"
"omim": "latest"
},
"devDependencies": {},
"scripts": {