Ant Design：如何垂直展示Segmented组件？

直接通过父元素设置flex-direction: column强制垂直布局，会破坏Segmented组件默认针对水平布局设计的动画逻辑——默认的hover/选中动画是基于水平方向的缩放和位置计算，强行改布局后动画的尺寸、方向都会错位。

修复方案 #

直接给Segmented组件自定义样式，覆盖内部布局规则并修正动画逻辑：

1. 调整组件结构：移除父级Flex容器，给Segmented添加自定义类名，同时优化每个选项内部的布局让内容对齐更合理
2. 自定义CSS修正样式：调整垂直布局下的flex方向、动画伪元素的变换规则、边框圆角等样式

修改后的代码示例

import React from 'react';
import { UserOutlined } from '@ant-design/icons';
import { Avatar, Segmented } from 'antd';
// 引入自定义样式文件
import './VerticalSegmented.css';

const App = () => (
  <Segmented
    className="vertical-segmented"
    options={[
      {
        label: (
          <div style={{ padding: 4, display: 'flex', alignItems: 'center', gap: 8 }}>
            <Avatar src="https://api.dicebear.com/7.x/miniavs/svg?seed=8" />
            <div>User 1</div>
          </div>
        ),
        value: 'user1',
      },
      {
        label: (
          <div style={{ padding: 4, display: 'flex', alignItems: 'center', gap: 8 }}>
            <Avatar style={{ backgroundColor: '#f56a00' }}>
              K
            </Avatar>
            <div>User 2</div>
          </div>
        ),
        value: 'user2',
      },
      {
        label: (
          <div style={{ padding: 4, display: 'flex', alignItems: 'center', gap: 8 }}>
            <Avatar style={{ backgroundColor: '#87d068' }} icon={<UserOutlined />} />
            <div>User 3</div>
          </div>
        ),
        value: 'user3',
      },
    ]}
  />
);
export default App;

自定义CSS文件（VerticalSegmented.css）

.vertical-segmented {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* 让每个选项占满宽度，内容左对齐 */
.vertical-segmented .ant-segmented-item {
  width: 100%;
  justify-content: flex-start;
}

/* 修复选中状态的动画：把水平缩放改成垂直缩放，调整变换原点 */
.vertical-segmented .ant-segmented-item-selected::after {
  transform: scaleY(1) !important;
  transform-origin: top center !important;
  height: 100% !important;
  width: 100% !important;
}

/* 修复hover状态的动画逻辑 */
.vertical-segmented .ant-segmented-item:hover::after {
  transform: scaleY(1) !important;
  transform-origin: top center !important;
  height: 100% !important;
  width: 100% !important;
}

/* 调整垂直布局的边框和圆角，保持视觉连贯 */
.vertical-segmented .ant-segmented-item:first-child {
  border-radius: 8px 8px 0 0 !important;
}

.vertical-segmented .ant-segmented-item:last-child {
  border-radius: 0 0 8px 8px !important;
}

.vertical-segmented .ant-segmented-item:not(:last-child) {
  border-bottom: 1px solid var(--ant-color-border) !important;
  border-right: none !important;
}

关键修复点说明 #

• 直接修改Segmented自身的flex布局，避免父级样式干扰组件内部的动画计算
• 将默认的水平缩放scaleX动画改为垂直方向的scaleY，同时调整变换原点和伪元素的宽高，让动画在垂直方向正确展开
• 调整选项的边框和圆角，适配垂直布局的视觉效果，去掉水平布局的右侧边框，改成底部边框
• 选项内部用flex布局让头像和文字居中对齐，提升视觉体验

内容的提问来源于stack exchange，提问作者Nikita Nikitin