Popup

Positions

<script lang="ts">
  import { cubicInOut } from 'svelte/easing'
  import { fly } from 'svelte/transition'

  let show = false

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

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

<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>

<CPopup {show} {verticalAlign} {horizontalAlign}>
  {#if show}
    <div
      class="wrapper"
      in:fly={{
        easing: cubicInOut,
        x:
          horizontalAlign === 'start'
            ? -50
            : horizontalAlign === 'center'
              ? -100
              : 50,
        y:
          verticalAlign === 'start' ? -50 : verticalAlign === 'center' ? 0 : 50,
      }}
      out:fly={{
        x:
          horizontalAlign === 'start'
            ? -50
            : horizontalAlign === 'center'
              ? 100
              : 50,
        y:
          verticalAlign === 'start' ? -50 : verticalAlign === 'center' ? 0 : 50,
      }}
    >
      <div class="inner">
        <div class="font-bold">Some Title</div>
        <div
          class="close-icon"
          on:click={() => (show = false)}
          on:keypress={() => (show = false)}
          role="button"
          tabindex="0"
        />
      </div>
      <div class="desc">
        <p>Some description</p>
      </div>
      <div class="flex justify-end">
        <CButton rounded label="A Button" />
      </div>
    </div>
  {/if}
</CPopup>
<style>
  .wrapper {
    --at-apply: 'bg-white dark:bg-[#222222] p-4 rounded-2 w-80';
  }
  .inner {
    --at-apply: 'pb-4 border-b border-gray-3 dark:border-gray-7 flex justify-between items-center';
  }
  .close-icon {
    --at-apply: 'i-material-symbols-close cursor-pointer hover:text-gray'
  }
  .desc {
    --at-apply: 'text-gray-6 dark:text-gray-3';
  }
</style>
<script lang="ts">
  import { cubicInOut } from 'svelte/easing'
  import { fly } from 'svelte/transition'

  let show = false

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

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

<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>

<CPopup {show} {verticalAlign} {horizontalAlign}>
  {#if show}
    <div
      class="wrapper"
      in:fly={{
        easing: cubicInOut,
        x:
          horizontalAlign === 'start'
            ? -50
            : horizontalAlign === 'center'
              ? -100
              : 50,
        y:
          verticalAlign === 'start' ? -50 : verticalAlign === 'center' ? 0 : 50,
      }}
      out:fly={{
        x:
          horizontalAlign === 'start'
            ? -50
            : horizontalAlign === 'center'
              ? 100
              : 50,
        y:
          verticalAlign === 'start' ? -50 : verticalAlign === 'center' ? 0 : 50,
      }}
    >
      <div class="inner">
        <div class="font-bold">Some Title</div>
        <div
          class="close-icon"
          on:click={() => (show = false)}
          on:keypress={() => (show = false)}
          role="button"
          tabindex="0"
        />
      </div>
      <div class="desc">
        <p>Some description</p>
      </div>
      <div class="flex justify-end">
        <CButton rounded label="A Button" />
      </div>
    </div>
  {/if}
</CPopup>
<style>
  .wrapper {
    --at-apply: 'bg-white dark:bg-[#222222] p-4 rounded-2 w-80';
  }
  .inner {
    --at-apply: 'pb-4 border-b border-gray-3 dark:border-gray-7 flex justify-between items-center';
  }
  .close-icon {
    --at-apply: 'i-material-symbols-close cursor-pointer hover:text-gray'
  }
  .desc {
    --at-apply: 'text-gray-6 dark:text-gray-3';
  }
</style>
svelte
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
Click fold/expand code

CPopup Props

  • show
    boolean
    default: false

    Determine whether the popup is shown or not

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

    Determine the popup horizontal align direction. This prop use the align-items CSS properties.

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

    Determine the popup vertical align direction. This prop use the justify-content CSS properties

  • customClass
    string
    default:

    Some custom addtional class names

  • closeOnClickBackdrop
    boolean
    default: false

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

CPopup Events

No data

CPopup Slots

  • default

    The popup content

CPopup Exports

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