Sard Uniapp

Appearance

在新窗口打开⤴

Segmented分段控制器1.24+

介绍 ​

用于展示多个选项并允许用户选择其中单个选项。

引入 ​

js
import Segmented from 'sard-uniapp/components/segmented/segmented.vue'

代码演示 ​

基础使用 ​

使用 v-model 双向绑定当前值，使用 options 定义选项内容。

vue
<template>
  <sar-segmented v-model="value" :options="options" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const options = ['Daily', 'Weekly', 'Monthly']

const value = ref('Daily')
</script>
vue
<template>
  <sar-segmented v-model="value" :options="options" />
</template>

<script setup lang="js">
import { ref } from "vue";
const options = ["Daily", "Weekly", "Monthly"];
const value = ref("Daily");
</script>

尺寸 ​

通过 size 属性来定义尺寸大小。

vue
<template>
  <sar-segmented v-model="value" :options="options" :size="value" />
</template>

<script setup lang="ts">
import { type SegmentedSize } from 'sard-uniapp'
import { ref } from 'vue'

const options: SegmentedSize[] = ['small', 'middle', 'large']

const value = ref<SegmentedSize>('middle')
</script>
vue
<template>
  <sar-segmented v-model="value" :options="options" :size="value" />
</template>

<script setup lang="js">
import { ref } from "vue";
const options = ["small", "middle", "large"];
const value = ref("middle");
</script>

胶囊形状 ​

使用 shape="round" 属性可定义胶囊形状。

vue
<template>
  <sar-segmented v-model="value" :options="options" shape="round" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const options = ['Daily', 'Weekly', 'Monthly']

const value = ref('Daily')
</script>
vue
<template>
  <sar-segmented v-model="value" :options="options" shape="round" />
</template>

<script setup lang="js">
import { ref } from "vue";
const options = ["Daily", "Weekly", "Monthly"];
const value = ref("Daily");
</script>

设置图标 ​

选项的 icon 属性可定义放置在 label 左边的图标。

vue
<template>
  <sar-segmented v-model="value" :options="options" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const options = [
  {
    label: '首页',
    value: 'home',
    icon: 'house-door-fill',
    iconFamily: 'demo-icons',
  },
  {
    label: '购物车',
    value: 'card',
    icon: 'cart-fill',
    iconFamily: 'demo-icons',
  },
  {
    label: '消息',
    value: 'message',
    icon: 'chat-dots-fill',
    iconFamily: 'demo-icons',
  },
]

const value = ref('home')
</script>
vue
<template>
  <sar-segmented v-model="value" :options="options" />
</template>

<script setup lang="js">
import { ref } from "vue";
const options = [
  {
    label: "\u9996\u9875",
    value: "home",
    icon: "house-door-fill",
    iconFamily: "demo-icons"
  },
  {
    label: "\u8D2D\u7269\u8F66",
    value: "card",
    icon: "cart-fill",
    iconFamily: "demo-icons"
  },
  {
    label: "\u6D88\u606F",
    value: "message",
    icon: "chat-dots-fill",
    iconFamily: "demo-icons"
  }
];
const value = ref("home");
</script>

只设置图标 ​

可以不配置 label 而只配置 icon。

vue
<template>
  <sar-segmented v-model="value" :options="options" />

  <view class="flex mt-20">
    <sar-segmented v-model="value" :options="options" />
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const options = [
  {
    value: 'home',
    icon: 'house-door-fill',
    iconFamily: 'demo-icons',
  },
  {
    value: 'card',
    icon: 'cart-fill',
    iconFamily: 'demo-icons',
  },
  {
    value: 'message',
    icon: 'chat-dots-fill',
    iconFamily: 'demo-icons',
  },
]

const value = ref('home')
</script>
vue
<template>
  <sar-segmented v-model="value" :options="options" />

  <view class="flex mt-20">
    <sar-segmented v-model="value" :options="options" />
  </view>
</template>

<script setup lang="js">
import { ref } from "vue";
const options = [
  {
    value: "home",
    icon: "house-door-fill",
    iconFamily: "demo-icons"
  },
  {
    value: "card",
    icon: "cart-fill",
    iconFamily: "demo-icons"
  },
  {
    value: "message",
    icon: "chat-dots-fill",
    iconFamily: "demo-icons"
  }
];
const value = ref("home");
</script>

垂直方向 ​

设置 direction="vertical" 属性可垂直排列分段器。

vue
<template>
  <sar-space>
    <sar-segmented v-model="value" :options="options1" direction="vertical" />
    <sar-segmented v-model="value" :options="options2" direction="vertical" />
  </sar-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const options1 = ['home', 'card', 'message']

const options2 = [
  {
    value: 'home',
    icon: 'house-door-fill',
    iconFamily: 'demo-icons',
  },
  {
    value: 'card',
    icon: 'cart-fill',
    iconFamily: 'demo-icons',
  },
  {
    value: 'message',
    icon: 'chat-dots-fill',
    iconFamily: 'demo-icons',
  },
]

const value = ref('home')
</script>
vue
<template>
  <sar-space>
    <sar-segmented v-model="value" :options="options1" direction="vertical" />
    <sar-segmented v-model="value" :options="options2" direction="vertical" />
  </sar-space>
</template>

<script setup lang="js">
import { ref } from "vue";
const options1 = ["home", "card", "message"];
const options2 = [
  {
    value: "home",
    icon: "house-door-fill",
    iconFamily: "demo-icons"
  },
  {
    value: "card",
    icon: "cart-fill",
    iconFamily: "demo-icons"
  },
  {
    value: "message",
    icon: "chat-dots-fill",
    iconFamily: "demo-icons"
  }
];
const value = ref("home");
</script>

