基本使用
Checkbox 是一个用于选择多项的组件。你可以通过它来让用户从一组选项中选择一个或多个选项。
示例代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- - ---- ---------------- -------- ----- - ----- --------- ----------- - ---------------------- ------ - ----- --------- ----------------- -- --------------------------------- ---------------- - ----- - ---------- ------ -- - ------ ------- ----展开代码
结果展示
这段代码将创建一个简单的复选框，用户可以通过点击复选框来改变它的状态。复选框的状态会显示在页面上。
Checkbox 组合使用
你可以使用 Checkbox 组件组合来创建一组复选框，用户可以从这些选项中进行多选。
示例代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- - ---- ---------------- -------- ----- - ----- -------- ---------- - ----------------------- ----- ------------ - ------- -------- -- - -- --------- - --------------------- -------- - ---- - ---------------------------- -- ---- --- -------- - -- ------ - ----- --------- ----------------- -- ------------------ --------------------- --------- ----------------- -- ------------------ --------------------- --------- ----------------- -- ------------------ --------------------- --------- ----------------- -- ------------------ --------------------- ------------------------- ------- ------ -- - ------ ------- ----展开代码
结果展示
这段代码将创建四个复选框，每个复选框对应一个城市。用户可以选择任意数量的城市，并且这些城市的名称会显示在页面上。
Checkbox 的禁用状态
你可以通过设置 disabled 属性来禁用复选框，这样用户就无法更改它的状态了。
示例代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- - ---- ---------------- -------- ----- - ----- --------- ----------- - --------------------- ------ - ----- --------- --------------- ----------------- -- ------------------------------------- ---------------- - ----- - ---------- ------ -- - ------ ------- ----展开代码
结果展示
这段代码将创建一个已禁用的复选框，用户不能更改它的状态，但可以查看它的状态。
Checkbox 的颜色和大小
你可以通过设置 color 和 size 属性来自定义复选框的颜色和大小。
示例代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - -------- - ---- ---------------- -------- ----- - ----- --------- ----------- - ---------------------- ------ - ----- --------- ----------- ------------ ----------------- -- ------------------------------------ ---------------- - ----- - ---------- ------ -- - ------ ------- ----展开代码
结果展示
这段代码将创建一个红色的大复选框，用户可以通过点击复选框来改变它的状态。
Checkbox 的组状态
你还可以使用 group 属性来创建一个具有特定状态的复选框组，比如全选/全不选。
示例代码
-- -------------------- ---- ------- ------ ----- ---- -------- ------ - --------- ------ - ---- ---------------- -------- ----- - ----- ------------ -------------- - ---------------------- ----- -------- ---------- - ----------------------- ----- --------------- - ------- -- - --------------------- -- ------- - ---------------- ----- ----- ------- - ---- - -------------- - -- ----- ---------------- - ------- -------- -- - -- --------- - --------------------- -------- - ---- - ---------------------------- -- ---- --- -------- - -- ------ - ----- --------- ------------ -------------------------------------------- --------- ----------------- -- ---------------------- --------------------- --------- ----------------- -- ---------------------- --------------------- --------- ----------------- -- ---------------------- --------------------- --------- ----------------- -- ---------------------- --------------------- ------- ----------- -- ------------------------------------------- ------------------------- ------- ------ -- - ------ ------- ----展开代码
结果展示
这段代码将创建一个带有全选/全不选功能的复选框组。用户可以选择任意数量的城市，并且可以通过点击“切换全选状态”按钮来改变全选状态。
