diff --git a/blazor/color-picker/getting-started-with-server-app.md b/blazor/color-picker/getting-started-with-server-app.md index 7b0d0d28ac..61e7765417 100644 --- a/blazor/color-picker/getting-started-with-server-app.md +++ b/blazor/color-picker/getting-started-with-server-app.md @@ -168,7 +168,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ColorPicker component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker Component](./images/blazor-colorpicker-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker Component](./images/blazor-colorpicker-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/ColorPicker). diff --git a/blazor/color-picker/getting-started-with-web-app.md b/blazor/color-picker/getting-started-with-web-app.md index 6939e4974f..a36291b241 100644 --- a/blazor/color-picker/getting-started-with-web-app.md +++ b/blazor/color-picker/getting-started-with-web-app.md @@ -176,7 +176,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor ColorPicker component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker Component](./images/blazor-colorpicker-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker Component](./images/blazor-colorpicker-component.webp)" %} N> You can also explore our [Blazor ColorPicker example](https://blazor.syncfusion.com/demos/colorpicker/default-functionalities) that shows how to render and configure the ColorPicker. diff --git a/blazor/color-picker/getting-started.md b/blazor/color-picker/getting-started.md index f5110f2b7d..fd5560939a 100644 --- a/blazor/color-picker/getting-started.md +++ b/blazor/color-picker/getting-started.md @@ -157,7 +157,7 @@ Add the Syncfusion® Blazor Color Picker com * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Color Picker component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Color Picker component](./images/blazor-colorpicker-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDrztMhkhMtJdbVL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Color Picker component](./images/blazor-colorpicker-component.webp)" %} ## See also diff --git a/blazor/color-picker/how-to/customize-color-picker.md b/blazor/color-picker/how-to/customize-color-picker.md index 85fb8bda02..d9b470be10 100644 --- a/blazor/color-picker/how-to/customize-color-picker.md +++ b/blazor/color-picker/how-to/customize-color-picker.md @@ -77,7 +77,7 @@ By default, the palette renders with a set of predefined colors. To load custom ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrKsLhcASTCtgHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Custom Palette](./../images/blazor-colorpicker-with-custom-palette.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDrKsLhcASTCtgHM?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Custom Palette](./../images/blazor-colorpicker-with-custom-palette.webp)" %} ## Hide input area from picker @@ -91,7 +91,7 @@ In the following sample, the Color Picker is rendered without the input area.

Choose a color

``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhKMLLwqoJqULKi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide Input Area in Blazor ColorPicker](./../images/blazor-colorpicker-hide-input.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXhKMLLwqoJqULKi?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide Input Area in Blazor ColorPicker](./../images/blazor-colorpicker-hide-input.webp)" %} ## Custom handle @@ -123,4 +123,4 @@ The following sample shows the customized Color Picker handle. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKWrLGKyTIhQGO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor ColorPicker Handle Shape](./../images/blazor-colorpicker-handle-customization.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hjhKWrLGKyTIhQGO?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Customizing Blazor ColorPicker Handle Shape](./../images/blazor-colorpicker-handle-customization.webp)" %} diff --git a/blazor/color-picker/how-to/disable-color-picker.md b/blazor/color-picker/how-to/disable-color-picker.md index b6256fe99f..cb40273381 100644 --- a/blazor/color-picker/how-to/disable-color-picker.md +++ b/blazor/color-picker/how-to/disable-color-picker.md @@ -19,4 +19,4 @@ The following example shows the `Disabled` state of the Color Picker component.

Choose a color

``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKsLrGgeJFrvZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Disable State in Blazor ColorPicker](./../images/blazor-colorpicker-disable-state.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htLKsLrGgeJFrvZn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Disable State in Blazor ColorPicker](./../images/blazor-colorpicker-disable-state.webp)" %} diff --git a/blazor/color-picker/how-to/hide-control-buttons.md b/blazor/color-picker/how-to/hide-control-buttons.md index 1cb83ec07e..a23550dccd 100644 --- a/blazor/color-picker/how-to/hide-control-buttons.md +++ b/blazor/color-picker/how-to/hide-control-buttons.md @@ -17,4 +17,4 @@ Render the Color Picker without control buttons (Apply/Cancel) by setting the [S

Choose a color

``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhAWLBcqoIBqnae?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide Control Buttons in Blazor ColorPicker](./../images/blazor-colorpicker-hide-control.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hDhAWLBcqoIBqnae?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Hide Control Buttons in Blazor ColorPicker](./../images/blazor-colorpicker-hide-control.webp)" %} diff --git a/blazor/color-picker/how-to/no-color-support.md b/blazor/color-picker/how-to/no-color-support.md index 700b067a15..1b7aef6a60 100644 --- a/blazor/color-picker/how-to/no-color-support.md +++ b/blazor/color-picker/how-to/no-color-support.md @@ -40,7 +40,7 @@ Enable the built-in no color tile by setting the [NoColor](https://help.syncfusi ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUsLLGKoIFoxSv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Default No Color](./../images/blazor-colorpicker-nocolor.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDVUsLLGKoIFoxSv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Default No Color](./../images/blazor-colorpicker-nocolor.webp)" %} > If the [NoColor](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_NoColor) property is enabled, make sure to disable the [ModeSwitcher](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ModeSwitcher) property. @@ -128,4 +128,4 @@ The following example demonstrates a custom no color option alongside a palette ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAsLLwAyxsVKHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Custom No Color](./../images/blazor-colorpicker-custom-nocolor.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VthAsLLwAyxsVKHl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Custom No Color](./../images/blazor-colorpicker-custom-nocolor.webp)" %} diff --git a/blazor/color-picker/how-to/render-palette-alone.md b/blazor/color-picker/how-to/render-palette-alone.md index 22ed4d5320..630624a97a 100644 --- a/blazor/color-picker/how-to/render-palette-alone.md +++ b/blazor/color-picker/how-to/render-palette-alone.md @@ -19,6 +19,6 @@ In the following sample, the [ShowButtons](https://help.syncfusion.com/cr/blazor

Choose a color

``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rendering Palette Alone in Blazor ColorPicker](./../images/blazor-colorpicker-with-palette-alone.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rendering Palette Alone in Blazor ColorPicker](./../images/blazor-colorpicker-with-palette-alone.webp)" %} N> To display the palette embedded in the page instead of in a popup, set `Inline="true"`. To render `Picker` alone, specify the [Mode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Mode) property as 'Picker'. \ No newline at end of file diff --git a/blazor/color-picker/how-to/show-recent-color.md b/blazor/color-picker/how-to/show-recent-color.md index e277dd9829..04fb4afc2b 100644 --- a/blazor/color-picker/how-to/show-recent-color.md +++ b/blazor/color-picker/how-to/show-recent-color.md @@ -21,4 +21,4 @@ In the following sample, the [ShowRecentColors](https://help.syncfusion.com/cr/b

Choose a color