禁用 ​

可在 segmented 上设置 disabled 禁用所有选项，或者在选项上设置 disabled 禁用单个选项。

如果置于表单组件中，也受表单组件 disabled 属性的影响。

vue
<template>
  <sar-space direction="vertical">
    <sar-segmented v-model="value" :options="options" disabled />
    <sar-segmented v-model="value" :options="options" />
  </sar-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const options = [
  { label: 'Daily', value: 'Daily' },
  { label: 'Weekly', value: 'Weekly', disabled: true },
  { label: 'Monthly', value: 'Monthly' },
]

const value = ref('Daily')
</script>
vue
<template>
  <sar-space direction="vertical">
    <sar-segmented v-model="value" :options="options" disabled />
    <sar-segmented v-model="value" :options="options" />
  </sar-space>
</template>

<script setup lang="js">
import { ref } from "vue";
const options = [
  { label: "Daily", value: "Daily" },
  { label: "Weekly", value: "Weekly", disabled: true },
  { label: "Monthly", value: "Monthly" }
];
const value = ref("Daily");
</script>

自定义内容 ​

如果需要自定义内容，可使用 segmented-item 组件，需自定义循环和传递 value 属性。options 属性也需要传递，以便获取当前值的下标。

vue
<template>
  <sar-segmented v-model="value" :options="options">
    <sar-segmented-item
      v-for="(option, index) in options"
      :key="index"
      :value="option.value"
    >
      <view class="flex flex-col items-center">
        <view>
          <sar-icon :name="option.icon" :family="option.iconFamily" />
        </view>
        <view>{{ option.label }}</view>
      </view>
    </sar-segmented-item>
  </sar-segmented>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const options = [
  {
    label: '首页',
    value: 'home',
    icon: 'house-door-fill',
    iconFamily: 'demo-icons',
  },
  {
    label: '购物车',
    value: 'card',
    icon: 'cart-fill',
    iconFamily: 'demo-icons',
  },
  {
    label: '消息',
    value: 'message',
    icon: 'chat-dots-fill',
    iconFamily: 'demo-icons',
  },
]

const value = ref('home')
</script>
vue
<template>
  <sar-segmented v-model="value" :options="options">
    <sar-segmented-item
      v-for="(option, index) in options"
      :key="index"
      :value="option.value"
    >
      <view class="flex flex-col items-center">
        <view>
          <sar-icon :name="option.icon" :family="option.iconFamily" />
        </view>
        <view>{{ option.label }}</view>
      </view>
    </sar-segmented-item>
  </sar-segmented>
</template>

<script setup lang="js">
import { ref } from "vue";
const options = [
  {
    label: "\u9996\u9875",
    value: "home",
    icon: "house-door-fill",
    iconFamily: "demo-icons"
  },
  {
    label: "\u8D2D\u7269\u8F66",
    value: "card",
    icon: "cart-fill",
    iconFamily: "demo-icons"
  },
  {
    label: "\u6D88\u606F",
    value: "message",
    icon: "chat-dots-fill",
    iconFamily: "demo-icons"
  }
];
const value = ref("home");
</script>

API ​

SegmentedProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
model-value绑定值any-
disabled是否禁用booleanfalse
readonly是否只读booleanfalse
size组件大小'small' | 'middle' | 'large''middle'
direction展示的方向'horizontal' | 'vertical''horizontal'
shape形状'square' | 'round''square'
options选项的数据SegmentedOption[]-
option-keys自定义 options 的 label、value 的字段OptionKeys{label: 'label', value: 'value'}
validate-event是否触发表单验证booleantrue

SegmentedOption ​

ts
type SegmentedOption =
  | {
      [key: PropertyKey]: any
    }
  | string
  | number
  | boolean

OptionKeys ​

ts
export interface OptionKeys {
  label?: string
  value?: string
}

SegmentedSlots ​

插槽描述属性
default自定义默认内容-

SegmentedEmits ​

事件描述类型
update:model-value当所选值更改时触发(value: any) => void
change当所选值更改时触发(value: any) => void

SegmentedItemProps ​

属性描述类型默认值
root-class组件根元素类名string-
root-style组件根元素样式StyleValue-
label展示文本string | number-
value用于绑定的值string | number | boolean-
icon图标string-
icon-family图标字体string-
icon-size图标大小string-
disabled禁用状态booleanfalse
readonly只读状态booleanfalse

SegmentedItemSlots ​

插槽描述属性
default自定义默认内容-

主题定制 ​

CSS 变量 ​

scss
page,
.sar-portal {
  --sar-segmented-min-height: 64rpx;
  --sar-segmented-large-min-height: 80rpx;
  --sar-segmented-small-min-height: 48rpx;
  --sar-segmented-padding: 2px;
  --sar-segmented-font-size: var(--sar-text-base);
  --sar-segmented-bg: var(--sar-secondary-bg);
  --sar-segmented-border-radius: var(--sar-rounded);
  --sar-segmented-pointer-bg: var(--sar-emphasis-bg);
  --sar-segmented-pointer-duration: var(--sar-duration);
  --sar-segmented-pointer-box-shadow: var(--sar-shadow-sm);
  --sar-segmented-item-padding: 24rpx;
  --sar-segmented-item-small-padding: 16rpx;
  --sar-segmented-item-color: var(--sar-secondary-color);
  --sar-segmented-item-active-bg: var(--sar-active-deep-bg);
  --sar-segmented-item-active-color: var(--sar-emphasis-color);
  --sar-segmented-item-label-margin-left: 12rpx;
}

Released under the MIT License.

Copyright © 2023-present wuzhitao