Skip to content

Commit

Permalink
docs(common): Update First Steps final screenshot (#2288)
Browse files Browse the repository at this point in the history
  • Loading branch information
dimodi authored Jul 31, 2024
1 parent 45499da commit 2225e43
Show file tree
Hide file tree
Showing 4 changed files with 23 additions and 55 deletions.
44 changes: 21 additions & 23 deletions _contentTemplates/common/get-started.md
Original file line number Diff line number Diff line change
Expand Up @@ -56,27 +56,28 @@ In this tutorial, you will use the [Telerik NuGet feed]({%slug installation/nuge

@page "/"

<TelerikButton OnClick="@SayHelloHandler" ThemeColor="primary">Say Hello</TelerikButton>

<br />

@helloString

<TelerikButton ThemeColor="@ThemeConstants.Button.ThemeColor.Primary"
OnClick="@SayHelloHandler">Say Hello</TelerikButton>

<p>@HelloString</p>

@code {
MarkupString helloString;

void SayHelloHandler()
{
string msg = string.Format("Hello from <strong>Telerik Blazor</strong> at {0}.<br /> Now you can use C# to write front-end!", DateTime.Now);
helloString = new MarkupString(msg);
}
private MarkupString HelloString { get; set; }

private void SayHelloHandler()
{
string msg = $"Hello from <strong>Telerik UI for Blazor</strong> at {DateTime.Now.ToString("HH:mm:ss")}!" +
"<br /> Now you can use C# to write front-end!";

HelloString = new MarkupString(msg);
}
}

1. Run the app in the browser by pressing `F5`. You should see something like this:
1. Run the app in the browser. You should see something like this:

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

Well done! Now you have you first Telerik UI for Blazor component running in your Blazor app.
Well done! Now you have your first Telerik UI for Blazor component running in your Blazor app.

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

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

* [Explore the Live Telerik UI for Blazor Demos](https://demos.telerik.com/blazor-ui/)

* [Get Started with the Data Grid]({%slug grid-overview%})

* [Create Custom Styles by Using ThemeBuilder]({%slug themebuilder%})

* [See the Data Binding Fundamentals for Telerik UI for Blazor Components]({%slug common-features-data-binding-overview%}).
* [Check the list of available components]({%slug blazor-overview%}#list-of-components).
* [Explore the live Telerik UI for Blazor demos](https://demos.telerik.com/blazor-ui/).
* [Learn the data binding fundamentals for Telerik UI for Blazor components]({%slug common-features-data-binding-overview%}).
* [Get started with the data Grid]({%slug grid-overview%}).
* [Review the built-in themes or create custom ones]({%slug themes-built-in%}).

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

#demos-project-net-version
Expand Down
1 change: 1 addition & 0 deletions getting-started/client-blazor.md
Original file line number Diff line number Diff line change
Expand Up @@ -94,6 +94,7 @@ Now your project can use the Telerik UI for Blazor components.
The final step in this tutorial is to use a Telerik UI for Blazor component in a view and run it in the browser.

1. In the `~/Pages/Index.razor` view, add a `TelerikButton` component.

@[template](/_contentTemplates/common/get-started.md#add-component-sample)

## Video Tutorial
Expand Down
Binary file modified getting-started/images/blazor-app-in-browser.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
33 changes: 1 addition & 32 deletions getting-started/web-app.md
Original file line number Diff line number Diff line change
Expand Up @@ -100,38 +100,7 @@ The final step in this tutorial is to use a Telerik UI for Blazor component in a

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


**RAZOR**

<TelerikButton>Say Hello</TelerikButton>

1. Optionally, hook up a click handler that will show a message. The resulting view will look like this:

**RAZOR**

@page "/"

<TelerikButton OnClick="@SayHelloHandler"
ThemeColor="@ThemeConstants.Button.ThemeColor.Primary">Say Hello</TelerikButton>

<p> @HelloString </p>

@code {
private MarkupString HelloString { get; set; }

private void SayHelloHandler()
{
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);
HelloString = new MarkupString(msg);
}
}

1. Run the app in the browser by pressing `F5`. You should see something like this:

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

Well done! Now you have your first Telerik UI for Blazor component running in your Blazor Web App.

@[template](/_contentTemplates/common/get-started.md#add-component-sample)

## See Also

Expand Down

0 comments on commit 2225e43

Please sign in to comment.