How to use the omi.tag function in omi

To help you get started, we’ve selected a few omi examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github Tencent / omi / packages / omi-element-ui / src / elements / radio / index.js View on Github external
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>
          <el-radio>备选项</el-radio>
          <el-radio checked>备选项</el-radio>
          <el-radio disabled>备选项</el-radio>
github Tencent / omi / packages / omim / src / picker / index.tsx View on Github external
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<Props>{
	static css = css

	static defaultProps = {

	}

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

	render(props) {

		return (
			<m-text-field {...props} css={`input{min-width:56px;}`} />
github Tencent / omi / packages / omi-element-ui / src / omi-element-ui / el-progress / index.js View on Github external
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)
    }
github Tencent / omi / packages / omim / src / chart / index.tsx View on Github external
})
  }
}

@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
github Tencent / omi / packages / omi-element-ui / src / omi-element-ui / el-card / index.js View on Github external
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
        }
      })
github Tencent / omi / packages / omim / src / chart / index.tsx View on Github external
this.chart.update()
  }

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

  render(props) {
    return (
      <div style={{ width: props.width + 'px', height: props.height + 'px' }}>
        <canvas ref={this._refCanvas}>
        </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() {
github Tencent / omi / packages / omi-element-ui / src / omi-element-ui / el-button-group / index.js View on Github external
import { tag, WeElement } from 'omi'

@tag('el-button-group', true)
class ElButtonGroup extends WeElement {
  render() {
    return (
      <div class="el-button-group">
        <slot />
      </div>
    )
  }
}
github Tencent / omi / packages / omim / src / chart / index.tsx View on Github external
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
    })
  }
github Tencent / omi / packages / omim / src / dialog / index.tsx View on Github external
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<Props>{
  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
github Tencent / omi / packages / omim / src / loading / index.tsx View on Github external
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<Props>{
  static css = css

  static defaultProps = {
    size: 40
  }

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

  render(props) {
    return (
      <div class="m-root m-colorPrimary m-indeterminate" role="progressbar" style={`width: ${props.size}px; height: ${props.size}px;${props.color?`color:${props.color};`:''}`}>
        <svg class="m-svg" viewBox="22 22 44 44">