Collapsible

An interactive component which expands/collapses a panel.

@peduarte starred 3 repositories

@radix-ui/primitives

Usage

It's mandatory to wrap the whole component with the Tailwind tag.

const { Tailwind } = VM.require("uiisnear.near/widget/tailwind");
const { Collapsible, CollapsibleTrigger, CollapsibleContent } = VM.require(
  "uiisnear.near/widget/collapsible"
);
 
if (Tailwind == undefined) return "";

<Tailwind>
  <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>
</Tailwind>

API Reference

Collapsible

Contains all the parts of a collapsible.

Prop	Type	Default
defaultOpen	boolean	---
open	boolean	---
onOpenChange	function	---
disabled	boolean	---

Data attribute	Values
[data-state]	"open" \| "closed"
[data-disabled]	Present when disabled

CollapsibleTrigger

The button that toggles the collapsible.

Data attribute	Values
[data-state]	"open" \| "closed"
[data-disabled]	Present when disabled

CollapsibleContent

The component that contains the collapsible content.

Prop	Type	Default
forceMount	boolean	---

Data attribute	Values
[data-state]	"open" \| "closed"
[data-disabled]	Present when disabled

Checkbox Context Menu