feat: use slot fallback content

so user could change navigation button icons
This commit is contained in:
sadeghbarati 2024-01-08 10:00:12 +03:30
parent 734079a1bc
commit 13c47ce50b
4 changed files with 12 additions and 4 deletions

View File

@ -23,6 +23,8 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
variant="outline" variant="outline"
@click="scrollNext" @click="scrollNext"
> >
<ChevronRight class="h-4 w-4 text-white stroke-white" /> <slot>
<ChevronRight class="h-4 w-4 text-current" />
</slot>
</Button> </Button>
</template> </template>

View File

@ -23,6 +23,8 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
variant="outline" variant="outline"
@click="scrollPrev" @click="scrollPrev"
> >
<ChevronLeft class="h-4 w-4 text-white" /> <slot>
<ChevronLeft class="h-4 w-4 text-current" />
</slot>
</Button> </Button>
</template> </template>

View File

@ -23,6 +23,8 @@ const { orientation, canScrollNext, scrollNext } = useCarousel()
variant="outline" variant="outline"
@click="scrollNext" @click="scrollNext"
> >
<ChevronRightIcon class="h-4 w-4 text-white stroke-white" /> <slot>
<ChevronRightIcon class="h-4 w-4 text-current" />
</slot>
</Button> </Button>
</template> </template>

View File

@ -23,6 +23,8 @@ const { orientation, canScrollPrev, scrollPrev } = useCarousel()
variant="outline" variant="outline"
@click="scrollPrev" @click="scrollPrev"
> >
<ChevronLeftIcon class="h-4 w-4 text-white" /> <slot>
<ChevronLeftIcon class="h-4 w-4 text-current" />
</slot>
</Button> </Button>
</template> </template>