Deform Component
Category: BasicThe deform morphing button component can switch between multiple expression forms, such as transforming from a menu button to a close button. It supports info, menu, add, close, left, right, up, down, menuStart, and menuEnd form types, with multiple theme styles available.
Regular Deformable Buttons
The framework defines four types of deformable buttons: info, menu, add, close, left, right, up, down, menuStart, and menuEnd. Regular deformable buttons have dimensions of 40px (4.0rem) and are icon-style buttons. The button type must be defined using the type attribute.
- Output
- HTML
Using Themes
Define button colors using the theme attribute. Available color options: prim, succ, error, warn, info, issue, text (default), brief, and caption.
- Output
- HTML
Filled Style
By default, the icons use an outlined style. To display solid buttons, add the filled attribute.
- Output
- HTML
Using Borders
Buttons have no border by default. Add the bordered attribute to get a bordered style.
- Output
- HTML
Shape Outline
Define button shape using the shape attribute:
square: Square border shaperadius: Small rounded border shape (default)round: Circular border shape
- Output
- HTML
Disabled State
Add the disabled attribute to indicate the button is disabled.
- Output
- HTML
Size
Define button size using the size attribute. Three sizes available:
lg: Large button (56px width/height)md: Medium button (default, 40px width/height)sm: Small button (32px width/height)
- Output
- HTML
Morphing Animation
Morphing buttons change state by modifying the type attribute. Each type has clear semantics and relationships between types.
Operations
Morphing buttons change state by modifying the type attribute. Use the built-in reset method to restore initial state.
Attributes
| Name | Options | Default | Description |
|---|---|---|---|
| type | 'info'/'menu'/'add'/'close'/'left'/'right'/'up'/'down'/'menuStart'/'menuEnd' | - | Icon type |
| theme | 'prim'/'succ'/'error'/'warn'/'info'/'issue'/'text'/'brief'/'caption' | - | Theme style |
| size | 'sm'/'md'/'lg'/''/- | - | Size |
| filled | ''/- | - | Whether to use solid fill |
| bordered | ''/- | - | Whether to use border |
| shape | 'square'/'radius'/'round' | 'radius' | Outline shape |
| disabled | ''/- | - | Whether to disable operation |
Common Methods
Common component methods:
set: Set properties (takes key-value pairs or array)reset: Reset properties (no params)clear: Clear properties and values (no params)
Basic usage: CompElem.reset()
Common Events
Common component events:
connected: Component connected (no params)disconnected: Component disconnected (no params)adopted: Component moved (no params)set: Property set (receives value)cleared: Property cleared (no params)reset: Property reset (no params)
Basic usage: CompElem.on('connected',()=>{console.log('connected')})
