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

[Docs] Improve docs Reference section #5864

Merged
merged 7 commits into from
Feb 5, 2021
+19 −16
Merged

[Docs] Improve docs Reference section #5864

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
1b4fa60
Remove duplicated entry
Feb 4, 2021
f0356ca
Added Aside component reference
Feb 4, 2021
1ffb98c
Added DatagridRow entry
Feb 4, 2021
8a4b140
Added missing references entries
Feb 4, 2021
a96ae3a
Added ListButton anchor and reference
Feb 4, 2021
7515f67
Re-order reference alphabetically
Feb 4, 2021
93c4dc3
Improve sub-title
Feb 4, 2021
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
4 changes: 3 additions & 1 deletion docs/CreateEdit.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -171,6 +171,8 @@ export const PostEdit = (props) => (
);
```

### The `<ListButton>` component

A common customization is to add a button to go back to the List. Use the `<ListButton>` for that:

```jsx
Expand All @@ -184,7 +186,7 @@ const PostEditActions = ({ basePath, data }) => (
);
```

If you want this button to look like a Back button, you can pass a custom label and icon to the ListButton:
If you want this button to look like a Back button, you can pass a custom label and icon to the `ListButton`:

```jsx
import ChevronLeft from '@material-ui/icons/ChevronLeft';
Expand Down
29 changes: 15 additions & 14 deletions docs/Reference.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,13 @@ title: "Reference"
<div style="column-count:3" markdown="1">

