en-US

Set the pop-up position through dPlacement.

zh-CN

通过 dPlacement 设置弹出位置。

import { DPopover, DButton } from '@react-devui/ui';

export default function Demo() {
  const content = (
    <>
      <div>Some contents...</div>
      <div style={{ marginTop: 4 }}>Some contents...</div>
    </>
  );

  return (
    <div className="container">
      <div className="container-top">
        <DPopover dContent={content} dPlacement="top-left">
          <DButton>TL</DButton>
        </DPopover>
        <DPopover dContent={content} dPlacement="top">
          <DButton>T</DButton>
        </DPopover>
        <DPopover dContent={content} dPlacement="top-right">
          <DButton>TR</DButton>
        </DPopover>
      </div>
      <div>
        <div className="container-left">
          <DPopover dContent={content} dPlacement="left-top">
            <DButton>LT</DButton>
          </DPopover>
          <DPopover dContent={content} dPlacement="left">
            <DButton>L</DButton>
          </DPopover>
          <DPopover dContent={content} dPlacement="left-bottom">
            <DButton>LB</DButton>
          </DPopover>
        </div>
        <div className="container-right">
          <DPopover dContent={content} dPlacement="right-top">
            <DButton>RT</DButton>
          </DPopover>
          <DPopover dContent={content} dPlacement="right">
            <DButton>R</DButton>
          </DPopover>
          <DPopover dContent={content} dPlacement="right-bottom">
            <DButton>RB</DButton>
          </DPopover>
        </div>
      </div>
      <div className="container-bottom">
        <DPopover dContent={content} dPlacement="bottom-left">
          <DButton>BL</DButton>
        </DPopover>
        <DPopover dContent={content} dPlacement="bottom">
          <DButton>B</DButton>
        </DPopover>
        <DPopover dContent={content} dPlacement="bottom-right">
          <DButton>BR</DButton>
        </DPopover>
      </div>
    </div>
  );
}

.container {
  min-width: 360px;

  .rd-button {
    width: 64px;
  }
}

.container-top,
.container-bottom {
  display: flex;
  gap: 0 10px;
  justify-content: center;
  width: 220px;
}

.container-top {
  margin: 0 0 8px 64px;
}

.container-bottom {
  margin: 8px 0 0 64px;
}

.container-left,
.container-right {
  display: inline-flex;
  flex-direction: column;
  gap: 10px 0;
}

.container-right {
  margin-left: 220px;
}