guide_en.md 2.2 KB
BottomSheet and Popup
In STDF's design philosophy, both BottomSheet and Popup are floating interactions within the interface, usually used for secondary operations within a page. There are some similarities in their use as components. However, the Popup is a "layer" concept, while the BottomSheet is a "window" concept.
As a pop-up layer, Popup should not involve complex interactions within it, and can be closed by default by clicking on the mask layer. The position, size, transition animation, direction and style of the pop-up can be customized through various parameters. Heavy on style, light on logic.
As a bottom sheet, BottomSheet can only pop up from the bottom. The "floating" nature of BottomSheet is reflected in its ability to control its fixed height by sliding within its header area. The difference between a "window" and a "layer" is that BottomSheet has its own header area, which can customize the header content, and dispatch events such as close, back, slide, etc., similar to the window interaction model. It can be used in relatively complex interaction scenarios and cannot be closed by clicking the mask layer by default. Heavy on logic, light on style.
Fixed Height
The height of BottomSheet is determined by stayHeightList, which is an array composed of multiple 0-100 positive integers. The display height of BottomSheet on the page is divided into several levels according to the percentage of the page height, and when the sliding stops, BottomSheet will automatically stay at the closest level of height. stayHeightIndex indicates the initial fixed height index, combined with stayHeightList to determine the initial height of BottomSheet.
Swipe to Close
When the percentage value of BottomSheet's position relative to the page height is less than closeHeight when the sliding ends, BottomSheet will automatically close. closeHeight defaults to 0, which means that it cannot be closed by sliding.
Events
BottomSheet supports listening for events such as close, back, and heightChange through events on-close, on-back, and on-height-change, and the clickMask event is triggered when the mask layer is clicked, even if maskClosable is set to false.