<template>
    <div class="ht-base-dropdown-second-group-demo">
        <ht-base-button class="ht-dropdown-button">
            下拉菜单
        </ht-base-button>
        <ht-base-dropdown placement="bottom-end">
            <ht-base-button class="ht-dropdown-icon" icon="LiRa_more"/>
            <ht-base-dropdown-menu slot="list">
                <ht-base-dropdown-item>
                    <ht-base-icon type='LiRa_user' />
                    驴打滚
                </ht-base-dropdown-item>
                <ht-base-dropdown-item>
                    <ht-base-icon type='LiRa_user' />
                    炸酱面
                </ht-base-dropdown-item>
                <ht-base-dropdown-item>
                    <ht-base-icon type='LiRa_user' />
                    豆汁儿
                </ht-base-dropdown-item>
                <ht-base-dropdown-item>
                    <ht-base-icon type='LiRa_user' />
                    冰糖葫芦
                </ht-base-dropdown-item>
                <ht-base-dropdown-item>
                    <ht-base-icon type='LiRa_user' />
                    北京烤鸭
                </ht-base-dropdown-item>
            </ht-base-dropdown-menu>
        </ht-base-dropdown>
    </div>
</template>

<script>
    export default {
        name: 'HtBaseDropdownSecondGroupDemo',
    }
</script>
<style lang="less">
    .ht-base-dropdown-second-group-demo {
        .ht-dropdown-button {
            float: left;
            border-top-right-radius: 0;
            border-bottom-right-radius: 0;
            position: relative;
        }

        .ht-dropdown-icon {
            border-top-left-radius: 0;
            border-bottom-left-radius: 0;
            margin-left: -1px;
        }

        .ht-dropdown-button:hover {
            z-index: 2;
        }

        .ht-base-button.ivu-btn {
            padding: 0 16px;
        }
    }
</style>

