Skip to content

Commit

Permalink
docs: better wording infinite-scroller.md (#19573)
Browse files Browse the repository at this point in the history
  • Loading branch information
albasyir committed Apr 22, 2024
1 parent a1b47bb commit 5428cca
Showing 1 changed file with 15 additions and 15 deletions.
30 changes: 15 additions & 15 deletions packages/docs/src/pages/en/components/infinite-scroller.md
Expand Up @@ -34,15 +34,15 @@ When scrolling towards the bottom, new items will be rendered either automatical

A **load** event will be emitted when the component needs to load more content. The argument passed is an object with two properties.

- `side` tells you at which side new content should be added, either at the `'start'` or `'end'`. The return value of the function is a string which describes if the new content was loaded successfully or not.
- `side` tells you on which side new content should be added, either at the `'start'` or `'end'`. The return value of the function is a string that describes if the new content was loaded successfully or not.
- `done` is a callback function that should be called when the loading of new content is done. It takes a single parameter `status` that describes if the load was successful or not. See the table below for the possible values.

|Status|Description|
|------|-----------|
|`'ok'`|Content was added succesfully|
|`'error'`|Something went wrong when adding content. This will display the `error` slot|
|`'empty'`|There is no more content to fetch. This will display the `empty` slot|
|`'loading'`|Content is currently loading. This will display a message that content is loading. This status is only set internally by the component and should not be used with the **done** function|
|`'loading'`|Content is currently loading. This will display a message that the content is loading. This status is only set internally by the component and should not be used with the **done** function|

<PromotedEntry />

Expand All @@ -67,29 +67,29 @@ The `v-infinite-scroll` works with any content in its default slot.

## Guide

The `v-infinite-scroll` component is a container that allows you to react to a user reaching the end of content area. It is useful when you need to display an unknown but large number of items, and you don't want to load them all at once.
The `v-infinite-scroll` component is a container that allows you to react to a user reaching the end of the content area. It is useful when you need to display an unknown but large number of items, and you don't want to load them all at once.

### Props

The `v-infinite-scroll` component has a number of props that can be used to customize its behaviour.
The `v-infinite-scroll` component has several props that can be used to customize its behavior.

#### Mode

The default behaviour of the component is to try to load more content automatically when the scrollbar gets close to the end. However a manual mode is also supported, where the user needs to do some interaction to load the content. By default this a button, but it can be customized with a [slot](#load-more)
The default behavior of the component is to try to load more content automatically when the scrollbar gets close to the end. However, a manual mode is also supported, where the user needs to do some interaction to load the content. By default this is a button, but it can be customized with a [slot](#load-more)

<ExamplesExample file="v-infinite-scroll/prop-mode" />

#### Direction

The `v-infinite-scroll` component can be used with either vertical and horizontal scrolling.
The `v-infinite-scroll` component can be used with either vertical or horizontal scrolling.

<ExamplesExample file="v-infinite-scroll/prop-direction" />

#### Side

By default the `v-infinite-scroll` component assumes that new content will be appearing at the end of existing content. But it also supports content being added to the start, and content appearing both at the start and the end.
By default, the `v-infinite-scroll` component assumes that new content will appear at the end of existing content. But it also supports content being added to the start and appearing both at the beginning and the end.

When using the **start** side for content, the scrolllbar will start at the bottom of the content.
When using the **start** side for content, the scrollbar will start at the bottom of the content.

<ExamplesExample file="v-infinite-scroll/prop-side-start" />

Expand All @@ -105,17 +105,17 @@ The default load more button and loading spinner can be colored with the **color

### Slots

The `v-infinite-scroll` component exposes a number of slots that allow you to further customize its behaviour.
The `v-infinite-scroll` component exposes several slots that allow you to further customize its behaviour.

![Infinite scroll Slots](https://cdn.vuetifyjs.com/docs/images/components/v-infinite-scroll/v-infinite-scroll-slots.png)

| Element / Area | Description |
| - | - |
| 1. Container | The default slot |
| 2. Load-more | The slot shown when mode is set to `manual` and status is not `loading` |
| 3. Loading | The slot shown when mode is set to `manual` and status is `loading` |
| 4. Empty | The slot shown when status is `empty` |
| 5. Error | The slot shown when status is `error` |
| 2. Load-more | The slot shown when the mode is set to `manual` and the status is not `loading` |
| 3. Loading | The slot is shown when the mode is set to `manual` and status is `loading` |
| 4. Empty | The slot shown when the status is `empty` |
| 5. Error | The slot is shown when the status is `error` |

#### Loading

Expand Down Expand Up @@ -143,10 +143,10 @@ The **error** slot is shown if the status `'error'` is returned from the `done`

### Examples

The following are a collection of examples that demonstrate more advanced and real world use of the `v-infinite-scroll` component.
The following is a collection of examples that demonstrate more advanced and real-world use of the `v-infinite-scroll` component.

#### Virtualized infinite scroller

If the items in your infinite list are of a uniform size, you can quite easily virtualize the list to only render a small amount of items regardless of how far you scroll in either direction.
If the items in your infinite list are of a uniform size, you can quite easily virtualize the list to only render a small number of items regardless of how far you scroll in either direction.

<ExamplesExample file="v-infinite-scroll/misc-virtual" />

0 comments on commit 5428cca

Please sign in to comment.