využívání Razor komponent ASP.NET Core z Razor knihoven tříd

Komponenty lze sdílet v Razor knihovně tříd (RCL) napříč projekty. Zahrnutí komponent a statických prostředků do aplikace z:

• Jiný projekt v řešení.
• Odkazovaná knihovna .NET.
• balíček NuGet.

Stejně jako komponenty jsou běžné typy .NET, komponenty poskytované RCL jsou normální sestavení .NET.

Vytvoření RCL

Využití Razor komponenty z RCL

Chcete-li využívat komponenty z RCL v jiném projektu, použijte některý z následujících přístupů:

• Použijte úplný název typu komponenty, který zahrnuje obor názvů RCL.
• Jednotlivé komponenty lze přidat pomocí názvu bez oboru názvů RCL, pokud Razor @using direktiva deklaruje obor názvů RCL. Použijte následující přístupy:
  • Přidejte @using direktivu do jednotlivých součástí.
  • Zahrňte @using direktivu do souboru nejvyšší úrovně _Imports.razor , aby komponenty knihovny byly dostupné pro celý projekt. Přidejte direktivu do _Imports.razor souboru na libovolné úrovni pro použití oboru názvů pro jednu komponentu nebo sadu součástí v rámci složky. Když _Imports.razor se použije soubor, jednotlivé komponenty nevyžadují @using direktivu pro obor názvů RCL.

V následujících příkladech ComponentLibrary je RCL obsahující Component1 komponentu. Component1Komponenta je ukázková součást automaticky přidaná do RCL vytvořené ze šablony projektu RCL, která není vytvořena pro podporu stránek a zobrazení.

Component1.razor v ComponentLibrary RCL:

<div class="my-component">
    This component is defined in the <strong>ComponentLibrary</strong> package.
</div>

V aplikaci, která využívá RCL, odkazujte na Component1 komponentu pomocí oboru názvů, jak ukazuje následující příklad.

Pages/ConsumeComponent1.razor:

@page "/consume-component-1"

<h1>Consume component (full namespace example)</h1>

<ComponentLibrary.Component1 />

Případně přidejte @using direktivu a použijte součást bez jejího oboru názvů. Následující @using direktiva se může objevit i v jakémkoli _Imports.razor souboru v aktuální složce nebo vyšší.

Pages/ConsumeComponent2.razor:

@page "/consume-component-2"
@using ComponentLibrary

<h1>Consume component (<code>@@using</code> example)</h1>

<Component1 />

Pro komponenty knihovny, které používají izolaci CSS, jsou styly komponent automaticky zpřístupněny aplikacím, které jsou k dispozici. V aplikaci, která knihovnu používá, není potřeba propojit šablony stylů jednotlivých komponent knihovny. Pro předchozí příklady Component1 je šablona StyleSheet ( Component1.razor.css ) zahrnutá automaticky.

Component1.razor.css v ComponentLibrary RCL:

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

Obrázek na pozadí je také součástí šablony projektu RCL a je umístěn ve wwwroot složce RCL.

wwwroot/background.png v ComponentLibrary RCL:

Chcete-li poskytnout další styly komponent knihovny ze šablon stylů ve wwwroot složce knihovny, propojte šablony stylů pomocí Link komponenty rozhraní.

Následující obrázek na pozadí se používá v následujícím příkladu. Pokud implementujete příklad uvedený v této části, klikněte pravým tlačítkem na obrázek a uložte ho místně.

wwwroot/extra-background.png v ComponentLibrary RCL:

Přidejte novou šablonu stylů do RCL s extra-style třídou.

wwwroot/additionalStyles.css v ComponentLibrary RCL:

.extra-style {
    border: 2px dashed blue;
    padding: 1em;
    margin: 1em 0;
    background-image: url('extra-background.png');
}

Přidejte komponentu do RCL, který používá extra-style třídu.

ExtraStyles.razor v seznamu ComponentLibrary RCL:

<Link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet" />

<div class="extra-style">
    <p>
        This component is defined in the <strong>ComponentLibrary</strong> package.
    </p>
</div>

Přidejte do aplikace stránku, která používá ExtraStyles komponentu z seznamu RCL.

Pages/ConsumeComponent3.razor:

