Sefirot

Appearance

SIndicator ​

<SIndicator> is used to display status or progress of an item or a task.

@globalbrain/sefirot/lib/components/SIndicator.vue

Usage ​

Import <SIndicator> component and define its state.

vue
<script setup lang="ts">
import SIndicator from '@globalbrain/sefirot/lib/components/SIndicator.vue'
</script>

<template>
  <SIndicator state="running" />
</template>

Props ​

ts
interface Props {
  size?: Size
  state: State
  mode?: Mode
}

type Size =
  | 'nano'
  | 'mini'
  | 'small'
  | 'medium'
  | 'large'
  | 'jumbo'

type State =
  | 'pending'
  | 'ready'
  | 'queued'
  | 'running'
  | 'completed'
  | 'failed'

type Mode =
  | 'colored'
  | 'monochrome'

:size ​

The size of the indicator. The default is medium.

ts
interface Props {
  size?: Size
}

type State =
  | 'pending'
  | 'ready'
  | 'queued'
  | 'running'
  | 'completed'
  | 'failed'
template
<SIndicator state="completed" />

:state ​

The state of the indicator.

ts
interface Props {
  mode?: 
}

type Size =
  | 'mini'
  | 'small'
  | 'medium'
  | 'large'
  | 'jumbo'
template
<SIndicator state="completed" />

:mode ​

Whether the indicator should have colors or be monochrome. The default is colored.

ts
interface Props {
  mode?: Mode
}

type Mode =
  | 'colored'
  | 'monochrome'
template
<SIndicator mode="monochrome" state="running" />