<!-- Standard -->
<select class="select" id="select-e45d" name="select-e45d">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option value="Option 1 value" id="option1Id">Option 1</option>
  <option value="Option 2 value" id="option2Id">Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.</option>
  <option value="Option 3 value" id="option3Id">Option 3</option>
</select>

<!-- Ohne Rand -->
<select class="select select--borderless" id="select-473b" name="select-473b">
  <option value="Option 1 value" id="option1Id">Option 1</option>
  <option value="Option 2 value" id="option2Id">Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.</option>
  <option value="Option 3 value" id="option3Id">Option 3</option>
</select>

<!-- Deaktiviert -->
<select class="select" id="select-b11e" name="select-b11e" disabled="disabled">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option value="Option 1 value" id="option1Id">Option 1</option>
  <option value="Option 2 value" id="option2Id">Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.</option>
  <option value="Option 3 value" id="option3Id">Option 3</option>
</select>

<!-- Invalide -->
<select class="select" required="required" id="select-9a26" name="select-9a26" aria-invalid="true">
  <option class="select__hint" disabled="disabled" selected="selected" value="">Auswählen</option>
  <option value="Option 1 value" id="option1Id">Option 1</option>
  <option value="Option 2 value" id="option2Id">Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.</option>
  <option value="Option 3 value" id="option3Id">Option 3</option>
</select>

-
  //- Prepare attr object
  attr = attr || {};
  attr.class = classList(attr.class);
  attr.id = id || attr.id || `select-${randomString()}`;
  attr.name = name || attr.name || attr.id;

  //- Process options
  if (disabled) {
    attr.disabled = true;
  }

  if (invalid) {
    attr['aria-invalid'] = 'true';
  }

  if (borderless) {
    attr.class.push('select--borderless');
  }

  if (size) {
    attr.class.push(`select--${size}`);
  }

//- Render atom
select.select(required=required)&attributes(attr)
  if hasPleaseSelectOption
    option.select__hint(disabled, selected, value='') Auswählen
  if options
    for option, optionIndex in options
      -
        //- Prepare option attributes
        optionAttr = option.attr || {}

        //- Selected option
        if (optionIndex === selectedOption) optionAttr['selected'] = 'selected';
        if (option.id) optionAttr.id = option.id;

      if option.value
        option(value=option.value)&attributes(optionAttr) #{option.text}
      else
        option&attributes(optionAttr) #{option}
/* Standard */
{
  "hasPleaseSelectOption": true,
  "options": [
    {
      "text": "Option 1",
      "value": "Option 1 value",
      "id": "option1Id"
    },
    {
      "text": "Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.",
      "value": "Option 2 value",
      "id": "option2Id"
    },
    {
      "text": "Option 3",
      "value": "Option 3 value",
      "id": "option3Id"
    }
  ]
}

/* Ohne Rand */
{
  "hasPleaseSelectOption": null,
  "options": [
    {
      "text": "Option 1",
      "value": "Option 1 value",
      "id": "option1Id"
    },
    {
      "text": "Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.",
      "value": "Option 2 value",
      "id": "option2Id"
    },
    {
      "text": "Option 3",
      "value": "Option 3 value",
      "id": "option3Id"
    }
  ],
  "borderless": true
}

/* Deaktiviert */
{
  "hasPleaseSelectOption": true,
  "options": [
    {
      "text": "Option 1",
      "value": "Option 1 value",
      "id": "option1Id"
    },
    {
      "text": "Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.",
      "value": "Option 2 value",
      "id": "option2Id"
    },
    {
      "text": "Option 3",
      "value": "Option 3 value",
      "id": "option3Id"
    }
  ],
  "disabled": true
}

/* Invalide */
{
  "hasPleaseSelectOption": true,
  "options": [
    {
      "text": "Option 1",
      "value": "Option 1 value",
      "id": "option1Id"
    },
    {
      "text": "Option 2 wirklich, wirklich extra lang. Also wirklich extra lang.",
      "value": "Option 2 value",
      "id": "option2Id"
    },
    {
      "text": "Option 3",
      "value": "Option 3 value",
      "id": "option3Id"
    }
  ],
  "invalid": true,
  "required": true
}

  • Content:
    export default class Select {
      constructor($el) {
        this.$el = $el;
    
        this.initEvents();
        this.initSelected();
      }
    
      initEvents() {
        this.$el.addEventListener('change', () => {
          this.addSelected();
        });
      }
    
      initSelected() {
        if (this.$el.selectedIndex !== 0) this.addSelected();
      }
    
      addSelected() {
        this.$el.classList.add('select--selected');
      }
    }
    
    // Initialize Select
    document
      .querySelectorAll('.select')
      .forEach($el => new Select($el));
    
  • URL: /components/raw/select/select.js
  • Filesystem Path: src/components/atoms/select/select.js
  • Size: 481 Bytes
  • Content:
    // Select settings
    $default-select-size: 4.5rem;
    $default-select-font-size: 1.7rem;
    
    // Select styles
    .select {
      @mixin select-svg($color: $color-steelgrey-xdark) {
        background-image: svg-url('<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 10 6" width="10" height="6"><path fill="' + $color + '" fill-rule="evenodd" d="M4.96 3.54L1.7.3C1.33-.1.7-.1.3.3-.1.67-.1 1.3.3 1.7l3.95 3.96c.4.4 1.02.4 1.4 0L9.63 1.7c.4-.38.4-1.02 0-1.4-.4-.4-1.02-.4-1.4 0L4.95 3.53z"/></svg>');
      }
    
      $calc-padding: calc((#{$default-input-size} - #{$root-line-height} * #{$default-input-font-size}) / 2 - 1px);
    
      @include select-svg();
    
      appearance: none;
      background-color: #fff;
      background-position: calc(100% - 1rem - 1px) 50%;
      background-repeat: no-repeat;
      background-size: 10px 6px;
      border: 1px solid $color-anthracite;
      border-radius: 3px;
      color: $color-steelgrey-xdark;
      cursor: pointer;
      display: block;
      font-size: $default-select-font-size;
      font-weight: normal;
      height: $default-select-size;
      line-height: $root-line-height;
      max-width: 100%;
      padding: $calc-padding 3rem $calc-padding 1rem;
      position: relative;
      text-overflow: ellipsis;
      transition-duration: $default-transition-duration;
      transition-property: border-color;
      width: 100%;
    
      option {
        color: $root-color;
      }
    
      // Hide select arrow on IE10+
      &::-ms-expand {
        display: none;
      }
    
      // Focus, Hover
      &:hover,
      &:focus {
        border-color: $color-steelgrey-xdark;
        outline: 0;
      }
    
      // Disabled as last to override hover/focus styles
      &[disabled] {
        border-color: $color-steelgrey;
        color: $color-steelgrey-dark;
      }
    
      // Remove outline on invalid
      &:invalid {
        box-shadow: none;
      }
    
      // Invalid
      &[aria-invalid='true'] {
        @include select-svg($color-red);
    
        background-color: rgba($color-red, 0.2);
        border-color: $color-red;
        color: $color-red;
      }
    }
    
    .select--selected {
      color: $root-color;
    }
    
    .select--small {
      max-width: 35.5rem;
    }
    
    .select--borderless {
      border: 0;
    }
    
    // .select__hint {
    //   display: none;
    // }
    
  • URL: /components/raw/select/select.scss
  • Filesystem Path: src/components/atoms/select/select.scss
  • Size: 2.1 KB

There are no notes for this item.