gpt4 book ai didi

css - 在 Vaadin 中创建侧边栏或垂直菜单

转载 作者:技术小花猫 更新时间:2023-10-29 10:20:19 25 4
gpt4 key购买 nike

如何在 Vaadin 中创建 VerticalMenuSidebar?是否有任何特定组件或我是否以编程方式和使用 CSS 进行操作?

我想创建类似 Vaadin Demo 的东西:

enter image description here

我正在使用新的 Valo 主题。

最佳答案

为了能够为您的应用程序创建响应式行为,您必须使用 CSS。就像 Zigac 提到的 Vaadin 已经为某些组件编写了一些样式(比如我们这里的菜单),但你最终会想应用更多...

查看新的 Dashboard demo具有 Valo 主题和响应能力!这是一个更全面的组件样式示例,并实现了与 Valo Theme Demo 相同的逻辑。可以查看源码here

基本上它所做的是创建一个 menu作为 CustomComponent,内容区域作为 CssLayout。每当在菜单中单击组件时,它都会调用 MainView 的内容区域中的相应 View 。

例如,其中一个 View 是 DashboardView这是用户看到的第一个 View 。这是一个带有响应式组件的响应式 VerticalLayout。

您可以查看不同 View 的样式技术(在 Sass 中)here

下面是一些代码片段:

MainView.java

public class MainView extends HorizontalLayout {

public MainView() {
//This is the root of teh application it
//extends a HorizontalLayout
setSizeFull();
addStyleName("mainview");

//here we add the Menu component
addComponent(new DashboardMenu());

//add the content area and style
ComponentContainer content = new CssLayout();
content.addStyleName("view-content");
content.setSizeFull();
addComponent(content);

setExpandRatio(content, 1.0f);

new DashboardNavigator(content);
}
}

DashboardMenu.java

public DashboardMenu() {
addStyleName("valo-menu");
setSizeUndefined();
DashboardEventBus.register(this);

//add components to the menu (buttons, images..etc)
setCompositionRoot(buildContent());
}

DashboardView.java

public DashboardView() {
addStyleName(ValoTheme.PANEL_BORDERLESS);
setSizeFull();
DashboardEventBus.register(this);

root = new VerticalLayout();
root.setSizeFull();
root.setMargin(true);
root.addStyleName("dashboard-view");
setContent(root);

//this allows you to use responsive styles
//on the root element
Responsive.makeResponsive(root);

//build your dashboard view
root.addComponent(buildHeader());

root.addComponent(buildSparklines());

Component content = buildContent();
root.addComponent(content);

//set the content area position on screen
root.setExpandRatio(content, 1);
...

这是样式表中的样式名称“dashboard-view”

dashboardview.scss

@mixin dashboard-dashboard-view {

.dashboard-view.dashboard-view {
//Styles for all devices
padding: $view-padding;
overflow: visible;

.sparks {
@include valo-panel-style;
margin-bottom: round($view-padding / 3);

//styles for a tablet
@include width-range($max: 680px) {
.spark {
width: 50%;
}
.spark:nth-child(2n+1) {
border-left: none;
}
.spark:nth-child(n+3) {
border-top: valo-border($strength: 0.3);
}
}
...

关于css - 在 Vaadin 中创建侧边栏或垂直菜单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26503520/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com