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.
Tencent / omi / packages / omim / src / icon / index.tsx View on Github 
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 => {
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 && (
<div style="{`color:${props.color">
{props.children[0]}</div></i>state = this._isChecked(node, { checked: 0, unchecked: 0 }, true)
}
return <ul>
<li class="{classNames('tree-item',">
{node.children && node.children.length > 0 && <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">
<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 && <span> this._check(node, state)} class={classNames('mdc-tree-checkbox', {
'mdc-tree-checkbox-disabled': node.disabled,
'mdc-tree-checkbox-checked': (node.children && node.children.length > 0) ? state === 'checked' : node.checked,
'mdc-tree-checkbox-indeterminate': (node.children && node.children.length > 0) ? state === 'indeterminate' : false
})}><span class="mdc-tree-checkbox-inner"></span></span>}
<span> this.onNodeClick(node)} class={classNames('mdc-tree-title', {
'selected': node.selected
})}>{node.icon && <i class="material-icons">{node.icon}</i>}<span class="text">{node.title}</span></span>
<div style="{`height:" class="children"> {node.children && node.children.length > 0 && node.children.map(_ => this.renderNode(_))}</div>
</li>
</ul>
}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>
)
}
return this.props.actions.map((action, idx) => {
const { label, className, ...others } = action
const cls = classNames({
'm-actionsheet__cell': true,
[className]: className
})
return (
<div> this.actionClick(action)} {...others} className={cls}>
{label}
</div>
)
})
}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
})}>{node.icon && <i class="material-icons">{node.icon}</i>}<span class="text">{node.title}</span>
{node.children && node.children.length > 0 && <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">
<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 && node.children.length > 0 && node.children.map(_ => this.renderNode(_, next))}</div>
</li>
</ul>
}if (node.selected) {
this._preSelected = node.id
}
let state
if (this.props.checkbox && node.children && node.children.length > 0) {
state = this._isChecked(node, { checked: 0, unchecked: 0 }, true)
}
return <ul>
<li class="{classNames('tree-item',">
{node.children && node.children.length > 0 && <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">
<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 && <span> this._check(node, state)} class={classNames('mdc-tree-checkbox', {
'mdc-tree-checkbox-disabled': node.disabled,
'mdc-tree-checkbox-checked': (node.children && node.children.length > 0) ? state === 'checked' : node.checked,
'mdc-tree-checkbox-indeterminate': (node.children && node.children.length > 0) ? state === 'indeterminate' : false
})}><span class="mdc-tree-checkbox-inner"></span></span>}
<span> this.onNodeClick(node)} class={classNames('mdc-tree-title', {
'selected': node.selected
})}>{node.icon && <i class="material-icons">{node.icon}</i>}<span class="text">{node.title}</span></span>
<div style="{`height:" class="children"> {node.children && node.children.length > 0 && node.children.map(_ => this.renderNode(_))}</div>
</li>
</ul>
}props.actionItems.map((item, index) => {
return {typeof item.text === 'string' ? item.text : item}
}) : (this.tagNum['ACTIONITEM'] && this.tagNum['ACTIONITEM'].map((_, index) => {
return{props.navigations ? props.navigations.map((item, index) => {
return {typeof item.text === 'string' ? item.text : item}
}) : (this.tagNum['NAVIGATION'] && this.tagNum['NAVIGATION'].map((_, index) => {
returnreturn this.props.actions.map((action, idx) => {
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>
