omim
TypeScript icon, indicating that this package has built-in type declarations

0.2.3 • Public • Published

Omim

Cross frameworks and themes components by Omi.

Features

  • Render by Custom Elements of Web Components
  • Any framework can use the components, such as Omi, React, Preact, 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 'false'

Cross Frameworks

Usage

Via script

<script src="https://unpkg.com/omi"></script>
<script src="https://unpkg.com/omim@latest/button/index.js"></script>

<m-button>I am button</m-button>

Via npm

npm install omim

Then:

import 'omim/button'

Then use the element in Omi, React, Vue or Angular:

<m-button>I am button</m-button>

It can also be used in pure 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

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.

define('my-element', class extends WeElement {
  static defaultProps = {
    show: true
  }

 static propTypes = {
    show: Boolean
  }

  render(props) {
    ...
    ...
  }
})

Use:

<my-element show="false"></my-element>

or

<my-element show="0"></my-element>

Usage in Vue

<script>
import 'omim/icon-button'

export default {
  name: 'HelloWorld',
  data: function() {
    return {
      result: false
    }
  },
  methods: {
    myEvent: function(evt) {
      this.result = evt.detail.isOn
    }
  }
}
</script>

<template>
  <div class="component">
    <p>The switch is {{result? 'on' : 'off'}}</p>
    <m-icon-button color="red" icons="['favorite', 'favorite_border']" @change="myEvent"></m-icon-button>
  </div>
</template>

Usage in Preact

import { useState } from 'preact'
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']" onChange={e => setSwitch(e.detail.isOn)}>
        </m-icon-button>
      </div>
    )
}

Usage in React

/** @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.

Note that in order to display icon in react or vue app, you need to put this in HTML:

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

Contribution

CMD

Build component:

npm run build -- component-name

Build all components:

npm run build-all

Build demo:

npm start demo-name

Publish:

npm publish --access public

To prevent duplication of development, PR submission fills in owner to lock the component.

为了防止重复开发,先 PR 提交填下 owner 锁定该组件。

Components Owner State
button member done
icon member done
text-field member done
card wscats done
chip hulei done
dialog zainchen done
elevation liulinboyi done
image-list member done
checkbox member done
radio lihengjun done
select member done
slider member done
switch zainchen done
layout-grid member done
linear-progress member done
list zainchen done
menu member done
snackbar member done
tab FAKER-A done
tag mtonhuang done
top-app-bar zainchen done
typography member done
drawer zainchen done
badge member done
fab member done
icon-button member done
toolbar hulei done
avatar member done
tree member done
table member done
nav member done
action-sheet member done
row member done
chart bar member done
chart line member done
chart scatter member done
chart pie member done
chart doughnut member done
chart radar member done
chart polar area member done
chart bubble member done
chart bar line member done
pagination member done
color-picker member done
loading member done
path-progress member done
popover member done
rate member done
step member done
toast member done
paper zainchen done
transfer list member done
editor member done
input (lable,button)
input-number
input-table
bottom nav member done
expansion member done
toggle buttons member done
locate member done
player 132yse done
finger member done
scroll member done
welcome to add a new element!
welcome to add a new element!
welcome to add a new element!

Todo

TypeScript Auto Complete(todo)

interface ButtonProps {
  href?: string,
  disabled?: boolean,
  type?: 'default' | 'primary' | 'danger',
  onClick?: (e: any) => void
}

const TAG = 'm-button'

declare global {
  namespace JSX {
    interface IntrinsicElements {
      [TAG]: Omi.Props & ButtonProps
    }
  }
}

@tag(TAG)
export default class Button extends WeElement<ButtonProps, {}> {
...
...
...

Omim Page Templates(todo)

Coming!

Bug?(todo)

import Button from '@import/core/button'

The above code cannot register custom elements.

import '@import/core/button'

The above code can register custom elements.

Why??

Links

Package Sidebar

Install

npm i omim

Weekly Downloads

24

Version

0.2.3

License

MIT

Unpacked Size

20.7 MB

Total Files

687

Last publish

Collaborators

  • dntzhang