《Use Headless style to transform antd》

[1uokun]

《使用Headless风格改造antd》讨论帖

[1uokun]

以 Slider 为例

业务场景	antd设计语言	headless风格
基础	<Slider />	<Slider.Root> <Slider.Track> <Slider.Range /> </Slider.Tack> <Slider.Thumb /> </Slider.Root>
双滑块按钮	<Slider range/>	<Slider.Root> <Slider.Track> <Slider.Range /> </Slider.Tack> + <Slider.Thumb index={0}/> + <Slider.Thumb index={1}/> </Slider.Root>
轨道样式修改	<Slider styles={{track:{...}}}/>	<Slider.Root> + <Slider.Track style={{...}} className={{...}}> - <Slider.Track> <Slider.Range /> </Slider.Tack> <Slider.Thumb /> </Slider.Root>
轨道内添加元素	不支持❌	<Slider.Root> <Slider.Track> <Slider.Range /> + <View> + ... + </View> </Slider.Tack> <Slider.Thumb /> </Slider.Root>

[gamebody]

Headless的问题是比较难用，自定义ui或更精细化的控制需要了解实现细节，作为ant的底层库是比较好的。

[ventupx]

https://gluestack.io/ui/docs/components/all-components
这种形式，包括把每个组件彻底独立出来，这样可自定义的范围就变得很高。主题定制也可以直接通过tailwind实现。确实实现了高度自定义。