omim v0.2.3

Omim

Cross frameworks and themes components by Omi.

• DOCS & REPL

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

• Using Omim in Omi & Source Code
• Using Omim in React & Source Code
• Using Omim in Vue & Source Code

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 锁定该组件。

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

• material.io docs
• material.io demo
• material-theme-builder
• material-components-web
• material-icons