🔥 认识我们的新项目 t0ggles - 您终极的项目管理工具！ 🔥

步进器 Svelte 组件

步进器组件

包含以下组件

  • 步进器

步进器属性

名称类型默认值描述
buttonsOnly布尔值false

禁用步进器按钮之间的内部值容器

颜色对象

具有 Tailwind CSS 颜色类的对象

colors.activeBgIos字符串'active:bg-primary'
colors.activeBgMaterial字符串''
colors.fillActiveBgIos字符串'active:bg-ios-primary-shade'
colors.fillActiveBgMaterial字符串''
colors.fillBgIos字符串'bg-primary'
colors.fillBgMaterial字符串'bg-md-light-primary dark:bg-md-dark-primary'
colors.fillTextIos字符串'text-white'
colors.fillTextMaterial字符串'text-md-light-on-primary dark:text-md-dark-on-primary'
colors.fillTouchRipple字符串'touch-ripple-white dark:touch-ripple-primary'
colors.outlineBorderIos字符串'border-primary'
colors.outlineBorderMaterial字符串'border-md-light-outline dark:border-md-dark-outline'
colors.textIos字符串'text-primary'
colors.textMaterial字符串'text-md-light-primary dark:text-md-dark-primary'
colors.touchRipple字符串'touch-ripple-primary'
组件字符串'div'

组件的 HTML 元素

输入布尔值false

定义是否应渲染元素

inputDisabled布尔值false

定义步进器输入是否禁用

inputPlaceholder字符串

输入占位符

inputReadOnly布尔值false

定义步进器输入是否只读

inputType字符串'text'

输入类型

大布尔值未定义

使步进器变大。覆盖 largeIos 和 largeMaterial

largeIos布尔值false

在 iOS 主题中使步进器变大

largeMaterial布尔值false

在 Material 主题中使步进器变大

轮廓布尔值未定义

使步进器轮廓。覆盖 outlineIos 和 outlineMaterial

outlineIos布尔值false

在 iOS 主题中使步进器轮廓

outlineMaterial布尔值false

在 Material 主题中使步进器轮廓

凸起布尔值未定义

使步进器凸起（带阴影）。覆盖 raisedIos 和 raisedMaterial

raisedIos布尔值false

在 iOS 主题中使步进器凸起（带阴影）

raisedMaterial布尔值false

在 Material 主题中使步进器凸起（带阴影）

圆形布尔值未定义

使步进器圆形。覆盖 roundedIos 和 roundedMaterial

roundedIos布尔值false

在 iOS 主题中使步进器圆形

roundedMaterial布尔值false

在 Material 主题中使步进器圆形

小布尔值未定义

使步进器变小。覆盖 smallIos 和 smallMaterial

smallIos布尔值false

在 iOS 主题中使步进器变小

smallMaterial布尔值false

在 Material 主题中使步进器变小

touchRipple布尔值true

在 Material 主题中启用触摸涟漪效果

价值数字0

步进器值

onBlurfunction(e)

步进器输入 blur 处理程序

onChangefunction(e)

步进器输入 change 处理程序

onFocusfunction(e)

步进器输入 focus 处理程序

onInputfunction(e)

步进器输入 input 处理程序

onMinusfunction(e)

步进器“减号”按钮单击处理程序

onPlusfunction(e)

步进器“加号”按钮单击处理程序

示例

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>
代码许可证 MIT.
2022 © Konsta UI 由 nolimits4web.