Update Switch component

- Add support for RTL layouts
- Add <slot name="thumb" /> to allow inject icons inside  the thumb
This commit is contained in:
Mohammed Essam Helewa 2024-10-16 19:45:35 +03:00 committed by GitHub
parent e63d5553e3
commit 56ea270ae2
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -31,7 +31,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
)" )"
> >
<SwitchThumb <SwitchThumb
:class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0')" :class="cn('pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform ltr:data-[state=checked]:translate-x-5 rtl:data-[state=checked]:-translate-x-5')"
/> >
<slot name="thumb" />
</SwitchThumb>
</SwitchRoot> </SwitchRoot>
</template> </template>