Progressbar

Progressbar Props

Name	Type	Default	Description
colors	object		Object with Tailwind CSS colors classes
colors.bgIos	string	'bg-primary'
colors.bgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
component	string	'span'	Component's HTML Element
progress	number	0	Determinate progress (from 0 to 1)

Examples

Vue

<template>
  <i-page>
    <i-navbar title="Progressbar" />

    <i-block-title>Determinate Progress Bar</i-block-title>
    <i-block strong inset-material outline-ios>
      <div class="my-4">
        <i-progressbar :progress="progress" />
      </div>
      <i-segmented raised>
        <i-segmented-button
          :active="progress === 0.1"
          @click="() => (progress = 0.1)"
        >
          10%
        </i-segmented-button>
        <i-segmented-button
          :active="progress === 0.3"
          @click="() => (progress = 0.3)"
        >
          30%
        </i-segmented-button>
        <i-segmented-button
          :active="progress === 0.5"
          @click="() => (progress = 0.5)"
        >
          50%
        </i-segmented-button>
        <i-segmented-button
          :active="progress === 1.0"
          @click="() => (progress = 1.0)"
        >
          100%
        </i-segmented-button>
      </i-segmented>
    </i-block>

    <i-block-title>Colors</i-block-title>
    <i-block strong inset-material outline-ios class="space-y-4">
      <i-progressbar class="k-color-brand-red" :progress="0.25" />
      <i-progressbar class="k-color-brand-green" :progress="0.5" />
      <i-progressbar class="k-color-brand-yellow" :progress="0.75" />
      <i-progressbar class="k-color-brand-purple" :progress="1" />
    </i-block>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iBlock,
    iBlockTitle,
    iProgressbar,
    iSegmented,
    iSegmentedButton,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iBlock,
      iBlockTitle,
      iProgressbar,
      iSegmented,
      iSegmentedButton,
    },
    setup() {
      const progress = ref(0.1);
      return {
        progress,
      };
    },
  };
</script>

React