Collapsible

An interactive section that shows or hides its connected information.

@peduarte starred 3 repositories

@qwik-ui/headless

import { component$ } from '@builder.io/qwik';
import { cn } from '@qwik-ui/utils';
import { LuChevronsUpDown } from '@qwikest/icons/lucide';
import { buttonVariants, Collapsible } from '~/components/ui';

export default component$(() => {
  return (
    <Collapsible.Root class="flex w-[350px] flex-col gap-2">
      <div class="flex items-center justify-between gap-4 px-4">
        <h4 class="text-sm font-semibold">@peduarte starred 3 repositories</h4>
        <Collapsible.Trigger
          class={cn(buttonVariants({ size: 'icon', look: 'ghost' }), 'size-8')}
        >
          <LuChevronsUpDown />
        </Collapsible.Trigger>
      </div>
      <div class="rounded-md border px-4 py-2 font-mono text-sm">@qwik-ui/headless</div>
      <Collapsible.Content>
        <div class="flex flex-col gap-2">
          <div class="rounded-md border px-4 py-2 font-mono text-sm">
            @qwik-ui/kit-styled
          </div>
          <div class="rounded-md border px-4 py-2 font-mono text-sm">
            @qwik-ui/kit-headless
          </div>
        </div>
      </Collapsible.Content>
    </Collapsible.Root>
  );
});

Installation

1. Run the following cli command or copy/paste the component code into your project

qwik-ui add collapsible

import { component$, Slot, type PropsOf } from '@builder.io/qwik';
import { Collapsible as HeadlessCollapsible } from '@qwik-ui/headless';
import { cn } from '@qwik-ui/utils';

const Root = (props: PropsOf<typeof HeadlessCollapsible.Root>) => (
  <HeadlessCollapsible.Root {...props}>{props.children}</HeadlessCollapsible.Root>
);

const Trigger = component$<PropsOf<typeof HeadlessCollapsible.Trigger>>(
  ({ ...props }) => {
    return (
      <HeadlessCollapsible.Trigger {...props}>
        <Slot />
      </HeadlessCollapsible.Trigger>
    );
  },
);

const Content = component$<PropsOf<typeof HeadlessCollapsible.Content>>((props) => {
  return (
    <HeadlessCollapsible.Content {...props} class={cn(props.class)}>
      <Slot />
    </HeadlessCollapsible.Content>
  );
});

export const Collapsible = {
  Root,
  Trigger,
  Content,
};

Usage

The styled Collapsible component doesn't isn't really styled because it's meant to be a wrapper around some items in a list or menu.

import { Collapsible } from '~/components/ui';

<Collapsible.Root>
  <Collapsible.Trigger>Is it accessible?</Collapsible.Trigger>
  <Collapsible.Content>Yes. It adheres to the WAI-ARIA design pattern.</Collapsible.Content>
</Collapsible.Root>