在框架用户设计中将“徽章”设置为“面板”

Question

是否可以将Badge中“信息”旁边的Panel设置为ant design？

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，因此您可以使用antd Grid来渲染example所需的任何内容：

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>
  );
}