How to use the omi.tag function in omi

import { tag, WeElement } from 'omi'
import style from './_index.css'
import '../../omi-element-ui/el-radio'
import '../../omi-element-ui/el-radio-group'

@tag('my-app')
class MyApp extends WeElement {
  css() {
    return style
  }

  onChange = e => {
    console.log('radio checked', e.detail.value)
  }

  render(props, data) {
    return (
      <div>
        <div>
          备选项
          备选项
          备选项</div></div>

import { tag, WeElement, h, extractClass } from 'omi'
import * as css from './index.scss'
import '../text-field'
//@ts-ignore
import '../theme.ts'

interface Props {
	type: 'date' | 'time' | 'color' | 'datetime-local',
	label: string
}

@tag('m-picker')
export default class Picker extends WeElement{
	static css = css

	static defaultProps = {

	}

	static propTypes = {
		type: String,
		label: String
	}

	render(props) {

		return (

import { tag, WeElement } from 'omi'
import '../style/global/index.css'
import style from '../style/_progress.scss'

@tag('el-progress', true)
class ElProgress extends WeElement {
  css() {
    return style
  }

  install() {
    this.data.percentage = this.props.percentage
    this.data.color = this.props.color
    this.data.success = this.props.success
    this.data.error = this.props.error
  }

  render(props, data) {
    if (props.type === 'circle') {
      return this.renderCircel(props, data)
    }

})
  }
}

@tag('m-line')
class Line extends ChartBase {
  installed() {
    this.chart = new Chart(this.canvas.getContext('2d'), {
      type: 'line',
      data: this.props.data,
      options: this.props.options
    })
  }
}

@tag('m-radar')
class Radar extends ChartBase {
  installed() {
    this.chart = new Chart(this.canvas.getContext('2d'), {
      type: 'radar',
      data: this.props.data,
      options: this.props.options
    })
  }
}

@tag('m-scatter')
class Scatter extends ChartBase {
  installed() {
    this.chart = new Chart.Scatter(this.canvas.getContext('2d'), {
      data: this.props.data,
      options: this.props.options

import { WeElement, tag, getHost } from 'omi'
import style from '../style/_card.scss'

@tag('el-card', true)
class ElCard extends WeElement {
  css() {
    let pCss = getHost(this).css

    return style + '  ' + pCss()
  }

  install() {
    if (!this.data.header) {
      let dom = Array.prototype.slice.call(this.children)
      dom.map(item => {
        if (item.getAttribute('slot') === 'header') {
          this.data.header = item
          return
        }
      })

this.chart.update()
  }

  _refCanvas = (e) => { this.canvas = e }

  render(props) {
    return (
      <div style="{{">
        <canvas>
        </canvas>
      </div>
    )
  }
}

@tag('m-bar')
class Bar extends ChartBase {
  chart: Chart
  canvas: HTMLCanvasElement
  installed() {
    this.chart = new Chart(this.canvas.getContext('2d'), {
      //@ts-ignore
      type: this.props.horizontal ? 'horizontalBar' : 'bar',
      data: this.props.data,
      options: this.props.options
    })
  }
}

@tag('m-line')
class Line extends ChartBase {
  installed() {

import { tag, WeElement } from 'omi'

@tag('el-button-group', true)
class ElButtonGroup extends WeElement {
  render() {
    return (
      <div class="el-button-group">
        
      </div>
    )
  }
}

options: this.props.options
    })
  }
}

@tag('m-polar-area')
class PolarArea extends ChartBase {
  installed() {
    this.chart = new Chart.PolarArea(this.canvas.getContext('2d'), {
      data: this.props.data,
      options: this.props.options
    })
  }
}

@tag('m-bubble')
class Bubble extends ChartBase {
  installed() {
    //@ts-ignore
    const exp = this.props.options.elements.point.radius
    //@ts-ignore
    this.props.options.elements.point.radius = (context) => {
      var $v = context.dataset.data[context.dataIndex].v
      var $w = context.chart.width;
      return (new Function('$v', '$w', 'return ' + exp))($v, $w)
    }
    this.chart = new Chart(this.canvas.getContext('2d'), {
      type: 'bubble',
      data: this.props.data,
      options: this.props.options
    })
  }

import { MDCDialog } from '@material/dialog'

import '../button'

//@ts-ignore
import '../theme.ts'

interface Props {
  show?: boolean,
  scrollable?: boolean,
  title?: string,
  cancelButton?: object,
  confirmButton?: object
}

@tag('m-dialog')
class Dialog extends WeElement{
  static css = css
  static confirm: any
  static alert: any
  static prompt: any

  static propTypes = {
    show: Boolean,
    scrollable: Boolean,
    title: String,
    cancelButton: Object,
    confirmButton: Object
  }

  dialog: MDCDialog

import { tag, WeElement, h, extractClass, classNames } from 'omi'
import * as css from './index.scss'

//@ts-ignore
import '../theme.ts'

interface Props {
  size?: number,
  color?: string
}

@tag('m-loading')
export default class Loading extends WeElement{
  static css = css

  static defaultProps = {
    size: 40
  }

  static propTypes = {
    size: Number,
    color: String
  }

  render(props) {
    return (
      <div style="{`width:" role="progressbar" class="m-root m-colorPrimary m-indeterminate">
        <svg viewBox="22 22 44 44" class="m-svg"></svg></div>