Expansion

Basic usage

<CExpansion title="Expansion title">
  <h3>Some body content</h3>
</CExpansion>

Custom arrow

<CExpansion title="Expansion title">
  <p>Look at the arrow, is a smile!</p>
  <div slot="arrow" class="i-ant-design-smile-outlined text-6" />
</CExpansion>

Manual control

<script lang="ts">
  let expanded = false
</script>

<CButton
  rounded
  mb-4
  label="Click Me"
  on:click={() => (expanded = !expanded)}
/>
<CExpansion title="Click button above toggle expand status" bind:expanded>
  <p>Some content</p>
</CExpansion>

Reverse direction

<CExpansion reverse title="Expansion title">
  <p>Hello, I'm expanded from top!</p>
</CExpansion>

CExpansion Props

• title

  string

  default:

  The title of the expansion

• expanded

  boolean

  default: false

  Determine whether the expansion is expanded or not. It is recomended to use bind:expanded

• reverse

  boolean

  default: false

  Determine the expand direction, false means down, true means up

• headerStyle

  string

  default:

  Custom header style

• showArrow

  boolean

  default: true

  Determine whether to show the expanded status arrow on the right.

CExpansion Events

• toggled

  Dispatch when the toggle transition end

• ready

  Emit when the initial height compute is done

CExpansion Slots

• default

  Expansion body content

  Bindings:

  • recomputedHeight () => void

    The method to recomputed the body height.

• icon

  The content before title

• title

  Customize the title content

• arrow

  Customize the arrow dom

CExpansion Exports