Codename个TextComponent

Question

尝试使用TextComponent，但我无法为其设置样式，如下图所示；

TextComponent username =  new TextComponent().labelAndHint("UserNmae").constraint(TextField.ANY);
        FontImage.setMaterialIcon(username.getField().getHintLabel(), FontImage.MATERIAL_PERSON);

Answer 1

TextComponent当时不允许该特定设计。圆形边框非常简单：

TextField {
    border: 1pt solid blue;
    border-radius: 0.5mm;
    padding: 2mm;
}

但是，当前API本身位于边框上的文字叠加层存在问题。这可能是可以通过向TextComponent添加另一种顶部模式来增强的，该模式会将CENTER_BEHAVIOR_TOTAL_BELOW用于此处的BorderLayout。

但是，目前我们建议使用稍微不同的设计，例如：

    TextComponent login = new TextComponent().
            label("Login").
            descriptionMessage("Enter your email").
            constraint(TextArea.EMAILADDR).
            action(MATERIAL_ARROW_FORWARD).
            actionClick(e ->
                    SigninStep2Form.create().show());

CSS为：

#Constants {
    includeNativeBool: true; 
    scrollVisibleBool: false;
    labelGap: 2;
    textComponentOnTopBool: true;
    textComponentAnimBool: false;
    textCmpVAlignInt: 0;
    textComponentFieldUIID: TextComponentField;
}

Form {
    background: white;
}

TextComponentField {
    background: #EDEDED;
    padding-left: 1mm;
    padding-bottom: 1.5mm;
    padding-top: 0.5mm;
    padding-left: 3mm;
    margin: 0px;
    font-family:  "native:MainRegular";
    font-size: 3mm;
    color: black;
    border: none;
    border-bottom: 0.25mm solid #9a9a9a;
}

InputComponentAction {
    padding: 1mm;
    background: transparent;
    border: none;
}

FloatingHint {
    font-family:  "native:MainRegular";
    font-size: 2mm;
    color: #5e5e5e;
    margin: 0px;
    padding-top: 1.5mm;
    padding-right: 1mm;
    padding-bottom: 0px;
    padding-left: 3mm;
    background: #EDEDED;
    border-top-left-radius: 1mm;
    border-top-right-radius: 1mm;
}

TextComponent {
    background: white;
    border: none;
    padding: 1mm;
    margin: 0px;
}

ErrorLabel {
    padding-top: 0.5mm;
    background: transparent;
    padding-left: 3mm;
}

DescriptionLabel {
    padding-top: 0.5mm;
    padding-left: 3mm;
    background: transparent;
}

生成的文本组件如下所示：