Skip to content

Commit 2225e43

Browse files
authored
docs(common): Update First Steps final screenshot (#2288)
1 parent 45499da commit 2225e43

File tree

4 files changed

+23
-55
lines changed

4 files changed

+23
-55
lines changed

_contentTemplates/common/get-started.md

Lines changed: 21 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -56,27 +56,28 @@ In this tutorial, you will use the [Telerik NuGet feed]({%slug installation/nuge
5656

5757
@page "/"
5858

59-
<TelerikButton OnClick="@SayHelloHandler" ThemeColor="primary">Say Hello</TelerikButton>
60-
61-
<br />
62-
63-
@helloString
64-
59+
<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
60+
OnClick="@SayHelloHandler">Say Hello</TelerikButton>
61+
62+
<p>@HelloString</p>
63+
6564
@code {
66-
MarkupString helloString;
67-
68-
void SayHelloHandler()
69-
{
70-
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
71-
helloString = new MarkupString(msg);
72-
}
65+
private MarkupString HelloString { get; set; }
66+
67+
private void SayHelloHandler()
68+
{
69+
string msg = $"Hello from <strong>Telerik UI for Blazor</strong> at {DateTime.Now.ToString("HH:mm:ss")}!" +
70+
"<br /> Now you can use C# to write front-end!";
71+
72+
HelloString = new MarkupString(msg);
73+
}
7374
}
7475

75-
1. Run the app in the browser by pressing `F5`. You should see something like this:
76+
1. Run the app in the browser. You should see something like this:
7677

7778
![Telerik Blazor app in the browser](images/blazor-app-in-browser.png)
7879

79-
Well done! Now you have you first Telerik UI for Blazor component running in your Blazor app.
80+
Well done! Now you have your first Telerik UI for Blazor component running in your Blazor app.
8081

8182
@[template](/_contentTemplates/common/get-started.md#next-steps-after-getting-started)
8283

@@ -85,15 +86,12 @@ Well done! Now you have you first Telerik UI for Blazor component running in you
8586
#next-steps-after-getting-started
8687
## Next Steps
8788

88-
* [Explore the Live Telerik UI for Blazor Demos](https://demos.telerik.com/blazor-ui/)
89-
90-
* [Get Started with the Data Grid]({%slug grid-overview%})
91-
92-
* [Create Custom Styles by Using ThemeBuilder]({%slug themebuilder%})
93-
94-
* [See the Data Binding Fundamentals for Telerik UI for Blazor Components]({%slug common-features-data-binding-overview%}).
89+
* [Check the list of available components]({%slug blazor-overview%}#list-of-components).
90+
* [Explore the live Telerik UI for Blazor demos](https://demos.telerik.com/blazor-ui/).
91+
* [Learn the data binding fundamentals for Telerik UI for Blazor components]({%slug common-features-data-binding-overview%}).
92+
* [Get started with the data Grid]({%slug grid-overview%}).
93+
* [Review the built-in themes or create custom ones]({%slug themes-built-in%}).
9594

96-
* [Explore the List of Available Components]({%slug blazor-overview%}#list-of-components).
9795
#end
9896

9997
#demos-project-net-version

getting-started/client-blazor.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -94,6 +94,7 @@ Now your project can use the Telerik UI for Blazor components.
9494
The final step in this tutorial is to use a Telerik UI for Blazor component in a view and run it in the browser.
9595

9696
1. In the `~/Pages/Index.razor` view, add a `TelerikButton` component.
97+
9798
@[template](/_contentTemplates/common/get-started.md#add-component-sample)
9899

99100
## Video Tutorial
68.5 KB
Loading

getting-started/web-app.md

Lines changed: 1 addition & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -100,38 +100,7 @@ The final step in this tutorial is to use a Telerik UI for Blazor component in a
100100

101101
1. In the `~/Components/Pages/Home.razor` view, add a `TelerikButton` component.
102102

103-
104-
**RAZOR**
105-
106-
<TelerikButton>Say Hello</TelerikButton>
107-
108-
1. Optionally, hook up a click handler that will show a message. The resulting view will look like this:
109-
110-
**RAZOR**
111-
112-
@page "/"
113-
114-
<TelerikButton OnClick="@SayHelloHandler"
115-
ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Say Hello</TelerikButton>
116-
117-
<p> @HelloString </p>
118-
119-
@code {
120-
private MarkupString HelloString { get; set; }
121-
122-
private void SayHelloHandler()
123-
{
124-
string msg = string.Format("Hello from <strong>Telerik UI for Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
125-
HelloString = new MarkupString(msg);
126-
}
127-
}
128-
129-
1. Run the app in the browser by pressing `F5`. You should see something like this:
130-
131-
![Telerik Blazor app in the browser](images/blazor-app-in-browser.png)
132-
133-
Well done! Now you have your first Telerik UI for Blazor component running in your Blazor Web App.
134-
103+
@[template](/_contentTemplates/common/get-started.md#add-component-sample)
135104

136105
## See Also
137106

0 commit comments

Comments
 (0)