"頂部菜單"組件: —— 快應用組件庫H-UI



頂部菜單一直懸停快應用頁面頂部：







<import name="top-menu" src="../Common/ui/h-ui/navigation/c_top_menu"></import>
<import name="news-detail" src="../Common/ui/h-ui/scene/c_news_detail"></import>
<template>
    <div class="container" style="margin-top:80px;">
        <top-menu data="{{data}}"></top-menu>
        <news-detail title="H-UI——做體驗最好的快應用UI庫" creator="H-UI" creation-time="2020/3/15 10:23" data="{{data2}}"></news-detail>
    </div>
</template>

<style lang="less">
    @import '../Common/styles/container.less';
</style>

<script>
    export default {
        private: {
            data: [
                [
                    {
                        label: "字體圖標",
                        uri: "Basic_Icon"
                    },
                    {
                        label: "Flex彈性布局",
                        uri: "Basic_Flex"
                    },
                    {
                        label: "顏色樣式",
                        uri: "Basic_Color"
                    },
                    {
                        label: "字體樣式",
                        uri: "Basic_Font"
                    },
                    {
                        label: "文字鏈接",
                        uri: "Basic_Link"
                    },
                    {
                        label: "按鈕",
                        uri: "Basic_Button"
                    },
                    {
                        label: "浮動按鈕",
                        uri: "Basic_Fab"
                    }
                ],
                [
                    {
                        label: "進度條",
                        uri: "Chart_Progress"
                    },
                    {
                        label: "折線圖",
                        uri: "Chart_Line"
                    },
                    {
                        label: "柱狀圖",
                        uri: "Chart_Bar"
                    },
                    {
                        label: "餅狀圖/環形圖/玫瑰圖",
                        uri: "Chart_Pie"
                    },
                    {
                        label: "漏斗圖/金字塔",
                        uri: "Chart_Funnel"
                    },
                    {
                        label: "散點圖/氣泡圖/時鍾圖",
                        uri: "Chart_Scatter"
                    },
                    {
                        label: "雷達圖",
                        uri: "Chart_Radar"
                    }
                ]
            ],
            data2:[{
                type: "text",
                value: "h-ui是一套為快應用開發者量身打制的UI組件庫，以傳統html5標簽為基礎，遵循主流前端框架樣式命名習慣，對快應用原生組件二次封裝而成，以實現快應用“全組件式開發”為目標，讓快應用開發就像搭積木！"
            },{
                type: "image",
                value: "https://h-ui.obs.cn-south-1.myhuaweicloud.com/image/p_news_four_p1.png"
            },{
                type: "text",
                value: "h-ui是一套為快應用開發者量身打制的UI組件庫，以傳統html5標簽為基礎，遵循主流前端框架樣式命名習慣，對快應用原生組件二次封裝而成，以實現快應用“全組件式開發”為目標，讓快應用開發就像搭積木！"
            }]
        }
    }
</script>

掃碼體驗