imhven
/
abp
mirror of https://github.com/abpframework/abp
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

dropdown tag helper docs

Browse Source
pull/670/head
Yunus Emre Kalkan 6 years ago
parent 92f9f76663
commit a933bb705b
2 changed files with 705 additions and 51 deletions
Show Stats Download Patch File Download Diff File

741
framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml
Unescape View File

@ -10,111 +10,750 @@
</abp-style-bundle>
}
@section scripts {
<abp-script-bundle>
@*<abp-script src="/libs/highlight.js/lib/highlight.js" />
<abp-script src="/Pages/Components/highlightCode.js" />*@
</abp-script-bundle>
}
<link rel="stylesheet"
href="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/styles/default.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.13.1/highlight.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<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>
<h4>Single button</h4>
<div class="demo-with-code">
<div class="demo-area">
<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>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-dropdown&gt;
&lt;abp-dropdown-button text=&quot;Dropdown button&quot; /&gt;
&lt;abp-dropdown-menu&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Another action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;dropdown&quot;&gt;
&lt;button class=&quot;btn btn-secondary dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButton&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
Dropdown button
&lt;/button&gt;
&lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<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>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-dropdown&gt;
&lt;abp-dropdown-button button-type=&quot;Secondary&quot; link=&quot;true&quot; text=&quot;Dropdown button&quot; /&gt;
&lt;abp-dropdown-menu&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Another action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;dropdown&quot;&gt;
&lt;a class=&quot;btn btn-secondary dropdown-toggle&quot; href=&quot;#&quot; role=&quot;button&quot; id=&quot;dropdownMenuLink&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
Dropdown link
&lt;/a&gt;
&lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuLink&quot;&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<abp-dropdown>
<abp-dropdown-button button-type="Primary" text="Dropdown" />
<abp-dropdown-button button-type="Success" text="Dropdown button" />
<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="#">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 button-type="Outline_Success" 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-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-dropdown>
<abp-dropdown-button button-type="Outline_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>
</div>
<div class="code-area">
<pre>
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;!-- Example single danger button --&gt;
&lt;abp-dropdown&gt;
&lt;abp-dropdown-button button-type=&quot;Primary&quot; text=&quot;Dropdown&quot;/&gt;
&lt;abp-dropdown-menu&gt;
&lt;abp-dropdown-header&gt;Dropdown header&lt;/abp-dropdown-header&gt;
&lt;abp-dropdown-item href=&quot;#&quot; active=&quot;true&quot;&gt;Action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Another disabled action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-divider/&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-button button-type=&quot;Danger&quot; text=&quot;Dropdown button&quot; /&gt;
&lt;abp-dropdown-menu&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Another action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-divider /&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</pre>
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;!-- Example single danger button --&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
Action
&lt;/button&gt;
&lt;div class=&quot;dropdown-menu&quot;&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
&lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Separated link&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4># Split Dropdown Example</h4>
<h4>Split button</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>
<abp-dropdown-button button-type="Outline_Warning" dropdown-style="Split" text="Dropdown button" />
<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="#">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 button-type="Warning" 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-dropdown>
<abp-dropdown-button button-type="Primary" 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-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>
</div>
<div class="code-area">
<pre>
&lt;abp-dropdown direction=&quot;Right&quot;&gt;
&lt;abp-dropdown-button dropdown-style=&quot;Split&quot; button-type=&quot;Danger&quot; text=&quot;Dropdown&quot;/&gt;
&lt;abp-dropdown-menu&gt;
&lt;abp-dropdown-header&gt;Dropdown header&lt;/abp-dropdown-header&gt;
&lt;abp-dropdown-item href=&quot;#&quot; active=&quot;true&quot;&gt;Action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Another disabled action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-divider/&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;!-- Example single danger button --&gt;
&lt;abp-dropdown&gt;
&lt;abp-dropdown-button button-type=&quot;Danger&quot; dropdown-style=&quot;Split&quot; text=&quot;Dropdown button&quot; /&gt;
&lt;abp-dropdown-menu&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Another action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-divider /&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</pre>
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;!-- Example single danger button --&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;Action&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger dropdown-toggle dropdown-toggle-split&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Toggle Dropdown&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;dropdown-menu&quot;&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Another action&lt;/a&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
&lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Separated link&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4># Link Dropdown Example</h4>
<h4>Split button</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>
<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>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;!-- Example single danger button --&gt;
&lt;abp-dropdown&gt;
&lt;abp-dropdown-button size=&quot;Large&quot; button-type=&quot;Secondary&quot; text=&quot;Large button&quot; /&gt;
&lt;abp-dropdown-menu&gt;
...
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
&lt;abp-dropdown&gt;
&lt;abp-dropdown-button size=&quot;Large&quot; button-type=&quot;Secondary&quot; dropdown-style=&quot;Split&quot; text=&quot;Large split button&quot; /&gt;
&lt;abp-dropdown-menu&gt;
...
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
&lt;abp-dropdown&gt;
&lt;abp-dropdown-button size=&quot;Small&quot; button-type=&quot;Secondary&quot; text=&quot;Small button&quot; /&gt;
&lt;abp-dropdown-menu&gt;
...
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
&lt;abp-dropdown&gt;
&lt;abp-dropdown-button size=&quot;Small&quot; button-type=&quot;Secondary&quot; dropdown-style=&quot;Split&quot; text=&quot;Small split button&quot; /&gt;
&lt;abp-dropdown-menu&gt;
...
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;!-- Large button groups (default and split) --&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button class=&quot;btn btn-secondary btn-lg dropdown-toggle&quot; type=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
Large button
&lt;/button&gt;
&lt;div class=&quot;dropdown-menu&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button class=&quot;btn btn-secondary btn-lg&quot; type=&quot;button&quot;&gt;
Large split button
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-lg btn-secondary dropdown-toggle dropdown-toggle-split&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Toggle Dropdown&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;dropdown-menu&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;!-- Small button groups (default and split) --&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button class=&quot;btn btn-secondary btn-sm dropdown-toggle&quot; type=&quot;button&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
Small button
&lt;/button&gt;
&lt;div class=&quot;dropdown-menu&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button class=&quot;btn btn-secondary btn-sm&quot; type=&quot;button&quot;&gt;
Small split button
&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-sm btn-secondary dropdown-toggle dropdown-toggle-split&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Toggle Dropdown&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;dropdown-menu&quot;&gt;
...
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4>Directions</h4>
<div class="demo-with-code">
<div class="demo-area">
<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>
</div>
<div class="code-area">
<pre>
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-dropdown direction=&quot;Up&quot;&gt;
&lt;abp-dropdown-button Link=&quot;true&quot; button-type=&quot;Primary&quot; text=&quot;Dropdown&quot;/&gt;
&lt;abp-dropdown-menu align=&quot;Right&quot;&gt;
&lt;abp-dropdown-header&gt;Dropdown header&lt;/abp-dropdown-header&gt;
&lt;abp-dropdown-item href=&quot;#&quot; active=&quot;true&quot;&gt;Action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot; disabled=&quot;true&quot;&gt;Another disabled action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-divider/&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Separated link&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropup&quot; /&gt;
&lt;abp-dropdown-menu&gt;
...
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
&lt;abp-dropdown direction=&quot;Right&quot;&gt;
&lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;dropright&quot; /&gt;
&lt;abp-dropdown-menu&gt;
...
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
&lt;abp-dropdown direction=&quot;Right&quot;&gt;
&lt;abp-dropdown-button button-type=&quot;Secondary&quot; dropdown-style=&quot;Split&quot; text=&quot;Split right&quot; /&gt;
&lt;abp-dropdown-menu&gt;
...
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;btn-group dropup&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
Dropup
&lt;/button&gt;
&lt;div class=&quot;dropdown-menu&quot;&gt;
&lt;!-- Dropdown menu links --&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-group dropright&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
dropright
&lt;/button&gt;
&lt;div class=&quot;dropdown-menu&quot;&gt;
&lt;!-- Dropdown menu links --&gt;
&lt;/div&gt;
&lt;/div&gt;
&lt;div class=&quot;btn-group dropright&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger&quot;&gt;Action&lt;/button&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-danger dropdown-toggle dropdown-toggle-split&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
&lt;span class=&quot;sr-only&quot;&gt;Split right&lt;/span&gt;
&lt;/button&gt;
&lt;div class=&quot;dropdown-menu&quot;&gt;
&lt;!-- Dropdown menu links --&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4>Menu Items</h4>
<div class="demo-with-code">
<div class="demo-area">
<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>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-dropdown&gt;
&lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropdown&quot;/&gt;
&lt;abp-dropdown-menu&gt;
&lt;abp-dropdown-header&gt;Dropdown Header&lt;/abp-dropdown-header&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item active=&quot;true&quot; href=&quot;#&quot;&gt;Active action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item disabled=&quot;true&quot; href=&quot;#&quot;&gt;Disabled action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-divider/&gt;
&lt;abp-dropdown-item-text&gt;Dropdown Item Text&lt;/abp-dropdown-item-text&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Something else here&lt;/abp-dropdown-item&gt;
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;dropdown&quot;&gt;
&lt;button class=&quot;btn btn-secondary dropdown-toggle&quot; type=&quot;button&quot; id=&quot;dropdownMenuButton&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
Dropdown button
&lt;/button&gt;
&lt;div class=&quot;dropdown-menu&quot; aria-labelledby=&quot;dropdownMenuButton&quot;&gt;
&lt;h6 class=&quot;dropdown-header&quot;&gt;Dropdown Header&lt;/h6&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Action&lt;/a&gt;
&lt;a class=&quot;dropdown-item active&quot; href=&quot;#&quot;&gt;Active action&lt;/a&gt;
&lt;a class=&quot;dropdown-item disabled&quot; href=&quot;#&quot;&gt;Disabled action&lt;/a&gt;
&lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
&lt;span class=&quot;dropdown-item-text&quot;&gt;Dropdown item text&lt;/span&gt;
&lt;a class=&quot;dropdown-item&quot; href=&quot;#&quot;&gt;Something else here&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4>Menu alignment</h4>
<div class="demo-with-code">
<div class="demo-area">
<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>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-dropdown&gt;
&lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Right-aligned&quot;/&gt;
&lt;abp-dropdown-menu align=&quot;Right&quot;&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item active=&quot;true&quot; href=&quot;#&quot;&gt;Active action&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item disabled=&quot;true&quot; href=&quot;#&quot;&gt;Disabled action&lt;/abp-dropdown-item&gt;
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</pre>
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
Right-aligned
&lt;/button&gt;
&lt;div class=&quot;dropdown-menu dropdown-menu-right&quot;&gt;
&lt;button class=&quot;dropdown-item&quot; type=&quot;button&quot;&gt;Action&lt;/button&gt;
&lt;button class=&quot;dropdown-item&quot; type=&quot;button&quot;&gt;Another action&lt;/button&gt;
&lt;button class=&quot;dropdown-item&quot; type=&quot;button&quot;&gt;Something else here&lt;/button&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<h4>Custom Content</h4>
<div class="demo-with-code">
<div class="demo-area">
<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>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Tag Helper">
<pre><code>
&lt;abp-dropdown&gt;
&lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropdown With Only Text&quot; /&gt;
&lt;abp-dropdown-menu class=&quot;p-4&quot; style=&quot;max-width: 200px;&quot;&gt;
&lt;p&gt;
Some example text that&apos;s free-flowing within the dropdown menu.
&lt;/p&gt;
&lt;p class=&quot;mb-0&quot;&gt;
And this is more example text.
&lt;/p&gt;
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button type=&quot;button&quot; class=&quot;btn btn-secondary dropdown-toggle&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot;&gt;
Dropdown With Only Text
&lt;/button&gt;
&lt;div class=&quot;dropdown-menu p-4&quot; style=&quot;max-width: 200px;&quot;&gt;
&lt;p&gt;
Some example text that&apos;s free-flowing within the dropdown menu.
&lt;/p&gt;
&lt;p class=&quot;mb-0&quot;&gt;
And this is more example text.
&lt;/p&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>
<div class="demo-with-code">
<div class="demo-area">
<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>
</div>
<div class="code-area">
<abp-tabs>
<abp-tab title="Model Class">
<pre><code>
public class DropdownsModel : PageModel
{
[Required]
[DataType(DataType.EmailAddress)]
[Display(Name = "Email Address")]
public string EmailAddress { get; set; }
[Required]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password{ get; set; }
[Display(Name = "Remember Me")]
public bool RememberMe{ get; set; }
public void OnGet()
{
}
}
</code></pre>
</abp-tab>
<abp-tab title="Tag Helper" active="true">
<pre><code>
&lt;abp-dropdown &gt;
&lt;abp-dropdown-button button-type=&quot;Secondary&quot; text=&quot;Dropdown With Form&quot;/&gt;
&lt;abp-dropdown-menu&gt;
&lt;form class=&quot;px-4 py-3&quot;&gt;
&lt;abp-input asp-for=&quot;EmailAddress&quot;&gt;&lt;/abp-input&gt;
&lt;abp-input asp-for=&quot;Password&quot;&gt;&lt;/abp-input&gt;
&lt;abp-input asp-for=&quot;RememberMe&quot;&gt;&lt;/abp-input&gt;
&lt;abp-button button-type=&quot;Primary&quot; text=&quot;Sign In&quot; type=&quot;submit&quot; /&gt;
&lt;/form&gt;
&lt;abp-dropdown-divider&gt;&lt;/abp-dropdown-divider&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;New around here? Sign up&lt;/abp-dropdown-item&gt;
&lt;abp-dropdown-item href=&quot;#&quot;&gt;Forgot password?&lt;/abp-dropdown-item&gt;
&lt;/abp-dropdown-menu&gt;
&lt;/abp-dropdown&gt;
</code></pre>
</abp-tab>
<abp-tab title="Rendered">
<pre><code>
&lt;div class=&quot;btn-group&quot;&gt;
&lt;button class=&quot;dropdown-toggle btn btn-secondary&quot; data-toggle=&quot;dropdown&quot; aria-haspopup=&quot;true&quot; aria-expanded=&quot;false&quot; type=&quot;button&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Dropdown With Form&lt;/span&gt;&lt;/button&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div class=&quot;dropdown-menu&quot; x-placement=&quot;bottom-start&quot; style=&quot;position: absolute; will-change: transform; top: 0px; left: 0px; transform: translate3d(0px, 38px, 0px);&quot;&gt;
&lt;form class=&quot;px-4 py-3&quot; novalidate=&quot;novalidate&quot;&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;EmailAddress&quot;&gt;Email Address&lt;/label&gt;
&lt;input type=&quot;email&quot; data-val=&quot;true&quot; data-val-required=&quot;The Email Address field is required.&quot; id=&quot;EmailAddress&quot; name=&quot;EmailAddress&quot; value=&quot;&quot; class=&quot;form-control input-validation-error&quot; aria-describedby=&quot;EmailAddress-error&quot;&gt;
&lt;span class=&quot;text-danger field-validation-error&quot; data-valmsg-for=&quot;EmailAddress&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;span id=&quot;EmailAddress-error&quot; class=&quot;&quot;&gt;The Email Address field is required.&lt;/span&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;form-group&quot;&gt;
&lt;label for=&quot;Password&quot;&gt;Password&lt;/label&gt;
&lt;input type=&quot;password&quot; data-val=&quot;true&quot; data-val-required=&quot;The Password field is required.&quot; id=&quot;Password&quot; name=&quot;Password&quot; class=&quot;form-control input-validation-error&quot; aria-describedby=&quot;Password-error&quot;&gt;
&lt;span class=&quot;text-danger field-validation-error&quot; data-valmsg-for=&quot;Password&quot; data-valmsg-replace=&quot;true&quot;&gt;&lt;span id=&quot;Password-error&quot; class=&quot;&quot;&gt;The Password field is required.&lt;/span&gt;&lt;/span&gt;
&lt;/div&gt;
&lt;div class=&quot;form-check&quot;&gt;
&lt;input type=&quot;checkbox&quot; data-val=&quot;true&quot; data-val-required=&quot;The Remember Me field is required.&quot; id=&quot;RememberMe&quot; name=&quot;RememberMe&quot; value=&quot;true&quot; class=&quot;form-check-input valid&quot; aria-describedby=&quot;RememberMe-error&quot;&gt;
&lt;label class=&quot;form-check-label&quot; for=&quot;RememberMe&quot;&gt;Remember Me&lt;/label&gt;
&lt;/div&gt;
&lt;button type=&quot;submit&quot; class=&quot;btn btn-primary&quot; data-busy-text=&quot;Processing...&quot;&gt;&lt;span&gt;Sign In&lt;/span&gt;&lt;/button&gt;
&lt;input name=&quot;RememberMe&quot; type=&quot;hidden&quot; value=&quot;false&quot;&gt;
&lt;/form&gt;
&lt;div class=&quot;dropdown-divider&quot;&gt;&lt;/div&gt;
&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;New around here? Sign up&lt;/a&gt;
&lt;a href=&quot;#&quot; class=&quot;dropdown-item&quot;&gt;Forgot password?&lt;/a&gt;
&lt;/div&gt;
&lt;/div&gt;
</code></pre>
</abp-tab>
</abp-tabs>
</div>
</div>

15
framework/test/Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo/Pages/Components/Dropdowns.cshtml.cs
Unescape View File

@ -1,5 +1,6 @@
using System;
using System.Collections.Generic;
using System.ComponentModel.DataAnnotations;
using System.Linq;
using System.Threading.Tasks;
using Microsoft.AspNetCore.Mvc;
@ -9,6 +10,20 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.Demo.Pages.Components
{
public class DropdownsModel : PageModel
{
[Required]
[DataType(DataType.EmailAddress)]
[Display(Name = "Email Address")]
public string EmailAddress { get; set; }
[Required]
[DataType(DataType.Password)]
[Display(Name = "Password")]
public string Password{ get; set; }
[Display(Name = "Remember Me")]
public bool RememberMe{ get; set; }
public void OnGet()
{

Write Preview
Loading…
Cancel
Save