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> {
            // 各アイテムのテンプレート
        }
    }
}