List Group: With Actions

Prototype

HTML
View
Context
Assets
Info
Notes


        
        <div class="kx-listgroup">
    <ul class="kx-listgroup__list">
        <li class="kx-listgroup__row">
            <!-- LINK AS BUTTON Component -->
            <a class="kx-btn kx-listgroup__link" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Pacific Drilling</span>
    </span>
</a>
            <!-- BUTTON-GROUP Component -->
            <div class="kx-btngroup kx-flex kx-flex-wrap kx-btngroup--fit-tight kx-listgroup__actions" role="group" aria-label="Actions">
                <!-- LINK AS BUTTON Component -->
                <a class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-btn--icon" href="#" aria-label="Bookmark">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#bookmark"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Bookmark</span>
    </span>
</a>
                <!-- BUTTON Component -->
                <button class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-btn--icon" aria-label="Settings">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#cog"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Settings</span>
    </span>
</button>
                <!-- BUTTON Component -->
                <button class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-btn--icon" aria-label="Delete">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#close"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Delete</span>
    </span>
</button>
            </div>
        </li>
        <li class="kx-listgroup__row">
            <!-- LINK AS BUTTON Component -->
            <a class="kx-btn kx-listgroup__link" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Floatel test</span>
    </span>
</a>
            <!-- BUTTON-GROUP Component -->
            <div class="kx-btngroup kx-flex kx-flex-wrap kx-btngroup--fit-tight kx-listgroup__actions" role="group" aria-label="Actions">
                <!-- LINK AS BUTTON Component -->
                <a class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-btn--icon" href="#" aria-label="Bookmark">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#bookmark"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Bookmark</span>
    </span>
</a>
                <!-- BUTTON Component -->
                <button class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-btn--icon" aria-label="Settings">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#cog"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Settings</span>
    </span>
</button>
                <!-- BUTTON Component -->
                <button class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-btn--icon" aria-label="Delete">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#close"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Delete</span>
    </span>
</button>
            </div>
        </li>
        <li class="kx-listgroup__row">
            <!-- LINK AS BUTTON Component -->
            <a class="kx-btn kx-listgroup__link" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">Maersk</span>
    </span>
</a>
            <!-- BUTTON-GROUP Component -->
            <div class="kx-btngroup kx-flex kx-flex-wrap kx-btngroup--fit-tight kx-listgroup__actions" role="group" aria-label="Actions">
                <!-- LINK AS BUTTON Component -->
                <a class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-btn--icon" href="#" aria-label="Bookmark">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#bookmark"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Bookmark</span>
    </span>
</a>
                <!-- BUTTON Component -->
                <button class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-btn--icon" aria-label="Settings">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#cog"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Settings</span>
    </span>
</button>
                <!-- BUTTON Component -->
                <button class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-btn--icon" aria-label="Delete">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#close"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Delete</span>
    </span>
</button>
            </div>
        </li>
        <li class="kx-listgroup__row">
            <!-- LINK AS BUTTON Component -->
            <a class="kx-btn kx-listgroup__link" href="#">
    <span class="kx-btn__inner">
        <span class="kx-btn__txt">BWO</span>
    </span>
</a>
            <!-- BUTTON-GROUP Component -->
            <div class="kx-btngroup kx-flex kx-flex-wrap kx-btngroup--fit-tight kx-listgroup__actions" role="group" aria-label="Actions">
                <!-- LINK AS BUTTON Component -->
                <a class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-btn--icon" href="#" aria-label="Bookmark">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#bookmark"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Bookmark</span>
    </span>
</a>
                <!-- BUTTON Component -->
                <button class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-btn--icon" aria-label="Settings">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#cog"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Settings</span>
    </span>
</button>
                <!-- BUTTON Component -->
                <button class="kx-btn kx-btn--skin-flat kx-btn--size-base kx-btn--icon" aria-label="Delete">
    <span class="kx-btn__inner">
        <!-- ICON Component -->
<i class="kx-icon kx-icon--size-base">
    <svg focusable="false">
        <use xlink:href="../../assets/img/icons/sprites/icons.svg#close"></use>
    </svg>
</i>
        <span class="kx-btn__txt kx-is-vishidden">Delete</span>
    </span>
</button>
            </div>
        </li>
    </ul>
