stdf/docs/mds/components/indexBar/api_en.md

IndexBar Props

Name	Type	Default	Required	Description
data	IndexBarItemProps<T>[]	[]	Y	Array of index data.
current	number	0	N	Currently active index value.
top	number	0	N	Distance from index content area to document top.
height	number	100	Y	Height of index content area.
radius	'none'\|'xs'\|'sm'\|'md'\|'lg'\|'xl'\|'2xl'\|'full'	'md'	N	Border radius style.
scrollAlign	boolean	true	N	Whether to enable scroll auto-alignment.
titleInjClass	string	''	N	Inject CSS for index group title.
textInjClass	string	''	N	Inject CSS for index item text.

IndexBar Snippets

Name	Type	Parameters	Description
children	Snippet	(child: T, childIndex, group, groupIndex)	Custom child item content, renders as string if not provided.

IndexBar Events

Name	Type	Parameters	Description
onclickChild	(index: number, group: IndexBarItemProps<T>, childIndex: number, child: T) => void	index - Parent group index of clicked item group - Parent group content of clicked item childIndex - Index of clicked item child - Content of clicked item	Triggered when clicking an index item.

IndexBarItemProps

Name	Type	Default	Required	Description
index	string	''	Y	Index value.
title	string	''	Y	Title.
child	T[]	[]	Y	Array of child items, T defaults to string.
height	number	0	N	Height of child items (auto-bound).

Generics

IndexBar supports generic type T, which defaults to string. When you need to pass complex data structures, you can specify the generic type:

type ContactItem = {
  name: string;
  phone: string;
};

const contactList: IndexBarItemProps<ContactItem>[] = [
  {
    index: 'A',
    title: 'A',
    child: [
      { name: 'Alice', phone: '138****1234' },
      { name: 'Andy', phone: '139****5678' }
    ]
  }
];

Use with children Snippet for custom rendering:

<IndexBar data={contactList} height={400}>
  {#snippet children(item)}
    <div class="flex items-center gap-3">
      <div class="h-10 w-10 rounded-full bg-primary/20">{item.name[0]}</div>
      <div>
        <div>{item.name}</div>
        <div class="text-xs">{item.phone}</div>
      </div>
    </div>
  {/snippet}
</IndexBar>