TagHelperSamples

Panel Tag Helper

contributed by Manoj Kulkarni

This collection of tag helpers provides a less verbose syntax for showing a Bootstrap Panel.

Panel tag helper has optional type attribute which specify the type of bootstrap panel. eg. default, primary, success, info, warning, danger. If type attribute is not specified, then panel type is set to default

Panel title can be specified by using panel-title tag helper, body of the panel can be specified by using the panel-body tag helper and panel footer can be specified by using panel-footer tag helper

Simple bootstrap panel with body only:

Panel Content

Code:

<panel> 
    <panel-body>
        Panel Content
    </panel-body>
</panel>

Bootstrap panel with title and body:

Panel Title

Panel Content

Code:

<panel>
    <panel-title>
        Panel Title
    </panel-title>
    <panel-body>
        Panel Content
    </panel-body>
</panel>

Bootstrap panel including title, body and footer:

Panel Title

Panel Content
Panel Footer

Code:

<panel>
    <panel-title>
        Panel Title
    </panel-title>
    <panel-body>
        Panel Content
    </panel-body>
    <panel-footer>
        Panel Footer
    </panel-footer>
 </panel>

Bootstrap Primary Panel:

Panel Title

Panel Content
Panel Footer

Code:

<panel type="Primary"> 
    <panel-title>
        Panel Title
    </panel-title>
    <panel-body>
        Panel Content
    </panel-body>
    <panel-footer>
        Panel Footer
    </panel-footer>
</panel>

Bootstrap Success Panel:

Panel Title

Panel Content
Panel Footer

Code:

<panel type="Success"> 
    <panel-title>
        Panel Title
    </panel-title>
    <panel-body>
        Panel Content
    </panel-body>
    <panel-footer>
        Panel Footer
    </panel-footer>
</panel>

Bootstrap Info Panel:

Panel Title

Panel Content
Panel Footer

Code:

<panel type="Info"> 
    <panel-title>
        Panel Title
    </panel-title>
    <panel-body>
        Panel Content
    </panel-body>
    <panel-footer>
        Panel Footer
    </panel-footer>
</panel>

Bootstrap Warning Panel:

Panel Title

Panel Content
Panel Footer

Code:

<panel type="Warning"> 
    <panel-title>
        Panel Title
    </panel-title>
    <panel-body>
        Panel Content
    </panel-body>
    <panel-footer>
        Panel Footer
    </panel-footer>
</panel>

Bootstrap Danger Panel:

Panel Title

Panel Content
Panel Footer

Code:

<panel type="Danger"> 
    <panel-title>
        Panel Title
    </panel-title>
    <panel-body>
        Panel Content
    </panel-body>
    <panel-footer>
        Panel Footer
    </panel-footer>
</panel>