Page Comparison

...

Shortly, we will publish a website that shows all styles used as an example application on https://yuuvis-cc.yuuvis.org/

Changing

...

the Appearance of Form Controls

As with most of the components from of the @yuuvis/framework, you are able to overwrite styling using CSS. For To globally changing change the lok look and feel of components, we would recomment recommend to create a new *.scss file that you them import in your projects project's styles.scss (Make sure to palce the import after the imported styles from @yuuvis/framework). The following code snipped is changing snippet changes the position of labels in the form:forms:

yuv-object-form .yuv-form-input:not(.checkbox) .fe-wrapper {
  > label {
    order: 0;
  }
  > .control {
    order: 1;
  }
  > .tag {
    order: 2;
  }
}

You could also position the labels at the top of the input:

yuv-object-form .yuv-form-input:not(.checkbox) .fe-wrapper {
  display: grid;
  grid-template-rows: auto 1fr;
  grid-template-columns: auto 1fr;
  grid-template-areas:
    'label tag'
    'fe fe';

  > label {
    grid-area: label;
  }
  > .control {
    grid-area: fe;
  }
  > .tag {
    grid-area: tag;
  }
}