Dialog

Basic usage

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

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

<CDialog bind:show title="Hi, there!">some content</CDialog>
<script lang="ts">
  let show = false
</script>

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

<CDialog bind:show title="Hi, there!">some content</CDialog>
svelte
Click fold/expand code

Height & width

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

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

<CDialog bind:show title="Hi, there!" width="60vw" bodyHeight="60vh">
  Some content
</CDialog>
<script lang="ts">
  let show = false
</script>

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

<CDialog bind:show title="Hi, there!" width="60vw" bodyHeight="60vh">
  Some content
</CDialog>
svelte
Click fold/expand code

Without close icon

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

<CButton
  label="Click to show dialog (Press Esc to close)"
  on:click={() => (show = true)}
/>

<CDialog bind:show title="Hi, there!" closeIcon={false}>some content</CDialog>
<script lang="ts">
  let show = false
</script>

<CButton
  label="Click to show dialog (Press Esc to close)"
  on:click={() => (show = true)}
/>

<CDialog bind:show title="Hi, there!" closeIcon={false}>some content</CDialog>
svelte
Click fold/expand code

Positions

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

  let verticalAlign: any = 'start'
  let horizontalAlign: any = 'start'

  function openWithPosition(h: any, v: any) {
    horizontalAlign = h
    verticalAlign = v
    show = true
  }
</script>

<CDialog
  bind:show
  title="Hi, there!"
  {verticalAlign}
  {horizontalAlign}
  bodyHeight="40vh"
>
  some content
</CDialog>

<div class="grid grid-cols-3 gap-4">
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('start', 'start')}
  >
    <div class="i-ph-arrow-circle-up-left" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('center', 'start')}
  >
    <div class="i-ph-arrow-circle-up" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('end', 'start')}
  >
    <div class="i-ph-arrow-circle-up-right" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('start', 'center')}
  >
    <div class="i-ph-arrow-circle-left" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('center', 'center')}
  >
    <div class="i-cil-center-focus" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('end', 'center')}
  >
    <div class="i-ph-arrow-circle-right" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('start', 'end')}
  >
    <div class="i-ph-arrow-circle-down-left" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('center', 'end')}
  >
    <div class="i-ph-arrow-circle-down" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('end', 'end')}
  >
    <div class="i-ph-arrow-circle-down-right" />
  </CButton>
</div>
<script lang="ts">
  let show = false

  let verticalAlign: any = 'start'
  let horizontalAlign: any = 'start'

  function openWithPosition(h: any, v: any) {
    horizontalAlign = h
    verticalAlign = v
    show = true
  }
</script>

<CDialog
  bind:show
  title="Hi, there!"
  {verticalAlign}
  {horizontalAlign}
  bodyHeight="40vh"
>
  some content
</CDialog>

<div class="grid grid-cols-3 gap-4">
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('start', 'start')}
  >
    <div class="i-ph-arrow-circle-up-left" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('center', 'start')}
  >
    <div class="i-ph-arrow-circle-up" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('end', 'start')}
  >
    <div class="i-ph-arrow-circle-up-right" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('start', 'center')}
  >
    <div class="i-ph-arrow-circle-left" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('center', 'center')}
  >
    <div class="i-cil-center-focus" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('end', 'center')}
  >
    <div class="i-ph-arrow-circle-right" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('start', 'end')}
  >
    <div class="i-ph-arrow-circle-down-left" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('center', 'end')}
  >
    <div class="i-ph-arrow-circle-down" />
  </CButton>
  <CButton
    icon
    style="font-size: 28px;"
    on:click={() => openWithPosition('end', 'end')}
  >
    <div class="i-ph-arrow-circle-down-right" />
  </CButton>
</div>
svelte
Click fold/expand code

Footer actions

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

  function onCancel() {
    show = false
  }
</script>

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

<CDialog
  bind:show
  title="Hi, there!"
  showCancelBtn
  showConfirmBtn
  on:cancel={onCancel}
