javascript - 在框架ui 'badge'中将 'panel'设置为 `ant design`

Question

是否可以在 ant design 中将 Badge 设置为 'Info' 旁边的 Panel？

Code

<div>
  <Collapse>
    <Panel header="Info" key="1">
      <Badge
        count={4}
        style={{
          backgroundColor: "#fff",
          color: "#999",
          boxShadow: "0 0 0 1px #d9d9d9 inset"
        }}
      />
    </Panel>
  </Collapse>
</div>

Answer 1

是的，Collapse.Panel - header 属性接受 ReactNode 所以你可以渲染任何你想要的，example , 使用 antd Grid:

export default function App() {
  return (
    <Collapse>
      <Collapse.Panel
        header={
          <Row type="flex" gutter={10}>
            <Col>Info</Col>
            <Col>
              <Badge
                count={4}
                style={{
                  backgroundColor: '#fff',
                  color: '#999',
                  boxShadow: '0 0 0 1px #d9d9d9 inset'
                }}
              />
            </Col>
          </Row>
        }
        key="1"
      />
    </Collapse>
  );
}