Skip to content

Commit a5edec7

Browse files
committed
update doc and jsdoc
1 parent 9c0fcf7 commit a5edec7

3 files changed

Lines changed: 26 additions & 19 deletions

File tree

docs/AppBar.md

Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -64,7 +64,6 @@ const App = () => (
6464

6565
| Prop | Required | Type | Default | Description |
6666
| ------------------- | -------- | -------------- | -------- | --------------------------------------------------- |
67-
| `alwaysOn` | Optional | `boolean` | - | When true, the app bar is always visible |
6867
| `children` | Optional | `ReactElement` | - | What to display in the central part of the app bar |
6968
| `color` | Optional | `string` | - | The background color of the app bar |
7069
| `sx` | Optional | `SxProps` | - | Style overrides, powered by MUI System |
@@ -73,17 +72,6 @@ const App = () => (
7372

7473
Additional props are passed to [the underlying MUI `<AppBar>` element](https://mui.com/material-ui/api/app-bar/).
7574

76-
## `alwaysOn`
77-
78-
By default, the app bar is hidden when the user scrolls down the page. This is useful to save space on small screens. But if you want to keep the app bar always visible, you can set the `alwaysOn` prop to `true`.
79-
80-
```jsx
81-
// in src/MyAppBar.js
82-
import { AppBar } from 'react-admin';
83-
84-
const MyAppBar = () => <AppBar alwaysOn />;
85-
```
86-
8775
## `children`
8876

8977
The `<AppBar>` component accepts a `children` prop, which is displayed in the central part of the app bar. This is useful to add buttons to the app bar, for instance, a light/dark theme switcher.

docs/Layout.md

Lines changed: 21 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -45,13 +45,15 @@ const App = () => (
4545

4646
## Props
4747

48-
| Prop | Required | Type | Default | Description |
49-
| ----------- | -------- | ----------- | -------- | --------------------------------------------------------------------- |
50-
| `appBar` | Optional | `Component` | - | A React component rendered at the top of the layout |
51-
| `className` | Optional | `string` | - | Passed to the root `<div>` component |
52-
| `error` | Optional | `Component` | - | A React component rendered in the content area in case of error |
53-
| `menu` | Optional | `Component` | - | A React component rendered at the side of the screen |
54-
| `sx` | Optional | `SxProps` | - | Style overrides, powered by MUI System |
48+
| Prop | Required | Type | Default | Description |
49+
| ---------------- | -------- | ----------- | -------- | ----------------------------------------------------------------------- |
50+
| `appBar` | Optional | `Component` | - | A React component rendered at the top of the layout |
51+
| `appBarAlwaysOn` | Optional | `boolean` | - | When true, the app bar is always visible |
52+
| `className` | Optional | `string` | - | Passed to the root `<div>` component |
53+
| `error` | Optional | `Component` | - | A React component rendered in the content area in case of error |
54+
| `menu` | Optional | `Component` | - | A React component rendered at the side of the screen |
55+
| `sidebar` | Optional | `Component` | - | A React component responsible for rendering the menu (e.g. in a drawer) |
56+
| `sx` | Optional | `SxProps` | - | Style overrides, powered by MUI System |
5557

5658
React-admin injects more props at runtime based on the `<Admin>` props:
5759

@@ -114,6 +116,18 @@ export const MyAppBar = () => (
114116

115117
Check out the [`<AppBar>` documentation](./AppBar.md) for more information, and for instructions on building your own AppBar.
116118

119+
## `appBarAlwaysOn`
120+
121+
By default, the app bar is hidden when the user scrolls down the page. This is useful to save space on small screens. But if you want to keep the app bar always visible, you can set the `appBarAlwaysOn` prop to `true`.
122+
123+
```jsx
124+
// in src/MyLayout.js
125+
import * as React from 'react';
126+
import { Layout } from 'react-admin';
127+
128+
export const MyLayout = (props) => <Layout {...props} appBarAlwaysOn />;
129+
```
130+
117131
## `className`
118132

119133
`className` is passed to the root `<div>` component. It lets you style the layout with CSS - but the `sx` prop is preferred.

packages/ra-ui-materialui/src/layout/AppBar.tsx

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,11 @@ AppBar.propTypes = {
126126
const DefaultUserMenu = <UserMenu />;
127127

128128
export interface AppBarProps extends Omit<MuiAppBarProps, 'title'> {
129+
/**
130+
* This prop is injected by Layout. You should not use it directly unless
131+
* you are using a custom layout.
132+
* If you are using the default layout, use `<Layout appBarAlwaysOn>` instead.
133+
*/
129134
alwaysOn?: boolean;
130135
container?: React.ElementType<any>;
131136
/**

0 commit comments

Comments
 (0)