Skip to content

Commit 34a784b

Browse files
elenapeskovaDevExpressExampleBotkhamlyuk
authored
update the example and describe the readme (#4)
* update the example and describe the readme * README auto update [skip ci] * README auto update [skip ci] * Apply suggestion from @khamlyuk Co-authored-by: Elena Khamlyuk <80813840+khamlyuk@users.noreply.github.com> * Apply suggestion from @elenapeskova * Apply suggestion from @khamlyuk Co-authored-by: Elena Khamlyuk <80813840+khamlyuk@users.noreply.github.com> * Apply suggestion from @elenapeskova * Apply suggestion from @elenapeskova * Apply suggestion from @elenapeskova * Apply suggestion from @khamlyuk Co-authored-by: Elena Khamlyuk <80813840+khamlyuk@users.noreply.github.com> * Apply suggestion from @elenapeskova * Apply suggestion from @khamlyuk Co-authored-by: Elena Khamlyuk <80813840+khamlyuk@users.noreply.github.com> * Apply suggestion from @elenapeskova * Apply suggestion from @khamlyuk Co-authored-by: Elena Khamlyuk <80813840+khamlyuk@users.noreply.github.com> * Apply suggestion from @khamlyuk Co-authored-by: Elena Khamlyuk <80813840+khamlyuk@users.noreply.github.com> --------- Co-authored-by: DevExpressExampleBot <fake@test.test> Co-authored-by: Elena Khamlyuk <80813840+khamlyuk@users.noreply.github.com>
1 parent 7bb1895 commit 34a784b

File tree

7 files changed

+77
-29
lines changed

7 files changed

+77
-29
lines changed

‎BlazorSlider/BlazorSlider.csproj‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,6 @@
2525
</Target>
2626

2727
<ItemGroup>
28-
<PackageReference Include="DevExpress.Blazor" Version="25.1.*" />
28+
<PackageReference Include="DevExpress.Blazor" Version="25.2.*" />
2929
</ItemGroup>
3030
</Project>

‎BlazorSlider/Components/Pages/Index.razor‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,29 +10,29 @@
1010
<DxFormLayoutItem ColSpanXs="12" Caption="Default mode">
1111
<DxSlider T="int" MinValue="0" MaxValue="100" Value="90" />
1212
</DxFormLayoutItem>
13-
<DxFormLayoutItem ColSpanXs="12" Caption="With labels">
13+
<DxFormLayoutItem ColSpanXs="12" Caption="Labels Enabled">
1414
<DxSlider T="int" MinValue="0" MaxValue="100" Value="50">
1515
<DxSliderLabelSettings Visible="true"
1616
Position="VerticalEdge.Top" />
1717
</DxSlider>
1818
</DxFormLayoutItem>
19-
<DxFormLayoutItem ColSpanXs="12" Caption="With tooltip">
19+
<DxFormLayoutItem ColSpanXs="12" Caption="Tooltips Enabled">
2020
<DxSlider T="int" MinValue="0" MaxValue="100" Value="35">
2121
<DxSliderTooltipSettings Enabled="true"
2222
ShowMode="TooltipShowMode.Always"
2323
Position="VerticalEdge.Bottom" />
2424
</DxSlider>
2525
</DxFormLayoutItem>
26-
<DxFormLayoutItem ColSpanXs="12" Caption="Without range highlighting">
26+
<DxFormLayoutItem ColSpanXs="12" Caption="Range Highlight Disabled">
2727
<DxSlider T="int" MinValue="0" MaxValue="100"
2828
Value="20" ShowRange="false" />
2929
</DxFormLayoutItem>
30-
<DxFormLayoutItem ColSpanXs="12" Caption="With discrete step">
30+
<DxFormLayoutItem ColSpanXs="12" Caption="Discrete Step Enabled">
3131
<DxSlider T="int" MinValue="0" MaxValue="100" Value="10" Step="10">
3232
<DxSliderTooltipSettings Enabled="true" />
3333
</DxSlider>
3434
</DxFormLayoutItem>
35-
<DxFormLayoutItem ColSpanXs="12" Caption="Disabled">
35+
<DxFormLayoutItem ColSpanXs="12" Caption="Disabled Mode">
3636
<DxSlider T="int" MinValue="0" MaxValue="100"
3737
Value="50" Enabled="false" />
3838
</DxFormLayoutItem>

‎BlazorSlider/package-lock.json‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎BlazorSlider/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,6 @@
33
"name": "asp.net",
44
"private": true,
55
"devDependencies": {
6-
"devextreme-dist": "~25.1"
6+
"devextreme-dist": "25.2.3"
77
}
88
}

