Form Message

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


        
        
            <!-- Default -->
<div class="formMessage js-formValidator-message">
    Ich bin ein Hinweis.
</div>


        
            <!-- Valid -->
<div class="formMessage js-formValidator-message" data-invalid="false">
    Ich bin erfolgreich geprüft.
</div>


        
            <!-- Invalid -->
<div class="formMessage js-formValidator-message" data-invalid="true">
    Ich bin die Fehlerbeschreibung.
</div>


        
            <!-- Disabled -->
<div class="formMessage js-formValidator-message" data-disabled="true">
    Dieses Angaben können nicht geändert werden.
</div>

Handle: @formmessage
Variants (4): Default , Valid , Invalid , Disabled
Preview:
- With layout
- Component only
Filesystem Path: components/03-fragments/formFragments/formMessage/formMessage.html
Referenced by (64): @formcombobox, @formfield, @formfield--text, @formfield--password, @formfield--email, @formfield--tel, @formfield--url, @formfield--number, @formfield--date, @formfield--datetime-local, @formfield--required, @formfield--valid, @formfield--invalid, @formfield--disabled, @formfieldcombo, @formfieldcombo--with-select, @formfieldcombo--required, @formfieldcombo--valid, @formfieldcombo--invalid, @formfieldcombo--disabled, @formselect, @formselect--disabled, @formselect--valid, @formselect--invalid, @formselect--multiple-select, @formtextarea, @formtextarea--required, @formtextarea--valid, @formtextarea--invalid, @formtextarea--disabled, @formtoggle, @formtoggle--valid, @formtoggle--invalid, @formtoggle--disabled, @formtoggle--checked-disabled, @formtoggle--small, @formtoggle--radio, @formtoggle--radio-valid, @formtoggle--radio-invalid, @formtoggle--radio-disabled, @formtoggle--radio-checked-disabled, @formtoggle--switch, @formtoggle--switch-valid, @formtoggle--switch-invalid, @formtoggle--switch-disabled, @formtoggle--switch-checked-disabled, @formtoggleset, @formtoggleset--valid, @formtoggleset--invalid, @formtoggleset--disabled, @formtoggleset--single-item, @formtoggleset--stacked, @formtoggleset--radiobuttons, @formtoggleset--radiobuttons--valid, @formtoggleset--radiobuttons--invalid, @formtoggleset--radiobuttons--disabled, @formtoggleset--radiobuttons--stacked, @formtoggleset--switches, @formtoggleset--switches--valid, @formtoggleset--switches--invalid, @formtoggleset--switches--disabled, @formupload, @formupload--disabled, @formupload--invalid


        <div class="formMessage js-formValidator-message{{#modifier}} {{.}}{{/modifier}}"{{#if is-disabled}} data-disabled="true"{{/if}}{{#if is-valid}} data-invalid="false"{{/if}}{{#if is-invalid}} data-invalid="true"{{/if}}>
    {{{content}}}
</div>


        
        
            /* Default */
{
  "content": "Ich bin ein Hinweis."
}


        
            /* Valid */
{
  "content": "Ich bin erfolgreich geprüft.",
  "is-valid": true
}


        
            /* Invalid */
{
  "content": "Ich bin die Fehlerbeschreibung.",
  "is-invalid": true
}


        
            /* Disabled */
{
  "content": "Dieses Angaben können nicht geändert werden.",
  "is-disabled": true
}

File:

Content:


                                $formMessage_styles: (
    margin-top: 0em,
) !default;

@import "_formMessage.settings";
@import "_formMessage.styles";

URL: /components/raw/formmessage/_formMessage.scss
Filesystem Path: components/03-fragments/formFragments/formMessage/_formMessage.scss
Size: 121 Bytes

Content:


                                $formMessage_styles: (
    margin-top: .2em,
) !default;

URL: /components/raw/formmessage/_formMessage.settings.scss
Filesystem Path: components/03-fragments/formFragments/formMessage/_formMessage.settings.scss
Size: 57 Bytes

Content:


                                %formMessage {
    @extend %hint;
    @include styles($formMessage_styles);

    [data-invalid="false"] &,
    &[data-invalid="false"],
    &--success {
    }

    [data-invalid="true"] &,
    &[data-invalid="true"],
    &--error {
    }

    [data-disabled="true"] &,
    &[data-disabled="true"],
    &--disabled {
        @extend %hint--disabled;
    }

    // Modern way: Mark label without own modifier

    *:has(> [aria-invalid="false"]) & {
    }

    *:has(> [aria-invalid="true"]) & {
    }

}

.formMessage {
    @extend %formMessage;
}

URL: /components/raw/formmessage/_formMessage.styles.scss
Filesystem Path: components/03-fragments/formFragments/formMessage/_formMessage.styles.scss
Size: 548 Bytes