forked from mui/mui-x
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[TreeView] Allow to customize the indentation of nested items (mui#13225
- Loading branch information
1 parent
d64827a
commit 8fea5f5
Showing
24 changed files
with
304 additions
and
10 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
36 changes: 36 additions & 0 deletions
36
docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
|
|
||
| import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; | ||
|
|
||
| const MUI_X_PRODUCTS = [ | ||
| { | ||
| id: 'grid', | ||
| label: 'Data Grid', | ||
| children: [ | ||
| { id: 'grid-community', label: '@mui/x-data-grid' }, | ||
| { id: 'grid-pro', label: '@mui/x-data-grid-pro' }, | ||
| { id: 'grid-premium', label: '@mui/x-data-grid-premium' }, | ||
| ], | ||
| }, | ||
| { | ||
| id: 'pickers', | ||
| label: 'Date and Time Pickers', | ||
| children: [ | ||
| { id: 'pickers-community', label: '@mui/x-date-pickers' }, | ||
| { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| export default function IndentationAtItemLevel() { | ||
| return ( | ||
| <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}> | ||
| <RichTreeView | ||
| items={MUI_X_PRODUCTS} | ||
| experimentalFeatures={{ indentationAtItemLevel: true }} | ||
| defaultExpandedItems={['grid']} | ||
| /> | ||
| </Box> | ||
| ); | ||
| } |
36 changes: 36 additions & 0 deletions
36
docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import { TreeViewBaseItem } from '@mui/x-tree-view/models'; | ||
| import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; | ||
|
|
||
| const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ | ||
| { | ||
| id: 'grid', | ||
| label: 'Data Grid', | ||
| children: [ | ||
| { id: 'grid-community', label: '@mui/x-data-grid' }, | ||
| { id: 'grid-pro', label: '@mui/x-data-grid-pro' }, | ||
| { id: 'grid-premium', label: '@mui/x-data-grid-premium' }, | ||
| ], | ||
| }, | ||
| { | ||
| id: 'pickers', | ||
| label: 'Date and Time Pickers', | ||
| children: [ | ||
| { id: 'pickers-community', label: '@mui/x-date-pickers' }, | ||
| { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| export default function IndentationAtItemLevel() { | ||
| return ( | ||
| <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}> | ||
| <RichTreeView | ||
| items={MUI_X_PRODUCTS} | ||
| experimentalFeatures={{ indentationAtItemLevel: true }} | ||
| defaultExpandedItems={['grid']} | ||
| /> | ||
| </Box> | ||
| ); | ||
| } |
5 changes: 5 additions & 0 deletions
5
docs/data/tree-view/tree-item-customization/IndentationAtItemLevel.tsx.preview
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <RichTreeView | ||
| items={MUI_X_PRODUCTS} | ||
| experimentalFeatures={{ indentationAtItemLevel: true }} | ||
| defaultExpandedItems={['grid']} | ||
| /> |
36 changes: 36 additions & 0 deletions
36
docs/data/tree-view/tree-item-customization/ItemChildrenIndentationProp.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
|
|
||
| import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; | ||
|
|
||
| const MUI_X_PRODUCTS = [ | ||
| { | ||
| id: 'grid', | ||
| label: 'Data Grid', | ||
| children: [ | ||
| { id: 'grid-community', label: '@mui/x-data-grid' }, | ||
| { id: 'grid-pro', label: '@mui/x-data-grid-pro' }, | ||
| { id: 'grid-premium', label: '@mui/x-data-grid-premium' }, | ||
| ], | ||
| }, | ||
| { | ||
| id: 'pickers', | ||
| label: 'Date and Time Pickers', | ||
| children: [ | ||
| { id: 'pickers-community', label: '@mui/x-date-pickers' }, | ||
| { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| export default function ItemChildrenIndentationProp() { | ||
| return ( | ||
| <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}> | ||
| <RichTreeView | ||
| items={MUI_X_PRODUCTS} | ||
| itemChildrenIndentation={24} | ||
| defaultExpandedItems={['grid']} | ||
| /> | ||
| </Box> | ||
| ); | ||
| } |
36 changes: 36 additions & 0 deletions
36
docs/data/tree-view/tree-item-customization/ItemChildrenIndentationProp.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,36 @@ | ||
| import * as React from 'react'; | ||
| import Box from '@mui/material/Box'; | ||
| import { TreeViewBaseItem } from '@mui/x-tree-view/models'; | ||
| import { RichTreeView } from '@mui/x-tree-view/RichTreeView'; | ||
|
|
||
| const MUI_X_PRODUCTS: TreeViewBaseItem[] = [ | ||
| { | ||
| id: 'grid', | ||
| label: 'Data Grid', | ||
| children: [ | ||
| { id: 'grid-community', label: '@mui/x-data-grid' }, | ||
| { id: 'grid-pro', label: '@mui/x-data-grid-pro' }, | ||
| { id: 'grid-premium', label: '@mui/x-data-grid-premium' }, | ||
| ], | ||
| }, | ||
| { | ||
| id: 'pickers', | ||
| label: 'Date and Time Pickers', | ||
| children: [ | ||
| { id: 'pickers-community', label: '@mui/x-date-pickers' }, | ||
| { id: 'pickers-pro', label: '@mui/x-date-pickers-pro' }, | ||
| ], | ||
| }, | ||
| ]; | ||
|
|
||
| export default function ItemChildrenIndentationProp() { | ||
| return ( | ||
| <Box sx={{ height: 220, flexGrow: 1, maxWidth: 400 }}> | ||
| <RichTreeView | ||
| items={MUI_X_PRODUCTS} | ||
| itemChildrenIndentation={24} | ||
| defaultExpandedItems={['grid']} | ||
| /> | ||
| </Box> | ||
| ); | ||
| } |
5 changes: 5 additions & 0 deletions
5
docs/data/tree-view/tree-item-customization/ItemChildrenIndentationProp.tsx.preview
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,5 @@ | ||
| <RichTreeView | ||
| items={MUI_X_PRODUCTS} | ||
| itemChildrenIndentation={24} | ||
| defaultExpandedItems={['grid']} | ||
| /> |
71 changes: 71 additions & 0 deletions
71
docs/data/tree-view/tree-item-customization/tree-item-customization.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,71 @@ | ||
| --- | ||
| productId: x-tree-view | ||
| title: Tree Item Customization | ||
| components: SimpleTreeView, RichTreeView, TreeItem, TreeItem2 | ||
| packageName: '@mui/x-tree-view' | ||
| githubLabel: 'component: tree view' | ||
| waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/treeview/ | ||
| --- | ||
|
|
||
| # Tree Item Customization | ||
|
|
||
| <p class="description">Learn how to customize the Tree Item component.</p> | ||
|
|
||
| ## Basics | ||
|
|
||
| ### Change nested item's indentation | ||
|
|
||
| Use the `itemChildrenIndentation` prop to change the indentation of the nested items. | ||
| By default, a nested item is indented by `12px` from its parent item. | ||
|
|
||
| {{"demo": "ItemChildrenIndentationProp.js"}} | ||
|
|
||
| :::success | ||
| This feature is compatible with both the `TreeItem` and `TreeItem2` components | ||
| If you are using a custom Tree Item component, and you want to override the padding, | ||
| then apply the following padding to your `groupTransition` element: | ||
|
|
||
| ```ts | ||
| const CustomTreeItem2GroupTransition = styled(TreeItem2GroupTransition)(({ theme }) => ({ | ||
| // ...other styles | ||
| paddingLeft: `var(--TreeView-itemChildrenIndentation)`, | ||
| } | ||
| ``` | ||
| If you are using the `indentationAtItemLevel` prop, then instead apply the following padding to your `content` element: | ||
| ```ts | ||
| const CustomTreeItem2Content = styled(TreeItem2Content)(({ theme }) => ({ | ||
| // ...other styles | ||
| paddingLeft: | ||
| `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`, | ||
| } | ||
| ``` | ||
| ::: | ||
| ### Apply the nested item's indentation at the item level | ||
| By default, the indentation of nested items is applied by the `groupTransition` slot of its parent (i.e.: the DOM element that wraps all the children of a given item). | ||
| This approach is not compatible with upcoming features like the reordering of items using drag & drop. | ||
| To apply the indentation at the item level (i.e.: have each item responsible for setting its own indentation using the `padding-left` CSS property on its `content` slot), | ||
| you can use the `indentationAtItemLevel` experimental feature. | ||
| It will become the default behavior in the next major version of the Tree View component. | ||
| {{"demo": "IndentationAtItemLevel.js"}} | ||
| :::success | ||
| This feature is compatible with both the `TreeItem` and `TreeItem2` components and with the `itemChildrenIndentation` prop. | ||
| If you are using a custom Tree Item component, and you want to override the padding, | ||
| then apply the following padding to your `content` element: | ||
| ```ts | ||
| const CustomTreeItem2Content = styled(TreeItem2Content)(({ theme }) => ({ | ||
| // ...other styles | ||
| paddingLeft: | ||
| `calc(${theme.spacing(1)} + var(--TreeView-itemChildrenIndentation) * var(--TreeView-itemDepth))`, | ||
| } | ||
| ``` | ||
| ::: |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import * as React from 'react'; | ||
| import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; | ||
| import * as pageProps from 'docsx/data/tree-view/tree-item-customization/tree-item-customization.md?muiMarkdown'; | ||
|
|
||
| export default function Page() { | ||
| return <MarkdownDocs {...pageProps} />; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.