Interaction Bar

Ready

Notes
HTML
Info
View
Context
Assets

No notes defined.


        
        <div class="interactionBar">
    <ul class="interactionBar-items">
        <li class="interactionBar-item">
            <button class="button is-small is-tertiary"><svg class="icon is-share-fat">
                    <use href="../../icons/icons.svg#icon--share-fat" xlink:href="../../icons/icons.svg#icon--share-fat"></use>
                </svg>
                <span class="button-label">Teilen</span></button>

        </li>
        <li class="interactionBar-item">
            <button class="button is-small is-tertiary" onclick="const el &#x3D; this.querySelector(&quot;.button-label&quot;); el.innerText &#x3D; parseInt(el.innerText) + 1; this.disabled &#x3D; true; this.onclick &#x3D; false;"><svg class="icon is-hands-clapping">
                    <use href="../../icons/icons.svg#icon--hands-clapping" xlink:href="../../icons/icons.svg#icon--hands-clapping"></use>
                </svg>
                <span class="button-label">482</span></button>

        </li>
    </ul>

</div>

Handle: @interactionbar
Preview:
- With layout
- Component only
Filesystem Path: components/04-modules/interactionBar/interactionBar.html
References (2): @button, @interactionbar
Referenced by (12): @trendspageheader, @trendspageheader--legacy-kicker, @trendspageheader--with-byline, @trendspageheader--with-tags, @trendspageheader--with-interaction-bar, @trendspageheader--with-figure, @trendspageheader--complete, @pagesection, @pagesection--with-backdrop, @pagesection--with-description, @pagesection--with-blocks, @pagesection--with-blocks-on-backdrop


        <div class="interactionBar{{#modifier}} {{.}}{{/modifier}}">
        {{#if items}}
    <ul class="interactionBar-items">
            {{#items}}
        <li class="interactionBar-item">
            {{#button}}
                {{render '@button' (contextData '@interactionbar' this) merge=true}}
            {{/button}}
        </li>
            {{/items}}
    </ul>
        {{/if}}

</div>


        
            
            {
  "items": [
    {
      "button": {
        "modifier": "is-small is-tertiary",
        "label": "Teilen",
        "icon": {
          "id": "share-fat"
        }
      }
    },
    {
      "button": {
        "modifier": "is-small is-tertiary",
        "label": 482,
        "icon": {
          "id": "hands-clapping"
        },
        "onclick": "const el = this.querySelector(\".button-label\"); el.innerText = parseInt(el.innerText) + 1; this.disabled = true; this.onclick = false;"
      }
    }
  ]
}

File:

Content:


                                @import "_interactionBar.settings";
@import "_interactionBar.styles";

URL: /components/raw/interactionbar/_interactionBar.scss
Filesystem Path: components/04-modules/interactionBar/_interactionBar.scss
Size: 70 Bytes

Content:


                                $interactionBar_styles: (
    font-family: monospace,
    background-color: lightgray,
) !default;

URL: /components/raw/interactionbar/_interactionBar.settings.scss
Filesystem Path: components/04-modules/interactionBar/_interactionBar.settings.scss
Size: 99 Bytes

Content:


                                .interactionBar {
    @include stack-spacing(component);

    border: var(--bw-small) $_border-color;
    border-style: solid none;

    ul {
        list-style: none;
        margin-top: 0;
    }

    .button {
        margin-top: 0;

        &-label {
            font-weight: $_font-weight;
        }

    }

    &-items {
        display: flex;
        justify-content: space-between;
        column-gap: 1rem;
        padding: var(--sp-small) 0;
    }

}

URL: /components/raw/interactionbar/_interactionBar.styles.scss
Filesystem Path: components/04-modules/interactionBar/_interactionBar.styles.scss
Size: 460 Bytes