mirror of https://github.com/abpframework/abp
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
5.0 KiB
115 lines
5.0 KiB
@page
|
|
@model Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components.DropdownsModel
|
|
@{
|
|
ViewData["Title"] = "Dropdowns";
|
|
}
|
|
|
|
<h2>Dropdowns</h2>
|
|
|
|
<p>Based on <a href="https://getbootstrap.com/docs/4.1/components/dropdowns/" target="_blank"> Bootstrap button</a>.</p>
|
|
|
|
<h4># Dropdown Example</h4>
|
|
|
|
<div class="demo-with-code">
|
|
<div class="demo-area">
|
|
|
|
<abp-dropdown>
|
|
<abp-dropdown-button button-type="Primary" 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>
|
|
|
|
</div>
|
|
<div class="code-area">
|
|
<pre>
|
|
<abp-dropdown>
|
|
<abp-dropdown-button button-type="Primary" 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>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h4># Split Dropdown Example</h4>
|
|
|
|
<div class="demo-with-code">
|
|
<div class="demo-area">
|
|
|
|
<abp-dropdown direction="Right">
|
|
<abp-dropdown-button dropdown-style="Split" button-type="Danger" 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>
|
|
|
|
</div>
|
|
<div class="code-area">
|
|
<pre>
|
|
<abp-dropdown direction="Right">
|
|
<abp-dropdown-button dropdown-style="Split" button-type="Danger" 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>
|
|
</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<h4># Link Dropdown Example</h4>
|
|
|
|
<div class="demo-with-code">
|
|
<div class="demo-area">
|
|
|
|
<abp-dropdown direction="Up">
|
|
<abp-dropdown-button Link="true" button-type="Primary" text="Dropdown"/>
|
|
<abp-dropdown-menu align="Right">
|
|
<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>
|
|
|
|
</div>
|
|
<div class="code-area">
|
|
<pre>
|
|
<abp-dropdown direction="Up">
|
|
<abp-dropdown-button Link="true" button-type="Primary" text="Dropdown"/>
|
|
<abp-dropdown-menu align="Right">
|
|
<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>
|
|
</pre>
|
|
</div>
|
|
</div>
|