feat(ScrollArea): add new Scroll Area component #5245
Conversation
|
|
|
|
||
| #component | ||
| :scroll-area-horizontal-example | ||
|
|
||
| #code | ||
| ```vue | ||
| <script setup lang="ts"> | ||
| const images = ref( | ||
| Array.from({ length: 20 }, (_, i) => ({ | ||
| id: i + 1, | ||
| url: `https://picsum.photos/300/200?random=${i}`, | ||
| title: `Image ${i + 1}` | ||
| })) | ||
| ) | ||
| </script> | ||
|
|
||
| <template> | ||
| <UScrollArea | ||
| :items="images" | ||
| orientation="horizontal" | ||
| class="w-full border border-default rounded-lg p-4" | ||
| > | ||
| <template #default="{ item }"> | ||
| <div class="inline-block me-4"> | ||
| <img | ||
| :src="item.url" | ||
| :alt="item.title" | ||
| class="w-[300px] h-[200px] rounded-lg object-cover" | ||
| > | ||
| <p class="mt-2 text-sm text-center">{{ item.title }}</p> | ||
| </div> | ||
| </template> | ||
| </UScrollArea> | ||
| </template> |
There was a problem hiding this comment.
You don't need this it should be automatic 😊
| * Enable virtualization for large lists. | ||
| * @defaultValue false | ||
| */ | ||
| virtualize?: boolean | { |
There was a problem hiding this comment.
You can use the type from @tanstack/vue-virtual: https://github.com/nuxt/ui/blob/v4/src/runtime/components/Table.vue#L100
| lanes: 1 | ||
| })) | ||
| const virtualizer = useVirtualizer({ |
There was a problem hiding this comment.
Might be simpler to spread the options here like: https://github.com/nuxt/ui/blob/v4/src/runtime/components/Table.vue#L409-L415
| </script> | ||
|
|
||
| <template> | ||
| <Primitive |
There was a problem hiding this comment.
We need a way to not have this root slot when using in a component that already has one: https://github.com/nuxt/ui/blob/v4/src/runtime/components/Table.vue#L639
| </template> | ||
|
|
||
| <template v-else-if="items?.length"> | ||
| <slot |
There was a problem hiding this comment.
Not sure defining a default slot multiple times works here 🤔
|
Ah sorry @benjamincanac - didnt mean for you to spend time reviewing yet, I was just excited about the demo 😅 |
|
Yeah don't worry I just took a quick look at it 😊 The demo is really cool! |
|
I'd love to see skeleton support for something like this! I was implementing a scrollable component that Loving the demo by the way! 💪🏻 |
A lot of the rendering time is taken up by the height calculation, if you have a consistent row height - using the correct estimate size improves the scrolling empty state a lot. I dont see support for a loading/skeleton state in tanstack virtual. There is a check for is scrolling, I will try to expose this and you could could show some kind of skeleton, otherwise if you're dynamically calling data on render, you would need to implement a loading state inside your row. @alliecatowo If you find any helpful references please link them, I would love to solve this also. |
commit: |
3 participants
🔗 Linked issue
Resolves #5201
❓ Type of change
📚 Description
An implementation of a flexible, multi-column, vertical/horizontal scroll-area component using Tanstack virtual.
📝 Checklist