>
  some content
</CDialog>
<script lang="ts">
  let show = false

  function onCancel() {
    show = false
  }
</script>

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

<CDialog
  bind:show
  title="Hi, there!"
  showCancelBtn
  showConfirmBtn
  on:cancel={onCancel}
>
  some content
</CDialog>
svelte
Click fold/expand code

Customize contents with slots

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

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

<CDialog bind:show>
  <div class="c-text-primary flex items-center" slot="title">
    <div class="i-line-md-emoji-smile-wink text-8 mr-2" />
    <div>Hi, there</div>
  </div>

  <div class="i-mdi-progress-close hover:i-line-md-close" slot="close-icon" />

  <div>Body content</div>

  <div slot="actions">
    <button on:click={() => (show = false)}> Custom action button </button>
  </div>
</CDialog>
<script lang="ts">
  let show = false
</script>

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

<CDialog bind:show>
  <div class="c-text-primary flex items-center" slot="title">
    <div class="i-line-md-emoji-smile-wink text-8 mr-2" />
    <div>Hi, there</div>
  </div>

  <div class="i-mdi-progress-close hover:i-line-md-close" slot="close-icon" />

  <div>Body content</div>

  <div slot="actions">
    <button on:click={() => (show = false)}> Custom action button </button>
  </div>
</CDialog>
svelte
Click fold/expand code

CDialog Props

  • show
    boolean
    default: false

    Determine the dialog is shown or not. It's recommended to use bind:show

  • title
    string
    default:

    The title of the dialog

  • width
    string
    default: 40vw

    The width of the whole dialog. Can be any logical HTML unit. For example: '200px' '20vw'

  • bodyHeight
    string
    default: auto

    The body height of the dialog, which doesn't contain the header and the footer that action buttons in.

  • bodyPadding
    boolean
    default: true

    Determine the body has a padding or not

  • rounded
    boolean
    default: true

    Determine the dialog has a rounded border or not

  • closeIcon
    boolean
    default: true

    Determine the close icon is shown or not

  • horizontalAlign
    'start' | 'center' | 'end' | undefined
    default: undefined

    The horizontal align position.

    TIP

    CDialog is implemented based on CPopup

    So, this prop and verticalAlign prop below is the same with CPopup

  • verticalAlign
    'start' | 'center' | 'end' | undefined
    default: undefined

    See above

  • customClass
    string
    default:

    Customize class names

  • customStyle
    string
    default:

    Customize styles

  • customBodyStyle
    string
    default:

    Customize body styles

  • showCancelBtn
    boolean
    default: false

    Determine the whether cancel button is shown or not

  • cancelBtnLabel
    string
    default: Cancel

    The cancel button label

  • showConfirmBtn
    boolean
    default: false

    Determine the whether confirm button is shown or not

  • confirmBtnLabel
    string
    default: Confirm

    The confirm button label

  • exchangeAnimationDirection
    boolean
    default: false

    Exchange the animation order.

    The origin animation order is horizontal first then the vertical

    If set to true, the dialog animation will excute vertical first then the horizontal

  • closeOnEsc
    boolean
    default: true

    Close the dialog when the Esc key pressed

  • closeOnClickBackdrop
    boolean
    default: false

    If set to true. The popup would be hidden when click the backdrop.

    This prop is the same as CPopup

CDialog Events

  • closed

    Emit when close transition is done

  • opened

    Emit when the open transition is done

  • cancel

    Emit when the default cancel button clicked

  • confirm

    Emit when the default confirm button clicked

CDialog Slots

  • header

    Customize the header content This slot can override the title prop and the default close icon

  • title

    Customize the title content. This slot can override the title prop

  • close-icon

    Customize the close icon

  • default

    The default content of dialog

  • footer

    Customize footer content of dialog This slot would override the confirm and cancel button

  • actions

    Customize the footer actions

CDialog Exports

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