diff --git a/blazor-toc.html b/blazor-toc.html index a960b24026..5215760395 100644 --- a/blazor-toc.html +++ b/blazor-toc.html @@ -1196,9 +1196,6 @@
  • Selection and Nesting
    • -
  • - Style and Appearance -
  • Accessibility
    • diff --git a/blazor/button-group/accessibility.md b/blazor/button-group/accessibility.md index fab6ebf8ec..540cbab43a 100644 --- a/blazor/button-group/accessibility.md +++ b/blazor/button-group/accessibility.md @@ -50,7 +50,7 @@ The Blazor Button Group component followed the [keyboard interaction](https://ww ## Ensuring accessibility -The Blazor Button Group component's accessibility levels are ensured through an an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. +The Blazor Button Group component's accessibility levels are ensured through an [axe-core](https://www.nuget.org/packages/Deque.AxeCore.Playwright) with playwright tests. The accessibility compliance of the Blazor Button Group component is shown in the following sample. Open the [sample](https://blazor.syncfusion.com/accessibility/button-group) in a new window to evaluate the accessibility of the Blazor Button Group component with accessibility tools. diff --git a/blazor/button-group/native-event.md b/blazor/button-group/native-event.md index 705527660f..0ddf58d8f4 100644 --- a/blazor/button-group/native-event.md +++ b/blazor/button-group/native-event.md @@ -1,13 +1,13 @@ --- layout: post -title: Native Events in Blazor Button Group Component | Syncfusion® -description: Checkout and learn here all features about Native Events in Blazor Button Group component and much more. +title: Native Events in Blazor ButtonGroup Component | Syncfusion® +description: Checkout and learn here all features about Native Events in Blazor ButtonGroup component and much more. platform: Blazor -control: Button Group +control: ButtonGroup documentation: ug --- -# Native Events in Blazor Button Group Component +# Native Events in Blazor ButtonGroup Component You can define the native event using `event` attribute in component. The value of attribute is treated as an event handler. The event specific data will be available in event arguments. @@ -18,20 +18,20 @@ The different event argument types for each event are, * Keyboard Events - UIKeyboardEventArgs * Touch Events – UITouchEventArgs -## List of native events supported for default Button Group +## List of native events supported for default ButtonGroup -The following native event support has been provided to the Button Group component: +The following native event support has been provided to the ButtonGroup component: | List of Native events | | | | | --- | --- | --- | --- | | onclick | onblur | onfocus | onfocusout | -|onmousemove|onmouseover|onmouseout|onmousedown|onmouseup| +|onmousemove|onmouseover|onmouseout|onmousedown| |ondblclick|onkeydown|onkeyup|onkeypress| |ontouchend|onfocusin|onmouseup|ontouchstart| -## How to bind click event to Button Group +## How to bind click event to ButtonGroup -The `onclick` attribute is used to bind the click event for button group. Here, we have explained about the sample code snippets. +The `onclick` attribute is used to bind the click event for ButtonGroup. Here, we have explained about the sample code snippets. ```csharp @@ -59,18 +59,18 @@ The `onclick` attribute is used to bind the click event for button group. Here, } ``` -## List of native events supported for Single / Multiple selection mode Button Group +## List of native events supported for Single / Multiple selection mode ButtonGroup -The following native event support has been provided to the Button Group component: +The following native event support has been provided to the ButtonGroup component: | List of Native events | | | | | | --- | --- | --- | --- | --- | | onchange | oninput | onblur | onfocusout | onfocusin | |onfocus|onclick|onkeydown|onkeyup|onkeypress| -## How to bind onchange event to Button Group +## How to bind onchange event to ButtonGroup -The `onchange` attribute is used to bind the change event for button group. Here, we have explained about the sample code snippets. +The `onchange` attribute is used to bind the change event for ButtonGroup. Here, we have explained about the sample code snippets. ```csharp diff --git a/blazor/button-group/selection-and-nesting.md b/blazor/button-group/selection-and-nesting.md index c652059a4f..144b15a28d 100644 --- a/blazor/button-group/selection-and-nesting.md +++ b/blazor/button-group/selection-and-nesting.md @@ -9,7 +9,7 @@ documentation: ug # Selection and Nesting in Blazor ButtonGroup Component -Blazor ButtonGroup component provided two-way binding support in both single and multiple selection modes through the `Selected` property of `ButtonGroupButton`. The `@bind-Selected` directive enables two-way data binding, allowing the state of each button (selected or not) to synchronize between the UI and the backing properties. +Blazor ButtonGroup component provides two-way binding support in both single and multiple selection modes through the `Selected` property of `ButtonGroupButton`. The `@bind-Selected` directive enables two-way data binding, allowing the state of each button (selected or not) to synchronize between the UI and the backing properties. ## Single selection @@ -93,7 +93,7 @@ Nesting with other components can be possible in ButtonGroup. The following comp ### DropDownButton -In the following example, the DropDownButton component can be added in ButtonGroup tag. +In the following example, the DropDownButton component can be added to the ButtonGroup tag. ```cshtml @using Syncfusion.Blazor.SplitButtons @@ -116,7 +116,7 @@ In the following example, the DropDownButton component can be added in ButtonGro ### SplitButton -In the following example, SplitButton component can be added in ButtonGroup tag. +In the following example, SplitButton component can be added to the ButtonGroup tag. ```cshtml @using Syncfusion.Blazor.SplitButtons diff --git a/blazor/button-group/style-and-appearance.md b/blazor/button-group/style-and-appearance.md deleted file mode 100644 index 5ebd1ec1cc..0000000000 --- a/blazor/button-group/style-and-appearance.md +++ /dev/null @@ -1,19 +0,0 @@ ---- -layout: post -title: Styles and Appearances in Blazor ButtonGroup Component | Syncfusion® -description: Checkout and learn here all features about Styles and Appearances in Blazor ButtonGroup component and more. -platform: Blazor -control: ButtonGroup -documentation: ug ---- - -# Styles and Appearances in Blazor ButtonGroup Component - -To modify the ButtonGroup appearance, you need to override the default CSS of ButtonGroup component. Find the list of CSS classes and its corresponding section in ButtonGroup. Also, you have an option to create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). - -|CSS Class | Purpose of Class | -|-----|-----| -|.e-btn|To customize the ButtonGroup.| -|.e-btn:hover|To customize the ButtonGroup on hover.| -|.e-btn:focus|To customize the ButtonGroup on focus.| -|.e-btn:active|To customize the ButtonGroup on active.| \ No newline at end of file diff --git a/blazor/button-group/types-and-styles.md b/blazor/button-group/types-and-styles.md index 3eeceb9056..ff437e72d2 100644 --- a/blazor/button-group/types-and-styles.md +++ b/blazor/button-group/types-and-styles.md @@ -44,6 +44,84 @@ The Blazor ButtonGroup has the following predefined styles that can be defined u N> Predefined ButtonGroup styles provide only the visual indication. So, ButtonGroup content should define the ButtonGroup style for the users of assistive technologies such as screen readers. +### CSS Customization Classes + +To modify the ButtonGroup appearance, you need to override the default CSS of the ButtonGroup component. Find the list of CSS classes and their corresponding section in ButtonGroup. You can also create your own custom theme for the controls using our [Theme Studio](https://blazor.syncfusion.com/themestudio/?theme=material). + +| CSS Class | Purpose of Class | +| --------- | ---------------- | +| `.e-btn` | To customize the ButtonGroup. | +| `.e-btn:hover` | To customize the ButtonGroup on hover. | +| `.e-btn:focus` | To customize the ButtonGroup on focus. | +| `.e-btn:active` | To customize the ButtonGroup on active. | + +The following example demonstrates how to apply a custom styles using CSS classes for various properties like color, background color, font, border, padding, margin, and more: + +```cshtml + +@using Syncfusion.Blazor.SplitButtons + + + Left + Center + Right + + + + +``` + ## ButtonGroup types The types of Blazor ButtonGroup are as follows: @@ -51,7 +129,6 @@ The types of Blazor ButtonGroup are as follows: * Flat ButtonGroup * Outline ButtonGroup * Round ButtonGroup -* Toggle ButtonGroup ### Flat ButtonGroup @@ -65,6 +142,8 @@ An outline ButtonGroup has a border with transparent background. To create an ou A round ButtonGroup is shaped like a circle. Usually, it contains an icon representing its action. To create a round ButtonGroup, set the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.SplitButtons.SfButtonGroup.html#Syncfusion_Blazor_SplitButtons_SfButtonGroup_CssClass) property to `e-round-corner`. +The following example demonstrates the types of Blazor ButtonGroup: + ```cshtml @using Syncfusion.Blazor.SplitButtons @@ -114,7 +193,7 @@ To create ButtonGroup with icons, [IconCss](https://help.syncfusion.com/cr/blazo ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVRNxiFhfBAtUDm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor ButtonGroup with Icon](./images/blazor-buttongroup-icon.webp)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNVRNxiFhfBAtUDm?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "Blazor ButtonGroup with Icon" %} ## ButtonGroup size diff --git a/blazor/button/accessibility.md b/blazor/button/accessibility.md index 64b09018e6..5e12ac2820 100644 --- a/blazor/button/accessibility.md +++ b/blazor/button/accessibility.md @@ -7,7 +7,7 @@ control: Button documentation: ug --- -# Accessibility in Blazor Button component +# Accessibility in Blazor Button Component The Blazor Button component followed the accessibility guidelines and standards, including [ADA](https://www.ada.gov/), [Section 508](https://www.section508.gov/), [WCAG 2.2](https://www.w3.org/TR/WCAG22/) standards, and [WCAG roles](https://www.w3.org/TR/wai-aria/#roles) that are commonly used to evaluate accessibility. diff --git a/blazor/button/getting-started-with-web-app.md b/blazor/button/getting-started-with-web-app.md index 63e97dc986..e73f5db39a 100644 --- a/blazor/button/getting-started-with-web-app.md +++ b/blazor/button/getting-started-with-web-app.md @@ -178,8 +178,6 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem {% previewsample "https://blazorplayground.syncfusion.com/embed/rtVnZdChVAKGSXRX?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Button Component](./images/blazor-button-component.webp)" %} -N> You can also explore our [Blazor Button example](https://blazor.syncfusion.com/demos/buttons/default-functionalities?) that shows how to render and configure the button. - N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Button). ## See also diff --git a/blazor/button/how-to/repeat-button.md b/blazor/button/how-to/repeat-button.md index 58448a4dad..68e96209db 100644 --- a/blazor/button/how-to/repeat-button.md +++ b/blazor/button/how-to/repeat-button.md @@ -9,7 +9,7 @@ documentation: ug # Repeat Button in Blazor Button Component -The Repeat button is a type of Button in that the click event is triggered at regular time interval from the pressed state till the released state. +The Repeat button is a type of Button in which the click event is triggered at regular time interval from the pressed state till the released state. The following example explains about how to achieve Repeat Button in mouse and touch events. diff --git a/blazor/button/types-and-styles.md b/blazor/button/types-and-styles.md index 823b1a12b0..e27be4cec8 100644 --- a/blazor/button/types-and-styles.md +++ b/blazor/button/types-and-styles.md @@ -68,13 +68,8 @@ A Round Button is circular in shape. Usually, it contains an icon representing i Flat Outline - + - ``` {% previewsample "https://blazorplayground.syncfusion.com/embed/hDVxXRiVhUSIxYKT?appbar=false&editor=false&result=true&errorlist=false&theme=fluent2" backgroundimage "[Blazor Button with different Types](./images/blazor-button-types.webp)" %} @@ -127,7 +122,7 @@ A toggle Button allows you to change between the two states. The Button is activ } .e-pause::before { - content: '\e326'; + content: '\e77b'; }