<template>
    <div class="ht-base-menu-demo">
        <ht-base-menu  v-if="theme1 !== 'transparent'" mode="horizontal" :theme="theme1" active-name="5-1">
                <ht-base-menu-item name="1">
                    <ht-base-icon type='LiRa_telephone' size=14 />
                    顶部导航菜单
                </ht-base-menu-item>
                <ht-base-menu-item name="2">
                    <ht-base-icon type='LiRa_comment' size=14 />
                    顶部导航菜单
                </ht-base-menu-item>
                <ht-base-submenu name="3">
                <span slot="title">
                  <ht-base-icon type='LiRa_user' size=14 />
                  顶部导航菜单
                </span>
                    <ht-base-menu-group title="标题">
                        <ht-base-menu-item name="3-1">导航菜单3-1</ht-base-menu-item>
                        <ht-base-menu-item name="3-2">导航菜单3-2</ht-base-menu-item>
                    </ht-base-menu-group>
                    <ht-base-menu-group title="标题">
                        <ht-base-menu-item name="3-3" disabled>导航菜单3-3</ht-base-menu-item>
                    </ht-base-menu-group>
                </ht-base-submenu>
                <ht-base-menu-item name="4">
                    顶部导航菜单
                </ht-base-menu-item>
                <ht-base-submenu name="5">
                <span slot="title" class="submenu-title-wrapper">
                  顶部导航菜单
                </span>
                    <ht-base-menu-item name="5-1">导航菜单5-1</ht-base-menu-item>
                    <ht-base-menu-item name="5-2">导航菜单5-2</ht-base-menu-item>
                    <ht-base-menu-item name="5-3" disabled>导航菜单5-3</ht-base-menu-item>
                </ht-base-submenu>
            </ht-base-menu>
        <ht-base-menu v-else mode="horizontal" transparent active-name="5-1">
            <ht-base-menu-item name="1">
                <ht-base-icon type='LiRa_telephone' size=14 />
                顶部导航菜单
            </ht-base-menu-item>
            <ht-base-menu-item name="2">
                <ht-base-icon type='LiRa_comment' size=14 />
                顶部导航菜单
            </ht-base-menu-item>
            <ht-base-submenu name="3">
                <span slot="title">
                  <ht-base-icon type='LiRa_user' size=14 />
                  顶部导航菜单
                </span>
                <ht-base-menu-group title="标题">
                    <ht-base-menu-item name="3-1">导航菜单3-1</ht-base-menu-item>
                    <ht-base-menu-item name="3-2">导航菜单3-2</ht-base-menu-item>
                </ht-base-menu-group>
                <ht-base-menu-group title="标题">
                    <ht-base-menu-item name="3-3" disabled>导航菜单3-3</ht-base-menu-item>
                </ht-base-menu-group>
            </ht-base-submenu>
            <ht-base-menu-item name="4">
                顶部导航菜单
            </ht-base-menu-item>
            <ht-base-submenu name="5">
                <span slot="title" class="submenu-title-wrapper">
                  顶部导航菜单
                </span>
                <ht-base-menu-item name="5-1">导航菜单5-1</ht-base-menu-item>
                <ht-base-menu-item name="5-2">导航菜单5-2</ht-base-menu-item>
                <ht-base-menu-item name="5-3" disabled>导航菜单5-3</ht-base-menu-item>
            </ht-base-submenu>
        </ht-base-menu>
        <br>
        <p>改变主题色</p>
        <ht-base-radio-group v-model="theme1">
            <ht-base-radio label="light"><span>浅色</span></ht-base-radio>
            <ht-base-radio label="dark"><span>深色</span></ht-base-radio>
            <ht-base-radio label="primary"><span>主题色</span></ht-base-radio>
            <ht-base-radio label="transparent"><span>透明色</span></ht-base-radio>
        </ht-base-radio-group>
    </div>
</template>
<script>
    export default {
        name: 'HtBaseMenuDemo',
        data() {
            return {
                theme1: 'light'
            }
        }
    }
</script>
<style lang="less">
    .ht-base-menu-demo {
        .ht-base-menu-theme-transparent {
            background-image: url(http://39.106.250.14:8082/base-components/static/doc_header_bg.png);
            background-size: contain;
        }
    }
</style>
