分段式 Svelte 組件

包括以下組件

分段式 - 按鈕的分段式包裝器

按鈕屬性

按鈕元件具有與連結元件幾乎相同的屬性，但多了幾個按鈕專屬屬性

屬性	類型	預設值	說明
<Segmented> 屬性
raised	布林值	false	使分段按鈕凸起
raisedIos	布林值	false	僅在 iOS 主題中使分段按鈕凸起
raisedMd	布林值	false	僅在 MD 主題中使分段按鈕凸起
round	布林值	false	使分段按鈕圓形
roundIos	布林值	false	僅在 iOS 主題中使分段按鈕圓形
roundMd	布林值	false	僅在 MD 主題中使分段按鈕圓形
strong	布林值	false	使分段按鈕粗體
strongIos	布林值	false	僅在 iOS 主題中使分段按鈕粗體
strongMd	布林值	false	僅在 MD 主題中使分段按鈕粗體
tag	字串	div	用於呈現分段元素的標籤。可以是 `div` 或 `p`

範例

segmented.svelte

<script>
  import { Page, Navbar, Block, Segmented, Button } from 'framework7-svelte';

  let activeStrongButton = 0;
</script>

<!-- svelte-ignore a11y-invalid-attribute -->
<Page>
  <Navbar title="Segmented" />

  <Block strong outlineIos>
    <Segmented tag="p">
      <Button>Button</Button>
      <Button>Button</Button>
      <Button active>Active</Button>
    </Segmented>
    <Segmented strong tag="p">
      <Button active={activeStrongButton === 0} onClick={() => (activeStrongButton = 0)}
        >Button</Button
      >
      <Button active={activeStrongButton === 1} onClick={() => (activeStrongButton = 1)}
        >Button</Button
      >
      <Button active={activeStrongButton === 2} onClick={() => (activeStrongButton = 2)}
        >Button</Button
      >
    </Segmented>
    <Segmented raised tag="p">
      <Button>Button</Button>
      <Button>Button</Button>
      <Button active>Active</Button>
    </Segmented>
    <Segmented tag="p">
      <Button outline>Outline</Button>
      <Button outline>Outline</Button>
      <Button outline active>Active</Button>
    </Segmented>
    <Segmented raised round tag="p">
      <Button round>Button</Button>
      <Button round>Button</Button>
      <Button round active>Active</Button>
    </Segmented>
    <Segmented round tag="p">
      <Button round outline>Outline</Button>
      <Button round outline>Outline</Button>
      <Button round outline active>Active</Button>
    </Segmented>
  </Block>
</Page>

改善此文件

在此頁面

按鈕屬性
範例