Блог

Вот пример кода, у меня есть аватар, и при нажатии на него я хочу показать небольшой выпадающий список с опцией выхода и, возможно, именем пользователя.

 import { Avatar, Layout } from 'antd';

 <StyledAvatar size="small"> {initials} </StyledAvatar>


 const StyledAvatar = styled(Avatar)`
  margin-left: ${({ theme }: { theme: Theme }) => theme.paddings.small}px;
  color: black;
  background-color: white;
  font-weight: bold;
`;
  

 <Dropdown
  overlay={menu}
  trigger={["click"]}
  placement="bottomLeft"
>
  <div onClick={e => e.preventDefault()}>
    <Avatar size="large" icon={<UserOutlined />} />
  </div>
</Dropdown>
  

Мы помещаем компонент аватара внутрь выпадающего компонента.