-
Notifications
You must be signed in to change notification settings - Fork 0
Tag Helpers
.net Tag helpers are key to rendering Rhythm Drop web features.
These tag helpers are intended to provide the developer with a common markup entry point.
All tag helpers will have an accompanying tag helper renderer which allows the developer to override how the tag helper will modify the TagHelperOutput. A default implementation of a tag helper renderer will always be provided.
Note: All of these tag helpers will use an Order value set to 0. If you are planning on using a tag helper which works along side this tag helpers you may need to set an Order value higher or lower to ensure it is used before or after respectively.
TagHelperRenderer: IDropAttributesTagHelperRenderer.
Outputs a IHtmlAttributeCollectionBase as a HTML attributes. It is generally recommended to use regular markup attributes but in some cases the markup is not available to the developer to modify. In this scenario attributes will be provided programmatically.
None. This will work with any HTML element.
| Name | Type | Required | Notes |
|---|---|---|---|
| drop-attributes | IHtmlAttributeCollectionBase |
Yes |
<div drop-attributes="Model.Attributes">
<h2>My Section</h2>
</div>TagHelperRenderer: IDropComponentsTagHelperRenderer.
Renders a read only collection of IComponent objects.
The component will be wrapped in a ComponentMetaData class. This class contains additional meta data such as the component's level, position within the collection, the theme and any attributes passed through.
Must use a drop-components without a closing tag.
| Name | Type | Required | Notes |
|---|---|---|---|
| model | IReadOnlyCollection<IComponent> |
Yes | If an empty collection is provided the default tag helper renderer will not rendered any output. |
| level | int |
No | The level to render the current components at. This may be useful for components that are rendered differently when nested |
| section | string? |
No | Provides an optional section of where this component is rendered. |
| tag-name | string? |
No | The container tag helper to wrap this collection of components in. The default tag helper render will not output a tag if there is no value provided. If attributes are provided a value for this property will be required so they can be rendered too |
| theme | string? |
No | Theme used to render this collection. Used as a part of the view finding process. If no value is provided the default theme will be used instead. |
@* output components without a wrapping tag *@
<drop-components model="Model.Components" />
@* output components without a wrapping tag, a custom theme and level of 2 *@
<drop-components model="Model.Components" theme="CustomTheme" level="2" />
@* output components with a wrapping tag and attributes *@
<drop-components model="Model.Components" tag-name="section" class="section-content" data-target="content" />TagHelperRenderer: IDropComponentsTagHelperRenderer.
Renders a single IComponent object.
Must use a drop-component without a closing tag.
The component will be wrapped in a ComponentMetaData class. This class contains additional meta data such as the component's level, position within the collection, the theme and any attributes passed through.
A single component with no property overrides to the index or position will be treated in the same way as a collection of one component.
| Name | Type | Required | Notes |
|---|---|---|---|
| model | IComponent? |
Yes | This field is required and is nullable to allow for data binding flexibility. If the object is null it will not be rendered. |
| level | int |
No | The level to render the current component at. This may be useful for manually rendering a collection of components that are rendered differently when nested. |
| section | string? |
No | Provides an optional section of where this component is rendered. |
| index | int |
No | The index of the current component at. This may be useful for manually rendering a collection of components. |
| total | int |
No | The total number of components within a collection. This may be useful for manually rendering a collection of components. |
| theme | string? |
No | Theme used to render this model. Used as a part of the view finding process. If no value is provided the default theme will be used instead. |
@* output a component *@
<drop-component model="Model.Component" />
@* output a component with a custom theme and level of 2 *@
<drop-component model="Model.Component" theme="CustomTheme" level="2" />
@* manually rendering a collection components *@
@{
var total = Model.Components.Count();
var index = 0;
}
@foreach (var component in Model.Components) {
<drop-component model="component" index="@index" total="@total" class="content-item" data-target="item" />
index++;
}HTML attributes provided by drop-component are passed through to the view name and can be outputted using the drop-attributes tag helper.
The values will be found in the ComponentMetaData.Attributes property.
TagHelperRenderer: IDropImageTagHelperRenderer.
Renders a IImage object as an img HTML tag.
Must use a img with a drop-model attribute without a closing tag.
| Name | Type | Required | Notes |
|---|---|---|---|
| drop-model | IImage? |
Yes | This field is required and is nullable to allow for data binding flexibility. If the object is null it will not be rendered. |
| loading-mode | LoadingMode |
No | Instructs the tag helper renderer how to load the image (e.g. Default*, Eager or Lazy) |
* Default is up to the tag helper renderer to decide.
TagHelperRenderer: IDropPictureTagHelperRenderer.
Renders a IImage object as a picture HTML tag.
Must use a picture with a drop-model attribute with or without a closing tag.
Note: This tag is restricted to only have img tags as children. The optional img tag is used to control the markup attributes of the picture. It's optional because if one does not exist an img HTML tag will be generated for you.
| Name | Type | Required | Notes |
|---|---|---|---|
| drop-model | IImage? |
Yes | This field is required and is nullable to allow for data binding flexibility. If the object is null it will not be rendered. |
| loading-mode | LoadingMode |
No | Instructs the tag helper renderer how to load the image (e.g. Default*, Eager or Lazy) |
* Default is up to the tag helper renderer to decide.
@* output an image with the default loading option *@
<picture drop-model="Model.Image" />
@* output an image with the default loading option *@
<picture drop-model="Model.Image"></picture>
@* output an image with the default loading option *@
<picture drop-model="Model.Image">
<img class="photo" />
</picture>
@* output a lazy image *@
<picture drop-model="Model.Image" loading-mode="Lazy" />
@* output a image with attributes on both the picture *@
<picture drop-model="Model.Image" class="hero-image" />
@* output a image with attributes on both the picture and the img *@
<picture drop-model="Model.Image" class="hero-image">
<img class="hero-image__img" />
</picture>TagHelperRenderer: IDropPictureImgTagHelperRenderer.
Renders a IImage object as an img HTML tag within a picture HTML tag.
Must use an img without a closing tag within a picture tag that has a drop-model attribute.
None. Properties should be set on parent drop-picture tag.
@* output an image with the default loading option *@
<picture drop-model="Model.Image">
<img class="photo" />
</picture>
@* output an image with the lazy loading option *@
<picture drop-model="Model.Image" loading-mode="Lazy">
<img class="photo" />
</picture>
@* output a image with attributes on both the picture and the img *@
<picture drop-model="Model.Image" class="hero-image">
<img class="hero-image__img" />
</picture>TagHelperRenderer: IDropLinkTagHelperRenderer.
Renders a ILink object.
drop-link supports rendering as a link or wrapping other content in a link.
By default, when used as a wrapping element the tag label will not be rendered in favor of the provided child content. If the link is null the tag won't render the wrapping tag but child content will still be rendered.
By default, when used without a closing tag the link will be rendered and the label will be used. If the link is null the tag won't be rendered.
If the provided link is a IModalLink the IModal content will be persisted by this tag helper before it is sent to the tag helper renderer for rendering. There is no need to manually persist the content beforehand.
Must use a drop-link tag with or without a closing tag.
| Name | Type | Required | Notes |
|---|---|---|---|
| model | ILink? |
Yes | This field is required and is nullable to allow for data binding flexibility. If the object is null it will not be rendered. |
@* output a link with the default loading option *@
<drop-link model="Model.Link" />
@* output a link with attributes *@
<drop-link model="Model.Link" class="primary-cta" />
@* output a link which wraps other content *@
<drop-link model="Model.Link">
<span>Lorem Ipsum!</span>
</drop-link>TagHelperRenderer: IDropModalsTagHelperRenderer
Renders all persisted IModal for the request or optionally a read only collection of IModal objects.
The modals will be wrapped in a ModalMetaData class. This class contains additional meta data such as the theme, section and any attributes passed through.
Must use a drop-modals without a closing tag.
| Name | Type | Required | Notes |
|---|---|---|---|
| model | IReadOnlyCollection<IModal> |
No | If an empty collection is provided the tag helper renderer will attempt to get any persisted modals for the current request. |
| section | string? |
No | Provides an optional section of where this component is rendered. |
| tag-name | string? |
No | The container tag helper to wrap this collection of modals in. The default tag helper render will not output a tag if there is no value provided. If attributes are provided a value for this property will be required so they can be rendered too |
| theme | string? |
No | Theme used to render this collection. Used as a part of the view finding process. If no value is provided the default theme will be used instead. |
@* output request persisted modals without a wrapping tag *@
<drop-modals />
@* output request persisted modals without a wrapping tag and a custom theme *@
<drop-modals theme="CustomTheme" />
@* output request persisted modals with a wrapping tag and attributes *@
<drop-modals tag-name="section" class="section-modals" data-target="modals" />
@* output a provided collection of modals without a wrapping tag *@
<drop-modals model="Model.Modals" />
@* output a provided collection of modals with a wrapping tag and attributes *@
<drop-modals model="Model.Modals" tag-name="section" class="section-modals" data-target="modals" />TagHelperRenderer: IDropModalsTagHelperRenderer.
Renders a single IModal object.
Must use a drop-modal without a closing tag.
The modal will be wrapped in a ModalMetaData class. This class contains additional meta data such as the modal's section, theme and any attributes passed through.
| Name | Type | Required | Notes |
|---|---|---|---|
| model | IModal? |
Yes | This field is required and is nullable to allow for data binding flexibility. If the object is null it will not be rendered. |
| section | string? |
No | Provides an optional section of where this component is rendered. |
| theme | string? |
No | Theme used to render this model. Used as a part of the view finding process. If no value is provided the default theme will be used instead. |
@* output a modal *@
<drop-modal model="Model.Modal" />
@* output a modal with a custom theme *@
<drop-modal model="Model.Modal" theme="CustomTheme" />HTML attributes provided by drop-modal are passed through to the view name and can be outputted using the drop-attributes tag helper.
The values will be found in the ModalMetaData.Attributes property. Additionally ModalMetaData.AllAttributes() will contains all the attributes from the ModalMetaData.Attributes property and the Model.Modal.Attributes property too.
TagHelperRenderer: IDropSubcomponentsTagHelperRenderer.
Renders a read only collection of ISubcomponent objects.
The subcomponent will be wrapped in a SubcomponentMetaData class. This class contains additional meta data such as the subcomponent's position within the collection, the theme and any attributes passed through.
Must use a drop-subcomponents without a closing tag.
| Name | Type | Required | Notes |
|---|---|---|---|
| model | IReadOnlyCollection<ISubcomponent> |
Yes | If an empty collection is provided the default tag helper renderer will not rendered any output. |
| level | int |
No | The level to render the current subcomponents at. This may be useful for subcomponents that are rendered differently when nested |
| section | string? |
No | Provides an optional section of where this subcomponent is rendered. |
| tag-name | string? |
No | The container tag helper to wrap this collection of subcomponents in. The default tag helper render will not output a tag if there is no value provided. If attributes are provided a value for this property will be required so they can be rendered too |
| theme | string? |
No | Theme used to render this collection. Used as a part of the view finding process. If no value is provided the default theme will be used instead. |
@* output subcomponents without a wrapping tag *@
<drop-subcomponents model="Model.Subcomponents" />
@* output subcomponents without a wrapping tag and a custom theme *@
<drop-subcomponents model="Model.Subcomponents" theme="CustomTheme" />
@* output subcomponents with a wrapping tag and attributes *@
<drop-subcomponents model="Model.Subcomponents" tag-name="section" class="section-content" data-target="content" />TagHelperRenderer: IDropSubcomponentsTagHelperRenderer.
Renders a single ISubcomponent object.
Must use a drop-subcomponent without a closing tag.
The subcomponent will be wrapped in a SubcomponentMetaData class. This class contains additional meta data such as the subcomponent's position within the collection, the theme and any attributes passed through.
A single subcomponent with no property overrides to the index or position will be treated in the same way as a collection of one subcomponent.
| Name | Type | Required | Notes |
|---|---|---|---|
| model | ISubcomponent? |
Yes | This field is required and is nullable to allow for data binding flexibility. If the object is null it will not be rendered. |
| level | int |
No | The level to render the current subcomponent at. This may be useful for subcomponents that are rendered differently when nested |
| section | string? |
No | Provides an optional section of where this subcomponent is rendered. |
| index | int |
No | The index of the current subcomponent at. This may be useful for manually rendering a collection of subcomponents. |
| total | int |
No | The total number of subcomponents within a collection. This may be useful for manually rendering a collection of subcomponents. |
| theme | string? |
No | Theme used to render this model. Used as a part of the view finding process. If no value is provided the default theme will be used instead. |
@* output a subcomponent *@
<drop-subcomponent model="Model.Subcomponent" />
@* output a subcomponent with a custom theme *@
<drop-subcomponent model="Model.Subcomponent" theme="CustomTheme" />
@* manually rendering a collection subcomponents *@
@{
var total = Model.Subcomponents.Count();
var index = 0;
}
@foreach (var subcomponent in Model.Subcomponents) {
<drop-subcomponent model="subcomponent" index="@index" total="@total" class="content-item" data-target="item" />
index++;
}HTML attributes provided by drop-subcomponent are passed through to the view name and can be outputted using the drop-attributes tag helper.
The values will be found in the SubcomponentMetaData.Attributes property.