Dropdown

Basic usage

<CDropdown>
  <CButton label="Here's some trigger content" />
  <div slot="drop-content" class="p-4">Here's some drop content</div>
</CDropdown>

Content width

<CDropdown widthWithinParent={false}>
  <CButton label="Here's some trigger content" />
  <div slot="drop-content" class="custom-width p-4">
    Here's some custom width drop content
  </div>
</CDropdown>

<style>
  .custom-width {
    width: 320px;
  }
</style>

Manual control

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

<CButton label="Click to show dropdown" on:click={() => (show = !show)} />

<CDropdown manual bind:show>
  <div>Click the left button to show dropdown</div>
  <div slot="drop-content" class="p-4">Here's some drop content</div>
</CDropdown>

CDropdown Props

• show

  boolean

  default: false

  The dropdown shown status. It is recommended to use bind:show.

• disabled

  boolean

  default: false

  Determine whether the dropdown is disabled or not.

• widthWithinParent

  boolean

  default: true

  Does the dropdown content maintain the same width with parent.

• manual

  boolean

  default: false

  If set to true. The dropdown shown status can only be controlled by show prop or the toggleManually method.

CDropdown Events

CDropdown Slots

• default

  The trigger content

  Bindings:

  • toggleManually *

    The function to manually toggle shown status

• drop-content

  The dropdown content

CDropdown Exports

• toggleManually

  function

  Manually toggle the shows status of dropdown