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

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

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

Accordion 手风琴

Accordion 手风琴效果组件

Accordion 手风琴-测试案例代码

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
        <span class="token class-name">Spanspan> s1 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"手风琴"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Accordionspan> accordion <span class="token operator">=span> <span class="token function">displayAccordionspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token function">addspan><span class="token punctuation">(span>s1<span class="token punctuation">,span>accordion<span class="token punctuation">)span><span class="token punctuation">;span>
    <span class="token punctuation">}span>
    <span class="token keyword">privatespan> <span class="token class-name">Accordionspan> <span class="token function">displayAccordionspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">{span>
        <span class="token class-name">Accordionspan> accordion <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Accordionspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Spanspan> name <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"Sophia Williams"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Spanspan> email <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"sophia.williams@company.com"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Spanspan> phone <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"(501) 555-9128"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">VerticalLayoutspan> accordionItemLayout <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">(span>name<span class="token punctuation">,span>
                email<span class="token punctuation">,span> phone<span class="token punctuation">)span><span class="token punctuation">;span>
        accordionItemLayout<span class="token punctuation">.span><span class="token function">setSpacingspan><span class="token punctuation">(span><span class="token boolean">falsespan><span class="token punctuation">)span><span class="token punctuation">;span>
        accordionItemLayout<span class="token punctuation">.span><span class="token function">setPaddingspan><span class="token punctuation">(span><span class="token boolean">falsespan><span class="token punctuation">)span><span class="token punctuation">;span>
        accordion<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span><span class="token string">"Personal information"span><span class="token punctuation">,span> accordionItemLayout<span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Spanspan> name2 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"4027 Amber Lake Canyon"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Spanspan> email2 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"72333-5884 Cozy Nook"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Spanspan> phone2 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"Arkansas"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">VerticalLayoutspan> accordionItemLayout2 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">(span>name2<span class="token punctuation">,span> email2<span class="token punctuation">,span> phone2<span class="token punctuation">)span><span class="token punctuation">;span>
        accordionItemLayout2<span class="token punctuation">.span><span class="token function">setSpacingspan><span class="token punctuation">(span><span class="token boolean">falsespan><span class="token punctuation">)span><span class="token punctuation">;span>
        accordionItemLayout2<span class="token punctuation">.span><span class="token function">setPaddingspan><span class="token punctuation">(span><span class="token boolean">falsespan><span class="token punctuation">)span><span class="token punctuation">;span>
        accordion<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span><span class="token string">"Billing Address"span><span class="token punctuation">,span> accordionItemLayout2<span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token keyword">returnspan> accordion<span class="token punctuation">;span>
    <span class="token punctuation">}span>
<span class="token punctuation">}span>

Avatar 头像

Avatar 头像

Avatar 头像-测试案例代码

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
        <span class="token class-name">Spanspan> s2 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"Avatar 头像"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Avatarspan> avatarBasic <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Avatarspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Avatarspan> avatarName <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Avatarspan><span class="token punctuation">(span><span class="token string">"TEST"span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">AvatarGroupspan> avatarGroup <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">AvatarGroupspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token keyword">forspan> <span class="token punctuation">(span><span class="token class-name">Countryspan> country <span class="token operator">:span> <span class="token function">getCountriesspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span> <span class="token punctuation">{span>
            <span class="token class-name">Stringspan> name <span class="token operator">=span> country<span class="token punctuation">.span><span class="token function">getNamespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">AvatarGroup<span class="token punctuation">.span>AvatarGroupItemspan> avatar <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">AvatarGroup<span class="token punctuation">.span>AvatarGroupItemspan><span class="token punctuation">(span>name<span class="token punctuation">)span><span class="token punctuation">;span>
            avatarGroup<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>avatar<span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span>

        <span class="token class-name">Avatarspan> userAvatar <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Avatarspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        userAvatar<span class="token punctuation">.span><span class="token function">setImagespan><span class="token punctuation">(span><span class="token string">"https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token function">addspan><span class="token punctuation">(span>s2<span class="token punctuation">,span>avatarBasic<span class="token punctuation">,span> avatarName<span class="token punctuation">,span>avatarGroup<span class="token punctuation">,span>userAvatar<span class="token punctuation">)span><span class="token punctuation">;span>
    <span class="token punctuation">}span>
 
<span class="token punctuation">}span>

Badge 徽章

Badge 徽章-测试案例代码

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
           <span class="token class-name">Spanspan> s3 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"Badge 徽章"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Spanspan> pending <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"Pending"span><span class="token punctuation">)span><span class="token punctuation">;span>
        pending<span class="token punctuation">.span><span class="token function">getElementspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">getThemeListspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span><span class="token string">"badge"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Spanspan> confirmed <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"Confirmed"span><span class="token punctuation">)span><span class="token punctuation">;span>
        confirmed<span class="token punctuation">.span><span class="token function">getElementspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">getThemeListspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span><span class="token string">"badge success"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Spanspan> denied <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"Denied"span><span class="token punctuation">)span><span class="token punctuation">;span>
        denied<span class="token punctuation">.span><span class="token function">getElementspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">getThemeListspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span><span class="token string">"badge error"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Spanspan> onHold <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"On hold"span><span class="token punctuation">)span><span class="token punctuation">;span>
        onHold<span class="token punctuation">.span><span class="token function">getElementspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">getThemeListspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span><span class="token string">"badge contrast"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">HorizontalLayoutspan> hLayout <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">HorizontalLayoutspan><span class="token punctuation">(span>pending<span class="token punctuation">,span> confirmed<span class="token punctuation">,span> denied<span class="token punctuation">,span> onHold<span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token comment">// Icon before textspan>
        <span class="token class-name">Spanspan> pending1 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token function">createIconspan><span class="token punctuation">(span><span class="token class-name">VaadinIconspan><span class="token punctuation">.span><span class="token constant">CLOCKspan><span class="token punctuation">)span><span class="token punctuation">,span>
                <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"Pending"span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        pending1<span class="token punctuation">.span><span class="token function">getElementspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">getThemeListspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span><span class="token string">"badge"span><span class="token punctuation">)span><span class="token punctuation">;span>
<span class="token comment">// Icon after textspan>
        <span class="token class-name">Spanspan> pending2 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"Pending"span><span class="token punctuation">)span><span class="token punctuation">,span>
                <span class="token function">createIconspan><span class="token punctuation">(span><span class="token class-name">VaadinIconspan><span class="token punctuation">.span><span class="token constant">CLOCKspan><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        pending2<span class="token punctuation">.span><span class="token function">getElementspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">getThemeListspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span><span class="token string">"badge"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">HorizontalLayoutspan> h2Layout <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">HorizontalLayoutspan><span class="token punctuation">(span>pending1<span class="token punctuation">,span> pending2<span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token function">addspan><span class="token punctuation">(span>s3<span class="token punctuation">,span>hLayout<span class="token punctuation">,span>h2Layout<span class="token punctuation">)span><span class="token punctuation">;span>
    <span class="token punctuation">}span>
 
<span class="token punctuation">}span>

Button 按钮

Button 按钮-测试案例代码

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
       <span class="token class-name">Spanspan> s4 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"Button"span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">Buttonspan> primaryButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Primary"span><span class="token punctuation">)span><span class="token punctuation">;span>
        primaryButton<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_PRIMARYspan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Buttonspan> secondaryButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Secondary"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Buttonspan> tertiaryButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Tertiary"span><span class="token punctuation">)span><span class="token punctuation">;span>
        tertiaryButton<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_TERTIARYspan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">HorizontalLayoutspan> h3Layout <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">HorizontalLayoutspan><span class="token punctuation">(span>primaryButton<span class="token punctuation">,span> secondaryButton<span class="token punctuation">,span>tertiaryButton<span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">Buttonspan> primaryButton2 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Primary"span><span class="token punctuation">)span><span class="token punctuation">;span>
        primaryButton2<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_PRIMARYspan><span class="token punctuation">,span> <span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_ERRORspan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Buttonspan> secondaryButton2 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Secondary"span><span class="token punctuation">)span><span class="token punctuation">;span>
        secondaryButton2<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_ERRORspan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Buttonspan> tertiaryButton2 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Tertiary"span><span class="token punctuation">)span><span class="token punctuation">;span>
        tertiaryButton2<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_TERTIARYspan><span class="token punctuation">,span> <span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_ERRORspan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">HorizontalLayoutspan> h4Layout <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">HorizontalLayoutspan><span class="token punctuation">(span>primaryButton2<span class="token punctuation">,span> secondaryButton2<span class="token punctuation">,span>tertiaryButton2<span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">Buttonspan> primaryButton3 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Primary"span><span class="token punctuation">)span><span class="token punctuation">;span>
        primaryButton3<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_PRIMARYspan><span class="token punctuation">,span>
                <span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_WARNINGspan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Buttonspan> secondaryButton3 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Secondary"span><span class="token punctuation">)span><span class="token punctuation">;span>
        secondaryButton3<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_WARNINGspan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Buttonspan> tertiaryButton3 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Tertiary"span><span class="token punctuation">)span><span class="token punctuation">;span>
        tertiaryButton3<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_TERTIARYspan><span class="token punctuation">,span>
                <span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_WARNINGspan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">HorizontalLayoutspan> h5Layout <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">HorizontalLayoutspan><span class="token punctuation">(span>primaryButton3<span class="token punctuation">,span> secondaryButton3<span class="token punctuation">,span>tertiaryButton3<span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">Buttonspan> largeButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Large"span><span class="token punctuation">)span><span class="token punctuation">;span>
        largeButton<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_LARGEspan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Buttonspan> normalButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Normal"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Buttonspan> smallButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Small"span><span class="token punctuation">)span><span class="token punctuation">;span>
        smallButton<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_SMALLspan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">HorizontalLayoutspan> h6Layout <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">HorizontalLayoutspan><span class="token punctuation">(span>largeButton<span class="token punctuation">,span> normalButton<span class="token punctuation">,span>smallButton<span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token function">addspan><span class="token punctuation">(span>s4<span class="token punctuation">,span>h3Layout<span class="token punctuation">,span>h4Layout<span class="token punctuation">,span>h5Layout<span class="token punctuation">,span>h6Layout<span class="token punctuation">)span><span class="token punctuation">;span>
    <span class="token punctuation">}span>
 
<span class="token punctuation">}span>

CheckboxGroup 多选框

