分段控件 Svelte 组件

分段组件
分段属性
分段按钮属性
示例

分段控件是一组线性排列的两个或多个段（按钮），每个段都充当相互排斥的按钮。在控件中，所有按钮的宽度相等。分段控件通常用于显示不同的视图（切换选项卡）。

分段组件

包含以下组件

Segmented - 分段按钮的包装器
SegmentedButton - 单个分段按钮

分段属性

名称	类型	默认值	描述
colors	对象		包含 Tailwind CSS 颜色类名的对象
colors.borderIos	字符串	'border-primary'
colors.borderMaterial	字符串	'border-md-light-outline dark:border-md-dark-outline'
colors.divideIos	字符串	'divide-primary'
colors.divideMaterial	字符串	'divide-md-light-outline dark:divide-md-dark-outline'
colors.strongBgIos	字符串	'bg-black bg-opacity-5 dark:bg-white dark:bg-opacity-10'
colors.strongBgMaterial	字符串	'bg-md-light-surface-variant dark:bg-md-dark-surface-variant'
outline	布尔值	false	使分段为轮廓线
raised	布尔值	false	使分段凸起
rounded	布尔值	false	使分段圆角
strong	布尔值	false	使分段加粗

分段按钮属性

SegmentedButton 组件扩展了 Button 组件，它支持所有 Button 属性以及以下附加属性

名称	类型	默认值	描述
active	布尔值	false	突出显示按钮为活动状态
rounded	布尔值	false	使分段按钮圆角（应在 `<Segmented rounded>` 中使用）
strong	布尔值	false	使分段按钮加粗（应在 `<Segmented strong>` 中使用）
onClick	function(e)		`click` 事件处理程序

示例

SegmentedControl.svelte

<script>
  import {
    Page,
    Navbar,
    NavbarBackLink,
    Segmented,
    SegmentedButton,
    Block,
    BlockTitle,
  } from 'konsta/svelte';

  let activeSegmented = 1;
</script>

<Page>
  <Navbar title="Segmented Control" />

  <BlockTitle>Default Segmented</BlockTitle>
  <Block strongIos outlineIos class="space-y-4">
    <Segmented>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>

    <Segmented rounded>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
  </Block>

  <BlockTitle>Raised Segmented</BlockTitle>
  <Block strongIos outlineIos class="space-y-4">
    <Segmented raised>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
    <Segmented raised rounded>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
  </Block>

  <BlockTitle>Outline</BlockTitle>
  <Block strongIos outlineIos class="space-y-4">
    <Segmented outline>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
    <Segmented rounded outline>
      <SegmentedButton
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
  </Block>

  <BlockTitle>Strong Segmented</BlockTitle>
  <Block strongIos outlineIos class="space-y-4">
    <Segmented strong>
      <SegmentedButton
        strong
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        strong
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        strong
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>

    <Segmented strong rounded>
      <SegmentedButton
        strong
        rounded
        active={activeSegmented === 1}
        onClick={() => (activeSegmented = 1)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        strong
        rounded
        active={activeSegmented === 2}
        onClick={() => (activeSegmented = 2)}
      >
        Button
      </SegmentedButton>
      <SegmentedButton
        strong
        rounded
        active={activeSegmented === 3}
        onClick={() => (activeSegmented = 3)}
      >
        Button
      </SegmentedButton>
    </Segmented>
  </Block>
</Page>