分段 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>

改进此文档

在本页

按钮属性
示例