Skip to content

aliceui/button-dropdown

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

36 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

ButtonDropdown


按钮下拉菜单样式。


演示

<a class="ui-button ui-button-lorange ui-dbutton ui-dbutton-orange">
    <span class="ui-dbutton-self">下拉菜单</span>
    <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
</a>
<a class="ui-button ui-button-morange ui-dbutton ui-dbutton-orange">
    <span class="ui-dbutton-self">下拉菜单</span>
    <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
</a>
<a class="ui-button ui-button-sorange ui-dbutton ui-dbutton-orange">
    <span class="ui-dbutton-self">下拉菜单</span>
    <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
</a>
<a class="ui-button ui-button-lwhite ui-dbutton ui-dbutton-white">
    <span class="ui-dbutton-self">下拉菜单</span>
    <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
</a>
<a class="ui-button ui-button-mwhite ui-dbutton ui-dbutton-white">
    <span class="ui-dbutton-self">下拉菜单</span>
    <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
</a>
<a class="ui-button ui-button-swhite ui-dbutton ui-dbutton-white">
    <span class="ui-dbutton-self">下拉菜单</span>
    <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
</a>
<style> .ui-button-dropdown { height: 120px; } </style>
<div class="ui-button-dropdown">
    <a class="ui-button ui-button-lorange ui-dbutton ui-dbutton-orange">
        <span class="ui-dbutton-self">下拉菜单</span>
        <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
    </a>
    <ul class="ui-button-dropdown-large">
        <li class="ui-button-dropdown-item">
            <a href="#">设置代扣</a>
        </li>
        <li class="ui-button-dropdown-item">
            <a href="#">标为已缴</a>
        </li>   
    </ul>
</div>

<div class="ui-button-dropdown">
    <a class="ui-button ui-button-morange ui-dbutton ui-dbutton-orange">
        <span class="ui-dbutton-self">下拉菜单</span>
        <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
    </a>
    <ul class="ui-button-dropdown-middle">
        <li class="ui-button-dropdown-item">
            <a href="#">设置代扣</a>
        </li>
        <li class="ui-button-dropdown-item">
            <a href="#">标为已缴</a>
        </li>   
    </ul>
</div>

<div class="ui-button-dropdown">
    <a class="ui-button ui-button-sorange ui-dbutton ui-dbutton-orange">
        <span class="ui-dbutton-self">下拉菜单</span>
        <i class="ui-dbutton-arrow iconfont" title="下三角形">&#xF03C;</i>
    </a>
    <ul class="ui-button-dropdown-small">
        <li class="ui-button-dropdown-item">
            <a href="#">设置代扣</a>
        </li>
        <li class="ui-button-dropdown-item">
            <a href="#">标为已缴</a>
        </li>   
    </ul>
</div>