``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rendering Show Recent color in Blazor ColorPicker](./../images/blazor-colorpicker-show-recent-color.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LtLKiLLGUoxTFJzx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Rendering Show Recent color in Blazor ColorPicker](./../images/blazor-colorpicker-show-recent-color.webp)" %} diff --git a/blazor/color-picker/images/blazor-colorpicker-component.webp b/blazor/color-picker/images/blazor-colorpicker-component.webp new file mode 100644 index 0000000000..e9dbd57847 Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-component.webp differ diff --git a/blazor/color-picker/images/blazor-colorpicker-custom-nocolor.webp b/blazor/color-picker/images/blazor-colorpicker-custom-nocolor.webp new file mode 100644 index 0000000000..a6d05bc09e Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-custom-nocolor.webp differ diff --git a/blazor/color-picker/images/blazor-colorpicker-disable-state.webp b/blazor/color-picker/images/blazor-colorpicker-disable-state.webp new file mode 100644 index 0000000000..e76e2f5fa5 Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-disable-state.webp differ diff --git a/blazor/color-picker/images/blazor-colorpicker-handle-customization.webp b/blazor/color-picker/images/blazor-colorpicker-handle-customization.webp new file mode 100644 index 0000000000..fe11caca0a Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-handle-customization.webp differ diff --git a/blazor/color-picker/images/blazor-colorpicker-hide-control.webp b/blazor/color-picker/images/blazor-colorpicker-hide-control.webp new file mode 100644 index 0000000000..d16f0dedbd Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-hide-control.webp differ diff --git a/blazor/color-picker/images/blazor-colorpicker-hide-input.webp b/blazor/color-picker/images/blazor-colorpicker-hide-input.webp new file mode 100644 index 0000000000..d390d3ea64 Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-hide-input.webp differ diff --git a/blazor/color-picker/images/blazor-colorpicker-inline-rendering.webp b/blazor/color-picker/images/blazor-colorpicker-inline-rendering.webp new file mode 100644 index 0000000000..49b64ac15d Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-inline-rendering.webp differ diff --git a/blazor/color-picker/images/blazor-colorpicker-localization.webp b/blazor/color-picker/images/blazor-colorpicker-localization.webp new file mode 100644 index 0000000000..5c0927dcb8 Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-localization.webp differ diff --git a/blazor/color-picker/images/blazor-colorpicker-nocolor.webp b/blazor/color-picker/images/blazor-colorpicker-nocolor.webp new file mode 100644 index 0000000000..76ff2817fc Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-nocolor.webp differ diff --git a/blazor/color-picker/images/blazor-colorpicker-right-to-left.webp b/blazor/color-picker/images/blazor-colorpicker-right-to-left.webp new file mode 100644 index 0000000000..c7fdf5781f Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-right-to-left.webp differ diff --git a/blazor/color-picker/images/blazor-colorpicker-show-recent-color.webp b/blazor/color-picker/images/blazor-colorpicker-show-recent-color.webp new file mode 100644 index 0000000000..ccfd8022de Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-show-recent-color.webp differ diff --git a/blazor/color-picker/images/blazor-colorpicker-value.webp b/blazor/color-picker/images/blazor-colorpicker-value.webp new file mode 100644 index 0000000000..de406e94d6 Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-value.webp differ diff --git a/blazor/color-picker/images/blazor-colorpicker-with-custom-palette.webp b/blazor/color-picker/images/blazor-colorpicker-with-custom-palette.webp new file mode 100644 index 0000000000..d17ae63275 Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-with-custom-palette.webp differ diff --git a/blazor/color-picker/images/blazor-colorpicker-with-palette-alone.webp b/blazor/color-picker/images/blazor-colorpicker-with-palette-alone.webp new file mode 100644 index 0000000000..0ae3282f66 Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-with-palette-alone.webp differ diff --git a/blazor/color-picker/images/blazor-colorpicker-with-palette.webp b/blazor/color-picker/images/blazor-colorpicker-with-palette.webp new file mode 100644 index 0000000000..7d897d3ef3 Binary files /dev/null and b/blazor/color-picker/images/blazor-colorpicker-with-palette.webp differ diff --git a/blazor/color-picker/inline-rendering.md b/blazor/color-picker/inline-rendering.md index 1c96a7452b..beee9869a4 100644 --- a/blazor/color-picker/inline-rendering.md +++ b/blazor/color-picker/inline-rendering.md @@ -20,6 +20,6 @@ The following sample shows inline rendering of the Color Picker. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVKsVrQgIVKJnGz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Inline Rendering in Blazor ColorPicker](./images/blazor-colorpicker-inline-rendering.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNVKsVrQgIVKJnGz?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Inline Rendering in Blazor ColorPicker](./images/blazor-colorpicker-inline-rendering.webp)" %} N> The `ShowButtons` property is disabled in this sample because control buttons are not needed for inline rendering. For details about control buttons functionality, see [ShowButtons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_ShowButtons). \ No newline at end of file diff --git a/blazor/color-picker/localization.md b/blazor/color-picker/localization.md index 30008e6057..6652d21377 100644 --- a/blazor/color-picker/localization.md +++ b/blazor/color-picker/localization.md @@ -28,7 +28,7 @@ Modify the default value in `.res` file added to Resource folder. Enter the key ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhKsVVwqSUTjofI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Localization in Blazor ColorPicker](./images/blazor-colorpicker-localization.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZhKsVVwqSUTjofI?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Localization in Blazor ColorPicker](./images/blazor-colorpicker-localization.webp)" %} ## RTL @@ -43,4 +43,4 @@ In the following example, the Color Picker is rendered in RTL mode with an Arabi ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBUsrLmqSKnHwGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Right to Left in Blazor ColorPicker](./images/blazor-colorpicker-right-to-left.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBUsrLmqSKnHwGP?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Right to Left in Blazor ColorPicker](./images/blazor-colorpicker-right-to-left.webp)" %} diff --git a/blazor/color-picker/mode-and-value.md b/blazor/color-picker/mode-and-value.md index 83aaf14d00..122e1b79bf 100644 --- a/blazor/color-picker/mode-and-value.md +++ b/blazor/color-picker/mode-and-value.md @@ -22,7 +22,7 @@ In the following example, the palette is displayed at initial load. ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgshBQKIhHYIMT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Palette](./images/blazor-colorpicker-with-palette.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VZhgshBQKIhHYIMT?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor ColorPicker with Palette](./images/blazor-colorpicker-with-palette.webp)" %} ## Color value @@ -37,6 +37,6 @@ In the following example, a 4-digit hex value is used, where the last digit repr ``` -{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVUCBBQUeLkCZYv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor ColorPicker value](./images/blazor-colorpicker-value.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VjVUCBBQUeLkCZYv?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Blazor ColorPicker value](./images/blazor-colorpicker-value.webp)" %} N> The [Value](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfColorPicker.html#Syncfusion_Blazor_Inputs_SfColorPicker_Value) property supports hex codes with or without the `#` prefix. \ No newline at end of file diff --git a/blazor/data-form/autogeneration.md b/blazor/data-form/autogeneration.md index 6442b534df..05b5d621c7 100644 --- a/blazor/data-form/autogeneration.md +++ b/blazor/data-form/autogeneration.md @@ -31,7 +31,7 @@ The following example demonstrates auto-generated items for the supported types. {% endhighlight %} {% endtabs %} -![Blazor DataForm Form Item](images/blazor_dataform_autogenerateditems.png) +![Blazor DataForm Form Item](images/blazor_dataform_autogenerateditems.webp) ## Combined auto generated and custom fields @@ -47,7 +47,7 @@ The `FormAutoGenerateItems` can be utilized independently, as demonstrated in th In the given example, `StringField`, `DateTimeField`, and `BoolField` are explicitly defined with `FormItem`. All remaining eligible properties are auto-generated with their corresponding editor types and positioned relative to the `FormAutoGenerateItems` tag. -![Blazor DataForm showing a mix of custom-defined FormItem fields and auto-generated fields](images/blazor_dataform_partially_autogenerated_items.png) +![Blazor DataForm showing a mix of custom-defined FormItem fields and auto-generated fields](images/blazor_dataform_partially_autogenerated_items.webp) ## Cancel the auto generate fields @@ -63,7 +63,7 @@ Auto-generation can be controlled in two ways: {% endhighlight %} {% endtabs %} -![Blazor DataForm Form Item](images/blazor_dataform_cancel_autogenerateditems.png) +![Blazor DataForm Form Item](images/blazor_dataform_cancel_autogenerateditems.webp) ## See also diff --git a/blazor/data-form/column-layout.md b/blazor/data-form/column-layout.md index 773e00ab50..fadb8c2b00 100644 --- a/blazor/data-form/column-layout.md +++ b/blazor/data-form/column-layout.md @@ -19,7 +19,7 @@ This section explains how to arrange DataForm editors in a column-based layout. {% endhighlight %} {% endtabs %} -![Blazor DataForm column layout](images/blazor_dataform_change_form_width.png) +![Blazor DataForm column layout](images/blazor_dataform_change_form_width.webp) ## Configure the column span @@ -35,7 +35,7 @@ Additionally, by utilizing the [ColumnSpan](https://help.syncfusion.com/cr/blazo In the following example, the DataForm is divided into six equal columns. Each editor consumes space based on its configured column span, resulting in rows where items align cleanly and wrap to the next row when the remaining columns are insufficient. -![Blazor DataForm demonstrating ColumnSpan across a six-column grid](images/blazor_dataform_column_span.png) +![Blazor DataForm demonstrating ColumnSpan across a six-column grid](images/blazor_dataform_column_span.webp) ## See Also diff --git a/blazor/data-form/data-annotation-attributes.md b/blazor/data-form/data-annotation-attributes.md index 97d2ebc65d..758142758d 100644 --- a/blazor/data-form/data-annotation-attributes.md +++ b/blazor/data-form/data-annotation-attributes.md @@ -236,15 +236,15 @@ The [DataTypeAttribute](https://learn.microsoft.com/en-us/dotnet/api/system.comp | Data type | Editor type | Image | | ------------ | ----------------------- | ------ | -| `DataType.Date` | [SfDatePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html) | ![Blazor DataForm DataType.Date editor example](images/blazor_dataform_data_type_date.png) | -| `DataType.Time` | [SfTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html) |![Blazor DataForm DataType.Time editor example](images/blazor_dataform_data_type_time.png) | -| `DataType.DateTime` | [SfDateTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html) |![Blazor DataForm DataType.DateTime editor example](images/blazor_dataform_data_type_date_time.png) | -| `DataType.Currency` | [SfNumericTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html) |![Blazor DataForm DataType.Currency editor example](images/blazor_dataform_data_type_currency.png) | -| `DataType.PhoneNumber` | [SfMaskedTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html) |![Blazor DataForm DataType.PhoneNumber editor example](images/blazor_dataform_data_type_phone.png) | -| `DataType.CreditCard` | [SfMaskedTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html) |![Blazor DataForm DataType.CreditCard editor example](images/blazor_dataform_data_type_credit_card.png) | -| `DataType.MultilineText` | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) | ![Blazor DataForm DataType.MultilineText editor example](images/blazor_dataform_data_type_multiline_text.png) | -| `DataType.Password` | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) | ![Blazor DataForm DataType.Password editor example](images/blazor_dataform_data_type_password.png) | -| | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) |![Blazor DataForm DataType.Text-like editors example](images/blazor_dataform_data_type_text.png) | +| `DataType.Date` | [SfDatePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDatePicker-1.html) | ![Blazor DataForm DataType.Date editor example](images/blazor_dataform_data_type_date.webp) | +| `DataType.Time` | [SfTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html) |![Blazor DataForm DataType.Time editor example](images/blazor_dataform_data_type_time.webp) | +| `DataType.DateTime` | [SfDateTimePicker](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfDateTimePicker-1.html) |![Blazor DataForm DataType.DateTime editor example](images/blazor_dataform_data_type_date_time.webp) | +| `DataType.Currency` | [SfNumericTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfNumericTextBox-1.html) |![Blazor DataForm DataType.Currency editor example](images/blazor_dataform_data_type_currency.webp) | +| `DataType.PhoneNumber` | [SfMaskedTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html) |![Blazor DataForm DataType.PhoneNumber editor example](images/blazor_dataform_data_type_phone.webp) | +| `DataType.CreditCard` | [SfMaskedTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfMaskedTextBox.html) |![Blazor DataForm DataType.CreditCard editor example](images/blazor_dataform_data_type_credit_card.webp) | +| `DataType.MultilineText` | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) | ![Blazor DataForm DataType.MultilineText editor example](images/blazor_dataform_data_type_multiline_text.webp) | +| `DataType.Password` | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) | ![Blazor DataForm DataType.Password editor example](images/blazor_dataform_data_type_password.webp) | +| | [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) |![Blazor DataForm DataType.Text-like editors example](images/blazor_dataform_data_type_text.webp) | If a different data type is specified that is not listed above, the DataForm uses the [SfTextBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfTextBox.html) editor by default. @@ -322,7 +322,7 @@ The [DataFormDisplayOptionsAttribute](https://help.syncfusion.com/cr/blazor/Sync {% endtabs %} -![Blazor DataForm Custom Attributes](images/blazor_dataform_custom_attributes.png) +![Blazor DataForm Custom Attributes](images/blazor_dataform_custom_attributes.webp) ## Custom validation @@ -340,4 +340,4 @@ In the `IsValid` method, implement the validation logic. When validation fails, In the example, the `PasswordValidationAttribute` checks whether the password meets the required criteria (length, uppercase, lowercase, and special character). If not, it returns a `ValidationResult` with an appropriate message. The `EmailValidationAttribute` validates the email format and returns a `ValidationResult` with an error message when invalid. -![Blazor DataForm custom validation showing error messages for password and email](images/blazor_dataform_customvalidation.png) \ No newline at end of file +![Blazor DataForm custom validation showing error messages for password and email](images/blazor_dataform_customvalidation.webp) \ No newline at end of file diff --git a/blazor/data-form/form-binding.md b/blazor/data-form/form-binding.md index 635c6331cc..ff3de749a6 100644 --- a/blazor/data-form/form-binding.md +++ b/blazor/data-form/form-binding.md @@ -23,7 +23,7 @@ The following example illustrates how the `Model` is bound to the DataForm compo {% endhighlight %} {% endtabs %} -![Blazor DataForm Model Binding](images/blazor_dataform_formbinding.png) +![Blazor DataForm Model Binding](images/blazor_dataform_formbinding.webp) ## Edit context binding diff --git a/blazor/data-form/form-group.md b/blazor/data-form/form-group.md index a42a36a929..e16c911fa0 100644 --- a/blazor/data-form/form-group.md +++ b/blazor/data-form/form-group.md @@ -23,7 +23,7 @@ The following example shows how to configure a `FormGroup` within the DataForm u {% endhighlight %} {% endtabs %} -![Blazor DataForm showing a single form group with label and items](images/blazor_dataform_single_formgroup.png) +![Blazor DataForm showing a single form group with label and items](images/blazor_dataform_single_formgroup.webp) ## Column layout for the group @@ -42,7 +42,7 @@ The DataForm can arrange multiple form groups across columns using the form-leve {% endhighlight %} {% endtabs %} -![Blazor DataForm Form Group](images/blazor_dataform_multiple_formgroup.png) +![Blazor DataForm Form Group](images/blazor_dataform_multiple_formgroup.webp) ## Configure the column spacing @@ -63,7 +63,7 @@ This section explains how to divide the collection of [FormGroups](https://help. In the example, the DataForm contains two groups. The first group uses six internal columns and distributes its fields by their column spans. The second group uses two internal columns and arranges its fields accordingly. -![Blazor DataForm form group column layout with per-group column counts and spacing](images/blazor_dataform_formgroup_column_layout.png) +![Blazor DataForm form group column layout with per-group column counts and spacing](images/blazor_dataform_formgroup_column_layout.webp) ## Change the appearance of the form group @@ -83,4 +83,4 @@ Customize the appearance of a form group using the [CssClass](https://help.syncf {% endhighlight %} {% endtabs %} -![Blazor DataForm form group customized with background color and padding](images/blazor_dataform_formgroup_customization.png) \ No newline at end of file +![Blazor DataForm form group customized with background color and padding](images/blazor_dataform_formgroup_customization.webp) \ No newline at end of file diff --git a/blazor/data-form/form-items.md b/blazor/data-form/form-items.md index 8a6914d48a..f30420a119 100644 --- a/blazor/data-form/form-items.md +++ b/blazor/data-form/form-items.md @@ -36,7 +36,7 @@ The [Field](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.For {% endhighlight %} {% endtabs %} -![Blazor DataForm form item showing mapped field and custom ID](images/blazor_dataform_configure_model_ID.png) +![Blazor DataForm form item showing mapped field and custom ID](images/blazor_dataform_configure_model_ID.webp) ## Set the placeholder @@ -56,7 +56,7 @@ The [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataFo {% endhighlight %} {% endtabs %} -![Blazor DataForm form item with placeholder text in the editor](./images/blazor_dataform_placeholder.png) +![Blazor DataForm form item with placeholder text in the editor](./images/blazor_dataform_placeholder.webp) ## Change the editor type @@ -86,7 +86,7 @@ The [EditorType](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataFor {% endhighlight %} {% endtabs %} -![Blazor DataForm form items rendered with different editor types](images/blazor_dataform_formitem.png) +![Blazor DataForm form items rendered with different editor types](images/blazor_dataform_formitem.webp) ## Disable a form item @@ -106,7 +106,7 @@ The [IsEnabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm {% endhighlight %} {% endtabs %} -![Blazor DataForm form item in a disabled state](images/blazor_dataform_formitem_disabled.png) +![Blazor DataForm form item in a disabled state](images/blazor_dataform_formitem_disabled.webp) ## Change the label text @@ -128,7 +128,7 @@ Set the label using the [LabelText](https://help.syncfusion.com/cr/blazor/Syncfu {% endhighlight %} {% endtabs %} -![Blazor DataForm form item with customized label text](./images/blazor_dataform_label_text.png) +![Blazor DataForm form item with customized label text](./images/blazor_dataform_label_text.webp) ## Change the appearance of the field editor @@ -148,7 +148,7 @@ Use the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataF {% endhighlight %} {% endtabs %} -![Blazor DataForm form item styled using a custom CSS class](images/blazor_dataform_formitem_cssclass.png) +![Blazor DataForm form item styled using a custom CSS class](images/blazor_dataform_formitem_cssclass.webp) ## See also diff --git a/blazor/data-form/getting-started-with-server-app.md b/blazor/data-form/getting-started-with-server-app.md index d7318a516f..7ff2eeab7e 100644 --- a/blazor/data-form/getting-started-with-server-app.md +++ b/blazor/data-form/getting-started-with-server-app.md @@ -207,6 +207,6 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataForm component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm Component](images/blazor-dataform.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm Component](images/blazor-dataform.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataForm). \ No newline at end of file diff --git a/blazor/data-form/getting-started-with-web-app.md b/blazor/data-form/getting-started-with-web-app.md index 2d12a64bf3..81a9620c24 100644 --- a/blazor/data-form/getting-started-with-web-app.md +++ b/blazor/data-form/getting-started-with-web-app.md @@ -213,6 +213,6 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataForm component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm Component](images/blazor-dataform.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm Component](images/blazor-dataform.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataForm). \ No newline at end of file diff --git a/blazor/data-form/getting-started.md b/blazor/data-form/getting-started.md index 853abb6319..0c554c2796 100644 --- a/blazor/data-form/getting-started.md +++ b/blazor/data-form/getting-started.md @@ -194,6 +194,6 @@ Add the Syncfusion® Blazor DataForm compone * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DataForm component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm getting started example](images/blazor-dataform.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/hNhfXCLaBIvJBwaZ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DataForm getting started example](images/blazor-dataform.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DataForm). \ No newline at end of file diff --git a/blazor/data-form/images/blazor-dataform.webp b/blazor/data-form/images/blazor-dataform.webp new file mode 100644 index 0000000000..e65d265085 Binary files /dev/null and b/blazor/data-form/images/blazor-dataform.webp differ diff --git a/blazor/data-form/images/blazor_dataform_attributes.webp b/blazor/data-form/images/blazor_dataform_attributes.webp new file mode 100644 index 0000000000..625a681b32 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_attributes.webp differ diff --git a/blazor/data-form/images/blazor_dataform_autogenerateditems.webp b/blazor/data-form/images/blazor_dataform_autogenerateditems.webp new file mode 100644 index 0000000000..337a6bfc8d Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_autogenerateditems.webp differ diff --git a/blazor/data-form/images/blazor_dataform_button_alignment_center.webp b/blazor/data-form/images/blazor_dataform_button_alignment_center.webp new file mode 100644 index 0000000000..0df36589dc Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_button_alignment_center.webp differ diff --git a/blazor/data-form/images/blazor_dataform_button_alignment_left.webp b/blazor/data-form/images/blazor_dataform_button_alignment_left.webp new file mode 100644 index 0000000000..8a6a928402 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_button_alignment_left.webp differ diff --git a/blazor/data-form/images/blazor_dataform_button_alignment_right.webp b/blazor/data-form/images/blazor_dataform_button_alignment_right.webp new file mode 100644 index 0000000000..a3e51a032b Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_button_alignment_right.webp differ diff --git a/blazor/data-form/images/blazor_dataform_button_alignment_stretch.webp b/blazor/data-form/images/blazor_dataform_button_alignment_stretch.webp new file mode 100644 index 0000000000..214edb2077 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_button_alignment_stretch.webp differ diff --git a/blazor/data-form/images/blazor_dataform_cancel_autogenerateditems.webp b/blazor/data-form/images/blazor_dataform_cancel_autogenerateditems.webp new file mode 100644 index 0000000000..ed329243c3 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_cancel_autogenerateditems.webp differ diff --git a/blazor/data-form/images/blazor_dataform_change_form_width.webp b/blazor/data-form/images/blazor_dataform_change_form_width.webp new file mode 100644 index 0000000000..8fefacaff5 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_change_form_width.webp differ diff --git a/blazor/data-form/images/blazor_dataform_column_layout.webp b/blazor/data-form/images/blazor_dataform_column_layout.webp new file mode 100644 index 0000000000..e5766f2cd3 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_column_layout.webp differ diff --git a/blazor/data-form/images/blazor_dataform_column_span.webp b/blazor/data-form/images/blazor_dataform_column_span.webp new file mode 100644 index 0000000000..eba18f551e Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_column_span.webp differ diff --git a/blazor/data-form/images/blazor_dataform_complextypevalidation.webp b/blazor/data-form/images/blazor_dataform_complextypevalidation.webp new file mode 100644 index 0000000000..3e966de665 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_complextypevalidation.webp differ diff --git a/blazor/data-form/images/blazor_dataform_configure_model_ID.webp b/blazor/data-form/images/blazor_dataform_configure_model_ID.webp new file mode 100644 index 0000000000..fa7d541ea6 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_configure_model_ID.webp differ diff --git a/blazor/data-form/images/blazor_dataform_custom_attributes.webp b/blazor/data-form/images/blazor_dataform_custom_attributes.webp new file mode 100644 index 0000000000..91707ecccc Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_custom_attributes.webp differ diff --git a/blazor/data-form/images/blazor_dataform_customvalidation.webp b/blazor/data-form/images/blazor_dataform_customvalidation.webp new file mode 100644 index 0000000000..c64e48e84b Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_customvalidation.webp differ diff --git a/blazor/data-form/images/blazor_dataform_data_type_credit_card.webp b/blazor/data-form/images/blazor_dataform_data_type_credit_card.webp new file mode 100644 index 0000000000..c7e9c780ea Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_data_type_credit_card.webp differ diff --git a/blazor/data-form/images/blazor_dataform_data_type_currency.webp b/blazor/data-form/images/blazor_dataform_data_type_currency.webp new file mode 100644 index 0000000000..790f148572 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_data_type_currency.webp differ diff --git a/blazor/data-form/images/blazor_dataform_data_type_date.webp b/blazor/data-form/images/blazor_dataform_data_type_date.webp new file mode 100644 index 0000000000..e6d8f8ec71 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_data_type_date.webp differ diff --git a/blazor/data-form/images/blazor_dataform_data_type_date_time.webp b/blazor/data-form/images/blazor_dataform_data_type_date_time.webp new file mode 100644 index 0000000000..ab7eb22931 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_data_type_date_time.webp differ diff --git a/blazor/data-form/images/blazor_dataform_data_type_email_address.webp b/blazor/data-form/images/blazor_dataform_data_type_email_address.webp new file mode 100644 index 0000000000..93ef293de5 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_data_type_email_address.webp differ diff --git a/blazor/data-form/images/blazor_dataform_data_type_multiline_text.webp b/blazor/data-form/images/blazor_dataform_data_type_multiline_text.webp new file mode 100644 index 0000000000..96eebd3f6b Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_data_type_multiline_text.webp differ diff --git a/blazor/data-form/images/blazor_dataform_data_type_password.webp b/blazor/data-form/images/blazor_dataform_data_type_password.webp new file mode 100644 index 0000000000..4645f98d45 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_data_type_password.webp differ diff --git a/blazor/data-form/images/blazor_dataform_data_type_phone.webp b/blazor/data-form/images/blazor_dataform_data_type_phone.webp new file mode 100644 index 0000000000..b1ceb5f486 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_data_type_phone.webp differ diff --git a/blazor/data-form/images/blazor_dataform_data_type_text.webp b/blazor/data-form/images/blazor_dataform_data_type_text.webp new file mode 100644 index 0000000000..2ebc4d88e1 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_data_type_text.webp differ diff --git a/blazor/data-form/images/blazor_dataform_data_type_time.webp b/blazor/data-form/images/blazor_dataform_data_type_time.webp new file mode 100644 index 0000000000..22b75220ba Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_data_type_time.webp differ diff --git a/blazor/data-form/images/blazor_dataform_dataannotationsvalidator.webp b/blazor/data-form/images/blazor_dataform_dataannotationsvalidator.webp new file mode 100644 index 0000000000..64123d3b88 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_dataannotationsvalidator.webp differ diff --git a/blazor/data-form/images/blazor_dataform_default_label_position.webp b/blazor/data-form/images/blazor_dataform_default_label_position.webp new file mode 100644 index 0000000000..d3066e0896 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_default_label_position.webp differ diff --git a/blazor/data-form/images/blazor_dataform_fluentvalidation.webp b/blazor/data-form/images/blazor_dataform_fluentvalidation.webp new file mode 100644 index 0000000000..3e966de665 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_fluentvalidation.webp differ diff --git a/blazor/data-form/images/blazor_dataform_formbinding.webp b/blazor/data-form/images/blazor_dataform_formbinding.webp new file mode 100644 index 0000000000..3e1fc81382 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_formbinding.webp differ diff --git a/blazor/data-form/images/blazor_dataform_formbuttons.webp b/blazor/data-form/images/blazor_dataform_formbuttons.webp new file mode 100644 index 0000000000..b88b281fa9 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_formbuttons.webp differ diff --git a/blazor/data-form/images/blazor_dataform_formgroup_column_layout.webp b/blazor/data-form/images/blazor_dataform_formgroup_column_layout.webp new file mode 100644 index 0000000000..96edca8d36 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_formgroup_column_layout.webp differ diff --git a/blazor/data-form/images/blazor_dataform_formgroup_customization.webp b/blazor/data-form/images/blazor_dataform_formgroup_customization.webp new file mode 100644 index 0000000000..316afa2fe4 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_formgroup_customization.webp differ diff --git a/blazor/data-form/images/blazor_dataform_formitem.webp b/blazor/data-form/images/blazor_dataform_formitem.webp new file mode 100644 index 0000000000..30b8582351 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_formitem.webp differ diff --git a/blazor/data-form/images/blazor_dataform_formitem_cssclass.webp b/blazor/data-form/images/blazor_dataform_formitem_cssclass.webp new file mode 100644 index 0000000000..912ad6a68b Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_formitem_cssclass.webp differ diff --git a/blazor/data-form/images/blazor_dataform_formitem_disabled.webp b/blazor/data-form/images/blazor_dataform_formitem_disabled.webp new file mode 100644 index 0000000000..b7d7175068 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_formitem_disabled.webp differ diff --git a/blazor/data-form/images/blazor_dataform_formtemplate.webp b/blazor/data-form/images/blazor_dataform_formtemplate.webp new file mode 100644 index 0000000000..ce90476e55 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_formtemplate.webp differ diff --git a/blazor/data-form/images/blazor_dataform_label_position_left.webp b/blazor/data-form/images/blazor_dataform_label_position_left.webp new file mode 100644 index 0000000000..223a980788 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_label_position_left.webp differ diff --git a/blazor/data-form/images/blazor_dataform_label_position_top.webp b/blazor/data-form/images/blazor_dataform_label_position_top.webp new file mode 100644 index 0000000000..7406bd7ff2 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_label_position_top.webp differ diff --git a/blazor/data-form/images/blazor_dataform_label_text.webp b/blazor/data-form/images/blazor_dataform_label_text.webp new file mode 100644 index 0000000000..eb484acc0c Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_label_text.webp differ diff --git a/blazor/data-form/images/blazor_dataform_localization.webp b/blazor/data-form/images/blazor_dataform_localization.webp new file mode 100644 index 0000000000..72cc23adfc Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_localization.webp differ diff --git a/blazor/data-form/images/blazor_dataform_localization_step.webp b/blazor/data-form/images/blazor_dataform_localization_step.webp new file mode 100644 index 0000000000..6c074b2298 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_localization_step.webp differ diff --git a/blazor/data-form/images/blazor_dataform_localization_step1.webp b/blazor/data-form/images/blazor_dataform_localization_step1.webp new file mode 100644 index 0000000000..f393594856 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_localization_step1.webp differ diff --git a/blazor/data-form/images/blazor_dataform_localization_step3.webp b/blazor/data-form/images/blazor_dataform_localization_step3.webp new file mode 100644 index 0000000000..76ad4eeb72 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_localization_step3.webp differ diff --git a/blazor/data-form/images/blazor_dataform_localization_step3_2.webp b/blazor/data-form/images/blazor_dataform_localization_step3_2.webp new file mode 100644 index 0000000000..375094172d Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_localization_step3_2.webp differ diff --git a/blazor/data-form/images/blazor_dataform_multiple_formgroup.webp b/blazor/data-form/images/blazor_dataform_multiple_formgroup.webp new file mode 100644 index 0000000000..8f8aa26030 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_multiple_formgroup.webp differ diff --git a/blazor/data-form/images/blazor_dataform_partially_autogenerated_items.webp b/blazor/data-form/images/blazor_dataform_partially_autogenerated_items.webp new file mode 100644 index 0000000000..e43eaf66f6 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_partially_autogenerated_items.webp differ diff --git a/blazor/data-form/images/blazor_dataform_placeholder.webp b/blazor/data-form/images/blazor_dataform_placeholder.webp new file mode 100644 index 0000000000..759ca338bb Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_placeholder.webp differ diff --git a/blazor/data-form/images/blazor_dataform_single_formgroup.webp b/blazor/data-form/images/blazor_dataform_single_formgroup.webp new file mode 100644 index 0000000000..c106a14850 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_single_formgroup.webp differ diff --git a/blazor/data-form/images/blazor_dataform_stringfields.webp b/blazor/data-form/images/blazor_dataform_stringfields.webp new file mode 100644 index 0000000000..3afca710c9 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_stringfields.webp differ diff --git a/blazor/data-form/images/blazor_dataform_template.webp b/blazor/data-form/images/blazor_dataform_template.webp new file mode 100644 index 0000000000..b0f8f5da5d Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_template.webp differ diff --git a/blazor/data-form/images/blazor_dataform_tooltip_with_templates.webp b/blazor/data-form/images/blazor_dataform_tooltip_with_templates.webp new file mode 100644 index 0000000000..101ce5f6bf Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_tooltip_with_templates.webp differ diff --git a/blazor/data-form/images/blazor_dataform_validation_display_inline.webp b/blazor/data-form/images/blazor_dataform_validation_display_inline.webp new file mode 100644 index 0000000000..0a75531115 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_validation_display_inline.webp differ diff --git a/blazor/data-form/images/blazor_dataform_validation_display_none.webp b/blazor/data-form/images/blazor_dataform_validation_display_none.webp new file mode 100644 index 0000000000..939bdffcc7 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_validation_display_none.webp differ diff --git a/blazor/data-form/images/blazor_dataform_validation_display_tooltip.webp b/blazor/data-form/images/blazor_dataform_validation_display_tooltip.webp new file mode 100644 index 0000000000..625ea33eb9 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_validation_display_tooltip.webp differ diff --git a/blazor/data-form/images/blazor_dataform_validation_summary.webp b/blazor/data-form/images/blazor_dataform_validation_summary.webp new file mode 100644 index 0000000000..3a188c8bc8 Binary files /dev/null and b/blazor/data-form/images/blazor_dataform_validation_summary.webp differ diff --git a/blazor/data-form/layout-customization.md b/blazor/data-form/layout-customization.md index 503c463d06..688bbd548f 100644 --- a/blazor/data-form/layout-customization.md +++ b/blazor/data-form/layout-customization.md @@ -22,10 +22,10 @@ The DataForm component can align form buttons horizontally within the form conta | FormButtonsAlignment | Snapshot | | ------------ | ----------------------- | -|[FormButtonsAlignment.Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Center)|![DataForm with buttons aligned to the center](images/blazor_dataform_button_alignment_center.png)| -|[FormButtonsAlignment.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Left)|![DataForm with buttons aligned to the left](images/blazor_dataform_button_alignment_left.png)| -|[FormButtonsAlignment.Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Right)|![DataForm with buttons aligned to the right](images/blazor_dataform_button_alignment_right.png)| -|[FormButtonsAlignment.Stretch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Stretch)|![DataForm with buttons stretched to full width](images/blazor_dataform_button_alignment_stretch.png)| +|[FormButtonsAlignment.Center](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Center)|![DataForm with buttons aligned to the center](images/blazor_dataform_button_alignment_center.webp)| +|[FormButtonsAlignment.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Left)|![DataForm with buttons aligned to the left](images/blazor_dataform_button_alignment_left.webp)| +|[FormButtonsAlignment.Right](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Right)|![DataForm with buttons aligned to the right](images/blazor_dataform_button_alignment_right.webp)| +|[FormButtonsAlignment.Stretch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormButtonsAlignment.html#Syncfusion_Blazor_DataForm_FormButtonsAlignment_Stretch)|![DataForm with buttons stretched to full width](images/blazor_dataform_button_alignment_stretch.webp)| The following example shows how to use the `ButtonsAlignment` property in the DataForm component. @@ -51,7 +51,7 @@ In the following example, an additional button is added to reset input fields by {% endhighlight %} {% endtabs %} -![DataForm with default submit buttons and a custom reset button](images/blazor_dataform_formbuttons.png) +![DataForm with default submit buttons and a custom reset button](images/blazor_dataform_formbuttons.webp) ## Label position @@ -59,9 +59,9 @@ The DataForm component aligns labels either at the top or to the left of the fie | LabelPosition | Snapshot | | ------------ | ----------------------- | -|[FormLabelPosition.Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Top)|![DataForm with labels positioned above editors](images/blazor_dataform_label_position_top.png)| -|[FormLabelPosition.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Left)|![DataForm with labels positioned to the left of editors](images/blazor_dataform_label_position_left.png)| -|When no specific value is provided, the layout defaults to `FormLabelPosition.Top`. For boolean editors such as [SfCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) and [SfSwitch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html), labels are positioned to the right of the control.|![DataForm default label positioning and boolean editor label placement](images/blazor_dataform_default_label_position.png)| +|[FormLabelPosition.Top](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Top)|![DataForm with labels positioned above editors](images/blazor_dataform_label_position_top.webp)| +|[FormLabelPosition.Left](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormLabelPosition.html#Syncfusion_Blazor_DataForm_FormLabelPosition_Left)|![DataForm with labels positioned to the left of editors](images/blazor_dataform_label_position_left.webp)| +|When no specific value is provided, the layout defaults to `FormLabelPosition.Top`. For boolean editors such as [SfCheckBox](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfCheckBox-1.html) and [SfSwitch](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Buttons.SfSwitch-1.html), labels are positioned to the right of the control.|![DataForm default label positioning and boolean editor label placement](images/blazor_dataform_default_label_position.webp)| The following example demonstrates how to configure the `LabelPosition` in the DataForm component. @@ -108,4 +108,4 @@ Customize the width of the form container by using the [Width](https://help.sync {% endhighlight %} {% endtabs %} -![Blazor DataForm with custom form width applied](images/blazor_dataform_change_form_width.png) \ No newline at end of file +![Blazor DataForm with custom form width applied](images/blazor_dataform_change_form_width.webp) \ No newline at end of file diff --git a/blazor/data-form/localization.md b/blazor/data-form/localization.md index 34f543bc1c..b5ed3a5740 100644 --- a/blazor/data-form/localization.md +++ b/blazor/data-form/localization.md @@ -17,16 +17,16 @@ Follow these steps to configure localization for label text and validation error 1. After integrating localization files in the application as described in the [Blazor localization](https://blazor.syncfusion.com/documentation/common/localization) topic, open the required culture resource file in Visual Studio. -![Localization step-1](./images/blazor_dataform_localization_step.png) +![Localization step-1](./images/blazor_dataform_localization_step.webp) 2. In the opened resource file, select Add Resource and include the appropriate key with the corresponding localized text as shown. -![Localization step-2](./images/blazor_dataform_localization_step1.png) +![Localization step-2](./images/blazor_dataform_localization_step1.webp) 3. Specify the [ResourceType](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute.resourcetype?view=net-8.0#system-componentmodel-dataannotations-displayattribute-resourcetype) (from the Resources folder) and the resource key in the [Display](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.displayattribute?view=net-8.0) attribute of the corresponding model property to localize labels. Similarly, localize validation messages by setting [ErrorMessageResourceType](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationattribute.errormessageresourcetype?view=net-8.0#system-componentmodel-dataannotations-validationattribute-errormessageresourcetype) and [ErrorMessageResourceName](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.validationattribute.errormessageresourcename?view=net-8.0#system-componentmodel-dataannotations-validationattribute-errormessageresourcename) on attributes such as [Required](https://learn.microsoft.com/en-us/dotnet/api/system.componentmodel.dataannotations.requiredattribute?view=net-8.0), as shown below. -| ![Localization step 3](./images/blazor_dataform_localization_step3.png) | ![Localization step 3](./images/blazor_dataform_localization_step3_2.png) | +| ![Localization step 3](./images/blazor_dataform_localization_step3.webp) | ![Localization step 3](./images/blazor_dataform_localization_step3_2.webp) | {% tabs %} {% highlight razor tabtitle="Razor" %} @@ -43,4 +43,4 @@ Follow these steps to configure localization for label text and validation error 4. Run the application to view the DataForm with localized labels and validation messages. -![Localization applied in the DataForm component](./images/blazor_dataform_localization.png) \ No newline at end of file +![Localization applied in the DataForm component](./images/blazor_dataform_localization.webp) \ No newline at end of file diff --git a/blazor/data-form/templates.md b/blazor/data-form/templates.md index dd64dfb49b..7162813c8b 100644 --- a/blazor/data-form/templates.md +++ b/blazor/data-form/templates.md @@ -25,7 +25,7 @@ Customize an individual field editor using the [Template](https://help.syncfusio {% endhighlight %} {% endtabs %} -![Blazor DataForm field customized using FormItem.Template](images/blazor_dataform_template.png) +![Blazor DataForm field customized using FormItem.Template](images/blazor_dataform_template.webp) The above `Template` approach can also be used alongside [FormAutoGenerateItems](./form-items.md) to auto-generate all items except those explicitly customized with a `FormItem` template. @@ -51,7 +51,7 @@ The `DataForm` supports customizing the entire form structure using a full-form {% endhighlight %} {% endtabs %} -![Blazor DataForm with a fully customized form template](images/blazor_dataform_template.png) +![Blazor DataForm with a fully customized form template](images/blazor_dataform_template.webp) The `FormTemplate` renderer can also be integrated together with `FormItem` elements, as shown in the following example. @@ -81,7 +81,7 @@ When using the `Template` renderer, validation messages can be displayed using a {% endhighlight %} {% endtabs %} -![Blazor DataForm showing validation messages in tooltips for templated editors](images/blazor_dataform_tooltip_with_templates.png) +![Blazor DataForm showing validation messages in tooltips for templated editors](images/blazor_dataform_tooltip_with_templates.webp) ## Validation summary @@ -101,4 +101,4 @@ Use the [ValidationSummary](https://learn.microsoft.com/en-us/dotnet/api/microso {% endhighlight %} {% endtabs %} -![Blazor DataForm displaying a ValidationSummary with aggregated error messages](images/blazor_dataform_validation_summary.png) +![Blazor DataForm displaying a ValidationSummary with aggregated error messages](images/blazor_dataform_validation_summary.webp) diff --git a/blazor/data-form/validation.md b/blazor/data-form/validation.md index 23c1f3b373..abc6f67796 100644 --- a/blazor/data-form/validation.md +++ b/blazor/data-form/validation.md @@ -23,7 +23,7 @@ DataForm supports standard and custom validation compatible with the[EditForm](h {% endhighlight %} {% endtabs %} -![Blazor DataForm showing validation errors using DataAnnotationsValidator](images/blazor_dataform_dataannotationsvalidator.png) +![Blazor DataForm showing validation errors using DataAnnotationsValidator](images/blazor_dataform_dataannotationsvalidator.webp) ## Validation message display @@ -31,9 +31,9 @@ Validation messages can be displayed inline, via tooltip, or hidden by using [Va | FormValidationDisplay | Snapshot | | ------------ | ----------------------- | -|[FormValidationDisplay.Inline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_Inline)|![Blazor DataForm with inline validation messages beneath fields](images/blazor_dataform_validation_display_inline.png)| -|[FormValidationDisplay.Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_Tooltip)|![Blazor DataForm displaying validation messages in tooltips](images/blazor_dataform_validation_display_tooltip.png)| -|[FormValidationDisplay.None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_None)|![Blazor DataForm with validation messages hidden](images/blazor_dataform_validation_display_none.png)| +|[FormValidationDisplay.Inline](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_Inline)|![Blazor DataForm with inline validation messages beneath fields](images/blazor_dataform_validation_display_inline.webp)| +|[FormValidationDisplay.Tooltip](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_Tooltip)|![Blazor DataForm displaying validation messages in tooltips](images/blazor_dataform_validation_display_tooltip.webp)| +|[FormValidationDisplay.None](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DataForm.FormValidationDisplay.html#Syncfusion_Blazor_DataForm_FormValidationDisplay_None)|![Blazor DataForm with validation messages hidden](images/blazor_dataform_validation_display_none.webp)| The following example demonstrates how to configure validation message presentation in the DataForm component. @@ -59,7 +59,7 @@ N> Install the [Microsoft.AspNetCore.Components.DataAnnotations.Validation](http {% endhighlight %} {% endtabs %} -![Blazor DataForm validating nested and complex types using ObjectGraphDataAnnotationsValidator](images/blazor_dataform_complextypevalidation.png) +![Blazor DataForm validating nested and complex types using ObjectGraphDataAnnotationsValidator](images/blazor_dataform_complextypevalidation.webp) ## Fluent validation @@ -75,7 +75,7 @@ N> Install the [Blazilla](https://www.nuget.org/packages/Blazilla) NuGet package {% endhighlight %} {% endtabs %} -![Blazor DataForm showing errors produced by Fluent validation rules](images/blazor_dataform_fluentvalidation.png) +![Blazor DataForm showing errors produced by Fluent validation rules](images/blazor_dataform_fluentvalidation.webp) ## See also diff --git a/blazor/dropdown-list/customization.md b/blazor/dropdown-list/customization.md index c0b1fea58e..e9d1897aed 100644 --- a/blazor/dropdown-list/customization.md +++ b/blazor/dropdown-list/customization.md @@ -43,4 +43,4 @@ Automatically open the dropdown by using [ShowPopupAsync()](https://help.syncfus } ``` -![Blazor Dropdown List Customization](./images/blazor-dropdownlist-customization.png) \ No newline at end of file +![Blazor Dropdown List Customization](./images/blazor-dropdownlist-customization.webp) \ No newline at end of file diff --git a/blazor/dropdown-list/data-binding.md b/blazor/dropdown-list/data-binding.md index 129ddb677e..17818e1e61 100644 --- a/blazor/dropdown-list/data-binding.md +++ b/blazor/dropdown-list/data-binding.md @@ -23,7 +23,7 @@ The DropDown List loads data from local sources through the [DataSource](https:/ {% endhighlight %} -![Blazor DropdownList with local data binding](./images/data-binding/blazor_dropdown_local-binding.png) +![Blazor DropdownList with local data binding](./images/data-binding/blazor_dropdown_local-binding.webp) ### DataBound event @@ -47,7 +47,7 @@ The following code demonstrates an array of string values bound to the DropDown {% endhighlight %} -![Blazor DropdownList with Primitive string type](./images/data-binding/blazor_dropdown_primitive-type-string.png) +![Blazor DropdownList with Primitive string type](./images/data-binding/blazor_dropdown_primitive-type-string.webp) The following code demonstrates an array of integer values bound to the DropDown List component. @@ -57,7 +57,7 @@ The following code demonstrates an array of integer values bound to the DropDown {% endhighlight %} -![Blazor DropdownList with Primitive int type](./images/data-binding/blazor_dropdown_primitive-type-int.png) +![Blazor DropdownList with Primitive int type](./images/data-binding/blazor_dropdown_primitive-type-int.webp) ### Complex data type @@ -71,7 +71,7 @@ In the following example, `Code.ID` is mapped to [DropDownListFieldSettings.Valu {% endhighlight %} -![Blazor DropdownList with Complex data type](./images/data-binding/blazor_dropdown_complex-data-type.png) +![Blazor DropdownList with Complex data type](./images/data-binding/blazor_dropdown_complex-data-type.webp) ### Expando object binding @@ -83,7 +83,7 @@ Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic {% endhighlight %} -![Blazor DropdownList with Expando object binding](./images/data-binding/blazor_dropdown_expando-object-binding.png) +![Blazor DropdownList with Expando object binding](./images/data-binding/blazor_dropdown_expando-object-binding.webp) ### Observable collection binding @@ -95,7 +95,7 @@ Bind an [ObservableCollection](https://blazor.syncfusion.com/documentation/commo {% endhighlight %} -![Blazor DropdownList with Observable collection binding](./images/data-binding/blazor_dropdown_observable-collection-binding.png) +![Blazor DropdownList with Observable collection binding](./images/data-binding/blazor_dropdown_observable-collection-binding.webp) ### Dynamic object binding @@ -107,7 +107,7 @@ Bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic {% endhighlight %} -![Blazor DropdownList with Dynamic object binding](./images/data-binding/blazor_dropdown_dynamic-data-binding.png) +![Blazor DropdownList with Dynamic object binding](./images/data-binding/blazor_dropdown_dynamic-data-binding.webp) ### Enum data binding @@ -119,7 +119,7 @@ Bind enum values to the DropDown List. The following example shows how to displa {% endhighlight %} -![Blazor DropdownList with Enum data binding](./images/data-binding/blazor_dropdown_enum-data-binding.png) +![Blazor DropdownList with Enum data binding](./images/data-binding/blazor_dropdown_enum-data-binding.webp) ### ValueTuple data binding @@ -131,7 +131,7 @@ Bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple {% endhighlight %} -![Blazor DropdownList with ValueTuple data binding](./images/data-binding/blazor_dropdown_value-tuple-data-binding.png) +![Blazor DropdownList with ValueTuple data binding](./images/data-binding/blazor_dropdown_value-tuple-data-binding.webp) ## Binding remote data @@ -181,7 +181,7 @@ The [OData v4 Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors {% endhighlight %} -![Blazor DropdownList with OData v4 Adaptor](./images/data-binding/blazor_dropdown_odata-v4-services.png) +![Blazor DropdownList with OData v4 Adaptor](./images/data-binding/blazor_dropdown_odata-v4-services.webp) ### Web API adaptor @@ -193,7 +193,7 @@ The [Web API Adaptor](https://blazor.syncfusion.com/documentation/data/adaptors# {% endhighlight %} -![Blazor DropdownList with Web API Adaptor](./images/data-binding/blazor_dropdown_web-api-adaptor.png) +![Blazor DropdownList with Web API Adaptor](./images/data-binding/blazor_dropdown_web-api-adaptor.webp) ### Custom adaptor @@ -236,7 +236,7 @@ To reduce network requests, load all data at initialization and process actions {% endhighlight %} -![Blazor DropdownList with Offline mode](./images/data-binding/blazor_dropdown_offline-mode.png) +![Blazor DropdownList with Offline mode](./images/data-binding/blazor_dropdown_offline-mode.webp) ### Entity Framework @@ -372,7 +372,7 @@ Use [AddItemsAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Drop {% endhighlight %} -![Blazor DropdownList with adding new Item](./images/data-binding/blazor_dropdown_add-new-item.png) +![Blazor DropdownList with adding new Item](./images/data-binding/blazor_dropdown_add-new-item.webp) ## Getting datasource of dropdown list diff --git a/blazor/dropdown-list/disabled-items.md b/blazor/dropdown-list/disabled-items.md index fed2ab13d8..e2c868069b 100644 --- a/blazor/dropdown-list/disabled-items.md +++ b/blazor/dropdown-list/disabled-items.md @@ -34,4 +34,4 @@ Use the disable item API to change the disabled state of an item at runtime (for If you want to disabled the overall component to set the [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_Enabled) property to false. -![Disabled DropDownList Component](./images/dropdownlist-disable.png) +![Disabled DropDownList Component](./images/dropdownlist-disable.webp) diff --git a/blazor/dropdown-list/filtering.md b/blazor/dropdown-list/filtering.md index 15002fd731..a937c296e5 100644 --- a/blazor/dropdown-list/filtering.md +++ b/blazor/dropdown-list/filtering.md @@ -21,7 +21,7 @@ The following example demonstrates filtering with local data in the DropDown Lis {% endhighlight %} -![Blazor DropdownList with local data filtering](./images/filtering/blazor_dropdown_local-data.png) +![Blazor DropdownList with local data filtering](./images/filtering/blazor_dropdown_local-data.webp) ## Remote data @@ -35,7 +35,7 @@ The following example demonstrates filtering with [ODataAdaptor](https://blazor. {% endhighlight %} -![Blazor DropdownList with Remote Data filtering](./images/filtering/blazor_dropdown_remote-data.png) +![Blazor DropdownList with Remote Data filtering](./images/filtering/blazor_dropdown_remote-data.webp) ## Debounce delay @@ -68,7 +68,7 @@ In the following example, `EndsWith` is assigned to `FilterType`. {% endhighlight %} -![Blazor DropdownList with Filter Type](./images/filtering/blazor_dropdown_filter-type.png) +![Blazor DropdownList with Filter Type](./images/filtering/blazor_dropdown_filter-type.webp) ## Case sensitive filtering @@ -92,7 +92,7 @@ Use [FilterBarPlaceholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz {% endhighlight %} -![Blazor DropdownList with Filter Textbox Placeholder](./images/filtering/blazor_dropdown_filter-textbox-placeholder.png) +![Blazor DropdownList with Filter Textbox Placeholder](./images/filtering/blazor_dropdown_filter-textbox-placeholder.webp) ## Custom filtering @@ -106,7 +106,7 @@ In the following example, the data is filtered by matching text in both the `Fir {% endhighlight %} -![Blazor DropdownList with custom filtering](./images/filtering/blazor_dropdown_custom-filtering.png) +![Blazor DropdownList with custom filtering](./images/filtering/blazor_dropdown_custom-filtering.webp) ## Multi column filtering @@ -118,7 +118,7 @@ To enable multi-column layout in the built-in Syncfusion® Blazor DropDown List co Run the sample in Windows Machine mode to launch the .NET MAUI Blazor app on Windows. -![Blazor DropDownList Component](./images/blazor-dropdownlist-maui-app.png) +![Blazor DropDownList Component](./images/blazor-dropdownlist-maui-app.webp) ### How to run the sample on Android @@ -146,7 +146,7 @@ Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/devi N> If encounter any errors while using the Android Emulator, refer to the following link for troubleshooting guidance [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). -![Blazor DropDownList Component](./images/blazor-dropdownlist-component.png) +![Blazor DropDownList Component](./images/blazor-dropdownlist-component.webp) ## Binding data source @@ -184,7 +184,7 @@ After initialization, populate the DropDownList with data using the [DataSource] {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfZWVOAySCbMYl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor DropDownList](./images/blazor-dropdownlist-data-binding.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfZWVOAySCbMYl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor DropDownList](./images/blazor-dropdownlist-data-binding.webp)" %} ## Configure the popup list @@ -222,7 +222,7 @@ By default, the width of the popup list automatically adjusts according to the D {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/htrTDWBYqHlMcKgk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Popup List Height in Blazor DropDownList](./images/blazor-dropdownlist-popup-height.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrTDWBYqHlMcKgk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Popup List Height in Blazor DropDownList](./images/blazor-dropdownlist-popup-height.webp)" %} ## Get selected value diff --git a/blazor/dropdown-list/getting-started-with-server-app.md b/blazor/dropdown-list/getting-started-with-server-app.md index db5849b55d..89cb17a8bd 100644 --- a/blazor/dropdown-list/getting-started-with-server-app.md +++ b/blazor/dropdown-list/getting-started-with-server-app.md @@ -170,7 +170,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DropDownList component will render in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.webp)" %} ## Binding data source @@ -208,7 +208,7 @@ After initialization, populate the DropDownList with data using the [DataSource] {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfZWVOAySCbMYl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor DropDownList](./images/blazor-dropdownlist-data-binding.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfZWVOAySCbMYl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor DropDownList](./images/blazor-dropdownlist-data-binding.webp)" %} ## Configure the popup list @@ -246,7 +246,7 @@ By default, the popup list width adjusts to match the DropDownList input width, {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/htrTDWBYqHlMcKgk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Popup List Height in Blazor DropDownList](./images/blazor-dropdownlist-popup-height.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrTDWBYqHlMcKgk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Popup List Height in Blazor DropDownList](./images/blazor-dropdownlist-popup-height.webp)" %} ## Get selected value diff --git a/blazor/dropdown-list/getting-started-with-web-app.md b/blazor/dropdown-list/getting-started-with-web-app.md index a36e09f254..30186a7de3 100644 --- a/blazor/dropdown-list/getting-started-with-web-app.md +++ b/blazor/dropdown-list/getting-started-with-web-app.md @@ -176,7 +176,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor DropDown List component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.webp)" %} ## Binding data source @@ -214,7 +214,7 @@ After initialization, populate the DropDownList with data using the [DataSource] {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfZWVOAySCbMYl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor DropDownList](./images/blazor-dropdownlist-data-binding.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfZWVOAySCbMYl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor DropDownList](./images/blazor-dropdownlist-data-binding.webp)" %} ## Configure the popup list @@ -252,7 +252,7 @@ By default, the popup list width adjusts to the DropDownList input width, and th {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/htrTDWBYqHlMcKgk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Popup List Height in Blazor DropDownList](./images/blazor-dropdownlist-popup-height.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrTDWBYqHlMcKgk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Popup List Height in Blazor DropDownList](./images/blazor-dropdownlist-popup-height.webp)" %} ## Get selected value diff --git a/blazor/dropdown-list/getting-started.md b/blazor/dropdown-list/getting-started.md index 733870f893..d6325964b6 100644 --- a/blazor/dropdown-list/getting-started.md +++ b/blazor/dropdown-list/getting-started.md @@ -157,7 +157,7 @@ Add the Syncfusion® Blazor DropDown List co * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. The Syncfusion® Blazor DropDownList component renders in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTDChuUITQFPJn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor DropDownList Component](./images/blazor-dropdownlist-component.webp)" %} N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/DropDownList). @@ -197,7 +197,7 @@ After initialization, populate the DropDownList with data using the [DataSource] {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfZWVOAySCbMYl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor DropDownList](./images/blazor-dropdownlist-data-binding.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDVfZWVOAySCbMYl?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor DropDownList](./images/blazor-dropdownlist-data-binding.webp)" %} ## Configure the popup list @@ -235,7 +235,7 @@ By default, the popup list width automatically adjusts to the DropDownList input {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/htrTDWBYqHlMcKgk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Popup List Height in Blazor DropDownList](./images/blazor-dropdownlist-popup-height.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htrTDWBYqHlMcKgk?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Changing Popup List Height in Blazor DropDownList](./images/blazor-dropdownlist-popup-height.webp)" %} ## Get selected value diff --git a/blazor/dropdown-list/grouping.md b/blazor/dropdown-list/grouping.md index 5c56e30221..84ce04c968 100644 --- a/blazor/dropdown-list/grouping.md +++ b/blazor/dropdown-list/grouping.md @@ -23,7 +23,7 @@ In the following sample, vegetables are grouped according to their category usin {% endhighlight %} -![Grouping in Blazor DropDownList](./images/grouping/blazor-dropdownlist-grouping.png) +![Grouping in Blazor DropDownList](./images/grouping/blazor-dropdownlist-grouping.webp) ## Fixed group header diff --git a/blazor/dropdown-list/images/blazor-dropdown-valuetuple.webp b/blazor/dropdown-list/images/blazor-dropdown-valuetuple.webp new file mode 100644 index 0000000000..e18c5795dd Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdown-valuetuple.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-action-failure-template.webp b/blazor/dropdown-list/images/blazor-dropdownlist-action-failure-template.webp new file mode 100644 index 0000000000..0c746ec2b0 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-action-failure-template.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-binding-data.webp b/blazor/dropdown-list/images/blazor-dropdownlist-binding-data.webp new file mode 100644 index 0000000000..f9bc382597 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-binding-data.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-binding-items.webp b/blazor/dropdown-list/images/blazor-dropdownlist-binding-items.webp new file mode 100644 index 0000000000..f583cd8fca Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-binding-items.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-complex-data.webp b/blazor/dropdown-list/images/blazor-dropdownlist-complex-data.webp new file mode 100644 index 0000000000..53c5912014 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-complex-data.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-component.webp b/blazor/dropdown-list/images/blazor-dropdownlist-component.webp new file mode 100644 index 0000000000..26e1dd4588 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-component.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-customization.webp b/blazor/dropdown-list/images/blazor-dropdownlist-customization.webp new file mode 100644 index 0000000000..b37acb79e7 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-customization.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-data-binding.webp b/blazor/dropdown-list/images/blazor-dropdownlist-data-binding.webp new file mode 100644 index 0000000000..4af07bd933 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-data-binding.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-enum-data.webp b/blazor/dropdown-list/images/blazor-dropdownlist-enum-data.webp new file mode 100644 index 0000000000..47f9e2ba64 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-enum-data.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-filtering.webp b/blazor/dropdown-list/images/blazor-dropdownlist-filtering.webp new file mode 100644 index 0000000000..65c61e307f Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-filtering.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-footer-template.webp b/blazor/dropdown-list/images/blazor-dropdownlist-footer-template.webp new file mode 100644 index 0000000000..1e5762e70f Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-footer-template.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-group-template.webp b/blazor/dropdown-list/images/blazor-dropdownlist-group-template.webp new file mode 100644 index 0000000000..6f686fc89f Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-group-template.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-grouping.webp b/blazor/dropdown-list/images/blazor-dropdownlist-grouping.webp new file mode 100644 index 0000000000..8c42a17454 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-grouping.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-header-template.webp b/blazor/dropdown-list/images/blazor-dropdownlist-header-template.webp new file mode 100644 index 0000000000..bc0e0519d8 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-header-template.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-item-template.webp b/blazor/dropdown-list/images/blazor-dropdownlist-item-template.webp new file mode 100644 index 0000000000..52b0ba7b9d Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-item-template.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-localization.webp b/blazor/dropdown-list/images/blazor-dropdownlist-localization.webp new file mode 100644 index 0000000000..044d6c01f9 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-localization.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-maui-app.webp b/blazor/dropdown-list/images/blazor-dropdownlist-maui-app.webp new file mode 100644 index 0000000000..3f07866574 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-maui-app.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-popup-height.webp b/blazor/dropdown-list/images/blazor-dropdownlist-popup-height.webp new file mode 100644 index 0000000000..c5d7a96a79 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-popup-height.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-tooltip.webp b/blazor/dropdown-list/images/blazor-dropdownlist-tooltip.webp new file mode 100644 index 0000000000..7a4c0ae7b2 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-tooltip.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-value-template.webp b/blazor/dropdown-list/images/blazor-dropdownlist-value-template.webp new file mode 100644 index 0000000000..6a741068b0 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-value-template.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-web-api-data.webp b/blazor/dropdown-list/images/blazor-dropdownlist-web-api-data.webp new file mode 100644 index 0000000000..7bdc255872 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-web-api-data.webp differ diff --git a/blazor/dropdown-list/images/blazor-dropdownlist-without-data.webp b/blazor/dropdown-list/images/blazor-dropdownlist-without-data.webp new file mode 100644 index 0000000000..981f4516d1 Binary files /dev/null and b/blazor/dropdown-list/images/blazor-dropdownlist-without-data.webp differ diff --git a/blazor/dropdown-list/images/blazor_dropdown_dynamic-object.webp b/blazor/dropdown-list/images/blazor_dropdown_dynamic-object.webp new file mode 100644 index 0000000000..30e5c8c8c5 Binary files /dev/null and b/blazor/dropdown-list/images/blazor_dropdown_dynamic-object.webp differ diff --git a/blazor/dropdown-list/images/blazor_dropdown_expando-object.webp b/blazor/dropdown-list/images/blazor_dropdown_expando-object.webp new file mode 100644 index 0000000000..9eae9fce9c Binary files /dev/null and b/blazor/dropdown-list/images/blazor_dropdown_expando-object.webp differ diff --git a/blazor/dropdown-list/images/blazor_dropdown_observable-collection.webp b/blazor/dropdown-list/images/blazor_dropdown_observable-collection.webp new file mode 100644 index 0000000000..e81b7e5c54 Binary files /dev/null and b/blazor/dropdown-list/images/blazor_dropdown_observable-collection.webp differ diff --git a/blazor/dropdown-list/images/data-binding/blazor_dropdown_add-new-item.webp b/blazor/dropdown-list/images/data-binding/blazor_dropdown_add-new-item.webp new file mode 100644 index 0000000000..6e87de7e87 Binary files /dev/null and b/blazor/dropdown-list/images/data-binding/blazor_dropdown_add-new-item.webp differ diff --git a/blazor/dropdown-list/images/data-binding/blazor_dropdown_complex-data-type.webp b/blazor/dropdown-list/images/data-binding/blazor_dropdown_complex-data-type.webp new file mode 100644 index 0000000000..eccc51ba53 Binary files /dev/null and b/blazor/dropdown-list/images/data-binding/blazor_dropdown_complex-data-type.webp differ diff --git a/blazor/dropdown-list/images/data-binding/blazor_dropdown_dynamic-data-binding.webp b/blazor/dropdown-list/images/data-binding/blazor_dropdown_dynamic-data-binding.webp new file mode 100644 index 0000000000..17fd1145ca Binary files /dev/null and b/blazor/dropdown-list/images/data-binding/blazor_dropdown_dynamic-data-binding.webp differ diff --git a/blazor/dropdown-list/images/data-binding/blazor_dropdown_enum-data-binding.webp b/blazor/dropdown-list/images/data-binding/blazor_dropdown_enum-data-binding.webp new file mode 100644 index 0000000000..1387936ccd Binary files /dev/null and b/blazor/dropdown-list/images/data-binding/blazor_dropdown_enum-data-binding.webp differ diff --git a/blazor/dropdown-list/images/data-binding/blazor_dropdown_expando-object-binding.webp b/blazor/dropdown-list/images/data-binding/blazor_dropdown_expando-object-binding.webp new file mode 100644 index 0000000000..4d67c3f92e Binary files /dev/null and b/blazor/dropdown-list/images/data-binding/blazor_dropdown_expando-object-binding.webp differ diff --git a/blazor/dropdown-list/images/data-binding/blazor_dropdown_local-binding.webp b/blazor/dropdown-list/images/data-binding/blazor_dropdown_local-binding.webp new file mode 100644 index 0000000000..b0385adac8 Binary files /dev/null and b/blazor/dropdown-list/images/data-binding/blazor_dropdown_local-binding.webp differ diff --git a/blazor/dropdown-list/images/data-binding/blazor_dropdown_observable-collection-binding.webp b/blazor/dropdown-list/images/data-binding/blazor_dropdown_observable-collection-binding.webp new file mode 100644 index 0000000000..bb547e889d Binary files /dev/null and b/blazor/dropdown-list/images/data-binding/blazor_dropdown_observable-collection-binding.webp differ diff --git a/blazor/dropdown-list/images/data-binding/blazor_dropdown_odata-v4-services.webp b/blazor/dropdown-list/images/data-binding/blazor_dropdown_odata-v4-services.webp new file mode 100644 index 0000000000..9df266e401 Binary files /dev/null and b/blazor/dropdown-list/images/data-binding/blazor_dropdown_odata-v4-services.webp differ diff --git a/blazor/dropdown-list/images/data-binding/blazor_dropdown_offline-mode.webp b/blazor/dropdown-list/images/data-binding/blazor_dropdown_offline-mode.webp new file mode 100644 index 0000000000..04e136b62c Binary files /dev/null and b/blazor/dropdown-list/images/data-binding/blazor_dropdown_offline-mode.webp differ diff --git a/blazor/dropdown-list/images/data-binding/blazor_dropdown_primitive-type-int.webp b/blazor/dropdown-list/images/data-binding/blazor_dropdown_primitive-type-int.webp new file mode 100644 index 0000000000..9ece3cebeb Binary files /dev/null and b/blazor/dropdown-list/images/data-binding/blazor_dropdown_primitive-type-int.webp differ diff --git a/blazor/dropdown-list/images/data-binding/blazor_dropdown_primitive-type-string.webp b/blazor/dropdown-list/images/data-binding/blazor_dropdown_primitive-type-string.webp new file mode 100644 index 0000000000..6bc1f2a049 Binary files /dev/null and b/blazor/dropdown-list/images/data-binding/blazor_dropdown_primitive-type-string.webp differ diff --git a/blazor/dropdown-list/images/data-binding/blazor_dropdown_value-tuple-data-binding.webp b/blazor/dropdown-list/images/data-binding/blazor_dropdown_value-tuple-data-binding.webp new file mode 100644 index 0000000000..3b3a85183c Binary files /dev/null and b/blazor/dropdown-list/images/data-binding/blazor_dropdown_value-tuple-data-binding.webp differ diff --git a/blazor/dropdown-list/images/data-binding/blazor_dropdown_web-api-adaptor.webp b/blazor/dropdown-list/images/data-binding/blazor_dropdown_web-api-adaptor.webp new file mode 100644 index 0000000000..04e136b62c Binary files /dev/null and b/blazor/dropdown-list/images/data-binding/blazor_dropdown_web-api-adaptor.webp differ diff --git a/blazor/dropdown-list/images/ddl_data_binding.webp b/blazor/dropdown-list/images/ddl_data_binding.webp new file mode 100644 index 0000000000..cec92f6af1 Binary files /dev/null and b/blazor/dropdown-list/images/ddl_data_binding.webp differ diff --git a/blazor/dropdown-list/images/ddl_getting_started.webp b/blazor/dropdown-list/images/ddl_getting_started.webp new file mode 100644 index 0000000000..21dbc25e32 Binary files /dev/null and b/blazor/dropdown-list/images/ddl_getting_started.webp differ diff --git a/blazor/dropdown-list/images/diacritics.webp b/blazor/dropdown-list/images/diacritics.webp new file mode 100644 index 0000000000..45e060a0e1 Binary files /dev/null and b/blazor/dropdown-list/images/diacritics.webp differ diff --git a/blazor/dropdown-list/images/dropdownlist-disable.webp b/blazor/dropdown-list/images/dropdownlist-disable.webp new file mode 100644 index 0000000000..ebe57253b4 Binary files /dev/null and b/blazor/dropdown-list/images/dropdownlist-disable.webp differ diff --git a/blazor/dropdown-list/images/filtering/blazor_dropdown_custom-filtering.webp b/blazor/dropdown-list/images/filtering/blazor_dropdown_custom-filtering.webp new file mode 100644 index 0000000000..17b534aeba Binary files /dev/null and b/blazor/dropdown-list/images/filtering/blazor_dropdown_custom-filtering.webp differ diff --git a/blazor/dropdown-list/images/filtering/blazor_dropdown_filter-textbox-placeholder.webp b/blazor/dropdown-list/images/filtering/blazor_dropdown_filter-textbox-placeholder.webp new file mode 100644 index 0000000000..445ae3de4a Binary files /dev/null and b/blazor/dropdown-list/images/filtering/blazor_dropdown_filter-textbox-placeholder.webp differ diff --git a/blazor/dropdown-list/images/filtering/blazor_dropdown_filter-type.webp b/blazor/dropdown-list/images/filtering/blazor_dropdown_filter-type.webp new file mode 100644 index 0000000000..449214eb67 Binary files /dev/null and b/blazor/dropdown-list/images/filtering/blazor_dropdown_filter-type.webp differ diff --git a/blazor/dropdown-list/images/filtering/blazor_dropdown_local-data.webp b/blazor/dropdown-list/images/filtering/blazor_dropdown_local-data.webp new file mode 100644 index 0000000000..c4f8c1da32 Binary files /dev/null and b/blazor/dropdown-list/images/filtering/blazor_dropdown_local-data.webp differ diff --git a/blazor/dropdown-list/images/filtering/blazor_dropdown_minimum-filter-length.webp b/blazor/dropdown-list/images/filtering/blazor_dropdown_minimum-filter-length.webp new file mode 100644 index 0000000000..16be01d1e7 Binary files /dev/null and b/blazor/dropdown-list/images/filtering/blazor_dropdown_minimum-filter-length.webp differ diff --git a/blazor/dropdown-list/images/filtering/blazor_dropdown_multi-column.webp b/blazor/dropdown-list/images/filtering/blazor_dropdown_multi-column.webp new file mode 100644 index 0000000000..d4716ddc2e Binary files /dev/null and b/blazor/dropdown-list/images/filtering/blazor_dropdown_multi-column.webp differ diff --git a/blazor/dropdown-list/images/filtering/blazor_dropdown_remote-data.webp b/blazor/dropdown-list/images/filtering/blazor_dropdown_remote-data.webp new file mode 100644 index 0000000000..be63465647 Binary files /dev/null and b/blazor/dropdown-list/images/filtering/blazor_dropdown_remote-data.webp differ diff --git a/blazor/dropdown-list/images/form-validation/blazor_dropodown_with-editform.webp b/blazor/dropdown-list/images/form-validation/blazor_dropodown_with-editform.webp new file mode 100644 index 0000000000..82a6349303 Binary files /dev/null and b/blazor/dropdown-list/images/form-validation/blazor_dropodown_with-editform.webp differ diff --git a/blazor/dropdown-list/images/grouping/blazor-dropdownlist-grouping.webp b/blazor/dropdown-list/images/grouping/blazor-dropdownlist-grouping.webp new file mode 100644 index 0000000000..8c42a17454 Binary files /dev/null and b/blazor/dropdown-list/images/grouping/blazor-dropdownlist-grouping.webp differ diff --git a/blazor/dropdown-list/images/localization/blazor_dropdown_enableRtl.webp b/blazor/dropdown-list/images/localization/blazor_dropdown_enableRtl.webp new file mode 100644 index 0000000000..16023ce461 Binary files /dev/null and b/blazor/dropdown-list/images/localization/blazor_dropdown_enableRtl.webp differ diff --git a/blazor/dropdown-list/images/multicolumn/blazor_dropdown_multicolumn.webp b/blazor/dropdown-list/images/multicolumn/blazor_dropdown_multicolumn.webp new file mode 100644 index 0000000000..b023bb031b Binary files /dev/null and b/blazor/dropdown-list/images/multicolumn/blazor_dropdown_multicolumn.webp differ diff --git a/blazor/dropdown-list/images/placeholder-and-floatlabel/blazor_dropdown_floatlabel-focusing-color.webp b/blazor/dropdown-list/images/placeholder-and-floatlabel/blazor_dropdown_floatlabel-focusing-color.webp new file mode 100644 index 0000000000..f60c04f243 Binary files /dev/null and b/blazor/dropdown-list/images/placeholder-and-floatlabel/blazor_dropdown_floatlabel-focusing-color.webp differ diff --git a/blazor/dropdown-list/images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-color.webp b/blazor/dropdown-list/images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-color.webp new file mode 100644 index 0000000000..a73cf52ab1 Binary files /dev/null and b/blazor/dropdown-list/images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-color.webp differ diff --git a/blazor/dropdown-list/images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-mandatory.webp b/blazor/dropdown-list/images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-mandatory.webp new file mode 100644 index 0000000000..e9aea79b70 Binary files /dev/null and b/blazor/dropdown-list/images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-mandatory.webp differ diff --git a/blazor/dropdown-list/images/placeholder-and-floatlabel/blazor_dropdown_placeholder.webp b/blazor/dropdown-list/images/placeholder-and-floatlabel/blazor_dropdown_placeholder.webp new file mode 100644 index 0000000000..25bccc1c34 Binary files /dev/null and b/blazor/dropdown-list/images/placeholder-and-floatlabel/blazor_dropdown_placeholder.webp differ diff --git a/blazor/dropdown-list/images/popup-setting/blazor_dropdown_popup-height.webp b/blazor/dropdown-list/images/popup-setting/blazor_dropdown_popup-height.webp new file mode 100644 index 0000000000..f38ee19cb2 Binary files /dev/null and b/blazor/dropdown-list/images/popup-setting/blazor_dropdown_popup-height.webp differ diff --git a/blazor/dropdown-list/images/popup-setting/blazor_dropdown_popup-initial-loading.webp b/blazor/dropdown-list/images/popup-setting/blazor_dropdown_popup-initial-loading.webp new file mode 100644 index 0000000000..474f7db0e8 Binary files /dev/null and b/blazor/dropdown-list/images/popup-setting/blazor_dropdown_popup-initial-loading.webp differ diff --git a/blazor/dropdown-list/images/popup-setting/blazor_dropdown_popup-width.webp b/blazor/dropdown-list/images/popup-setting/blazor_dropdown_popup-width.webp new file mode 100644 index 0000000000..9bc06c4cee Binary files /dev/null and b/blazor/dropdown-list/images/popup-setting/blazor_dropdown_popup-width.webp differ diff --git a/blazor/dropdown-list/images/popup-setting/blazor_dropdown_preventing-opening-closing.webp b/blazor/dropdown-list/images/popup-setting/blazor_dropdown_preventing-opening-closing.webp new file mode 100644 index 0000000000..f59c0bcc70 Binary files /dev/null and b/blazor/dropdown-list/images/popup-setting/blazor_dropdown_preventing-opening-closing.webp differ diff --git a/blazor/dropdown-list/images/popup-setting/blazor_dropdown_text-overflow.webp b/blazor/dropdown-list/images/popup-setting/blazor_dropdown_text-overflow.webp new file mode 100644 index 0000000000..70257e2eb0 Binary files /dev/null and b/blazor/dropdown-list/images/popup-setting/blazor_dropdown_text-overflow.webp differ diff --git a/blazor/dropdown-list/images/selection/blazor_dropdown_preselect-value-index.webp b/blazor/dropdown-list/images/selection/blazor_dropdown_preselect-value-index.webp new file mode 100644 index 0000000000..5e1e9e2611 Binary files /dev/null and b/blazor/dropdown-list/images/selection/blazor_dropdown_preselect-value-index.webp differ diff --git a/blazor/dropdown-list/images/selection/blazor_dropdown_preselect-value.webp b/blazor/dropdown-list/images/selection/blazor_dropdown_preselect-value.webp new file mode 100644 index 0000000000..3df58e177d Binary files /dev/null and b/blazor/dropdown-list/images/selection/blazor_dropdown_preselect-value.webp differ diff --git a/blazor/dropdown-list/images/sorting/blazor_dropdown_sorting.webp b/blazor/dropdown-list/images/sorting/blazor_dropdown_sorting.webp new file mode 100644 index 0000000000..315e09e201 Binary files /dev/null and b/blazor/dropdown-list/images/sorting/blazor_dropdown_sorting.webp differ diff --git a/blazor/dropdown-list/images/style/blazor-dropdownlist-tooltip.webp b/blazor/dropdown-list/images/style/blazor-dropdownlist-tooltip.webp new file mode 100644 index 0000000000..7a4c0ae7b2 Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor-dropdownlist-tooltip.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown-in-tabview.webp b/blazor/dropdown-list/images/style/blazor_dropdown-in-tabview.webp new file mode 100644 index 0000000000..2ca28cf316 Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown-in-tabview.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_add-attribute-listitem.webp b/blazor/dropdown-list/images/style/blazor_dropdown_add-attribute-listitem.webp new file mode 100644 index 0000000000..83635d390a Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_add-attribute-listitem.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_appearance-of-container.webp b/blazor/dropdown-list/images/style/blazor_dropdown_appearance-of-container.webp new file mode 100644 index 0000000000..329996744b Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_appearance-of-container.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_cssclass-property.webp b/blazor/dropdown-list/images/style/blazor_dropdown_cssclass-property.webp new file mode 100644 index 0000000000..efe2830be3 Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_cssclass-property.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_default-tooltip.webp b/blazor/dropdown-list/images/style/blazor_dropdown_default-tooltip.webp new file mode 100644 index 0000000000..86941858b7 Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_default-tooltip.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_disable-listitem.webp b/blazor/dropdown-list/images/style/blazor_dropdown_disable-listitem.webp new file mode 100644 index 0000000000..88a5afb7ed Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_disable-listitem.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_disable-text-color.webp b/blazor/dropdown-list/images/style/blazor_dropdown_disable-text-color.webp new file mode 100644 index 0000000000..2f32a82c29 Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_disable-text-color.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_disabled-state.webp b/blazor/dropdown-list/images/style/blazor_dropdown_disabled-state.webp new file mode 100644 index 0000000000..f60ff2668d Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_disabled-state.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_dropdown-icon.webp b/blazor/dropdown-list/images/style/blazor_dropdown_dropdown-icon.webp new file mode 100644 index 0000000000..1934dcd5c5 Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_dropdown-icon.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_focus-color.webp b/blazor/dropdown-list/images/style/blazor_dropdown_focus-color.webp new file mode 100644 index 0000000000..9ddc5ab4fc Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_focus-color.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_focus-hover-activeitem-color.webp b/blazor/dropdown-list/images/style/blazor_dropdown_focus-hover-activeitem-color.webp new file mode 100644 index 0000000000..c3dd9e3c38 Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_focus-hover-activeitem-color.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_focusing-color-of-outline-theme.webp b/blazor/dropdown-list/images/style/blazor_dropdown_focusing-color-of-outline-theme.webp new file mode 100644 index 0000000000..61d46a5b90 Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_focusing-color-of-outline-theme.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_font-family.webp b/blazor/dropdown-list/images/style/blazor_dropdown_font-family.webp new file mode 100644 index 0000000000..18709ac43d Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_font-family.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_height.webp b/blazor/dropdown-list/images/style/blazor_dropdown_height.webp new file mode 100644 index 0000000000..2041c7b17e Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_height.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_html-attributes.webp b/blazor/dropdown-list/images/style/blazor_dropdown_html-attributes.webp new file mode 100644 index 0000000000..5cc9159feb Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_html-attributes.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_icon-color.webp b/blazor/dropdown-list/images/style/blazor_dropdown_icon-color.webp new file mode 100644 index 0000000000..bbd3faa3b7 Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_icon-color.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_input-attributes-propety.webp b/blazor/dropdown-list/images/style/blazor_dropdown_input-attributes-propety.webp new file mode 100644 index 0000000000..67880b1d27 Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_input-attributes-propety.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_opacity-style.webp b/blazor/dropdown-list/images/style/blazor_dropdown_opacity-style.webp new file mode 100644 index 0000000000..ca93e4979a Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_opacity-style.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_outline-theme.webp b/blazor/dropdown-list/images/style/blazor_dropdown_outline-theme.webp new file mode 100644 index 0000000000..2a3f250498 Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_outline-theme.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_popup-color.webp b/blazor/dropdown-list/images/style/blazor_dropdown_popup-color.webp new file mode 100644 index 0000000000..a00020b091 Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_popup-color.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_readonly-mode.webp b/blazor/dropdown-list/images/style/blazor_dropdown_readonly-mode.webp new file mode 100644 index 0000000000..01399fec29 Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_readonly-mode.webp differ diff --git a/blazor/dropdown-list/images/style/blazor_dropdown_width-popup-width.webp b/blazor/dropdown-list/images/style/blazor_dropdown_width-popup-width.webp new file mode 100644 index 0000000000..63756412ea Binary files /dev/null and b/blazor/dropdown-list/images/style/blazor_dropdown_width-popup-width.webp differ diff --git a/blazor/dropdown-list/images/template/blazor-dropdownlist-action-failure-template.webp b/blazor/dropdown-list/images/template/blazor-dropdownlist-action-failure-template.webp new file mode 100644 index 0000000000..0c746ec2b0 Binary files /dev/null and b/blazor/dropdown-list/images/template/blazor-dropdownlist-action-failure-template.webp differ diff --git a/blazor/dropdown-list/images/template/blazor-dropdownlist-footer-template.webp b/blazor/dropdown-list/images/template/blazor-dropdownlist-footer-template.webp new file mode 100644 index 0000000000..1e5762e70f Binary files /dev/null and b/blazor/dropdown-list/images/template/blazor-dropdownlist-footer-template.webp differ diff --git a/blazor/dropdown-list/images/template/blazor-dropdownlist-group-template.webp b/blazor/dropdown-list/images/template/blazor-dropdownlist-group-template.webp new file mode 100644 index 0000000000..6f686fc89f Binary files /dev/null and b/blazor/dropdown-list/images/template/blazor-dropdownlist-group-template.webp differ diff --git a/blazor/dropdown-list/images/template/blazor-dropdownlist-header-template.webp b/blazor/dropdown-list/images/template/blazor-dropdownlist-header-template.webp new file mode 100644 index 0000000000..bc0e0519d8 Binary files /dev/null and b/blazor/dropdown-list/images/template/blazor-dropdownlist-header-template.webp differ diff --git a/blazor/dropdown-list/images/template/blazor-dropdownlist-item-template.webp b/blazor/dropdown-list/images/template/blazor-dropdownlist-item-template.webp new file mode 100644 index 0000000000..52b0ba7b9d Binary files /dev/null and b/blazor/dropdown-list/images/template/blazor-dropdownlist-item-template.webp differ diff --git a/blazor/dropdown-list/images/template/blazor-dropdownlist-value-template.webp b/blazor/dropdown-list/images/template/blazor-dropdownlist-value-template.webp new file mode 100644 index 0000000000..39ef21391a Binary files /dev/null and b/blazor/dropdown-list/images/template/blazor-dropdownlist-value-template.webp differ diff --git a/blazor/dropdown-list/images/template/blazor-dropdownlist-without-data.webp b/blazor/dropdown-list/images/template/blazor-dropdownlist-without-data.webp new file mode 100644 index 0000000000..981f4516d1 Binary files /dev/null and b/blazor/dropdown-list/images/template/blazor-dropdownlist-without-data.webp differ diff --git a/blazor/dropdown-list/images/value-binding/blazor_dropdown_bind-value.webp b/blazor/dropdown-list/images/value-binding/blazor_dropdown_bind-value.webp new file mode 100644 index 0000000000..68d5d025bc Binary files /dev/null and b/blazor/dropdown-list/images/value-binding/blazor_dropdown_bind-value.webp differ diff --git a/blazor/dropdown-list/images/value-binding/blazor_dropdown_enum-binding.webp b/blazor/dropdown-list/images/value-binding/blazor_dropdown_enum-binding.webp new file mode 100644 index 0000000000..79b53c691a Binary files /dev/null and b/blazor/dropdown-list/images/value-binding/blazor_dropdown_enum-binding.webp differ diff --git a/blazor/dropdown-list/images/value-binding/blazor_dropdown_index-value.webp b/blazor/dropdown-list/images/value-binding/blazor_dropdown_index-value.webp new file mode 100644 index 0000000000..69a5cdf539 Binary files /dev/null and b/blazor/dropdown-list/images/value-binding/blazor_dropdown_index-value.webp differ diff --git a/blazor/dropdown-list/images/value-binding/blazor_dropdown_object-binding.webp b/blazor/dropdown-list/images/value-binding/blazor_dropdown_object-binding.webp new file mode 100644 index 0000000000..76a56ce469 Binary files /dev/null and b/blazor/dropdown-list/images/value-binding/blazor_dropdown_object-binding.webp differ diff --git a/blazor/dropdown-list/images/value-binding/blazor_dropdown_primitive-type-int.webp b/blazor/dropdown-list/images/value-binding/blazor_dropdown_primitive-type-int.webp new file mode 100644 index 0000000000..b17763c0bb Binary files /dev/null and b/blazor/dropdown-list/images/value-binding/blazor_dropdown_primitive-type-int.webp differ diff --git a/blazor/dropdown-list/images/value-binding/blazor_dropdown_primitive-type-string.webp b/blazor/dropdown-list/images/value-binding/blazor_dropdown_primitive-type-string.webp new file mode 100644 index 0000000000..05b6061371 Binary files /dev/null and b/blazor/dropdown-list/images/value-binding/blazor_dropdown_primitive-type-string.webp differ diff --git a/blazor/dropdown-list/images/value-binding/blazor_dropdown_show-hide-clear-button.webp b/blazor/dropdown-list/images/value-binding/blazor_dropdown_show-hide-clear-button.webp new file mode 100644 index 0000000000..99118e99a9 Binary files /dev/null and b/blazor/dropdown-list/images/value-binding/blazor_dropdown_show-hide-clear-button.webp differ diff --git a/blazor/dropdown-list/images/value-binding/blazor_dropdown_text-and-value.webp b/blazor/dropdown-list/images/value-binding/blazor_dropdown_text-and-value.webp new file mode 100644 index 0000000000..ad59a1086f Binary files /dev/null and b/blazor/dropdown-list/images/value-binding/blazor_dropdown_text-and-value.webp differ diff --git a/blazor/dropdown-list/images/value-binding/blazor_dropdown_two-way-binding.webp b/blazor/dropdown-list/images/value-binding/blazor_dropdown_two-way-binding.webp new file mode 100644 index 0000000000..4fdcc719fe Binary files /dev/null and b/blazor/dropdown-list/images/value-binding/blazor_dropdown_two-way-binding.webp differ diff --git a/blazor/dropdown-list/localization.md b/blazor/dropdown-list/localization.md index eda398aa62..89eeb83199 100644 --- a/blazor/dropdown-list/localization.md +++ b/blazor/dropdown-list/localization.md @@ -27,4 +27,4 @@ Specifies the [EnableRtl](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo {% endhighlight %} -![Blazor DropDownList rendered in RTL mode](./images/localization/blazor_dropdown_enableRtl.png) \ No newline at end of file +![Blazor DropDownList rendered in RTL mode](./images/localization/blazor_dropdown_enableRtl.webp) \ No newline at end of file diff --git a/blazor/dropdown-list/multicolumn.md b/blazor/dropdown-list/multicolumn.md index f02bd539a0..5d283c6e49 100644 --- a/blazor/dropdown-list/multicolumn.md +++ b/blazor/dropdown-list/multicolumn.md @@ -26,7 +26,7 @@ Apply built-in text alignment classes to control alignment in each column: {% endhighlight %} -![Blazor DropDownList with multi-column popup](./images/multicolumn/blazor_dropdown_multicolumn.png) +![Blazor DropDownList with multi-column popup](./images/multicolumn/blazor_dropdown_multicolumn.webp) ## Limitation of multicolumn dropdown list diff --git a/blazor/dropdown-list/placeholder-and-floatlabel.md b/blazor/dropdown-list/placeholder-and-floatlabel.md index 3b0037f67b..a40e3b8ed6 100644 --- a/blazor/dropdown-list/placeholder-and-floatlabel.md +++ b/blazor/dropdown-list/placeholder-and-floatlabel.md @@ -19,7 +19,7 @@ Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr {% endhighlight %} -![Blazor DropDownList with placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder.png) +![Blazor DropDownList with placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder.webp) ## Color of the placeholder text @@ -31,7 +31,7 @@ Change the placeholder color by targeting the placeholder selector (for example, {% endhighlight %} -![Blazor DropDownList with colored placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-color.png) +![Blazor DropDownList with colored placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-color.webp) ## Add mandatory indicator using placeholder @@ -43,7 +43,7 @@ Add a visual required indicator (such as `*`) to the floating label by targeting {% endhighlight %} -![Blazor DropDownList with mandatory indicator in placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-mandatory.png) +![Blazor DropDownList with mandatory indicator in placeholder](./images/placeholder-and-floatlabel/blazor_dropdown_placeholder-with-mandatory.webp) ## FloatLabel @@ -77,4 +77,4 @@ Customize the floating label color on focus by targeting `.e-input-focus .e-floa {% endhighlight %} -![Blazor DropDownList with customized floating label focus color](./images/placeholder-and-floatlabel/blazor_dropdown_floatlabel-focusing-color.png) \ No newline at end of file +![Blazor DropDownList with customized floating label focus color](./images/placeholder-and-floatlabel/blazor_dropdown_floatlabel-focusing-color.webp) \ No newline at end of file diff --git a/blazor/dropdown-list/popup-setting.md b/blazor/dropdown-list/popup-setting.md index 8f39b10bc2..808926d12e 100644 --- a/blazor/dropdown-list/popup-setting.md +++ b/blazor/dropdown-list/popup-setting.md @@ -33,7 +33,7 @@ In the following sample, `PopupWidth` is set to `300px`. {% endhighlight %} -![Blazor DropDownList with customized popup width](./images/popup-setting/blazor_dropdown_popup-width.png) +![Blazor DropDownList with customized popup width](./images/popup-setting/blazor_dropdown_popup-width.webp) ## Handling TextOverflow @@ -47,7 +47,7 @@ In the following sample, `PopupWidth` is set to `100px`, so ellipsis is automati {% endhighlight %} -![Text overflow handling in Blazor DropDownList](./images/popup-setting/blazor_dropdown_text-overflow.png) +![Text overflow handling in Blazor DropDownList](./images/popup-setting/blazor_dropdown_text-overflow.webp) ## Change the popup height @@ -59,7 +59,7 @@ Customize the height of the popup using the [PopupHeight](https://help.syncfusio {% endhighlight %} -![Blazor DropDownList with customized popup height](./images/popup-setting/blazor_dropdown_popup-height.png) +![Blazor DropDownList with customized popup height](./images/popup-setting/blazor_dropdown_popup-height.webp) ## Change the popup z-index @@ -75,7 +75,7 @@ Show the popup on initial render by invoking [ShowPopupAsync()](https://help.syn {% endhighlight %} -![Blazor DropDownList with popup shown on initial loading](./images/popup-setting/blazor_dropdown_popup-initial-loading.png) +![Blazor DropDownList with popup shown on initial loading](./images/popup-setting/blazor_dropdown_popup-initial-loading.webp) ## Preventing opening and closing @@ -87,7 +87,7 @@ Prevent the popup from opening or closing by setting the event argument’s canc {% endhighlight %} -![Blazor DropDownList with prevented opening and closing](./images/popup-setting/blazor_dropdown_preventing-opening-closing.png) +![Blazor DropDownList with prevented opening and closing](./images/popup-setting/blazor_dropdown_preventing-opening-closing.webp) The following events are used to trigger when opening and closing popup. diff --git a/blazor/dropdown-list/selection.md b/blazor/dropdown-list/selection.md index e3bb670169..2ef2eadd1e 100644 --- a/blazor/dropdown-list/selection.md +++ b/blazor/dropdown-list/selection.md @@ -37,7 +37,7 @@ Bind a preselected value to the `DropDownList` using the [`@bind-Value`](https:/ {% endhighlight %} -![Blazor DropDownList with preselected value](./images/selection/blazor_dropdown_preselect-value.png) +![Blazor DropDownList with preselected value](./images/selection/blazor_dropdown_preselect-value.webp) ## Programmatically change the selected value @@ -87,7 +87,7 @@ The following sample binds the index during initial rendering. {% endhighlight %} -![Blazor DropDownList with index-based preselection](./images/selection/blazor_dropdown_preselect-value-index.png) +![Blazor DropDownList with index-based preselection](./images/selection/blazor_dropdown_preselect-value-index.webp) ## Get selected item by value diff --git a/blazor/dropdown-list/sorting.md b/blazor/dropdown-list/sorting.md index 361a3b32bb..a88e78c347 100644 --- a/blazor/dropdown-list/sorting.md +++ b/blazor/dropdown-list/sorting.md @@ -27,4 +27,4 @@ In the following example, items in the data source are shuffled randomly, and th {% endhighlight %} -![Blazor DropDownList with descending sort order](./images/sorting/blazor_dropdown_sorting.png) \ No newline at end of file +![Blazor DropDownList with descending sort order](./images/sorting/blazor_dropdown_sorting.webp) \ No newline at end of file diff --git a/blazor/dropdown-list/style.md b/blazor/dropdown-list/style.md index cf0eebd5f8..c92720da5c 100644 --- a/blazor/dropdown-list/style.md +++ b/blazor/dropdown-list/style.md @@ -21,7 +21,7 @@ Set the boolean [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz {% endhighlight %} -![Blazor DropDownList in read-only mode](./images/style/blazor_dropdown_readonly-mode.png) +![Blazor DropDownList in read-only mode](./images/style/blazor_dropdown_readonly-mode.webp) ## Disabled state @@ -33,7 +33,7 @@ Set the boolean [Enabled](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo {% endhighlight %} -![Blazor DropDownList in disabled state](./images/style/blazor_dropdown_disabled-state.png) +![Blazor DropDownList in disabled state](./images/style/blazor_dropdown_disabled-state.webp) ## CssClass @@ -53,7 +53,7 @@ Some common class names: {% endhighlight %} -![Blazor DropDownList styled via CssClass](./images/style/blazor_dropdown_cssclass-property.png) +![Blazor DropDownList styled via CssClass](./images/style/blazor_dropdown_cssclass-property.webp) ## Customizing the disabled component’s text color @@ -65,7 +65,7 @@ Target the disabled input selector (for example, `.e-input[disabled]`) and set ` {% endhighlight %} -![Blazor DropDownList with customized disabled text color](./images/style/blazor_dropdown_disable-text-color.png) +![Blazor DropDownList with customized disabled text color](./images/style/blazor_dropdown_disable-text-color.webp) ## Show the custom icon in dropdown icon @@ -77,7 +77,7 @@ Customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearanc {% endhighlight %} -![Blazor DropDownList with customized dropdown icon](./images/style/blazor_dropdown_dropdown-icon.png) +![Blazor DropDownList with customized dropdown icon](./images/style/blazor_dropdown_dropdown-icon.webp) Customize the dropdown icon for a specific component by adding a custom class through [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) and scoping the icon style to that class. @@ -87,7 +87,7 @@ Customize the dropdown icon for a specific component by adding a custom class th {% endhighlight %} -![Blazor DropDownList with dropdown icon using CssClass](./images/style/blazor_dropdown_dropdown-icon.png) +![Blazor DropDownList with dropdown icon using CssClass](./images/style/blazor_dropdown_dropdown-icon.webp) ## Customizing the appearance of container element @@ -99,7 +99,7 @@ Customize the appearance of the container element within the dropdown list compo {% endhighlight %} -![Blazor DropDownList container appearance customized](./images/style/blazor_dropdown_appearance-of-container.png) +![Blazor DropDownList container appearance customized](./images/style/blazor_dropdown_appearance-of-container.webp) ## Customizing the dropdown icon’s color @@ -111,7 +111,7 @@ Customize the dropdown [icon](https://ej2.syncfusion.com/documentation/appearanc {% endhighlight %} -![Blazor DropDownList with custom icon color](./images/style/blazor_dropdown_icon-color.png) +![Blazor DropDownList with custom icon color](./images/style/blazor_dropdown_icon-color.webp) ## Customizing the focus color @@ -123,7 +123,7 @@ Customize the focus indicator by targeting `.e-input-focus::after` and setting t {% endhighlight %} -![Blazor DropDownList with custom focus color](./images/style/blazor_dropdown_focus-color.png) +![Blazor DropDownList with custom focus color](./images/style/blazor_dropdown_focus-color.webp) ## Customizing the outline theme's focus color @@ -135,7 +135,7 @@ When using the outline variant, target the `e-outline` style to adjust focus col {% endhighlight %} -![Blazor DropDownList outline theme focus color](./images/style/blazor_dropdown_focusing-color-of-outline-theme.png) +![Blazor DropDownList outline theme focus color](./images/style/blazor_dropdown_focusing-color-of-outline-theme.webp) Use `e-outline` in the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDowns.SfDropDownList-2.html#Syncfusion_Blazor_DropDowns_SfDropDownList_2_CssClass) property to enable the outline theme. @@ -145,7 +145,7 @@ Use `e-outline` in the [CssClass](https://help.syncfusion.com/cr/blazor/Syncfusi {% endhighlight %} -![Blazor DropDownList rendered with outline theme](./images/style/blazor_dropdown_outline-theme.png) +![Blazor DropDownList rendered with outline theme](./images/style/blazor_dropdown_outline-theme.webp) ## Customizing the background color of focus, hover, and active items @@ -158,7 +158,7 @@ Adjust list item background and text colors for focused, active, and hovered sta {% endhighlight %} -![Blazor DropDownList with custom item state colors](./images/style/blazor_dropdown_outline-theme.png) +![Blazor DropDownList with custom item state colors](./images/style/blazor_dropdown_outline-theme.webp) ## Customizing the appearance of pop-up element @@ -170,7 +170,7 @@ Customize popup appearance by targeting popup and list item selectors (for examp {% endhighlight %} -![Blazor DropDownList with customized popup appearance](./images/style/blazor_dropdown_outline-theme.png) +![Blazor DropDownList with customized popup appearance](./images/style/blazor_dropdown_outline-theme.webp) ## Change the HTML attributes @@ -182,7 +182,7 @@ Add additional attributes (for example, `style`, `class`, `title`) to the root e {% endhighlight %} -![Blazor DropDownList with custom HTML attributes](./images/style/blazor_dropdown_html-attributes.png) +![Blazor DropDownList with custom HTML attributes](./images/style/blazor_dropdown_html-attributes.webp) ## Change the InputAttributes @@ -194,7 +194,7 @@ Add the additional input attributes such as disabled, value, and more to the roo {% endhighlight %} -![Blazor DropDownList with input attributes](./images/style/blazor_dropdown_input-attributes-propety.png) +![Blazor DropDownList with input attributes](./images/style/blazor_dropdown_input-attributes-propety.webp) ## Set the various font family for dropdown list elements @@ -208,7 +208,7 @@ In the following sample, the font family of the DropDownList, ListItem text in D {% endhighlight %} -![Blazor DropDownList with custom font family](./images/style/blazor_dropdown_font-family.png) +![Blazor DropDownList with custom font family](./images/style/blazor_dropdown_font-family.webp) ## Show tooltip on list item @@ -222,7 +222,7 @@ The following code demonstrates how to display a tooltip when hovering over the {% endhighlight %} -![Blazor DropDownList with tooltip on items](./images/style/blazor-dropdownlist-tooltip.png) +![Blazor DropDownList with tooltip on items](./images/style/blazor-dropdownlist-tooltip.webp) ### Tooltip using HTMLAttribute in dropdown component @@ -236,7 +236,7 @@ In the following example, the `HtmlAttributes` property is used to add the title {% endhighlight %} -![Blazor DropDownList with input tooltip](./images/style/blazor_dropdown_default-tooltip.png) +![Blazor DropDownList with input tooltip](./images/style/blazor_dropdown_default-tooltip.webp) ## Customize selected item opacity @@ -248,7 +248,7 @@ Adjust the opacity of selected (and selected + hovered) items by targeting `.e-d {% endhighlight %} -![Blazor DropDownList with custom selected item opacity](./images/style/blazor_dropdown_opacity-style.png) +![Blazor DropDownList with custom selected item opacity](./images/style/blazor_dropdown_opacity-style.webp) ## Customizing the height @@ -262,7 +262,7 @@ Use [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropDo {% endhighlight %} -![Blazor DropDownList with custom popup height](./images/style/blazor_dropdown_height.png) +![Blazor DropDownList with custom popup height](./images/style/blazor_dropdown_height.webp) ### Width of DropDownList @@ -274,7 +274,7 @@ To change only the popup width, use [PopupWidth](https://help.syncfusion.com/cr/ {% endhighlight %} -![Blazor DropDownList with custom popup width](./images/style/blazor_dropdown_width-popup-width.png) +![Blazor DropDownList with custom popup width](./images/style/blazor_dropdown_width-popup-width.webp) ## Disable specific items in DropDownList @@ -302,7 +302,7 @@ Prevent selection of specific items by applying custom CSS classes to the popup {% endhighlight %} {% endtabs %} -![Blazor DropDownList with Popup Width](./images/style/blazor_dropdown_disable-listitem.png) +![Blazor DropDownList with Popup Width](./images/style/blazor_dropdown_disable-listitem.webp) ## Adding conditional HTML attribute to list item @@ -338,7 +338,7 @@ In the following example, the `Opened` event is used to call the `AddAttribute` {% endhighlight %} {% endtabs %} -![Adding attributes to list items in DropDownList](./images/style/blazor_dropdown_add-attribute-listitem.png) +![Adding attributes to list items in DropDownList](./images/style/blazor_dropdown_add-attribute-listitem.webp) ## Displaying DropDownList in Tab @@ -352,7 +352,7 @@ In the following example, the SfTab component is used to display a tab view with {% endhighlight %} -![Blazor DropDownList displayed inside a tab view](./images/style/blazor_dropdown-in-tabview.png) +![Blazor DropDownList displayed inside a tab view](./images/style/blazor_dropdown-in-tabview.webp) ## DropDownList inside Dialog @@ -378,4 +378,4 @@ Call `ShowSpinnerAsync()` and `HideSpinnerAsync()` on the DropDownList instance {% endhighlight %} -![Show or hide spinner in Blazor DropDownList](./images/style/blazor_dropdown_readonly-mode.png) \ No newline at end of file +![Show or hide spinner in Blazor DropDownList](./images/style/blazor_dropdown_readonly-mode.webp) \ No newline at end of file diff --git a/blazor/dropdown-list/templates.md b/blazor/dropdown-list/templates.md index 4342c28419..a1f44c83cf 100644 --- a/blazor/dropdown-list/templates.md +++ b/blazor/dropdown-list/templates.md @@ -27,7 +27,7 @@ In the following sample, the selected value shows a combined text of `FirstName` {% endhighlight %} -![Blazor DropDownList with ValueTemplate](./images/template/blazor-dropdownlist-value-template.png) +![Blazor DropDownList with ValueTemplate](./images/template/blazor-dropdownlist-value-template.webp) ## Item template @@ -41,7 +41,7 @@ In the following sample, each list item is arranged into two columns to present {% endhighlight %} -![Blazor DropDownList with ItemTemplate](./images/template/blazor-dropdownlist-item-template.png) +![Blazor DropDownList with ItemTemplate](./images/template/blazor-dropdownlist-item-template.webp) ## Group template @@ -55,7 +55,7 @@ In the following sample, employees are grouped by city. {% endhighlight %} -![Blazor DropDownList with GroupTemplate](./images/template/blazor-dropdownlist-group-template.png) +![Blazor DropDownList with GroupTemplate](./images/template/blazor-dropdownlist-group-template.webp) ## Header template @@ -69,7 +69,7 @@ In the following sample, the header and items are presented in two columns, simi {% endhighlight %} -![Blazor DropDownList with HeaderTemplate](./images/template/blazor-dropdownlist-header-template.png) +![Blazor DropDownList with HeaderTemplate](./images/template/blazor-dropdownlist-header-template.webp) ## Footer template @@ -83,7 +83,7 @@ In the following sample, the footer displays the total number of items in the Dr {% endhighlight %} -![Blazor DropDownList with Footer Template](./images/template/blazor-dropdownlist-footer-template.png) +![Blazor DropDownList with Footer Template](./images/template/blazor-dropdownlist-footer-template.webp) ## No records template @@ -97,7 +97,7 @@ In the following sample, the popup displays a “no data available” message. {% endhighlight %} -![Blazor DropDownList without Data](./images/template/blazor-dropdownlist-without-data.png) +![Blazor DropDownList without Data](./images/template/blazor-dropdownlist-without-data.webp) ## Action failure template @@ -111,7 +111,7 @@ In the following sample, the DropDownList displays a notification when data retr {% endhighlight %} -![Blazor DropDownList with Action Failure Template](./images/template/blazor-dropdownlist-action-failure-template.png) +![Blazor DropDownList with Action Failure Template](./images/template/blazor-dropdownlist-action-failure-template.webp) ## See also diff --git a/blazor/dropdown-list/value-binding.md b/blazor/dropdown-list/value-binding.md index 4d0b7e86f6..3fdd34fe8b 100644 --- a/blazor/dropdown-list/value-binding.md +++ b/blazor/dropdown-list/value-binding.md @@ -25,7 +25,7 @@ Use the [`@bind-Value`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. {% endhighlight %} -![Blazor DropDownList with Bind Value](./images/value-binding/blazor_dropdown_bind-value.png) +![Blazor DropDownList with Bind Value](./images/value-binding/blazor_dropdown_bind-value.webp) ## Index value binding @@ -37,7 +37,7 @@ Bind by index using the [`@bind-Index`](https://help.syncfusion.com/cr/blazor/Sy {% endhighlight %} -![Blazor DropDownList with Index Value](./images/value-binding/blazor_dropdown_index-value.png) +![Blazor DropDownList with Index Value](./images/value-binding/blazor_dropdown_index-value.webp) ## Text and value @@ -51,7 +51,7 @@ In the following example, the selected item text is “Badminton” (Text field) {% endhighlight %} -![Blazor DropDownList with Text and Value](./images/value-binding/blazor_dropdown_text-and-value.png) +![Blazor DropDownList with Text and Value](./images/value-binding/blazor_dropdown_text-and-value.webp) ## Primitive type binding @@ -65,7 +65,7 @@ The following example uses an array of strings: {% endhighlight %} -![Blazor DropDownList with Primitive Type as string](./images/value-binding/blazor_dropdown_primitive-type-string.png) +![Blazor DropDownList with Primitive Type as string](./images/value-binding/blazor_dropdown_primitive-type-string.webp) The following example uses an array of integers: @@ -75,7 +75,7 @@ The following example uses an array of integers: {% endhighlight %} -![Blazor DropDownList with Primitive Type as int](./images/value-binding/blazor_dropdown_primitive-type-int.png) +![Blazor DropDownList with Primitive Type as int](./images/value-binding/blazor_dropdown_primitive-type-int.webp) ## Object binding @@ -89,7 +89,7 @@ In the following example, the `Name` field is mapped to the `Value` property. {% endhighlight %} -![Blazor DropDownList with object values](./images/value-binding/blazor_dropdown_object-binding.png) +![Blazor DropDownList with object values](./images/value-binding/blazor_dropdown_object-binding.webp) ## Enum binding @@ -101,7 +101,7 @@ Bind enum values using [`@bind-Value`](https://help.syncfusion.com/cr/blazor/Syn {% endhighlight %} -![Blazor DropDownList with Enum Data](./images/value-binding/blazor_dropdown_enum-binding.png) +![Blazor DropDownList with Enum Data](./images/value-binding/blazor_dropdown_enum-binding.webp) ## Show or hide clear button @@ -117,7 +117,7 @@ The following example uses `string` as `TValue`, so clearing sets the value to ` {% endhighlight %} -![Blazor DropDownList with clear button](./images/value-binding/blazor_dropdown_show-hide-clear-button.png) +![Blazor DropDownList with clear button](./images/value-binding/blazor_dropdown_show-hide-clear-button.webp) ## Dynamically change TItem @@ -229,7 +229,7 @@ Two-way binding synchronizes data between the UI and the model using the Blazor {% endhighlight %} -![Blazor DropDownList with Two way binding](./images/value-binding/blazor_dropdown_two-way-binding.png) +![Blazor DropDownList with Two way binding](./images/value-binding/blazor_dropdown_two-way-binding.webp) ## Programmatically clearing value diff --git a/blazor/in-place-editor/accessibility.md b/blazor/in-place-editor/accessibility.md index 55d4707a4e..17e91b579c 100644 --- a/blazor/in-place-editor/accessibility.md +++ b/blazor/in-place-editor/accessibility.md @@ -7,7 +7,7 @@ control: In-place Editor documentation: ug --- -# Accessibility in Blazor In-place editor component +# Accessibility in Blazor Ifn-place editor component The [Blazor In-place editor](https://www.syncfusion.com/blazor-components/blazor-in-place-editor) component follows 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/in-place-editor/buttons.md b/blazor/in-place-editor/buttons.md index a9ad0c7e28..11f756eb3d 100644 --- a/blazor/in-place-editor/buttons.md +++ b/blazor/in-place-editor/buttons.md @@ -83,7 +83,7 @@ N> For more details about buttons, refer this documentation [section](../button/ -![Blazor In-place Editor with Buttons](./images/blazor-inplace-editor-with-buttons.png) +![Blazor In-place Editor with Buttons](./images/blazor-inplace-editor-with-buttons.webp) ## See Also diff --git a/blazor/in-place-editor/configuration.md b/blazor/in-place-editor/configuration.md index d2a2755f54..8b9994513c 100644 --- a/blazor/in-place-editor/configuration.md +++ b/blazor/in-place-editor/configuration.md @@ -363,7 +363,7 @@ The following example shows interactive and normal display modes. ``` -![Blazor In-place Editor text with underline](./images/blazor-inplace-editor-text-with-under-line.png) +![Blazor In-place Editor text with underline](./images/blazor-inplace-editor-text-with-under-line.webp) ## See Also diff --git a/blazor/in-place-editor/controls.md b/blazor/in-place-editor/controls.md index 78af4749bf..51e4759e24 100644 --- a/blazor/in-place-editor/controls.md +++ b/blazor/in-place-editor/controls.md @@ -284,7 +284,7 @@ The following example demonstrates how to render the Editor components in the In ``` -![Blazor In-place Editor with Different Components](./images/blazor-inplace-editor-with-different-components.png) +![Blazor In-place Editor with Different Components](./images/blazor-inplace-editor-with-different-components.webp) ## See Also diff --git a/blazor/in-place-editor/data-binding.md b/blazor/in-place-editor/data-binding.md index 5256152093..29ef0e089b 100644 --- a/blazor/in-place-editor/data-binding.md +++ b/blazor/in-place-editor/data-binding.md @@ -59,4 +59,4 @@ To bind local data to the Razor components, you can assign an array of object or ``` -![Data Binding in Blazor In-place Editor](./images/blazor-inplace-editor-data-binding.png) \ No newline at end of file +![Data Binding in Blazor In-place Editor](./images/blazor-inplace-editor-data-binding.webp) \ No newline at end of file diff --git a/blazor/in-place-editor/getting-started-with-server-app.md b/blazor/in-place-editor/getting-started-with-server-app.md index e13e24cee6..c45e098c73 100644 --- a/blazor/in-place-editor/getting-started-with-server-app.md +++ b/blazor/in-place-editor/getting-started-with-server-app.md @@ -192,7 +192,7 @@ N> Specify the editor [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor In-place Editor component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJtMLkzWvWaMvy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor In-place Editor Component](images/blazor-inplace-editor-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJtMLkzWvWaMvy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor In-place Editor Component](images/blazor-inplace-editor-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/InPlaceEditor). @@ -406,7 +406,7 @@ In the following code, it is configured to render the `DatePicker`, `DropDownLis {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpDiBOpBgAmQAj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Integrating DatePicker in Blazor In-place Editor](./images/blazor-inplace-editor-integrate-datepicker.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpDiBOpBgAmQAj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Integrating DatePicker in Blazor In-place Editor](./images/blazor-inplace-editor-integrate-datepicker.webp)" %} ## Submitting data to the server (save) diff --git a/blazor/in-place-editor/getting-started-with-web-app.md b/blazor/in-place-editor/getting-started-with-web-app.md index 8788efdf4f..3b90924c6a 100644 --- a/blazor/in-place-editor/getting-started-with-web-app.md +++ b/blazor/in-place-editor/getting-started-with-web-app.md @@ -202,7 +202,7 @@ N> Specify the editor [Type](https://help.syncfusion.com/cr/blazor/Syncfusion.Bl * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor In-place Editor component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJtMLkzWvWaMvy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor In-place Editor Component](images/blazor-inplace-editor-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJtMLkzWvWaMvy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor In-place Editor Component](images/blazor-inplace-editor-component.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/InPlaceEditor). @@ -416,7 +416,7 @@ In the following code, it is configured to render the `DatePicker`, `DropDownLis {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpDiBOpBgAmQAj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Integrating DatePicker in Blazor In-place Editor](./images/blazor-inplace-editor-integrate-datepicker.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpDiBOpBgAmQAj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Integrating DatePicker in Blazor In-place Editor](./images/blazor-inplace-editor-integrate-datepicker.webp)" %} ## Submitting data to the server (save) diff --git a/blazor/in-place-editor/getting-started.md b/blazor/in-place-editor/getting-started.md index c949bfa5ac..70b054027a 100644 --- a/blazor/in-place-editor/getting-started.md +++ b/blazor/in-place-editor/getting-started.md @@ -182,7 +182,7 @@ N> The type of component editor must be configured in the 'Type' Editor In-place * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor In-place Editor component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJtMLkzWvWaMvy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor In-place Editor Component](images/blazor-inplace-editor-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNhJtMLkzWvWaMvy?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor In-place Editor Component](images/blazor-inplace-editor-component.webp)" %} N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/InPlaceEditor). @@ -396,7 +396,7 @@ In the following code, the `DatePicker`, `DropDownList`, and `TextBox` component {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpDiBOpBgAmQAj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Integrating DatePicker in Blazor In-place Editor](./images/blazor-inplace-editor-integrate-datepicker.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLpDiBOpBgAmQAj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Integrating DatePicker in Blazor In-place Editor](./images/blazor-inplace-editor-integrate-datepicker.webp)" %} ## Submitting data to the server (save) diff --git a/blazor/in-place-editor/images/action-on-blur.webp b/blazor/in-place-editor/images/action-on-blur.webp new file mode 100644 index 0000000000..047647e675 Binary files /dev/null and b/blazor/in-place-editor/images/action-on-blur.webp differ diff --git a/blazor/in-place-editor/images/blazor-inplace-editor-component.webp b/blazor/in-place-editor/images/blazor-inplace-editor-component.webp new file mode 100644 index 0000000000..b9ea012009 Binary files /dev/null and b/blazor/in-place-editor/images/blazor-inplace-editor-component.webp differ diff --git a/blazor/in-place-editor/images/blazor-inplace-editor-data-binding.webp b/blazor/in-place-editor/images/blazor-inplace-editor-data-binding.webp new file mode 100644 index 0000000000..c9c5281744 Binary files /dev/null and b/blazor/in-place-editor/images/blazor-inplace-editor-data-binding.webp differ diff --git a/blazor/in-place-editor/images/blazor-inplace-editor-formatting.webp b/blazor/in-place-editor/images/blazor-inplace-editor-formatting.webp new file mode 100644 index 0000000000..2eec0a4ef6 Binary files /dev/null and b/blazor/in-place-editor/images/blazor-inplace-editor-formatting.webp differ diff --git a/blazor/in-place-editor/images/blazor-inplace-editor-html-template.webp b/blazor/in-place-editor/images/blazor-inplace-editor-html-template.webp new file mode 100644 index 0000000000..d27a53450a Binary files /dev/null and b/blazor/in-place-editor/images/blazor-inplace-editor-html-template.webp differ diff --git a/blazor/in-place-editor/images/blazor-inplace-editor-in-inline-mode.webp b/blazor/in-place-editor/images/blazor-inplace-editor-in-inline-mode.webp new file mode 100644 index 0000000000..cb8186759a Binary files /dev/null and b/blazor/in-place-editor/images/blazor-inplace-editor-in-inline-mode.webp differ diff --git a/blazor/in-place-editor/images/blazor-inplace-editor-in-popup-mode.webp b/blazor/in-place-editor/images/blazor-inplace-editor-in-popup-mode.webp new file mode 100644 index 0000000000..75dfabcf04 Binary files /dev/null and b/blazor/in-place-editor/images/blazor-inplace-editor-in-popup-mode.webp differ diff --git a/blazor/in-place-editor/images/blazor-inplace-editor-integrate-datepicker.webp b/blazor/in-place-editor/images/blazor-inplace-editor-integrate-datepicker.webp new file mode 100644 index 0000000000..8d661f3cba Binary files /dev/null and b/blazor/in-place-editor/images/blazor-inplace-editor-integrate-datepicker.webp differ diff --git a/blazor/in-place-editor/images/blazor-inplace-editor-localization.webp b/blazor/in-place-editor/images/blazor-inplace-editor-localization.webp new file mode 100644 index 0000000000..ff75c5f730 Binary files /dev/null and b/blazor/in-place-editor/images/blazor-inplace-editor-localization.webp differ diff --git a/blazor/in-place-editor/images/blazor-inplace-editor-refresh-data.webp b/blazor/in-place-editor/images/blazor-inplace-editor-refresh-data.webp new file mode 100644 index 0000000000..34d7e278c4 Binary files /dev/null and b/blazor/in-place-editor/images/blazor-inplace-editor-refresh-data.webp differ diff --git a/blazor/in-place-editor/images/blazor-inplace-editor-right-to-left.webp b/blazor/in-place-editor/images/blazor-inplace-editor-right-to-left.webp new file mode 100644 index 0000000000..fdf936e684 Binary files /dev/null and b/blazor/in-place-editor/images/blazor-inplace-editor-right-to-left.webp differ diff --git a/blazor/in-place-editor/images/blazor-inplace-editor-text-with-under-line.webp b/blazor/in-place-editor/images/blazor-inplace-editor-text-with-under-line.webp new file mode 100644 index 0000000000..7972db3cb2 Binary files /dev/null and b/blazor/in-place-editor/images/blazor-inplace-editor-text-with-under-line.webp differ diff --git a/blazor/in-place-editor/images/blazor-inplace-editor-validation.webp b/blazor/in-place-editor/images/blazor-inplace-editor-validation.webp new file mode 100644 index 0000000000..63ea894618 Binary files /dev/null and b/blazor/in-place-editor/images/blazor-inplace-editor-validation.webp differ diff --git a/blazor/in-place-editor/images/blazor-inplace-editor-with-buttons.webp b/blazor/in-place-editor/images/blazor-inplace-editor-with-buttons.webp new file mode 100644 index 0000000000..cf72650161 Binary files /dev/null and b/blazor/in-place-editor/images/blazor-inplace-editor-with-buttons.webp differ diff --git a/blazor/in-place-editor/images/blazor-inplace-editor-with-different-components.webp b/blazor/in-place-editor/images/blazor-inplace-editor-with-different-components.webp new file mode 100644 index 0000000000..4a71190b14 Binary files /dev/null and b/blazor/in-place-editor/images/blazor-inplace-editor-with-different-components.webp differ diff --git a/blazor/in-place-editor/images/custom-animation.webp b/blazor/in-place-editor/images/custom-animation.webp new file mode 100644 index 0000000000..8e322861a6 Binary files /dev/null and b/blazor/in-place-editor/images/custom-animation.webp differ diff --git a/blazor/in-place-editor/images/custom-indication.webp b/blazor/in-place-editor/images/custom-indication.webp new file mode 100644 index 0000000000..c0cb1d3538 Binary files /dev/null and b/blazor/in-place-editor/images/custom-indication.webp differ diff --git a/blazor/in-place-editor/images/disable-edit.webp b/blazor/in-place-editor/images/disable-edit.webp new file mode 100644 index 0000000000..63a9290c66 Binary files /dev/null and b/blazor/in-place-editor/images/disable-edit.webp differ diff --git a/blazor/in-place-editor/images/disable-editor.webp b/blazor/in-place-editor/images/disable-editor.webp new file mode 100644 index 0000000000..2b8746a5c4 Binary files /dev/null and b/blazor/in-place-editor/images/disable-editor.webp differ diff --git a/blazor/in-place-editor/images/dynamic-edit.webp b/blazor/in-place-editor/images/dynamic-edit.webp new file mode 100644 index 0000000000..753174709b Binary files /dev/null and b/blazor/in-place-editor/images/dynamic-edit.webp differ diff --git a/blazor/in-place-editor/images/dynamic-editmode.webp b/blazor/in-place-editor/images/dynamic-editmode.webp new file mode 100644 index 0000000000..66b831fd33 Binary files /dev/null and b/blazor/in-place-editor/images/dynamic-editmode.webp differ diff --git a/blazor/in-place-editor/images/editable-on.webp b/blazor/in-place-editor/images/editable-on.webp new file mode 100644 index 0000000000..80c1ef2c41 Binary files /dev/null and b/blazor/in-place-editor/images/editable-on.webp differ diff --git a/blazor/in-place-editor/images/editable.webp b/blazor/in-place-editor/images/editable.webp new file mode 100644 index 0000000000..45df34f9bc Binary files /dev/null and b/blazor/in-place-editor/images/editable.webp differ diff --git a/blazor/in-place-editor/images/getting-started-form.webp b/blazor/in-place-editor/images/getting-started-form.webp new file mode 100644 index 0000000000..795169f747 Binary files /dev/null and b/blazor/in-place-editor/images/getting-started-form.webp differ diff --git a/blazor/in-place-editor/images/mode.webp b/blazor/in-place-editor/images/mode.webp new file mode 100644 index 0000000000..2516397ff8 Binary files /dev/null and b/blazor/in-place-editor/images/mode.webp differ diff --git a/blazor/in-place-editor/images/odata.webp b/blazor/in-place-editor/images/odata.webp new file mode 100644 index 0000000000..2571aa72e7 Binary files /dev/null and b/blazor/in-place-editor/images/odata.webp differ diff --git a/blazor/in-place-editor/images/outer-style-like-material-filled.webp b/blazor/in-place-editor/images/outer-style-like-material-filled.webp new file mode 100644 index 0000000000..41a15677d9 Binary files /dev/null and b/blazor/in-place-editor/images/outer-style-like-material-filled.webp differ diff --git a/blazor/in-place-editor/images/popup.webp b/blazor/in-place-editor/images/popup.webp new file mode 100644 index 0000000000..a45fdf9bf9 Binary files /dev/null and b/blazor/in-place-editor/images/popup.webp differ diff --git a/blazor/in-place-editor/images/server-actions.webp b/blazor/in-place-editor/images/server-actions.webp new file mode 100644 index 0000000000..e96b2f9c70 Binary files /dev/null and b/blazor/in-place-editor/images/server-actions.webp differ diff --git a/blazor/in-place-editor/images/webapi.webp b/blazor/in-place-editor/images/webapi.webp new file mode 100644 index 0000000000..e4a52c6819 Binary files /dev/null and b/blazor/in-place-editor/images/webapi.webp differ diff --git a/blazor/in-place-editor/integration.md b/blazor/in-place-editor/integration.md index 419166f13f..98c9e22a63 100644 --- a/blazor/in-place-editor/integration.md +++ b/blazor/in-place-editor/integration.md @@ -68,7 +68,7 @@ In the following template example, the input is bound and, before submitting dat ``` -![Integrating an HTML template in Blazor In-place Editor](./images/blazor-inplace-editor-html-template.png) +![Integrating an HTML template in Blazor In-place Editor](./images/blazor-inplace-editor-html-template.webp) ## See Also diff --git a/blazor/in-place-editor/localization.md b/blazor/in-place-editor/localization.md index 36dce59d14..2c41feee0d 100644 --- a/blazor/in-place-editor/localization.md +++ b/blazor/in-place-editor/localization.md @@ -45,7 +45,7 @@ Specify the direction of the In-place Editor using the `EnableRtl` property. Use ``` -![Right to Left in Blazor In-place Editor](./images/blazor-inplace-editor-right-to-left.png) +![Right to Left in Blazor In-place Editor](./images/blazor-inplace-editor-right-to-left.webp) ## Format @@ -82,4 +82,4 @@ Formatting is a way of representing the value in different formats. Format the f ``` -![Formatting in Blazor In-place Editor](./images/blazor-inplace-editor-formatting.png) \ No newline at end of file +![Formatting in Blazor In-place Editor](./images/blazor-inplace-editor-formatting.webp) \ No newline at end of file diff --git a/blazor/in-place-editor/style.md b/blazor/in-place-editor/style.md index 4ea4fe064a..d6e60765c5 100644 --- a/blazor/in-place-editor/style.md +++ b/blazor/in-place-editor/style.md @@ -79,4 +79,4 @@ Use the following CSS to customize the outer container of the In-place Editor (f ``` -![Blazor In-place Editor outer style like material filled](./images/outer-style-like-material-filled.png) +![Blazor In-place Editor outer style like material filled](./images/outer-style-like-material-filled.webp) diff --git a/blazor/in-place-editor/validation.md b/blazor/in-place-editor/validation.md index 8df4b0f26c..bbef501d90 100644 --- a/blazor/in-place-editor/validation.md +++ b/blazor/in-place-editor/validation.md @@ -72,4 +72,4 @@ Refer to the following link for more details, [EditForm Validation](https://lear ``` -![Validation in Blazor In-place Editor](./images/blazor-inplace-editor-validation.png) \ No newline at end of file +![Validation in Blazor In-place Editor](./images/blazor-inplace-editor-validation.webp) \ No newline at end of file diff --git a/blazor/multiselect-dropdown/data-binding.md b/blazor/multiselect-dropdown/data-binding.md index 05fda9a40c..393b13bf8a 100644 --- a/blazor/multiselect-dropdown/data-binding.md +++ b/blazor/multiselect-dropdown/data-binding.md @@ -23,7 +23,7 @@ The MultiSelect loads the data from local data sources through the [DataSource]( {% endhighlight %} -![Blazor MultiSelect with local data binding](./images/data-binding/blazor_multiselect_local-binding.png) +![Blazor MultiSelect with local data binding](./images/data-binding/blazor_multiselect_local-binding.webp) ### DataBound event @@ -47,7 +47,7 @@ The following example demonstrates binding an array of string values to the Mult {% endhighlight %} -![Blazor MultiSelect with Primitive string type](./images/data-binding/blazor_multiselect_primitive-type-string.png) +![Blazor MultiSelect with Primitive string type](./images/data-binding/blazor_multiselect_primitive-type-string.webp) The following example demonstrates binding an array of integer values to the MultiSelect component. @@ -57,7 +57,7 @@ The following example demonstrates binding an array of integer values to the Mul {% endhighlight %} -![Blazor MultiSelect with primitive int type](./images/data-binding/blazor_multiselect_primitive-type-int.png) +![Blazor MultiSelect with primitive int type](./images/data-binding/blazor_multiselect_primitive-type-int.webp) ### Complex data type @@ -71,7 +71,7 @@ In the following example, the `Code.ID` field and `Country.CountryID` field from {% endhighlight %} -![Binding complex items with Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-complex-item.png) +![Binding complex items with Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-complex-item.webp) ### Expando object binding @@ -83,7 +83,7 @@ Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic {% endhighlight %} -![Blazor MultiSelect with expando object data binding](./images/blazor_multiselect_expando-object.png) +![Blazor MultiSelect with expando object data binding](./images/blazor_multiselect_expando-object.webp) ### Observable collection binding @@ -95,7 +95,7 @@ Bind [ObservableCollection](https://blazor.syncfusion.com/documentation/common/d {% endhighlight %} -![Blazor MultiSelect with observable collection data binding](./images/blazor_multiselect_observable-collection.png) +![Blazor MultiSelect with observable collection data binding](./images/blazor_multiselect_observable-collection.webp) ### Dynamic object binding @@ -107,7 +107,7 @@ Bind the [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dyn {% endhighlight %} -![Blazor MultiSelect with DynamicObject data binding](./images/blazor_multiselect_dynamic-object.png) +![Blazor MultiSelect with DynamicObject data binding](./images/blazor_multiselect_dynamic-object.webp) ### Enum data binding @@ -119,7 +119,7 @@ Convert enum values into a list of strings and bind them to the [DataSource](htt {% endhighlight %} -![Blazor MultiSelect with enum data binding](./images/data-binding/blazor_multiselect_enum-data-binding.png) +![Blazor MultiSelect with enum data binding](./images/data-binding/blazor_multiselect_enum-data-binding.webp) ### ValueTuple data binding @@ -131,7 +131,7 @@ Bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple {% endhighlight %} -![Blazor MultiSelect Dropdown ValueTuple data](./images/blazor-multiselect-dropdown-valuetuple.png) +![Blazor MultiSelect Dropdown ValueTuple data](./images/blazor-multiselect-dropdown-valuetuple.webp) ## Binding remote data @@ -182,7 +182,7 @@ The [OData v4 adaptor](https://blazor.syncfusion.com/documentation/data/adaptors {% endhighlight %} -![Blazor MultiSelect with OData v4 adaptor](./images/data-binding/blazor_multiselect_odata-v4-services.png) +![Blazor MultiSelect with OData v4 adaptor](./images/data-binding/blazor_multiselect_odata-v4-services.webp) ### Web API adaptor @@ -194,7 +194,7 @@ The [Web API adaptor](https://blazor.syncfusion.com/documentation/data/adaptors# {% endhighlight %} -![Blazor MultiSelect Dropdown with Web API data](./images/blazor-multiselect-dropdown-web-api-data.png) +![Blazor MultiSelect Dropdown with Web API data](./images/blazor-multiselect-dropdown-web-api-data.webp) ### Custom adaptor @@ -241,7 +241,7 @@ The following example demonstrates remote data binding with offline mode enabled {% endhighlight %} -![Blazor MultiSelect Dropdown in offline mode](./images/blazor-multiselect-dropdown-web-api-data.png) +![Blazor MultiSelect Dropdown in offline mode](./images/blazor-multiselect-dropdown-web-api-data.webp) ## Entity Framework @@ -377,7 +377,7 @@ Add new items to the popup by using the [AddItemsAsync](https://help.syncfusion. {% endhighlight %} -![Blazor MultiSelect with adding new item](./images/data-binding/blazor_multiselect_add-new-item.png) +![Blazor MultiSelect with adding new item](./images/data-binding/blazor_multiselect_add-new-item.webp) ## Customizing the Change Event diff --git a/blazor/multiselect-dropdown/data-source.md b/blazor/multiselect-dropdown/data-source.md index 2df6262df1..ea4c794200 100644 --- a/blazor/multiselect-dropdown/data-source.md +++ b/blazor/multiselect-dropdown/data-source.md @@ -73,7 +73,7 @@ In the following example, `Name` column from complex data have been mapped to th } ``` -![Binding Blazor MultiSelect Dropdown items](./images/blazor-multiselect-dropdown-binding-items.png) +![Binding Blazor MultiSelect Dropdown items](./images/blazor-multiselect-dropdown-binding-items.webp) ### Array of complex object @@ -120,7 +120,7 @@ public List LocalData { get; set; } = new Complex().GetData(); } ``` -![Binding complex items with Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-complex-item.png) +![Binding complex items with Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-complex-item.webp) ## Binding remote data @@ -158,7 +158,7 @@ The following sample displays the first six orders from the `Orders` table of th } ``` -![Blazor MultiSelect Dropdown with data binding](./images/blazor-multiselect-dropdown-with-data-binding.png) +![Blazor MultiSelect Dropdown with data binding](./images/blazor-multiselect-dropdown-with-data-binding.webp) ### Web API Adaptor @@ -187,7 +187,7 @@ Use the `WebApiAdaptor` to bind the MultiSelect with Web API endpoints that foll } ``` -![Blazor MultiSelect Dropdown with Web API data](./images/blazor-multiselect-dropdown-web-api-data.png) +![Blazor MultiSelect Dropdown with Web API data](./images/blazor-multiselect-dropdown-web-api-data.webp) ### Custom Adaptor @@ -293,7 +293,7 @@ To avoid a postback for every action, load all data during initialization and pr } ``` -![Blazor MultiSelect Dropdown in offline mode](./images/blazor-multiselect-dropdown-web-api-data.png) +![Blazor MultiSelect Dropdown in offline mode](./images/blazor-multiselect-dropdown-web-api-data.webp) ### ValueTuple data binding @@ -310,7 +310,7 @@ Bind [ValueTuple](https://learn.microsoft.com/en-us/dotnet/api/system.valuetuple ``` -![Blazor MultiSelect Dropdown ValueTuple data](./images/blazor-multiselect-dropdown-valuetuple.png) +![Blazor MultiSelect Dropdown ValueTuple data](./images/blazor-multiselect-dropdown-valuetuple.webp) ## Binding ExpandoObject @@ -341,7 +341,7 @@ Bind [ExpandoObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic ``` -![Blazor MultiSelect with ExpandoObject data binding](./images/blazor_multiselect_expando-object.png) +![Blazor MultiSelect with ExpandoObject data binding](./images/blazor_multiselect_expando-object.webp) ## Binding DynamicObject @@ -391,7 +391,7 @@ Bind [DynamicObject](https://learn.microsoft.com/en-us/dotnet/api/system.dynamic ``` -![Blazor MultiSelect with dynamic object data binding](./images/blazor_multiselect_dynamic-object.png) +![Blazor MultiSelect with dynamic object data binding](./images/blazor_multiselect_dynamic-object.webp) ## Binding ObservableCollection @@ -434,7 +434,7 @@ Bind [ObservableCollection](https://learn.microsoft.com/en-us/dotnet/api/system. ``` -![Blazor MultiSelect with observable collection data binding](./images/blazor_multiselect_observable-collection.png) +![Blazor MultiSelect with observable collection data binding](./images/blazor_multiselect_observable-collection.webp) ## Entity Framework diff --git a/blazor/multiselect-dropdown/filtering.md b/blazor/multiselect-dropdown/filtering.md index 33ca4b85f1..8abcd37202 100644 --- a/blazor/multiselect-dropdown/filtering.md +++ b/blazor/multiselect-dropdown/filtering.md @@ -21,7 +21,7 @@ The following example demonstrates filtering with local data in the MultiSelect {% endhighlight %} -![Filtering in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-filtering.png) +![Filtering in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-filtering.webp) ## Remote data @@ -66,7 +66,7 @@ In the following example, the `EndsWith` filter type is configured using the `Fi {% endhighlight %} -![Blazor MultiSelect with filter type](./images/filtering/blazor_MultiSelect_filter-type.png) +![Blazor MultiSelect with filter type](./images/filtering/blazor_MultiSelect_filter-type.webp) ## Case sensitive filtering @@ -90,7 +90,7 @@ Display watermark text in the filter bar by using the [FilterBarPlaceholder](htt {% endhighlight %} -![Blazor MultiSelect Dropdown with FilterBarPlaceholder property](./images/filtering/blazor_multiselect_filterBarPlaceholder-property.png) +![Blazor MultiSelect Dropdown with FilterBarPlaceholder property](./images/filtering/blazor_multiselect_filterBarPlaceholder-property.webp) ## Custom Filtering diff --git a/blazor/multiselect-dropdown/form-validation.md b/blazor/multiselect-dropdown/form-validation.md index 8b32b86629..b15b249afa 100644 --- a/blazor/multiselect-dropdown/form-validation.md +++ b/blazor/multiselect-dropdown/form-validation.md @@ -27,7 +27,7 @@ When the MultiSelect input is valid, the form can be submitted. If the input is {% endhighlight %} -![Blazor MultiSelect inside EditForm](./images/form-validation/blazor_multiselect_inside-editform.png) +![Blazor MultiSelect inside EditForm](./images/form-validation/blazor_multiselect_inside-editform.webp) ## Selection Limit @@ -41,4 +41,4 @@ In the following example, the selection limit is set to three items, and the Mul {% endhighlight %} -![Blazor MultiSelect Dropdown with limit selection in CheckBox mode](./images/blazor-multiselect-dropdown-limit-selection.png) \ No newline at end of file +![Blazor MultiSelect Dropdown with limit selection in CheckBox mode](./images/blazor-multiselect-dropdown-limit-selection.webp) \ No newline at end of file diff --git a/blazor/multiselect-dropdown/getting-started-webapp.md b/blazor/multiselect-dropdown/getting-started-webapp.md index 185b21c8bc..401dad35ec 100644 --- a/blazor/multiselect-dropdown/getting-started-webapp.md +++ b/blazor/multiselect-dropdown/getting-started-webapp.md @@ -176,7 +176,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor MultiSelect DropDown component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTZigtBWzsEjwg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiSelect DropDown Component](./images/blazing-fast-multiselect-dropdown-blazor.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTZigtBWzsEjwg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiSelect DropDown Component](./images/blazing-fast-multiselect-dropdown-blazor.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/MultiSelectDropDown). @@ -217,7 +217,7 @@ After initialization, populate the MultiSelect using the [DataSource](https://he {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLTNMqXVWJxbCSJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor MultiSelect DropDown](./images/blazing-fast-multiselect-dropdown-data-binding.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLTNMqXVWJxbCSJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor MultiSelect DropDown](./images/blazing-fast-multiselect-dropdown-data-binding.webp)" %} ## Configure the popup list @@ -237,7 +237,7 @@ The height and width of the popup list can also be customized using the [PopupHe {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLTjiUjrCSBlVto?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Configuring Popup List in Blazor MultiSelect DropDown](./images/blazor-multiselect-dropdown-configure-poup-list.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLTjiUjrCSBlVto?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Configuring Popup List in Blazor MultiSelect DropDown](./images/blazor-multiselect-dropdown-configure-poup-list.webp)" %} ## Get selected value diff --git a/blazor/multiselect-dropdown/getting-started-with-maui-app.md b/blazor/multiselect-dropdown/getting-started-with-maui-app.md index 91a17f592b..a41ace8572 100644 --- a/blazor/multiselect-dropdown/getting-started-with-maui-app.md +++ b/blazor/multiselect-dropdown/getting-started-with-maui-app.md @@ -136,7 +136,7 @@ Add the Syncfusion® Blazor MultiSelect Drop Run the sample on Windows to launch the .NET MAUI Blazor app. -![Blazor MultiSelect Dropdown Component](./images/blazor-multiselect-dropdown-maui-app.png) +![Blazor MultiSelect Dropdown Component](./images/blazor-multiselect-dropdown-maui-app.webp) ### How to run the sample on Android @@ -146,7 +146,7 @@ To run the Blazor MultiSelect Dropdown in a .NET MAUI Android app using the Andr N> If any errors occur while using the Android Emulator, see [Troubleshooting Android Emulator](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/troubleshooting). -![Blazor MultiSelect Dropdown Component](./images/blazing-fast-multiselect-dropdown-blazor.png) +![Blazor MultiSelect Dropdown Component](./images/blazing-fast-multiselect-dropdown-blazor.webp) ## Binding data source @@ -185,7 +185,7 @@ After initialization, populate the MultiSelect using the [DataSource](https://he {% endhighlight %} {% endtabs %} -![Data Binding in Blazor MultiSelect Dropdown](./images/blazing-fast-multiselect-dropdown-data-binding.png) +![Data Binding in Blazor MultiSelect Dropdown](./images/blazing-fast-multiselect-dropdown-data-binding.webp) ## Configure the popup list @@ -205,7 +205,7 @@ The height and width of the popup list can also be customized using the [PopupHe {% endhighlight %} {% endtabs %} -![Configuring Popup List in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-configure-poup-list.png) +![Configuring Popup List in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-configure-poup-list.webp) ## Get selected value diff --git a/blazor/multiselect-dropdown/getting-started-with-server-app.md b/blazor/multiselect-dropdown/getting-started-with-server-app.md index c429eb2dc1..47331cad52 100644 --- a/blazor/multiselect-dropdown/getting-started-with-server-app.md +++ b/blazor/multiselect-dropdown/getting-started-with-server-app.md @@ -172,7 +172,7 @@ N> If the Interactivity Location is set to `Global`, the render mode is automati * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor MultiSelect DropDown component in your default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTZigtBWzsEjwg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiSelect DropDown Component](./images/blazing-fast-multiselect-dropdown-blazor.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTZigtBWzsEjwg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiSelect DropDown Component](./images/blazing-fast-multiselect-dropdown-blazor.webp)" %} ## Binding data source @@ -211,7 +211,7 @@ After initialization, populate the MultiSelect using the [DataSource](https://he {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLTNMqXVWJxbCSJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor MultiSelect DropDown](./images/blazing-fast-multiselect-dropdown-data-binding.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLTNMqXVWJxbCSJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor MultiSelect DropDown](./images/blazing-fast-multiselect-dropdown-data-binding.webp)" %} ## Configure the popup list @@ -231,7 +231,7 @@ The height and width of the popup list can also be customized using the [PopupHe {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLTjiUjrCSBlVto?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Configuring Popup List in Blazor MultiSelect DropDown](./images/blazor-multiselect-dropdown-configure-poup-list.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLTjiUjrCSBlVto?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Configuring Popup List in Blazor MultiSelect DropDown](./images/blazor-multiselect-dropdown-configure-poup-list.webp)" %} ## Get selected value diff --git a/blazor/multiselect-dropdown/getting-started.md b/blazor/multiselect-dropdown/getting-started.md index 43dd80b223..581ffb3d0b 100644 --- a/blazor/multiselect-dropdown/getting-started.md +++ b/blazor/multiselect-dropdown/getting-started.md @@ -157,7 +157,7 @@ Add the Syncfusion® Blazor MultiSelect Drop * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor MultiSelect DropDown component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTZigtBWzsEjwg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiSelect DropDown Component](./images/blazing-fast-multiselect-dropdown-blazor.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNLTZigtBWzsEjwg?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor MultiSelect DropDown Component](./images/blazing-fast-multiselect-dropdown-blazor.webp)" %} ## Binding data source @@ -196,7 +196,7 @@ After initialization, populate the MultiSelect using the [DataSource](https://he {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLTNMqXVWJxbCSJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor MultiSelect DropDown](./images/blazing-fast-multiselect-dropdown-data-binding.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/BNLTNMqXVWJxbCSJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Data Binding in Blazor MultiSelect DropDown](./images/blazing-fast-multiselect-dropdown-data-binding.webp)" %} ## Configure the popup list @@ -216,7 +216,7 @@ The height and width of the popup list can also be customized using the [PopupHe {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLTjiUjrCSBlVto?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Configuring Popup List in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-configure-poup-list.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtLTjiUjrCSBlVto?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Configuring Popup List in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-configure-poup-list.webp)" %} ## Get selected value diff --git a/blazor/multiselect-dropdown/grouping.md b/blazor/multiselect-dropdown/grouping.md index cb747bce90..c37ccbdad9 100644 --- a/blazor/multiselect-dropdown/grouping.md +++ b/blazor/multiselect-dropdown/grouping.md @@ -23,7 +23,7 @@ In the following sample, vegetables are grouped by category using the `MultiSele {% endhighlight %} -![Grouping in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-grouping.png) +![Grouping in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-grouping.webp) ## Fixed group header diff --git a/blazor/multiselect-dropdown/images/blazing-fast-multiselect-dropdown-blazor.webp b/blazor/multiselect-dropdown/images/blazing-fast-multiselect-dropdown-blazor.webp new file mode 100644 index 0000000000..4a39307aa9 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazing-fast-multiselect-dropdown-blazor.webp differ diff --git a/blazor/multiselect-dropdown/images/blazing-fast-multiselect-dropdown-data-binding.webp b/blazor/multiselect-dropdown/images/blazing-fast-multiselect-dropdown-data-binding.webp new file mode 100644 index 0000000000..56402a8d7c Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazing-fast-multiselect-dropdown-data-binding.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-action-template.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-action-template.webp new file mode 100644 index 0000000000..41d63b03c7 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-action-template.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-binding-items.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-binding-items.webp new file mode 100644 index 0000000000..60f234627d Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-binding-items.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-change-selection-order.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-change-selection-order.webp new file mode 100644 index 0000000000..2e97e2f965 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-change-selection-order.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-checkbox-grouping.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-checkbox-grouping.webp new file mode 100644 index 0000000000..786c184662 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-checkbox-grouping.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-checkbox-selection.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-checkbox-selection.webp new file mode 100644 index 0000000000..6f1fc42186 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-checkbox-selection.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-chip-remove-icon.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-chip-remove-icon.webp new file mode 100644 index 0000000000..6eee182bdb Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-chip-remove-icon.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-complex-item.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-complex-item.webp new file mode 100644 index 0000000000..e9006a1036 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-complex-item.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-configure-poup-list.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-configure-poup-list.webp new file mode 100644 index 0000000000..721b397736 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-configure-poup-list.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-custom-value.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-custom-value.webp new file mode 100644 index 0000000000..212df69351 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-custom-value.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-filtering.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-filtering.webp new file mode 100644 index 0000000000..ccb2fbecec Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-filtering.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-footer-template.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-footer-template.webp new file mode 100644 index 0000000000..0b30424c97 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-footer-template.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-grouping.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-grouping.webp new file mode 100644 index 0000000000..e7a500ffbd Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-grouping.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-header-template.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-header-template.webp new file mode 100644 index 0000000000..233ffbd509 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-header-template.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-item-template.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-item-template.webp new file mode 100644 index 0000000000..00b28cce01 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-item-template.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-limit-selection.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-limit-selection.webp new file mode 100644 index 0000000000..bccc970b3c Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-limit-selection.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-localization.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-localization.webp new file mode 100644 index 0000000000..2db9fa1ea0 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-localization.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-maui-app.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-maui-app.webp new file mode 100644 index 0000000000..8dff30d3e9 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-maui-app.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-tooltip.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-tooltip.webp new file mode 100644 index 0000000000..fd3afa9e04 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-tooltip.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-value-template.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-value-template.webp new file mode 100644 index 0000000000..53591af1c0 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-value-template.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-valuetuple.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-valuetuple.webp new file mode 100644 index 0000000000..00eaa15c34 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-valuetuple.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-web-api-data.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-web-api-data.webp new file mode 100644 index 0000000000..6286522f53 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-web-api-data.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-with-box.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-with-box.webp new file mode 100644 index 0000000000..e9348ea29d Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-with-box.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-with-checkbox.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-with-checkbox.webp new file mode 100644 index 0000000000..9ca833bd1b Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-with-checkbox.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-with-data-binding.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-with-data-binding.webp new file mode 100644 index 0000000000..b1d51624aa Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-with-data-binding.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-without-data.webp b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-without-data.webp new file mode 100644 index 0000000000..140c667db8 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor-multiselect-dropdown-without-data.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor_multiselect_dynamic-object.webp b/blazor/multiselect-dropdown/images/blazor_multiselect_dynamic-object.webp new file mode 100644 index 0000000000..97024fcf3e Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor_multiselect_dynamic-object.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor_multiselect_expando-object.webp b/blazor/multiselect-dropdown/images/blazor_multiselect_expando-object.webp new file mode 100644 index 0000000000..0644d24524 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor_multiselect_expando-object.webp differ diff --git a/blazor/multiselect-dropdown/images/blazor_multiselect_observable-collection.webp b/blazor/multiselect-dropdown/images/blazor_multiselect_observable-collection.webp new file mode 100644 index 0000000000..4cc656ce05 Binary files /dev/null and b/blazor/multiselect-dropdown/images/blazor_multiselect_observable-collection.webp differ diff --git a/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_add-new-item.webp b/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_add-new-item.webp new file mode 100644 index 0000000000..9dafa81011 Binary files /dev/null and b/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_add-new-item.webp differ diff --git a/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_enum-data-binding.webp b/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_enum-data-binding.webp new file mode 100644 index 0000000000..3b5d746858 Binary files /dev/null and b/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_enum-data-binding.webp differ diff --git a/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_local-binding.webp b/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_local-binding.webp new file mode 100644 index 0000000000..d65f92dd97 Binary files /dev/null and b/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_local-binding.webp differ diff --git a/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_odata-v4-services.webp b/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_odata-v4-services.webp new file mode 100644 index 0000000000..b1b4a1c2f9 Binary files /dev/null and b/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_odata-v4-services.webp differ diff --git a/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_primitive-type-int.webp b/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_primitive-type-int.webp new file mode 100644 index 0000000000..50df44b239 Binary files /dev/null and b/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_primitive-type-int.webp differ diff --git a/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_primitive-type-string.webp b/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_primitive-type-string.webp new file mode 100644 index 0000000000..107f224f23 Binary files /dev/null and b/blazor/multiselect-dropdown/images/data-binding/blazor_multiselect_primitive-type-string.webp differ diff --git a/blazor/multiselect-dropdown/images/diacritics.webp b/blazor/multiselect-dropdown/images/diacritics.webp new file mode 100644 index 0000000000..186d2badb1 Binary files /dev/null and b/blazor/multiselect-dropdown/images/diacritics.webp differ diff --git a/blazor/multiselect-dropdown/images/filtering/blazor_MultiSelect_filter-type.webp b/blazor/multiselect-dropdown/images/filtering/blazor_MultiSelect_filter-type.webp new file mode 100644 index 0000000000..5b88eb2731 Binary files /dev/null and b/blazor/multiselect-dropdown/images/filtering/blazor_MultiSelect_filter-type.webp differ diff --git a/blazor/multiselect-dropdown/images/filtering/blazor_multiselect_filterBarPlaceholder-property.webp b/blazor/multiselect-dropdown/images/filtering/blazor_multiselect_filterBarPlaceholder-property.webp new file mode 100644 index 0000000000..5149f12e91 Binary files /dev/null and b/blazor/multiselect-dropdown/images/filtering/blazor_multiselect_filterBarPlaceholder-property.webp differ diff --git a/blazor/multiselect-dropdown/images/form-validation/blazor_multiselect_inside-editform.webp b/blazor/multiselect-dropdown/images/form-validation/blazor_multiselect_inside-editform.webp new file mode 100644 index 0000000000..024b67e948 Binary files /dev/null and b/blazor/multiselect-dropdown/images/form-validation/blazor_multiselect_inside-editform.webp differ diff --git a/blazor/multiselect-dropdown/images/multicolumn/blazor_multiselect_multicolumn.webp b/blazor/multiselect-dropdown/images/multicolumn/blazor_multiselect_multicolumn.webp new file mode 100644 index 0000000000..625df5fbea Binary files /dev/null and b/blazor/multiselect-dropdown/images/multicolumn/blazor_multiselect_multicolumn.webp differ diff --git a/blazor/multiselect-dropdown/images/multiselect-disable.webp b/blazor/multiselect-dropdown/images/multiselect-disable.webp new file mode 100644 index 0000000000..9a58acc32e Binary files /dev/null and b/blazor/multiselect-dropdown/images/multiselect-disable.webp differ diff --git a/blazor/multiselect-dropdown/images/multiselect_data_binding.webp b/blazor/multiselect-dropdown/images/multiselect_data_binding.webp new file mode 100644 index 0000000000..6f77980afb Binary files /dev/null and b/blazor/multiselect-dropdown/images/multiselect_data_binding.webp differ diff --git a/blazor/multiselect-dropdown/images/placeholder-and-floatlabel/blazor_MultiSelect_placeholder-with-color.webp b/blazor/multiselect-dropdown/images/placeholder-and-floatlabel/blazor_MultiSelect_placeholder-with-color.webp new file mode 100644 index 0000000000..527b00c65e Binary files /dev/null and b/blazor/multiselect-dropdown/images/placeholder-and-floatlabel/blazor_MultiSelect_placeholder-with-color.webp differ diff --git a/blazor/multiselect-dropdown/images/placeholder-and-floatlabel/blazor_MultiSelect_placeholder.webp b/blazor/multiselect-dropdown/images/placeholder-and-floatlabel/blazor_MultiSelect_placeholder.webp new file mode 100644 index 0000000000..6bfc7364a8 Binary files /dev/null and b/blazor/multiselect-dropdown/images/placeholder-and-floatlabel/blazor_MultiSelect_placeholder.webp differ diff --git a/blazor/multiselect-dropdown/images/popup-setting/blazor_MultiSelect_preventing-opening-closing.webp b/blazor/multiselect-dropdown/images/popup-setting/blazor_MultiSelect_preventing-opening-closing.webp new file mode 100644 index 0000000000..79429f0b26 Binary files /dev/null and b/blazor/multiselect-dropdown/images/popup-setting/blazor_MultiSelect_preventing-opening-closing.webp differ diff --git a/blazor/multiselect-dropdown/images/selection/blazor_MultiSelect_preselect-value.webp b/blazor/multiselect-dropdown/images/selection/blazor_MultiSelect_preselect-value.webp new file mode 100644 index 0000000000..90c325a622 Binary files /dev/null and b/blazor/multiselect-dropdown/images/selection/blazor_MultiSelect_preselect-value.webp differ diff --git a/blazor/multiselect-dropdown/images/sorting/blazor_MultiSelect_sorting.webp b/blazor/multiselect-dropdown/images/sorting/blazor_MultiSelect_sorting.webp new file mode 100644 index 0000000000..ec6e7089d8 Binary files /dev/null and b/blazor/multiselect-dropdown/images/sorting/blazor_MultiSelect_sorting.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_MultiSelect_font-family.webp b/blazor/multiselect-dropdown/images/style/blazor_MultiSelect_font-family.webp new file mode 100644 index 0000000000..101101a308 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_MultiSelect_font-family.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_Multiselect_adding-icon-popup-items.webp b/blazor/multiselect-dropdown/images/style/blazor_Multiselect_adding-icon-popup-items.webp new file mode 100644 index 0000000000..2095503a3a Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_Multiselect_adding-icon-popup-items.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_Multiselect_dropdown-icon.webp b/blazor/multiselect-dropdown/images/style/blazor_Multiselect_dropdown-icon.webp new file mode 100644 index 0000000000..615eeafd2c Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_Multiselect_dropdown-icon.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect__appearance-of-delimiter-container.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect__appearance-of-delimiter-container.webp new file mode 100644 index 0000000000..492075a508 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect__appearance-of-delimiter-container.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_appearance-of-chips.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_appearance-of-chips.webp new file mode 100644 index 0000000000..00953928f3 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_appearance-of-chips.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_appearance-of-popup.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_appearance-of-popup.webp new file mode 100644 index 0000000000..785587647c Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_appearance-of-popup.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_background-color-of-container.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_background-color-of-container.webp new file mode 100644 index 0000000000..4fa942cfcb Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_background-color-of-container.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_backgroung-color.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_backgroung-color.webp new file mode 100644 index 0000000000..c5180d5764 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_backgroung-color.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_cssClass-property.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_cssClass-property.webp new file mode 100644 index 0000000000..c295de9c11 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_cssClass-property.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_cutomizing-checkbox.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_cutomizing-checkbox.webp new file mode 100644 index 0000000000..2d81cba2b3 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_cutomizing-checkbox.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_disable-property.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_disable-property.webp new file mode 100644 index 0000000000..3cd34362be Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_disable-property.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_disabled-text-color.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_disabled-text-color.webp new file mode 100644 index 0000000000..300ee32cf7 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_disabled-text-color.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_enableCloseOnSelect-property.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_enableCloseOnSelect-property.webp new file mode 100644 index 0000000000..f365022368 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_enableCloseOnSelect-property.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_floatlabel-focus-color.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_floatlabel-focus-color.webp new file mode 100644 index 0000000000..49de34a4f6 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_floatlabel-focus-color.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_focus-color.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_focus-color.webp new file mode 100644 index 0000000000..6624d8b026 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_focus-color.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_hideSelectedItem-property.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_hideSelectedItem-property.webp new file mode 100644 index 0000000000..5d344cfe88 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_hideSelectedItem-property.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_htmlAttributes-property.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_htmlAttributes-property.webp new file mode 100644 index 0000000000..d2d53d2cc5 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_htmlAttributes-property.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_icon-color.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_icon-color.webp new file mode 100644 index 0000000000..d480c5ab4a Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_icon-color.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_inputAttributes-property.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_inputAttributes-property.webp new file mode 100644 index 0000000000..162eee26ad Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_inputAttributes-property.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_openOnClick-property.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_openOnClick-property.webp new file mode 100644 index 0000000000..30a8ff2615 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_openOnClick-property.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_outline-theme-color.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_outline-theme-color.webp new file mode 100644 index 0000000000..591f17378b Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_outline-theme-color.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_placeholder-color.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_placeholder-color.webp new file mode 100644 index 0000000000..513784d71b Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_placeholder-color.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_placeholder-property.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_placeholder-property.webp new file mode 100644 index 0000000000..e55642da5d Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_placeholder-property.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_placeholder-with-mandatory.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_placeholder-with-mandatory.webp new file mode 100644 index 0000000000..681591b074 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_placeholder-with-mandatory.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_popupHeight-property.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_popupHeight-property.webp new file mode 100644 index 0000000000..f6972e598e Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_popupHeight-property.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_popupWidth-property.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_popupWidth-property.webp new file mode 100644 index 0000000000..08d6d94fc5 Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_popupWidth-property.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_readonly-property.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_readonly-property.webp new file mode 100644 index 0000000000..6db5569a4c Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_readonly-property.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_remove-icon-chip-color.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_remove-icon-chip-color.webp new file mode 100644 index 0000000000..4546de697e Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_remove-icon-chip-color.webp differ diff --git a/blazor/multiselect-dropdown/images/style/blazor_multiselect_width-property.webp b/blazor/multiselect-dropdown/images/style/blazor_multiselect_width-property.webp new file mode 100644 index 0000000000..48b71a13aa Binary files /dev/null and b/blazor/multiselect-dropdown/images/style/blazor_multiselect_width-property.webp differ diff --git a/blazor/multiselect-dropdown/images/template/blazor-multiselect-group-template.webp b/blazor/multiselect-dropdown/images/template/blazor-multiselect-group-template.webp new file mode 100644 index 0000000000..c30d215c90 Binary files /dev/null and b/blazor/multiselect-dropdown/images/template/blazor-multiselect-group-template.webp differ diff --git a/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_enum-binding.webp b/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_enum-binding.webp new file mode 100644 index 0000000000..a7135c609f Binary files /dev/null and b/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_enum-binding.webp differ diff --git a/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_object-binding.webp b/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_object-binding.webp new file mode 100644 index 0000000000..ac10cee48a Binary files /dev/null and b/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_object-binding.webp differ diff --git a/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_primitive-type-string.webp b/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_primitive-type-string.webp new file mode 100644 index 0000000000..37465ad4fe Binary files /dev/null and b/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_primitive-type-string.webp differ diff --git a/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_show-hide-clear-button.webp b/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_show-hide-clear-button.webp new file mode 100644 index 0000000000..c2e43f8750 Binary files /dev/null and b/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_show-hide-clear-button.webp differ diff --git a/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_text-and-value.webp b/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_text-and-value.webp new file mode 100644 index 0000000000..3db791c6ee Binary files /dev/null and b/blazor/multiselect-dropdown/images/value-binding/blazor_MultiSelect_text-and-value.webp differ diff --git a/blazor/multiselect-dropdown/images/value-binding/blazor_multiselect_bind-value.webp b/blazor/multiselect-dropdown/images/value-binding/blazor_multiselect_bind-value.webp new file mode 100644 index 0000000000..739e0b0e84 Binary files /dev/null and b/blazor/multiselect-dropdown/images/value-binding/blazor_multiselect_bind-value.webp differ diff --git a/blazor/multiselect-dropdown/multicolumn.md b/blazor/multiselect-dropdown/multicolumn.md index 542dc839f7..e05e07d024 100644 --- a/blazor/multiselect-dropdown/multicolumn.md +++ b/blazor/multiselect-dropdown/multicolumn.md @@ -26,7 +26,7 @@ Use the built-in utility classes below to control text alignment within each col {% endhighlight %} -![Blazor MultiSelect with multicolumn](./images/multicolumn/blazor_multiselect_multicolumn.png) +![Blazor MultiSelect with multicolumn](./images/multicolumn/blazor_multiselect_multicolumn.webp) ## How to display multicolumn item and CheckBox inline diff --git a/blazor/multiselect-dropdown/multiple-selection-display-mode.md b/blazor/multiselect-dropdown/multiple-selection-display-mode.md index 8b8418a162..469617c32c 100644 --- a/blazor/multiselect-dropdown/multiple-selection-display-mode.md +++ b/blazor/multiselect-dropdown/multiple-selection-display-mode.md @@ -27,7 +27,7 @@ In Box mode, selected values are displayed as chips (boxes) within the MultiSele {% endhighlight %} -![Blazor MultiSelect Dropdown with box mode](./images/blazor-multiselect-dropdown-with-box.png) +![Blazor MultiSelect Dropdown with box mode](./images/blazor-multiselect-dropdown-with-box.webp) ### Show the chip remove icon based on conditions @@ -41,7 +41,7 @@ In the example below, the cancel icon is hidden for the "Badminton" and "Cricket {% endhighlight %} -![Blazor MultiSelect Dropdown with conditional chip remove icon](./images/blazor-multiselect-dropdown-chip-remove-icon.png) +![Blazor MultiSelect Dropdown with conditional chip remove icon](./images/blazor-multiselect-dropdown-chip-remove-icon.webp) ## CheckBox mode @@ -59,7 +59,7 @@ To use checkbox, inject the `CheckBoxSelection` module in the MultiSelect. {% endhighlight %} -![Blazor MultiSelect Dropdown with CheckBox mode](./images/blazor-multiselect-dropdown-with-checkbox.png) +![Blazor MultiSelect Dropdown with CheckBox mode](./images/blazor-multiselect-dropdown-with-checkbox.webp) ## Grouping checkbox @@ -71,7 +71,7 @@ Arrange the data source items by grouping them with checkbox mode in MultiSelect {% endhighlight %} -![Blazor MultiSelect Dropdown with CheckBox grouping](./images/blazor-multiselect-dropdown-checkbox-grouping.png) +![Blazor MultiSelect Dropdown with CheckBox grouping](./images/blazor-multiselect-dropdown-checkbox-grouping.webp) ## Selection Reordering @@ -83,7 +83,7 @@ Use [EnableSelectionOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blaz {% endhighlight %} -![Changing selection order in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-change-selection-order.png) +![Changing selection order in Blazor MultiSelect Dropdown](./images/blazor-multiselect-dropdown-change-selection-order.webp) ## Select all @@ -97,7 +97,7 @@ For the unSelect All option, by default unSelect All text will show. You can cus {% endhighlight %} -![Blazor MultiSelect DropDown with CheckBox Selection](./images/blazor-multiselect-dropdown-checkbox-selection.png) +![Blazor MultiSelect DropDown with CheckBox Selection](./images/blazor-multiselect-dropdown-checkbox-selection.webp) ## See also diff --git a/blazor/multiselect-dropdown/placeholder-and-floatlabel.md b/blazor/multiselect-dropdown/placeholder-and-floatlabel.md index 757ae8c653..b29582a9d3 100644 --- a/blazor/multiselect-dropdown/placeholder-and-floatlabel.md +++ b/blazor/multiselect-dropdown/placeholder-and-floatlabel.md @@ -19,7 +19,7 @@ Use the [Placeholder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr {% endhighlight %} -![Blazor MultiSelect with placeholder](./images/placeholder-and-floatlabel/blazor_MultiSelect_placeholder.png) +![Blazor MultiSelect with placeholder](./images/placeholder-and-floatlabel/blazor_MultiSelect_placeholder.webp) ## Color of the placeholder text @@ -31,7 +31,7 @@ Change the color of the placeholder by targeting its CSS class `input.e-multisel {% endhighlight %} -![Blazor MultiSelect Dropdown with color placeholder](./images/style/blazor_multiselect_placeholder-color.png) +![Blazor MultiSelect Dropdown with color placeholder](./images/style/blazor_multiselect_placeholder-color.webp) ## Add mandatory indicator using placeholder @@ -43,7 +43,7 @@ Add a mandatory indicator “*” to the floating label by targeting the `.e-flo {% endhighlight %} -![Blazor MultiSelect Dropdown with mandatory indicator placeholder](./images/style/blazor_multiselect_placeholder-with-mandatory.png) +![Blazor MultiSelect Dropdown with mandatory indicator placeholder](./images/style/blazor_multiselect_placeholder-with-mandatory.webp) ## FloatLabel @@ -77,6 +77,6 @@ Customize the component color when it is focused by targeting its CSS class `.e- {% endhighlight %} -![Blazor MultiSelect Dropdown focus color](./images/style/blazor_multiselect_focus-color.png) +![Blazor MultiSelect Dropdown focus color](./images/style/blazor_multiselect_focus-color.webp) N> The above example works correctly with the Material3 theme. If you use a different theme, you may need to adjust the CSS classes accordingly. \ No newline at end of file diff --git a/blazor/multiselect-dropdown/popup-setting.md b/blazor/multiselect-dropdown/popup-setting.md index 6e0b0ccb46..9d39736737 100644 --- a/blazor/multiselect-dropdown/popup-setting.md +++ b/blazor/multiselect-dropdown/popup-setting.md @@ -31,7 +31,7 @@ Use the [PopupHeight](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Dr {% endhighlight %} -![Blazor MultiSelect Dropdown with PopupHeight property](./images/style/blazor_multiselect_popupHeight-property.png) +![Blazor MultiSelect Dropdown with PopupHeight property](./images/style/blazor_multiselect_popupHeight-property.webp) ## Change the PopupWidth @@ -43,7 +43,7 @@ To customize only the popup width, use the [PopupWidth](https://help.syncfusion. {% endhighlight %} -![Blazor MultiSelect Dropdown with PopupWidth property](./images/style/blazor_multiselect_popupWidth-property.png) +![Blazor MultiSelect Dropdown with PopupWidth property](./images/style/blazor_multiselect_popupWidth-property.webp) ## Change the popup z-index @@ -69,7 +69,7 @@ Prevent the popup from opening or closing by setting [BeforeOpenEventArgs.Cancel {% endhighlight %} -![Blazor MultiSelect with preventing opening and closing](./images/popup-setting/blazor_MultiSelect_preventing-opening-closing.png) +![Blazor MultiSelect with preventing opening and closing](./images/popup-setting/blazor_MultiSelect_preventing-opening-closing.webp) The following events are raised when opening and closing the popup. diff --git a/blazor/multiselect-dropdown/selection-deselection.md b/blazor/multiselect-dropdown/selection-deselection.md index 254809c5cb..61ceb3f6d9 100644 --- a/blazor/multiselect-dropdown/selection-deselection.md +++ b/blazor/multiselect-dropdown/selection-deselection.md @@ -29,7 +29,7 @@ Bind the pre-selected value to the MultiSelect component using the [@bind-Value] {% endhighlight %} -![Blazor MultiSelect with pre-select value](./images/selection/blazor_MultiSelect_preselect-value.png) +![Blazor MultiSelect with pre-select value](./images/selection/blazor_MultiSelect_preselect-value.webp) ## Programmatically change the selected value diff --git a/blazor/multiselect-dropdown/sorting.md b/blazor/multiselect-dropdown/sorting.md index 821d21d068..2da1d938fe 100644 --- a/blazor/multiselect-dropdown/sorting.md +++ b/blazor/multiselect-dropdown/sorting.md @@ -27,4 +27,4 @@ In the following demonstration sample, the items in the datasource are shuffled {% endhighlight %} -![Blazor MultiSelect sorted in descending order](./images/sorting/blazor_MultiSelect_sorting.png) \ No newline at end of file +![Blazor MultiSelect sorted in descending order](./images/sorting/blazor_MultiSelect_sorting.webp) \ No newline at end of file diff --git a/blazor/multiselect-dropdown/style.md b/blazor/multiselect-dropdown/style.md index ea768dcae5..11a2606a8e 100644 --- a/blazor/multiselect-dropdown/style.md +++ b/blazor/multiselect-dropdown/style.md @@ -21,7 +21,7 @@ Use the [Readonly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.DropD {% endhighlight %} -![Blazor MultiSelect Dropdown with Readonly property](./images/style/blazor_multiselect_readonly-property.png) +![Blazor MultiSelect Dropdown with Readonly property](./images/style/blazor_multiselect_readonly-property.webp) ## Disabled state @@ -33,7 +33,7 @@ Control interactivity with the [Enabled](https://help.syncfusion.com/cr/blazor/S {% endhighlight %} -![Blazor MultiSelect DropDown with Disable property](./images/style/blazor_multiselect_disable-property.png) +![Blazor MultiSelect DropDown with Disable property](./images/style/blazor_multiselect_disable-property.webp) ### Customizing the disabled component’s text color @@ -45,7 +45,7 @@ Customize the text color of a disabled component by targeting `.e-multiselect.e- {% endhighlight %} -![Blazor MultiSelect Dropdown with disabled component text color](./images/style/blazor_multiselect_disabled-text-color.png) +![Blazor MultiSelect Dropdown with disabled component text color](./images/style/blazor_multiselect_disabled-text-color.webp) ## Change remove icon color in chip @@ -57,7 +57,7 @@ To change the remove icon color in a chip within the Syncfusion® Blazor Rating compo ``` -![Blazor Rating Component with Disabled](images/blazor-rating-disabled.png) +![Blazor Rating Component with Disabled](images/blazor-rating-disabled.webp) ## Visible @@ -53,7 +53,7 @@ Use the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs ``` -![Blazor Rating Component with Visible](images/blazor-rating-full-precision.png) +![Blazor Rating Component with Visible](images/blazor-rating-full-precision.webp) ## Read only @@ -67,7 +67,7 @@ Use the [ReadOnly](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Input ``` -![Blazor Rating Component with ReadOnly](images/blazor-rating-full-precision.png) +![Blazor Rating Component with ReadOnly](images/blazor-rating-full-precision.webp) ## CssClass @@ -93,7 +93,7 @@ Change the rating icon border color in Blazor Rating component, you can use the ``` -![Blazor Rating Component with rating symbol border color](images/blazor-rating-border-color.png) +![Blazor Rating Component with rating symbol border color](images/blazor-rating-border-color.webp) ### Changing rated/un-rated symbol fill color @@ -119,7 +119,7 @@ Customize the fill colors of rated and un-rated icons in the Rating component us This customizes the rated fill color to `#ffe814` and the unrated fill color to `#d8d7d4`. The `--rating-value` custom property in the gradient reflects the current value of the rating item. -![Blazor Rating Component with custom fill color for icons](images/blazor-rating-fill-color.png) +![Blazor Rating Component with custom fill color for icons](images/blazor-rating-fill-color.webp) ### Changing the item spacing @@ -140,7 +140,7 @@ To change the space between rating items in the Blazor Rating component, use the ``` -![Blazor Rating Component with custom space between rating items](images/blazor-rating-custom-space.png) +![Blazor Rating Component with custom space between rating items](images/blazor-rating-custom-space.webp) ## Changing icon using CssClass @@ -179,4 +179,4 @@ To change the rating item icon in the Blazor Rating component, use the `CssClass ``` -![Blazor Rating Component with change icon using CssClass](images/blazor-rating-cssclass-icon.png) \ No newline at end of file +![Blazor Rating Component with change icon using CssClass](images/blazor-rating-cssclass-icon.webp) \ No newline at end of file diff --git a/blazor/rating/getting-started-webapp.md b/blazor/rating/getting-started-webapp.md index 207963e572..fc26a8c410 100644 --- a/blazor/rating/getting-started-webapp.md +++ b/blazor/rating/getting-started-webapp.md @@ -174,7 +174,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Rating component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/htBpNMqZALaYvkYW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rating Component](images/blazor-rating-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBpNMqZALaYvkYW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rating Component](images/blazor-rating-component.webp)" %} ## Value @@ -188,6 +188,6 @@ Set the rating value by using the [Value](https://help.syncfusion.com/cr/blazor/ {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLTXiKDggXVnBqJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Rating Value in Blazor Rating Component](images/blazor-rating-value.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLTXiKDggXVnBqJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Rating Value in Blazor Rating Component](images/blazor-rating-value.webp)" %} N> [View Sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/Rating). diff --git a/blazor/rating/getting-started.md b/blazor/rating/getting-started.md index 6db2f797a3..728b4adfa3 100644 --- a/blazor/rating/getting-started.md +++ b/blazor/rating/getting-started.md @@ -155,7 +155,7 @@ Add the Syncfusion® Blazor Rating component * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This renders the Syncfusion® Blazor Rating component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/htBpNMqZALaYvkYW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rating Component](images/blazor-rating-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/htBpNMqZALaYvkYW?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Rating Component](images/blazor-rating-component.webp)" %} ## Value @@ -169,4 +169,4 @@ Set the rating value by using the [Value](https://help.syncfusion.com/cr/blazor/ {% endhighlight %} {% endtabs %} -{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLTXiKDggXVnBqJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Rating Value in Blazor Rating Component](images/blazor-rating-value.png)" %} \ No newline at end of file +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDLTXiKDggXVnBqJ?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Displaying Rating Value in Blazor Rating Component](images/blazor-rating-value.webp)" %} \ No newline at end of file diff --git a/blazor/rating/images/blazor-rating-allow-reset.webp b/blazor/rating/images/blazor-rating-allow-reset.webp new file mode 100644 index 0000000000..8b9e5494e3 Binary files /dev/null and b/blazor/rating/images/blazor-rating-allow-reset.webp differ diff --git a/blazor/rating/images/blazor-rating-border-color.webp b/blazor/rating/images/blazor-rating-border-color.webp new file mode 100644 index 0000000000..ee0bab9175 Binary files /dev/null and b/blazor/rating/images/blazor-rating-border-color.webp differ diff --git a/blazor/rating/images/blazor-rating-component.webp b/blazor/rating/images/blazor-rating-component.webp new file mode 100644 index 0000000000..a1142546c9 Binary files /dev/null and b/blazor/rating/images/blazor-rating-component.webp differ diff --git a/blazor/rating/images/blazor-rating-cssclass-icon.webp b/blazor/rating/images/blazor-rating-cssclass-icon.webp new file mode 100644 index 0000000000..5f40191b52 Binary files /dev/null and b/blazor/rating/images/blazor-rating-cssclass-icon.webp differ diff --git a/blazor/rating/images/blazor-rating-custom-space.webp b/blazor/rating/images/blazor-rating-custom-space.webp new file mode 100644 index 0000000000..e4d6f6dad5 Binary files /dev/null and b/blazor/rating/images/blazor-rating-custom-space.webp differ diff --git a/blazor/rating/images/blazor-rating-custom-tooltip.webp b/blazor/rating/images/blazor-rating-custom-tooltip.webp new file mode 100644 index 0000000000..04275be493 Binary files /dev/null and b/blazor/rating/images/blazor-rating-custom-tooltip.webp differ diff --git a/blazor/rating/images/blazor-rating-disabled.webp b/blazor/rating/images/blazor-rating-disabled.webp new file mode 100644 index 0000000000..a90b8d26fe Binary files /dev/null and b/blazor/rating/images/blazor-rating-disabled.webp differ diff --git a/blazor/rating/images/blazor-rating-emoji-icon.webp b/blazor/rating/images/blazor-rating-emoji-icon.webp new file mode 100644 index 0000000000..fe77287e70 Binary files /dev/null and b/blazor/rating/images/blazor-rating-emoji-icon.webp differ diff --git a/blazor/rating/images/blazor-rating-empty-template.webp b/blazor/rating/images/blazor-rating-empty-template.webp new file mode 100644 index 0000000000..7e06a38050 Binary files /dev/null and b/blazor/rating/images/blazor-rating-empty-template.webp differ diff --git a/blazor/rating/images/blazor-rating-fill-color.webp b/blazor/rating/images/blazor-rating-fill-color.webp new file mode 100644 index 0000000000..7a28bc9ab9 Binary files /dev/null and b/blazor/rating/images/blazor-rating-fill-color.webp differ diff --git a/blazor/rating/images/blazor-rating-full-precision.webp b/blazor/rating/images/blazor-rating-full-precision.webp new file mode 100644 index 0000000000..65004e07dd Binary files /dev/null and b/blazor/rating/images/blazor-rating-full-precision.webp differ diff --git a/blazor/rating/images/blazor-rating-full-template.webp b/blazor/rating/images/blazor-rating-full-template.webp new file mode 100644 index 0000000000..df61a1a192 Binary files /dev/null and b/blazor/rating/images/blazor-rating-full-template.webp differ diff --git a/blazor/rating/images/blazor-rating-items-count.webp b/blazor/rating/images/blazor-rating-items-count.webp new file mode 100644 index 0000000000..960635b617 Binary files /dev/null and b/blazor/rating/images/blazor-rating-items-count.webp differ diff --git a/blazor/rating/images/blazor-rating-label-positions.webp b/blazor/rating/images/blazor-rating-label-positions.webp new file mode 100644 index 0000000000..49f9ddf8a5 Binary files /dev/null and b/blazor/rating/images/blazor-rating-label-positions.webp differ diff --git a/blazor/rating/images/blazor-rating-label-template.webp b/blazor/rating/images/blazor-rating-label-template.webp new file mode 100644 index 0000000000..6777eaaf4e Binary files /dev/null and b/blazor/rating/images/blazor-rating-label-template.webp differ diff --git a/blazor/rating/images/blazor-rating-label.webp b/blazor/rating/images/blazor-rating-label.webp new file mode 100644 index 0000000000..e66554b98d Binary files /dev/null and b/blazor/rating/images/blazor-rating-label.webp differ diff --git a/blazor/rating/images/blazor-rating-min.webp b/blazor/rating/images/blazor-rating-min.webp new file mode 100644 index 0000000000..728828c58a Binary files /dev/null and b/blazor/rating/images/blazor-rating-min.webp differ diff --git a/blazor/rating/images/blazor-rating-png.webp b/blazor/rating/images/blazor-rating-png.webp new file mode 100644 index 0000000000..e83b9b1fc7 Binary files /dev/null and b/blazor/rating/images/blazor-rating-png.webp differ diff --git a/blazor/rating/images/blazor-rating-precision-types.webp b/blazor/rating/images/blazor-rating-precision-types.webp new file mode 100644 index 0000000000..eccce80165 Binary files /dev/null and b/blazor/rating/images/blazor-rating-precision-types.webp differ diff --git a/blazor/rating/images/blazor-rating-selected-value.webp b/blazor/rating/images/blazor-rating-selected-value.webp new file mode 100644 index 0000000000..8c18a0eb14 Binary files /dev/null and b/blazor/rating/images/blazor-rating-selected-value.webp differ diff --git a/blazor/rating/images/blazor-rating-selection.webp b/blazor/rating/images/blazor-rating-selection.webp new file mode 100644 index 0000000000..65004e07dd Binary files /dev/null and b/blazor/rating/images/blazor-rating-selection.webp differ diff --git a/blazor/rating/images/blazor-rating-single-selection.webp b/blazor/rating/images/blazor-rating-single-selection.webp new file mode 100644 index 0000000000..4e3b2a1c4c Binary files /dev/null and b/blazor/rating/images/blazor-rating-single-selection.webp differ diff --git a/blazor/rating/images/blazor-rating-svg-icon.webp b/blazor/rating/images/blazor-rating-svg-icon.webp new file mode 100644 index 0000000000..0922f77fd6 Binary files /dev/null and b/blazor/rating/images/blazor-rating-svg-icon.webp differ diff --git a/blazor/rating/images/blazor-rating-tooltip-template.webp b/blazor/rating/images/blazor-rating-tooltip-template.webp new file mode 100644 index 0000000000..0fabd34ea5 Binary files /dev/null and b/blazor/rating/images/blazor-rating-tooltip-template.webp differ diff --git a/blazor/rating/images/blazor-rating-tooltip.webp b/blazor/rating/images/blazor-rating-tooltip.webp new file mode 100644 index 0000000000..f152cb32c7 Binary files /dev/null and b/blazor/rating/images/blazor-rating-tooltip.webp differ diff --git a/blazor/rating/images/blazor-rating-value.webp b/blazor/rating/images/blazor-rating-value.webp new file mode 100644 index 0000000000..65004e07dd Binary files /dev/null and b/blazor/rating/images/blazor-rating-value.webp differ diff --git a/blazor/rating/labels.md b/blazor/rating/labels.md index d49affcaa4..749de5de05 100644 --- a/blazor/rating/labels.md +++ b/blazor/rating/labels.md @@ -19,7 +19,7 @@ Use the [ShowLabel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inpu ``` -![Blazor Rating component with Label](./images/blazor-rating-label.png) +![Blazor Rating component with Label](./images/blazor-rating-label.webp) ## Label position @@ -50,7 +50,7 @@ The following label positions are supported: ``` -![Blazor Rating component with different label positions](./images/blazor-rating-label-positions.png) +![Blazor Rating component with different label positions](./images/blazor-rating-label-positions.webp) ## Label template @@ -67,4 +67,4 @@ Use the [LabelTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -![Blazor Rating component with Label template](./images/blazor-rating-label-template.png) \ No newline at end of file +![Blazor Rating component with Label template](./images/blazor-rating-label-template.webp) \ No newline at end of file diff --git a/blazor/rating/precision-modes.md b/blazor/rating/precision-modes.md index 6d416957e3..b2167bd3b3 100644 --- a/blazor/rating/precision-modes.md +++ b/blazor/rating/precision-modes.md @@ -36,4 +36,4 @@ The Blazor Rating component supports the following precision modes: ``` -![Blazor Rating component with different Precision Types](./images/blazor-rating-precision-types.png) \ No newline at end of file +![Blazor Rating component with different Precision Types](./images/blazor-rating-precision-types.webp) \ No newline at end of file diff --git a/blazor/rating/selection.md b/blazor/rating/selection.md index 5d8ce8e476..147f4dc31e 100644 --- a/blazor/rating/selection.md +++ b/blazor/rating/selection.md @@ -20,7 +20,7 @@ The Blazor Rating component lets users choose a value using a visual scale. Sele ``` -![Blazor Rating component with selection](./images/blazor-rating-selection.png) +![Blazor Rating component with selection](./images/blazor-rating-selection.webp) ## Selected value @@ -39,7 +39,7 @@ Rated Value : @value ``` -![Blazor Rating Component with Selected Value](./images/blazor-rating-selected-value.png) +![Blazor Rating Component with Selected Value](./images/blazor-rating-selected-value.webp) ## Min value @@ -53,7 +53,7 @@ Use the [Min](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfR ``` -![Blazor Rating component with a minimum value enforced](./images/blazor-rating-min.png) +![Blazor Rating component with a minimum value enforced](./images/blazor-rating-min.webp) ## Single selection @@ -67,7 +67,7 @@ Use the [EnableSingleSelection](https://help.syncfusion.com/cr/blazor/Syncfusion ``` -![Blazor Rating component with single-selection](./images/blazor-rating-single-selection.png) +![Blazor Rating component with single-selection](./images/blazor-rating-single-selection.webp) ## Show or hide reset button @@ -81,4 +81,4 @@ Use the [AllowReset](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inp ``` -![Blazor Rating component with reset button](./images/blazor-rating-allow-reset.png) \ No newline at end of file +![Blazor Rating component with reset button](./images/blazor-rating-allow-reset.webp) \ No newline at end of file diff --git a/blazor/rating/templates.md b/blazor/rating/templates.md index 3c092ab34b..a211826981 100644 --- a/blazor/rating/templates.md +++ b/blazor/rating/templates.md @@ -69,7 +69,7 @@ Use the `EmptyTemplate` tag directive to customize the appearance of unrated ite ``` -![Blazor Rating component with EmptyTemplate](./images/blazor-rating-empty-template.png) +![Blazor Rating component with EmptyTemplate](./images/blazor-rating-empty-template.webp) N> The current value of the rating item is available in the template context (`RatingItemContext`) as `Value` and `Index`. The rating item element also exposes a CSS custom property (`--rating-value`) representing the filled portion, which can be used to support precision in templates. @@ -129,7 +129,7 @@ The [RatingItemContext](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -![Blazor Rating component with FullTemplate](./images/blazor-rating-full-template.png) +![Blazor Rating component with FullTemplate](./images/blazor-rating-full-template.webp) ## Using Emoji icon as rating symbol @@ -175,7 +175,7 @@ Use emoji as rating symbols by placing them as template content within the `Empt ``` -![Blazor Rating component with Emoji icon](./images/blazor-rating-emoji-icon.png) +![Blazor Rating component with Emoji icon](./images/blazor-rating-emoji-icon.webp) ## Using SVG icon as rating symbol @@ -243,11 +243,11 @@ Use SVG icons as rating symbols by specifying them as template content within th ``` -![Blazor Rating component with SVG icon](./images/blazor-rating-svg-icon.png) +![Blazor Rating component with SVG icon](./images/blazor-rating-svg-icon.webp) -## Using PNG image as rating symbol +## Using webp image as rating symbol -Use PNG images as rating symbols by specifying them as template content within the `EmptyTemplate` and `FullTemplate` tag directives. +Use webp images as rating symbols by specifying them as template content within the `EmptyTemplate` and `FullTemplate` tag directives. ```cshtml @@ -269,4 +269,4 @@ Use PNG images as rating symbols by specifying them as template content within t ``` -![Blazor Rating component with PNG icon](./images/blazor-rating-png.png) \ No newline at end of file +![Blazor Rating component with webp icon](./images/blazor-rating-webp.webp) \ No newline at end of file diff --git a/blazor/rating/tooltip.md b/blazor/rating/tooltip.md index c830f22f18..46e1738ac7 100644 --- a/blazor/rating/tooltip.md +++ b/blazor/rating/tooltip.md @@ -19,7 +19,7 @@ The Blazor Rating component supports tooltips that display additional informatio ``` -![Blazor Rating component with tooltip](./images/blazor-rating-tooltip.png) +![Blazor Rating component with tooltip](./images/blazor-rating-tooltip.webp) ## Tooltip template @@ -37,7 +37,7 @@ Use the [TooltipTemplate](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazo ``` -![Blazor Rating component with tooltip template](./images/blazor-rating-tooltip-template.png) +![Blazor Rating component with tooltip template](./images/blazor-rating-tooltip-template.webp) ## Tooltip customization @@ -82,4 +82,4 @@ N> For more details on styling options, refer to the [tooltip customization](htt ``` -![Blazor Rating component with tooltip customization](./images/blazor-rating-custom-tooltip.png) \ No newline at end of file +![Blazor Rating component with tooltip customization](./images/blazor-rating-custom-tooltip.webp) \ No newline at end of file diff --git a/blazor/signature/customization.md b/blazor/signature/customization.md index 263cb01716..05fc32a4cf 100644 --- a/blazor/signature/customization.md +++ b/blazor/signature/customization.md @@ -23,7 +23,7 @@ In the following example, minimum stroke width is set as 0.5, maximum stroke wid ``` -![Blazor Signature Component](./images/blazor-signature-stroke-width.png) +![Blazor Signature Component](./images/blazor-signature-stroke-width.webp) ## Stroke Color @@ -74,7 +74,7 @@ Specify [`StrokeColor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor. ``` -![Blazor Signature Component](./images/blazor-signature-stroke-color.png) +![Blazor Signature Component](./images/blazor-signature-stroke-color.webp) ## Background Color @@ -125,7 +125,7 @@ Specify [`BackgroundColor`](https://help.syncfusion.com/cr/blazor/Syncfusion.Bla ``` -![Blazor Signature Component](./images/blazor-signature-bg-color.png) +![Blazor Signature Component](./images/blazor-signature-bg-color.webp) ## Background Image @@ -192,7 +192,7 @@ N> To view the hosted images, you need to enable Directory Browsing option in II ``` -![Blazor Signature Component](./images/blazor-signature-bg-image.png) +![Blazor Signature Component](./images/blazor-signature-bg-image.webp) ## See Also diff --git a/blazor/signature/draw.md b/blazor/signature/draw.md index 4e736cc0e0..f58be7c302 100644 --- a/blazor/signature/draw.md +++ b/blazor/signature/draw.md @@ -99,4 +99,4 @@ The text can be drawn as [Blazor Signature](https://www.syncfusion.com/blazor-co ``` -![Blazor Signature Component](./images/blazor-signature-draw.png) \ No newline at end of file +![Blazor Signature Component](./images/blazor-signature-draw.webp) \ No newline at end of file diff --git a/blazor/signature/getting-started-webapp.md b/blazor/signature/getting-started-webapp.md index 2aa5158723..67b3dd5f08 100644 --- a/blazor/signature/getting-started-webapp.md +++ b/blazor/signature/getting-started-webapp.md @@ -174,7 +174,7 @@ N> If the **Interactivity Location** is set to `Global` with `Auto` or `WebAssem * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Signature component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLJXigtqGYfziwd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Signature Component](./images/blazor-signature-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLJXigtqGYfziwd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Signature Component](./images/blazor-signature-component.webp)" %} N> The Signature component will render default height and width of canvas (300 * 150), when the Signature height and width are not specified. diff --git a/blazor/signature/getting-started.md b/blazor/signature/getting-started.md index 37920cefd4..62f38da64e 100644 --- a/blazor/signature/getting-started.md +++ b/blazor/signature/getting-started.md @@ -155,7 +155,7 @@ Add the Syncfusion® Blazor Signature compon * Press Ctrl+F5 (Windows) or ⌘+F5 (macOS) to launch the application. This will render the Syncfusion® Blazor Signature component in the default web browser. -{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLJXigtqGYfziwd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Signature Component](./images/blazor-signature-component.png)" %} +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLJXigtqGYfziwd?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor Signature Component](./images/blazor-signature-component.webp)" %} N> The Signature component will render default height and width of canvas (300 * 150), when the Signature height and width are not specified. diff --git a/blazor/signature/how-to/integration-toolbar.md b/blazor/signature/how-to/integration-toolbar.md index c598eb2e04..3b6d8387fc 100644 --- a/blazor/signature/how-to/integration-toolbar.md +++ b/blazor/signature/how-to/integration-toolbar.md @@ -38,7 +38,7 @@ The Signature component integrates with the toolbar and the interaction performe - + @@ -97,7 +97,7 @@ The Signature component integrates with the toolbar and the interaction performe private bool undoDisabled = true; private bool clearDisabled = true; private bool saveDisabled = true; - private SignatureFileType type = SignatureFileType.Png; + private SignatureFileType type = SignatureFileType.webp; private Dictionary circlePaletteColors = new Dictionary() { { "Custom", new string[] {"#000000", "#e91e63", "#9c27b0", "#673ab7", "#2196f3", "#03a9f4", "#00bcd4", "#009688", "#8bc34a", "#cddc39", "#ffeb3b", "#ffc107" } } @@ -182,8 +182,8 @@ The Signature component integrates with the toolbar and the interaction performe { switch (args.Item.Text) { - case "PNG": - type = SignatureFileType.Png; + case "webp": + type = SignatureFileType.webp; break; case "JPEG": type = SignatureFileType.Jpeg; @@ -364,4 +364,4 @@ The Signature component integrates with the toolbar and the interaction performe ``` -![Blazor Signature Component](../images/blazor-signature-toolbar.PNG) \ No newline at end of file +![Blazor Signature Component](../images/blazor-signature-toolbar.webp) \ No newline at end of file diff --git a/blazor/signature/images/blazor-signature-bg-color.webp b/blazor/signature/images/blazor-signature-bg-color.webp new file mode 100644 index 0000000000..d050f47ffd Binary files /dev/null and b/blazor/signature/images/blazor-signature-bg-color.webp differ diff --git a/blazor/signature/images/blazor-signature-bg-image.webp b/blazor/signature/images/blazor-signature-bg-image.webp new file mode 100644 index 0000000000..51a30b88f7 Binary files /dev/null and b/blazor/signature/images/blazor-signature-bg-image.webp differ diff --git a/blazor/signature/images/blazor-signature-component.webp b/blazor/signature/images/blazor-signature-component.webp new file mode 100644 index 0000000000..760895559c Binary files /dev/null and b/blazor/signature/images/blazor-signature-component.webp differ diff --git a/blazor/signature/images/blazor-signature-draw.webp b/blazor/signature/images/blazor-signature-draw.webp new file mode 100644 index 0000000000..087517a30f Binary files /dev/null and b/blazor/signature/images/blazor-signature-draw.webp differ diff --git a/blazor/signature/images/blazor-signature-open-image.webp b/blazor/signature/images/blazor-signature-open-image.webp new file mode 100644 index 0000000000..bf37d376a9 Binary files /dev/null and b/blazor/signature/images/blazor-signature-open-image.webp differ diff --git a/blazor/signature/images/blazor-signature-save-base.webp b/blazor/signature/images/blazor-signature-save-base.webp new file mode 100644 index 0000000000..e6d34f8ea8 Binary files /dev/null and b/blazor/signature/images/blazor-signature-save-base.webp differ diff --git a/blazor/signature/images/blazor-signature-save-bg.webp b/blazor/signature/images/blazor-signature-save-bg.webp new file mode 100644 index 0000000000..ce7fc6a4e6 Binary files /dev/null and b/blazor/signature/images/blazor-signature-save-bg.webp differ diff --git a/blazor/signature/images/blazor-signature-save-blob.webp b/blazor/signature/images/blazor-signature-save-blob.webp new file mode 100644 index 0000000000..fa4d49dccb Binary files /dev/null and b/blazor/signature/images/blazor-signature-save-blob.webp differ diff --git a/blazor/signature/images/blazor-signature-save-image.webp b/blazor/signature/images/blazor-signature-save-image.webp new file mode 100644 index 0000000000..38e4c78f63 Binary files /dev/null and b/blazor/signature/images/blazor-signature-save-image.webp differ diff --git a/blazor/signature/images/blazor-signature-stroke-color.webp b/blazor/signature/images/blazor-signature-stroke-color.webp new file mode 100644 index 0000000000..2772c36f7f Binary files /dev/null and b/blazor/signature/images/blazor-signature-stroke-color.webp differ diff --git a/blazor/signature/images/blazor-signature-stroke-width.webp b/blazor/signature/images/blazor-signature-stroke-width.webp new file mode 100644 index 0000000000..5bae30b6d9 Binary files /dev/null and b/blazor/signature/images/blazor-signature-stroke-width.webp differ diff --git a/blazor/signature/images/blazor-signature-toolbar.webp b/blazor/signature/images/blazor-signature-toolbar.webp new file mode 100644 index 0000000000..d89b6a01ba Binary files /dev/null and b/blazor/signature/images/blazor-signature-toolbar.webp differ diff --git a/blazor/signature/images/blazor-signature-user.webp b/blazor/signature/images/blazor-signature-user.webp new file mode 100644 index 0000000000..ac423e5ce9 Binary files /dev/null and b/blazor/signature/images/blazor-signature-user.webp differ diff --git a/blazor/signature/open-save.md b/blazor/signature/open-save.md index c146d8615a..37ebc8ec3a 100644 --- a/blazor/signature/open-save.md +++ b/blazor/signature/open-save.md @@ -13,7 +13,7 @@ The [Blazor Signature](https://www.syncfusion.com/blazor-components/blazor-signa ## Open Signature -The signature component opens a pre-drawn signature as either base64 or hosted/ online URL using the [`LoadAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_LoadAsync_System_String_System_Int32_System_Int32_) method. It supports the PNG, JPEG, and SVG image's base64. +The signature component opens a pre-drawn signature as either base64 or hosted/ online URL using the [`LoadAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_LoadAsync_System_String_System_Int32_System_Int32_) method. It supports the webp, JPEG, and SVG image's base64. ```cshtml @using Syncfusion.Blazor.Inputs @@ -60,15 +60,15 @@ The signature component opens a pre-drawn signature as either base64 or hosted/ ``` -![Blazor Signature Component](./images/blazor-signature-open-image.png) +![Blazor Signature Component](./images/blazor-signature-open-image.webp) ## Save Signature -The Signature component saves the signature as base64, blob, and image like PNG, JPEG, and SVG. +The Signature component saves the signature as base64, blob, and image like webp, JPEG, and SVG. ### Save as Base64 -The Signature component gets the signature as base64 using the [`GetSignatureAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_GetSignatureAsync_Syncfusion_Blazor_Inputs_SignatureFileType_) method. It also supports the PNG, JPEG, and SVG format as base64. +The Signature component gets the signature as base64 using the [`GetSignatureAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_GetSignatureAsync_Syncfusion_Blazor_Inputs_SignatureFileType_) method. It also supports the webp, JPEG, and SVG format as base64. ```cshtml @@ -89,7 +89,7 @@ The Signature component gets the signature as base64 using the [`GetSignatureAsy } ``` -![Blazor Signature Component](./images/blazor-signature-save-base.png) +![Blazor Signature Component](./images/blazor-signature-save-base.webp) ### Save as Blob @@ -113,11 +113,11 @@ The signature component saves the signature as Blob using [`SaveAsBlobAsync`](ht } ``` -![Blazor Signature Component](./images/blazor-signature-save-blob.png) +![Blazor Signature Component](./images/blazor-signature-save-blob.webp) ### Save as Image -The Signature component saves the signature as an image using [`SaveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_SaveAsync_Syncfusion_Blazor_Inputs_SignatureFileType_System_String_) method. And it accepts file name and file type as parameter. The default file type is PNG. +The Signature component saves the signature as an image using [`SaveAsync`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Inputs.SfSignature.html#Syncfusion_Blazor_Inputs_SfSignature_SaveAsync_Syncfusion_Blazor_Inputs_SignatureFileType_System_String_) method. And it accepts file name and file type as parameter. The default file type is webp. ```cshtml @using Syncfusion.Blazor.Inputs @@ -131,7 +131,7 @@ The Signature component saves the signature as an image using [`SaveAsync`](http - + @@ -142,13 +142,13 @@ The Signature component saves the signature as an image using [`SaveAsync`](http @code { private SfSignature signature; - private SignatureFileType type = SignatureFileType.Png; + private SignatureFileType type = SignatureFileType.webp; private async void OnSaveType(MenuEventArgs args) { switch (args.Item.Text) { - case "PNG": - type = SignatureFileType.Png; + case "webp": + type = SignatureFileType.webp; break; case "JPEG": type = SignatureFileType.Jpeg; @@ -166,7 +166,7 @@ The Signature component saves the signature as an image using [`SaveAsync`](http } ``` -![Blazor Signature Component](./images/blazor-signature-save-image.png) +![Blazor Signature Component](./images/blazor-signature-save-image.webp) ## Save with Background @@ -186,7 +186,7 @@ In the following sample, the background color is set as ‘rgb(103, 58, 183)’ - + @@ -197,13 +197,13 @@ In the following sample, the background color is set as ‘rgb(103, 58, 183)’ @code { private SfSignature signature; - private SignatureFileType type = SignatureFileType.Png; + private SignatureFileType type = SignatureFileType.webp; private void OnSaveType(MenuEventArgs args) { switch (args.Item.Text) { - case "PNG": - type = SignatureFileType.Png; + case "webp": + type = SignatureFileType.webp; break; case "JPEG": type = SignatureFileType.Jpeg; @@ -221,4 +221,4 @@ In the following sample, the background color is set as ‘rgb(103, 58, 183)’ } ``` -![Blazor Signature Component](./images/blazor-signature-save-bg.png) \ No newline at end of file +![Blazor Signature Component](./images/blazor-signature-save-bg.webp) \ No newline at end of file diff --git a/blazor/signature/user-interaction.md b/blazor/signature/user-interaction.md index e2d4db0a79..92838b346d 100644 --- a/blazor/signature/user-interaction.md +++ b/blazor/signature/user-interaction.md @@ -115,4 +115,4 @@ The following sample explains about user interactions available in signature. } ``` -![Blazor Signature Component](./images/blazor-signature-user.png) \ No newline at end of file +![Blazor Signature Component](./images/blazor-signature-user.webp) \ No newline at end of file