diff --git a/resources/views/docs/mobile/4/edge-components/bottom-sheet.md b/resources/views/docs/mobile/4/edge-components/bottom-sheet.md index 2a192834..62b0045a 100644 --- a/resources/views/docs/mobile/4/edge-components/bottom-sheet.md +++ b/resources/views/docs/mobile/4/edge-components/bottom-sheet.md @@ -38,6 +38,7 @@ Per Material 3, the container color resolves from `theme.surface`. For a custom - `medium` - `large` - `full` (100% of screen) + - `fit` (exactly as tall as the sheet's content, measured on the device and capped at `large`) - A numeric fraction `0.0`–`1.0` for a custom height (e.g. `"0.4"` for 40%) - `a11y-label` - Accessibility label (optional) - `a11y-hint` - Accessibility hint (optional) @@ -136,6 +137,39 @@ Accepts any EDGE elements as children. The children are rendered inside the shee ``` @endverbatim +### Fit to content + +Your PHP code doesn't know the screen's height, so a fraction can't size a sheet to its content. Use `fit` instead: +the sheet is measured on the device and opens exactly as tall as its content, capped at `large`. + +@verbatim +```blade +@php $showConfirm = false; @endphp + + + + + + + Delete this item? + This can't be undone. + + + + +``` +@endverbatim + +On iOS, `fit` combines with the other detents: `detents="fit,large"` opens at the content's height and drags up to +`large`. The sheet also follows its content's height when it changes. + + +