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

import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Block,
  BlockTitle,
  Progressbar,
  Segmented,
  SegmentedButton,
} from 'ina-ui/react';

export default function ProgressbarPage() {
  const [progress, setProgress] = useState(0.1);
  return (
    <Page>
      <Navbar
        title="Progressbar"
        />

      <BlockTitle>Determinate Progress Bar</BlockTitle>
      <Block strong insetMaterial outlineIos>
        <div className="my-4">
          <Progressbar progress={progress} />
        </div>
        <Segmented raised>
          <SegmentedButton
            active={progress === 0.1}
            onClick={() => setProgress(0.1)}
          >
            10%
          </SegmentedButton>
          <SegmentedButton
            active={progress === 0.3}
            onClick={() => setProgress(0.3)}
          >
            30%
          </SegmentedButton>
          <SegmentedButton
            active={progress === 0.5}
            onClick={() => setProgress(0.5)}
          >
            50%
          </SegmentedButton>
          <SegmentedButton
            active={progress === 1.0}
            onClick={() => setProgress(1.0)}
          >
            100%
          </SegmentedButton>
        </Segmented>
      </Block>

      <BlockTitle>Colors</BlockTitle>
      <Block strong insetMaterial outlineIos className="space-y-4">
        <Progressbar className="k-color-brand-red" progress={0.25} />
        <Progressbar className="k-color-brand-green" progress={0.5} />
        <Progressbar className="k-color-brand-yellow" progress={0.75} />
        <Progressbar className="k-color-brand-purple" progress={1} />
      </Block>
    </Page>
  );
}