Listing Actions

Beispiele

  • webshop

Listing-actions werden am Anfang oder am Ende einer List gezeigt und binhalten die interaktinen zu einer Liste

Meine Listen

neue Liste

Neue Liste 2017-02-08

<div class="listing-actions mbl"> <div class="listing-actions-title"> <h2>Meine Listen</h2> <a href="/demos/webshop/list-add.html" class="btn btn-default btn--has-icon"> <span class="icon-wrapper"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#plus"></use> </svg> </span> <span class="title"> neue Liste </span> </a> </div> <form class="searchform "> <input class="form-control " type="text" placeholder=""> <buton class="btn btn iconButton iconButton--type-d search-button"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#search"></use> </svg> <span class="title"> <!-- --> </span> </buton> </form> <select class="form-control selectOption " id=""> <option>Nach Name absteigend</option> <option>Nach Datum absteigend</option> </select> </div> <div class="listing-actions mbl"> <div class="listing-actions-title"> <h2> <span class="form-input-editable form-input-editable-lg" data-activator="#editableActivator" data-confirm="#editableConfirm" data-cancel="#editableCancel" data-placeholder="placeholder" data-input-class="form-control" data-has-ajax="false" data-ajax-url="" data-ajax-method="" > <span class="form-input-editable-value " >Neue Liste 2017-02-08</span> <span class="form-input-editable-error"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#warning"></use> </svg> </span> <span class="form-input-editable-loader"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#loader"></use> </svg> </span> <a class="btn iconButton iconButton--type-d edit editable-button shown" > <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#edit"></use> </svg> <span class="title"> <!-- --> </span> </a> <a class="btn iconButton iconButton--type-d confirm editable-button" > <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#check"></use> </svg> <span class="title"> <!-- --> </span> </a> <a class="btn iconButton iconButton--type-d cancel editable-button" > <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#exit"></use> </svg> <span class="title"> <!-- --> </span> </a> </span> </h2> </div> <div class="listing-actions-body"> <a class="link-icon link--is-lg" href="#"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#print"></use> </svg> <span class="link-label">drucken</span> </a> <a class="link-icon link--is-lg" href="#"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#download"></use> </svg> <span class="link-label">download</span> </a> <a class="btn btn iconButton iconButton--type-a mls"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#cart"></use> </svg> <span class="title"> <!-- --> </span> </a> </div> </div> <div class="listing-actions mbl"> <div class="listing-actions-title"> </div> <div class="listing-actions-body"> <div class="toggle-box"> <label>Bilder</label> <div class="form-group form-checkbox toggle-switch"> <input type="checkbox" id="bilder-ausblenden" name="checkboxGroup" checked /> <label for="bilder-ausblenden"> <span> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#check"></use> </svg> </span> <span class="checkbox-label"> bilder-ausblenden </span> </label> </div> </div> <div class="toggle-box"> <label>Details</label> <div class="form-group form-checkbox toggle-switch"> <input type="checkbox" id="details-ausblenden" name="checkboxGroup" checked /> <label for="details-ausblenden"> <span> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#check"></use> </svg> </span> <span class="checkbox-label"> details-ausblenden </span> </label> </div> </div> <select class="form-control selectOption " id=""> <option value="" disabled="disabled">Artikel pro Seite:</option> <option value="12">12</option> <option value="24" selected="selected">24</option> <option value="36">36</option> <option value="48">48</option> </select> </div> </div> <div class="listing-actions mbl"> <div class="listing-actions-title"> <a class="link-icon link--is-lg" href="#"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#exit"></use> </svg> <span class="link-label">Liste leeren</span> </a> <a class="link-icon link--is-lg" href="#"> <svg class="icon " viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#trash"></use> </svg> <span class="link-label">Liste löschen</span> </a> </div> <a class="btn btn-primary"> Liste speichern </a> <a class="btn btn iconButton iconButton--type-a mls"> <svg class="icon" viewBox="0 0 32 32"> <use xlink:href="/assets/toolkit/svg/sprite.symbol.svg#cart"></use> </svg> <span class="title"> <!-- --> </span> </a> </div>