hkk Frontend 2017

Auswahlfeld 

<!-- Standard -->
<select class="select" id="select-0722" name="select-0722">
  <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-e855" name="select-e855">
  <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-3611" name="select-3611" 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-9941" name="select-9941" 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.