🔥 認識我們的新專案 t0ggles - 您終極的專案管理工具！ 🔥

按鈕 Svelte 組件

按鈕組件

包含以下組件

  • Button - 單個按鈕

按鈕屬性

名稱類型預設值描述
clear布林值未定義

使按鈕呈現清晰樣式（無填充顏色）。覆蓋 clearIos 和 clearMaterial 屬性

clearIos布林值布林值

false

使按鈕在 iOS 主題中呈現清晰樣式（無填充顏色）布林值布林值

clearMaterial

使按鈕在 Material 主題中呈現清晰樣式（無填充顏色）colors

物件

具有 Tailwind CSS 顏色類別的物件colors.activeBgIos字串
'active:bg-primary'colors.activeBgIos''
colors.activeBgMaterialcolors.activeBgIos字串
colors.disabledBgcolors.activeBgIos'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-10'
colors.disabledBordercolors.activeBgIos'border-black border-opacity-10 dark:border-white dark:border-opacity-10'
colors.disabledTextcolors.activeBgIos'text-black text-opacity-30 dark:text-white dark:text-opacity-30'
colors.fillActiveBgIoscolors.activeBgIos''
'active:bg-ios-primary-shade'colors.activeBgIoscolors.fillActiveBgMaterial
字串colors.activeBgIoscolors.fillBgIos
'bg-primary'colors.activeBgIoscolors.fillBgMaterial
'bg-md-light-primary dark:bg-md-dark-primary'colors.activeBgIoscolors.fillTextIos
'text-white'colors.activeBgIoscolors.fillTextMaterial
'text-md-light-on-primary dark:text-md-dark-on-primary'colors.activeBgIoscolors.fillTouchRipple
'touch-ripple-white dark:touch-ripple-primary'colors.activeBgIoscolors.outlineBorderIos
'border-primary'colors.activeBgIoscolors.outlineBorderMaterial
'border-md-light-outline dark:border-md-dark-outline'colors.activeBgIoscolors.textIos
'text-primary'colors.activeBgIoscolors.fillActiveBgMaterial
colors.textMaterialcolors.activeBgIos'text-md-light-primary dark:text-md-dark-primary'
colors.tonalBgIoscolors.activeBgIoscolors.outlineBorderMaterial
字串colors.activeBgIoscolors.tonalBgMaterial
'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'colors.activeBgIoscolors.tonalTextIos
字串colors.activeBgIoscolors.tonalTextMaterial

'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'

colors.touchRipple布林值布林值

'touch-ripple-primary'

componentcolors.activeBgIos

字串

'button'布林值布林值

組件的 HTML 元素

disabled布林值未定義

布林值

false布林值布林值

使按鈕禁用

href布林值布林值

字串

未定義布林值未定義

連結的 href 屬性，指定時也會呈現為 <a> 元素

inline布林值布林值

布林值

false布林值布林值

使按鈕內聯（例如，display: inline-flex）

large布林值未定義

布林值

undefined布林值布林值

使按鈕變大。覆蓋 largeIos 和 largeMaterial 屬性

largeIos布林值布林值

布林值

false布林值未定義

使按鈕在 iOS 主題中變大

largeMaterial布林值布林值

布林值

false布林值布林值

使按鈕在 Material 主題中變大

outline布林值布林值

布林值

undefined布林值布林值

使按鈕呈現外框樣式。覆蓋 outlineIos 和 outlineMaterial 屬性

outlineIos布林值布林值

布林值

false布林值未定義

使按鈕在 iOS 主題中呈現外框樣式

outlineMaterial布林值布林值

布林值

false布林值布林值

使按鈕在 Material 主題中呈現外框樣式

raised布林值未定義

布林值

undefined布林值布林值

使按鈕浮起（帶有陰影）。覆蓋 raisedIos 和 raisedMaterial 屬性

raisedIos布林值布林值

布林值

false布林值使按鈕在 iOS 主題中浮起（帶有陰影）

raisedMaterial

布林值false

使按鈕在 Material 主題中浮起（帶有陰影）

rounded

布林值
<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>
roundedIos 布林值.
false nolimits4web.