ScrollList

Demos

How to import

<script lang="ts">
    import { ScrollList, ScrollItem } from '@fibrae/semi-ui-svelte';
</script>

Basic Usage

The scrolling list provides a scrolling selection mode similar to the iOS operating system, while supporting scrolling to the specified window location selection and click selection.

Bind the selected item with bind:selectedIndex, which writes the new index back on selection; the callback is onSelect. Write a column as ScrollList.Item or the named export ScrollItem, which are the same component. header and footer accept a string or a snippet and render whenever given: define one with {#snippet footer()}...{/snippet} and pass it as a prop, or write it inside the ScrollList tag.

<script lang="ts">
    import { Button, ScrollItem, ScrollList, type ScrollItemSelectData } from '@fibrae/semi-ui-svelte';

    const ampms = [{ value: '上午' }, { value: '下午' }];
    const hours = Array.from({ length: 12 }, (_, index) => ({ value: index + 1 }));
    const minutes = Array.from({ length: 60 }, (_, index) => ({ value: index, disabled: index % 3 === 0 }));

    let selectIndex1 = $state(1);
    let selectIndex2 = $state(1);
    let selectIndex3 = $state(1);

    const onSelectHour = (data: ScrollItemSelectData) => {
        console.log('You have choose the hour for: ', data.value);
    };

    const onSelectMinute = (data: ScrollItemSelectData) => {
        console.log('You have choose the minute for: ', data.value);
    };

    const handleClose = () => {
        console.log('close');
    };
</script>

<ScrollList header="无限滚动列表" style="border: unset; box-shadow: unset">
    <ScrollItem aria-label="上午或下午" bind:selectedIndex={selectIndex1} cycled={false} list={ampms} mode="wheel" type={1} />
    <ScrollItem aria-label="小时" bind:selectedIndex={selectIndex2} cycled list={hours} mode="wheel" onSelect={onSelectHour} type={2} />
    <ScrollItem aria-label="分钟" bind:selectedIndex={selectIndex3} cycled list={minutes} mode="wheel" onSelect={onSelectMinute} type={3} />
    {#snippet footer()}
        <Button size="small" type="primary" onclick={handleClose}>Ok</Button>
    {/snippet}
</ScrollList>

API Reference

ScrollList

Props

class, style (a string) and native attributes such as aria-* land on the root element.

ScrollItem

Props

Methods

aria-label, aria-labelledby and aria-describedby land on the list (role="listbox"); class, style (a string) and other attributes land on the root element.

ItemData

Methods

Call these on the ScrollItem instance obtained through bind:this; see the Methods table of ScrollItem above for the signature.

Accessibility

ARIA

• When aria-label or aria-labelledby is passed, the root element of ScrollList gets role="group"
• ScrollItem is a role="listbox" and supports aria-label, which indicates the label of the current column.
• ScrollItem uses aria-disabled to indicate whether the item is disabled
• ScrollItem uses aria-selected to indicate whether the item is selected
• The copies that fill the wheel of a cycled column carry aria-hidden="true", so screen readers only read the real options

Keyboard and Focus

• Each column is a listbox: focus it with Tab. Focus stays on the list and the selected item is exposed through aria-activedescendant; selection follows focus, and each selection fires the select callback
• ArrowUp selects the previous item and ArrowDown the next one, skipping disabled items; Home selects the first item and End the last one
• With cycled, the arrow keys wrap around at both ends in either mode; without it they stop at the ends
• Typing characters selects the item whose text starts with them; typing the same character repeatedly moves on to the next match

Design Tokens