如何使 Antd 选择下拉锚点到选择的右侧

Posted 2023-03-06

【中文标题】如何使 Antd 选择下拉锚点到选择的右侧

【英文标题】：How To Make Antd Select Dropdown Anchor To Right Of Select

【发布时间】：2022-01-07 21:27:08

【问题描述】：

我使用 Ant-Design，在一个组件中我有一个 Select，它位于屏幕的右侧。有些标签很长，因此当下拉菜单出现时，它会溢出并出现滚动条。 我希望将下拉锚点放在Select 按钮的右侧而不是左侧，从而保持标签长度但避免溢出而不隐藏任何内容，但 Antd 不会公开 API为此，我无法弄清楚要弄乱哪个 CSS 属性... 沙盒示例is here。

【参考方案1】：

这在文档中没有描述，但由于版本 4.17.0 Select 支持 placement 属性。

export default function App() 
  const [value, setValue] = useState("short");

  return (
    <div
      className="App"
      style=
        position: "relative"
      
    >
      <Select
        value=value
        style=
          position: "absolute",
          right: "20px"
        
        dropdownMatchSelectWidth=false
        onChange=(v) => setValue(v)
        placement="bottomRight"
      >
        <Select.Option value="short">Short</Select.Option>
        <Select.Option value="long">
          Really Long Label That Makes Everything Weird
        </Select.Option>
      </Select>
    </div>
  );

链接到changelog