Vaadin 汉堡选单 - AppLayout - day16

Web 应用程序选单多样化，早期最常见的多半树状选单，直至手机问世後汉堡选单（hamburger menu）成为主流，除了具有可收合特性外，网页也会被内 Mobile App 内嵌，许多内容异动性高的纯资料展示，也多半选择采用网页内嵌 APP 以 WebView 方式展现。最符合手机显示的网页选单非汉堡选单莫属，适合手机、平板、电脑等各种平台使用。

在 Vaadin 要使用汉堡选单非常的容易。承前例，我们将在最外层 Layout MainLayout.kt 放置选单。

private val root = ui {
    appLayout {
        primarySection = AppLayout.Section.DRAWER
        val img = Image("https://i.imgur.com/GPpnszs.png", "Vaadin Logo")
        img.height = "44px"
        addToNavbar(DrawerToggle(), img)
        val tabs = Tabs(
            Tab(RouterLink("Home",MainView::class.java)),
            Tab(RouterLink("Students", AllStudentsView::class.java))
        )
        tabs.orientation = Tabs.Orientation.VERTICAL
        addToDrawer(tabs)
    }

}

这样就大功告成了。只要画面layout使用MainLayout，即会显示选单

@Route("", layout = MainLayout::class)