🔥 遇见我们的新项目 t0ggles - 你终极的项目管理工具！ 🔥

按钮 Svelte 组件

按钮组件

以下组件包含在内

  • Button - 单个按钮

按钮道具

名称类型默认值描述
clear布尔值未定义

使按钮采用清晰风格（无填充颜色）。覆盖 clearIos 和 clearMaterial 道具

clearIos布尔值false

在 iOS 主题中使按钮采用清晰风格（无填充颜色）

clearMaterial布尔值false

使按钮采用清晰风格（无填充颜色）在 Material 主题中

颜色对象

具有 Tailwind CSS 颜色类别的对象

colors.activeBgIos字符串'active:bg-primary'
colors.activeBgMaterial字符串''
colors.disabledBg字符串'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'
colors.disabledBorder字符串'border-black border-opacity-10 dark:border-white dark:border-opacity-10'
colors.disabledText字符串'text-black text-opacity-30 dark:text-white dark:text-opacity-30'
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.tonalBgIos字符串'bg-primary'
colors.tonalBgMaterial字符串'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.tonalTextIos字符串'text-primary'
colors.tonalTextMaterial字符串'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.touchRipple字符串'touch-ripple-primary'
组件字符串'button'

组件的 HTML 元素

禁用布尔值false

使按钮禁用

href字符串

链接的 href 属性，指定后也会渲染为 <a> 元素

内联布尔值false

使按钮内联（例如 display: inline-flex）

大布尔值未定义

使按钮变大。覆盖 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 主题中使按钮圆形

分段布尔值false

渲染分段按钮，与 <SegmentedButton> 相同

segmentedActive布尔值false

渲染分段活动按钮，与 <SegmentedButton active> 相同

segmentedStrong布尔值false

渲染分段强按钮，与 <SegmentedButton strong> 相同

小布尔值未定义

使按钮变小。覆盖 smallIos 和 smallMaterial 道具

smallIos布尔值false

在 iOS 主题中使按钮变小

smallMaterial布尔值false

在 Material 主题中使按钮变小

色调布尔值未定义

使按钮采用色调风格（带半透明填充颜色）。覆盖 tonalIos 和 tonalMaterial 道具

tonalIos布尔值false

在 iOS 主题中使按钮采用色调风格（带半透明填充颜色）

tonalMaterial布尔值false

在 Material 主题中使按钮采用色调风格（带半透明填充颜色）

touchRipple布尔值true

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

onClickfunction(e)

click 事件处理程序

例子

Buttons.svelte
<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Button,
    Block,
    BlockTitle,
  } from 'konsta/svelte';


</script>


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


  <BlockTitle>Default Buttons</BlockTitle>
  <Block strong outlineIos class="space-y-2">
    <div class="grid grid-cols-3 gap-x-4">
      <Button>Button</Button>
      <Button class="k-color-brand-red">Button</Button>
      <Button>Button</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button outline>Outline</Button>
      <Button class="k-color-brand-red" outline>Outline</Button>
      <Button outline>Outline</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button clear>Clear</Button>
      <Button class="k-color-brand-red" clear>Clear</Button>
      <Button clear>Clear</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button tonal>Tonal</Button>
      <Button class="k-color-brand-red" tonal>Tonal</Button>
      <Button tonal>Tonal</Button>
    </div>
  </Block>


  <BlockTitle>Rounded Buttons</BlockTitle>
  <Block strong outlineIos class="space-y-2">
    <div class="grid grid-cols-3 gap-x-4">
      <Button rounded>Button</Button>
      <Button rounded class="k-color-brand-green">Button</Button>
      <Button rounded>Button</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button rounded outline>Outline</Button>
      <Button rounded outline class="k-color-brand-green">Outline</Button>
      <Button rounded outline>Outline</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button rounded clear>Clear</Button>
      <Button rounded clear class="k-color-brand-green">Clear</Button>
      <Button rounded clear>Clear</Button>
    </div>
  </Block>


  <BlockTitle>Large Buttons</BlockTitle>
  <Block strong outlineIos class="space-y-2">
    <div class="grid grid-cols-3 gap-x-4">
      <Button large>Button</Button>
      <Button large class="k-color-brand-yellow">Button</Button>
      <Button large rounded>Button</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button large outline>Outline</Button>
      <Button large outline class="k-color-brand-yellow">Outline</Button>
      <Button large rounded outline>Outline</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button large clear>Clear</Button>
      <Button large clear class="k-color-brand-yellow">Clear</Button>
      <Button large rounded clear>Clear</Button>
    </div>
  </Block>


  <BlockTitle>Small Buttons</BlockTitle>
  <Block strong outlineIos class="space-y-2">
    <div class="grid grid-cols-3 gap-x-4">
      <Button small>Button</Button>
      <Button small>Button</Button>
      <Button small rounded>Button</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button small outline>Outline</Button>
      <Button small outline>Outline</Button>
      <Button small rounded outline>Outline</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button small clear>Clear</Button>
      <Button small clear>Clear</Button>
      <Button small rounded clear>Clear</Button>
    </div>
  </Block>


  <BlockTitle>Raised Buttons</BlockTitle>
  <Block strong outlineIos class="space-y-2">
    <div class="grid grid-cols-3 gap-x-4">
      <Button raised>Button</Button>
      <Button raised>Button</Button>
      <Button raised rounded>Button</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button raised outline>Outline</Button>
      <Button raised outline>Outline</Button>
      <Button raised rounded outline>Outline</Button>
    </div>
    <div class="grid grid-cols-3 gap-x-4">
      <Button raised clear>Clear</Button>
      <Button raised clear>Clear</Button>
      <Button raised rounded clear>Clear</Button>
    </div>
  </Block>


  <BlockTitle>Disabled Buttons</BlockTitle>
  <Block strong outlineIos class="space-y-2">
    <div class="grid grid-cols-3 gap-x-4">
      <Button disabled>Button</Button>
      <Button disabled outline>Outline</Button>
      <Button disabled clear>Clear</Button>
    </div>
  </Block>
</Page>
代码根据 MIT.
2022 © Konsta UI by nolimits4web.