Dropdown

Basic usage

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

Content width

Here's some custom width drop content
<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>
<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>
svelte
Click fold/expand code

Manual control

Click the left button to show dropdown
Here's some drop content
<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>
<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>
svelte
Click fold/expand code

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. Hover parent would not trigger dropdwon show.

CDropdown Events

No data

CDropdown Slots

  • default

    The trigger content

    Bindings:

    • toggleManually *

      The function to manually toggle shown status

  • drop-content

    The dropdown content

CDropdown Exports

  • toggleManually
    function
Suggest changes to this page
Last update at: 2023/08/13 13:04:55