【Vaadin flow 实战】第5讲-使用常用UI组件绘制页面元素

vaadin flow官方提供的UI组件文档地址是

https://vaadin.com/docs/latest/components

这里，我简单实战了官方提供的一些免费的UI组件，使用案例如下：

Accordion 手风琴

Accordion 手风琴效果组件

Accordion 手风琴-测试案例代码

@Slf4j
@PageTitle("HelpViewPage")
@Route(value = "helpView",layout = MainLayout.class)
@Menu(order = 5, icon = LineAwesomeIconUrl.FILE)
public class HelpView extends VerticalLayout{
   
   
    public HelpView() {
   
   
        Span s1 = new Span("手风琴");
        Accordion accordion = displayAccordion();
        add(s1,accordion);
    }
    private Accordion displayAccordion(){
   
   
        Accordion accordion = new Accordion();
        Span name = new Span("Sophia Williams");
        Span email = new Span("sophia.williams@company.com");
        Span phone = new Span("(501) 555-9128");
        VerticalLayout accordionItemLayout = new VerticalLayout(name,
                email, phone);
        accordionItemLayout.setSpacing(false);
        accordionItemLayout.setPadding(false);
        accordion.add("Personal information", accordionItemLayout);
        Span name2 = new Span("4027 Amber Lake Canyon");
        Span email2 = new Span("72333-5884 Cozy Nook");
        Span phone2 = new Span("Arkansas");
        VerticalLayout accordionItemLayout2 = new VerticalLayout(name2, email2, phone2);
        accordionItemLayout2.setSpacing(false);
        accordionItemLayout2.setPadding(false);
        accordion.add("Billing Address", accordionItemLayout2);
        return accordion;
    }
}

Avatar 头像

Avatar 头像

Avatar 头像-测试案例代码

@Slf4j
@PageTitle("HelpViewPage")
@Route(value = "helpView",layout = MainLayout.class)
@Menu(order = 5, icon = LineAwesomeIconUrl.FILE)
public class HelpView extends VerticalLayout{
   
   
    public HelpView() {
   
   
        Span s2 = new Span("Avatar 头像");
        Avatar avatarBasic = new Avatar();
        Avatar avatarName = new Avatar("TEST");

        AvatarGroup avatarGroup = new AvatarGroup();
        for (Country country : getCountries()) {
   
   
            String name = country.getName();
            AvatarGroup.AvatarGroupItem avatar = new AvatarGroup.AvatarGroupItem(name);
            avatarGroup.add(avatar);
        }

        Avatar userAvatar = new Avatar();
        userAvatar.setImage("https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80");
        add(s2,avatarBasic, avatarName,avatarGroup,userAvatar);
    }
 
}

Badge 徽章

Badge 徽章-测试案例代码

@Slf4j
@PageTitle("HelpViewPage")
@Route(value = "helpView",layout = MainLayout.class)
@Menu(order = 5, icon = LineAwesomeIconUrl.FILE)
public class HelpView extends VerticalLayout{
   
   
    public HelpView() {
   
   
           Span s3 = new Span("Badge 徽章");
        Span pending = new Span("Pending");
        pending.getElement().getThemeList().add("badge");
        Span confirmed = new Span("Confirmed");
        confirmed.getElement().getThemeList().add("badge success");
        Span denied = new Span("Denied");
        denied.getElement().getThemeList().add("badge error");
        Span onHold = new Span("On hold");
        onHold.getElement().getThemeList().add("badge contrast");
        HorizontalLayout hLayout = new HorizontalLayout(pending, confirmed, denied, onHold);

        // Icon before text
        Span pending1 = new Span(createIcon(VaadinIcon.CLOCK),
                new Span("Pending"));
        pending1.getElement().getThemeList().add("badge");
// Icon after text
        Span pending2 = new Span(new Span("Pending"),
                createIcon(VaadinIcon.CLOCK));
        pending2.getElement().getThemeList().add("badge");
        HorizontalLayout h2Layout = new HorizontalLayout(pending1, pending2);
        add(s3,hLayout,h2Layout);
    }
 
}

