Accordion - Skeleton

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.

import React, { useState } from 'react';
import { Accordion } from '@skeletonlabs/skeleton-react';
import { Club, Diamond, Heart, Spade } from 'lucide-react';

export const Page: React.FC<any> = () => {
	const lorem =
		'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Sit esse nisi eligendi fuga! Quas nisi repellat adipisci animi repellendus incidunt laborum sunt qui nesciunt, ducimus saepe sapiente sed ut labore.';

	// Value may optionally implement a useState hook for programmatic use cases.
	const [value, setValue] = useState(['club']);

	return (
		<Accordion value={value} onValueChange={setValue}>
			<Accordion.Item id="club">
				<Accordion.Control lead={<Club size={24} />}>Club</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
			<hr className="hr" />
			<Accordion.Item id="diamond">
				<Accordion.Control lead={<Diamond size={24} />}>Diamond</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
			<hr className="hr" />
			<Accordion.Item id="heart">
				<Accordion.Control lead={<Heart size={24} />} disabled>
					Heart (disabled)
				</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
			<hr className="hr" />
			<Accordion.Item id="spade">
				<Accordion.Control lead={<Spade size={24} />}>Spade</Accordion.Control>
				<Accordion.Panel>{lorem}</Accordion.Panel>
			</Accordion.Item>
		</Accordion>
	);
};

Open State

Each Item id added to the Accordion value array will be open by default.

useState Hook

const [value, setValue] = useState(['club']);

<Accordion value={value} onValueChange={setValue}>...</Accordion>

Harcoded

<Accordion value={['club']}>...</Accordion>

Multiple Items

Use multiple to enable multiple items to be opened at once.

<Accordion multiple>...</Accordion>

Custom Icons

import { Plus, Minus, Heart } from 'lucide-react';

<Accordion iconOpen={<Plus size={24} />} iconClosed={<Minus size={24} />}>...</Accordion>

<Accordion.Control lead={<Heart size={24} />}>Heart</Accordion.Control>