Alphabet List is a versatile and customizable Svelte component designed to enhance your application's user experience. It provides an intuitive alphabet navigation bar, allowing users to quickly filter and navigate through a list of items by their starting letter. The component includes powerful features like search functionality, pagination, and customizable styles, making it an ideal solution for large datasets and interactive lists.
If you depend on this package, please consider supporting it. Thank you.
You can install the Alphabet List component via npm:
npm install alphabet-list-svelte
To use the Alphabet List component in your Svelte project, simply import it and include it in your Svelte template:
<script>
import AlphabetList from 'alphabet-list-svelte';
let sampleItems = [
{ name: "Apple" },
{ name: "Apricot" },
{ name: "Avocado" },
{ name: "Banana" },
]
</script>
<AlphabetList {sampleItems}/>
The Alphabet List component accepts the following props:
<script>
import AlphabetList from 'alphabet-list-svelte';
let sampleItems = [
{ name: "Apple" },
{ name: "Apricot" },
{ name: "Avocado" },
{ name: "Banana" },
];
let customStyles = {
mainContainer: "padding: 2rem;",
searchBar: "border: 2px solid blue;",
};
function handleItemClick(item) {
console.log("Item clicked:", item);
}
</script>
<AlphabetList
{sampleItems}
{customStyles}
onItemClick={handleItemClick}
loading={false}
emptyStateMessage="No items found."
searchBar={true}
itemsPerPage={20}
/>
The Alphabet List component emits the following events:
Contributions are welcome! If you have any ideas, improvements, or bug fixes, please open an issue or submit a pull request on the GitHub repository.
This project is licensed under the MIT License.