Skip to main content

Checkbox

Function Checkbox 

Source
pub fn Checkbox(props: CheckboxProps) -> impl IntoView
Expand description

带勾画动画的复选框:对勾 SVG 用 stroke-dashoffset 描边绘制 + scale 弹入。

原生 <input type="checkbox"> 是替换元素,吃不到 ::after/::before, 无法做 transform 描边动画。本组件用透明 input 做命中/无障碍层,同级 SVG path 做对勾视觉层;勾选时 path 的 stroke-dashoffset 归零「画出」对勾, 同时 SVG scale 从 0.6 弹入(弹跳曲线)——双层动画带来盖戳质感。

与旧的 .ygg-checkbox(纯 background-size 缩放)相比,描边动画更像手写勾画, 且 SVG 是矢量合成层,比光栅 background-image 缩放更锐利。

Props:

  • checked:受控勾选态
  • onchange:状态变化回调,返回新的 bool
  • danger:危险态(红色语义,SQL 控制台「我了解后果」),缺省 false
  • label:没有可见文字关联时的读屏名称,如表格行的「选择《标题》」

§Required Props

§Optional Props