在Vaadin 13搞“鲁磨紧凑模式”,后来,对于较小尺寸的布局

罗勒布尔克:

为Vaadin 13的发行说明包括项目鲁磨紧凑模式该何况还有短暂的,缺乏细节。去引用:

紧凑的主题/预设限定用于施胶值和间隔性质以减少组件所需的,以更好地适合在屏幕上的大量内容的视觉空间。这是鲁磨特有的功能,并且可以通过导入预设文件的应用程序启用。

如何打开我Vaadin 14 web应用程序这个紧凑的模式?

罗勒布尔克:

添加两个注解:@JsModule@Theme

我发现这个教程,更多的文档主题和造型在Vaadin在Vaadin.com现场,由Jouni Koivuviita。请参阅使用全局变型>紧凑

添加三个进口:

import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.theme.Theme;
import com.vaadin.flow.theme.lumo.Lumo;

添加两个注解:

@JsModule ("@vaadin/vaadin-lumo-styles/presets/compact.js")
@Theme ( Lumo.class)

引述教程:

从技术上讲,它增加了一个<style>元素,用于设置新值的页面鲁磨大小和间距CSS属性您可以从源代码查看值

欲了解更多的技术细节,包括受影响的CSS属性的列表,请参阅教程,第一个链接:紧凑预设鲁磨风格演示站点。而看到实际的代码在第二个环节,GitHub的页面:vaadin-LUMO的样式/预置/ compact.html

这身打扮到演示类。我们正在修改MainView由Vaadin.com在新项目中生成的类项目启动页面,为Vaadin 17年1月14日。

package work.basil.example;

import com.vaadin.flow.component.Key;
import com.vaadin.flow.component.button.Button;
import com.vaadin.flow.component.button.ButtonVariant;
import com.vaadin.flow.component.dependency.CssImport;
import com.vaadin.flow.component.dependency.JsModule;
import com.vaadin.flow.component.notification.Notification;
import com.vaadin.flow.component.orderedlayout.VerticalLayout;
import com.vaadin.flow.component.select.Select;
import com.vaadin.flow.component.textfield.TextField;
import com.vaadin.flow.router.Route;
import com.vaadin.flow.server.PWA;
import com.vaadin.flow.theme.Theme;
import com.vaadin.flow.theme.lumo.Lumo;


/**
 * The main view contains a button and a click listener.
 */
@JsModule ( "@vaadin/vaadin-lumo-styles/presets/compact.js" )
@Theme ( Lumo.class )
@Route ( "" )
@PWA ( name = "Project Base for Vaadin", shortName = "Project Base" )
@CssImport ( "./styles/shared-styles.css" )
@CssImport ( value = "./styles/vaadin-text-field-styles.css", themeFor = "vaadin-text-field" )
public class MainView extends VerticalLayout
{
    enum Animal { DOG, CAT, BIRD, HAMSTER } ;

    public MainView ( )
    {
        // Use TextField for standard text input
        TextField textField = new TextField( "Your name" );

        // Button click listeners can be defined as lambda expressions
        GreetService greetService = new GreetService();
        Button button = new Button( "Say hello" ,
                e -> Notification.show( greetService.greet( textField.getValue() ) ) );

        // Theme variants give you predefined extra styles for components.
        // Example: Primary button is more prominent look.
        button.addThemeVariants( ButtonVariant.LUMO_PRIMARY );

        // You can specify keyboard shortcuts for buttons.
        // Example: Pressing enter in this view clicks the Button.
        button.addClickShortcut( Key.ENTER );

        // Use custom CSS classes to apply styling. This is defined in shared-styles.css.
        this.addClassName( "centered-content" );


        Select < Animal > animalSelect = new Select <>();
        animalSelect.setItems( Animal.values() );
        this.add( animalSelect , new TextField( "Bogus1" ) , new TextField( "Bogus2" ) , new TextField( "Bogus3" ) , new TextField( "Bogus4" ) , textField , button );
    }
}

下面是结果与嵌入式Jetty服务器微软边缘v 80.0.361.57客户在MacOS莫哈韦10.14.6运行时。

示出两个浏览器窗口上面的代码的屏幕截图,每个渲染具有和不具有以上示出所得到的微件和它们的间距两者的降低所讨论的两个注解。

