Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[Doc] Add <SolarLayout> component #9282

Merged
merged 4 commits into from
Sep 18, 2023
Merged

[Doc] Add <SolarLayout> component #9282

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1876ae0
Add SolarLayout chapter
fzaninotto Sep 15, 2023
05c462a
Add illustration about possible layouts, and links from other chapters
fzaninotto Sep 15, 2023
e7b1582
Fix layout comparison doesn't show that containerlayout is centered
fzaninotto Sep 15, 2023
8937b0d
Apply suggestions from code review
fzaninotto Sep 18, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 25 additions & 1 deletion docs/Admin.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -534,8 +534,32 @@ If you want to deeply customize the app header, the menu, or the notifications,

React-admin offers predefined layouts for you to use:

<figure>
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

image maps aren't responsive, so using svg is the only way to make parts of an image clickable.

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1177 290" preserveAspectRatio="xMinYMin meet">
<image width="1177" height="290" xlink:href="./img/layouts.png" />
<g opacity="0">
<a href="./Layout.html" aria-label="Layout">
<rect x="0" y="0" width="348" height="290"/>
</a>
</g>
<g opacity="0">
<a href="./ContainerLayout.html" aria-label="ContainerLayout">
<rect x="373" y="0" width="408" height="290"/>
</a>
</g>
<g opacity="0">
<a href="./SolarLayout.html" aria-label="SolarLayout">
<rect x="801" y="0" width="376" height="290"/>
</a>
</g>
</svg>
</figure>

- [`<Layout>`](./Layout.md): The default layout. It renders a top app bar and the navigation menu in a side bar.
- [`<ContainerLayout>`](./ContainerLayout.md): A centered layout with horizontal navigation.
- [`<ContainerLayout>`](./ContainerLayout.md) is centered layout with horizontal navigation.
- [`<SolarLayout>`](./SolarLayout.md) is a layout with a small icon sidebar, no top bar, and a full-width content area.

For instance, here is how to replace the default `Layout` with the `ContainerLayout`:

```tsx
import { Admin } from 'react-admin';
Expand Down
53 changes: 47 additions & 6 deletions docs/ContainerLayout.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,14 @@ layout: default
title: "ContainerLayout"
---

# ContainerLayout
# `<ContainerLayout>`

This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> component offers an alternative to react-admin's `<Layout>` for applications with a limited number of resources. It replaces the sidebar menu by an AppBar menu, and displays the content in a centered container.
This [Enterprise Edition](https://marmelab.com/ra-enterprise)<img class="icon" src="./img/premium.svg" /> component offers an alternative to react-admin's `<Layout>` for applications with a limited number of resources. It displays the content in a centered container, has no sidebar, and uses the top bar for navigation.

![Container layout](https://marmelab.com/ra-enterprise/modules/assets/ra-navigation/latest/container-layout.png)

`<ContainerLayout>` is part of the [ra-navigation](https://marmelab.com/ra-enterprise/modules/ra-navigation#containerlayout) package.

## Usage

Set `<ContainerLayout>` as the `<Admin layout>` value:
Expand All @@ -25,8 +27,6 @@ export const App = () => (
);
```

