Expansion

Basic usage

Expansion title 
<CExpansion title="Expansion title">
  <h3>Some body content</h3>
</CExpansion>
<CExpansion title="Expansion title">
  <h3>Some body content</h3>
</CExpansion>
svelte
Click fold/expand code

Custom arrow

Expansion title 
<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>
<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>
svelte
Click fold/expand code

Manual control

Click button above toggle expand status 
<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>
<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>
svelte
Click fold/expand code

Reverse direction

Expansion title 
<CExpansion reverse title="Expansion title">
  <p>Hello, I'm expanded from top!</p>
</CExpansion>
<CExpansion reverse title="Expansion title">
  <p>Hello, I'm expanded from top!</p>
</CExpansion>
svelte
Click fold/expand code

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

    Bindings:

  • arrow

    Customize the arrow dom

CExpansion Exports

No data
Suggest changes to this page
Last update at: 2023/08/13 13:04:55