2019-11-25 11:17:53 +00:00
|
|
|
# PageLayout
|
|
|
|
|
|
|
|
Default page layout
|
|
|
|
|
|
|
|
### Usage
|
|
|
|
|
|
|
|
```js
|
2021-02-25 21:19:45 +00:00
|
|
|
import PageLayout from "@appserver/common/components/PageLayout";
|
2019-11-25 11:17:53 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
```jsx
|
2020-10-16 12:56:35 +00:00
|
|
|
<PageLayout withBodyScroll={true}>
|
|
|
|
<PageLayout.ArticleHeader>{articleHeaderContent}</PageLayout.ArticleHeader>
|
|
|
|
|
|
|
|
<PageLayout.ArticleMainButton>
|
|
|
|
{articleMainButtonContent}
|
|
|
|
</PageLayout.ArticleMainButton>
|
|
|
|
|
|
|
|
<PageLayout.ArticleBody>{articleBodyContent}</PageLayout.ArticleBody>
|
|
|
|
|
|
|
|
<PageLayout.SectionHeader>{sectionHeaderContent}</PageLayout.SectionHeader>
|
|
|
|
|
|
|
|
<PageLayout.SectionFilter>{sectionFilterContent}</PageLayout.SectionFilter>
|
|
|
|
|
|
|
|
<PageLayout.SectionBody>{sectionBodyContent}</PageLayout.SectionBody>
|
|
|
|
|
|
|
|
<PageLayout.SectionPaging>{sectionPagingContent}</PageLayout.SectionPaging>
|
|
|
|
</PageLayout>
|
2019-11-25 11:17:53 +00:00
|
|
|
```
|
|
|
|
|
|
|
|
### Properties
|
|
|
|
|
2020-01-24 11:59:55 +00:00
|
|
|
| Props | Type | Required | Values | Default | Description |
|
|
|
|
| -------------------------- | :----: | :------: | :----: | :-----: | ----------------------------------------- |
|
|
|
|
| `articleHeaderContent` | `bool` | - | - | - | Article header content |
|
|
|
|
| `articleMainButtonContent` | `bool` | - | - | - | Article main button content |
|
|
|
|
| `articleBodyContent` | `bool` | - | - | - | Article body content |
|
|
|
|
| `sectionHeaderContent` | `bool` | - | - | - | Section header content |
|
|
|
|
| `sectionFilterContent` | `bool` | - | - | - | Section filter content |
|
|
|
|
| `sectionBodyContent` | `bool` | - | - | - | Section body content |
|
|
|
|
| `sectionPagingContent` | `bool` | - | - | - | Section paging content |
|
|
|
|
| `withBodyScroll` | `bool` | - | - | `true` | If you need display scroll inside content |
|
2020-10-16 12:38:04 +00:00
|
|
|
| `withBodyAutoFocus` | `bool` | - | - | `false` | If you need set focus on content element |
|