Ajax Bar

Ajax bar is useful when page toggling or data fetching visibility is required.

Basic usage

<script lang="ts">
  let ajaxBar: CAjaxBar

  const handleStart = () => {
    ajaxBar && ajaxBar.start()
  }

  const handleEnd = () => {
    ajaxBar && ajaxBar.end()
  }
</script>

<CButton label="Start" on:click={handleStart} />
<CButton label="End" theme="negative" on:click={handleEnd} />
<CAjaxBar bind:this={ajaxBar} />
svelte
Click fold/expand code

Themes

<script lang="ts">
  let ajaxBar: CAjaxBar

  let theme = 'primary'

  const handleStartWithTheme = (t: string) => {
    theme = t
    ajaxBar && ajaxBar.start()
  }

  const handleEnd = () => {
    ajaxBar && ajaxBar.end()
  }
</script>

<CButton
  label="Start primary"
  on:click={() => handleStartWithTheme('primary')}
/>
<CButton
  label="Start secondary"
  theme="secondary"
  on:click={() => handleStartWithTheme('secondary')}
/>
<CButton
  label="Start warning"
  theme="warning"
  on:click={() => handleStartWithTheme('warning')}
/>
<CButton
  label="Start negative"
  theme="negative"
  on:click={() => handleStartWithTheme('negative')}
/>

<CButton label="End" theme="negative" on:click={handleEnd} rounded />

<CAjaxBar bind:this={ajaxBar} {theme} />
svelte
Click fold/expand code

CAjaxBar Props

  • theme
    any
    default: undefined

    The theme of ajax bar. Determine the color.

CAjaxBar Events

No data

CAjaxBar Slots

No data

CAjaxBar Exports

  • start
    function

    Start the ajax bar

  • end
    function

    End the ajax bar

Last update at: 2024/07/08 10:39:42