xt/color-q
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

增加选择器对于额外配置样式的支持。

Browse Source
This commit is contained in:
徐涛 2025-01-24 09:00:23 +08:00
parent 26ebc3c7e3
commit dc411987bf
2 changed files with 16 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/components/HSegmentedControl.tsx
View File

@ -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

10
src/components/VSegmentedControl.tsx
View File

@ -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