Button 按钮

Button 按钮-测试案例代码

@Slf4j
@PageTitle("HelpViewPage")
@Route(value = "helpView",layout = MainLayout.class)
@Menu(order = 5, icon = LineAwesomeIconUrl.FILE)
public class HelpView extends VerticalLayout{
   
   
    public HelpView() {
   
   
       Span s4 = new Span("Button");

        Button primaryButton = new Button("Primary");
        primaryButton.addThemeVariants(ButtonVariant.LUMO_PRIMARY);
        Button secondaryButton = new Button("Secondary");
        Button tertiaryButton = new Button("Tertiary");
        tertiaryButton.addThemeVariants(ButtonVariant.LUMO_TERTIARY);
        HorizontalLayout h3Layout = new HorizontalLayout(primaryButton, secondaryButton,tertiaryButton);

        Button primaryButton2 = new Button("Primary");
        primaryButton2.addThemeVariants(ButtonVariant.LUMO_PRIMARY, ButtonVariant.LUMO_ERROR);
        Button secondaryButton2 = new Button("Secondary");
        secondaryButton2.addThemeVariants(ButtonVariant.LUMO_ERROR);
        Button tertiaryButton2 = new Button("Tertiary");
        tertiaryButton2.addThemeVariants(ButtonVariant.LUMO_TERTIARY, ButtonVariant.LUMO_ERROR);
        HorizontalLayout h4Layout = new HorizontalLayout(primaryButton2, secondaryButton2,tertiaryButton2);

        Button primaryButton3 = new Button("Primary");
        primaryButton3.addThemeVariants(ButtonVariant.LUMO_PRIMARY,
                ButtonVariant.LUMO_WARNING);
        Button secondaryButton3 = new Button("Secondary");
        secondaryButton3.addThemeVariants(ButtonVariant.LUMO_WARNING);
        Button tertiaryButton3 = new Button("Tertiary");
        tertiaryButton3.addThemeVariants(ButtonVariant.LUMO_TERTIARY,
                ButtonVariant.LUMO_WARNING);
        HorizontalLayout h5Layout = new HorizontalLayout(primaryButton3, secondaryButton3,tertiaryButton3);

        Button largeButton = new Button("Large");
        largeButton.addThemeVariants(ButtonVariant.LUMO_LARGE);
        Button normalButton = new Button("Normal");
        Button smallButton = new Button("Small");
        smallButton.addThemeVariants(ButtonVariant.LUMO_SMALL);
        HorizontalLayout h6Layout = new HorizontalLayout(largeButton, normalButton,smallButton);

        add(s4,h3Layout,h4Layout,h5Layout,h6Layout);
    }
 
}

CheckboxGroup 多选框

CheckboxGroup 多选框-测试案例代码

@Slf4j
@PageTitle("HelpViewPage")
@Route(value = "helpView",layout = MainLayout.class)
@Menu(order = 5, icon = LineAwesomeIconUrl.FILE)
public class HelpView extends VerticalLayout{
   
   
    public HelpView() {
   
   
        Span s5 = new Span("CheckboxGroup-demo");
        CheckboxGroup<String> checkboxGroup = new CheckboxGroup<>();
        checkboxGroup.setLabel("Export data");
        checkboxGroup.setItems("Order ID", "Product name", "Customer",
                "Status");
        checkboxGroup.select("Order ID", "Customer");
        checkboxGroup.addThemeVariants(CheckboxGroupVariant.LUMO_VERTICAL);
        // 添加值改变事件监听器
        checkboxGroup.addValueChangeListener(event -> {
   
   
            // 处理选择的值
            Set<String> selectedValues = event.getValue();
            // 这里可以添加逻辑，比如更新 UI 或处理数据
            log.info("选中的checkbox:{}"