docs: 增加 drawer、message、notification、popu等组件英文文档 (#1235)

Co-authored-by: James <[email protected]>

docs/web/api/drawer.en-US.md

@@ -0,0 +1,69 @@
+---
+
+title: Drawer
+description:Drawers are often opened by clicking on adjacent button controls, floating panels that slide in from the edge of the screen, also known as half-screen pop-ups.
+isComponent: true
+usage: { title: '', description: '' }
+spline: message
+
+---
+
+### Visible Drawers
+
+Carrying the informational content of the presentation. Drawers can be used to increase page scalability when page space is limited.
+
+{{ base }}
+
+### Operable Drawer
+
+The operation drawer carries the forms to be edited or operated in the drawer, and can be used when the user needs to operate.
+
+{{ operation }}
+
+### Drawers with no hidden layer
+
+By setting `showOverlay`, you can control whether to display the drawer overlay.
+
+{{ no-mask }}
+
+### Drawers in Different Positions
+
+With `placement`, the drawer can be displayed in different positions.
+
+{{ placement }}
+
+### Drawers of different size
+
+The width of the drawer display is controlled by the `size` attribute.
+
+{{ size }}
+
+### Customizing the Top and Bottom Drawers
+
+You can adjust the contents at the top and bottom of the drawer by using `header` and `footer`.
+
+{{ custom }}
+
+### Eject Mode Drawer
+
+Drawers can be displayed by covering or pushing the content area. For the `push` mode of the entire page,`attach` needs to be set to body. (The drawer component is mounted by default to the location of the element itself).
+
+{{ popup }}
+
+### Rendering and rendering in the drawer of the current parent element
+
+The `showInAttachedElement` attribute is used to specify the parent container element of the drawer. The parent element must have a positioning attribute, for example:position: relative。
+
+{{ attach-parent }}
+
+### Destroy drawer when closing
+
+You can use `destroyOnClose` to destroy a drawer from a page node when closing it.
+
+{{ destroy }}
+
+### Draggable Drawers
+
+With `sizeDraggable`, you can drag and drop the edge of the drawer to change the size of the drawer.
+
+{{ size-draggable }}

docs/web/api/message.en-US.md

@@ -0,0 +1,16 @@
+---
+title: Message global prompt description:Provide lightweight global feedback on user actions.
+isComponent: true
+usage: { title: '', description: '' }
+spline: message
+---
+
+### General Global Prompt
+
+Use concise text to describe the action feedback. General global prompts include: general information, success information, warning information, error information, help information, and loading.
+
+{{ base }}
+
+### Prompt for Loading Information
+
+{{ loading }}

docs/web/api/notification.en-US.md

@@ -0,0 +1,36 @@
+---
+title: Notification Message Notification description:A lightweight global message prompt and confirmation mechanism that requires slow animation when appearing and disappearing.
+isComponent: true
+usage: { title: '', description: '' }
+spline: message
+---
+
+### Basic Message Notification
+
+Basic message notification, which can be manually closed or automatically exited.
+
+{{ base }}
+
+### Message Notification with Icon
+
+Message notifications with icons provide two scenarios:General and important message notifications (e.g.:system error, etc.).
+
+{{ icon }}
+
+### Message Notification with Operation
+
+Message notifications with actions provide the user with a next action point for brief and quick interaction in a message prompt box.
+
+{{ operation }}
+
+### Position Control
+
+The global prompt display position can be controlled.`placement` is used to control the approximate position, and `offset` is used to set the offset from the position of `placement`.
+
+{{ placement }}
+
+### Disabling Prompt
+
+You can also use the close function if you do not want to close by timing, or if the user clicks a button.
+
+{{ toggle }}

docs/web/api/popconfirm.en-US.md

@@ -0,0 +1,36 @@
+---
+title: Popconfirm Bubble confirmation box description:The bubble confirmation box is usually used for secondary confirmation scenarios that do not cause serious consequences. It will pop up a floating layer on the clicked element to prompt confirmation. The bubble confirmation box has no mask. Click the area outside the confirmation box to close it.
+isComponent: true
+usage: { title: '', description: '' }
+spline: message
+---
+
+### Basic Bubble Confirmation Box
+
+Use the instruction text and operation buttons to confirm the simpler operation twice.
+
+{{ base }}
+
+### Bubble confirmation boxes for different icons
+
+Add icons before the description text, such as normal, warning and alarm icons, to enhance the expression to better attract the attention of users.
+
+{{ icon }}
+
+### Bubble confirmation box with description
+
+In addition to the main description text, the detailed description related to the operation is added to describe the more complicated and confusing operation in detail.
+
+{{ describe }}
+
+### Customize confirmation and cancel buttons
+
+with `confirmBtn` and `cancelBtn` attributes. You can pass Button component attributes or use slot method.
+
+{{ button }}
+
+### To control the position of the bubble confirmation box
+
+`popupProps` can be used to transparently transfer all the supported properties of the Popup component that the pop-up window depends on, such as controlling the position where the pop-up window appears.
+
+{{ inherit }}

docs/web/api/popup.en-US.md

@@ -0,0 +1,64 @@
+---
+title: Popup description:The pop-up layer component is the basis for the implementation of other pop-up window components such as the bubble confirmation box. When the capabilities provided by these components cannot meet the customization requirements, they can be encapsulated on the basis of the pop-up layer component.
+isComponent: true
+usage: { title: '', description: '' }
+spline: message
+---
+
+### Basic pop-up layer
+
+It consists of a floating layer content and a trigger element, both of which can be customized. Use `content` to customize the floating layer content.
+
+{{ base }}
+
+### Trigger Element
+
+You can use `triggerElement` to customize the trigger element.
+
+{{ trigger-element }}
+
+### Popup Layer with Different Trigger Methods
+
+Trigger when floating (default), trigger when clicking, trigger when getting focus, trigger when right-clicking, etc.
+
+{{ trigger }}
+
+### Location Direction
+
+Use `placement` to control the direction of the floating layer. If you need a floating layer arrow, set `showArrow=true`.
+
+{{ placement }}
+
+### Floating Layer Style
+
+The floating layer style can be controlled using overlayClassName, overlayStyle, overlayInnerStyle.
+
+- `overlayClassName` is used to define the floating layer style class name.
+- `overlayStyle` is used to define the floating layer style, such as the floating layer width. The width of the floating layer is rendered according to the content width by default, and the width and maximum width can be freely set.
+- `overlayInnerStyle` is used to define the style of the floating layer content, such as the maximum height of the content and whether to display a scroll bar. When the value is of type function, the width of the floating layer content can be the same as that of the trigger element.
+
+{{ style }}
+
+### Pop-up layer that can be displayed
+
+You can freely control the display or hiding of the pop-up layer by using `visible`.
+
+{{ visible }}
+
+### Mounting Parent Node
+
+The default parent node of the floating layer is `body`. You can freely adjust the parent node element mounted by `attach`.
+
+{{ container }}
+
+### Destroy pop-up layer when it can be hidden
+
+`destroyOnClose` is used to control whether to destroy the floating layer content when the floating layer is hidden.
+
+{{ destroy }}
+
+### Disable pop-up layer
+
+When the component is turned off, the pop-up layer is no longer displayed.
+
+{{ disabled }}