mirror of
https://github.com/sabjorn7/meetguru.git
synced 2025-06-27 07:06:58 +03:00
52 lines
2.6 KiB
Markdown
52 lines
2.6 KiB
Markdown
---
|
|
name: ww-button
|
|
description: Configurable button component with styling, icons, and form submission capabilities.
|
|
keywords: [button, submit, reset, icon, form, styling]
|
|
---
|
|
|
|
#### ww-button
|
|
|
|
Purpose: Renders a button element with configurable type, styling, and icon support.
|
|
Ex: Button without icon: {"uid": "cta","tag": "ww-button","name": "Button","states": [],"props": {"default": { ... }},"styles": {"default": { "cursor":"pointer", ... }},"slots": {...}}
|
|
|
|
Properties:
|
|
- text: string|object - Button text content. Can be an object with {"lang":"text"} format (e.g: {"en":"English text","fr":"French text"})
|
|
- backgroundColor: string|null - Text background color
|
|
- buttonType: 'button'|'submit'|null - Button type
|
|
- disabled: boolean - Disables button
|
|
- hasLeftIcon: boolean - Shows left icon
|
|
- hasRightIcon: boolean - Shows right icon
|
|
|
|
Slots:
|
|
- leftIcon: (single icon. NOT AN ARRAY OF ELEMENTS) ww-icon - Left icon with right margin on the icon.
|
|
Ex:
|
|
<elements>
|
|
{"uid":"left-icon-cta","tag":"ww-button","name":"With left icon","states":[],"props":{"default":{"hasLeftIcon":true}},"styles":{"default":{"color":"#ff0000","fontSize":"20px","cursor":"pointer"}},"slots":{"leftIcon":{"uid":"left-icon"}}}
|
|
{"uid":"left-icon","tag":"ww-icon","name":"Left Icon","states":[],"props":{"color":"#ff0000","fontSize":"20","icon":"icon name"},"styles":{"default":{"margin":"0 12px 0 0"}}}
|
|
</elements>
|
|
- rightIcon: (single icon. NOT AN ARRAY OF ELEMENTS) ww-icon - Right icon with left margin on the icon
|
|
Ex:
|
|
<elements>
|
|
{"uid":"right-icon-cta","tag":"ww-button","name":"With right icon","states":[],"props":{"default":{"hasRightIcon":true}},"styles":{"default":{"color":"#ff0000","fontSize":"20px","cursor":"pointer"}},"slots":{"rightIcon":{"uid":"right-icon"}}}
|
|
{"uid":"right-icon","tag":"ww-icon","name":"Right Icon","states":[],"props":{"color":"#ff0000","fontSize":"20","icon":"icon name"},"styles":{"default":{"margin":"0 0 0 12px"}}}
|
|
</elements>
|
|
|
|
Features:
|
|
- Inherits ww-text properties
|
|
- Action triggering support
|
|
- Form submission integration
|
|
- Button color and size are not passed to the icons. These styles are mandatory on the icon props (no unit on icon).
|
|
|
|
Events:
|
|
- focus: Triggered when button receives focus. No payload.
|
|
- blur: Triggered when button loses focus. No payload.
|
|
- keydown: Triggered when a key is pressed while button has focus. No payload.
|
|
- keyup: Triggered when a key is released while button has focus. No payload.
|
|
|
|
States:
|
|
- focus: Applied when the button has focus.
|
|
- disabled: Applied when the button is disabled.
|
|
- active: Applied when the button is being pressed (during mousedown/touchstart/keydown).
|
|
|
|
Variables: none
|