How to use the omi.classNames 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 / omim / src / icon / index.tsx View on Github external
render(props) {
    return (
      <i>
        <svg aria-hidden="true" fill="{props.color}" height="{props.scale" width="{props.scale" class="{classNames({" viewBox="{'0">
          {props.paths ? (
            props.paths.map(item =&gt; {
              const attrs = { d: item.path, fill: props.color || 'black' }
              if (item.color) attrs.fill = item.color
              return <path></path>
            })
          ) : <path d="{props.path}"></path>}
        </svg>
        {props.children &amp;&amp; (
          <div style="{`color:${props.color">
            {props.children[0]}</div></i>
github Tencent / omi / packages / omim / src / tree / index.tsx View on Github external
state = this._isChecked(node, { checked: 0, unchecked: 0 }, true)
    }
    return <ul>
      <li class="{classNames('tree-item',">
        {node.children &amp;&amp; node.children.length &gt; 0 &amp;&amp; <svg> this.toggle(node.id, !node.close, node)} viewBox="0 0 1024 1024"
          class="arrow" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"&gt;
          <path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
        </svg>}
        {this.props.checkbox &amp;&amp; <span> this._check(node, state)} class={classNames('mdc-tree-checkbox', {
          'mdc-tree-checkbox-disabled': node.disabled,
          'mdc-tree-checkbox-checked': (node.children &amp;&amp; node.children.length &gt; 0) ? state === 'checked' : node.checked,
          'mdc-tree-checkbox-indeterminate': (node.children &amp;&amp; node.children.length &gt; 0) ? state === 'indeterminate' : false
        })}&gt;<span class="mdc-tree-checkbox-inner"></span></span>}
        <span> this.onNodeClick(node)} class={classNames('mdc-tree-title', {
          'selected': node.selected
        })}&gt;{node.icon &amp;&amp; <i class="material-icons">{node.icon}</i>}<span class="text">{node.title}</span></span>

        <div style="{`height:" class="children"> {node.children &amp;&amp; node.children.length &gt; 0 &amp;&amp; node.children.map(_ =&gt; this.renderNode(_))}</div>
      </li>
    </ul>
  }
github Tencent / omi / packages / omim / src / radio / index.tsx View on Github external
render(props) {

    return (
      <div>
        <div class="{classNames('mdc-radio',">
          <input id="radio" class="mdc-radio__native-control" type="radio">
          <div class="mdc-radio__background">
            <div class="mdc-radio__outer-circle"></div>
            <div class="mdc-radio__inner-circle"></div>
          </div>
        </div>
        <label for="radio">{props.label}</label>
      </div>
    )
  }
github Tencent / omi / packages / omim / src / action-sheet / index.tsx View on Github external
return this.props.actions.map((action, idx) =&gt; {
      const { label, className, ...others } = action
      const cls = classNames({
        'm-actionsheet__cell': true,
        [className]: className
      })

      return (
        <div> this.actionClick(action)} {...others} className={cls}&gt;
          {label}
        </div>
      )
    })
  }
github Tencent / omi / packages / omim / src / nav / index.tsx View on Github external
renderNode(node, level) {
		if (node.selected) {
			this._preSelected = node.id
		}
		let next = level + 1
		return <ul>
			<li class="{classNames('tree-item',">


				<span> this.onNodeClick(node)} style={`padding-left: ${level * 24 + 10}px;`} class={classNames('mdc-tree-title', {
					'selected': node.selected
				})}&gt;{node.icon &amp;&amp; <i class="material-icons">{node.icon}</i>}<span class="text">{node.title}</span>
					{node.children &amp;&amp; node.children.length &gt; 0 &amp;&amp; <svg> this.toggle(_, node)} viewBox="0 0 1024 1024"
						class="arrow" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"&gt;
						<path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
					</svg>}
				</span>


				<div style="{`height:" class="children"> {node.children &amp;&amp; node.children.length &gt; 0 &amp;&amp; node.children.map(_ =&gt; this.renderNode(_, next))}</div>
			</li>
		</ul>
	}
github Tencent / omi / packages / omim / src / tree / index.tsx View on Github external
if (node.selected) {
      this._preSelected = node.id
    }
    let state
    if (this.props.checkbox &amp;&amp; node.children &amp;&amp; node.children.length &gt; 0) {
      state = this._isChecked(node, { checked: 0, unchecked: 0 }, true)
    }
    return <ul>
      <li class="{classNames('tree-item',">
        {node.children &amp;&amp; node.children.length &gt; 0 &amp;&amp; <svg> this.toggle(node.id, !node.close, node)} viewBox="0 0 1024 1024"
          class="arrow" data-icon="caret-down" width="1em" height="1em" fill="currentColor" aria-hidden="true" focusable="false"&gt;
          <path d="M840.4 300H183.6c-19.7 0-30.7 20.8-18.5 35l328.4 380.8c9.4 10.9 27.5 10.9 37 0L858.9 335c12.2-14.2 1.2-35-18.5-35z"></path>
        </svg>}
        {this.props.checkbox &amp;&amp; <span> this._check(node, state)} class={classNames('mdc-tree-checkbox', {
          'mdc-tree-checkbox-disabled': node.disabled,
          'mdc-tree-checkbox-checked': (node.children &amp;&amp; node.children.length &gt; 0) ? state === 'checked' : node.checked,
          'mdc-tree-checkbox-indeterminate': (node.children &amp;&amp; node.children.length &gt; 0) ? state === 'indeterminate' : false
        })}&gt;<span class="mdc-tree-checkbox-inner"></span></span>}
        <span> this.onNodeClick(node)} class={classNames('mdc-tree-title', {
          'selected': node.selected
        })}&gt;{node.icon &amp;&amp; <i class="material-icons">{node.icon}</i>}<span class="text">{node.title}</span></span>

        <div style="{`height:" class="children"> {node.children &amp;&amp; node.children.length &gt; 0 &amp;&amp; node.children.map(_ =&gt; this.renderNode(_))}</div>
      </li>
    </ul>
  }
github Tencent / omi / packages / omim / src / top-app-bar / index.tsx View on Github external
props.actionItems.map((item, index) =&gt; {
            return {typeof item.text === 'string' ? item.text : item}
          }) : (this.tagNum['ACTIONITEM'] &amp;&amp; this.tagNum['ACTIONITEM'].map((_, index) =&gt; {
            return
github Tencent / omi / packages / omim / src / top-app-bar / index.tsx View on Github external
{props.navigations ? props.navigations.map((item, index) =&gt; {
            return {typeof item.text === 'string' ? item.text : item}
          }) : (this.tagNum['NAVIGATION'] &amp;&amp; this.tagNum['NAVIGATION'].map((_, index) =&gt; {
            return
github Tencent / omi / packages / omiu / src / action-sheet / index.js View on Github external
return this.props.actions.map((action, idx) =&gt; {
      const { label, className, ...others } = action
      const cls = classNames({
        'weui-actionsheet__cell': true,
        [className]: className
      })

      return (
        <div>
          {label}
        </div>
      )
    })
  }

omi

<p align="center"><img src="https://omijs.github.io/home/assets/logo.svg" alt="omi" width="100"/></p> <h2 align="center">Omi - Web Components Framework</h2>

MIT
Latest version published 2 months ago

Package Health Score

79 / 100
Full package analysis