CheckboxGroup 多选框-测试案例代码

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
        <span class="token class-name">Spanspan> s5 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"CheckboxGroup-demo"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">CheckboxGroupspan><span class="token generics"><span class="token punctuation"><span><span class="token class-name">Stringspan><span class="token punctuation">>span>span> checkboxGroup <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">CheckboxGroupspan><span class="token generics"><span class="token punctuation"><span><span class="token punctuation">>span>span><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        checkboxGroup<span class="token punctuation">.span><span class="token function">setLabelspan><span class="token punctuation">(span><span class="token string">"Export data"span><span class="token punctuation">)span><span class="token punctuation">;span>
        checkboxGroup<span class="token punctuation">.span><span class="token function">setItemsspan><span class="token punctuation">(span><span class="token string">"Order ID"span><span class="token punctuation">,span> <span class="token string">"Product name"span><span class="token punctuation">,span> <span class="token string">"Customer"span><span class="token punctuation">,span>
                <span class="token string">"Status"span><span class="token punctuation">)span><span class="token punctuation">;span>
        checkboxGroup<span class="token punctuation">.span><span class="token function">selectspan><span class="token punctuation">(span><span class="token string">"Order ID"span><span class="token punctuation">,span> <span class="token string">"Customer"span><span class="token punctuation">)span><span class="token punctuation">;span>
        checkboxGroup<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">CheckboxGroupVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_VERTICALspan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token comment">// 添加值改变事件监听器span>
        checkboxGroup<span class="token punctuation">.span><span class="token function">addValueChangeListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token comment">// 处理选择的值span>
            <span class="token class-name">Setspan><span class="token generics"><span class="token punctuation"><span><span class="token class-name">Stringspan><span class="token punctuation">>span>span> selectedValues <span class="token operator">=span> event<span class="token punctuation">.span><span class="token function">getValuespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token comment">// 这里可以添加逻辑，比如更新 UI 或处理数据span>
            log<span class="token punctuation">.span><span class="token function">infospan><span class="token punctuation">(span><span class="token string">"选中的checkbox:{}"span><span class="token punctuation">,span>selectedValues<span class="token punctuation">.span><span class="token function">toStringspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
       
        <span class="token function">addspan><span class="token punctuation">(span>s5<span class="token punctuation">,span>checkboxGroup<span class="token punctuation">)span><span class="token punctuation">;span>
    <span class="token punctuation">}span>
 
<span class="token punctuation">}span>

ComboBox 组合框(下拉框)

