Mithilfe der Drag & Drop-Mechanik kann der Nutzer Elemente verschieben, die Reihenfolge einer Sortierung ändern oder ein Element an einem bestimmten Ort ablegen.

Die Größe der Drag & Drop-Komponenten ist abhängig von der jeweils verwendeten Basisschriftgröße gestaltet, die sich der jeweiligen Viewportbreite anpassen kann. Dementsprechend ist die Größe der Komponenten flexibel. Sie stehen in dunkler und heller Version zur Verfügung.

Draggable List

Elemente der sortierbaren Liste können in ihrer Platzierung zueinander verschoben werden. Bei Bewegung eines Eintrags werden mögliche Ablageorte grafisch gekennzeichnet.

  • Item 1
  • Item 2
  • Item 3
  • Item 4
  • Item 5
HTML
<ul class="aui-draggable-list">
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 1</li>
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 2</li>
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 3</li>
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 4</li>
  <li class="aui-draggable aui-draggable-list__item" draggable="true">Item 5</li>
</ul>

Dropzone

Die Dropzone ermöglicht es, Dateien auf intuitive Weise hochzuladen. Beim Verschieben einer Datei per Drag & Drop wird der Bereich, in dem sie abgelegt werden kann, grafisch hervorgehoben.

Die Dropzone sollte nur eingesetzt werden, wenn das Verschieben von Dateien per Drag & Drop im System möglich ist.

Drop here
HTML
<div class="aui-dropzone">
  <div class="aui-dropzone__message">
    Drop here
  </div>
</div>

Audi UI Kit – Integration in die Sketch library

Um sicherzustellen, dass Designer die aktuellsten Komponenten und Icons in ihren Produkten verwenden, wurde das Audi UI Kit als Sketch library erstellt. Integrieren Sie diese UI-Kits, um die neuesten Audi Sketch libraries zu erhalten. Die UI Kits werden regelmäßig aktualisiert und die User informiert, sobald eine neue Versionen der Bibliotheken verfügbar ist.

 

Audi UI Kit für Figma

Um möglichst vielen Designern die Arbeit mit den Audi User Interface Komponenten zu ermöglichen, wird das UI Kit und die Icons auch für Figma angeboten. Updates werden regelmäßig durchgeführt und alle Änderungen werden im Changelog dokumentiert.

Audi Figma UI-Kit und Icons
Figma-Dateien für UI-Komponenten, Icon Library und eine Readme-Datei für den Einstieg und das Vorgehen bei der Aktualisierung der Dateien.
ZIP
20.9 MB

Anwendungsbeispiele

Don’ts

Zu kleine Dropzones sollten vermieden werden.
Drag & Drop-Komponenten nicht auf Rot platzieren.
Dropzones nicht auf Rot platzieren.