Stepper Svelte Component

Stepper Components
Stepper Props
Examples

Stepper Components

There are following components included:

Stepper

Stepper Props

Name	Type	Default	Description
buttonsOnly	boolean	false	Disables inner value container between stepper buttons
colors	object		Object with Tailwind CSS colors classes
colors.activeBgIos	string	'active:bg-primary'
colors.activeBgMaterial	string	''
colors.fillActiveBgIos	string	'active:bg-ios-primary-shade'
colors.fillActiveBgMaterial	string	''
colors.fillBgIos	string	'bg-primary'
colors.fillBgMaterial	string	'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIos	string	'text-white'
colors.fillTextMaterial	string	'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipple	string	'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIos	string	'border-primary'
colors.outlineBorderMaterial	string	'border-md-light-outline dark:border-md-dark-outline'
colors.textIos	string	'text-primary'
colors.textMaterial	string	'text-md-light-primary dark:text-md-dark-primary'
colors.touchRipple	string	'touch-ripple-primary'
component	string	'div'	Component's HTML Element
input	boolean	false	Defines should it render element or not
inputDisabled	boolean	false	Defines whether the stepper input is disabled or not
inputPlaceholder	string		Input placeholder
inputReadOnly	boolean	false	Defines whether the stepper input is read only or not
inputType	string	'text'	Input type
large	boolean	undefined	Makes stepper large. Overwrites `largeIos` and `largeMaterial`
largeIos	boolean	false	Makes stepper large in iOS theme
largeMaterial	boolean	false	Makes stepper large in Material theme
outline	boolean	undefined	Makes stepper outline. Overwrites `outlineIos` and `outlineMaterial`
outlineIos	boolean	false	Makes stepper outline in iOS theme
outlineMaterial	boolean	false	Makes stepper outline in Material theme
raised	boolean	undefined	Makes stepper raised (with shadow). Overwrites `raisedIos` and `raisedMaterial`
raisedIos	boolean	false	Makes stepper raised (with shadow) in iOS theme
raisedMaterial	boolean	false	Makes stepper raised (with shadow) in Material theme
rounded	boolean	undefined	Makes stepper round. Overwrites `roundedIos` and `roundedMaterial`
roundedIos	boolean	false	Makes stepper round in iOS theme
roundedMaterial	boolean	false	Makes stepper round in Material theme
small	boolean	undefined	Makes stepper small. Overwrites `smallIos` and `smallMaterial`
smallIos	boolean	false	Makes stepper small in iOS theme
smallMaterial	boolean	false	Makes stepper small in Material theme
touchRipple	boolean	true	Enables touch ripple effect in Material theme
value	number	0	Stepper value
onBlur	function(e)		Stepper input `blur` handler
onChange	function(e)		Stepper input `change` handler
onFocus	function(e)		Stepper input `focus` handler
onInput	function(e)		Stepper input `input` handler
onMinus	function(e)		Stepper "minus" button click handler
onPlus	function(e)		Stepper "plus" button click handler

Examples

Stepper.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Stepper,
    Block,
    BlockTitle,
    List,
    ListItem,
  } from 'konsta/svelte';

  let value = 1;
  const increase = () => {
    value = value + 1;
  };
  const decrease = () => {
    value = value - 1 < 0 ? 0 : value - 1;
  };

  let inputValue = 1;
  const increaseInput = () => {
    const v = parseInt(inputValue, 10);
    if (isNaN(v)) inputValue = 0;
    else inputValue = v + 1;
  };
  const decreaseInput = () => {
    const v = parseInt(inputValue, 10);
    if (isNaN(v)) inputValue = 0;
    inputValue = v - 1 < 0 ? 0 : v - 1;
  };
  const onInputChange = (e) => {
    inputValue = e.target.value;
  };
  const onInputBlur = () => {
    if (isNaN(parseInt(inputValue, 10))) inputValue = 0;
  };
</script>

