增加选择器对于额外配置样式的支持。
This commit is contained in:
		| @@ -8,9 +8,15 @@ type HSegmentedControlProps = { | |||||||
|   options?: Option[]; |   options?: Option[]; | ||||||
|   value?: Option['value']; |   value?: Option['value']; | ||||||
|   onChange?: (value: Option['value']) => void; |   onChange?: (value: Option['value']) => void; | ||||||
|  |   extendClassName?: HTMLDivElement['className']; | ||||||
| }; | }; | ||||||
|  |  | ||||||
| export function HSegmentedControl({ options = [], value, onChange }: HSegmentedControlProps) { | export function HSegmentedControl({ | ||||||
|  |   options = [], | ||||||
|  |   value, | ||||||
|  |   onChange, | ||||||
|  |   extendClassName, | ||||||
|  | }: HSegmentedControlProps) { | ||||||
|   const [selected, setSelected] = useState(value ?? options[0].value ?? null); |   const [selected, setSelected] = useState(value ?? options[0].value ?? null); | ||||||
|   const [sliderPosition, setSliderPosition] = useState(0); |   const [sliderPosition, setSliderPosition] = useState(0); | ||||||
|   const [sliderWidth, setSliderWidth] = useState(0); |   const [sliderWidth, setSliderWidth] = useState(0); | ||||||
| @@ -28,7 +34,7 @@ export function HSegmentedControl({ options = [], value, onChange }: HSegmentedC | |||||||
|   }, []); |   }, []); | ||||||
|  |  | ||||||
|   return ( |   return ( | ||||||
|     <div className={styles.segmented_control}> |     <div className={cx(styles.segmented_control, extendClassName)}> | ||||||
|       <div className={styles.options}> |       <div className={styles.options}> | ||||||
|         {options.map((option, index) => ( |         {options.map((option, index) => ( | ||||||
|           <div |           <div | ||||||
|   | |||||||
| @@ -8,9 +8,15 @@ type VSegmentedControlProps = { | |||||||
|   options?: Option[]; |   options?: Option[]; | ||||||
|   value?: Option['value']; |   value?: Option['value']; | ||||||
|   onChange?: (value: Option['value']) => void; |   onChange?: (value: Option['value']) => void; | ||||||
|  |   extendClassName?: HTMLDivElement['className']; | ||||||
| }; | }; | ||||||
|  |  | ||||||
| export function VSegmentedControl({ options = [], value, onChange }: VSegmentedControlProps) { | export function VSegmentedControl({ | ||||||
|  |   options = [], | ||||||
|  |   value, | ||||||
|  |   onChange, | ||||||
|  |   extendClassName, | ||||||
|  | }: VSegmentedControlProps) { | ||||||
|   const [selected, setSelected] = useState(value ?? options[0].value ?? null); |   const [selected, setSelected] = useState(value ?? options[0].value ?? null); | ||||||
|   const [sliderPosition, setSliderPosition] = useState(0); |   const [sliderPosition, setSliderPosition] = useState(0); | ||||||
|   const [sliderHeight, setSliderHeight] = useState(0); |   const [sliderHeight, setSliderHeight] = useState(0); | ||||||
| @@ -28,7 +34,7 @@ export function VSegmentedControl({ options = [], value, onChange }: VSegmentedC | |||||||
|   }, []); |   }, []); | ||||||
|  |  | ||||||
|   return ( |   return ( | ||||||
|     <div className={styles.segmented_control}> |     <div className={cx(styles.segmented_control, extendClassName)}> | ||||||
|       <div className={styles.options}> |       <div className={styles.options}> | ||||||
|         {options.map((option, index) => ( |         {options.map((option, index) => ( | ||||||
|           <div |           <div | ||||||
|   | |||||||
		Reference in New Issue
	
	Block a user