‎BlazorSlider/wwwroot/css/dx.fluent.blue.light.css‎

Lines changed: 4 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎README.md‎

Lines changed: 62 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,82 @@
11
<!-- default badges list -->
2-
![](https://img.shields.io/endpoint?url=https://codecentral.devexpress.com/api/v1/VersionRange/1113565705/25.2.3%2B)
32
[![](https://img.shields.io/badge/Open_in_DevExpress_Support_Center-FF7200?style=flat-square&logo=DevExpress&logoColor=white)](https://supportcenter.devexpress.com/ticket/details/T1319057)
43
[![](https://img.shields.io/badge/📖_How_to_use_DevExpress_Examples-e9f6fc?style=flat-square)](https://docs.devexpress.com/GeneralInformation/403183)
54
[![](https://img.shields.io/badge/💬_Leave_Feedback-feecdd?style=flat-square)](#does-this-example-address-your-development-requirementsobjectives)
65
<!-- default badges end -->
7-
# Product/Platform - Task
6+
# Blazor - Use DevExtreme Slider in Blazor Applications
87

9-
This is the repository template for creating new examples. Describe the solved task here.
8+
This example adds a [DevExtreme Slider widget](https://js.devexpress.com/jQuery/Documentation/Guide/UI_Components/Slider/Overview/) to a Blazor application and showcases the following features and capabilities:
109

11-
Put a screenshot that illustrates the result here.
10+
* Min and max labels
11+
* Tooltip customization
12+
* Range highlight
13+
* Discrete steps
14+
* Disabled component state
15+
* Dynamic value updates
1216

13-
Then, add implementation details (steps, code snippets, and other technical information in a free form), or add a link to an existing document with implementation details.
17+
The example replicates the [DevExtreme jQuery Slider](https://js.devexpress.com/jQuery/Demos/WidgetsGallery/Demo/Slider/Overview/FluentBlueLight/) demo.
18+
19+
![DevExtreme Slider in DevExpress Blazor App](sliders.png)
20+
21+
## Implementation Details
22+
23+
### Register DevExtreme Resources
24+
25+
DevExtreme widgets require the use of [DevExtreme scripts and stylesheets](https://js.devexpress.com/jQuery/Documentation/Guide/jQuery_Components/Add_DevExtreme_to_a_jQuery_Application/#Local_Files). We recommend that you use [npm](https://js.devexpress.com/jQuery/Documentation/Guide/Common/Distribution_Channels/#npm) to incorporate DevExtreme into the application.
26+
27+
The DevExpress Blazor [Resource Manager](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxResourceManager) automatically registers DevExtreme scripts if your project includes the `DevExpress.Blazor` package. To apply the DevExtreme Fluent theme, add the [dx.fluent.blue.light.css](./BlazorSlider/wwwroot/css/dx.fluent.blue.light.css) file to the [wwwroot/css](./BlazorSlider/wwwroot/css/) folder and reference this stylesheet in the [Components/App.razor](./BlazorSlider/Components/App.razor#L12) file.
28+
29+
### Implement a Wrapper
30+
31+
Implement a Blazor component that wraps the DevExtreme Slider widget. The wrapper consists of the following files (copy them to your solution):
32+
33+
1. [SliderState.cs](./BlazorSlider/Components/Slider/SliderState.cs) defines a data model that stores slider properties. The model is passed to razor components via cascading parameters to initialize slider states in their `OnInitialized` lifecycle methods.
34+
2. [DxSliderLabelSettings.razor](./BlazorSlider/Components/Slider/DxSliderLabelSettings.razor) and [DxSliderTooltipSettings.razor](./BlazorSlider/Components/Slider/DxSliderTooltipSettings.razor) configure slider label and tooltip settings.
35+
3. [DxSlider.razor.js](./BlazorSlider/Components/Slider/DxSlider.razor.js) binds the DevExtreme Slider component to the data model.
36+
4. [DxSlider.razor](./BlazorSlider/Components/Slider/DxSlider.razor) renders the Slider as follows:
37+
* Declares a `CascadingValue` component and uses `ChildContent` to customize slider labels and tooltips using Blazor parameters:
38+
```Razor
39+
<CascadingValue IsFixed="true" Value="sliderState">
40+
@ChildContent
41+
<div @ref="sliderElement"></div>
42+
</CascadingValue>
43+
```
44+
* In the `OnAfterRenderAsync` lifecycle method, calls the [LoadDxResources](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxResourceManager.LoadDxResources(Microsoft.JSInterop.IJSRuntime)) method to force the `Resource Manager` to load all client scripts.
45+
* In the [OnParametersSetAsync](./BlazorSlider/Components/Slider/DxSlider.razor#L57-L64) lifecycle method, updates the internal model state and rerenders the slider component once Blazor parameters change.
46+
* In the [UpdateValueFromClient](./BlazorSlider/Components/Slider/DxSlider.razor#L85-L91) method, synchronizes the server-side state with slider client-side value changes.
47+
48+
### Display a Blazor Component
49+
50+
Use the wrapper as a standard Blazor component. This example adds the [DevExpress Blazor FormLayout](https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxFormLayout) component to the [Index.razor](./BlazorSlider/Components/Pages/Index.razor) file and declares `DxSlider` objects within layout items to display various slider states and capabilities.
51+
52+
```Razor
53+
<DxSlider T="int" MinValue="0" MaxValue="100" Value="50">
54+
<DxSliderLabelSettings Visible="true"
55+
Position="VerticalEdge.Top" />
56+
</DxSlider>
57+
```
1458

1559
## Files to Review
1660

17-
- link.cs (VB: link.vb)
18-
- link.js
19-
- ...
61+
- [DxSlider.razor](/BlazorSlider/Components/Slider/DxSlider.razor)
62+
- [DxSlider.razor.js](/BlazorSlider/Components/Slider/DxSlider.razor.js)
63+
- [DxSliderLabelSettings.razor](/BlazorSlider/Components/Slider/DxSliderLabelSettings.razor)
64+
- [DxSliderTooltipSettings.razor](/BlazorSlider/Components/Slider/DxSliderTooltipSettings.razor)
65+
- [SliderState.cs](/BlazorSlider/Components/Slider/SliderState.cs)
66+
- [App.razor](/BlazorSlider/Components/App.razor)
67+
- [Index.razor](/BlazorSlider/Components/Pages/Index.razor)
2068

2169
## Documentation
2270

23-
- link
24-
- link
25-
- ...
71+
- [Add DevExtreme Components to a Blazor Application](https://docs.devexpress.com/Blazor/403578/components/devextreme-components-in-blazor)
72+
- [Get Started with DevExtreme jQuery/JS](https://js.devexpress.com/jQuery/Documentation/Guide/Common/First_Steps/)
73+
- [DevExtreme JavaScript/jQuery Slider](https://js.devexpress.com/jQuery/Documentation/Guide/UI_Components/Slider/Overview/)
2674

2775
## More Examples
2876

29-
- link
30-
- link
31-
- ...
77+
- [Blazor - Use DevExtreme Circular Gauge in a Blazor Application](https://github.com/DevExpress-Examples/blazor-use-devextreme-circular-gauge)
78+
- [Blazor - Use DevExtreme Diagram in Blazor Applications](https://github.com/DevExpress-Examples/blazor-use-devextreme-diagram)
79+
3280
<!-- feedback -->
3381
## Does this example address your development requirements/objectives?
3482

‎sliders.png‎

28.1 KB
Loading

0 commit comments

Comments
 (0)