pull/2974/head
mehmet-erim 6 years ago
commit 3aeb63d698

@ -123,4 +123,4 @@ The startup template includes the **identity management** and **tenant managemen
### What's Next?
* [Application development tutorial](Tutorials/Part-1.md?UI=NG)
* [Application development tutorial](Tutorials/Part-1)

@ -101,4 +101,4 @@ The startup template includes the **identity management** and **tenant managemen
### What's Next?
* [Application development tutorial](Tutorials/Part-1.md?UI=MVC)
* [Application development tutorial](Tutorials/Part-1.md)

@ -134,7 +134,7 @@
</abp-blockquote>
</abp-card-body>
</abp-card>
<abp-card class="text-center w-50">
<abp-card class="text-center w-50">
<abp-card-header>Featured</abp-card-header>
<abp-card-body>
<abp-card-title> Special title treatment</abp-card-title>
@ -169,6 +169,83 @@
</abp-card>
</abp-component-demo-section>
<abp-component-demo-section title="Image overlays" view-path="@CardsDemoViewComponent.ViewPath">
<abp-card>
<img abp-card-image="Top" src="https://via.placeholder.com/1150x270.png?text=Image+cap" />
<div class="card-img-overlay">
<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>
</div>
</abp-card>
</abp-component-demo-section>
<abp-component-demo-section title="Border" view-path="@CardsDemoViewComponent.ViewPath">
<abp-card class="border-primary mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body class="text-primary">
<abp-card-title>Primary 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-card>
<abp-card class="border-secondary mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body class="text-secondary">
<abp-card-title>Secondary 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-card>
<abp-card class="border-success mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body class="text-success">
<abp-card-title>Success 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-card>
<abp-card class="border-danger mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body class="text-danger">
<abp-card-title>Danger 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-card>
<abp-card class="border-warning mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body class="text-warning">
<abp-card-title>Warning 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-card>
<abp-card class="border-info mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body class="text-info">
<abp-card-title>Info 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-card>
<abp-card class="border-light mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body>
<abp-card-title>Light 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-card>
<abp-card class="border-dark mb-3" style="width: 18rem;">
<abp-card-header>Header</abp-card-header>
<abp-card-body class="text-dark">
<abp-card-title>Dark 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-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>

@ -18,7 +18,7 @@
</abp-list-group>
</abp-component-demo-section>
<abp-component-demo-section title="Links and buttons" view-path="@ListGroupsDemoViewComponent.ViewPath">
<abp-component-demo-section title="Links" 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>
@ -27,12 +27,12 @@
</abp-list-group>
</abp-component-demo-section>
<abp-component-demo-section title="Links and buttons 2" view-path="@ListGroupsDemoViewComponent.ViewPath">
<abp-component-demo-section title="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-item tag-type="Button" active="true">Cras justo odio</abp-list-group-item>
<abp-list-group-item tag-type="Button">Dapibus ac facilisis in</abp-list-group-item>
<abp-list-group-item tag-type="Button">Morbi leo risus</abp-list-group-item>
<abp-list-group-item tag-type="Button" disabled="true">Vestibulum at eros</abp-list-group-item>
</abp-list-group>
</abp-component-demo-section>
@ -59,7 +59,7 @@
</abp-list-group>
</abp-component-demo-section>
<abp-component-demo-section title="Contextual classes 2" view-path="@ListGroupsDemoViewComponent.ViewPath">
<abp-component-demo-section title="Contextual classes with link" 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>

@ -0,0 +1,71 @@
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.NavbarsDemo
<abp-component-demo-section title="Example" view-path="@NavbarsDemoViewComponent.ViewPath">
<abp-nav-bar size="Lg" navbar-style="Dark_Dark">
<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>
<abp-component-demo-section title="Example" view-path="@NavbarsDemoViewComponent.ViewPath">
<abp-nav-bar size="Lg" navbar-style="Dark_Primary">
<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.NavbarsDemo
{
[Widget]
public class NavbarsDemoViewComponent : AbpViewComponent
{
public const string ViewPath = "/Views/Components/Themes/Shared/Demos/NavbarsDemo/Default.cshtml";
public IViewComponentResult Invoke()
{
return View(ViewPath);
}
}
}

