Skip to content

Commit 6017d5e

Browse files
kmkrish001kmkrish001
authored
Merge pull request #8271 from syncfusion-content/930500-UG
Updated Blazor WASM App Getting Started UG documentation for Blazor components
2 parents ee9a1d4 + 18e934e commit 6017d5e

8 files changed

Lines changed: 298 additions & 637 deletions

File tree

‎blazor/timepicker/getting-started.md‎

Lines changed: 37 additions & 79 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ documentation: ug
99

1010
# Getting Started with Blazor TimePicker Component
1111

12-
This section briefly explains about how to include [Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
13-
14-
To get start quickly with Blazor TimePicker component, refer to this [GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TimePicker) sample.
12+
This section briefly explains about how to include [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TimePicker](https://www.syncfusion.com/blazor-components/blazor-timepicker) component in a Blazor WebAssembly App using [Visual Studio](https://visualstudio.microsoft.com/vs/), [Visual Studio Code](https://code.visualstudio.com/), and the [.NET CLI](https://learn.microsoft.com/en-us/dotnet/core/tools/).
1513

1614
{% tabcontents %}
1715

@@ -25,23 +23,6 @@ To get start quickly with Blazor TimePicker component, refer to this [GitHub](ht
2523

2624
Create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vs) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app) documentation.
2725

28-
![Blazor WASM Create Project Template](images/blazor-wasm-app-template.png)
29-
30-
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
31-
32-
To add the **Blazor TimePicker** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), then search and install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). Alternatively, run the following commands in the Package Manager Console to achieve the same.
33-
34-
{% tabs %}
35-
{% highlight C# tabtitle="Package Manager" %}
36-
37-
Install-Package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }}
38-
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
39-
40-
{% endhighlight %}
41-
{% endtabs %}
42-
43-
N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
44-
4526
{% endtabcontent %}
4627

4728
{% tabcontent Visual Studio Code %}
@@ -54,7 +35,7 @@ N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are availa
5435

5536
Create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-10.0&pivots=vsc) or the [Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code) documentation.
5637

57-
Alternatively, create a WebAssembly application by using the following command in the integrated terminal(<kbd>Ctrl</kbd>+<kbd>`</kbd>).
38+
Alternatively, create a WebAssembly application by using the following command in the integrated terminal (<kbd>Ctrl</kbd>+<kbd>`</kbd>).
5839

5940
{% tabs %}
6041

@@ -67,26 +48,6 @@ cd BlazorApp
6748

6849
{% endtabs %}
6950

70-
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
71-
72-
* Press <kbd>Ctrl</kbd>+<kbd>`</kbd> to open the integrated terminal in Visual Studio Code.
73-
* Ensure in the project root directory where the `.csproj` file is located.
74-
* Run the following command to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages and ensure all dependencies are installed.
75-
76-
{% tabs %}
77-
78-
{% highlight c# tabtitle="Package Manager" %}
79-
80-
dotnet add package Syncfusion.Blazor.Calendars -v {{ site.releaseversion }}
81-
dotnet add package Syncfusion.Blazor.Themes -v {{ site.releaseversion }}
82-
dotnet restore
83-
84-
{% endhighlight %}
85-
86-
{% endtabs %}
87-
88-
N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
89-
9051
{% endtabcontent %}
9152

9253
{% tabcontent .NET CLI %}
@@ -105,7 +66,7 @@ dotnet --version
10566

10667
## Create a Blazor WebAssembly App using .NET CLI
10768

108-
Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
69+
Run the following command to create a new Blazor WebAssembly App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to the [Blazor WASM App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=.net-cli) documentation.
10970

11071
{% tabs %}
11172
{% highlight c# tabtitle=".NET CLI" %}
@@ -116,29 +77,30 @@ cd BlazorApp
11677
{% endhighlight %}
11778
{% endtabs %}
11879

119-
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Calendars and Themes NuGet in the App
80+
{% endtabcontent %}
81+
82+
{% endtabcontents %}
12083

121-
To add the **Blazor TimePicker** component to the application, run the following commands in a command prompt (Windows), command shell (Linux), or terminal (macOS) to install the [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) for more details.
84+
## Install Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor packages
85+
86+
Install [Syncfusion.Blazor.Calendars](https://www.nuget.org/packages/Syncfusion.Blazor.Calendars/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet packages in your project using the NuGet Package Manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), or the integrated terminal in Visual Studio Code (`dotnet add package`), or the .NET CLI.
87+
88+
Alternatively, run the following commands in the Package Manager Console to achieve the same.
12289

12390
{% tabs %}
124-
{% highlight c# tabtitle=".NET CLI" %}
91+
{% highlight C# tabtitle="Package Manager" %}
12592

126-
dotnet add package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }}
127-
dotnet add package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
128-
dotnet restore
93+
Install-Package Syncfusion.Blazor.Calendars -Version {{ site.releaseversion }}
94+
Install-Package Syncfusion.Blazor.Themes -Version {{ site.releaseversion }}
12995

13096
{% endhighlight %}
13197
{% endtabs %}
13298

133-
N> Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for the available NuGet packages list with component details.
134-
135-
{% endtabcontent %}
136-
137-
{% endtabcontents %}
99+
N> All Syncfusion Blazor packages are available on [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). See the [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for details.
138100

139-
## Add Import Namespaces
101+
## Add import namespaces
140102

141-
Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces.
103+
After the packages are installed, open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncfusion.Blazor.Calendars` namespaces.
142104

