Kappa / Expandable Text

REVIEW NOTE

Mesh convergence

14:32

Run 184 reached the target residual after 1,240 iterations. The pressure field is stable, but the rear-wheel wake still changes between the final sampling windows. The drag coefficient varies by 1.8 percent after the residual plateau, and the separation point moves between the final three samples. Keep this result as the baseline, add one refinement level around the rear wheel and diffuser, then repeat the comparison with a longer averaging window.

<script setup>
import { ExpandableText } from "@dicehub/kappa/components/expandable-text";
</script>

<template>
  <ExpandableText :lines="3">
    <p>
      Run 184 reached the target residual after 1,240 iterations. The pressure
      field is stable, but the rear-wheel wake still changes between the final
      sampling windows. The drag coefficient varies by 1.8 percent after the
      residual plateau, and the separation point moves between the final three
      samples. Keep this result as the baseline, add one refinement level around
      the rear wheel and diffuser, then repeat the comparison with a longer
      averaging window.
    </p>
  </ExpandableText>
</template>

Installation

Expandable Text is part of the main Kappa package. Use the barrel import for application code or the component entry point for a granular import.

Barrel

import { ExpandableText } from "@dicehub/kappa";

Granular

import { ExpandableText } from "@dicehub/kappa/components/expandable-text";

Usage

Put one block of prose in the default slot and set the collapsed line count withlines. The trigger appears only when the rendered text exceeds that limit. Use Collapsible instead when the hidden content contains controls or several sections.

Composition

Typical part hierarchy

ExpandableText <ArkCollapsible.Root>
├── content <ArkCollapsible.Content>
│   └── prose body <div>
└── overflow trigger <ArkCollapsible.Trigger>
    ├── label
    └── indicator <svg>

Ark UI Collapsible owns the disclosure state, button relationship, keyboard activation, and hidden-control handling. Kappa measures the prose, sets the partial collapsed height, and removes the trigger when all content already fits.

Examples

Line Count

Set the number of visible lines to match the available space.

Two lines

The imported surface contains 48 patches and 2.6 million triangles. All edges are manifold, every face has a valid normal, and the bounding box matches the expected vehicle dimensions. Three small gaps remain near the rear diffuser and must be repaired before volume meshing starts.

Four lines

The imported surface contains 48 patches and 2.6 million triangles. All edges are manifold, every face has a valid normal, and the bounding box matches the expected vehicle dimensions. Three small gaps remain near the rear diffuser and must be repaired before volume meshing starts.

<script setup>
import { ExpandableText } from "@dicehub/kappa/components/expandable-text";

const summary = "The imported surface contains 48 patches and 2.6 million triangles. All edges are manifold, and three small gaps must be repaired before meshing starts.";
</script>

<template>
  <ExpandableText :lines="2">
    <p>{{ summary }}</p>
  </ExpandableText>

  <ExpandableText :lines="4">
    <p>{{ summary }}</p>
  </ExpandableText>
</template>

Controlled

Use v-model:open when another control or application state owns expansion.

Collapsed

The imported surface contains 48 patches and 2.6 million triangles. All edges are manifold, every face has a valid normal, and the bounding box matches the expected vehicle dimensions. Three small gaps remain near the rear diffuser and must be repaired before volume meshing starts.

<script setup>
import { ref } from "vue";
import { ExpandableText } from "@dicehub/kappa/components/expandable-text";

const open = ref(false);
const review = "The imported surface is valid, but three small gaps must be repaired before volume meshing starts.";
</script>

<template>
  <button type="button" @click="open = !open">
    {{ open ? "Collapse externally" : "Expand externally" }}
  </button>
  <ExpandableText v-model:open="open" :lines="2">
    <p>{{ review }}</p>
  </ExpandableText>
</template>

Custom Trigger

Localize the labels with props and replace the visible trigger copy with the scoped slot.

The imported surface contains 48 patches and 2.6 million triangles. All edges are manifold, every face has a valid normal, and the bounding box matches the expected vehicle dimensions. Three small gaps remain near the rear diffuser and must be repaired before volume meshing starts.

<script setup>
import { ExpandableText } from "@dicehub/kappa/components/expandable-text";

const review = "The imported surface is valid, but three small gaps must be repaired before volume meshing starts.";
</script>

<template>
  <ExpandableText
    :lines="2"
    expand-label="Read run note"
    collapse-label="Close run note"
  >
    <p>{{ review }}</p>
    <template #trigger="{ open }">
      {{ open ? "Close run note" : "Read run note" }}
    </template>
  </ExpandableText>
</template>

Short Content

Content that fits remains fully visible and does not render an unnecessary trigger.

Mesh quality checks passed. The case is ready to run.

<script setup>
import { ExpandableText } from "@dicehub/kappa/components/expandable-text";
</script>

<template>
  <ExpandableText :lines="3">
    <p>Mesh quality checks passed. The case is ready to run.</p>
  </ExpandableText>
</template>

Accessibility

The native button exposes aria-expanded and aria-controls.
Enter and Space toggle the content while focus stays on the trigger.
Provide translated expand and collapse labels for the current interface language.
Reduced-motion mode removes the height and indicator transitions.

API Reference

ExpandableText

Prop	Type	Default	Description
`lines`	`number`	`3`	Number of visible lines while the content is collapsed.
`defaultOpen`	`boolean`	`false`	Initial expanded state when the component is uncontrolled.
`open / v-model:open`	`boolean`	`—`	Controls the expanded state.
`disabled`	`boolean`	`false`	Prevents the disclosure control from changing state.
`id`	`string`	`generated`	Stable identifier used for the Ark UI disclosure relationship.
`expandLabel`	`string`	`"Show more"`	Visible and accessible label used while collapsed.
`collapseLabel`	`string`	`"Show less"`	Visible and accessible label used while expanded.

Slots

Slot	Description
`default`	Text or simple prose content.
`trigger`	Custom trigger label. Receives open and label values.

Data Slots

Slot	Element	Description
`expandable-text`	`div`	Ark UI Collapsible root and consumer attribute target.
`expandable-text-content`	`div`	Measured and animated disclosure viewport.
`expandable-text-body`	`div`	Natural-height prose container.
`expandable-text-trigger`	`button`	Rendered only when the content exceeds the line limit.
`expandable-text-indicator`	`svg`	Chevron that follows the expanded state.

Events

Event	Payload	Description
`update:open`	`boolean`	Supports controlled Vue state.
`openChange`	`CollapsibleOpenChangeDetails`	Reports the Ark UI state change.

Exports

Export	Description
`ExpandableText`	Measured line truncation with an accessible disclosure control.
`ExpandableTextProps / ExpandableTextEmits / ExpandableTextSlots`	Public component contracts.
`ExpandableTextTriggerSlotProps`	Scoped trigger-slot values.
`EXPANDABLE_TEXT_DEFAULT_*`	Public line and label defaults.
`resolveExpandableTextLines`	Normalizes line values to a positive integer.