You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: packages/react-core/src/components/Compass/examples/Compass.md
+13-18Lines changed: 13 additions & 18 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -12,7 +12,8 @@ propComponents:
12
12
'CompassHero',
13
13
'CompassMainHeader',
14
14
'CompassPanel',
15
-
'CompassMessageBar'
15
+
'CompassMessageBar',
16
+
'CompassMainFooter'
16
17
]
17
18
---
18
19
@@ -28,47 +29,41 @@ import './compass.css';
28
29
29
30
### Basic
30
31
31
-
In a basic compass layout, content can be passed to the following props to populate areas of the page:
32
+
In a basic Compass layout, content can be passed to the following props to populate different areas of the page:
32
33
33
-
-`header`: content rendered in the top of the page. This will typically be a `CompassHeader` component to break the header into 3 areas consisting of a logo or brand, middle navigation, and profile.
34
-
-`sidebarStart`: content rendered in the left side or start side of the page
35
-
-`main`: content rendered in the center of the page. This will typically consist of a `CompassMainHeader` or `CompassHero`, along with a `CompassContent` filled with one or more `CompassPanel` components.
36
-
-`sidebarEnd`: content rendered in the right side or end side of the page
37
-
-`footer`: content rendered in the bottom of the page
34
+
-`header`: Content rendered at the top of the page, typically including a `<CompassHeader>` component that divides the header into 3 areas, with a logo or brand, middle navigation, and profile.
35
+
-`sidebarStart`: Content rendered at the horizontal start of the page (by default, the left side).
36
+
-`main`: Content rendered in the center of the page, typically including a `<CompassMainHeader>` or `<CompassHero>`, along with a `<CompassContent>` filled with 1 or more `<CompassPanel>` components.
37
+
-`sidebarEnd`: Content rendered at the horizontal end of the page (by default, the right side).
38
+
-`footer`: Content rendered at the bottom of the page.
38
39
39
-
The background image of the `Compass` and `CompassHero` may be customized by using their respective `backgroundSrcLight` and `backgroundSrcDark` props. The `CompassHero` also allows customization of a color gradient across its container by using the `gradientLight` and `gradientDark` props.
40
+
To customize the background image of the `<Compass>` and `<CompassHero>` components, you can use their respective `backgroundSrcLight` and `backgroundSrcDark` props. You can also add and customize a color gradient background for the `<CompassHero>` component by using the `gradientLight` and `gradientDark` props.
40
41
41
42
```ts isBeta file="CompassBasic.tsx"
42
43
43
44
```
44
45
45
46
### With alternate footer
46
47
47
-
When `footer` is used, its content will take up the width of the screen. However, if content inside of the footer grows, then the two sidebars' heights and placement will adjust to allow for the change. If this is not the desired behavior, then using a `CompassMainFooter` inside of the of the `main` section provides an alterate way to render footer content without interfering with the sidebars, by rendering content at the bottom of the page between the two sidebars opposed to the whole bottom of the page.
48
+
When `footer` is used, its content will fill the width of the screen. By default, when content inside the footer grows, the height and placement of the start and end sidebars will adjust to allow for the change. To modify this behavior and render footer content without interfering with the sidebars, instead place a `<CompassMainFooter>` inside the `main` section. This will render content at the bottom of the page between the 2 sidebars, rather than across the entire bottom of the page.
48
49
49
50
```ts file="CompassMainFooterDemo.tsx"
50
51
51
52
```
52
53
53
-
### Demo
54
-
55
-
```ts isFullscreen isBeta file="CompassDemo.tsx"
56
-
57
-
```
58
-
59
54
## Composable structure
60
55
61
-
When building a more custom implementation using Compass components, there are some intended or expected structures that must be present.
56
+
When building a more custom implementation with Compass components, there are some intended or expected structures that must remain present.
62
57
63
58
### CompassMainHeader structure
64
59
65
-
When using the `children` property in the `<CompassMainHeader>` component, you should ensure that the expected sub-components are used. The following code block shows a general structure to follow.
60
+
When using the `children` property in the `<CompassMainHeader>` component, there are specific structural patterns that you should follow, as shown this general code structure.
66
61
67
62
```noLive
68
63
<CompassMainHeader>
69
64
<CompassPanel>
70
65
<CompassMainHeaderContent>
71
-
{Your custom content goes here, which can include the CompassMainHeaderTitle and/or CompassMainHeaderToolbar sub-components}
66
+
{Your custom content goes here, which can include the <CompassMainHeaderTitle> and/or <CompassMainHeaderToolbar> sub-components}
0 commit comments