
If the modal is using ion-title, the text inside can be used to label the modal itself by setting aria-labelledby on ion-modal. As a result, developers must properly label their modals. A common use case is a sheet modal that overlays a map where the map is interactive until the sheet is fully expanded. This is useful when creating interfaces that have content underneath the sheet that should remain interactive. The backdropBreakpoint property can be used to customize the point at which the ion-backdrop will begin to fade in. An initialBreakpoint value of 0.25 would not be valid as 0.25 does not exist in the breakpoints array. Given a breakpoints value of, an initialBreakpoint value of 0.5 would be valid as 0.5 is in the breakpoints array. The initialBreakpoint value must also exist in the breakpoints array. The initialBreakpoint property is required so that the sheet modal knows which breakpoint to start at when presenting. Note that the modal cannot be dismissed on swipe if no 0 breakpoint is included, but it can still be dismissed by pressing Esc or the hardware back button. When the modal is swiped to 0%, the modal will be automatically dismissed. A breakpoints property of would indicate that the sheet can be swiped to show 0% of the modal, 50% of the modal, and 100% of the modal. The breakpoints property accepts an array which states each breakpoint that the sheet can snap to when swiped. To create a sheet modal, developers need to set the breakpoints and initialBreakpoint properties on ion-modal. Developers can create a sheet modal effect similar to the drawer components available in maps applications.