@page "/consume-component-3"
@using ComponentLibrary

<h1>Consume component (<code>additionalStyles.css</code> example)</h1>

<ExtraStyles />

Pokud se komponenta používá v podřízené komponentě, propojený asset je dostupný také pro všechny ostatní podřízené komponenty nadřazené komponenty, pokud je vykreslován podřízený prvek s Link Link komponentou.

Alternativou k použití komponenty je propojení se šablony stylů knihovny v Link kódu <head> aplikace.

wwwroot/index.html file ( Blazor WebAssembly ) nebo file ( Pages/_Layout.cshtml Blazor Server ):

+ <link href="_content/ComponentLibrary/additionalStyles.css" rel="stylesheet" />

Rozdíl mezi použitím komponenty v podřízené komponentě a umístěním značky HTML do nebo je, že vykreslená značka Link <link> HTML komponenty wwwroot/index.html Pages/_Host.cshtml architektury:

• Lze upravit podle stavu aplikace. Stav aplikace nemůže změnit značku HTML s <link> pevným kódováním.
• Odebere se z HTML, když už není <head> vykreslovaná nadřazená komponenta.

Vytvoření seznamu RCL se statickými prostředky ve wwwroot složce

Statické prostředky seznamu RCL jsou dostupné pro všechny aplikace, které knihovnu využívají.

Umístěte statické prostředky do složky seznamu RCL a odkazovat na statické prostředky s následující cestou wwwroot v aplikaci: _content/{PACKAGE ID}/{PATH AND FILE NAME} . Zástupný {PACKAGE ID} symbol je ID balíčku knihovny. Id balíčku ve výchozím nastavení používá název sestavení projektu, pokud <PackageId> není zadaný v souboru projektu. Zástupný {PATH AND FILE NAME} text je cesta a název souboru v části wwwroot .

Následující příklad ukazuje použití statických prostředků RCL s RCL s názvem a aplikací, která ComponentLibrary používá seznam Blazor RCL. Aplikace obsahuje odkaz na projekt pro ComponentLibrary seznam RCL.

V tomto ® příkladu se používá následující image Jeepu. Pokud implementujete příklad zobrazený v této části, klikněte na obrázek pravým tlačítkem a uložte ho místně.

wwwroot/jeep-yj.png v seznamu ComponentLibrary RCL:

Do seznamu JeepYJ RCL přidejte následující komponentu.

JeepYJ.razor v seznamu ComponentLibrary RCL:

<h3>ComponentLibrary.JeepYJ</h3>

<p>
    <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
</p>

Přidejte do Jeep aplikace následující komponentu, která využívá ComponentLibrary seznam RCL. Komponenta Jeep používá:

• Obrázek Jeep YJ ® ze složky ComponentLibrary seznamu wwwroot RCL.
• Komponenta JeepYJ z seznamu RCL.

Pages/Jeep.razor:

@page "/jeep"
@using ComponentLibrary

<div style="float:left;margin-right:10px">
    <h3>Direct use</h3>

    <p>
        <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
    </p>
</div>

<JeepYJ />

<p>
    <em>Jeep</em> and <em>Jeep YJ</em> are registered trademarks of 
    <a href="https://www.stellantis.com">FCA US LLC (Stellantis NV)</a>.
</p>

Vykreslená Jeep komponenta:

Další informace naleznete v tématu Opakovaně použitelné Razor uživatelské rozhraní v knihovnách tříd pomocí ASP.NET Core.

Vytvoření seznamu RCL se soubory JavaScriptu, které jsou kolísané s komponentami

Společné umísťování souborů JavaScriptu (JS) pro stránky, zobrazení a Razor součásti je pohodlný způsob, jak uspořádat skripty v aplikaci.

Soubory společné umístění JS s použitím následujících konvencí přípon názvů souborů:

• Stránky Razor aplikací stránky a zobrazení aplikací MVC: .cshtml.js . Příklady:
  • Pages/Contact.cshtml.js pro Contact stránku Razor aplikace Pages na adrese Pages/Contact.cshtml .
  • Views/Home/Contact.cshtml.js pro Contact zobrazení aplikace MVC na Views/Home/Contact.cshtml .