@ -8,6 +8,16 @@
<abp-nav-item>
<a abp-nav-link href="#">Longer nav link</a>
</abp-nav-item>
<abp-nav-item class="dropdown">
<abp-dropdown>
<abp-dropdown-button class="text-primary" 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-nav-item>
<abp-nav-item>
<a abp-nav-link href="#">link</a>
</abp-nav-item>
@ -17,37 +27,104 @@
</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 title="Alignment" view-path="@NavsDemoViewComponent.ViewPath">
<abp-nav nav-style="Pill" align="Start">
<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 class="dropdown">
<abp-dropdown>
<abp-dropdown-button class="text-primary" 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-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-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 class="dropdown">
<abp-dropdown>
<abp-dropdown-button class="text-primary" 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-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-nav nav-style="Pill" align="End">
<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 class="dropdown">
<abp-dropdown>
<abp-dropdown-button class="text-primary" 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-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="Vertical" view-path="@NavsDemoViewComponent.ViewPath">
<abp-nav nav-style="PillVertical" align="Start">
<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 class="dropdown">
<abp-dropdown>
<abp-dropdown-button class="text-primary" 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-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>

@ -1,16 +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!">
<abp-button button-type="Outline_Secondary" abp-popover="Hi, i'm popover content!">
Popover Default
</abp-button>
<abp-button abp-popover-top="Hi, i'm popover content!" title="Popover Title">
<abp-button button-type="Outline_Secondary" 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">
<abp-button button-type="Outline_Secondary" 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">
<abp-button button-type="Outline_Danger" abp-popover-left="Hi, i'm popover content!" title="Popover Title" disabled="true">
Disabled Popover
</abp-button>
</abp-component-demo-section>

@ -1,4 +1,5 @@
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Volo.Abp.UI.Navigation;
@ -38,6 +39,7 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo
new ApplicationMenuItem("BasicThemeDemo.Components.ListGroups", "List Groups", url: "/Components/ListGroups"),
new ApplicationMenuItem("BasicThemeDemo.Components.Modals", "Modals", url: "/Components/Modals"),
new ApplicationMenuItem("BasicThemeDemo.Components.Navs", "Navs", url: "/Components/Navs"),
new ApplicationMenuItem("BasicThemeDemo.Components.Navbars", "Navbars", url: "/Components/Navbars"),
new ApplicationMenuItem("BasicThemeDemo.Components.Paginator", "Paginator", url: "/Components/Paginator"),
new ApplicationMenuItem("BasicThemeDemo.Components.Popovers", "Popovers", url: "/Components/Popovers"),
new ApplicationMenuItem("BasicThemeDemo.Components.ProgressBars", "Progress Bars", url: "/Components/ProgressBars"),
@ -45,8 +47,10 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo
new ApplicationMenuItem("BasicThemeDemo.Components.Tabs", "Tabs", url: "/Components/Tabs"),
new ApplicationMenuItem("BasicThemeDemo.Components.Tooltips", "Tooltips", url: "/Components/Tooltips")
};
items.ForEach(x => menuItem.AddItem(x));
items.OrderBy(x => x.Name)
.ToList()
.ForEach(x => menuItem.AddItem(x));
context.Menu.AddItem(menuItem);
}

@ -1,7 +1,6 @@
@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>

@ -1,7 +1,6 @@
@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>

@ -2,5 +2,6 @@
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.ButtonsDemo
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Buttons.IndexModel
<h1>Buttons</h1>
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/buttons/" target="_blank"> Bootstrap Buttons</a>.</p>
@await Component.InvokeAsync(typeof(ButtonsDemoViewComponent))

@ -0,0 +1,7 @@
@page
@using Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.Demos.NavbarsDemo
@model Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo.Pages.Components.Modals.IndexModel
<h2>Navbars</h2>
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/navbar/" target="_blank"> Bootstrap Navbar</a>.</p>
@await Component.InvokeAsync(typeof(NavbarsDemoViewComponent))

@ -0,0 +1,17 @@
using System;
using System.Collections.Generic;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
using Microsoft.AspNetCore.Mvc.RazorPages;
namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo
{
public class IndexModel : PageModel
{
public void OnGet()
{
}
}
}

@ -2,6 +2,6 @@
@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>
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/navs/" target="_blank"> Bootstrap Navs</a>.</p>
@await Component.InvokeAsync(typeof(NavsDemoViewComponent))

@ -2,6 +2,6 @@
@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>
<p>Based on <a href="https://getbootstrap.com/docs/4.1/content/Tables/" target="_blank"> Bootstrap Tables</a>.</p>
@await Component.InvokeAsync(typeof(TablesDemoViewComponent))
Loading…
Cancel
Save