概述
  • 简介(Introduction)
基础
  • 布局(Layout)
  • 图标(Icon)
输入类
  • 按钮(Button)
  • 隐藏框(Hidden)
  • 密码框(Password)
  • 文本框(Text)
  • 文本域(TextArea)
  • 数值框(Number)
  • 日期框(Date)
  • 日期范围(DateRange)
  • 选择框(Select)
  • 复选框(CheckBox)
  • 复选列表(CheckList)
  • 单选列表(RadioList)
  • 挑选框(Picker)
  • 输入框(Input)
  • 上传(Upload)
  • 验证码(Captcha)
  • 搜索框(SearchBox)
  • 富文本(RichText)
导航类
  • 菜单(Menu)
  • 面包屑(Breadcrumb)
  • 工具条(Toolbar)
  • 分页(Pager)
  • 步骤(Steps)
  • 标签栏(Tabs)
  • 树(Tree)
展示类
  • 徽章(Badge)
  • 标签(Tag)
  • 对话框(Dialog)
  • 卡片(Card)
  • 空状态(Empty)
  • 下拉框(Dropdown)
  • 分组框(GroupBox)
  • 图片框(ImageBox)
  • 时间轴(Timeline)
  • 走马灯(Carousel)
  • 快速预览(QuickView)
  • 图表(Chart)
  • 条形码(Barcode)
  • 二维码(QRCode)
  • PDF预览(PdfView)
  • 打印(Print)
反馈类
  • 加载(Loading)
  • 横幅通知(Banner)
  • 通知(Notify)
  • 提示(Toast)
  • 进度条(Progress)
综合类
  • 表单(Form)
  • 数据列表(DataList)
  • 数据表格(DataGrid)
  • 编辑表格(EditGrid)

复选框 (CheckBox)

复选框及开关组件，用于切换两种状态。

概述

  • 支持开关类型

代码演示

1.默认示例

namespace WebSite.Docus.Inputs.CheckBoxs;

class CheckBox1 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Field<CheckBox>("CheckBox1").Set(f => f.Text, "默认").Build();
        builder.Field<CheckBox>("CheckBox2").Value("True").Set(f => f.Text, "启用").Build();
        builder.Field<CheckBox>("CheckBox3").Enabled(false).Set(f => f.Text, "禁用").Build();
    }
}

2.开关示例

namespace WebSite.Docus.Inputs.CheckBoxs;

class CheckBox2 : BaseComponent
{
    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        //默认
        builder.Field<CheckBox>("CheckBox1")
               .Set(f => f.Text, "启用")
               .Set(f => f.Switch, true)
               .Build();
        //开启状态
        builder.Field<CheckBox>("CheckBox2").Value("True")
               .Set(f => f.Text, "启用")
               .Set(f => f.Switch, true)
               .Build();
        //禁用状态
        builder.Field<CheckBox>("CheckBox3").Enabled(false)
               .Set(f => f.Text, "禁用")
               .Set(f => f.Switch, true)
               .Build();
    }
}

3.事件示例

namespace WebSite.Docus.Inputs.CheckBoxs;

class CheckBox3 : BaseComponent
{
    private string? message;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        //ValueChanged事件
        builder.Field<CheckBox>("CheckBox1").ValueChanged(OnValueChanged)
               .Set(f => f.Text, "ValueChanged事件")
               .Build();
        builder.Field<CheckBox>("CheckBox2").ValueChanged(OnValueChanged)
               .Set(f => f.Text, "ValueChanged事件")
               .Set(f => f.Switch, true)
               .Build();
        builder.Div("tips", message);
    }

    private void OnValueChanged(string value)
    {
        message = value;
        StateChanged();
    }
}

4.控制示例

namespace WebSite.Docus.Inputs.CheckBoxs;

class CheckBox4 : BaseComponent
{
    private CheckBox? checkBox;

    protected override void BuildRenderTree(RenderTreeBuilder builder)
    {
        builder.Component<FieldControl>()
               .Set(c => c.OnVisibleChanged, OnVisibleChanged)
               .Set(c => c.OnEnabledChanged, OnEnabledChanged)
               .Set(c => c.OnReadOnlyChanged, OnReadOnlyChanged)
               .Set(c => c.SetValue, SetValue)
               .Set(c => c.GetValue, GetValue)
               .Build();

        builder.Field<CheckBox>("CheckBox")
               .Set(f => f.Text, "启用")
               .Build(value => checkBox = value);
    }

    private void OnVisibleChanged(bool value) => checkBox?.SetVisible(value);
    private void OnEnabledChanged(bool value) => checkBox?.SetEnabled(value);
    private void OnReadOnlyChanged(bool value) => checkBox?.SetReadOnly(value);
    private void SetValue() => checkBox?.SetValue("True");
    private string? GetValue() => checkBox?.Value;
}