RazeStrap 1.0.1

Introduction

This remarkable library offers a seamless solution for building sophisticated and visually stunning Bootstrap components with ease, using the power of Razor tag helpers. Tag Helpers enable server-side code to participate in creating and rendering HTML elements in Razor files. Available tag helpers:

• Accordion
• Alert
• Badge
• Breadcrumb
• Button
• Button Group
• Card
• Carousel
• Close Button
• Collapse
• Dropdown
• ListGroup
• Modal
• Navbar
• Nav
• Tab
• Offcanvas
• Pagination
• Placeholder
• Popover
• Progress
• Scrollspy
• Spinner
• Toast
• Tooltip

How to Use the Tag Helper

Using the tag helper is easy and intuitive. The general syntax is as follows:

<tag-helper-name parameter1="parameter-value-1" parameter2="parameter-value-2" ...>
    Some content to render
</tag-helper-name>

For example, let's use the tag helper to create an accordion:

<accordion>
    <accordion-item title="Accordion Item #1">
        Placeholder content for this accordion, which is intended to demonstratethe<code>.accordionflush<code> class.
        This is the first item's accordion body.
    </accordion-item>
    <accordion-item title="Accordion Item #2">
        Placeholder content for this accordion, which is intended to demonstratethe<code>.accordionflush<code> class.
        This is the second item's accordion body. Let's imagine this being filled with some actualcontent.
    </accordion-item>
    <accordion-item title="Accordion Item #3">
        Placeholder content for this accordion, which is intended to demonstratethe<code>.accordionflush<code> class.
        This is the third item's accordion body. Nothing more exciting happening here in terms of contentbujust filling up the space to make it look, at least at first glance, a bit morerepresentativ ofhowthis would look in a real-world application.
    </accordion-item>
</accordion>

This will render as the following HTML code:

<div class="accordion" id="accordion_44e0c4">
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button aria-controls="accordion-item_f63d6d" aria-expanded="false" class="accordion-button     collapsed" data-bs-target="#accordion-item_f63d6d" data-bs-toggle="collapse" type="button">
                    Accordion Item #1
            </button>
        </h2>
        <div class="accordion-collapse collapse" data-bs-parent="#accordion_44e0c4" id="accordion-  item_f63d6d">
            <div class="accordion-body">
                Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-  flush</code> class.
                This is the first item's accordion body.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button aria-controls="accordion-item_2d056f" aria-expanded="false" class="accordion-button collapsed"   data-bs-target="#accordion-item_2d056f" data-bs-toggle="collapse" type="button">
                Accordion Item #2
            </button>
        </h2>
        <div class="accordion-collapse collapse" data-bs-parent="#accordion_44e0c4" id="accordion-item_2d056f">
            <div class="accordion-body">
                Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-  flush</code> class.
                This is the second item's accordion body. Let's imagine this being filled with some actual  content.
            </div>
        </div>
    </div>
    <div class="accordion-item">
        <h2 class="accordion-header">
            <button aria-controls="accordion-item_ce0f6c" aria-expanded="false" class="accordion-button collapsed"   data-bs-target="#accordion-item_ce0f6c" data-bs-toggle="collapse" type="button">
                Accordion Item #3
            </button>
        </h2>
        <div class="accordion-collapse collapse" data-bs-parent="#accordion_44e0c4" id="accordion-item_ce0f6c">
            <div class="accordion-body">
                Placeholder content for this accordion, which is intended to demonstrate the <code>.accordion-  flush</code> class.
                This is the third item's accordion body. Nothing more exciting happening here in terms of content,   but just filling up the space to make it look, at least at first glance, a bit more  representative of how this would look in a real-world application.
            </div>
        </div>
    </div>
</div>

As you can see, it saves you more time than building lots of HTML markup boilerplate just to create a Bootstrap accordion. However, there is no objection to building the HTML markup manually, and using a tag helper simply saves your time.

Tag helpers can be written on a page, partial page, or view component. The choice is yours, and the possibilities are endless.