Essentials Tag Helpers

Hurtig reference til de tag helpers, der følger med Ecreo.Essentials.

Setup

Tilføj i _ViewImports.cshtml:

@addTagHelper *, Ecreo.Essentials

Vælg helper

Helper	Bruges til	Typisk syntaks
<ec-meta>	Meta tags for IPublishedContent.	<ec-meta for="Model"></ec-meta>
<ec-picture>	Responsive billeder, crops, srcset, WebP/AVIF og SVG.	<ec-picture media="Model.Image" width="960"></ec-picture>
<ec-svg>	Inline SVG med scoped styles og id’er.	<ec-svg src="/assets/icons/search"></ec-svg>
<ec-embed>	YouTube, Vimeo og custom embeds.	<ec-embed src="@Model.VideoUrl"></ec-embed>
<ec-partial>	Partial views med ViewData, attributter og slots.	<ec-partial name="Card">...</ec-partial>
<ec-slot>	Placeholder i partial view.	<ec-slot name="header" />
<ec-slot-content>	Named slot-indhold til ec-partial.	<ec-slot-content name="header">Titel</ec-slot-content>
<ec-push-stack>	Gem indhold i et stack til senere render.	<ec-push-stack id="footer" key="map-script">...</ec-push-stack>
<ec-stack>	Render et stack.	<ec-stack id="footer"></ec-stack>
<ec-once>	Render child content én gang pr. request.	<ec-once key="carousel-init">...</ec-once>
ec-self-host	Download ekstern src/href til wwwroot.	<script ec-self-host folder="js" src="..."></script>
<ec-self-host-font>	Download Google Fonts lokalt og render font partial.	<ec-self-host-font id="Inter" weights="400,700"></ec-self-host-font>
<ec-html-snippet>	Render snippets fra content til head/body placeringer.	<ec-html-snippet for="Model.Root()" place="HeadEnd"></ec-html-snippet>
<ec-tag>	Dynamisk HTML-tag.	<ec-tag is="h2" class="h3">Titel</ec-tag>

Syntaks du ofte glemmer

<ec-partial name="Card"
            view-data:title="@Model.Title"
            view-data.string:variant="compact"
            override:class="card card-featured">
    <ec-slot-content name="header">Overskrift</ec-slot-content>
    <p>Default slot-indhold</p>
</ec-partial>

<ec-picture src="https://cdn.example.com/hero.jpg"
            width="1200"
            height="675"
            sizes="(min-width: 1024px) 960px, 100vw"
            alt="Forsidebillede">
</ec-picture>

<ec-push-stack id="footer" key="analytics-init">
    <script>window.initAnalytics?.();</script>
</ec-push-stack>

<ec-stack id="footer"></ec-stack>

Vær opmærksom på

Emne	Note
Pagination	<ec-pagination> findes, men er markeret [Obsolete("Not ready for production")]. Brug PaginationHelper direkte til nye produktionsløsninger.
Stacks	Et stack skal renderes efter indholdet er pushet, medmindre response buffering bruges.
Remote billeder	Brug AllowedDomains eller AllowedDomainsRegex; undgå AllowAllDomains på produktion.
SVG	Hvis src ikke har filendelse, antages .svg.