Collapsible

Home Collapsible

The Collapsible component is used to hide and reveal content with a toggle. It’s useful for progressively disclosing information without navigating away from the current page.


<?php

use Lib\PPIcons\ChevronsUpDown;
use Lib\PHPXUI\Button;
use Lib\PHPXUI\{Collapsible, CollapsibleContent, CollapsibleTrigger};

?>

<Collapsible open="{openCollapsible}" onOpenChange="{setOpenCollapsible}" 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>
    <CollapsibleTrigger asChild="true">
      <Button variant="ghost" size="icon" class="size-8">
        <ChevronsUpDown />
        <span class="sr-only">Toggle</span>
      </Button>
    </CollapsibleTrigger>
  </div>

  <div class="rounded-md border px-4 py-2 font-mono text-sm">
    @radix-ui/primitives
  </div>

  <CollapsibleContent class="flex flex-col gap-2">
    <div class="rounded-md border px-4 py-2 font-mono text-sm">
      @radix-ui/colors
    </div>
    <div class="rounded-md border px-4 py-2 font-mono text-sm">
      @stitches/react
    </div>
  </CollapsibleContent>
</Collapsible>

<script>
  const [openCollapsible, setOpenCollapsible] = pp.state(false);
</script>

Installation

npm

npx phpxui add Collapsible

Usage

use Lib\PHPXUI\ {
  Collapsible,
  CollapsibleContent,
  CollapsibleTrigger,
}


<Collapsible>
  <CollapsibleTrigger>Can I use this in my project?</CollapsibleTrigger>
  <CollapsibleContent>
    Yes. Free to use for personal and commercial projects. No attribution
    required.
  </CollapsibleContent>
</Collapsible>

Collapsible const [copyName, setCopyName] = pp.state(false); const copyChildren = () => { navigator.clipboard.writeText('npx phpxui add Collapsible'.trim()); setCopyName(true); setTimeout(() => { setCopyName(false); }, 2000); };

@peduarte starred 3 repositories

Installation

Usage