en-US

Set the vertical separator by dVertical.

Only the flex container is supported.

zh-CN

通过 dVertical 设置垂直分隔符。

仅支持 flex 容器使用。

import { DSeparator } from '@react-devui/ui';

export default function Demo() {
  return (
    <>
      <div className="container">
        <span>Some content...</span>
        <DSeparator dVertical></DSeparator>
        <span>Some content...</span>
        <DSeparator dVertical></DSeparator>
        <span>Some content...</span>
      </div>
      <br />
      <div className="container">
        <span>
          CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of
          work, because it can control the layout of multiple web pages all at once.
        </span>
        <DSeparator dTextAlign="center" dVertical>
          CENTER
        </DSeparator>
        <span>
          CSS is a language that describes how HTML elements are to be displayed on screen, paper, or in other media. CSS saves a lot of
          work, because it can control the layout of multiple web pages all at once.
        </span>
      </div>
    </>
  );
}

.container {
  display: flex;

  & > div:first-child,
  & > div:last-child {
    flex: 1 0 0;
  }
}