Skip to main content
Home  › ... Razor

Razor Blade Tutorials

Tutorial Home
#7 Create custom (non Html5) tags or Tags whose name stems from a variable

RazorBlade Fluent Tag API @Tag.Custom("your-tag") v3

All Html5 tags are available under Tag.xxx(). In case you need a custom tag - like an <app-root></app-root> for angular, you'll need the @Tag.Custom(...).

Fist create a sample where a heading is from a variable

Output

This is a title

@{
  var headingType = "h3";
}
@Tag.Custom(headingType).Wrap("This is a title")

Output

this is a italic text
@Tag.Custom("em").Wrap("this is a italic text")
#7 Create custom (non Html5) tags or Tags whose name stems from a variable

Source Code of this file

Below you'll see the source code of the file. Note that we're just showing the main part, and hiding some parts of the file which are not relevant for understanding the essentials. Click to expand the code

@inherits Custom.Hybrid.Razor14
@using ToSic.Razor.Blade;
<!-- unimportant stuff, hidden -->


<div @Sys.PageParts.InfoWrapper()>
  @Html.Partial("../shared/_DefaultInfoSection.cshtml")
  <div @Sys.PageParts.InfoIntro()>
      <h2><em>RazorBlade</em> Fluent Tag API <code>@@Tag.Custom("your-tag")</code> <em>v3</em></h2>
      <div>
        All Html5 tags are available under <code>Tag.xxx()</code>. In case you need a custom tag - like an <code>@Tag.Custom("app-root").ToString()</code> 
        for angular, you'll need the <code>@@Tag.Custom(...)</code>.
      </div>
    </div>
  </div>


@* todo @2dg  first create a sample where a heading is from a variable *@

<h3>Fist create a sample where a heading is from a variable</h3>

  @{
    var headingType = "h3";
  }
  @Tag.Custom(headingType).Wrap("This is a title")



@* @2dg use show-result and manually show what the result would be *@
@* <app-root></app-root> *@

  @Tag.Custom("em").Wrap("this is a italic text")