70 lines
2.5 KiB
Markdown
70 lines
2.5 KiB
Markdown
# RowContent
|
|
|
|
Required for formatted output of elements inside Row
|
|
|
|
### Usage
|
|
|
|
```js
|
|
import RowContent from "@docspace/components/row-content";
|
|
import SendClockReactSvg from "PUBLIC_DIR/images/send.clock.react.svg";
|
|
import CatalogSpamReactSvg from "PUBLIC_DIR/images/catalog.spam.react.svg";
|
|
```
|
|
|
|
```jsx
|
|
<RowContent>
|
|
<Link type="page" title="Demo" isBold={true} fontSize="15px" color="#333333">
|
|
Demo
|
|
</Link>
|
|
<>
|
|
<SendClockReactSvg size="small" isfill={true} color="#3B72A7" />
|
|
<CatalogSpamReactSvg size="small" isfill={true} color="#3B72A7" />
|
|
</>
|
|
<Link type="page" title="Demo" fontSize="12px" color="#A3A9AE">
|
|
Demo
|
|
</Link>
|
|
<Link
|
|
containerWidth="160px"
|
|
type="action"
|
|
title="Demo"
|
|
fontSize="12px"
|
|
color="#A3A9AE"
|
|
>
|
|
Demo
|
|
</Link>
|
|
<Link type="page" title="0 000 0000000" fontSize="12px" color="#A3A9AE">
|
|
0 000 0000000
|
|
</Link>
|
|
<Link
|
|
containerWidth="160px"
|
|
type="page"
|
|
title="demo@demo.com"
|
|
fontSize="12px"
|
|
color="#A3A9AE"
|
|
>
|
|
demo@demo.com
|
|
</Link>
|
|
</RowContent>
|
|
```
|
|
|
|
To correctly display components inside RowContent, you must specify them in a certain order.
|
|
|
|
The first and second specified components will be interpreted as Main elements.
|
|
First will be MainTitle and second MainIcons.
|
|
All subsequent components will be located on the right and are considered SideElements.
|
|
|
|
**_Consider location of components in advance, since when viewing in tablet mode, the markup will shift SideElements to second line._**
|
|
|
|
Each not main child can take containerWidth property for task of width of child's container.
|
|
|
|
### Properties
|
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
| ----------------- | :------------: | :------: | :----: | :-----: | -------------------------------------- |
|
|
| `children` | `node` | ✅ | - | - | Components displayed inside RowContent |
|
|
| `className` | `string` | - | - | - | Accepts class |
|
|
| `containerWidth` | `string` | - | - | `100px` | For task of width of child's container |
|
|
| `disableSideInfo` | `bool` | - | - | `false` | If you do not need SideElements |
|
|
| `id` | `string` | - | - | - | Accepts id |
|
|
| `sideColor` | `string` | - | - | - | Need for change side information color |
|
|
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|