[Collapse] Support anchoring content to the bottom/right
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
Summary
Would like to be able to anchor the collapsed content to the bottom of to container. The effect can be achieved by adding following styles to the Collapse but it would be nice to have a prop that can handle this:
sx={{
display: "flex",
flexDirection: "column-reverse",
}}
Perhaps the direction prop can even be expanded to account for this use-case. If not accepted, perhaps this use-case could be added to the docs?
Examples
Here's a codesandbox that displays the desired behavior: https://codesandbox.io/p/sandbox/lucid-heyrovsky-wrjrnp?file=%2Fsrc%2FDemo.tsx%3A47%2C45
https://github.com/user-attachments/assets/9e8f89dc-5d60-4ee6-80f0-ddd286fe6a8a
Motivation
I struggled a bit with this when building Toolpad component catalog, which feels better when it looks like the drawer is pulled from under the left edge, rather than it being already in place and revealed gradually. Now I'm running into it again with another component.
https://github.com/user-attachments/assets/0398c9c8-7fb3-42df-a94f-ecd53b223b31
vs.
https://github.com/user-attachments/assets/5aa03937-8810-4541-b021-af2caea3d114
Search keywords: collapse reverse
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.