@empathyco/x-components
Version:
Empathy X Components
80 lines (61 loc) • 2.46 kB
Markdown
---
title: MainScrollItem
---
# MainScrollItem
Wrapper for elements contained in the MainScroll that should store/restore its
position.
## Props
| Name | Description | Type | Default |
| ----------------- | ------------------------------------------------- | -------------------------------- | ------------------ |
| <code>item</code> | The item data. Used to set the scroll identifier. | <code>Identifiable</code> | <code></code> |
| <code>tag</code> | The tag to render. | <code>string \| Component</code> | <code>'div'</code> |
## Slots
| Name | Description | Bindings<br />(name - type - description) |
| -------------------- | ----------- | ----------------------------------------- |
| <code>default</code> | | None |
## Events
This components emits the following events:
- [`ScrollRestoreSucceeded`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts)
## See it in action
This component has no predefined template. It renders whatever you decide using the `tag` prop. It's
main purpose is to help storing and restoring the scroll position so URLs can be shared, and also to
allow users to smoothly navigate back and forth.
To do so, it must be wrapped with the `MainScroll` component. In the following example we make use
of all of these components. The URL is modified as the user scrolls.
```vue
<template>
<div>
<UrlHandler />
<SearchInput />
<MainScroll>
<Scroll>
<ResultsList #result="{ item }">
<MainScrollItem :item="item" tag="article">
<BaseResultLink :item="item">
<img :src="item.images[0]" />
<p>{{ item.title }}</p>
</BaseResultLink>
</MainScrollItem>
</ResultsList>
</Scroll>
</MainScroll>
</div>
</template>
<script>
import { MainScroll, Scroll, MainScrollItem } from '@empathyco/x-components/scroll'
import { ResultsList } from '@empathyco/x-components/search'
import { SearchInput } from '@empathyco/x-components/search-box'
import { UrlHandler } from '@empathyco/x-components/url'
export default {
name: 'ScrollItemDemo',
components: {
Scroll,
ResultsList,
MainScroll,
MainScrollItem,
SearchInput,
UrlHandler,
},
}
</script>
```