live_design! {
    // 标准按钮
    <Button> { text: "点击我" }

    // 带图标的按钮
    <Button> {
        draw_icon: {
            svg_file: dep("crate://self/resources/icon.svg")
            color: #fff
        }
        text: "带图标"
    }

    // 渐变按钮
    <ButtonGradientX> { text: "渐变 X" }
    <ButtonGradientY> { text: "渐变 Y" }

    // 仅图标按钮
    <ButtonIcon> {
        draw_icon: {
            svg_file: dep("crate://self/resources/icon.svg")
        }
    }
}

live_design! {
    // 标准文本输入
    <TextInput> { empty_text: "输入文本..." }

    // 密码输入
    <TextInput> {
        empty_text: "密码"
        password: true
    }

    // 多行输入
    <TextInput> {
        empty_text: "输入描述"
        height: Fill
    }
}

live_design! {
    // 标准滑块
    <Slider> { min: 0, max: 100, value: 50 }

    // 圆形滑块
    <SliderRound> { min: 0, max: 1.0, value: 0.5 }

    // 最小化滑块
    <SliderMinimal> { min: 0, max: 100, value: 25 }
}

live_design! {
    // 复选框
    <CheckBox> { text: "启用功能" }

    // 切换开关
    <CheckBoxToggle> { text: "深色模式" }

    // 单选按钮组
    <View> {
        flow: Down, spacing: 10
        <RadioButton> { radio_id: 1, text: "选项 1" }
        <RadioButton> { radio_id: 2, text: "选项 2" }
        <RadioButton> { radio_id: 3, text: "选项 3" }
    }
}

live_design! {
    <PortalList> {
        drag_scrolling: true
        item_template: <ItemView> {
            // 每个项目的模板
        }
    }
}