You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: aspnetcore/blazor/components/class-libraries.md
+8Lines changed: 8 additions & 0 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -104,6 +104,8 @@ Welcome to your new app.
104
104
105
105
Optionally, include the `@using ComponentLibrary` directive in the top-level `_Import.razor` file to make the library's components available to an entire project. Add the directive to an `_Import.razor` file at any level to apply the namespace to a single component or set of components within a folder.
106
106
107
+
<!-- HOLD for reactivation at 5.x
108
+
107
109
::: moniker range=">= aspnetcore-5.0"
108
110
109
111
To provide `Component1`'s `my-component` CSS class to the component, link to the library's stylesheet using the framework's [`Link` component](xref:blazor/fundamentals/additional-scenarios#influence-html-head-tag-elements) in `Component1.razor`:
@@ -136,6 +138,8 @@ When the `Link` component is used in a child component, the linked asset is also
136
138
137
139
::: moniker range="< aspnetcore-5.0"
138
140
141
+
-->
142
+
139
143
To provide `Component1`'s `my-component` CSS class, link to the library's stylesheet in the app's `wwwroot/index.html` file (Blazor WebAssembly) or `Pages/_Host.cshtml` file (Blazor Server):
140
144
141
145
```html
@@ -145,8 +149,12 @@ To provide `Component1`'s `my-component` CSS class, link to the library's styles
145
149
</head>
146
150
```
147
151
152
+
<!-- HOLD for reactivation at 5.x
153
+
148
154
::: moniker-end
149
155
156
+
-->
157
+
150
158
## Create a Razor components class library with static assets
151
159
152
160
An RCL can include static assets. The static assets are available to any app that consumes the library. For more information, see <xref:razor-pages/ui-class#create-an-rcl-with-static-assets>.
Components provided to a client app by a class library are referenced normally. If any components require stylesheets or JavaScript files, use either of the following approaches to obtain the static assets:
@@ -286,10 +288,16 @@ The preceding approaches are demonstrated in the following examples.
286
288
287
289
::: moniker range="< aspnetcore-5.0"
288
290
291
+
-->
292
+
289
293
Components provided to a client app by a class library are referenced normally. If any components require stylesheets or JavaScript files, the client app's `wwwroot/index.html` file must include the correct static asset links. These approaches are demonstrated in the following examples.
290
294
295
+
<!-- HOLD for reactivation at 5.x
296
+
291
297
::: moniker-end
292
298
299
+
-->
300
+
293
301
Add the following `Jeep` component to one of the client apps. The `Jeep` component uses:
294
302
295
303
* An image from the client app's `wwwroot` folder (`jeep-cj.png`).
@@ -322,6 +330,8 @@ Add the following `Jeep` component to one of the client apps. The `Jeep` compone
322
330
> [!WARNING]
323
331
> Do **not** publish images of vehicles publicly unless you own the images. Otherwise, you risk copyright infringement.
324
332
333
+
<!-- HOLD for reactivation at 5.x
334
+
325
335
::: moniker range=">= aspnetcore-5.0"
326
336
327
337
The library's `jeep-yj.png` image can also be added to the library's `Component1` component (`Component1.razor`). To provide the `my-component` CSS class to the client app's page, link to the library's stylesheet using the framework's [`Link` component](xref:blazor/fundamentals/additional-scenarios#influence-html-head-tag-elements):
@@ -355,6 +365,8 @@ An alternative to using the [`Link` component](xref:blazor/fundamentals/addition
355
365
356
366
::: moniker range="< aspnetcore-5.0"
357
367
368
+
-->
369
+
358
370
The library's `jeep-yj.png` image can also be added to the library's `Component1` component (`Component1.razor`):
359
371
360
372
```razor
@@ -380,8 +392,12 @@ The client app's `wwwroot/index.html` file requests the library's stylesheet wit
380
392
</head>
381
393
```
382
394
395
+
<!-- HOLD for reactivation at 5.x
396
+
383
397
::: moniker-end
384
398
399
+
-->
400
+
385
401
Add navigation to the `Jeep` component in the client app's `NavMenu` component (`Shared/NavMenu.razor`):
0 commit comments