# SliderWithToggle

`SliderWithToggle` 将一个 **Slider**（左侧，自适应宽度）和一个 **VariantSwitch**（右侧，可选）组合在同一行中。

> 文件：`src/hyperOS/IotComponents/slider/SliderWithToggle.tsx`

## 导入

```ts
import { SliderWithToggle } from '@hyperOS/IotComponents/slider';
```

## 基础用法

```tsx
import React, { useState } from 'react';
import SliderWithToggle from '@hyperOS/IotComponents/slider/SliderWithToggle';

export default function Demo() {
  const [value, setValue] = useState(30);
  const [enabled, setEnabled] = useState(true);

  return (
    <SliderWithToggle
      sliderProps={{
        min: 0,
        max: 100,
        value,
        step: 1,
        active: enabled,
        onChange: setValue,
      }}
      buttonProps={{
        checked: enabled,
        onChange: setEnabled,
        colorType: 'blue',
      }}
    />
  );
}
```

## Props

### SliderWithToggleProps

| 属性 | 类型 | 必填 | 默认值 | 说明 |
| --- | --- | --- | --- | --- |
| sliderProps | `SliderProps` | 是 | - | 传给 `Slider` 的 props（`SliderWithToggle` 内部直接透传）。 |
| buttonProps | `VariantSwitchProps` | 否 | - | 传给 `VariantSwitch` 的 props。不传则只渲染左侧 Slider。 |
| style | `ViewStyle` | 否 | - | 外层容器样式。 |
| spacing | `number` | 否 | `8` | Slider 与右侧按钮之间的间距（仅在传入 `buttonProps` 时生效）。 |

### SliderProps（摘要）

`SliderProps` 定义在 `src/hyperOS/IotComponents/slider/Slider.tsx`。

常用字段：

- `min?: number`（默认 0）
- `max?: number`（默认 100）
- `value?: number`（默认 0）
- `step?: number`（默认 1）
- `disabled?: boolean`
- `active?: boolean`
- `onChange?: (value: number) => void`
- `onAfterChange?: (value: number) => void`

### VariantSwitchProps（摘要）

`VariantSwitchProps` 定义在 `src/hyperOS/IotComponents/slider/VariantSwitch.tsx`。

常用字段：

- `checked?: boolean`（默认 false）
- `disabled?: boolean`（默认 false）
- `onChange: (val: boolean) => void`（必填）
- `onPress?: () => void`
- `colorType?: ColorType`
- `icon?: React.ReactElement<SvgProps>`

## 行为说明 / 注意事项

1. `buttonProps` 未传入时：仅渲染 Slider，且 Slider 右侧不会预留间距。
2. `buttonProps` 传入时：右侧渲染 `VariantSwitch`。
3. 按钮禁用逻辑：组件内部会强制传入
   
   ```ts
   disabled={buttonProps.disabled || sliderProps.active === false}
   ```
   
   即：**当 Slider 的 `active === false` 时，右侧按钮也会被禁用**。
4. 样式：组件外层默认 `paddingHorizontal: 16`、`paddingVertical: 14`，如需对齐列表/卡片布局，可通过 `style` 覆盖。