* [`<AccordionForm>`](https://marmelab.com/ra-enterprise/modules/ra-form-layout#accordionform)<img class="icon" src="./img/premium.svg" />
* `<Actions>`
* [`<Actions>`](./CreateEdit.md#actions)
* [`<Admin>`](./Admin.md)
* `<AdminRoutes>`
* [`<AppBar>`](./Theming.md#customizing-the-appbar-content)
* [`<ArrayField>`](./Fields.md#arrayfield)
* [`<ArrayInput>`](./Inputs.md#arrayinput)
* [`<Aside>`](./CreateEdit.md#aside-component)
* [`<Authenticated>`](./Authentication.md#useauthenticated-hook)
* [`<AutocompleteArrayInput>`](./Inputs.md#autocompletearrayinput)
* [`<AutocompleteInput>`](./Inputs.md#autocompleteinput)
Expand All @@ -26,7 +27,7 @@ title: "Reference"
* [`<Calendar>`](https://marmelab.com/ra-enterprise/modules/ra-calendar#calendar)<img class="icon" src="./img/premium.svg" />
* [`<CheckboxGroupInput>`](./Inputs.md#checkboxgroupinput)
* [`<ChipField>`](./Fields.md#chipfield)
* `<CloneButton>`
* [`<CloneButton>`](./CreateEdit.md#prefilling-a-create-record)
* [`<CompleteCalendar>`](https://marmelab.com/ra-enterprise/modules/ra-calendar#completecalendar)<img class="icon" src="./img/premium.svg" />
* `<Confirm>`
* [`<Create>`](./CreateEdit.md#the-create-and-edit-components)
Expand All @@ -35,7 +36,8 @@ title: "Reference"
* [`<CreateDialog>`](https://marmelab.com/ra-enterprise/modules/ra-form-layout#createdialog--editdialog)<img class="icon" src="./img/premium.svg" />
* `<DashboardMenuItem>`
* [`<Datagrid>`](./List.md#the-datagrid-component)
* `<DatagridBody>`
* [`<DatagridBody>`](./List.md#body-element)
* [`<DatagridRow>`](./List.md#body-element)
* `<DatagridCell>`
* `<DatagridHeaderCell>`
* [`<DateField>`](./Fields.md#datefield)
Expand All @@ -53,8 +55,8 @@ title: "Reference"
* [`<FileField>`](./Fields.md#filefield)
* [`<FileInput>`](./Inputs.md#fileinput)
* [`<Filter>`](./List.md#filters-filter-inputs)
* `<FilterButton>`
* `<FilterForm>`
* [`<FilterButton>`](./List.md#custom-filter-button)
* [`<FilterForm>`](./List.md#custom-form-component)
* [`<FilterList>`](./List.md#the-filterlist-sidebar)
* [`<FilterListItem>`](./List.md#the-filterlist-sidebar)
* [`<FilterLiveSearch>`](./List.md#live-search)
Expand All @@ -65,21 +67,22 @@ title: "Reference"
* [`<ImageField>`](./Fields.md#imagefield)
* [`<ImageInput>`](./Inputs.md#imageinput)
* [`<ImageInputPreview>`](./Inputs.md#imageinput)
* `<Labeled>`
* [`<Labeled>`](./Inputs.md#using-labeled)
* [`<LanguageSwitcher>`](https://marmelab.com/ra-enterprise/modules/ra-preferences#languageswitcher-store-the-locale-in-preferences)<img class="icon" src="./img/premium.svg" />
* [`<Layout>`](./Theming.md#using-a-custom-layout)
* [`<Loading>`](./Theming.md#Loading)
* [`<Logout>`](./Theming.md#using-a-custom-logout-button)
* [`linkToRecord`](./Fields.md#linking-to-other-records)
* [`<List>`](./List.md#the-list-component)
* [`<ListBase>`](./List.md#the-listbase-component)
* [`<ListGuesser>`](./List.md#the-listguesser-component)
* `<ListButton>`
* [`<ListButton>`](./CreateEdit.md#the-listbutton-component)
* [`<MarkdownField>`](https://marmelab.com/ra-enterprise/modules/ra-markdown#markdownfield)<img class="icon" src="./img/premium.svg" />
* [`<MarkdownInput>`](https://marmelab.com/ra-enterprise/modules/ra-markdown#markdowninput)<img class="icon" src="./img/premium.svg" />
* [`<Menu>`](./Theming.md#using-a-custom-menu)
* [`<MultiLevelMenu>`](https://marmelab.com/ra-enterprise/modules/ra-navigation#multilevelmenu-replacing-the-default-menu-by-a-multi-level-one)<img class="icon" src="./img/premium.svg" />
* [`<Mutation>`](./Actions.md#legacy-components-query-mutation-and-withdataprovider)
* `<Notification>`
* [`<Notification>`](./Theming.md#notifications)
* [`<NullableBooleanInput>`](./Inputs.md#booleaninput-and-nullablebooleaninput)
* [`<NumberField>`](./Fields.md#numberfield)
* [`<NumberInput>`](./Inputs.md#numberinput)
Expand Down Expand Up @@ -107,17 +110,16 @@ title: "Reference"
* `<SaveButton>`
* [`<SavedFilterList>`](https://marmelab.com/ra-enterprise/modules/ra-preferences#savedquerieslist-and-filterwithsave-store-user-queries-in-preferences)<img class="icon" src="./img/premium.svg" />
* [`<Search>`](https://marmelab.com/ra-enterprise/modules/ra-search#the-search-component)<img class="icon" src="./img/premium.svg" />
* `<SearchInput>`
* [`<SearchInput>`](./List.md#full-text-search)
* [`<SelectArrayInput>`](./Inputs.md#selectarrayinput)
* [`<SelectColumnsButton>`](https://marmelab.com/ra-enterprise/modules/ra-preferences#selectcolumnsbutton-store-datagrid-columns-in-preferences)<img class="icon" src="./img/premium.svg" />
* [`<SelectField>`](./Fields.md#selectfield)
* [`<SelectInput>`](./Inputs.md#selectinput)
* [`<Show>`](./Show.md#the-show-component)
* [`<ShowGuesser`](./Show.md#the-showguesser-component)
* `<ShowButton>`
* `<Sidebar>`
* [`<Sidebar>`](./Theming.md#sidebar-customization)
* [`<SidebarOpenPreferenceSync>`](https://marmelab.com/ra-enterprise/modules/ra-preferences#sidebaropenpreferencesync-store-the-sidebar-openclose-state-in-preferences)<img class="icon" src="./img/premium.svg" />
* `<SimpleList>`
* [`<SimpleForm>`](./CreateEdit.md#the-simpleform-component)
* [`<SimpleFormIterator>`](./Inputs.md#arrayinput)
* [`<SimpleList>`](./List.md#the-simplelist-component)
Expand All @@ -136,11 +138,10 @@ title: "Reference"
* [`<Tree>`](https://marmelab.com/ra-enterprise/modules/ra-tree#tree-component)<img class="icon" src="./img/premium.svg" />
* [`<TreeWithDetails>`](https://marmelab.com/ra-enterprise/modules/ra-tree#treewithdetails-component)<img class="icon" src="./img/premium.svg" />
* [`translate`](./Translation.md#withtranslate-hoc)
* `<Toolbar>`
* [`<Toolbar>`](./CreateEdit.md#toolbar)
* `<TopToolbar>`
* [`<UrlField>`](./Fields.md#urlfield)
* [`<WizardForm>`](https://marmelab.com/ra-enterprise/modules/ra-form-layout#wizardform)<img class="icon" src="./img/premium.svg" />
* [`linkToRecord`](./Fields.md#linking-to-other-records)
* [`useAppLocationState`](https://marmelab.com/ra-enterprise/modules/ra-navigation#useapplocationstate-retrieve-and-define-app-location)<img class="icon" src="./img/premium.svg" />
* [`useAppLocationMatcher`](https://marmelab.com/ra-enterprise/modules/ra-navigation#useapplocationmatcher-apply-a-matching-on-the-current-app-location)<img class="icon" src="./img/premium.svg" />
* [`useAuthenticated`](./Authentication.md#useauthenticated-hook)
Expand All @@ -165,7 +166,7 @@ title: "Reference"
* [`useGetPermissions`](./Authentication.md#usegetpermissions-hook)
* [`useHasLock`](https://marmelab.com/ra-enterprise/modules/ra-realtime#locks-on-content)<img class="icon" src="./img/premium.svg" />
* [`useHasLocks`](https://marmelab.com/ra-enterprise/modules/ra-realtime#locks-on-content)<img class="icon" src="./img/premium.svg" />
* `useInput`
* [`useInput`](./Inputs.md#the-useinput-hook)
* [`useListContext`](./List.md#uselistcontext)
* [`useListController`](./List.md#uselistcontroller)
* `useListParams`
Expand Down
2 changes: 1 addition & 1 deletion docs/Theming.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -232,7 +232,7 @@ export const PostList = (props) => (

If you want to read more about higher-order components, check out this SitePoint tutorial: [Higher Order Components: A React Application Design Pattern](https://www.sitepoint.com/react-higher-order-components/)

## useMediaQuery Hook
## `useMediaQuery` Hook

To provide an optimized experience on mobile, tablet, and desktop devices, you often need to display different components depending on the screen size. Material-ui provides a hook dedicated to help such responsive layouts: [useMediaQuery](https://material-ui.com/components/use-media-query/#usemediaquery).

Expand Down