Skip to content

Commit

Permalink
Button: add Overview (#6622)
Browse files Browse the repository at this point in the history
  • Loading branch information
vladaskorohodova committed Sep 19, 2024
1 parent f8b42d4 commit 4cf77d5
Show file tree
Hide file tree
Showing 5 changed files with 26 additions and 0 deletions.
3 changes: 3 additions & 0 deletions concepts/05 UI Components/Button/02 Overview/00 Overview.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
DevExtreme Button component is an interactive UI element that allows users to trigger specific actions or events within an application.

In this overview you can find a map of Button elements, information about key features, and what to explore next.
10 changes: 10 additions & 0 deletions concepts/05 UI Components/Button/02 Overview/05 Elements.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
Below is an element map. A click on an element navigates to the topic related to this element.

<p><img src="/images/Button/button-elements.png" alt="Button elements" usemap="#button-elements">

<map id="button-elements" name="button-elements">
<area target="_blank" alt="Text" title="Text" href="/Documentation/ApiReference/UI_Components/dxButton/Configuration/#text" coords="413,381,294,99" shape="rect">
<area target="_blank" alt="Icon" title="Icon" href="/Documentation/ApiReference/UI_Components/dxButton/Configuration/#icon" coords="809,98,876,379" shape="rect">
<area target="_blank" alt="Type" title="Type" href="/Documentation/ApiReference/UI_Components/dxButton/Configuration/#type" coords="421,103,632,380" shape="rect">
<area target="_blank" alt="Change Icon Position" title="Change Icon Position" href="/Documentation/Guide/UI_Components/Button/Change_Icon_Position/" coords="641,100,803,379" shape="rect">
</map></p>
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
- **Labeling**
You can label DevExtreme Button with [text](/Documentation/ApiReference/UI_Components/dxButton/Configuration/#text), an [icon](/Documentation/ApiReference/UI_Components/dxButton/Configuration/#icon), or both to indicate its function.

- **State Management**
Button states include default, [hover](/Documentation/ApiReference/UI_Components/dxButton/Configuration/#hoverStateEnabled), [active](/Documentation/ApiReference/UI_Components/dxButton/Configuration/#activeStateEnabled), and [disabled](/Documentation/ApiReference/UI_Components/dxButton/Configuration/#disabled).

- **Action Binding**
You can bind Button to a function triggered when the button [is clicked](/Documentation/ApiReference/UI_Components/dxButton/Configuration/#onClick). Actions can include [submitting a form](/Documentation/Guide/UI_Components/Button/Validate_and_Submit_an_HTML_Form/), navigating to another page, or executing a custom script.
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
- [Getting Started with Button](/concepts/05%20UI%20Components/Button/00%20Getting%20Started%20with%20Button '/Documentation/Guide/UI_Components/Button/Getting_Started_with_Button/')

- [API](/api-reference/10%20UI%20Components/dxButton '/Documentation/ApiReference/UI_Components/dxButton/')

- [Demos](/concepts/05%20UI%20Components/Button/Demos.md '/Documentation/Guide/UI_Components/Button/Demos/')
Binary file added images/Button/button-elements.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 4cf77d5

Please sign in to comment.