分段 Svelte 组件

包含以下组件：

Segmented- 按钮分段包装

按钮属性

按钮组件几乎具有与链接组件相同的属性，但有一些额外的按钮特定属性：

属性	类型	默认	描述
<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>

改进此文档

在本页上

按钮属性
示例