mirror of https://github.com/abpframework/abp.git
Ahmet Çotur
6 years ago
69 changed files with 1895 additions and 5 deletions
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.AlertsDemo |
|||
{ |
|||
[Widget] |
|||
public class AlertsDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/AlertsDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,70 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.AlertsDemo |
|||
|
|||
<abp-component-demo-section title="Examples" view-path="@AlertsDemoViewComponent.ViewPath"> |
|||
<abp-alert alert-type="Primary"> |
|||
A simple primary alert—check it out! |
|||
</abp-alert> |
|||
<abp-alert alert-type="Secondary"> |
|||
A simple secondary alert—check it out! |
|||
</abp-alert> |
|||
<abp-alert alert-type="Success"> |
|||
A simple success alert—check it out! |
|||
</abp-alert> |
|||
<abp-alert alert-type="Danger"> |
|||
A simple danger alert—check it out! |
|||
</abp-alert> |
|||
<abp-alert alert-type="Warning"> |
|||
A simple warning alert—check it out! |
|||
</abp-alert> |
|||
<abp-alert alert-type="Info"> |
|||
A simple info alert—check it out! |
|||
</abp-alert> |
|||
<abp-alert alert-type="Light"> |
|||
A simple light alert—check it out! |
|||
</abp-alert> |
|||
<abp-alert alert-type="Dark"> |
|||
A simple dark alert—check it out! |
|||
</abp-alert> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Link color" view-path="@AlertsDemoViewComponent.ViewPath"> |
|||
<abp-alert alert-type="Primary"> |
|||
A simple primary alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. |
|||
</abp-alert> |
|||
<abp-alert alert-type="Secondary"> |
|||
A simple secondary alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. |
|||
</abp-alert> |
|||
<abp-alert alert-type="Success"> |
|||
A simple success alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. |
|||
</abp-alert> |
|||
<abp-alert alert-type="Danger"> |
|||
A simple danger alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. |
|||
</abp-alert> |
|||
<abp-alert alert-type="Warning"> |
|||
A simple warning alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. |
|||
</abp-alert> |
|||
<abp-alert alert-type="Info"> |
|||
A simple info alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. |
|||
</abp-alert> |
|||
<abp-alert alert-type="Light"> |
|||
A simple light alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. |
|||
</abp-alert> |
|||
<abp-alert alert-type="Dark"> |
|||
A simple dark alert with <a abp-alert-link href="#">an example link</a>. Give it a click if you like. |
|||
</abp-alert> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Additional content" view-path="@AlertsDemoViewComponent.ViewPath"> |
|||
<abp-alert alert-type="Success"> |
|||
<h4>Well done!</h4> |
|||
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p> |
|||
<hr> |
|||
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p> |
|||
</abp-alert> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Dismissing" view-path="@AlertsDemoViewComponent.ViewPath"> |
|||
<abp-alert alert-type="Warning" dismissible="true"> |
|||
Holy guacamole! You should check in on some of those fields below. |
|||
</abp-alert> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.BadgesDemo |
|||
{ |
|||
[Widget] |
|||
public class BadgesDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/BadgesDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,49 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.BadgesDemo |
|||
|
|||
<abp-component-demo-section title="Example" view-path="@BadgesDemoViewComponent.ViewPath"> |
|||
<h1>Example heading <span abp-badge="Secondary">New</span></h1> |
|||
<h2>Example heading <span abp-badge="Secondary">New</span></h2> |
|||
<h3>Example heading <span abp-badge="Secondary">New</span></h3> |
|||
<h4>Example heading <span abp-badge="Secondary">New</span></h4> |
|||
<h5>Example heading <span abp-badge="Secondary">New</span></h5> |
|||
<h6>Example heading <span abp-badge="Secondary">New</span></h6> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Notifications" view-path="@BadgesDemoViewComponent.ViewPath"> |
|||
<abp-button button-type="Primary"> |
|||
Notifications <span abp-badge="Light">4</span> |
|||
</abp-button> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Contextual variations" view-path="@BadgesDemoViewComponent.ViewPath"> |
|||
<span abp-badge="Primary">Primary</span> |
|||
<span abp-badge="Secondary">Secondary</span> |
|||
<span abp-badge="Success">Success</span> |
|||
<span abp-badge="Danger">Danger</span> |
|||
<span abp-badge="Warning">Warning</span> |
|||
<span abp-badge="Info">Info</span> |
|||
<span abp-badge="Light">Light</span> |
|||
<span abp-badge="Dark">Dark</span> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Pill badges" view-path="@BadgesDemoViewComponent.ViewPath"> |
|||
<span abp-badge-pill="Primary">Primary</span> |
|||
<span abp-badge-pill="Secondary">Secondary</span> |
|||
<span abp-badge-pill="Success">Success</span> |
|||
<span abp-badge-pill="Danger">Danger</span> |
|||
<span abp-badge-pill="Warning">Warning</span> |
|||
<span abp-badge-pill="Info">Info</span> |
|||
<span abp-badge-pill="Light">Light</span> |
|||
<span abp-badge-pill="Dark">Dark</span> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Links" view-path="@BadgesDemoViewComponent.ViewPath"> |
|||
<a href="#" abp-badge="Primary">Primary</a> |
|||
<a href="#" abp-badge="Secondary">Secondary</a> |
|||
<a href="#" abp-badge="Success">Success</a> |
|||
<a href="#" abp-badge="Danger">Danger</a> |
|||
<a href="#" abp-badge="Warning">Warning</a> |
|||
<a href="#" abp-badge="Info">Info</a> |
|||
<a href="#" abp-badge="Light">Light</a> |
|||
<a href="#" abp-badge="Dark">Dark</a> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.BordersDemo |
|||
{ |
|||
[Widget] |
|||
public class BordersDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/BordersDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,46 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.BordersDemo |
|||
|
|||
<abp-component-demo-section title="Additive" view-path="@BordersDemoViewComponent.ViewPath"> |
|||
<span abp-border="Default"></span> |
|||
<span abp-border="Top"></span> |
|||
<span abp-border="Right"></span> |
|||
<span abp-border="Bottom"></span> |
|||
<span abp-border="Left"></span> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Subtractive" view-path="@BordersDemoViewComponent.ViewPath"> |
|||
<span abp-border="_0"></span> |
|||
<span abp-border="Top_0"></span> |
|||
<span abp-border="Right_0"></span> |
|||
<span abp-border="Bottom_0"></span> |
|||
<span abp-border="Left_0"></span> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Border color" view-path="@BordersDemoViewComponent.ViewPath"> |
|||
<span abp-border="Primary"></span> |
|||
<span abp-border="Secondary"></span> |
|||
<span abp-border="Success"></span> |
|||
<span abp-border="Danger"></span> |
|||
<span abp-border="Info"></span> |
|||
<span abp-border="Light"></span> |
|||
<span abp-border="Dark"></span> |
|||
<span abp-border="White"></span> |
|||
<br /> |
|||
<span abp-border="Left_Primary"></span> |
|||
<span abp-border="Top_Secondary"></span> |
|||
<span abp-border="Right_Success"></span> |
|||
<span abp-border="Bottom_Danger"></span> |
|||
<span abp-border="Bottom_Warning"></span> |
|||
<span abp-border="Left_Info"></span> |
|||
<span abp-border="Top_Light"></span> |
|||
<span abp-border="Right_Dark"></span> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Border-radius" view-path="@BordersDemoViewComponent.ViewPath"> |
|||
<span abp-border="Primary" abp-rounded="Default"></span> |
|||
<span abp-border="Primary" abp-rounded="_0"></span> |
|||
<span abp-border="Primary" abp-rounded="Top"></span> |
|||
<span abp-border="Primary" abp-rounded="Left"></span> |
|||
<span abp-border="Primary" abp-rounded="Bottom"></span> |
|||
<span abp-border="Primary" abp-rounded="Right"></span> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.BreadcrumbsDemo |
|||
{ |
|||
[Widget] |
|||
public class BreadcrumbsDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/BreadcrumbsDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,18 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.BreadcrumbsDemo |
|||
|
|||
<abp-component-demo-section title="Example" view-path="@BreadcrumbsDemoViewComponent.ViewPath"> |
|||
<abp-breadcrumb> |
|||
<abp-breadcrumb-item title="Home" /> |
|||
</abp-breadcrumb> |
|||
|
|||
<abp-breadcrumb> |
|||
<abp-breadcrumb-item href="#" title="Home" /> |
|||
<abp-breadcrumb-item title="Library" /> |
|||
</abp-breadcrumb> |
|||
|
|||
<abp-breadcrumb> |
|||
<abp-breadcrumb-item href="#" title="Home" /> |
|||
<abp-breadcrumb-item href="#" title="Library" /> |
|||
<abp-breadcrumb-item title="Page" /> |
|||
</abp-breadcrumb> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ButtonGroupsDemo |
|||
{ |
|||
[Widget] |
|||
public class ButtonGroupsDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/ButtonGroupsDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,68 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ButtonGroupsDemo |
|||
|
|||
<abp-component-demo-section title="Basic example" view-path="@ButtonGroupsDemoViewComponent.ViewPath"> |
|||
<abp-button-group> |
|||
<abp-button button-type="Secondary">Left</abp-button> |
|||
<abp-button button-type="Secondary">Middle</abp-button> |
|||
<abp-button button-type="Secondary">Right</abp-button> |
|||
</abp-button-group> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Button Toolbar" view-path="@ButtonGroupsDemoViewComponent.ViewPath"> |
|||
<abp-button-toolbar> |
|||
<abp-button-group class="mr-2"> |
|||
<abp-button button-type="Secondary">1</abp-button> |
|||
<abp-button button-type="Secondary">2</abp-button> |
|||
<abp-button button-type="Secondary">3</abp-button> |
|||
<abp-button button-type="Secondary">4</abp-button> |
|||
</abp-button-group> |
|||
<abp-button-group class="mr-2"> |
|||
<abp-button button-type="Secondary">5</abp-button> |
|||
<abp-button button-type="Secondary">6</abp-button> |
|||
<abp-button button-type="Secondary">7</abp-button> |
|||
</abp-button-group> |
|||
<abp-button-group> |
|||
<abp-button button-type="Secondary">8</abp-button> |
|||
</abp-button-group> |
|||
</abp-button-toolbar> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Sizing" view-path="@ButtonGroupsDemoViewComponent.ViewPath"> |
|||
<abp-button-group size="Large"> |
|||
<abp-button button-type="Secondary">Left</abp-button> |
|||
<abp-button button-type="Secondary">Middle</abp-button> |
|||
<abp-button button-type="Secondary">Right</abp-button> |
|||
</abp-button-group> |
|||
<abp-button-group> |
|||
<abp-button button-type="Secondary">Left</abp-button> |
|||
<abp-button button-type="Secondary">Middle</abp-button> |
|||
<abp-button button-type="Secondary">Right</abp-button> |
|||
</abp-button-group> |
|||
<abp-button-group size="Small"> |
|||
<abp-button button-type="Secondary">Left</abp-button> |
|||
<abp-button button-type="Secondary">Middle</abp-button> |
|||
<abp-button button-type="Secondary">Right</abp-button> |
|||
</abp-button-group> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Nesting" view-path="@ButtonGroupsDemoViewComponent.ViewPath"> |
|||
<abp-button-group> |
|||
<abp-button button-type="Secondary">1</abp-button> |
|||
<abp-button button-type="Secondary">2</abp-button> |
|||
<abp-dropdown> |
|||
<abp-dropdown-button button-type="Secondary" text="Dropdown" /> |
|||
<abp-dropdown-menu> |
|||
<abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item> |
|||
<abp-dropdown-item href="#"> Dropdown link </abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown> |
|||
</abp-button-group> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Vertical variation" view-path="@ButtonGroupsDemoViewComponent.ViewPath"> |
|||
<abp-button-group direction="Vertical"> |
|||
<abp-button button-type="Secondary">Left</abp-button> |
|||
<abp-button button-type="Secondary">Middle</abp-button> |
|||
<abp-button button-type="Secondary">Right</abp-button> |
|||
</abp-button-group> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.CardsDemo |
|||
{ |
|||
[Widget] |
|||
public class CardsDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/CardsDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,156 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.CardsDemo |
|||
|
|||
<abp-component-demo-section title="Example" view-path="@CardsDemoViewComponent.ViewPath"> |
|||
<abp-card style="width: 18rem;"> |
|||
<img abp-card-image="Top" src="~/imgs/demo/300x200.png" /> |
|||
<abp-card-body> |
|||
<abp-card-title>Card Title</abp-card-title> |
|||
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text> |
|||
<a abp-button="Primary" href="#"> Go somewhere</a> |
|||
</abp-card-body> |
|||
</abp-card> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Titles, text, and links" view-path="@CardsDemoViewComponent.ViewPath"> |
|||
<abp-card style="width: 18rem;"> |
|||
<abp-card-body> |
|||
<abp-card-title>Card title</abp-card-title> |
|||
<abp-card-subtitle class="mb-2 text-muted">Card subtitle</abp-card-subtitle> |
|||
<abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text> |
|||
<a abp-card-link href="#">Card link</a> |
|||
<a abp-card-link href="#">Another link</a> |
|||
</abp-card-body> |
|||
</abp-card> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="List groups" view-path="@CardsDemoViewComponent.ViewPath"> |
|||
<abp-card style="width: 18rem;"> |
|||
<abp-list-group flush="true"> |
|||
<abp-list-group-item>Cras justo odio</abp-list-group-item> |
|||
<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item> |
|||
<abp-list-group-item>Vestibulum at eros</abp-list-group-item> |
|||
</abp-list-group> |
|||
</abp-card> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="List Title" view-path="@CardsDemoViewComponent.ViewPath"> |
|||
<abp-card style="width: 18rem;"> |
|||
<abp-card-header>Featured</abp-card-header> |
|||
<abp-list-group flush="true"> |
|||
<abp-list-group-item>Cras justo odio</abp-list-group-item> |
|||
<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item> |
|||
<abp-list-group-item>Vestibulum at eros</abp-list-group-item> |
|||
</abp-list-group> |
|||
</abp-card> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Kitchen sink" view-path="@CardsDemoViewComponent.ViewPath"> |
|||
<abp-card style="width: 18rem;"> |
|||
<img abp-card-image="Top" src="~/imgs/demo/300x200.png" /> |
|||
<abp-card-body> |
|||
<abp-card-title>Card Title</abp-card-title><abp-card-text>Some quick example text to build on the card title and make up the bulk of the card's content.</abp-card-text> |
|||
</abp-card-body> |
|||
<abp-list-group flush="true"> |
|||
<abp-list-group-item>Cras justo odio</abp-list-group-item> |
|||
<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item> |
|||
<abp-list-group-item>Vestibulum at eros</abp-list-group-item> |
|||
</abp-list-group> |
|||
<abp-card-body> |
|||
<a abp-card-link href="#">Card link</a> |
|||
<a abp-card-link href="#">Another link</a> |
|||
</abp-card-body> |
|||
</abp-card> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Header and footer" view-path="@CardsDemoViewComponent.ViewPath"> |
|||
<abp-card style="width: 18rem;"> |
|||
<abp-card-header>Featured</abp-card-header> |
|||
<abp-card-body> |
|||
<abp-card-title> Special title treatment</abp-card-title> |
|||
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text> |
|||
<a abp-button="Primary" href="#"> Go somewhere</a> |
|||
</abp-card-body> |
|||
</abp-card> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Quoate" view-path="@CardsDemoViewComponent.ViewPath"> |
|||
<abp-card> |
|||
<abp-card-header>Quote</abp-card-header> |
|||
<abp-card-body> |
|||
<abp-blockquote> |
|||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p> |
|||
<footer>Someone famous in Source Title</footer> |
|||
</abp-blockquote> |
|||
</abp-card-body> |
|||
</abp-card> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Featured" view-path="@CardsDemoViewComponent.ViewPath"> |
|||
<abp-card class="text-center"> |
|||
<abp-card-header>Featured</abp-card-header> |
|||
<abp-card-body> |
|||
<abp-card-title> Special title treatment</abp-card-title> |
|||
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text> |
|||
<a abp-button="Primary" href="#"> Go somewhere</a> |
|||
</abp-card-body> |
|||
<abp-card-footer class="text-muted"> 2 days ago</abp-card-footer> |
|||
</abp-card> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Card Styles" view-path="@CardsDemoViewComponent.ViewPath"> |
|||
<abp-card background="Primary" class="mb-3" style="max-width: 18rem;"> |
|||
<abp-card-header>Featured</abp-card-header> |
|||
<abp-card-body> |
|||
<abp-card-title> Special title treatment</abp-card-title> |
|||
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text> |
|||
</abp-card-body> |
|||
</abp-card> |
|||
|
|||
<abp-card background="Success" text-color="Danger" border="Dark" class="mb-3" style="max-width: 18rem;"> |
|||
<abp-card-header>Featured</abp-card-header> |
|||
<abp-card-body> |
|||
<abp-card-title> Special title treatment</abp-card-title> |
|||
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text> |
|||
</abp-card-body> |
|||
</abp-card> |
|||
|
|||
<abp-card background="Warning" text-color="Secondary" class="mb-3" style="max-width: 18rem;"> |
|||
<abp-card-header>Featured</abp-card-header> |
|||
<abp-card-body> |
|||
<abp-card-title> Special title treatment</abp-card-title> |
|||
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text> |
|||
</abp-card-body> |
|||
</abp-card> |
|||
|
|||
<abp-card background="Light" text-color="Dark" border="Success" class="mb-3" style="max-width: 18rem;"> |
|||
<abp-card-header>Featured</abp-card-header> |
|||
<abp-card-body> |
|||
<abp-card-title> Special title treatment</abp-card-title> |
|||
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text> |
|||
</abp-card-body> |
|||
</abp-card> |
|||
|
|||
<abp-card background="Dark" text-color="White" border="Danger" class="mb-3" style="max-width: 18rem;"> |
|||
<abp-card-header>Featured</abp-card-header> |
|||
<abp-card-body> |
|||
<abp-card-title> Special title treatment</abp-card-title> |
|||
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text> |
|||
</abp-card-body> |
|||
</abp-card> |
|||
|
|||
<abp-card background="Danger" class="mb-3" style="max-width: 18rem;"> |
|||
<abp-card-header text-color="Primary">Featured</abp-card-header> |
|||
<abp-card-body> |
|||
<abp-card-title> Special title treatment</abp-card-title> |
|||
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text> |
|||
</abp-card-body> |
|||
</abp-card> |
|||
|
|||
<abp-card background="Info" border="Danger" class="mb-3" style="max-width: 18rem;"> |
|||
<abp-card-header>Featured</abp-card-header> |
|||
<abp-card-body text-color="Danger"> |
|||
<abp-card-title> Special title treatment</abp-card-title> |
|||
<abp-card-text>With supporting text below as a natural lead-in to additional content.</abp-card-text> |
|||
</abp-card-body> |
|||
</abp-card> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.CollapseDemo |
|||
{ |
|||
[Widget] |
|||
public class CollapseDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/CollapseDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,43 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.CollapseDemo |
|||
|
|||
<abp-component-demo-section title="Example" view-path="@CollapseDemoViewComponent.ViewPath"> |
|||
<abp-button button-type="Primary" abp-collapse-id="collapseExample" text="Button with data-target" /> |
|||
<a abp-button="Primary" abp-collapse-id="collapseExample"> Link with href </a> |
|||
|
|||
<abp-collapse-body id="collapseExample"> |
|||
Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. |
|||
</abp-collapse-body> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Multiple targets" view-path="@CollapseDemoViewComponent.ViewPath"> |
|||
<a abp-button="Primary" abp-collapse-id="FirstCollapseExample"> Toggle first element </a> |
|||
<abp-button button-type="Primary" abp-collapse-id="SecondCollapseExample" text="Toggle second element" /> |
|||
<abp-button button-type="Primary" abp-collapse-id="FirstCollapseExample SecondCollapseExample" text="Toggle both elements" /> |
|||
|
|||
<abp-row class="mt-3"> |
|||
<abp-column size-sm="_6"> |
|||
<abp-collapse-body id="FirstCollapseExample" multi="true"> |
|||
Curabitur porta porttitor libero eu luctus. Praesent ultrices mattis commodo. Integer sodales massa risus, in molestie enim sagittis blandit |
|||
</abp-collapse-body> |
|||
</abp-column> |
|||
<abp-column size-sm="_6"> |
|||
<abp-collapse-body id="SecondCollapseExample" multi="true"> |
|||
Anim pariatur wolf moon tempor,,, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. |
|||
</abp-collapse-body> |
|||
</abp-column> |
|||
</abp-row> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Accordion example" view-path="@CollapseDemoViewComponent.ViewPath"> |
|||
<abp-accordion> |
|||
<abp-accordion-item title="Collapsible Group Item #1"> |
|||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry rtat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. |
|||
</abp-accordion-item> |
|||
<abp-accordion-item title="Collapsible Group Item #2"> |
|||
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. |
|||
</abp-accordion-item> |
|||
<abp-accordion-item title="Collapsible Group Item #3"> |
|||
Anim pariatur wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. |
|||
</abp-accordion-item> |
|||
</abp-accordion> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,171 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.DropdownsDemo |
|||
|
|||
<abp-component-demo-section title="Single button" view-path="@DropdownsDemoViewComponent.ViewPath"> |
|||
<abp-dropdown> |
|||
<abp-dropdown-button text="Dropdown button" /> |
|||
<abp-dropdown-menu> |
|||
<abp-dropdown-item href="#">Action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Another action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Single button 2" view-path="@DropdownsDemoViewComponent.ViewPath"> |
|||
<abp-dropdown> |
|||
<abp-dropdown-button button-type="Secondary" link="true" text="Dropdown button" /> |
|||
<abp-dropdown-menu> |
|||
<abp-dropdown-item href="#">Action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Another action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Single button 3" view-path="@DropdownsDemoViewComponent.ViewPath"> |
|||
<abp-dropdown> |
|||
<abp-dropdown-button button-type="Danger" text="Dropdown button" /> |
|||
<abp-dropdown-menu> |
|||
<abp-dropdown-item href="#">Action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Another action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item> |
|||
<abp-dropdown-divider /> |
|||
<abp-dropdown-item href="#">Separated link</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Split button" view-path="@DropdownsDemoViewComponent.ViewPath"> |
|||
<abp-dropdown> |
|||
<abp-dropdown-button button-type="Danger" dropdown-style="Split" text="Dropdown button" /> |
|||
<abp-dropdown-menu> |
|||
<abp-dropdown-item href="#">Action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Another action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item> |
|||
<abp-dropdown-divider /> |
|||
<abp-dropdown-item href="#">Separated link</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Split button 2" view-path="@DropdownsDemoViewComponent.ViewPath"> |
|||
<abp-dropdown> |
|||
<abp-dropdown-button size="Large" button-type="Secondary" text="Large button" /> |
|||
<abp-dropdown-menu> |
|||
<abp-dropdown-item href="#">Action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Another action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item> |
|||
<abp-dropdown-divider /> |
|||
<abp-dropdown-item href="#">Separated link</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown><abp-dropdown> |
|||
<abp-dropdown-button size="Large" button-type="Secondary" dropdown-style="Split" text="Large split button" /> |
|||
<abp-dropdown-menu> |
|||
<abp-dropdown-item href="#">Action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Another action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item> |
|||
<abp-dropdown-divider /> |
|||
<abp-dropdown-item href="#">Separated link</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown><abp-dropdown> |
|||
<abp-dropdown-button size="Small" button-type="Secondary" text="Small button" /> |
|||
<abp-dropdown-menu> |
|||
<abp-dropdown-item href="#">Action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Another action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item> |
|||
<abp-dropdown-divider /> |
|||
<abp-dropdown-item href="#">Separated link</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown><abp-dropdown> |
|||
<abp-dropdown-button size="Small" button-type="Secondary" dropdown-style="Split" text="Small split button" /> |
|||
<abp-dropdown-menu> |
|||
<abp-dropdown-item href="#">Action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Another action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item> |
|||
<abp-dropdown-divider /> |
|||
<abp-dropdown-item href="#">Separated link</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Directions" view-path="@DropdownsDemoViewComponent.ViewPath"> |
|||
<abp-dropdown direction="Up"> |
|||
<abp-dropdown-button button-type="Secondary" text="Dropup" /> |
|||
<abp-dropdown-menu> |
|||
<abp-dropdown-item href="#">Action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Another action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown><abp-dropdown direction="Right"> |
|||
<abp-dropdown-button button-type="Secondary" text="dropright" /> |
|||
<abp-dropdown-menu> |
|||
<abp-dropdown-item href="#">Action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Another action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown><abp-dropdown direction="Right"> |
|||
<abp-dropdown-button button-type="Secondary" dropdown-style="Split" text="Split right" /> |
|||
<abp-dropdown-menu> |
|||
<abp-dropdown-item href="#">Action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Another action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Menu Items" view-path="@DropdownsDemoViewComponent.ViewPath"> |
|||
<abp-dropdown> |
|||
<abp-dropdown-button button-type="Secondary" text="Dropdown" /> |
|||
<abp-dropdown-menu> |
|||
<abp-dropdown-header>Dropdown Header</abp-dropdown-header> |
|||
<abp-dropdown-item href="#">Action</abp-dropdown-item> |
|||
<abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item> |
|||
<abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item> |
|||
<abp-dropdown-divider /> |
|||
<abp-dropdown-item-text>Dropdown Item Text</abp-dropdown-item-text> |
|||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Menu alignment" view-path="@DropdownsDemoViewComponent.ViewPath"> |
|||
<abp-dropdown> |
|||
<abp-dropdown-button button-type="Secondary" text="Right-aligned" /> |
|||
<abp-dropdown-menu align="Right"> |
|||
<abp-dropdown-item href="#">Action</abp-dropdown-item> |
|||
<abp-dropdown-item active="true" href="#">Active action</abp-dropdown-item> |
|||
<abp-dropdown-item disabled="true" href="#">Disabled action</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Custom Content" view-path="@DropdownsDemoViewComponent.ViewPath"> |
|||
<abp-dropdown> |
|||
<abp-dropdown-button button-type="Secondary" text="Dropdown With Only Text" /> |
|||
<abp-dropdown-menu class="p-4" style="max-width: 200px;"> |
|||
<p> |
|||
Some example text that's free-flowing within the dropdown menu. |
|||
</p> |
|||
<p class="mb-0"> |
|||
And this is more example text. |
|||
</p> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="With Form" view-path="@DropdownsDemoViewComponent.ViewPath"> |
|||
<abp-dropdown> |
|||
<abp-dropdown-button button-type="Secondary" text="Dropdown With Form" /> |
|||
<abp-dropdown-menu> |
|||
<form class="px-4 py-3"> |
|||
<abp-input asp-for="EmailAddress"></abp-input> |
|||
<abp-input asp-for="Password"></abp-input> |
|||
<abp-input asp-for="RememberMe"></abp-input> |
|||
<abp-button button-type="Primary" text="Sign In" type="submit" /> |
|||
</form> |
|||
<abp-dropdown-divider></abp-dropdown-divider> |
|||
<abp-dropdown-item href="#">New around here? Sign up</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Forgot password?</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.DropdownsDemo |
|||
{ |
|||
[Widget] |
|||
public class DropdownsDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/DropdownsDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,223 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.GridsDemo |
|||
|
|||
<abp-component-demo-section title="Equal-width" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-container> |
|||
<abp-row> |
|||
<abp-column>1 of 2</abp-column> |
|||
<abp-column>2 of 2</abp-column> |
|||
</abp-row> |
|||
<abp-row> |
|||
<abp-column>1 of 3</abp-column> |
|||
<abp-column>2 of 3</abp-column> |
|||
<abp-column>3 of 3</abp-column> |
|||
</abp-row> |
|||
</abp-container> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Column Breaker" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-container> |
|||
<abp-row> |
|||
<abp-column>column</abp-column> |
|||
<abp-column>column</abp-column> |
|||
<abp-column-breaker /> |
|||
<abp-column>column</abp-column> |
|||
<abp-column>column</abp-column> |
|||
</abp-row> |
|||
</abp-container> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Setting one column width" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-container> |
|||
<abp-row> |
|||
<abp-column>1 of 3</abp-column> |
|||
<abp-column size="_6">2 of 3 (wider)</abp-column> |
|||
<abp-column>3 of 3</abp-column> |
|||
</abp-row> |
|||
<abp-row> |
|||
<abp-column>1 of 3</abp-column> |
|||
<abp-column size="_5">2 of 3 (wider)</abp-column> |
|||
<abp-column>3 of 3</abp-column> |
|||
</abp-row> |
|||
</abp-container> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Variable width content" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-container> |
|||
<abp-row h-align="Center"> |
|||
<abp-column size-lg="_2">1 of 3</abp-column> |
|||
<abp-column size-md="Auto">Variable width content</abp-column> |
|||
<abp-column size-lg="_2">3 of 3</abp-column> |
|||
</abp-row> |
|||
<abp-row> |
|||
<abp-column>1 of 3</abp-column> |
|||
<abp-column size-md="Auto">Variable width content</abp-column> |
|||
<abp-column size-lg="_2">3 of 3</abp-column> |
|||
</abp-row> |
|||
</abp-container> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Responsive classes" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-row> |
|||
<abp-column>col</abp-column> |
|||
<abp-column>col</abp-column> |
|||
<abp-column>col</abp-column> |
|||
<abp-column>col</abp-column> |
|||
</abp-row> |
|||
<abp-row> |
|||
<abp-column size="_8">col-8</abp-column> |
|||
<abp-column size="_4">col-4</abp-column> |
|||
</abp-row> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="All breakpoints" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-row> |
|||
<abp-column size-sm="_8">col-sm-8</abp-column> |
|||
<abp-column size-sm="_4">col-sm-4</abp-column> |
|||
</abp-row> |
|||
<abp-row> |
|||
<abp-column size-sm="_">col-sm</abp-column> |
|||
<abp-column size-sm="_">col-sm</abp-column> |
|||
<abp-column size-sm="_">col-sm</abp-column> |
|||
<abp-column size-sm="_">col-sm</abp-column> |
|||
</abp-row> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Mix and match" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<!-- Stack the columns on mobile by making one full-width and the other half-width --> |
|||
<abp-row> |
|||
<abp-column size="_12" size-md="_8">.col-12 .col-md-8</abp-column> |
|||
<abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column> |
|||
</abp-row> |
|||
|
|||
<!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --> |
|||
<abp-row> |
|||
<abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column> |
|||
<abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column> |
|||
<abp-column size="_6" size-md="_4">.col-6 .col-md-4</abp-column> |
|||
</abp-row> |
|||
|
|||
<!-- Columns are always 50% wide, on mobile and desktop --> |
|||
<abp-row> |
|||
<abp-column size="_6">.col-6</abp-column> |
|||
<abp-column size="_6">.col-6</abp-column> |
|||
</abp-row> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Vertical Alignment" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-container> |
|||
<abp-row v-align="Start"> |
|||
<abp-column>column</abp-column> |
|||
<abp-column>column</abp-column> |
|||
<abp-column>column</abp-column> |
|||
</abp-row> |
|||
<abp-row v-align="Center"> |
|||
<abp-column>column</abp-column> |
|||
<abp-column>column</abp-column> |
|||
<abp-column>column</abp-column> |
|||
</abp-row> |
|||
<abp-row v-align="End"> |
|||
<abp-column>column</abp-column> |
|||
<abp-column>column</abp-column> |
|||
<abp-column>column</abp-column> |
|||
</abp-row> |
|||
</abp-container> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Vertical Alignment 2" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-container> |
|||
<abp-row v-align="Start"> |
|||
<abp-column v-align="Start">column</abp-column> |
|||
<abp-column v-align="Center">column</abp-column> |
|||
<abp-column v-align="End">column</abp-column> |
|||
</abp-row> |
|||
</abp-container> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Horizontal alignment" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-container> |
|||
<abp-row h-align="Start"> |
|||
<abp-column size="_4">One of two columns</abp-column> |
|||
<abp-column size="_4">One of two columns</abp-column> |
|||
</abp-row> |
|||
<abp-row h-align="Center"> |
|||
<abp-column size="_4">One of two columns</abp-column> |
|||
<abp-column size="_4">One of two columns</abp-column> |
|||
</abp-row> |
|||
<abp-row h-align="End"> |
|||
<abp-column size="_4">One of two columns</abp-column> |
|||
<abp-column size="_4">One of two columns</abp-column> |
|||
</abp-row> |
|||
<abp-row h-align="Around"> |
|||
<abp-column size="_4">One of two columns</abp-column> |
|||
<abp-column size="_4">One of two columns</abp-column> |
|||
</abp-row> |
|||
<abp-row h-align="Between"> |
|||
<abp-column size="_4">One of two columns</abp-column> |
|||
<abp-column size="_4">One of two columns</abp-column> |
|||
</abp-row> |
|||
</abp-container> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="No gutters" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-row gutters="false"> |
|||
<abp-column size="_8">One of two columns</abp-column> |
|||
<abp-column size="_4">One of two columns</abp-column> |
|||
</abp-row> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Column wrapping" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-row> |
|||
<abp-column size="_9">.col-9</abp-column> |
|||
<abp-column size="_4">.col-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.</abp-column> |
|||
<abp-column size="_6">.col-6<br>Subsequent columns continue along the new line.s</abp-column> |
|||
</abp-row> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Reordering" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-container> |
|||
<abp-row> |
|||
<abp-column order="_12">First, but Last</abp-column> |
|||
<abp-column>Second, but unordered</abp-column> |
|||
<abp-column order="_6">Third, but Second</abp-column> |
|||
</abp-row> |
|||
</abp-container> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Reordering 2" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-container> |
|||
<abp-row> |
|||
<abp-column order="Last">First, but Last</abp-column> |
|||
<abp-column>Second, but unordered</abp-column> |
|||
<abp-column order="First">Third, but First</abp-column> |
|||
</abp-row> |
|||
</abp-container> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Offsetting columns" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-container> |
|||
<abp-row> |
|||
<abp-column size-md="_4">.col-md-4</abp-column> |
|||
<abp-column size-md="_4" offset-md="_4">.col-md-4 .offset-md-4</abp-column> |
|||
</abp-row> |
|||
<abp-row> |
|||
<abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column> |
|||
<abp-column size-md="_3" offset-md="_3">.col-md-3 .offset-md-3</abp-column> |
|||
</abp-row> |
|||
<abp-row> |
|||
<abp-column size-md="_6" offset-md="_3">.col-md-6 .offset-md-3</abp-column> |
|||
</abp-row> |
|||
</abp-container> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Offsetting columns 2" view-path="@GridsDemoViewComponent.ViewPath"> |
|||
<abp-container> |
|||
<abp-row> |
|||
<abp-column size-sm="_5" size-md="_6">.col-sm-5 .col-md-6</abp-column> |
|||
<abp-column size-sm="_5" offset-sm="_2" size-md="_6" offset-md="_">.col-sm-5 .offset-sm-2 .col-md-6 .offset-md-0</abp-column> |
|||
</abp-row> |
|||
<abp-row> |
|||
<abp-column size-sm="_6" size-md="_5" size-lg="_6">col-sm-6 .col-md-5 .col-lg-6</abp-column> |
|||
<abp-column size-sm="_6" size-md="_5" offset-md="_2" size-lg="_6" offset-lg="_">.col-sm-6 .col-md-5 .offset-md-2 .col-lg-6 .offset-lg-0</abp-column> |
|||
</abp-row> |
|||
</abp-container> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,5 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.GridsDemo |
|||
{ |
|||
@ -0,0 +1,82 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ListGroupsDemo |
|||
|
|||
<abp-component-demo-section title="Basic example" view-path="@ListGroupsDemoViewComponent.ViewPath"> |
|||
<abp-list-group> |
|||
<abp-list-group-item>Cras justo odio</abp-list-group-item> |
|||
<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item> |
|||
<abp-list-group-item>Morbi leo risus</abp-list-group-item> |
|||
<abp-list-group-item>Vestibulum at eros</abp-list-group-item> |
|||
</abp-list-group> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Active & disabled items" view-path="@ListGroupsDemoViewComponent.ViewPath"> |
|||
<abp-list-group> |
|||
<abp-list-group-item>Cras justo odio</abp-list-group-item> |
|||
<abp-list-group-item active="true">Dapibus ac facilisis in</abp-list-group-item> |
|||
<abp-list-group-item>Morbi leo risus</abp-list-group-item> |
|||
<abp-list-group-item disabled="true">Vestibulum at eros</abp-list-group-item> |
|||
</abp-list-group> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Links and buttons" view-path="@ListGroupsDemoViewComponent.ViewPath"> |
|||
<abp-list-group> |
|||
<abp-list-group-item href="#" active="true">Cras justo odio</abp-list-group-item> |
|||
<abp-list-group-item href="#">Dapibus ac facilisis in</abp-list-group-item> |
|||
<abp-list-group-item href="#">Morbi leo risus</abp-list-group-item> |
|||
<abp-list-group-item href="#" disabled="true">Vestibulum at eros</abp-list-group-item> |
|||
</abp-list-group> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Links and buttons 2" view-path="@ListGroupsDemoViewComponent.ViewPath"> |
|||
<abp-list-group> |
|||
<abp-list-group-item href="#" active="true">Cras justo odio</abp-list-group-item> |
|||
<abp-list-group-item href="#">Dapibus ac facilisis in</abp-list-group-item> |
|||
<abp-list-group-item href="#">Morbi leo risus</abp-list-group-item> |
|||
<abp-list-group-item href="#" disabled="true">Vestibulum at eros</abp-list-group-item> |
|||
</abp-list-group> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Flush" view-path="@ListGroupsDemoViewComponent.ViewPath"> |
|||
<abp-list-group flush="true"> |
|||
<abp-list-group-item>Cras justo odio</abp-list-group-item> |
|||
<abp-list-group-item>Dapibus ac facilisis in</abp-list-group-item> |
|||
<abp-list-group-item>Morbi leo risus</abp-list-group-item> |
|||
<abp-list-group-item>Vestibulum at eros</abp-list-group-item> |
|||
</abp-list-group> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Contextual classes" view-path="@ListGroupsDemoViewComponent.ViewPath"> |
|||
<abp-list-group> |
|||
<abp-list-group-item>Cras justo odio</abp-list-group-item> |
|||
<abp-list-group-item type="Primary">A simple Primary list group item</abp-list-group-item> |
|||
<abp-list-group-item type="Secondary">A simple Secondary list group item</abp-list-group-item> |
|||
<abp-list-group-item type="Success">A simple Success list group item</abp-list-group-item> |
|||
<abp-list-group-item type="Danger">A simple Danger list group item</abp-list-group-item> |
|||
<abp-list-group-item type="Warning">A simple Warning list group item</abp-list-group-item> |
|||
<abp-list-group-item type="Info">A simple Info list group item</abp-list-group-item> |
|||
<abp-list-group-item type="Light">A simple Light list group item</abp-list-group-item> |
|||
<abp-list-group-item type="Dark">A simple Dark list group item</abp-list-group-item> |
|||
</abp-list-group> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Contextual classes 2" view-path="@ListGroupsDemoViewComponent.ViewPath"> |
|||
<abp-list-group> |
|||
<abp-list-group-item href="#">Cras justo odio</abp-list-group-item> |
|||
<abp-list-group-item href="#" type="Primary">A simple Primary list group item</abp-list-group-item> |
|||
<abp-list-group-item href="#" type="Secondary">A simple Secondary list group item</abp-list-group-item> |
|||
<abp-list-group-item href="#" type="Success">A simple Success list group item</abp-list-group-item> |
|||
<abp-list-group-item href="#" type="Danger">A simple Danger list group item</abp-list-group-item> |
|||
<abp-list-group-item href="#" type="Warning">A simple Warning list group item</abp-list-group-item> |
|||
<abp-list-group-item href="#" type="Info">A simple Info list group item</abp-list-group-item> |
|||
<abp-list-group-item href="#" type="Light">A simple Light list group item</abp-list-group-item> |
|||
<abp-list-group-item href="#" type="Dark">A simple Dark list group item</abp-list-group-item> |
|||
</abp-list-group> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="With badges" view-path="@ListGroupsDemoViewComponent.ViewPath"> |
|||
<abp-list-group> |
|||
<abp-list-group-item>Cras justo odio <span abp-badge-pill="Primary">14</span></abp-list-group-item> |
|||
<abp-list-group-item>Dapibus ac facilisis in <span abp-badge-pill="Primary">2</span></abp-list-group-item> |
|||
<abp-list-group-item>Morbi leo risus <span abp-badge-pill="Primary">1</span></abp-list-group-item> |
|||
</abp-list-group> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ListGroupsDemo |
|||
{ |
|||
[Widget] |
|||
public class ListGroupsDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/ListGroupsDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ModalsDemo |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers.Modal |
|||
|
|||
<abp-component-demo-section title="Example" view-path="@ModalsDemoViewComponent.ViewPath"> |
|||
|
|||
<abp-button button-type="Primary" data-toggle="modal" data-target="#myModal">Launch modal</abp-button> |
|||
|
|||
<abp-modal centered="true" size="Large" id="myModal"> |
|||
<abp-modal-header title="Modal title"></abp-modal-header> |
|||
<abp-modal-body> |
|||
Woohoo, you're reading this text in a modal! |
|||
</abp-modal-body> |
|||
<abp-modal-footer buttons="@(AbpModalButtons.Save|AbpModalButtons.Close)"></abp-modal-footer> |
|||
</abp-modal> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ModalsDemo |
|||
{ |
|||
[Widget] |
|||
public class ModalsDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/ModalsDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,53 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.NavsDemo |
|||
|
|||
<abp-component-demo-section title="Base nav" view-path="@NavsDemoViewComponent.ViewPath"> |
|||
<abp-nav nav-style="Pill" align="Center"> |
|||
<abp-nav-item> |
|||
<a abp-nav-link active="true" href="#">Active</a> |
|||
</abp-nav-item> |
|||
<abp-nav-item> |
|||
<a abp-nav-link href="#">Longer nav link</a> |
|||
</abp-nav-item> |
|||
<abp-nav-item> |
|||
<a abp-nav-link href="#">link</a> |
|||
</abp-nav-item> |
|||
<abp-nav-item> |
|||
<a abp-nav-link disabled="true" href="#">disabled</a> |
|||
</abp-nav-item> |
|||
</abp-nav> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Base nav 2" view-path="@NavsDemoViewComponent.ViewPath"> |
|||
<abp-nav-bar size="Lg" navbar-style="Dark_Warning"> |
|||
<a abp-navbar-brand href="#">Navbar</a> |
|||
<abp-navbar-toggle> |
|||
<abp-navbar-nav> |
|||
<abp-nav-item active="true"> |
|||
<a abp-nav-link href="#">Home <span class="sr-only">(current)</span></a> |
|||
</abp-nav-item> |
|||
<abp-nav-item> |
|||
<a abp-nav-link href="#">Link</a> |
|||
</abp-nav-item> |
|||
<abp-nav-item dropdown="true"> |
|||
<abp-dropdown> |
|||
<abp-dropdown-button nav-link="true" text="Dropdown" /> |
|||
<abp-dropdown-menu> |
|||
<abp-dropdown-header>Dropdown header</abp-dropdown-header> |
|||
<abp-dropdown-item href="#" active="true">Action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#" disabled="true">Another disabled action</abp-dropdown-item> |
|||
<abp-dropdown-item href="#">Something else here</abp-dropdown-item> |
|||
<abp-dropdown-divider /> |
|||
<abp-dropdown-item href="#">Separated link</abp-dropdown-item> |
|||
</abp-dropdown-menu> |
|||
</abp-dropdown> |
|||
</abp-nav-item> |
|||
<abp-nav-item> |
|||
<a abp-nav-link disabled="true" href="#">Disabled</a> |
|||
</abp-nav-item> |
|||
</abp-navbar-nav> |
|||
<span abp-navbar-text> |
|||
Sample Text |
|||
</span> |
|||
</abp-navbar-toggle> |
|||
</abp-nav-bar> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.NavsDemo |
|||
{ |
|||
[Widget] |
|||
public class NavsDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/NavsDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,16 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.PopoversDemo |
|||
|
|||
<abp-component-demo-section title="Example" view-path="@PopoversDemoViewComponent.ViewPath"> |
|||
<abp-button abp-popover="Hi, i'm popover content!"> |
|||
Popover Default |
|||
</abp-button> |
|||
<abp-button abp-popover-top="Hi, i'm popover content!" title="Popover Title"> |
|||
Popover With Title |
|||
</abp-button> |
|||
<abp-button abp-popover-right="Hi, i'm popover content!" title="Popover Title" dismissible="true"> |
|||
Dismissible Popover |
|||
</abp-button> |
|||
<abp-button abp-popover-left="Hi, i'm popover content!" title="Popover Title" disabled="true"> |
|||
Disabled Popover |
|||
</abp-button> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.PopoversDemo |
|||
{ |
|||
[Widget] |
|||
public class PopoversDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/PopoversDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,17 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ProgressBarsDemo |
|||
|
|||
<abp-component-demo-section title="Example" view-path="@ProgressBarsDemoViewComponent.ViewPath"> |
|||
<abp-progress-bar value="70" /> |
|||
|
|||
<abp-progress-bar type="Warning" value="25"> %25 </abp-progress-bar> |
|||
|
|||
<abp-progress-bar type="Success" value="40" strip="true" /> |
|||
|
|||
<abp-progress-bar type="Dark" value="10" min-value="5" max-value="15" strip="true"> %50 </abp-progress-bar> |
|||
|
|||
<abp-progress-group> |
|||
<abp-progress-part type="Success" value="25" /> |
|||
<abp-progress-part type="Danger" value="10" strip="true"> %10 </abp-progress-part> |
|||
<abp-progress-part type="Primary" value="50" animation="true" strip="true" /> |
|||
</abp-progress-group> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ProgressBarsDemo |
|||
{ |
|||
[Widget] |
|||
public class ProgressBarsDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/ProgressBarsDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,134 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.TablesDemo |
|||
|
|||
<abp-component-demo-section title="Example 1" view-path="@TablesDemoViewComponent.ViewPath"> |
|||
<abp-table hoverable-rows="true" responsive-sm="true"> |
|||
<thead> |
|||
<tr> |
|||
<th scope="Column">#</th> |
|||
<th scope="Column">First</th> |
|||
<th scope="Column">Last</th> |
|||
<th scope="Column">Handle</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<th scope="Row">1</th> |
|||
<td>Mark</td> |
|||
<td>Otto</td> |
|||
<td table-style="Danger">mdo</td> |
|||
</tr> |
|||
<tr table-style="Warning"> |
|||
<th scope="Row">2</th> |
|||
<td>Jacob</td> |
|||
<td>Thornton</td> |
|||
<td>fat</td> |
|||
</tr> |
|||
<tr> |
|||
<th scope="Row">3</th> |
|||
<td table-style="Success">Larry</td> |
|||
<td>the Bird</td> |
|||
<td>twitter</td> |
|||
</tr> |
|||
</tbody> |
|||
</abp-table> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Example 2" view-path="@TablesDemoViewComponent.ViewPath"> |
|||
<abp-table small="true" striped-rows="true" border-style="Bordered"> |
|||
<thead Theme="Dark"> |
|||
<tr> |
|||
<th scope="Column">#</th> |
|||
<th scope="Column">First</th> |
|||
<th scope="Column">Last</th> |
|||
<th scope="Column">Handle</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<th scope="Row">1</th> |
|||
<td>Mark</td> |
|||
<td>Otto</td> |
|||
<td>mdo</td> |
|||
</tr> |
|||
<tr> |
|||
<th scope="Row">2</th> |
|||
<td>Jacob</td> |
|||
<td>Thornton</td> |
|||
<td>fat</td> |
|||
</tr> |
|||
<tr> |
|||
<th scope="Row">3</th> |
|||
<td>Larry</td> |
|||
<td>the Bird</td> |
|||
<td>twitter</td> |
|||
</tr> |
|||
</tbody> |
|||
</abp-table> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Example 3" view-path="@TablesDemoViewComponent.ViewPath"> |
|||
<abp-table striped-rows="true" dark-theme="true"> |
|||
<caption>List of users</caption> |
|||
<thead> |
|||
<tr> |
|||
<th scope="Column">#</th> |
|||
<th scope="Column">First</th> |
|||
<th scope="Column">Last</th> |
|||
<th scope="Column">Handle</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<th scope="Row">1</th> |
|||
<td>Mark</td> |
|||
<td>Otto</td> |
|||
<td>mdo</td> |
|||
</tr> |
|||
<tr> |
|||
<th scope="Row">2</th> |
|||
<td>Jacob</td> |
|||
<td>Thornton</td> |
|||
<td>fat</td> |
|||
</tr> |
|||
<tr> |
|||
<th scope="Row">3</th> |
|||
<td>Larry</td> |
|||
<td>the Bird</td> |
|||
<td>twitter</td> |
|||
</tr> |
|||
</tbody> |
|||
</abp-table> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Example 4" view-path="@TablesDemoViewComponent.ViewPath"> |
|||
<abp-table border-style="Borderless"> |
|||
<thead> |
|||
<tr> |
|||
<th scope="Column">#</th> |
|||
<th scope="Column">First</th> |
|||
<th scope="Column">Last</th> |
|||
<th scope="Column">Handle</th> |
|||
</tr> |
|||
</thead> |
|||
<tbody> |
|||
<tr> |
|||
<th scope="Row">1</th> |
|||
<td>Mark</td> |
|||
<td>Otto</td> |
|||
<td>mdo</td> |
|||
</tr> |
|||
<tr> |
|||
<th scope="Row">2</th> |
|||
<td>Jacob</td> |
|||
<td>Thornton</td> |
|||
<td>fat</td> |
|||
</tr> |
|||
<tr> |
|||
<th scope="Row">3</th> |
|||
<td>Larry</td> |
|||
<td>the Bird</td> |
|||
<td>twitter</td> |
|||
</tr> |
|||
</tbody> |
|||
</abp-table> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.TablesDemo |
|||
{ |
|||
[Widget] |
|||
public class TablesDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/TablesDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,63 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.TabsDemo |
|||
|
|||
<abp-component-demo-section title="Example" view-path="@TabsDemoViewComponent.ViewPath"> |
|||
<abp-tabs> |
|||
<abp-tab title="Home"> |
|||
Content_Home |
|||
</abp-tab> |
|||
<abp-tab-link title="Link" href="#" /> |
|||
<abp-tab title="profile"> |
|||
Content_Profile |
|||
</abp-tab> |
|||
<abp-tab-dropdown title="Contact" name="ContactDropdown"> |
|||
<abp-tab title="Contact 1" parent-dropdown-name="ContactDropdown"> |
|||
Content_1_Content |
|||
</abp-tab> |
|||
<abp-tab title="Contact 2" parent-dropdown-name="ContactDropdown"> |
|||
Content_2_Content |
|||
</abp-tab> |
|||
</abp-tab-dropdown> |
|||
</abp-tabs> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Tab attributes" view-path="@TabsDemoViewComponent.ViewPath"> |
|||
<abp-tabs> |
|||
<abp-tab name="nav-home" title="Home"> |
|||
Content_Home |
|||
</abp-tab> |
|||
<abp-tab name="nav-profile" active="true" title="profile"> |
|||
Content_Profile |
|||
</abp-tab> |
|||
<abp-tab name="nav-contact" title="Contact"> |
|||
Content_Contact |
|||
</abp-tab> |
|||
</abp-tabs> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Pill Example" view-path="@TabsDemoViewComponent.ViewPath"> |
|||
<abp-tabs tab-style="Pill"> |
|||
<abp-tab title="Home"> |
|||
Content_Home |
|||
</abp-tab> |
|||
<abp-tab title="profile"> |
|||
Content_Profile |
|||
</abp-tab> |
|||
<abp-tab title="Contact"> |
|||
Content_Contact |
|||
</abp-tab> |
|||
</abp-tabs> |
|||
</abp-component-demo-section> |
|||
|
|||
<abp-component-demo-section title="Vertical Example" view-path="@TabsDemoViewComponent.ViewPath"> |
|||
<abp-tabs tab-style="PillVertical" vertical-header-size="_2"> |
|||
<abp-tab active="true" title="Home"> |
|||
Content_Home |
|||
</abp-tab> |
|||
<abp-tab title="profile"> |
|||
Content_Profile |
|||
</abp-tab> |
|||
<abp-tab title="Contact"> |
|||
Content_Contact |
|||
</abp-tab> |
|||
</abp-tabs> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.TabsDemo |
|||
{ |
|||
[Widget] |
|||
public class TabsDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/TabsDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,23 @@ |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.TooltipsDemo |
|||
|
|||
<abp-component-demo-section title="Example" view-path="@TooltipsDemoViewComponent.ViewPath"> |
|||
<abp-button abp-tooltip="Tooltip"> |
|||
Tooltip Default |
|||
</abp-button> |
|||
|
|||
<abp-button abp-tooltip-top="Tooltip"> |
|||
Tooltip on top |
|||
</abp-button> |
|||
|
|||
<abp-button abp-tooltip-right="Tooltip"> |
|||
Tooltip on right |
|||
</abp-button> |
|||
|
|||
<abp-button abp-tooltip-bottom="Tooltip"> |
|||
Tooltip on bottom |
|||
</abp-button> |
|||
|
|||
<abp-button disabled="true" abp-tooltip="Tooltip"> |
|||
Disabled button Tooltip |
|||
</abp-button> |
|||
</abp-component-demo-section> |
|||
@ -0,0 +1,16 @@ |
|||
using Microsoft.AspNetCore.Mvc; |
|||
using Volo.Abp.AspNetCore.Mvc.UI.Widgets; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.TooltipsDemo |
|||
{ |
|||
[Widget] |
|||
public class TooltipsDemoViewComponent : AbpViewComponent |
|||
{ |
|||
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/TooltipsDemo/Default.cshtml"; |
|||
|
|||
public IViewComponentResult Invoke() |
|||
{ |
|||
return View(ViewPath); |
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.AlertsDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Alerts.IndexModel |
|||
|
|||
<h2>Alerts</h2> |
|||
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/alerts/" target="_blank"> Bootstrap Alert</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(AlertsDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Alerts |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.BadgesDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Badges.IndexModel |
|||
|
|||
<h2>Badges</h2> |
|||
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/badge/" target="_blank"> Bootstrap Badge</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(BadgesDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Badges |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,15 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.BordersDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Borders.IndexModel |
|||
<h2>Borders</h2> |
|||
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/border/" target="_blank"> Bootstrap Border</a>.</p> |
|||
<style> |
|||
span { |
|||
display: inline-block; |
|||
width: 5rem; |
|||
height: 5rem; |
|||
margin: .25rem; |
|||
background-color: #f5f5f5; |
|||
} |
|||
</style> |
|||
@await Component.InvokeAsync(typeof(BordersDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Borders |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.BreadcrumbsDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Breadcrumbs.IndexModel |
|||
<h2>Breadcrumbs</h2> |
|||
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/breadcrumbs/" target="_blank"> Bootstrap Breadcrumb</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(BreadcrumbsDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Breadcrumbs |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ButtonGroupsDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.ButtonGroups.IndexModel |
|||
<h2>Button Groups</h2> |
|||
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/button-group/" target="_blank"> Bootstrap Button group</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(ButtonGroupsDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.ButtonGroups |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.CardsDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Cards.IndexModel |
|||
<h2>Cards</h2> |
|||
<p>Based on <a href="http://getbootstrap.com/docs/4.1/components/card/" target="_blank"> Bootstrap card</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(CardsDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Cards |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.CollapseDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Collapse.IndexModel |
|||
<h2>Collapse</h2> |
|||
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/collapse/" target="_blank"> Bootstrap Collapse</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(CollapseDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Collapse |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.DropdownsDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Dropdowns.IndexModel |
|||
<h2>Cards</h2> |
|||
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/dropdowns/" target="_blank"> Bootstrap button</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(DropdownsDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Dropdowns |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.GridsDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Grids.IndexModel |
|||
<h2>Grids</h2> |
|||
<p>Based on <a href="http://getbootstrap.com/docs/4.1/layout/grid/" target="_blank"> Bootstrap grid</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(GridsDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Grids |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ListGroupsDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.ListGroups.IndexModel |
|||
<h2>List Groups</h2> |
|||
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/list-group/" target="_blank"> Bootstrap List Group</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(ListGroupsDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.ListGroups |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ModalsDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Modals.IndexModel |
|||
<h2>Modals</h2> |
|||
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/modal/" target="_blank"> Bootstrap Modal</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(ModalsDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Modals |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.NavsDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Navs.IndexModel |
|||
<h2>Navs</h2> |
|||
<p><p>Based on <a href="https://getbootstrap.com/docs/4.1/components/navs/" target="_blank"> Bootstrap Navs</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(NavsDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Navs |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.PopoversDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Popovers.IndexModel |
|||
<h2>Popovers</h2> |
|||
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/Popovers/" target="_blank"> Bootstrap Popovers</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(PopoversDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Popovers |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ProgressBarsDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.ProgressBars.IndexModel |
|||
<h2>Progress Bars</h2> |
|||
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/progress/" target="_blank"> Bootstrap Progress Bars</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(ProgressBarsDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.ProgressBars |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.TablesDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Tables.IndexModel |
|||
<h2>Tables</h2> |
|||
<p><p>Based on <a href="https://getbootstrap.com/docs/4.1/content/Tables/" target="_blank"> Bootstrap Tables</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(TablesDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Tables |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.TabsDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Tabs.IndexModel |
|||
<h2>Tabs</h2> |
|||
<p>Based on <a href="http://getbootstrap.com/docs/4.1/components/navs/#tabs" target="_blank"> Bootstrap tab</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(TabsDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Tabs |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
@ -0,0 +1,7 @@ |
|||
@page |
|||
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.TooltipsDemo |
|||
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Tooltips.IndexModel |
|||
<h2>Tooltips</h2> |
|||
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/tooltips/" target="_blank"> Bootstrap Tooltips</a>.</p> |
|||
|
|||
@await Component.InvokeAsync(typeof(TooltipsDemoViewComponent)) |
|||
@ -0,0 +1,12 @@ |
|||
using Microsoft.AspNetCore.Mvc.RazorPages; |
|||
|
|||
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Tooltips |
|||
{ |
|||
public class IndexModel : PageModel |
|||
{ |
|||
public void OnGet() |
|||
{ |
|||
|
|||
} |
|||
} |
|||
} |
|||
Loading…
Reference in new issue