i am building an app targeted to tablet devices,
basically the main layout is :
Where the central area have three columns: navigation, header list, items details.
I want to give the user the possibility to horizontal collapse the header list so then items details will expand.
Setting the prop orientation={'horizontal'}, it dont change the behaviour and keep collapsing in vertical.
Desired:
Reality:
Reading the code https://github.com/mui-org/material-ui/blob/cce45deec3125c1f0dd6c1c74616b5e63b027026/packages/material-ui/src/Collapse/Collapse.js
Show that orientation can be horizontal:
orientation: PropTypes.oneOf(['horizontal', 'vertical']),
Even there is a collapsedHeight, but not a collapsedWidth
function CollapsePanel(props) {
const [collapsed, setCollapse] = React.useState(true);//
//orientation: PropTypes.oneOf(['horizontal', 'vertical']),
return (
<Collapse in={collapsed} collapsedHeight={0} orientation={'horizontal'} >
<div style={{border:'5px solid blue',
display:"flex",flexDirection: "column", alignItems:"center",
minWidth:'180px', alignItems:"stretch", height:'calc(100vh - 40px)',}} >
<IconButton onClick={ ()=>setCollapse(!collapsed)}><ChevronLeftIcon/> Collapse</IconButton>
<div style={{display:"flex",flexDirection: "column", alignItems:"center", justifyContent: "space-around", flexGrow:'1', }} >
Headers List
</div>
</div>
</Collapse>
)
};
The package version is: npm list --depth=0
@material-ui/core@4.11.3
What am i doing wrong?