See more details in the [ra-navigation documentation](https://marmelab.com/ra-enterprise/modules/ra-navigation#containerlayout).

## Props

`<ContainerLayout>` accepts the following props, all optional:
Expand Down Expand Up @@ -72,7 +72,7 @@ const MyLayout = props => <ContainerLayout {...props} maxWidth="md" />;

## `menu`

By default, `<ContainerLayout>` renders one menu item per resource in the admin. To reorder the menu, omit resources, or add custom pages, pass a custom menu element to the `menu` prop. This element should be [a `<HorizontalMenu>` component](./HorizontalMenu.md) with `<HorizontalMenu.Item>` children. Each child should have a `value` corresponding to the [application location](https://marmelab.com/ra-enterprise/modules/ra-navigation#concepts) of the target, and can have a `to` prop corresponding to the target location if different from the app location.
By default, `<ContainerLayout>` renders one menu item per resource in the admin. To reorder the menu, omit resources, or add custom pages, pass a custom menu element to the `menu` prop. This element should be [a `<HorizontalMenu>` component](#horizontalmenu) with `<HorizontalMenu.Item>` children. Each child should have a `value` corresponding to the [application location](https://marmelab.com/ra-enterprise/modules/ra-navigation#concepts) of the target, and can have a `to` prop corresponding to the target location if different from the app location.

```jsx
import {
Expand Down Expand Up @@ -199,4 +199,45 @@ export const MyLayout = props => (
<ContainerLayout {...props} userMenu={<CustomUserMenu />} />
);
```
{% endraw %}
{% endraw %}

## `<HorizontalMenu>`

This component renders a horizontal menu, to be used in the AppBar of the [`<ContainerLayout>`](#containerLayout).

![Container layout](./img/HorizontalMenu.png)

This menu automatically detects and highlights the current location.

### Usage

Create a menu component based on `<HorizontalMenu>` and `<HorizontalMenu.Item>` children. Each child should have a `value` corresponding to the [application location](https://marmelab.com/ra-enterprise/modules/ra-navigation#concepts) of the target, and can have a `to` prop corresponding to the target location if different from the app location.

```jsx
import { HorizontalMenu } from '@react-admin/ra-navigation';

export const Menu = () => (
<HorizontalMenu>
<HorizontalMenu.Item label="Dashboard" to="/" value="" />
<HorizontalMenu.Item label="Songs" to="/songs" value="songs" />
<HorizontalMenu.Item label="Artists" to="/artists" value="artists" />
</HorizontalMenu>
);
```

Then pass this custom menu to the `<ContainerLayout menu>` prop:

```jsx
import { Admin, Resource } from 'react-admin';
import { ContainerLayout } from '@react-admin/ra-navigation';

import { Menu } from './Menu';

const MyLayout = props => <ContainerLayout {...props} menu={<Menu />} />;

const App = () => (
<Admin dataProvider={dataProvider} layout={MyLayout}>
...
</Admin>
);
```
46 changes: 0 additions & 46 deletions docs/HorizontalMenu.md
View file
Open in desktop

This file was deleted.

26 changes: 23 additions & 3 deletions docs/Layout.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -415,9 +415,29 @@ export const MyLayout = (props) => (

If you can't configure `<Layout>` to render the layout you want, you can use an alternative layout component:

- [`<ContainerLayout>`](./ContainerLayout.md): A centered layout with horizontal navigation.

![Container layout](https://marmelab.com/ra-enterprise/modules/assets/ra-navigation/latest/container-layout.png)
- [`<ContainerLayout>`](./ContainerLayout.md) is centered layout with horizontal navigation.
- [`<SolarLayout>`](./SolarLayout.md) is a layout with a small icon sidebar, no top bar, and a full-width content area.

<figure>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1177 290" preserveAspectRatio="xMinYMin meet">
<image width="1177" height="290" xlink:href="./img/layouts.png" />
<g opacity="0">
<a href="./Layout.html" aria-label="Layout">
<rect x="0" y="0" width="348" height="290"/>
</a>
</g>
<g opacity="0">
<a href="./ContainerLayout.html" aria-label="ContainerLayout">
<rect x="373" y="0" width="408" height="290"/>
</a>
</g>
<g opacity="0">
<a href="./SolarLayout.html" aria-label="SolarLayout">
<rect x="801" y="0" width="376" height="290"/>
</a>
</g>
</svg>
</figure>

You can also write your own layout component from scratch (see below).

Expand Down
2 changes: 2 additions & 0 deletions docs/RecordRepresentation.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,8 @@ layout: default
title: "The RecordRepresentation Component"
---

# `<RecordRepresentation>`

Render the record representation, leveraging the [`recordRepresentation`](./Resource.md#recordrepresentation) prop of the parent `<Resource>` component.

You can also use its hook version: [`<useGetRecordRepresentation>`](./useGetRecordRepresentation.md).
Expand Down
5 changes: 4 additions & 1 deletion docs/Reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -82,7 +82,7 @@ title: "Index"
* [`<FunctionField>`](./FunctionField.md)

**- H -**
* [`<HorizontalMenu>`](./HorizontalMenu.md)<img class="icon" src="./img/premium.svg" />
* [`<HorizontalMenu>`](./ContainerLayout.md#horizontalmenu)<img class="icon" src="./img/premium.svg" />

**- I -**
* [`<IfCanAccess>`](./IfCanAccess.md)<img class="icon" src="./img/premium.svg" />
Expand Down Expand Up @@ -166,6 +166,9 @@ title: "Index"
* [`<SimpleShowLayout>`](./SimpleShowLayout.md)
* [`<SingleFieldList>`](./SingleFieldList.md)
* [`<SmartRichTextInput>`](./SmartRichTextInput.md)<img class="icon" src="./img/premium.svg" />
* [`<SolarLayout>`](./SolarLayout.md)<img class="icon" src="./img/premium.svg" />
* [`<SolarMenu>`](./SolarLayout.md#solarmenu)<img class="icon" src="./img/premium.svg" />
* [`<SolarAppBar>`](./SolarLayout.md#solarappbar)<img class="icon" src="./img/premium.svg" />
* [`<SortButton>`](./SortButton.md)
* [`<StackedFilters>`](./StackedFilters.md)<img class="icon" src="./img/premium.svg" />

Expand Down
Loading