3pp-mirror/docusaurus
1
0
Fork 0
mirror of https://github.com/facebook/docusaurus.git synced 2025-05-29 17:07:08 +02:00
Code Issues Projects Releases Packages Wiki Activity

Document className prop of GridBlock (#536)

Browse source
This commit is contained in:
Yangshun Tay 2018-04-08 19:37:38 -07:00 • committed by Joel Marcey
parent fc051acde5
commit 90d8e17158
1 changed files with 17 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

26
docs/api-pages.md
View file

@ -36,15 +36,20 @@ const MarkdownBlock = CompLibrary.MarkdownBlock;
### `CompLibrary.Container`
A React container component using Docusaurus styles. Has optional padding and background color attributes that you can configure.
A React container component using Docusaurus styles. Has optional padding and background color props that you can configure.
Padding choices: `all`, `bottom`, `left`, `right`, `top`.
Background choices: `dark`, `highlight`, `light`.
Padding choices: `'all'`, `'bottom'`, `'left'`, `'right'`, `'top'`.
Background choices: `'dark'`, `'highlight'`, `'light'`.
The `className` prop is an optional prop that allows you to your own class names to the `Container` instance. It works like the `className` attribute in JSX. You can use this class name to customize the styling of contents within this `Container`.
Example:
```jsx
<Container padding={["bottom", "top"]} background="light">
<Container
padding={["bottom", "top"]}
background="light"
className="myCustomClass">
...
</Container>
```
@ -53,15 +58,17 @@ Example:
A React component to organize text and images.
The `align` attribute determines text alignment. Text alignment defaults to `left` and can be set to `center` or `right`.
The `align` prop determines text alignment. Text alignment defaults to `'left'` and can be set to `'center'` or `'right'`.
The `layout` attribute determines number of column sections per GridBlock. `layout` defaults to `twoColumn` and can be set to `threeColumn` or `fourColumn` as well.
The `layout` prop determines number of column sections per GridBlock. `layout` defaults to `'twoColumn'` and can be set to `'threeColumn'` or `'fourColumn'` as well.
The `contents` attribute is an array containing the contents of each section of the GridBlock. Each content object can have the following fields:
The `className` prop is an optional prop that allows you to your own class names to the `GridBlock` instance. It works like the `className` attribute in JSX. You can use this class name to customize the styling of contents within this `GridBlock`.
The `contents` prop is an array containing the contents of each section of the GridBlock. Each content object can have the following fields:
- `content` for the text of this section, which is parsed from markdown
- `image` for the path to an image to display
- `imageAlign` field for image alignment relative to the text, which defaults to `top` and can be set to `bottom`, `left`, or `right`
- `imageAlign` field for image alignment relative to the text, which defaults to `'top'` and can be set to `'bottom'`, `'left'`, or `'right'`
- `title` for the title to display for this section, which is parsed from markdown
- `imageLink` for a link destination from clicking the image
- `imageAlt` for the description of what text will be shown in case the image is not available
@ -71,6 +78,8 @@ Example:
```
<GridBlock
align="center"
layout="threeColumn"
className="myCustomClass"
contents={[
{
content: "Learn how to use this project",
@ -90,7 +99,6 @@ Example:
title: "More"
}
]}
layout="threeColumn"
/>
```