Sheet is an extension of the
Dialog component that allows you to create
temporary elements at the edges of the viewport instead of centered within the
page. Fixing a sheet to the
right sides of the page is useful for
creating permanent or temporary content such as navigation trees, additional
configuration, or filters. The
right behavior will automatically be
updated when the language is set to
dir="rtl" for you as well.
Sheet also supports being fixed to the
bottom of the viewport,
but this is more of a mobile feature that can be used to create action sheets.
Since mobile devices have less real estate than larger screens, it can be hard
to display dropdown menus in a nice way. Luckily, the @react-md/menu package supports a
menuRenderer which can allow you to switch to an action sheet on mobile
Sheet updates it size based on whether it is fixed to the
right viewport edges. Just for clarity, the
Sheet will call
bottom positions the
verticalSize and the
verticalSize support the following behavior:
"none"- the size is based on the content, but is still limited to the viewport height. There is no
"touch"- the size is based on the content, but is limited to the viewport height minus a small recommended "touchable" area that allows the user to close the sheet by clicking an overlay. There is no
"recommended"(default) - the recommended material design sizing that forces a
horizontalSize supports the following behavior:
"none"- the size is based on content, but is still limited to the viewport width so that the horizontal scrolling will not occur within the page.
min-widthis set to be the entire viewport width minus a touchable area and
max-widthis set to
20remand is normally recommended for mobile devices
"static"- the width is set to a static
16remand generally used for landscape tablets and desktops.
"media"(default) - automatically switches between
"large"once the tablet
min-widthis reached in media queries.