Skip to content

Commit dfe08e6

Browse files
docs(common): main container docs
1 parent b937136 commit dfe08e6

File tree

4 files changed

+45
-0
lines changed

4 files changed

+45
-0
lines changed

_contentTemplates/common/get-started.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -143,3 +143,28 @@ To setup a local NuGet package source, so you can install the Telerik components
143143
1. On the loaded page choose from your purchased products or trial downloads **Progress® Telerik® UI for Blazor**, and click on it.
144144
#end
145145

146+
147+
#telerik-main-container-text
148+
Open the main layout file (by default, the `~/Shared/MainLayout.razor` file in the Blazor project) and add a `<TelerikRootComponent>` element at its root level. The layout file should look similar to this (there may be additional elements in your app):
149+
#end
150+
151+
152+
#telerik-main-container-snippet
153+
154+
@inherits LayoutComponentBase
155+
156+
@using Telerik.Blazor.Components.RootComponent
157+
158+
<TelerikRootComponent>
159+
160+
<div class="sidebar">
161+
<NavMenu />
162+
</div>
163+
164+
<div class="main">
165+
@Body
166+
</div>
167+
168+
</TelerikRootComponent>
169+
#end
170+

getting-started/client-blazor.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,13 @@ For client-side Blazor, we recommend the usage of `Blazor (ASP.NET Hosted)` proj
7272
//more code may be present here
7373
}
7474
}
75+
76+
1. @[template](/_contentTemplates/common/get-started.md#telerik-main-container-text)
77+
78+
**MainLayout.razor**
79+
80+
@[template](/_contentTemplates/common/get-started.md#telerik-main-container-snippet)
81+
7582

7683
1. @[template](/_contentTemplates/common/issues-and-warnings.md#mono-linker-issue)
7784

getting-started/server-blazor.md

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,12 @@ To use Blazor server-side, you need to use the `Razor Components` type of projec
7272
}
7373
}
7474

75+
1. @[template](/_contentTemplates/common/get-started.md#telerik-main-container-text)
76+
77+
**MainLayout.razor**
78+
79+
@[template](/_contentTemplates/common/get-started.md#telerik-main-container-snippet)
80+
7581

7682

7783
Now your project can use the Telerik UI for Blazor components.

getting-started/what-you-need.md

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -117,6 +117,13 @@ namespace MyBlazorAppName
117117
}
118118
````
119119

120+
To allow working with detached popups (for example, dropdown lists, menus, grid filters, etc.), a Telerik-specific Blazor component is needed at the root level of the DOM.
121+
@[template](/_contentTemplates/common/get-started.md#telerik-main-container-text)
122+
123+
````CSHTML
124+
@[template](/_contentTemplates/common/get-started.md#telerik-main-container-snippet)
125+
````
126+
120127
### Client-side Project Considerations
121128

122129
If you are using a **client-side Blazor** project,

0 commit comments

Comments
 (0)