tiny-design/packages/react/src/divider/demo/AlignTitle.tsx at a05368713fd0af8584bbcbc1079c2c99746d0b79 · wangdicoder/tiny-design · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
import React from 'react';
import { Divider } from '@tiny-design/react';

export default function AlignTitleDemo() {
  return (
    <>
      <Divider titlePlacement="start">
        Account Summary
      </Divider>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti
        licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
      </p>
      <Divider>
        Recent Activity
      </Divider>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti
        licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
      </p>
      <Divider titlePlacement="end">
        Archived
      </Divider>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti
        licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
      </p>
    </>
  );
}