fastadmin模板自定义单选框/开关组件

status添加

<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('状态')}:</label>
        <div class="col-xs-12 col-sm-8">

            {:build_radios('row[status]', ['1'=>__('正常'), '0'=>__('禁用')])}
        </div>
</div>

status修改

<div class="form-group">
        <label class="control-label col-xs-12 col-sm-2">{:__('状态')}:</label>
        <div class="col-xs-12 col-sm-8">

            {:build_radios('row[status]', ['1'=>__('正常'), '0'=>__('禁用')], $row['status'])}
        </div>
</div>

index.js里面

{field: 'status', title:'活动状态',formatter: Table.api.formatter.status,searchList: {"1": __('正常'), "0": __('弃用')},},

开关组件

<div class="item">
            <div class="name" style="text-align: center;">
                <span>是否赠品</span>
            </div>
            <div class="value" style="width:80px;text-align: center;">
               <input  id="c-zp_status" name="row[zp_status]" type="hidden" value="1">
                <a href="javascript:;" data-toggle="switcher" class="btn-switcher" data-input-id="c-zp_status" data-yes="2" data-no="1" >
                    <i class="fa fa-toggle-on text-success fa-flip-horizontal text-gray fa-2x"></i>
                </a>
            </div>
</div>

  • 3
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
自定义单选框组件的基本思路如下: 1. 创建一个容器组件,容器内包含一个文本标签和一个圆形选择器。 2. 通过 props 将选项文本传递给容器组件,并在容器组件内渲染出来。 3. 在容器组件内使用 state 来保存单选框的选中状态,并在选中状态改变时触发回调函数通知父组件。 4. 在圆形选择器被点击时,更新单选框的选中状态,并调用回调函数通知父组件。 以下是一个简单的单选框组件实现示例: ``` import React, { Component } from 'react'; class RadioButton extends Component { state = { checked: false, }; handleClick = () => { const { checked } = this.state; const { onCheck, value } = this.props; if (!checked) { this.setState({ checked: true }); onCheck(value); } }; render() { const { checked } = this.state; const { label } = this.props; return ( <div onClick={this.handleClick}> <div style={{ width: '24px', height: '24px', borderRadius: '50%', border: 'solid 1px #ccc', backgroundColor: checked ? '#007bff' : '#fff', display: 'inline-block', marginRight: '8px', }} /> <span>{label}</span> </div> ); } } class RadioButtonGroup extends Component { state = { value: '', }; handleCheck = value => { this.setState({ value }); this.props.onChange(value); }; render() { const { options } = this.props; const { value } = this.state; return ( <div> {options.map(option => ( <RadioButton key={option.value} label={option.label} value={option.value} onCheck={this.handleCheck} checked={option.value === value} /> ))} </div> ); } } export default RadioButtonGroup; ``` 使用示例: ``` <RadioButtonGroup options={[ { label: 'Option 1', value: 'option1' }, { label: 'Option 2', value: 'option2' }, { label: 'Option 3', value: 'option3' }, ]} onChange={value => console.log(value)} /> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值