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

按鈕 React 組件

按鈕組件

包含以下組件

  • Button - 單一按鈕

按鈕屬性

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

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

clearIos布林值布林值

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

clearMaterial布林值布林值

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

colors物件

包含 Tailwind CSS 顏色類別的物件

colors.activeBgIos字串'active:bg-primary'
colors.activeBgMaterial字串''
字串字串'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字串''
字串字串'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'
字串字串'bg-md-light-secondary-container dark:bg-md-dark-secondary-container'
colors.tonalTextIos字串'text-primary'
字串字串'text-md-light-on-secondary-container dark:text-md-dark-on-secondary-container'
colors.touchRipple字串'touch-ripple-primary'
component字串字串

組件的 HTML 元素

disabled布林值布林值

布林值

使按鈕停用字串

href

字串布林值布林值

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

inline布林值未定義

布林值

使按鈕內聯（例如 display: inline-flex）布林值布林值

large

布林值布林值布林值

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

largeIos布林值未定義

布林值

在 iOS 主題中使按鈕變大布林值布林值

largeMaterial

布林值布林值布林值

在 Material 主題中使按鈕變大

outline布林值未定義

布林值

使按鈕呈現外框樣式。覆寫 outlineIos 和 outlineMaterial 屬性布林值布林值

outlineIos

布林值布林值布林值

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

outlineMaterial布林值未定義

布林值

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

raised

布林值布林值布林值

使按鈕凸起（帶陰影）。覆寫 raisedIos 和 raisedMaterial 屬性

raisedIos布林值布林值

布林值

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

raisedMaterial

布林值布林值布林值

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

rounded布林值未定義

布林值

使按鈕圓角。覆寫 roundedIos 和 roundedMaterial 屬性布林值布林值

roundedIos

布林值布林值布林值

在 iOS 主題中使按鈕圓角

roundedMaterial布林值未定義

布林值

在 Material 主題中使按鈕圓角布林值布林值

segmented

布林值布林值布林值

呈現分段按鈕，與 <SegmentedButton> 相同

segmentedActive布林值布林值

呈現分段作用中按鈕，與 <SegmentedButton active> 相同

segmentedStrong

布林值
import React from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  Button,
  Block,
  BlockTitle,
} from 'konsta/react';


export default function ButtonsPage() {
  return (
    <Page>
      <Navbar
        title="Buttons"
        />


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


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


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


      <BlockTitle>Small Buttons</BlockTitle>
      <Block strong outlineIos className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button small>Button</Button>
          <Button small>Button</Button>
          <Button small rounded>
            Button
          </Button>
        </div>
        <div className="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 className="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 className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button raised>Button</Button>
          <Button raised>Button</Button>
          <Button raised rounded>
            Button
          </Button>
        </div>
        <div className="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 className="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 className="space-y-2">
        <div className="grid grid-cols-3 gap-x-4">
          <Button disabled>Button</Button>
          <Button disabled outline>
            Outline
          </Button>
          <Button disabled clear>
            Clear
          </Button>
        </div>
      </Block>
    </Page>
  );
}
smallIos nolimits4web.