• Razor komponenty Blazor aplikací: .razor.js . Příklad: Pages/Index.razor.js pro Index komponentu na Pages/Index.razor .

Soubory společně umístěného JS jsou veřejně adresovatelné pomocí cesty k souboru v projektu:

• Stránky, zobrazení a součásti ze souboru skriptů společně umístěného v aplikaci:

  {PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}

  • {PATH}Zástupný symbol je cesta k stránce, zobrazení nebo komponentě.
  • {PAGE, VIEW, OR COMPONENT}Zástupný symbol je stránka, zobrazení nebo komponenta.
  • {EXTENSION}Zástupný text odpovídá příponě stránky, zobrazení nebo komponenty, a to buď razor nebo cshtml , následované .js .

  V následujícím příkladu z Razor aplikace Pages je skript společně umístěného ve Pages složce se Contact stránkou ( Pages/Contact.cshtml ):

  @section Scripts {
    <script src="~/Pages/Contact.cshtml.js"></script>
  }
  

• Pro skripty poskytované Razor knihovnou tříd (RCL):

  _content/{PACKAGE ID}/{PATH}/{PAGE, VIEW, OR COMPONENT}.{EXTENSION}

  • {PACKAGE ID}Zástupný symbol je identifikátor balíčku RCL (nebo název knihovny pro knihovnu tříd, na kterou se odkazuje aplikace).
  • {PATH}Zástupný symbol je cesta k stránce, zobrazení nebo komponentě. Pokud Razor je komponenta umístěna v kořenu RCL, segment cesty není zahrnutý.
  • {PAGE, VIEW, OR COMPONENT}Zástupný symbol je stránka, zobrazení nebo komponenta.
  • {EXTENSION}Zástupný text odpovídá příponě stránky, zobrazení nebo součásti, a to buď razor nebo cshtml , následované .js .

  V následujícím Blazor příkladu aplikace:

  • Identifikátor balíčku RCL je AppJS .
  • Skripty modulu jsou načteny pro Index součást ( Index.razor ).
  • IndexKomponenta je ve Pages složce RCL.

  var module = await JS.InvokeAsync<IJSObjectReference>("import", 
      "_content/AppJS/Pages/Index.razor.js");
  

Poskytování komponent a statických prostředků více hostovaným Blazor aplikacím

Další informace naleznete v tématu Hostování a nasazení ASP.NET Core Blazor WebAssembly.

Analyzátor kompatibility prohlížeče pro Blazor WebAssembly

Blazor WebAssembly Aplikace cílí na celou plochu rozhraní .NET API, ale ne všechna rozhraní .NET API jsou ve Službě WebAssembly podporovaná kvůli omezením sandboxu prohlížeče. Nepodporovaná rozhraní API vyvolá PlatformNotSupportedException výjimku při spuštění v WebAssembly. Analyzátor kompatibility platformy varuje vývojáře, když aplikace používá rozhraní API, která nejsou podporovaná cílovými platformami aplikace. U Blazor WebAssembly aplikací to znamená, že se v prohlížečích podporují rozhraní API. Poznámky k rozhraním API rozhraní .NET Framework pro analyzátor kompatibility jsou v současné době v provozu, takže ne všechna rozhraní API rozhraní .NET Framework jsou momentálně anotována.

Blazor WebAssemblyProjekty RCL automaticky povolují kontroly kompatibility prohlížeče přidáním jako podporované browser platformy s MSBuild SupportedPlatform položek. Vývojáři knihovny mohou ručně přidat položku do souboru projektu knihovny, aby SupportedPlatform tuto funkci mohli povolit:

<ItemGroup>
  <SupportedPlatform Include="browser" />
</ItemGroup>

Při vytváření knihovny určete, že se konkrétní rozhraní API v prohlížečích nepodporuje, a to zadáním browser do UnsupportedOSPlatformAttribute :

[UnsupportedOSPlatform("browser")]
private static string GetLoggingDirectory()
{
    ...
}