您是否需要标注你的UI类的每一个或只是我不明白的MainView.java我猜你必须注解每一个UI类。

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

来自分类Dev

Vaadin布局调整大小重叠

来自分类Dev

Vaadin布局使用CSS flex-box?

来自分类Java

如何布局vaadin对话的组成部分?

来自分类Java

Vaadin:如何添加3个嵌套布局

来自分类Java

在Vaadin 13(流程1)了兼容性模式,而不是在Vaadin 14弹簧引导应用程序运行

来自分类Java

在Vaadin Flow中的布局内居中小部件

来自分类Java

为什么在Vaadin流14的布局按钮突出?

来自分类Java

是否可以通过标记Vaadin中的布局来获取组件?

来自分类Java

我怎样才能在Vaadin 14停用移动模式?

来自分类Java

Vaadin与Bootstrap

来自分类Dev

了解Vaadin流程/ Vaadin 10

来自分类Java

如何设置在Vaadin一个图像组件的尺寸,并保持纵横比

来自分类Dev

如何在Vaadin8组合框中获取商品尺寸?

来自分类Dev

加载一个PNG图像文件,作为图像对象显示在Vaadin Flow布局上

来自分类Dev

使用Vaadin Flow网络应用处理登录,全局所有布局以及“路线” URL的登录

来自分类Java

如何设置vaadin布局的宽度,并且仍然使内部组件占用所需的空间?

来自分类Dev

“水平布局”中的Vaadin网格无法填充屏幕,并且弹性增长无法正常工作

来自分类Java

如何将滚动条添加到Vaadin布局

来自分类Dev

如何将视图(子级)插入父级布局的div中?Vaadin 10 /流

来自分类Java

获得从网格的所有项目与目前的过滤器,并在Vaadin 13分选中的应用

来自分类Java

如何阻止vaadin窃取所有url模式(并与spring mvc完美配合)

来自分类Java

Vaadin + Spring Boot生产模式构建出现运行时错误:无法确定“ npm”工具

来自分类Dev

创建没有Vaadin插件的Vaadin项目

来自分类Java

使Vaadin流部分的标题

来自分类Java

Vaadin-响应柱

来自分类Java

Vaadin电网领域的编号

来自分类Java

Vaadin和ZK的比较

来自分类Dev

Vaadin如何工作?

来自分类Dev

调整Vaadin图像大小

TOP 榜单

  1. 1

    来自Microsoft Office加载项taskpane.js的MySQL驱动程序模块的空引用

  2. 2

    HikariPool-1-连接不可用,对于极小的负载服务器,请求在30000ms之后超时

  3. 3

    OpenJDK的和AdoptOpenJDK的区别

  4. 4

    任务':app:minifyReleaseWithR8'.java.lang.NullPointerException的执行失败(无错误消息)

  5. 5

    是什么在Android的consumer-rules.pro和proguard-rules.pro之间的区别?

  6. 6

    java.lang.NoClassDefFoundError:无法初始化类org.bytedeco.javacpp.avutil

  7. 7

    如何优化在Java中这种方法吗?我得到的时间超限

  8. 8

    java.lang.NoSuchFieldError的:ACCEPT_CASE_INSENSITIVE_VALUES

  9. 9

    Keras提前停止回调错误,val_loss指标不可用

  10. 10

    错误TS1086:一个存取器不能在角9的环境上下文被声明

  11. 11

    如何在exoplayer中播放本地媒体文件的硬编码内容uri

  12. 12

    请问Spring事务管理工作与Spring WebFlux?

  13. 13

    在JavaScript中删除多个对象键值

  14. 14

    tensorflow:仅在可用val_acc的情况下可以保存最佳模型,跳过

  15. 15

    未定义:grpc.SupportPackageIsVersion7 grpc.ServiceRegistrar

  16. 16

    在IntelliJ IDEA中并行运行测试用例

  17. 17

    无法装载动态库“libnvinfer.so.6”

  18. 18

    我在android studio中创建了clicker应用。但是,运行时,应用程序在调用“ incrementCount()”后崩溃。为什么?

  19. 19

    Java的无法解析日期的SimpleDateFormat

  20. 20

    如何在Python中将字典拆分成多个字典的列表,所有字典的大小均为N

  21. 21

    如何在“ SQLyog社区版-Mysql GUI”中添加检查约束?

热门标签

归档