<Page>
  <Navbar title="Stepper" />

  <BlockTitle>Shape and size</BlockTitle>
  <Block strongIos outlineIos class="text-center space-y-4">
    <div class="grid grid-cols-2 gap-4">
      <div>
        <div class="block text-xs mb-1">Default</div>
        <Stepper {value} onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Round</div>
        <Stepper {value} rounded onPlus={increase} onMinus={decrease} />
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Outline</div>
        <Stepper {value} outline onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Rounded Outline</div>
        <Stepper {value} outline rounded onPlus={increase} onMinus={decrease} />
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Small</div>
        <Stepper {value} onPlus={increase} onMinus={decrease} small />
      </div>
      <div>
        <div class="block text-xs mb-1">Small Round</div>
        <Stepper {value} small rounded onPlus={increase} onMinus={decrease} />
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Small Outline</div>
        <Stepper {value} small outline onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Small Rounded Outline</div>
        <Stepper
          {value}
          small
          rounded
          outline
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Large</div>
        <Stepper {value} onPlus={increase} onMinus={decrease} large />
      </div>
      <div>
        <div class="block text-xs mb-1">Large Round</div>
        <Stepper {value} large rounded onPlus={increase} onMinus={decrease} />
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Large Outline</div>
        <Stepper {value} large outline onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Large Rounded Outline</div>
        <Stepper
          {value}
          large
          rounded
          outline
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>
  </Block>

  <BlockTitle>Raised</BlockTitle>
  <Block strongIos outlineIos class="text-center space-y-4">
    <div class="grid grid-cols-2 gap-4">
      <div>
        <div class="block text-xs mb-1">Default</div>
        <Stepper {value} raised onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Round</div>
        <Stepper {value} raised rounded onPlus={increase} onMinus={decrease} />
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Outline</div>
        <Stepper {value} raised outline onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Round Outline</div>
        <Stepper
          {value}
          raised
          outline
          rounded
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Small</div>
        <Stepper {value} raised small onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Small Round</div>
        <Stepper
          {value}
          raised
          small
          rounded
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Small Outline</div>
        <Stepper
          {value}
          raised
          small
          outline
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
      <div>
        <div class="block text-xs mb-1">Small Rounded Outline</div>
        <Stepper
          {value}
          raised
          small
          rounded
          outline
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Large</div>
        <Stepper {value} raised large onPlus={increase} onMinus={decrease} />
      </div>
      <div>
        <div class="block text-xs mb-1">Large Round</div>
        <Stepper
          {value}
          raised
          large
          rounded
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4 margin-top">
      <div>
        <div class="block text-xs mb-1">Large Outline</div>
        <Stepper
          {value}
          raised
          large
          outline
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
      <div>
        <div class="block text-xs mb-1">Large Rounded Outline</div>
        <Stepper
          {value}
          raised
          large
          rounded
          outline
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>
  </Block>
  <BlockTitle>With Text Input</BlockTitle>
  <Block strongIos outlineIos class="text-center space-y-4">
    <div>
      <Stepper
        value={inputValue}
        input
        onChange={onInputChange}
        onBlur={onInputBlur}
        onPlus={increaseInput}
        onMinus={decreaseInput}
      />
    </div>
    <div>
      <Stepper
        value={inputValue}
        outline
        input
        onChange={onInputChange}
        onBlur={onInputBlur}
        onPlus={increaseInput}
        onMinus={decreaseInput}
      />
    </div>
  </Block>
  <BlockTitle>Only Buttons</BlockTitle>
  <List strongIos outlineIos>
    <ListItem title={`Value is ${value}`}>
      <Stepper
        slot="after"
        {value}
        buttonsOnly
        onPlus={increase}
        onMinus={decrease}
      />
    </ListItem>
    <ListItem title={`Value is ${value}`}>
      <Stepper
        slot="after"
        {value}
        outline
        buttonsOnly
        onPlus={increase}
        onMinus={decrease}
      />
    </ListItem>
    <ListItem title={`Value is ${value}`}>
      <Stepper
        slot="after"
        {value}
        raised
        outline
        buttonsOnly
        onPlus={increase}
        onMinus={decrease}
      />
    </ListItem>
  </List>

  <BlockTitle>Colors</BlockTitle>
  <Block strongIos outlineIos class="text-center space-y-4">
    <div class="grid grid-cols-2 gap-4">
      <div>
        <Stepper
          {value}
          class="k-color-brand-red"
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
      <div>
        <Stepper
          {value}
          rounded
          class="k-color-brand-green"
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>

    <div class="grid grid-cols-2 gap-4">
      <div>
        <Stepper
          {value}
          class="k-color-brand-yellow"
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
      <div>
        <Stepper
          {value}
          rounded
          class="k-color-brand-purple"
          onPlus={increase}
          onMinus={decrease}
        />
      </div>
    </div>
  </Block>
</Page>