Usage

Use the default slot to set the content to be displayed when the disclosure is expanded.

Default

Colors

Use the color prop to customize the component's color.

Variant

Use the variant prop to customize the component's appearance.

Subheading

Use the sub-heading prop to display additional text after the heading. The sub-heading-type prop can be used to customize the text type.

Alternatively, use the trailing slot for more flexibility, such as adding interactive elements or custom content aligned with the heading.

<script setup lang="ts">
import CLButton from '@codeandfunction/callaloo/CLButton';
import CLDisclosure from '@codeandfunction/callaloo/CLDisclosure';
import CLText from '@codeandfunction/callaloo/CLText';
import {
  CLColors,
  CLColorVariants,
  CLSizes,
  CLTextTypes
} from '@codeandfunction/callaloo';

const handleButtonClick = (event?: Event) => {
  event?.stopPropagation();
  alert('Button clicked from subheading slot!');
};
</script>

<template>
  <CLDisclosure
    heading="Introduction"
    sub-heading="Additional context or description"
    disclosure-id="trailing-slot">
    <template #trailing>
      <CLButton
        :color="CLColors.Primary"
        :size="CLSizes.Small"
        :variant="CLColorVariants.Soft"
        :on-click="handleButtonClick">
        Action
      </CLButton>
    </template>
    <CLText :type="CLTextTypes.Body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec finibus mi.
      Phasellus accumsan ligula diam, egestas convallis nulla auctor et. Cras malesuada
      sapien in lacus interdum, ut semper neque pharetra.
    </CLText>
  </CLDisclosure>
</template>

Trailing

Use the trailing slot to add supplementary actions or custom content aligned with the heading while still leveraging the sub-heading prop for secondary text.

<script setup lang="ts">
import CLButton from '@codeandfunction/callaloo/CLButton';
import CLDisclosure from '@codeandfunction/callaloo/CLDisclosure';
import CLText from '@codeandfunction/callaloo/CLText';
import {
  CLColors,
  CLColorVariants,
  CLSizes,
  CLTextTypes
} from '@codeandfunction/callaloo';

const handleButtonClick = (event?: Event) => {
  event?.stopPropagation();
  alert('Button clicked from trailing slot!');
};
</script>

<template>
  <CLDisclosure
    heading="Introduction"
    sub-heading="Additional context or description"
    disclosure-id="trailing-example">
    <template #trailing>
      <CLButton
        :color="CLColors.Primary"
        :size="CLSizes.Small"
        :variant="CLColorVariants.Soft"
        :on-click="handleButtonClick">
        Action
      </CLButton>
    </template>
    <CLText :type="CLTextTypes.Body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec finibus mi.
      Phasellus accumsan ligula diam, egestas convallis nulla auctor et. Cras malesuada
      sapien in lacus interdum, ut semper neque pharetra.
    </CLText>
  </CLDisclosure>
</template>

Icons

Use the icon-before prop to display an icon before the heading text and the icon-after prop to display an icon after the heading text. Both props use the CLIconNames enum values, and the expanded-icon prop can be used to customize the icon shown when the disclosure is expanded.

<script setup lang="ts">
import CLDisclosure from '@codeandfunction/callaloo/CLDisclosure';
import CLText from '@codeandfunction/callaloo/CLText';
import {
  CLColorVariants,
  CLIconNames,
  CLTextTypes
} from '@codeandfunction/callaloo';
</script>

<template>
  <CLDisclosure
    heading="Introduction"
    disclosure-id="icons"
    :icon-before="CLIconNames.InfoCircle"
    :icon-after="CLIconNames.ChevronDown"
    :expanded-icon="CLIconNames.ChevronUp"
    :variant="CLColorVariants.Ghost">
    <CLText :type="CLTextTypes.Body">
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nec finibus mi.
      Phasellus accumsan ligula diam, egestas convallis nulla auctor et. Cras malesuada
      sapien in lacus interdum, ut semper neque pharetra.
    </CLText>
  </CLDisclosure>
</template>

Props

Slots