</div>


        <div class="kx-listgroup">
    {% if title -%}
    <header class="kx-listgroup__header">
        <h4 class="kx-listgroup__title">
            {{ title }}
        </h4>
    </header>
    {% endif -%}
    <ul class="kx-listgroup__list">
        {% for row in rows -%}
        <li class="kx-listgroup__row{% if row.selected %} kx-is-selected{% endif %}">
            {% if row.href -%}
            {% render '@button', { text: row.label, href: row.href, classes: ['kx-listgroup__link'] } %}
            {% else -%}
            <span>{{ row.label }}</span>
            {% endif -%}

            {% if row.metaData -%}
            <span class="kx-listgroup__metadata">{{ row.metaData }}</span>
            {% endif -%}

            {% if row.badge -%}
            {% render '@badge', { text: row.badge, skin: 'info' } -%}
            {% endif -%}

            {% if actions -%}
            {% render '@button-group', actions -%}
            {% endif -%}

            {% if row.switch -%}
            {% render '@switch', row.switch -%}
            {% endif -%}
        </li>
        {% endfor -%}
    </ul>
</div>


        
            
            {
  "title": null,
  "rows": [
    {
      "label": "Pacific Drilling",
      "href": "#"
    },
    {
      "label": "Floatel test",
      "href": "#"
    },
    {
      "label": "Maersk",
      "href": "#"
    },
    {
      "label": "BWO",
      "href": "#"
    }
  ],
  "href": null,
  "selected": null,
  "status": null,
  "metadata": null,
  "switch": null,
  "actions": {
    "ariaLabel": "Actions",
    "fit": [
      "tight"
    ],
    "classes": [
      "kx-listgroup__actions"
    ],
    "buttons": [
      {
        "context": {
          "text": "Bookmark",
          "skin": "flat",
          "size": "base",
          "href": "#",
          "hideText": true,
          "icon": {
            "symbol": "bookmark",
            "size": "base"
          }
        }
      },
      {
        "context": {
          "text": "Settings",
          "skin": "flat",
          "size": "base",
          "hideText": true,
          "icon": {
            "symbol": "cog",
            "size": "base"
          }
        }
      },
      {
        "context": {
          "text": "Delete",
          "skin": "flat",
          "size": "base",
          "hideText": true,
          "icon": {
            "symbol": "close",
            "size": "base"
          }
        }
      }
    ]
  }
}

File:

Content:


                                // ==========================================================================
// Component: listgroup
// ==========================================================================

// Elements (children)
// ==========================================================================

.kx-listgroup__title {
    @include p(mini, base);
    @include type-scale(base);
    @include type-weight(regular);
    flex-grow: 1;
    text-transform: uppercase;
    color: $color-gray-06;

}

.kx-listgroup__link {
    @include p(mini, base);
    @include flex;
    flex-grow: 1;
    color: inherit;
    text-decoration: none;

    .kx-btn__inner {
        @include justify-content-start;
    }
}

.kx-listgroup__actions {
    @include mr(tiny, $spacing-important: true);
}

.kx-listgroup__metadata {
    @include type-scale(small);
    color: $color-gray-06;
}

.kx-listgroup__row {
    @include flex;
    @include align-items-center;
    @include flex-row;
    position: relative;
    //background-color: $color-listgroup-row-bg;
    box-shadow: 0 -1px 0 0 $color-listgroup-row-border inset;

    &:first-child {
        box-shadow: 0 -1px 0 0 $color-listgroup-row-border inset, 0 1px 0 0 $color-listgroup-row-border inset;
    }

    &.kx-is-selected {
        &:before {
            position: absolute;
            content: '';
            flex: 0 0 auto;
            width: rem-calc(8);
            top: 0;
            bottom: 0;
            left: 0;
            background-color: $color-listgroup-row-bg-selected;
        }
    }

    > *:last-child {
        @include mr(base);
    }

    > .kx-switch {
        flex-grow: 1;
        margin: 0;

        .kx-switch__label {
            @include m(mini, base);
            flex-grow: 1;
        }
    }

    > .kx-switch--toggle {
        .kx-switch__fake {
            @include ml(auto);
            order: 1;

            + .kx-switch__label__txt {
                @include px(tiny, none);

            }
        }
    }

    &:hover {
        background-color: $color-listgroup-row-bg-hover;
    }
}

.kx-listgroup__list {
    @include reset-list;
}


// Block (parent)
// ==========================================================================
.kx-listgroup {
    position: relative;
}

// Modifiers
// ==========================================================================

URL: /components/raw/listgroup/_listgroup.scss
Filesystem Path: src\components\01-listgroup\_listgroup.scss
Size: 2.4 KB

Handle: @listgroup--listgroup-row-actions
Variants (9): Default , Selected , With Title , With Actions , With Badge , With Metadata , With Checkboxes , With Radio buttons , With Checkbox Toggle
Preview:
- With layout
- Component only
Filesystem Path: src\components\01-listgroup\listgroup.njk
References (4): @button, @badge, @button-group, @switch

There are no notes for this item.

List Group: With Actions

Code

Layout

Utilities

Forms

Fieldset

Input

Button

Field

Label

Legend

Switch

Switch Group