) => {
+ const classPrefix = 'nut-segmented'
+ const itemClassPrefix = 'nut-segmented-item'
+ const mergedProps = mergeProps(defaultProps, props)
+
+ const { options, onChange } = mergedProps
+
+ const [value, setValue] = usePropsValue({
+ value: mergedProps.value,
+ defaultValue: mergedProps.defaultValue,
+ finalValue: 0,
+ onChange: mergedProps.onChange,
+ })
+ const renderItems = useCallback(
+ (options: SegmentedProps['options'], value: string | number) => {
+ return options.map((option, index) => {
+ const optionType = typeof option
+ switch (optionType) {
+ case 'object':
+ // eslint-disable-next-line no-case-declarations
+ const opt = option as SegmentedItem
+ return (
+ {
+ if (opt.disabled) return
+ setValue(opt.value)
+ }}
+ >
+ {opt.icon ? (
+ {opt.icon}
+ ) : null}
+ {opt.label}
+
+ )
+ default: {
+ if (typeof option !== 'string' && typeof option !== 'number') {
+ console.warn('Unsupported option type:', optionType)
+ }
+ return (
+ {
+ setValue(index)
+ }}
+ >
+ {option as string}
+
+ )
+ }
+ }
+ })
+ },
+ [value]
+ )
+
+ return (
+
+ {renderItems(options, value)}
+
+ )
+}
diff --git a/src/packages/segmented/types.ts b/src/packages/segmented/types.ts
new file mode 100644
index 0000000000..f156d1a11f
--- /dev/null
+++ b/src/packages/segmented/types.ts
@@ -0,0 +1,17 @@
+import { ReactNode } from 'react'
+import { BasicComponent } from '@/utils/typings'
+
+export interface SegmentedItem {
+ label: ReactNode
+ value: string | number
+ icon?: ReactNode
+ disabled?: boolean
+ className?: string
+}
+
+export interface SegmentedProps extends BasicComponent {
+ options: string[] | number[] | SegmentedItem[]
+ value: string | number
+ defaultValue: string | number
+ onChange: (value: string | number) => void
+}
diff --git a/src/styles/variables.scss b/src/styles/variables.scss
index b445e4a88c..f0ec31c62b 100644
--- a/src/styles/variables.scss
+++ b/src/styles/variables.scss
@@ -1969,6 +1969,37 @@ $searchbar-input-text-align: var(
left
) !default;
+// segmented
+$segmented-height: var(--nutui-segmented-height, 24px) !default;
+$segmented-padding: var(--nutui-segmented-padding, $spacing-xxxs) !default;
+$segmented-border-radius: var(--nutui-segmented-radius, $radius-xs) !default;
+$segmented-background: var(
+ --nutui-segmented-background,
+ $color-mask-part
+) !default;
+$segmented-item-height: var(--nutui-segmented-height, 20px) !default;
+$segmented-item-padding: var(
+ --nutui-segmented-item-padding,
+ 0 $spacing-xs
+) !default;
+$segmented-item-radius: var(--nutui-segmented-item-radius, $radius-xs) !default;
+$segmented-item-fontsize: var(
+ --nutui-segmented-item-fontsize,
+ $font-size-s
+) !default;
+$segmented-item-color: var(
+ --nutui-segmented-item-color,
+ $color-primary-text
+) !default;
+$segmented-active-background: var(
+ --nutui-segmented-active-background,
+ $color-mask-part
+) !default;
+$segmented-icon-margin-right: var(
+ --nutui-segmented-icon-margin-right,
+ $spacing-xxxs
+) !default;
+
// empty（✅）
$empty-padding: var(--nutui-empty-padding, 32px 40px) !default;
$empty-image-size: var(--nutui-empty-image-size, 160px) !default;