Další informace najdete v tématu Popisování rozhraní API jako nepodporovaných na konkrétních platformách (dotnet/designs GitHub úložiště.

Izolace JavaScriptu v modulech JavaScriptu

Blazorumožňuje izolaci JavaScriptu ve standardních modulech JavaScriptu. Izolace JavaScriptu poskytuje následující výhody:

• Importovaný JavaScript už nesnídá globální obor názvů.
• Spotřebiteli knihovny a komponent se nevyžaduje ruční import souvisejícího JavaScriptu.

Další informace naleznete v tématu Volání funkcí jazyka JavaScript z metod .NET v ASP.NET Core Blazor.

Sestavení, zabalení a odeslání do NuGet

Vzhledem k tomu, že knihovny tříd, které obsahují komponenty, jsou standardní knihovny .NET, jejich balení a dodání do NuGet se neliší od balení a expedice žádné knihovny Razor Razor do NuGet. Balení se provádí pomocí dotnet pack příkazu v příkazovém prostředí:

dotnet pack

Upload k NuGet pomocí dotnet nuget push příkazu v příkazovém prostředí.

Ochranné známky

Jeep a Jeep YJ jsou registrované ochranné známky FCA US LLC (Užntis NV).

Další zdroje informací

• Opakovaně použitelné Razor uživatelské rozhraní v knihovnách tříd pomocí ASP.NET Core
• Přidání konfiguračního souboru oříznutého jazyka IL (XML Intermediate Language) do knihovny
• Podpora izolace CSS s Razor knihovnami tříd

Komponenty lze sdílet v Razor knihovně tříd (RCL) napříč projekty. Zahrnout do aplikace komponenty a statické prostředky z:

• Další projekt v řešení.
• Odkazovaná knihovna .NET.
• Balíček NuGet.

Stejně jako jsou komponenty běžnými typy rozhraní .NET, jsou součásti poskytované pomocí seznamu RCL normální sestavení .NET.

Vytvoření seznamu RCL

@using Microsoft.AspNetCore.Components.Web

Používání Razor komponenty z seznamu RCL

Pokud chcete využívat komponenty z seznamu RCL v jiném projektu, použijte některý z následujících přístupů:

• Použijte úplný název typu komponenty, který zahrnuje obor názvů seznamu RCL.
• Jednotlivé komponenty lze přidat podle názvu bez oboru názvů seznamu RCL, pokud direktiva Razor 's deklaruje obor názvů @using seznamu RCL. Použijte následující přístupy:
  • Přidejte @using direktivu do jednotlivých komponent.
  • zahrnout direktivu do souboru nejvyšší úrovně, aby byly komponenty knihovny dostupné @using _Imports.razor pro celý projekt. Přidejte direktivu do souboru na libovolné úrovni, aby se obor názvů aplikuje na jednu komponentu nebo sadu _Imports.razor komponent ve složce. Při použití souboru nevyžadují jednotlivé komponenty direktivu pro obor názvů _Imports.razor @using seznamu RCL.

V následujících příkladech ComponentLibrary je seznam RCL obsahující Component1 komponentu . Komponenta je příkladem komponenty automaticky přidané do seznamu RCL vytvořeného ze šablony projektu RCL, která není vytvořená pro podporu stránek a Component1 zobrazení.

Component1.razor v seznamu ComponentLibrary RCL:

<div class="my-component">
    This component is defined in the <strong>ComponentLibrary</strong> package.
</div>

V aplikaci, která využívá seznam RCL, odkazujte na komponentu pomocí jejího oboru Component1 názvů, jak ukazuje následující příklad.

Pages/ConsumeComponent1.razor:

@page "/consume-component-1"

<h1>Consume component (full namespace example)</h1>

<ComponentLibrary.Component1 />

Případně můžete přidat direktivu a @using použít komponentu bez jejího oboru názvů. Následující @using direktiva se může objevit také v _Imports.razor libovolném souboru v aktuální složce nebo nad touto.

Pages/ConsumeComponent2.razor:

@page "/consume-component-2"
@using ComponentLibrary

<h1>Consume component (<code>@@using</code> example)</h1>

<Component1 />

U komponent knihovny, které používají izolaci šablon stylů CSS,jsou styly komponent automaticky dostupné pro aplikaci, která je používá. V aplikaci, která knihovnu využívá, není nutné propojit jednotlivé šablony stylů jednotlivých komponent knihovny. V předchozích příkladech Component1 se stylesheet ( Component1.razor.css ) zahrne automaticky.

Component1.razor.css v seznamu ComponentLibrary RCL:

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

Image na pozadí je také součástí šablony projektu seznamu RCL a nachází se ve wwwroot složce seznamu RCL.

wwwroot/background.png v seznamu ComponentLibrary RCL:

Vytvoření seznamu RCL se statickými prostředky

Statické prostředky seznamu RCL jsou dostupné pro všechny aplikace, které knihovnu využívají.

Umístěte statické prostředky do složky seznamu RCL a odkazovat na statické prostředky s následující cestou wwwroot v aplikaci: _content/{PACKAGE ID}/{PATH AND FILE NAME} . Zástupný {PACKAGE ID} symbol je ID balíčku knihovny. Pokud v souboru projektu není zadaný název sestavení projektu, jako výchozí je <PackageId> ID balíčku. Zástupný {PATH AND FILE NAME} text je cesta a název souboru v části wwwroot .

Následující příklad ukazuje použití statických prostředků RCL s RCL s názvem a aplikací, která ComponentLibrary používá seznam Blazor RCL. Aplikace obsahuje odkaz na projekt pro ComponentLibrary seznam RCL.

V tomto ® příkladu se používá následující image Jeepu. Pokud implementujete příklad zobrazený v této části, klikněte na obrázek pravým tlačítkem a uložte ho místně.

wwwroot/jeep-yj.png v seznamu ComponentLibrary RCL:

Do seznamu JeepYJ RCL přidejte následující komponentu.

JeepYJ.razor v seznamu ComponentLibrary RCL:

<h3>ComponentLibrary.JeepYJ</h3>

<p>
    <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
</p>

Přidejte do Jeep aplikace následující komponentu, která využívá ComponentLibrary seznam RCL. Komponenta Jeep používá:

• Obrázek Jeep YJ ® ze složky ComponentLibrary seznamu wwwroot RCL.
• Komponenta JeepYJ z seznamu RCL.

Pages/Jeep.razor:

@page "/jeep"
@using ComponentLibrary

<div style="float:left;margin-right:10px">
    <h3>Direct use</h3>

    <p>
        <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
    </p>
</div>

<JeepYJ />

<p>
    <em>Jeep</em> and <em>Jeep YJ</em> are registered trademarks of 
    <a href="https://www.stellantis.com">FCA US LLC (Stellantis NV)</a>.
</p>

Vykreslená Jeep komponenta:

Další informace naleznete v tématu Opakovaně použitelné Razor uživatelské rozhraní v knihovnách tříd pomocí ASP.NET Core.

Poskytování komponent a statických prostředků více hostovaným Blazor aplikacím

Další informace naleznete v tématu Hostování a nasazení ASP.NET Core Blazor WebAssembly.

Analyzátor kompatibility prohlížeče pro Blazor WebAssembly

Blazor WebAssembly Aplikace cílí na celou plochu rozhraní .NET API, ale ne všechna rozhraní .NET API jsou ve Službě WebAssembly podporovaná kvůli omezením sandboxu prohlížeče. Nepodporovaná rozhraní API vyvolá PlatformNotSupportedException výjimku při spuštění v WebAssembly. Analyzátor kompatibility platformy varuje vývojáře, když aplikace používá rozhraní API, která nejsou podporovaná cílovými platformami aplikace. U Blazor WebAssembly aplikací to znamená, že se v prohlížečích podporují rozhraní API. Poznámky k rozhraním API rozhraní .NET Framework pro analyzátor kompatibility jsou v současné době v provozu, takže ne všechna rozhraní API rozhraní .NET Framework jsou momentálně anotována.

Blazor WebAssemblyProjekty RCL automaticky povolují kontroly kompatibility prohlížeče přidáním jako podporované browser platformy s MSBuild SupportedPlatform položek. Vývojáři knihoven mohou ručně přidat položku do souboru projektu knihovny, aby SupportedPlatform tuto funkci mohli povolit:

<ItemGroup>
  <SupportedPlatform Include="browser" />
</ItemGroup>

Při vytváření knihovny určete, že se konkrétní rozhraní API v prohlížečích nepodporuje, a to zadáním browser do UnsupportedOSPlatformAttribute :

[UnsupportedOSPlatform("browser")]
private static string GetLoggingDirectory()
{
    ...
}

Další informace najdete v tématu Popisování rozhraní API jako nepodporovaných na konkrétních platformách (dotnet/designs GitHub úložiště.

Izolace JavaScriptu v modulech JavaScriptu

Blazorumožňuje izolaci JavaScriptu ve standardních modulech JavaScriptu. Izolace JavaScriptu poskytuje následující výhody:

• Importovaný JavaScript už nesnídá globální obor názvů.
• Spotřebiteli knihovny a komponent se nevyžaduje ruční import souvisejícího JavaScriptu.

Další informace naleznete v tématu Volání funkcí jazyka JavaScript z metod .NET v ASP.NET Core Blazor.

Sestavení, zabalení a odeslání do NuGet

Vzhledem k tomu, že knihovny tříd, které obsahují komponenty, jsou standardními knihovnami .NET, jejich balení a expedice do NuGet se neliší od balení a expedice žádné knihovny Razor Razor do NuGet. Balení se provádí pomocí dotnet pack příkazu v příkazovém prostředí:

dotnet pack

Upload k NuGet pomocí dotnet nuget push příkazu v příkazovém prostředí.

Ochranné známky

Jeep a Jeep YJ jsou registrované ochranné známky FCA US LLC (Užntis NV).

Další zdroje informací

• Opakovaně použitelné Razor uživatelské rozhraní v knihovnách tříd pomocí ASP.NET Core
• Přidání konfiguračního souboru oříznutého jazyka IL (XML Intermediate Language) do knihovny
• Podpora izolace CSS s Razor knihovnami tříd

Komponenty lze sdílet v Razor knihovně tříd (RCL) napříč projekty. Zahrnout do aplikace komponenty a statické prostředky z:

• Další projekt v řešení.
• Odkazovaná knihovna .NET.
• Balíček NuGet.

Stejně jako jsou komponenty běžnými typy rozhraní .NET, jsou komponenty poskytované pomocí seznamu RCL normální sestavení .NET.

Vytvoření seznamu RCL

@using Microsoft.AspNetCore.Components.Web

@using Microsoft.AspNetCore.Components.Web

@using Microsoft.AspNetCore.Components.Web

Využití Razor komponenty z RCL

Chcete-li využívat komponenty z RCL v jiném projektu, použijte některý z následujících přístupů:

• Použijte úplný název typu komponenty, který zahrnuje obor názvů RCL.
• Jednotlivé komponenty lze přidat pomocí názvu bez oboru názvů RCL, pokud Razor @using direktiva deklaruje obor názvů RCL. Použijte následující přístupy:
  • Přidejte @using direktivu do jednotlivých součástí.
  • Zahrňte @using direktivu do souboru nejvyšší úrovně _Imports.razor , aby komponenty knihovny byly dostupné pro celý projekt. Přidejte direktivu do _Imports.razor souboru na libovolné úrovni pro použití oboru názvů pro jednu komponentu nebo sadu součástí v rámci složky. Když _Imports.razor se použije soubor, jednotlivé komponenty nevyžadují @using direktivu pro obor názvů RCL.

V následujících příkladech ComponentLibrary je RCL obsahující Component1 komponentu. Component1Komponenta je ukázková součást automaticky přidaná do RCL vytvořené ze šablony projektu RCL, která není vytvořena pro podporu stránek a zobrazení.

Component1.razor v ComponentLibrary RCL:

<div class="my-component">
    This component is defined in the <strong>ComponentLibrary</strong> package.
</div>

V aplikaci, která využívá RCL, odkazujte na Component1 komponentu pomocí oboru názvů, jak ukazuje následující příklad.

Pages/ConsumeComponent1.razor:

@page "/consume-component-1"

<h1>Consume component (full namespace example)</h1>

<ComponentLibrary.Component1 />

Případně přidejte @using direktivu a použijte součást bez jejího oboru názvů. Následující @using direktiva se může objevit i v jakémkoli _Imports.razor souboru v aktuální složce nebo vyšší.

Pages/ConsumeComponent2.razor:

@page "/consume-component-2"
@using ComponentLibrary

<h1>Consume component (<code>@@using</code> example)</h1>

<Component1 />

Následující obrázek pozadí a šablona stylů jsou používány Component1 ukázkovou komponentou RCL. Není nutné přidávat tyto statické prostředky do nového RCL vytvořeného z šablony projektu RCL, protože jsou automaticky přidány šablonou projektu.

wwwroot/background.png v ComponentLibrary RCL:

wwwroot/styles.css v ComponentLibrary RCL:

.my-component {
    border: 2px dashed red;
    padding: 1em;
    margin: 1em 0;
    background-image: url('background.png');
}

Chcete-li poskytnout Component1 my-component CSS třídu, odkazujte na šablonu stylů knihovny v kódu aplikace <head> .

wwwroot/index.html soubor ( Blazor WebAssembly ) nebo Pages/_Host.cshtml soubor ( Blazor Server ):

+ <link href="_content/ComponentLibrary/styles.css" rel="stylesheet" />

Vytvoření RCL se statickými prostředky

Statické prostředky RCL jsou k dispozici pro všechny aplikace, které knihovnu využívají.

Umístěte statické prostředky do wwwroot složky RCL a odkazujte se na statické prostředky s následující cestou v aplikaci: _content/{PACKAGE ID}/{PATH AND FILE NAME} . {PACKAGE ID}Zástupný symbol je ID balíčkuknihovny. V případě, že <PackageId> v souboru projektu není zadán název balíčku, je výchozím názvem sestavení projektu. {PATH AND FILE NAME}Zástupný symbol je cesta a název souboru v rámci wwwroot .

Následující příklad ukazuje použití statických prostředků RCL s názvem RCL ComponentLibrary a Blazor aplikací, která využívá RCL. Aplikace má odkaz na projekt pro ComponentLibrary RCL.

Následující obrázek Jeep ® se používá v tomto příkladu této části. Pokud implementujete příklad uvedený v této části, klikněte pravým tlačítkem na obrázek a uložte ho místně.

wwwroot/jeep-yj.png v ComponentLibrary RCL:

JeepYJDo RCL přidejte následující komponentu.

JeepYJ.razor v ComponentLibrary RCL:

<h3>ComponentLibrary.JeepYJ</h3>

<p>
    <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
</p>

JeepDo aplikace přidejte následující komponentu, která využívá ComponentLibrary RCL. JeepKomponenta používá:

• Obrázek Jeep YJ ® ze ComponentLibrary wwwroot složky RCL
• JeepYJKomponenta z RCL.

Pages/Jeep.razor:

@page "/jeep"
@using ComponentLibrary

<div style="float:left;margin-right:10px">
    <h3>Direct use</h3>

    <p>
        <img alt="Jeep YJ&reg;" src="_content/ComponentLibrary/jeep-yj.png" />
    </p>
</div>

<JeepYJ />

<p>
    <em>Jeep</em> and <em>Jeep YJ</em> are registered trademarks of 
    <a href="https://www.stellantis.com">FCA US LLC (Stellantis NV)</a>.
</p>

Vykreslená Jeep Komponenta:

Další informace naleznete v tématu Opakovaně použitelné Razor uživatelské rozhraní v knihovnách tříd pomocí ASP.NET Core.

Dodávání komponent a statických prostředků do více hostovaných Blazor aplikací

Další informace naleznete v tématu Hostování a nasazení ASP.NET Core Blazor WebAssembly.

Sestavování, balení a odeslání do NuGet

Razorknihovny tříd, které obsahují Razor komponenty, jsou standardní knihovny .net, balení a jejich odeslání do NuGet se nijak neliší od balení a odesláním jakékoli knihovny do NuGet. Balení se provádí pomocí dotnet pack příkazu v příkazovém prostředí:

dotnet pack

Upload balíček pro NuGet pomocí dotnet nuget push příkazu v příkazovém prostředí.

Ochranné známky

Jeep a Jeep yj jsou registrované ochranné známky FCA US LLC (Stellantis NV).

Další zdroje informací

• Opakovaně použitelné Razor uživatelské rozhraní v knihovnách tříd pomocí ASP.NET Core
• Přidat konfigurační soubor linkeru jazyka XML Intermediate Language (IL) do knihovny