143105
{% tabs %}
144106
{% highlight C# tabtitle="~/_Imports.razor" %}
@@ -149,50 +111,42 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf
149111
{% endhighlight %}
150112
{% endtabs %}
151113

152-
## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service
114+
## Register Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service
153115

154-
Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor Service in the **~/Program.cs** file of the Blazor WebAssembly App.
116+
Register the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor service in the **Program.cs** file of your Blazor WebAssembly App.
155117

156118
{% tabs %}
157-
{% highlight C# tabtitle="~/Program.cs" hl_lines="3 11" %}
119+
{% highlight C# tabtitle="Program.cs" %}
158120

159-
using Microsoft.AspNetCore.Components.Web;
160-
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;
121+
....
161122
using Syncfusion.Blazor;
162-
163-
var builder = WebAssemblyHostBuilder.CreateDefault(args);
164-
builder.RootComponents.Add<App>("#app");
165-
builder.RootComponents.Add<HeadOutlet>("head::after");
166-
167-
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
168-
123+
....
169124
builder.Services.AddSyncfusionBlazor();
170-
await builder.Build().RunAsync();
171125
....
172126

173127
{% endhighlight %}
174128
{% endtabs %}
175129

176130
## Add stylesheet and script resources
177131

178-
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references within the `<head>` section of the **~/index.html** file.
132+
The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the **~/index.html** file.
179133

180134
```html
181-
<head>
182-
....
183-
<link href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />
184-
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
185-
</head>
135+
136+
<link href="_content/Syncfusion.Blazor.Themes/fluent2.css" rel="stylesheet" />
137+
....
138+
<script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script>
139+
186140
```
187141

188-
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in Blazor application.
142+
N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in the Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in the Blazor application.
189143

190-
## Add Blazor TimePicker component
144+
## Add Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TimePicker component
191145

192146
Add the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor TimePicker component in the **~/Pages/Index.razor** file.
193147

194148
{% tabs %}
195-
{% highlight razor %}
149+
{% highlight razor tabtitle="Index.razor" %}
196150

197151
<SfTimePicker TValue="DateTime?" PlaceHolder="Select a time"></SfTimePicker>
198152

@@ -210,7 +164,9 @@ Time format is a way of representing the time value in different string format i
210164
The below code demonstrates how to render TimePicker component in 24 hours Format with 60 minutes interval. The time interval is set to 60 minutes by using the [Step](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Calendars.SfTimePicker-1.html#Syncfusion_Blazor_Calendars_SfTimePicker_1_Step) property.
211165

212166
{% tabs %}
213-
{% highlight razor %}
167+
{% highlight razor tabtitle="Index.razor" %}
168+
169+
@using Syncfusion.Blazor.Calendars
214170

215171
<SfTimePicker TValue="DateTime?" Value="@TimeValue" Step=60 Format="HH:mm"></SfTimePicker>
216172

@@ -223,7 +179,9 @@ The below code demonstrates how to render TimePicker component in 24 hours Forma
223179

224180
{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVpXCUtfRjicUbp?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" backgroundimage "[Blazor TimePicker with Time Format](./images/blazor-timepicker-time-format.png)" %}
225181

226-
## See Also
182+
N> [View sample in GitHub](https://github.com/SyncfusionExamples/Blazor-Getting-Started-Examples/tree/main/TimePicker).
183+
184+
## See also
227185

228186
* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Client-Side in .NET Core CLI](../getting-started/getting-started/blazor-webassembly-app)
229187
* [Getting Started with Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor for Server-side in Visual Studio](../getting-started/blazor-server-side-visual-studio)

0 commit comments

Comments
 (0)