ComboBox 组合框-测试案例代码

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
        <span class="token class-name">Spanspan> s6 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"ComboBox"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">ComboBoxspan><span class="token generics"><span class="token punctuation"><span><span class="token class-name">Countryspan><span class="token punctuation">>span>span> countryComboBox <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">ComboBoxspan><span class="token generics"><span class="token punctuation"><span><span class="token punctuation">>span>span><span class="token punctuation">(span><span class="token string">"Select Country"span><span class="token punctuation">)span><span class="token punctuation">;span>
        countryComboBox<span class="token punctuation">.span><span class="token function">setItemsspan><span class="token punctuation">(span><span class="token function">getCountriesspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span> <span class="token comment">// 设置 ComboBox 的项span>
        countryComboBox<span class="token punctuation">.span><span class="token function">setItemLabelGeneratorspan><span class="token punctuation">(span><span class="token class-name">Countryspan><span class="token operator">::span><span class="token function">getNamespan><span class="token punctuation">)span><span class="token punctuation">;span> <span class="token comment">// 用于前端显示的标签span>
        <span class="token comment">// 监听选项变化span>
        countryComboBox<span class="token punctuation">.span><span class="token function">addValueChangeListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">Countryspan> selectedCountry <span class="token operator">=span> event<span class="token punctuation">.span><span class="token function">getValuespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token keyword">ifspan> <span class="token punctuation">(span>selectedCountry <span class="token operator">!=span> <span class="token keyword">nullspan><span class="token punctuation">)span> <span class="token punctuation">{span>
                <span class="token class-name">Longspan> selectedId <span class="token operator">=span> selectedCountry<span class="token punctuation">.span><span class="token function">getIdspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span> <span class="token comment">// 获取 IDspan>
                <span class="token comment">// 在这里可以处理 ID，如存储到数据库等span>
                log<span class="token punctuation">.span><span class="token function">infospan><span class="token punctuation">(span><span class="token string">"Selected country id: {}"span><span class="token punctuation">,span> selectedId<span class="token punctuation">)span><span class="token punctuation">;span>
                <span class="token class-name">Notificationspan><span class="token punctuation">.span><span class="token function">showspan><span class="token punctuation">(span><span class="token string">"选中了"span><span class="token operator">+span>selectedCountry<span class="token punctuation">.span><span class="token function">getNamespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token punctuation">}span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
        
        <span class="token function">addspan><span class="token punctuation">(span>s6<span class="token punctuation">,span>countryComboBox<span class="token punctuation">)span><span class="token punctuation">;span>
    <span class="token punctuation">}span>
 
<span class="token punctuation">}span>

ConfirmDialog 对话框

ConfirmDialog 对话框-测试案例代码

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
        <span class="token class-name">Spanspan> s7 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"ConfirmDialog"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token comment">//demo1 删除确认span>
        <span class="token class-name">Buttonspan> deleteButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"删除项"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token comment">// 添加按钮点击事件span>
        deleteButton<span class="token punctuation">.span><span class="token function">addClickListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token comment">// 创建确认对话框span>
            <span class="token class-name">ConfirmDialogspan> dialog <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">ConfirmDialogspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setHeaderspan><span class="token punctuation">(span><span class="token string">"确认"span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setTextspan><span class="token punctuation">(span><span class="token string">"您确定要删除该项吗？"span><span class="token punctuation">)span><span class="token punctuation">;span>

            <span class="token comment">// 设置确认按钮的事件span>
            dialog<span class="token punctuation">.span><span class="token function">setCancelablespan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setConfirmTextspan><span class="token punctuation">(span><span class="token string">"确认"span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setConfirmButtonThemespan><span class="token punctuation">(span><span class="token string">"error primary"span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setCancelTextspan><span class="token punctuation">(span><span class="token string">"取消"span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">addConfirmListenerspan><span class="token punctuation">(span>confirmEvent <span class="token operator">->span> <span class="token punctuation">{span>
                <span class="token comment">// 处理确认事件span>
                log<span class="token punctuation">.span><span class="token function">infospan><span class="token punctuation">(span><span class="token string">"确认删除"span><span class="token punctuation">)span><span class="token punctuation">;span>
                <span class="token class-name">Notificationspan><span class="token punctuation">.span><span class="token function">showspan><span class="token punctuation">(span><span class="token string">"项已删除!"span><span class="token punctuation">)span><span class="token punctuation">;span>

            <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">addCancelListenerspan><span class="token punctuation">(span>cancelEvent <span class="token operator">->span> <span class="token punctuation">{span>
                <span class="token comment">// 处理取消事件span>
                log<span class="token punctuation">.span><span class="token function">infospan><span class="token punctuation">(span><span class="token string">"操作已取消"span><span class="token punctuation">)span><span class="token punctuation">;span>
                <span class="token class-name">Notificationspan><span class="token punctuation">.span><span class="token function">showspan><span class="token punctuation">(span><span class="token string">"操作已取消!"span><span class="token punctuation">)span><span class="token punctuation">;span>

            <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>

            <span class="token comment">// 显示对话框span>
            dialog<span class="token punctuation">.span><span class="token keyword">openspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token comment">//demo2 使用建议span>
        <span class="token class-name">Buttonspan> recommendButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"提示"span><span class="token punctuation">)span><span class="token punctuation">;span>
        recommendButton<span class="token punctuation">.span><span class="token function">addClickListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">ConfirmDialogspan> dialog <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">ConfirmDialogspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setHeaderspan><span class="token punctuation">(span><span class="token string">"导出失败"span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setTextspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">Htmlspan><span class="token punctuation">(span>
                    <span class="token string">"<p>导出报告Q4时出错。请重试，如果问题仍然存在，请联系 <a href=\"mailto:support@company.com\">support@company.com</a></p>"span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setConfirmTextspan><span class="token punctuation">(span><span class="token string">"我知道了"span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">addConfirmListenerspan><span class="token punctuation">(span>confirmEvent <span class="token operator">->span> <span class="token punctuation">{span>
                <span class="token comment">// 处理确认事件span>
                log<span class="token punctuation">.span><span class="token function">infospan><span class="token punctuation">(span><span class="token string">"我知道了"span><span class="token punctuation">)span><span class="token punctuation">;span>
                <span class="token class-name">Notificationspan><span class="token punctuation">.span><span class="token function">showspan><span class="token punctuation">(span><span class="token string">"我知道了!"span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token comment">// 显示对话框span>
            dialog<span class="token punctuation">.span><span class="token keyword">openspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token comment">//demo3 拒绝按钮span>
        <span class="token class-name">Buttonspan> rejectButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"拒绝保存"span><span class="token punctuation">)span><span class="token punctuation">;span>
        rejectButton<span class="token punctuation">.span><span class="token function">addClickListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">ConfirmDialogspan> dialog <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">ConfirmDialogspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setHeaderspan><span class="token punctuation">(span><span class="token string">"未保存的更改"span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setTextspan><span class="token punctuation">(span>
                    <span class="token string">"您想在导航离开之前放弃或保存更改吗"span><span class="token punctuation">)span><span class="token punctuation">;span>

            dialog<span class="token punctuation">.span><span class="token function">setCancelablespan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setCancelTextspan><span class="token punctuation">(span><span class="token string">"取消"span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">addCancelListenerspan><span class="token punctuation">(span>cancelEvent <span class="token operator">->span> <span class="token punctuation">{span>
                <span class="token comment">// 处理取消事件span>
                log<span class="token punctuation">.span><span class="token function">infospan><span class="token punctuation">(span><span class="token string">"操作已取消"span><span class="token punctuation">)span><span class="token punctuation">;span>
                <span class="token class-name">Notificationspan><span class="token punctuation">.span><span class="token function">showspan><span class="token punctuation">(span><span class="token string">"操作已取消!"span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setRejectablespan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setRejectTextspan><span class="token punctuation">(span><span class="token string">"丢弃变更"span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setConfirmTextspan><span class="token punctuation">(span><span class="token string">"保存变更"span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token comment">// 显示对话框span>
            dialog<span class="token punctuation">.span><span class="token keyword">openspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
        
        <span class="token function">addspan><span class="token punctuation">(span>s7<span class="token punctuation">,span>deleteButton<span class="token punctuation">,span>recommendButton<span class="token punctuation">,span>rejectButton<span class="token punctuation">)span><span class="token punctuation">;span>
    <span class="token punctuation">}span>
 
<span class="token punctuation">}span>

DatePicker 日期选择

DatePicker 日期选择-测试案例代码

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
        <span class="token class-name">Spanspan> s8 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"DatePicker"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">DatePickerspan> datePicker <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">DatePickerspan><span class="token punctuation">(span><span class="token string">"选择日期"span><span class="token punctuation">)span><span class="token punctuation">;span>
        datePicker<span class="token punctuation">.span><span class="token function">setLabelspan><span class="token punctuation">(span><span class="token string">"选择一个日期"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token comment">// 设置日期格式span>
        datePicker<span class="token punctuation">.span><span class="token function">setI18nspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">DatePicker<span class="token punctuation">.span>DatePickerI18nspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">setCancelspan><span class="token punctuation">(span><span class="token string">"取消"span><span class="token punctuation">)span>
                <span class="token punctuation">.span><span class="token function">setTodayspan><span class="token punctuation">(span><span class="token string">"今天"span><span class="token punctuation">)span>
                <span class="token punctuation">.span><span class="token function">setMonthNamesspan><span class="token punctuation">(span><span class="token class-name">Listspan><span class="token punctuation">.span><span class="token function">ofspan><span class="token punctuation">(span><span class="token string">"一月"span><span class="token punctuation">,span> <span class="token string">"二月"span><span class="token punctuation">,span> <span class="token string">"三月"span><span class="token punctuation">,span> <span class="token string">"四月"span><span class="token punctuation">,span> <span class="token string">"五月"span><span class="token punctuation">,span> <span class="token string">"六月"span><span class="token punctuation">,span>
                        <span class="token string">"七月"span><span class="token punctuation">,span> <span class="token string">"八月"span><span class="token punctuation">,span> <span class="token string">"九月"span><span class="token punctuation">,span> <span class="token string">"十月"span><span class="token punctuation">,span> <span class="token string">"十一月"span><span class="token punctuation">,span> <span class="token string">"十二月"span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token comment">// 添加监听器以捕获日期选择事件span>
        datePicker<span class="token punctuation">.span><span class="token function">addValueChangeListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token comment">// 获取选择的日期span>
            <span class="token class-name">LocalDatespan> date <span class="token operator">=span> event<span class="token punctuation">.span><span class="token function">getValuespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            log<span class="token punctuation">.span><span class="token function">infospan><span class="token punctuation">(span><span class="token string">"选择的日期:{}"span><span class="token punctuation">,span>date<span class="token punctuation">.span><span class="token function">toStringspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
      
        <span class="token function">addspan><span class="token punctuation">(span>s8<span class="token punctuation">,span>datePicker<span class="token punctuation">)span><span class="token punctuation">;span>
    <span class="token punctuation">}span>
 
<span class="token punctuation">}span>

DateTimePicker 日期时间选择

DateTimePicker 日期时间选择-测试案例代码

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
        <span class="token class-name">Spanspan> s9 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"DateTimePicker"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">DateTimePickerspan> dateTimePicker <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">DateTimePickerspan><span class="token punctuation">(span><span class="token string">"选择日期和时间"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token comment">// 可以设置默认值span>
        dateTimePicker<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token class-name">LocalDateTimespan><span class="token punctuation">.span><span class="token function">nowspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token comment">// 你可以为选择事件添加监听器span>
        dateTimePicker<span class="token punctuation">.span><span class="token function">addValueChangeListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">LocalDateTimespan> selectedDateTime <span class="token operator">=span> event<span class="token punctuation">.span><span class="token function">getValuespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">Systemspan><span class="token punctuation">.span>out<span class="token punctuation">.span><span class="token function">printlnspan><span class="token punctuation">(span><span class="token string">"选择的日期时间: "span> <span class="token operator">+span> selectedDateTime<span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
       
        <span class="token function">addspan><span class="token punctuation">(span>s9<span class="token punctuation">,span>dateTimePicker<span class="token punctuation">)span><span class="token punctuation">;span>
    <span class="token punctuation">}span>
 
<span class="token punctuation">}span>

TimePicker 时间选择

TimePicker 时间选择-测试案例代码

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
       <span class="token class-name">Spanspan> s010 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"TimePicker"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">TimePickerspan> timePicker <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TimePickerspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        timePicker<span class="token punctuation">.span><span class="token function">setLabelspan><span class="token punctuation">(span><span class="token string">"Meeting time"span><span class="token punctuation">)span><span class="token punctuation">;span>
        timePicker<span class="token punctuation">.span><span class="token function">setStepspan><span class="token punctuation">(span><span class="token class-name">Durationspan><span class="token punctuation">.span><span class="token function">ofMinutesspan><span class="token punctuation">(span><span class="token number">30span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        timePicker<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token class-name">LocalTimespan><span class="token punctuation">.span><span class="token function">ofspan><span class="token punctuation">(span><span class="token number">12span><span class="token punctuation">,span> <span class="token number">30span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        
        <span class="token function">addspan><span class="token punctuation">(span>s010<span class="token punctuation">,span>timePicker<span class="token punctuation">)span><span class="token punctuation">;span>
    <span class="token punctuation">}span>
 
<span class="token punctuation">}span>

Dialog 弹窗

Dialog 弹窗-测试案例代码

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
       <span class="token class-name">Spanspan> s10 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"Dialog"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Buttonspan> showDialogButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"new弹窗"span><span class="token punctuation">)span><span class="token punctuation">;span>
        showDialogButton<span class="token punctuation">.span><span class="token function">addClickListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">Dialogspan> dialog <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Dialogspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setWidthspan><span class="token punctuation">(span><span class="token string">"368px"span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">setHeaderTitlespan><span class="token punctuation">(span><span class="token string">"New employee"span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">TextFieldspan> tf1 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TextFieldspan><span class="token punctuation">(span><span class="token string">"First Name"span><span class="token punctuation">)span><span class="token punctuation">;span>
            tf1<span class="token punctuation">.span><span class="token function">setWidthspan><span class="token punctuation">(span><span class="token string">"276px"span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">TextFieldspan> tf2 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TextFieldspan><span class="token punctuation">(span><span class="token string">"Last Name"span><span class="token punctuation">)span><span class="token punctuation">;span>
            tf2<span class="token punctuation">.span><span class="token function">setWidthspan><span class="token punctuation">(span><span class="token string">"276px"span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">VerticalLayoutspan> layout <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            layout<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>tf1<span class="token punctuation">,span>tf2<span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>layout<span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">Buttonspan> saveButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Save"span><span class="token punctuation">,span>e<span class="token operator">->span><span class="token punctuation">{span>

                <span class="token class-name">Stringspan> value <span class="token operator">=span> tf1<span class="token punctuation">.span><span class="token function">getValuespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
                <span class="token keyword">ifspan> <span class="token punctuation">(span><span class="token class-name">StringUtilsspan><span class="token punctuation">.span><span class="token function">isEmptyspan><span class="token punctuation">(span>value<span class="token punctuation">)span><span class="token punctuation">)span> <span class="token punctuation">{span>
                    <span class="token class-name">Notificationspan><span class="token punctuation">.span><span class="token function">showspan><span class="token punctuation">(span><span class="token string">"First Name 不能为空!"span><span class="token punctuation">)span><span class="token punctuation">;span>
                <span class="token punctuation">}span><span class="token keyword">elsespan> <span class="token punctuation">{span>
                    s10<span class="token punctuation">.span><span class="token function">setTextspan><span class="token punctuation">(span>value<span class="token punctuation">)span><span class="token punctuation">;span>
                    <span class="token comment">// 关闭对话框span>
                    dialog<span class="token punctuation">.span><span class="token function">closespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
                <span class="token punctuation">}span>
            <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
            saveButton<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_PRIMARYspan><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">Buttonspan> cancelButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Cancel"span><span class="token punctuation">,span> e <span class="token operator">->span> dialog<span class="token punctuation">.span><span class="token function">closespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">getFooterspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>cancelButton<span class="token punctuation">)span><span class="token punctuation">;span>
            dialog<span class="token punctuation">.span><span class="token function">getFooterspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>saveButton<span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token comment">// 显示对话框span>
            dialog<span class="token punctuation">.span><span class="token keyword">openspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">Buttonspan> openDialogButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"view弹窗"span><span class="token punctuation">,span> event <span class="token operator">->span> <span class="token function">openDialogspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token function">addspan><span class="token punctuation">(span>s10<span class="token punctuation">,span>showDialogButton<span class="token punctuation">,span>openDialogButton<span class="token punctuation">)span><span class="token punctuation">;span>
    <span class="token punctuation">}span>
 
    <span class="token keyword">privatespan> <span class="token keyword">voidspan> <span class="token function">openDialogspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
        <span class="token class-name">Dialogspan> dialog <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Dialogspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        dialog<span class="token punctuation">.span><span class="token function">setWidthspan><span class="token punctuation">(span><span class="token string">"388px"span><span class="token punctuation">)span><span class="token punctuation">;span> <span class="token comment">// 设置弹窗宽度span>

        <span class="token comment">// 创建输入框span>
        <span class="token class-name">TextFieldspan> nameField <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TextFieldspan><span class="token punctuation">(span><span class="token string">"Name"span><span class="token punctuation">,span> <span class="token string">"Enter your name"span><span class="token punctuation">)span><span class="token punctuation">;span>
        nameField<span class="token punctuation">.span><span class="token function">setWidthspan><span class="token punctuation">(span><span class="token string">"300px"span><span class="token punctuation">)span><span class="token punctuation">;span>
        nameField<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token string">"test"span><span class="token punctuation">)span><span class="token punctuation">;span>
        nameField<span class="token punctuation">.span><span class="token function">setReadOnlyspan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">TextFieldspan> emailField <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TextFieldspan><span class="token punctuation">(span><span class="token string">"Email"span><span class="token punctuation">,span> <span class="token string">"Enter your email"span><span class="token punctuation">)span><span class="token punctuation">;span>
        emailField<span class="token punctuation">.span><span class="token function">setWidthspan><span class="token punctuation">(span><span class="token string">"300px"span><span class="token punctuation">)span><span class="token punctuation">;span>
        emailField<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token string">"efdxuwef@163.com"span><span class="token punctuation">)span><span class="token punctuation">;span>
        emailField<span class="token punctuation">.span><span class="token function">setReadOnlyspan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">TextFieldspan> addressField <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TextFieldspan><span class="token punctuation">(span><span class="token string">"Address"span><span class="token punctuation">,span> <span class="token string">"Enter your address"span><span class="token punctuation">)span><span class="token punctuation">;span>
        addressField<span class="token punctuation">.span><span class="token function">setWidthspan><span class="token punctuation">(span><span class="token string">"300px"span><span class="token punctuation">)span><span class="token punctuation">;span>
        addressField<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token string">"4188 Crystal Orchard, Mousie, USA"span><span class="token punctuation">)span><span class="token punctuation">;span>
        addressField<span class="token punctuation">.span><span class="token function">setReadOnlyspan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>



        <span class="token class-name">VerticalLayoutspan> layout <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        layout<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>nameField<span class="token punctuation">)span><span class="token punctuation">;span>
        layout<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>emailField<span class="token punctuation">)span><span class="token punctuation">;span>
        layout<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>addressField<span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token comment">// 添加输入框到对话框span>
        dialog<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>layout<span class="token punctuation">)span><span class="token punctuation">;span>

        dialog<span class="token punctuation">.span><span class="token function">setHeaderTitlespan><span class="token punctuation">(span><span class="token string">"User details"span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">Buttonspan> closeButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">Iconspan><span class="token punctuation">(span><span class="token string">"lumo"span><span class="token punctuation">,span> <span class="token string">"cross"span><span class="token punctuation">)span><span class="token punctuation">,span>
                <span class="token punctuation">(span>e<span class="token punctuation">)span> <span class="token operator">->span> dialog<span class="token punctuation">.span><span class="token function">closespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        closeButton<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_TERTIARYspan><span class="token punctuation">)span><span class="token punctuation">;span>
        dialog<span class="token punctuation">.span><span class="token function">getHeaderspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>closeButton<span class="token punctuation">)span><span class="token punctuation">;span>


        dialog<span class="token punctuation">.span><span class="token keyword">openspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
    <span class="token punctuation">}span>
<span class="token punctuation">}span>

Input 各种输入窗

Input 各种输入窗-测试案例代码，需要在自定义css文件里配置css ,然后在Java中声明使用的组件css

<span class="token selector">.password-strength-weekspan><span class="token punctuation">{span>
    <span class="token property">colorspan><span class="token punctuation">:span> red<span class="token punctuation">;span>
<span class="token punctuation">}span>

<span class="token selector">.password-strength-moderatespan><span class="token punctuation">{span>
    <span class="token property">colorspan><span class="token punctuation">:span> yellowgreen<span class="token punctuation">;span>
<span class="token punctuation">}span>


<span class="token selector">.password-strength-strongspan><span class="token punctuation">{span>
    <span class="token property">colorspan><span class="token punctuation">:span> darkgreen<span class="token punctuation">;span>
<span class="token punctuation">}span>

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
         <span class="token class-name">Spanspan> s11 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"各种输入窗"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">EmailFieldspan> validEmailField <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">EmailFieldspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        validEmailField<span class="token punctuation">.span><span class="token function">setLabelspan><span class="token punctuation">(span><span class="token string">"Email address"span><span class="token punctuation">)span><span class="token punctuation">;span>
        validEmailField<span class="token punctuation">.span><span class="token function">getElementspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">setAttributespan><span class="token punctuation">(span><span class="token string">"name"span><span class="token punctuation">,span> <span class="token string">"email"span><span class="token punctuation">)span><span class="token punctuation">;span>
        validEmailField<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token string">"julia@email.com"span><span class="token punctuation">)span><span class="token punctuation">;span>
        validEmailField<span class="token punctuation">.span><span class="token function">setErrorMessagespan><span class="token punctuation">(span><span class="token string">"Enter a valid email address"span><span class="token punctuation">)span><span class="token punctuation">;span>
        validEmailField<span class="token punctuation">.span><span class="token function">setPrefixComponentspan><span class="token punctuation">(span><span class="token class-name">VaadinIconspan><span class="token punctuation">.span><span class="token constant">ENVELOPEspan><span class="token punctuation">.span><span class="token function">createspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        validEmailField<span class="token punctuation">.span><span class="token function">setClearButtonVisiblespan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">NumberFieldspan> dollarField <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">NumberFieldspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        dollarField<span class="token punctuation">.span><span class="token function">setLabelspan><span class="token punctuation">(span><span class="token string">"Balance"span><span class="token punctuation">)span><span class="token punctuation">;span>
        dollarField<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token number">200.0span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Divspan> dollarPrefix <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Divspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        dollarPrefix<span class="token punctuation">.span><span class="token function">setTextspan><span class="token punctuation">(span><span class="token string">"$"span><span class="token punctuation">)span><span class="token punctuation">;span>
        dollarField<span class="token punctuation">.span><span class="token function">setPrefixComponentspan><span class="token punctuation">(span>dollarPrefix<span class="token punctuation">)span><span class="token punctuation">;span>
        dollarField<span class="token punctuation">.span><span class="token function">setClearButtonVisiblespan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">IntegerFieldspan> integerField <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">IntegerFieldspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        integerField<span class="token punctuation">.span><span class="token function">setLabelspan><span class="token punctuation">(span><span class="token string">"Quantity"span><span class="token punctuation">)span><span class="token punctuation">;span>
        integerField<span class="token punctuation">.span><span class="token function">setHelperTextspan><span class="token punctuation">(span><span class="token string">"Max 10 items"span><span class="token punctuation">)span><span class="token punctuation">;span>
        integerField<span class="token punctuation">.span><span class="token function">setRequiredIndicatorVisiblespan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>
        integerField<span class="token punctuation">.span><span class="token function">setMinspan><span class="token punctuation">(span><span class="token number">1span><span class="token punctuation">)span><span class="token punctuation">;span>
        integerField<span class="token punctuation">.span><span class="token function">setMaxspan><span class="token punctuation">(span><span class="token number">10span><span class="token punctuation">)span><span class="token punctuation">;span>
        integerField<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token number">2span><span class="token punctuation">)span><span class="token punctuation">;span>
        integerField<span class="token punctuation">.span><span class="token function">setStepButtonsVisiblespan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>

        integerField<span class="token punctuation">.span><span class="token function">setI18nspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">IntegerField<span class="token punctuation">.span>IntegerFieldI18nspan><span class="token punctuation">(span><span class="token punctuation">)span>
                <span class="token punctuation">.span><span class="token function">setRequiredErrorMessagespan><span class="token punctuation">(span><span class="token string">"Field is required"span><span class="token punctuation">)span>
                <span class="token punctuation">.span><span class="token function">setBadInputErrorMessagespan><span class="token punctuation">(span><span class="token string">"Invalid number format"span><span class="token punctuation">)span>
                <span class="token punctuation">.span><span class="token function">setMinErrorMessagespan><span class="token punctuation">(span><span class="token string">"Quantity must be at least 1"span><span class="token punctuation">)span>
                <span class="token punctuation">.span><span class="token function">setMaxErrorMessagespan><span class="token punctuation">(span><span class="token string">"Maximum 10 items available"span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">BigDecimalFieldspan> bigDecimalField <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">BigDecimalFieldspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        bigDecimalField<span class="token punctuation">.span><span class="token function">setLabelspan><span class="token punctuation">(span><span class="token string">"Result"span><span class="token punctuation">)span><span class="token punctuation">;span>
        bigDecimalField<span class="token punctuation">.span><span class="token function">setWidthspan><span class="token punctuation">(span><span class="token string">"240px"span><span class="token punctuation">)span><span class="token punctuation">;span>
        bigDecimalField<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">BigDecimalspan><span class="token punctuation">(span><span class="token string">"948205817.472950487"span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>


        <span class="token class-name">IntegerFieldspan> xField <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">IntegerFieldspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        xField<span class="token punctuation">.span><span class="token function">setLabelspan><span class="token punctuation">(span><span class="token string">"X"span><span class="token punctuation">)span><span class="token punctuation">;span>
        xField<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token operator">-span><span class="token number">1284span><span class="token punctuation">)span><span class="token punctuation">;span>


        <span class="token class-name">NumberFieldspan> numberField <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">NumberFieldspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        numberField<span class="token punctuation">.span><span class="token function">setLabelspan><span class="token punctuation">(span><span class="token string">"Duration (hours)"span><span class="token punctuation">)span><span class="token punctuation">;span>
        numberField<span class="token punctuation">.span><span class="token function">setStepspan><span class="token punctuation">(span><span class="token number">0.5span><span class="token punctuation">)span><span class="token punctuation">;span>
        numberField<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token number">12.5span><span class="token punctuation">)span><span class="token punctuation">;span>
        numberField<span class="token punctuation">.span><span class="token function">setStepButtonsVisiblespan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>
        numberField<span class="token punctuation">.span><span class="token function">setI18nspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">NumberField<span class="token punctuation">.span>NumberFieldI18nspan><span class="token punctuation">(span><span class="token punctuation">)span>
                <span class="token punctuation">.span><span class="token function">setBadInputErrorMessagespan><span class="token punctuation">(span><span class="token string">"Invalid number format"span><span class="token punctuation">)span>
                <span class="token punctuation">.span><span class="token function">setStepErrorMessagespan><span class="token punctuation">(span><span class="token string">"Duration must be a multiple of 0.5"span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">PasswordFieldspan> passwordField1 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">PasswordFieldspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        passwordField1<span class="token punctuation">.span><span class="token function">setLabelspan><span class="token punctuation">(span><span class="token string">"Password"span><span class="token punctuation">)span><span class="token punctuation">;span>
        passwordField1<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token string">"Ex@mplePassw0rd"span><span class="token punctuation">)span><span class="token punctuation">;span>
        passwordField1<span class="token punctuation">.span><span class="token function">setClearButtonVisiblespan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>
        passwordField1<span class="token punctuation">.span><span class="token function">setPrefixComponentspan><span class="token punctuation">(span><span class="token class-name">VaadinIconspan><span class="token punctuation">.span><span class="token constant">LOCKspan><span class="token punctuation">.span><span class="token function">createspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>


        <span class="token class-name">HorizontalLayoutspan> layout <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">HorizontalLayoutspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
<span class="token comment">//        layout.setPadding(true);span>
        layout<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>validEmailField<span class="token punctuation">)span><span class="token punctuation">;span>
        layout<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>dollarField<span class="token punctuation">)span><span class="token punctuation">;span>
        layout<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>integerField<span class="token punctuation">)span><span class="token punctuation">;span>
        layout<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>bigDecimalField<span class="token punctuation">)span><span class="token punctuation">;span>
        layout<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>xField<span class="token punctuation">)span><span class="token punctuation">;span>
        layout<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>numberField<span class="token punctuation">)span><span class="token punctuation">;span>
        layout<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>passwordField1<span class="token punctuation">)span><span class="token punctuation">;span>


        <span class="token class-name">PasswordFieldspan> passwordField <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">PasswordFieldspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        passwordField<span class="token punctuation">.span><span class="token function">setLabelspan><span class="token punctuation">(span><span class="token string">"Password2"span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">Iconspan> checkIcon <span class="token operator">=span> <span class="token class-name">VaadinIconspan><span class="token punctuation">.span><span class="token constant">CHECKspan><span class="token punctuation">.span><span class="token function">createspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        checkIcon<span class="token punctuation">.span><span class="token function">setVisiblespan><span class="token punctuation">(span><span class="token boolean">falsespan><span class="token punctuation">)span><span class="token punctuation">;span>
        checkIcon<span class="token punctuation">.span><span class="token function">getStylespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">setspan><span class="token punctuation">(span><span class="token string">"color"span><span class="token punctuation">,span> <span class="token string">"var(--lumo-success-color)"span><span class="token punctuation">)span><span class="token punctuation">;span>
        passwordField<span class="token punctuation">.span><span class="token function">setSuffixComponentspan><span class="token punctuation">(span>checkIcon<span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">Divspan> passwordStrength <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Divspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Spanspan> passwordStrengthText <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"week"span><span class="token punctuation">)span><span class="token punctuation">;span>
        passwordStrengthText<span class="token punctuation">.span><span class="token function">setClassNamespan><span class="token punctuation">(span><span class="token string">"password-strength-week"span><span class="token punctuation">)span><span class="token punctuation">;span>
        passwordStrength<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">Textspan><span class="token punctuation">(span><span class="token string">"Password strength: "span><span class="token punctuation">)span><span class="token punctuation">,span>
                passwordStrengthText<span class="token punctuation">)span><span class="token punctuation">;span>
        passwordField<span class="token punctuation">.span><span class="token function">setHelperComponentspan><span class="token punctuation">(span>passwordStrength<span class="token punctuation">)span><span class="token punctuation">;span>
        passwordField<span class="token punctuation">.span><span class="token function">setClearButtonVisiblespan><span class="token punctuation">(span><span class="token boolean">falsespan><span class="token punctuation">)span><span class="token punctuation">;span>


        passwordField<span class="token punctuation">.span><span class="token function">setValueChangeModespan><span class="token punctuation">(span><span class="token class-name">ValueChangeModespan><span class="token punctuation">.span><span class="token constant">EAGERspan><span class="token punctuation">)span><span class="token punctuation">;span> <span class="token comment">//设置实时监听span>
        passwordField<span class="token punctuation">.span><span class="token function">addValueChangeListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">Stringspan> value <span class="token operator">=span> event<span class="token punctuation">.span><span class="token function">getValuespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            log<span class="token punctuation">.span><span class="token function">infospan><span class="token punctuation">(span><span class="token string">"ValueChangeListener value: {}"span> <span class="token punctuation">,span> value<span class="token punctuation">)span><span class="token punctuation">;span>

            <span class="token keyword">ifspan> <span class="token punctuation">(span>value<span class="token punctuation">.span><span class="token function">lengthspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token operator"><=span> <span class="token number">3span><span class="token punctuation">)span> <span class="token punctuation">{span>
                checkIcon<span class="token punctuation">.span><span class="token function">setVisiblespan><span class="token punctuation">(span><span class="token boolean">falsespan><span class="token punctuation">)span><span class="token punctuation">;span>
                passwordStrengthText<span class="token punctuation">.span><span class="token function">setTextspan><span class="token punctuation">(span><span class="token string">"week"span><span class="token punctuation">)span><span class="token punctuation">;span>
                passwordStrengthText<span class="token punctuation">.span><span class="token function">setClassNamespan><span class="token punctuation">(span><span class="token string">"password-strength-week"span><span class="token punctuation">)span><span class="token punctuation">;span> <span class="token comment">//使用了外部自定义CSSspan>
            <span class="token punctuation">}span>
            <span class="token keyword">ifspan> <span class="token punctuation">(span>value<span class="token punctuation">.span><span class="token function">lengthspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token operator">>span><span class="token number">3span> <span class="token operator">&&span> value<span class="token punctuation">.span><span class="token function">lengthspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token operator"><=span> <span class="token number">6span><span class="token punctuation">)span> <span class="token punctuation">{span>
                checkIcon<span class="token punctuation">.span><span class="token function">setVisiblespan><span class="token punctuation">(span><span class="token boolean">falsespan><span class="token punctuation">)span><span class="token punctuation">;span>
                passwordStrengthText<span class="token punctuation">.span><span class="token function">setTextspan><span class="token punctuation">(span><span class="token string">"moderate"span><span class="token punctuation">)span><span class="token punctuation">;span>
                passwordStrengthText<span class="token punctuation">.span><span class="token function">setClassNamespan><span class="token punctuation">(span><span class="token string">"password-strength-moderate"span><span class="token punctuation">)span><span class="token punctuation">;span> <span class="token comment">//使用了外部自定义CSSspan>
            <span class="token punctuation">}span>
            <span class="token keyword">ifspan> <span class="token punctuation">(span>value<span class="token punctuation">.span><span class="token function">lengthspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token operator">>span><span class="token number">6span> <span class="token operator">&&span> value<span class="token punctuation">.span><span class="token function">lengthspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token operator"><=span> <span class="token number">9span><span class="token punctuation">)span> <span class="token punctuation">{span>
                passwordStrengthText<span class="token punctuation">.span><span class="token function">setTextspan><span class="token punctuation">(span><span class="token string">"strong"span><span class="token punctuation">)span><span class="token punctuation">;span>
                passwordStrengthText<span class="token punctuation">.span><span class="token function">setClassNamespan><span class="token punctuation">(span><span class="token string">"password-strength-strong"span><span class="token punctuation">)span><span class="token punctuation">;span> <span class="token comment">//使用了外部自定义CSSspan>
                checkIcon<span class="token punctuation">.span><span class="token function">setVisiblespan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token punctuation">}span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">TextFieldspan> textField <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TextFieldspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        textField<span class="token punctuation">.span><span class="token function">setLabelspan><span class="token punctuation">(span><span class="token string">"Street Address"span><span class="token punctuation">)span><span class="token punctuation">;span>
        textField<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token string">"Ruukinkatu 2"span><span class="token punctuation">)span><span class="token punctuation">;span>
        textField<span class="token punctuation">.span><span class="token function">setClearButtonVisiblespan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>
        textField<span class="token punctuation">.span><span class="token function">setPrefixComponentspan><span class="token punctuation">(span><span class="token class-name">VaadinIconspan><span class="token punctuation">.span><span class="token constant">MAP_MARKERspan><span class="token punctuation">.span><span class="token function">createspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>


        <span class="token class-name">TextFieldspan> phoneField <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TextFieldspan><span class="token punctuation">(span><span class="token string">"Phone number"span><span class="token punctuation">)span><span class="token punctuation">;span>
        phoneField<span class="token punctuation">.span><span class="token function">setRequiredIndicatorVisiblespan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>
        phoneField<span class="token punctuation">.span><span class="token function">setPatternspan><span class="token punctuation">(span>
                <span class="token string">"^[+]?[\\(]?[0-9]{3}[\\)]?[\\-]?[0-9]{3}[\\-]?[0-9]{4,6}$"span><span class="token punctuation">)span><span class="token punctuation">;span>
        phoneField<span class="token punctuation">.span><span class="token function">setAllowedCharPatternspan><span class="token punctuation">(span><span class="token string">"[0-9()+-]"span><span class="token punctuation">)span><span class="token punctuation">;span>
        phoneField<span class="token punctuation">.span><span class="token function">setMinLengthspan><span class="token punctuation">(span><span class="token number">5span><span class="token punctuation">)span><span class="token punctuation">;span>
        phoneField<span class="token punctuation">.span><span class="token function">setMaxLengthspan><span class="token punctuation">(span><span class="token number">18span><span class="token punctuation">)span><span class="token punctuation">;span>
        phoneField<span class="token punctuation">.span><span class="token function">setHelperTextspan><span class="token punctuation">(span><span class="token string">"Format: +(123)456-7890"span><span class="token punctuation">)span><span class="token punctuation">;span>
        phoneField<span class="token punctuation">.span><span class="token function">setI18nspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">TextField<span class="token punctuation">.span>TextFieldI18nspan><span class="token punctuation">(span><span class="token punctuation">)span>
                <span class="token punctuation">.span><span class="token function">setRequiredErrorMessagespan><span class="token punctuation">(span><span class="token string">"Field is required"span><span class="token punctuation">)span>
                <span class="token punctuation">.span><span class="token function">setMinLengthErrorMessagespan><span class="token punctuation">(span><span class="token string">"Minimum length is 5 characters"span><span class="token punctuation">)span>
                <span class="token punctuation">.span><span class="token function">setMaxLengthErrorMessagespan><span class="token punctuation">(span><span class="token string">"Maximum length is 18 characters"span><span class="token punctuation">)span>
                <span class="token punctuation">.span><span class="token function">setPatternErrorMessagespan><span class="token punctuation">(span><span class="token string">"Invalid phone number format"span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>


        <span class="token class-name">TextAreaspan> textArea <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TextAreaspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        textArea<span class="token punctuation">.span><span class="token function">setLabelspan><span class="token punctuation">(span><span class="token string">"Comment"span><span class="token punctuation">)span><span class="token punctuation">;span>
        textArea<span class="token punctuation">.span><span class="token function">setMaxLengthspan><span class="token punctuation">(span><span class="token number">150span><span class="token punctuation">)span><span class="token punctuation">;span>
        textArea<span class="token punctuation">.span><span class="token function">setValueChangeModespan><span class="token punctuation">(span><span class="token class-name">ValueChangeModespan><span class="token punctuation">.span><span class="token constant">EAGERspan><span class="token punctuation">)span><span class="token punctuation">;span>
        textArea<span class="token punctuation">.span><span class="token function">addValueChangeListenerspan><span class="token punctuation">(span>e <span class="token operator">->span> <span class="token punctuation">{span>
            e<span class="token punctuation">.span><span class="token function">getSourcespan><span class="token punctuation">(span><span class="token punctuation">)span>
                    <span class="token punctuation">.span><span class="token function">setHelperTextspan><span class="token punctuation">(span>e<span class="token punctuation">.span><span class="token function">getValuespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">lengthspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token operator">+span> <span class="token string">"/"span> <span class="token operator">+span> <span class="token number">150span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
        textArea<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token string">"Great job. This is excellent!"span><span class="token punctuation">)span><span class="token punctuation">;span>


        <span class="token class-name">TextFieldspan> findField <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TextFieldspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        findField<span class="token punctuation">.span><span class="token function">setPlaceholderspan><span class="token punctuation">(span><span class="token string">"Search"span><span class="token punctuation">)span><span class="token punctuation">;span>
        findField<span class="token punctuation">.span><span class="token function">setPrefixComponentspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">Iconspan><span class="token punctuation">(span><span class="token string">"lumo"span><span class="token punctuation">,span> <span class="token string">"search"span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        findField<span class="token punctuation">.span><span class="token function">setTooltipTextspan><span class="token punctuation">(span><span class="token string">"Wrap in “quotes” for exact phrase"span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token function">addspan><span class="token punctuation">(span>s11<span class="token punctuation">,span>layout<span class="token punctuation">,span>passwordField<span class="token punctuation">,span>textField<span class="token punctuation">,span>phoneField<span class="token punctuation">,span>textArea<span class="token punctuation">,span>findField<span class="token punctuation">)span><span class="token punctuation">;span>
    <span class="token punctuation">}span>
 
<span class="token punctuation">}span>

TabSheet 选项卡

TabSheet 选项卡-测试代码案例

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
        <span class="token class-name">TabSheetspan> tabSheet <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TabSheetspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        tabSheet<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span><span class="token string">"Dashboard"span><span class="token punctuation">,span>
                <span class="token keyword">newspan> <span class="token class-name">Divspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">Textspan><span class="token punctuation">(span><span class="token string">"This is the Dashboard tab content"span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        tabSheet<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span><span class="token string">"Payment"span><span class="token punctuation">,span>
                <span class="token keyword">newspan> <span class="token class-name">Divspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">Textspan><span class="token punctuation">(span><span class="token string">"This is the Payment tab content"span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        tabSheet<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span><span class="token string">"Shipping"span><span class="token punctuation">,span>
                <span class="token keyword">newspan> <span class="token class-name">Divspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">Textspan><span class="token punctuation">(span><span class="token string">"This is the Shipping tab content"span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token function">addspan><span class="token punctuation">(span>tabSheet<span class="token punctuation">)span><span class="token punctuation">;span>
    <span class="token punctuation">}span>
<span class="token punctuation">}span>

RadioButtonGroup 单选按钮组

RadioButtonGroup 单选按钮组-测试代码案例

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
        <span class="token class-name">RadioButtonGroupspan><span class="token generics"><span class="token punctuation"><span><span class="token class-name">Stringspan><span class="token punctuation">>span>span> radioGroup <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">RadioButtonGroupspan><span class="token generics"><span class="token punctuation"><span><span class="token punctuation">>span>span><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        radioGroup<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">RadioGroupVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_VERTICALspan><span class="token punctuation">)span><span class="token punctuation">;span>
        radioGroup<span class="token punctuation">.span><span class="token function">setLabelspan><span class="token punctuation">(span><span class="token string">"Travel class"span><span class="token punctuation">)span><span class="token punctuation">;span>
        radioGroup<span class="token punctuation">.span><span class="token function">setItemsspan><span class="token punctuation">(span><span class="token string">"Economy"span><span class="token punctuation">,span> <span class="token string">"Business"span><span class="token punctuation">,span> <span class="token string">"First Class"span><span class="token punctuation">)span><span class="token punctuation">;span>
        radioGroup<span class="token punctuation">.span><span class="token function">addValueChangeListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">Stringspan> value <span class="token operator">=span> event<span class="token punctuation">.span><span class="token function">getValuespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            log<span class="token punctuation">.span><span class="token function">infospan><span class="token punctuation">(span><span class="token string">"RadioButtonGroup ValueChangeListener value: {}"span> <span class="token punctuation">,span> value<span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
        
        <span class="token function">addspan><span class="token punctuation">(span>radioGroup<span class="token punctuation">)span><span class="token punctuation">;span>
<span class="token punctuation">}span>
<span class="token punctuation">}span>

ProgressBar 进度条

ProgressBar 进度条-测试代码案例

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
<span class="token class-name">ProgressBarspan> progressBar <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">ProgressBarspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        progressBar<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token number">0.5span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">ProgressBarspan> progressBar2 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">ProgressBarspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        progressBar2<span class="token punctuation">.span><span class="token function">setIndeterminatespan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token comment">// Contrastspan>
        <span class="token class-name">ProgressBarspan> progressBarContrast <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">ProgressBarspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        progressBarContrast<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ProgressBarVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_CONTRASTspan><span class="token punctuation">)span><span class="token punctuation">;span>
        progressBarContrast<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token number">0.5span><span class="token punctuation">)span><span class="token punctuation">;span>

<span class="token comment">// Successspan>
        <span class="token class-name">ProgressBarspan> progressBarSuccess <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">ProgressBarspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        progressBarSuccess<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ProgressBarVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_SUCCESSspan><span class="token punctuation">)span><span class="token punctuation">;span>
        progressBarSuccess<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token number">0.75span><span class="token punctuation">)span><span class="token punctuation">;span>

<span class="token comment">// Errorspan>
        <span class="token class-name">ProgressBarspan> progressBarError <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">ProgressBarspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        progressBarError<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ProgressBarVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_ERRORspan><span class="token punctuation">)span><span class="token punctuation">;span>
        progressBarError<span class="token punctuation">.span><span class="token function">setValuespan><span class="token punctuation">(span><span class="token number">0.2span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token function">addspan><span class="token punctuation">(span>progressBar<span class="token punctuation">,span>progressBar2<span class="token punctuation">,span>progressBarContrast<span class="token punctuation">,span>progressBarSuccess<span class="token punctuation">,span>progressBarError<span class="token punctuation">)span><span class="token punctuation">;span>

<span class="token class-name">ProgressBarspan> progressBarExport <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">ProgressBarspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        progressBarExport<span class="token punctuation">.span><span class="token function">setIndeterminatespan><span class="token punctuation">(span><span class="token boolean">truespan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token comment">// Associates the labels with the bar programmatically, for screenspan>
<span class="token comment">// readers:span>
        progressBarExport<span class="token punctuation">.span><span class="token function">getElementspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">setAttributespan><span class="token punctuation">(span><span class="token string">"aria-labelledby"span><span class="token punctuation">,span> <span class="token string">"pblbl"span><span class="token punctuation">)span><span class="token punctuation">;span>
        progressBarExport<span class="token punctuation">.span><span class="token function">getElementspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">setAttributespan><span class="token punctuation">(span><span class="token string">"aria-describedby"span><span class="token punctuation">,span> <span class="token string">"sublbl"span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">NativeLabelspan> progressBarLabel <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">NativeLabelspan><span class="token punctuation">(span><span class="token string">"Generating report..."span><span class="token punctuation">)span><span class="token punctuation">;span>
        progressBarLabel<span class="token punctuation">.span><span class="token function">setIdspan><span class="token punctuation">(span><span class="token string">"pblbl"span><span class="token punctuation">)span><span class="token punctuation">;span>
        progressBarLabel<span class="token punctuation">.span><span class="token function">addClassNamespan><span class="token punctuation">(span><span class="token class-name">LumoUtility<span class="token punctuation">.span>TextColorspan><span class="token punctuation">.span><span class="token constant">SECONDARYspan><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">Spanspan> progressBarSubLabel <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"Process can take upwards of 10 minutes"span><span class="token punctuation">)span><span class="token punctuation">;span>
        progressBarSubLabel<span class="token punctuation">.span><span class="token function">setIdspan><span class="token punctuation">(span><span class="token string">"sublbl"span><span class="token punctuation">)span><span class="token punctuation">;span>
        progressBarSubLabel<span class="token punctuation">.span><span class="token function">addClassNamesspan><span class="token punctuation">(span><span class="token class-name">LumoUtility<span class="token punctuation">.span>TextColorspan><span class="token punctuation">.span><span class="token constant">SECONDARYspan><span class="token punctuation">,span> <span class="token class-name">LumoUtility<span class="token punctuation">.span>FontSizespan><span class="token punctuation">.span><span class="token constant">XSMALLspan><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token function">addspan><span class="token punctuation">(span>progressBarLabel<span class="token punctuation">,span> progressBarExport<span class="token punctuation">,span> progressBarSubLabel<span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span>
  <span class="token punctuation">}span>

MultiSelectComboBox 多选下拉框

MultiSelectComboBox 多选下拉框-测试代码案例

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
        <span class="token class-name">Spanspan> s16 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"MultiSelectComboBox demo"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">MultiSelectComboBoxspan><span class="token generics"><span class="token punctuation"><span><span class="token class-name">Countryspan><span class="token punctuation">>span>span> comboBox <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">MultiSelectComboBoxspan><span class="token generics"><span class="token punctuation"><span><span class="token punctuation">>span>span><span class="token punctuation">(span>
                <span class="token string">"Countries"span><span class="token punctuation">)span><span class="token punctuation">;span>
        comboBox<span class="token punctuation">.span><span class="token function">setItemsspan><span class="token punctuation">(span><span class="token function">getCountriesspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        comboBox<span class="token punctuation">.span><span class="token function">setItemLabelGeneratorspan><span class="token punctuation">(span><span class="token class-name">Countryspan><span class="token operator">::span><span class="token function">getNamespan><span class="token punctuation">)span><span class="token punctuation">;span>
        comboBox<span class="token punctuation">.span><span class="token function">addValueChangeListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">Setspan><span class="token generics"><span class="token punctuation"><span><span class="token class-name">Countryspan><span class="token punctuation">>span>span> countrySet <span class="token operator">=span>  event<span class="token punctuation">.span><span class="token function">getValuespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            log<span class="token punctuation">.span><span class="token function">infospan><span class="token punctuation">(span><span class="token string">"countrySet: {}"span><span class="token punctuation">,span> countrySet<span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
 
        <span class="token function">addspan><span class="token punctuation">(span>s16<span class="token punctuation">,span>comboBox<span class="token punctuation">)span><span class="token punctuation">;span>
<span class="token punctuation">}span>
<span class="token punctuation">}span>

MessageInput 消息输入框

MessageInput 消息输入框-测试代码案例

<span class="token annotation punctuation">@Slf4jspan>
<span class="token annotation punctuation">@PageTitlespan><span class="token punctuation">(span><span class="token string">"HelpViewPage"span><span class="token punctuation">)span>
<span class="token annotation punctuation">@Routespan><span class="token punctuation">(span>value <span class="token operator">=span> <span class="token string">"helpView"span><span class="token punctuation">,span>layout <span class="token operator">=span> <span class="token class-name">MainLayoutspan><span class="token punctuation">.span><span class="token keyword">classspan><span class="token punctuation">)span>
<span class="token annotation punctuation">@Menuspan><span class="token punctuation">(span>order <span class="token operator">=span> <span class="token number">5span><span class="token punctuation">,span> icon <span class="token operator">=span> <span class="token class-name">LineAwesomeIconUrlspan><span class="token punctuation">.span><span class="token constant">FILEspan><span class="token punctuation">)span>
<span class="token keyword">publicspan> <span class="token keyword">classspan> <span class="token class-name">HelpViewspan> <span class="token keyword">extendsspan> <span class="token class-name">VerticalLayoutspan><span class="token punctuation">{span>
    <span class="token keyword">publicspan> <span class="token class-name">HelpViewspan><span class="token punctuation">(span><span class="token punctuation">)span> <span class="token punctuation">{span>
<span class="token class-name">MessageInputspan> input <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">MessageInputspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        input<span class="token punctuation">.span><span class="token function">addSubmitListenerspan><span class="token punctuation">(span>submitEvent <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">Notificationspan><span class="token punctuation">.span><span class="token function">showspan><span class="token punctuation">(span><span class="token string">"Message received: "span> <span class="token operator">+span> submitEvent<span class="token punctuation">.span><span class="token function">getValuespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">,span>
                    <span class="token number">3000span><span class="token punctuation">,span> <span class="token class-name">Notification<span class="token punctuation">.span>Positionspan><span class="token punctuation">.span><span class="token constant">MIDDLEspan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token function">addspan><span class="token punctuation">(span>input<span class="token punctuation">)span><span class="token punctuation">;span>
 <span class="token punctuation">}span><span class="token punctuation">}span>

Notification 通知

Notification 通知–测试代码案例

<span class="token class-name">Spanspan> s18 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"Notification demo"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Buttonspan> toast1 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"toast1"span><span class="token punctuation">,span> event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token comment">// When creating a notification using the `show` static method,span>
<span class="token comment">// the duration is 5-sec by default.span>
            <span class="token class-name">Notificationspan><span class="token punctuation">.span><span class="token function">showspan><span class="token punctuation">(span><span class="token string">"Financial report generated"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">Buttonspan> toast2 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"toast2"span><span class="token punctuation">,span> event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">Notificationspan> notification <span class="token operator">=span> <span class="token class-name">Notificationspan><span class="token punctuation">.span><span class="token function">showspan><span class="token punctuation">(span><span class="token string">"Application submitted!"span><span class="token punctuation">)span><span class="token punctuation">;span>
            notification<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">NotificationVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_SUCCESSspan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">Buttonspan> toast3 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"toast3"span><span class="token punctuation">,span>evt <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">Notificationspan> notification <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Notificationspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            notification<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">NotificationVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_WARNINGspan><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">Divspan> text <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Divspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">Textspan><span class="token punctuation">(span>
                    <span class="token string">"Your session will expire in 5 minutes due to inactivity."span><span class="token punctuation">)span><span class="token punctuation">,span>
                    <span class="token keyword">newspan> <span class="token class-name">HtmlComponentspan><span class="token punctuation">(span><span class="token string">"br"span><span class="token punctuation">)span><span class="token punctuation">,span>
                    <span class="token keyword">newspan> <span class="token class-name">Textspan><span class="token punctuation">(span><span class="token string">"Close this warning to continue working."span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">Buttonspan> closeButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">Iconspan><span class="token punctuation">(span><span class="token string">"lumo"span><span class="token punctuation">,span> <span class="token string">"cross"span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
            closeButton<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_TERTIARY_INLINEspan><span class="token punctuation">)span><span class="token punctuation">;span>
            closeButton<span class="token punctuation">.span><span class="token function">setAriaLabelspan><span class="token punctuation">(span><span class="token string">"Close"span><span class="token punctuation">)span><span class="token punctuation">;span>
            closeButton<span class="token punctuation">.span><span class="token function">addClickListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
                notification<span class="token punctuation">.span><span class="token function">closespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">HorizontalLayoutspan> layoutH <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">HorizontalLayoutspan><span class="token punctuation">(span>text<span class="token punctuation">,span> closeButton<span class="token punctuation">)span><span class="token punctuation">;span>
            layoutH<span class="token punctuation">.span><span class="token function">setAlignItemsspan><span class="token punctuation">(span><span class="token class-name">Alignmentspan><span class="token punctuation">.span><span class="token constant">CENTERspan><span class="token punctuation">)span><span class="token punctuation">;span>
            notification<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>layoutH<span class="token punctuation">)span><span class="token punctuation">;span>
            notification<span class="token punctuation">.span><span class="token keyword">openspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">Buttonspan> toast4 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"toast4"span><span class="token punctuation">,span>evt <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">Notificationspan> notification <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Notificationspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            notification<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">NotificationVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_ERRORspan><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">Divspan> text <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Divspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">Textspan><span class="token punctuation">(span><span class="token string">"Failed to generate report"span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">Buttonspan> closeButton <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token keyword">newspan> <span class="token class-name">Iconspan><span class="token punctuation">(span><span class="token string">"lumo"span><span class="token punctuation">,span> <span class="token string">"cross"span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
            closeButton<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">ButtonVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_TERTIARY_INLINEspan><span class="token punctuation">)span><span class="token punctuation">;span>
            closeButton<span class="token punctuation">.span><span class="token function">setAriaLabelspan><span class="token punctuation">(span><span class="token string">"Close"span><span class="token punctuation">)span><span class="token punctuation">;span>
            closeButton<span class="token punctuation">.span><span class="token function">addClickListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
                notification<span class="token punctuation">.span><span class="token function">closespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">HorizontalLayoutspan> layoutH <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">HorizontalLayoutspan><span class="token punctuation">(span>text<span class="token punctuation">,span> closeButton<span class="token punctuation">)span><span class="token punctuation">;span>
            layoutH<span class="token punctuation">.span><span class="token function">setAlignItemsspan><span class="token punctuation">(span><span class="token class-name">Alignmentspan><span class="token punctuation">.span><span class="token constant">CENTERspan><span class="token punctuation">)span><span class="token punctuation">;span>
            notification<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>layoutH<span class="token punctuation">)span><span class="token punctuation">;span>
            notification<span class="token punctuation">.span><span class="token keyword">openspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
       
        <span class="token function">addspan><span class="token punctuation">(span>s18<span class="token punctuation">,span>toast1<span class="token punctuation">,span>toast2<span class="token punctuation">,span>toast3<span class="token punctuation">,span>toast4<span class="token punctuation">)span><span class="token punctuation">;span>

MultiSelectListBox 列表框

MultiSelectListBox 列表框-测试代码案例

<span class="token comment">//列表框允许用户从可滚动的项目列表中选择一个或多个值span>
        <span class="token class-name">Spanspan> s19 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"MultiSelectListBox demo"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">MultiSelectListBoxspan><span class="token generics"><span class="token punctuation"><span><span class="token class-name">Countryspan><span class="token punctuation">>span>span> listBox <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">MultiSelectListBoxspan><span class="token generics"><span class="token punctuation"><span><span class="token punctuation">>span>span><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        listBox<span class="token punctuation">.span><span class="token function">setItemsspan><span class="token punctuation">(span><span class="token function">getCountriesspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        listBox<span class="token punctuation">.span><span class="token function">selectspan><span class="token punctuation">(span><span class="token function">getCountriesspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">getspan><span class="token punctuation">(span><span class="token number">0span><span class="token punctuation">)span><span class="token punctuation">,span> <span class="token function">getCountriesspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">getspan><span class="token punctuation">(span><span class="token number">3span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
        listBox<span class="token punctuation">.span><span class="token function">setHeightspan><span class="token punctuation">(span><span class="token string">"200px"span><span class="token punctuation">)span><span class="token punctuation">;span>
        listBox<span class="token punctuation">.span><span class="token function">setClassNamespan><span class="token punctuation">(span><span class="token string">"lstbox"span><span class="token punctuation">)span><span class="token punctuation">;span> <span class="token comment">//这里使用了自定义CSS文件中的CSS类名span>
        listBox<span class="token punctuation">.span><span class="token function">setTooltipTextspan><span class="token punctuation">(span><span class="token string">"this is a listbox"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token comment">// 设置展示给用户的名称span>
        listBox<span class="token punctuation">.span><span class="token function">setItemLabelGeneratorspan><span class="token punctuation">(span><span class="token class-name">Countryspan><span class="token operator">::span><span class="token function">getNamespan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token comment">// 添加一个值改变监听器span>
        listBox<span class="token punctuation">.span><span class="token function">addValueChangeListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">Stringspan> selectedCountries <span class="token operator">=span> event<span class="token punctuation">.span><span class="token function">getValuespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">streamspan><span class="token punctuation">(span><span class="token punctuation">)span>
                    <span class="token punctuation">.span><span class="token function">mapspan><span class="token punctuation">(span><span class="token class-name">Countryspan><span class="token operator">::span><span class="token function">getNamespan><span class="token punctuation">)span>
                    <span class="token punctuation">.span><span class="token function">reducespan><span class="token punctuation">(span><span class="token punctuation">(span>a<span class="token punctuation">,span> b<span class="token punctuation">)span> <span class="token operator">->span> a <span class="token operator">+span> <span class="token string">", "span> <span class="token operator">+span> b<span class="token punctuation">)span>
                    <span class="token punctuation">.span><span class="token function">orElsespan><span class="token punctuation">(span><span class="token string">"No countries selected"span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">Notificationspan><span class="token punctuation">.span><span class="token function">showspan><span class="token punctuation">(span>selectedCountries<span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token function">addspan><span class="token punctuation">(span>s19<span class="token punctuation">,span>listBox<span class="token punctuation">)span><span class="token punctuation">;span>

对应的自定义CSS配置

绘制自定义卡片

测试代码案例, 需要在自定义css文件里配置css ,然后在Java中声明使用的组件css

<span class="token selector">.cardspan> <span class="token punctuation">{span>
    <span class="token property">transitionspan><span class="token punctuation">:span> transform 0.2s<span class="token punctuation">;span>
<span class="token punctuation">}span>

<span class="token selector">.card:hoverspan> <span class="token punctuation">{span>
    <span class="token property">transformspan><span class="token punctuation">:span> <span class="token function">scalespan><span class="token punctuation">(span>1.05<span class="token punctuation">)span><span class="token punctuation">;span>
<span class="token punctuation">}span>

 <span class="token class-name">Divspan> card <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Divspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        card<span class="token punctuation">.span><span class="token function">setClassNamespan><span class="token punctuation">(span><span class="token string">"card"span><span class="token punctuation">)span><span class="token punctuation">;span> <span class="token comment">//使用的自定义cssspan>
        card<span class="token punctuation">.span><span class="token function">getElementspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">getStylespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">setspan><span class="token punctuation">(span><span class="token string">"border"span><span class="token punctuation">,span> <span class="token string">"1px solid #ccc"span><span class="token punctuation">)span><span class="token punctuation">;span>
        card<span class="token punctuation">.span><span class="token function">getElementspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">getStylespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">setspan><span class="token punctuation">(span><span class="token string">"border-radius"span><span class="token punctuation">,span> <span class="token string">"5px"span><span class="token punctuation">)span><span class="token punctuation">;span>
        card<span class="token punctuation">.span><span class="token function">getElementspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">getStylespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">setspan><span class="token punctuation">(span><span class="token string">"padding"span><span class="token punctuation">,span> <span class="token string">"16px"span><span class="token punctuation">)span><span class="token punctuation">;span>
        card<span class="token punctuation">.span><span class="token function">getElementspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">getStylespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">setspan><span class="token punctuation">(span><span class="token string">"width"span><span class="token punctuation">,span> <span class="token string">"300px"span><span class="token punctuation">)span><span class="token punctuation">;span>
        card<span class="token punctuation">.span><span class="token function">getElementspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">getStylespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">.span><span class="token function">setspan><span class="token punctuation">(span><span class="token string">"box-shadow"span><span class="token punctuation">,span> <span class="token string">"0 4px 8px rgba(0,0,0,0.1)"span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token comment">// 添加标题span>
        <span class="token class-name">H3span> title <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">H3span><span class="token punctuation">(span><span class="token string">"Card Title"span><span class="token punctuation">)span><span class="token punctuation">;span>
        card<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>title<span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token comment">// 添加图片span>
<span class="token comment">//        Image image = new Image("https://via.placeholder.com/300", "Placeholder image");span>
        <span class="token class-name">Imagespan> image <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Imagespan><span class="token punctuation">(span><span class="token string">"https://images.unsplash.com/photo-1512273222628-4daea6e55abb?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"span><span class="token punctuation">,span> <span class="token string">"Placeholder image"span><span class="token punctuation">)span><span class="token punctuation">;span>
        image<span class="token punctuation">.span><span class="token function">setWidthspan><span class="token punctuation">(span><span class="token string">"300px"span><span class="token punctuation">)span><span class="token punctuation">;span>
        card<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>image<span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token comment">// 添加按钮span>
        <span class="token class-name">Buttonspan> button <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Buttonspan><span class="token punctuation">(span><span class="token string">"Click me"span><span class="token punctuation">)span><span class="token punctuation">;span>
        card<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>button<span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token function">addspan><span class="token punctuation">(span>card<span class="token punctuation">)span><span class="token punctuation">;span>

FormLayout 表单布局

测试代码案例

<span class="token class-name">Spanspan> fSpan <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"FormLayout demo"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">TextFieldspan> firstName <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TextFieldspan><span class="token punctuation">(span><span class="token string">"First name"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">TextFieldspan> lastName <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TextFieldspan><span class="token punctuation">(span><span class="token string">"Last name"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">TextFieldspan> username <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">TextFieldspan><span class="token punctuation">(span><span class="token string">"Username"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">PasswordFieldspan> password <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">PasswordFieldspan><span class="token punctuation">(span><span class="token string">"Password"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">PasswordFieldspan> confirmPassword <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">PasswordFieldspan><span class="token punctuation">(span><span class="token string">"Confirm password"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">FormLayoutspan> formLayout <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">FormLayoutspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        formLayout<span class="token punctuation">.span><span class="token function">addspan><span class="token punctuation">(span>firstName<span class="token punctuation">,span> lastName<span class="token punctuation">,span> username<span class="token punctuation">,span> password<span class="token punctuation">,span> confirmPassword<span class="token punctuation">)span><span class="token punctuation">;span>
        formLayout<span class="token punctuation">.span><span class="token function">setResponsiveStepsspan><span class="token punctuation">(span>
                <span class="token comment">// Use one column by defaultspan>
                <span class="token keyword">newspan> <span class="token class-name">FormLayout<span class="token punctuation">.span>ResponsiveStepspan><span class="token punctuation">(span><span class="token string">"0"span><span class="token punctuation">,span> <span class="token number">1span><span class="token punctuation">)span><span class="token punctuation">,span>
                <span class="token comment">// Use two columns, if layout's width exceeds 500pxspan>
                <span class="token keyword">newspan> <span class="token class-name">FormLayout<span class="token punctuation">.span>ResponsiveStepspan><span class="token punctuation">(span><span class="token string">"500px"span><span class="token punctuation">,span> <span class="token number">2span><span class="token punctuation">)span><span class="token punctuation">)span><span class="token punctuation">;span>
<span class="token comment">// Stretch the username field over 2 columnsspan>
        formLayout<span class="token punctuation">.span><span class="token function">setColspanspan><span class="token punctuation">(span>username<span class="token punctuation">,span> <span class="token number">2span><span class="token punctuation">)span><span class="token punctuation">;span>
        
        <span class="token function">addspan><span class="token punctuation">(span>fSpan<span class="token punctuation">,span>formLayout<span class="token punctuation">)span><span class="token punctuation">;span>

Upload 文件上传组件

测试代码案例

<span class="token class-name">Spanspan> sSpan <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Spanspan><span class="token punctuation">(span><span class="token string">"Upload demo"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">MultiFileMemoryBufferspan> buffer <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">MultiFileMemoryBufferspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">Uploadspan> upload <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Uploadspan><span class="token punctuation">(span>buffer<span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token comment">//限制上传文件格式span>
        <span class="token comment">//  upload.setAcceptedFileTypes("application/pdf", ".pdf");span>
        <span class="token comment">//默认情况下，“上传”不限制可以上传的文件数量。但是，您可以设置文件计数限制span>
        upload<span class="token punctuation">.span><span class="token function">setMaxFilesspan><span class="token punctuation">(span><span class="token number">3span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token comment">//设置最大字节数来限制文件大小。但默认情况下，没有限制span>
        <span class="token comment">// 10MBspan>
        <span class="token keyword">intspan> maxFileSizeInBytes <span class="token operator">=span> <span class="token number">10span> <span class="token operator">*span> <span class="token number">1024span> <span class="token operator">*span> <span class="token number">1024span><span class="token punctuation">;span>
        upload<span class="token punctuation">.span><span class="token function">setMaxFileSizespan><span class="token punctuation">(span>maxFileSizeInBytes<span class="token punctuation">)span><span class="token punctuation">;span>
        upload<span class="token punctuation">.span><span class="token function">addSucceededListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">Stringspan> fileName <span class="token operator">=span> event<span class="token punctuation">.span><span class="token function">getFileNamespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            log<span class="token punctuation">.span><span class="token function">infospan><span class="token punctuation">(span><span class="token string">"fileName:{}"span><span class="token punctuation">,span> fileName<span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">Stringspan> mainName <span class="token operator">=span> <span class="token class-name">FileNameUtilspan><span class="token punctuation">.span><span class="token function">mainNamespan><span class="token punctuation">(span>fileName<span class="token punctuation">)span><span class="token punctuation">;span>
            log<span class="token punctuation">.span><span class="token function">infospan><span class="token punctuation">(span><span class="token string">"file mainName:{}"span><span class="token punctuation">,span> mainName<span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">Stringspan> extName <span class="token operator">=span> <span class="token class-name">FileNameUtilspan><span class="token punctuation">.span><span class="token function">extNamespan><span class="token punctuation">(span>fileName<span class="token punctuation">)span><span class="token punctuation">;span>
            log<span class="token punctuation">.span><span class="token function">infospan><span class="token punctuation">(span><span class="token string">"file extName:{}"span><span class="token punctuation">,span> extName<span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">InputStreamspan> in <span class="token operator">=span> buffer<span class="token punctuation">.span><span class="token function">getInputStreamspan><span class="token punctuation">(span>fileName<span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token comment">// Do something with the file dataspan>
            <span class="token comment">// processFile(inputStream, fileName);span>
            <span class="token class-name">BufferedOutputStreamspan> out <span class="token operator">=span> <span class="token class-name">FileUtilspan><span class="token punctuation">.span><span class="token function">getOutputStreamspan><span class="token punctuation">(span><span class="token string">"/Users/xxx/Documents/"span><span class="token operator">+span>fileName<span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token keyword">longspan> copySize <span class="token operator">=span> <span class="token class-name">IoUtilspan><span class="token punctuation">.span><span class="token function">copyspan><span class="token punctuation">(span>in<span class="token punctuation">,span> out<span class="token punctuation">,span> <span class="token class-name">IoUtilspan><span class="token punctuation">.span><span class="token constant">DEFAULT_BUFFER_SIZEspan><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">Systemspan><span class="token punctuation">.span>err<span class="token punctuation">.span><span class="token function">printlnspan><span class="token punctuation">(span>copySize<span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">IoUtilspan><span class="token punctuation">.span><span class="token function">closeIfPosiblespan><span class="token punctuation">(span>in<span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">IoUtilspan><span class="token punctuation">.span><span class="token function">closeIfPosiblespan><span class="token punctuation">(span>out<span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>
        upload<span class="token punctuation">.span><span class="token function">addFileRejectedListenerspan><span class="token punctuation">(span>event <span class="token operator">->span> <span class="token punctuation">{span>
            <span class="token class-name">Stringspan> errorMessage <span class="token operator">=span> event<span class="token punctuation">.span><span class="token function">getErrorMessagespan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
            <span class="token class-name">Notificationspan> notification <span class="token operator">=span> <span class="token class-name">Notificationspan><span class="token punctuation">.span><span class="token function">showspan><span class="token punctuation">(span>errorMessage<span class="token punctuation">,span> <span class="token number">5000span><span class="token punctuation">,span>
                    <span class="token class-name">Notification<span class="token punctuation">.span>Positionspan><span class="token punctuation">.span><span class="token constant">MIDDLEspan><span class="token punctuation">)span><span class="token punctuation">;span>
            notification<span class="token punctuation">.span><span class="token function">addThemeVariantsspan><span class="token punctuation">(span><span class="token class-name">NotificationVariantspan><span class="token punctuation">.span><span class="token constant">LUMO_ERRORspan><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token punctuation">}span><span class="token punctuation">)span><span class="token punctuation">;span>

        
        <span class="token function">addspan><span class="token punctuation">(span>sSpan<span class="token punctuation">,span>upload<span class="token punctuation">)span><span class="token punctuation">;span>

Image 图片展示组件

测试代码案例

<span class="token comment">//        Image imageTest = new Image("images/empty-plant.png", "My Alt Image");span>
        <span class="token class-name">Imagespan> imageTest <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">Imagespan><span class="token punctuation">(span><span class="token string">"https://images.unsplash.com/photo-1519681393784-d120267933ba?ixid=MXwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=750&q=80"span><span class="token punctuation">,span> <span class="token string">"My Alt Image"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">SvgIconspan> svgIcon <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">SvgIconspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        svgIcon<span class="token punctuation">.span><span class="token function">setSrcspan><span class="token punctuation">(span><span class="token string">"icons/hellokitty_1.svg"span><span class="token punctuation">)span><span class="token punctuation">;span>
        <span class="token class-name">SvgIconspan> svgIcon2 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">SvgIconspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        svgIcon2<span class="token punctuation">.span><span class="token function">setSrcspan><span class="token punctuation">(span><span class="token string">"icons/hellokitty.svg"span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token class-name">SvgIconspan> svgIcon3 <span class="token operator">=span> <span class="token keyword">newspan> <span class="token class-name">SvgIconspan><span class="token punctuation">(span><span class="token punctuation">)span><span class="token punctuation">;span>
        svgIcon3<span class="token punctuation">.span><span class="token function">setSrcspan><span class="token punctuation">(span><span class="token string">"icons/hello.svg"span><span class="token punctuation">)span><span class="token punctuation">;span>

        <span class="token function">addspan><span class="token punctuation">(span>imageTest<span class="token punctuation">,span>svgIcon<span class="token punctuation">,span>svgIcon2<span class="token punctuation">,span>svgIcon3<span class="token punctuation">)span><span class="token punctuation">;span>