omim - chore
* Update readme * Update dependencies of vue demo * Update dependencies of react demo * Use omim instead of @omim
This commit is contained in:
parent
be0a7f90e6
commit
38d88636d5
|
@ -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
|
||||
|
|
|
@ -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",
|
||||
|
|
|
@ -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'
|
||||
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -4,7 +4,7 @@
|
|||
"description": "",
|
||||
"main": "",
|
||||
"dependencies": {
|
||||
"@omim/core": "^0.8.1"
|
||||
"omim": "latest"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"scripts": {
|
||||
|
|
Loading…
Reference in New Issue