BREADSCROLLER (Globale Elemente )
src/app/core/components/breadscroller/templates
Demo Section
Each variation will be presented in the following section.
Readme
Breadscroller
Description
Scrollable breadcrumb with scroll indicator.
JIRA
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/breadscroller
Fields
breadscroller.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.breadscrollerClasses | String | '' |
Modifier classes for utility |
| settings.breadscrollerJsModule | String | '' |
Javascript module to load (e.g. scroll-indicator) |
| settings.breadscrollerJsOptions | Object | null |
Options object which gets stringified |
| settings.scrollIndicatorEnabled | Boolean | Sets some default data-js-items needed by scroll indicator |
Content
| Parameter | Type | Description |
|---|---|---|
| content.breadscrollerId | String | ID for aria-targeting |
| content.breadscrollerItems | Array | Items of breadscroller |
breadscroller__item.hbs
Content
| Parameter | Type | Description |
|---|---|---|
| content.linkHref | String | Destination of link |
| content.linkText | String | Linktext |
Templates
breadscroller.hbs
<nav class="c-breadscroller{{#if settings.breadscrollerClasses}} {{settings.breadscrollerClasses}}{{/if}}"{{#if
settings.breadscrollerJsModule}}
data-js-module="{{settings.breadscrollerJsModule}}"{{#if settings.breadscrollerJsOptions}}
data-js-options='{{stringify settings.breadscrollerJsOptions}}'{{/if}}{{/if}}>
{{#wrapWith "grid__container"}}
{{#wrapWith "grid__row"}}
<strong class="breadscroller__headline is-aural"
id="breadscroller__headline-{{content.breadscrollerId}}">{{content.breadscrollerHeadline}}</strong>
<div class="breadscroller__content"{{#if settings.scrollIndicatorEnabled}}
data-js-item="scroll-indicator"{{/if}}
aria-labelledby="breadscroller__headline-{{content.breadscrollerId}}">
<div class="breadscroller__list-wrapper"{{#if settings.scrollIndicatorEnabled}}
data-js-item="scroll-wrapper"{{/if}}>
<ul class="breadscroller__list"{{#if settings.scrollIndicatorEnabled}}
data-js-item="scroll-content"{{/if}}>
{{#each content.breadscrollerItems}}
{{> breadscroller__item }}
{{/each}}
</ul>
</div>
</div>
{{/wrapWith}}
{{/wrapWith}}
</nav>
breadscroller__item.hbs
<li class="breadscroller__list-item">
{{#if content.linkHref}}
<a href="{{content.linkHref}}" title="{{content.linkText}}" class="breadscroller__item-link">{{{content.linkText}}}</a>
{{else}}
<strong class="breadscroller__item-active"><span class="is-aural">Sie befinden sich hier:</span>{{{content.linkText}}}</strong>
{{/if}}
</li>
Data File
breadscroller.hjson
{
"title": "Breadscroller",
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"breadscrollerClasses": false,
"breadscrollerJsModule": "scroll-indicator",
"breadscrollerJsOptions": {
"scrollToEnd": true
},
"scrollIndicatorEnabled": true
},
"content": {
"breadscrollerId": "1",
"breadscrollerHeadline": "Sie sind hier:",
"breadscrollerItems": [
{
"content": {
"linkText": "Startseite",
"linkHref": "front.html"
}
},
{
"content": {
"linkText": "Dolor amt comnseteteur sadip dolor amet",
"linkHref": "#"
}
},
{
"content": {
"linkText": "Dolor amt comnseteteur sadip dolor amet",
"linkHref": "#"
}
},
{
"content": {
"linkText": "Dolor amt comnseteteur sadip dolor amet",
"linkHref": "#"
}
},
{
"content": {
"linkText": "Dolor amt comnseteteur sadip dolor amet",
"linkHref": "#"
}
},
{
"content": {
"linkText": "Dolor amt comnseteteur sadip dolor amet",
"linkHref": "#"
}
}
]
}
}
}
}
Styles
breadscroller.scss
/* ===================================================
coreComponent: breadcrumb
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
.c-breadscroller {
width: 100%;
text-align: center;
margin-bottom: 18px;
display: inline-block;
padding: 0;
@include bp($bp-tablet-l) {
text-align: left;
}
@include print() {
text-align: left;
}
/*
MODIFIERS
----------------------- */
&.is-invert-indent {
width: calc(100% + 30px);
margin-left: -15px;
@include bp($bp-tablet-p) {
width: calc(100% + 126px);
margin-left: -63px;
}
@include bp($bp-tablet-l) {
width: 100%;
margin-left: auto;
}
}
.breadscroller__content {
position: relative;
margin: 0 auto;
&::-webkit-scrollbar {
display: none;
}
&::before,
&::after {
position: absolute;
top: 0;
bottom: 0;
width: 40px;
z-index: 1;
}
/*
MODIFIERS
----------------------- */
&.is-scrollable-left {
&::before {
content: '';
left: -1px;
width: 50px;
background: linear-gradient(to right, rgba($color-white, 1), rgba($color-white, 1) 33%, rgba($color-white, 0));
}
}
&.is-scrollable-right {
&::after {
content: '';
right: -1px;
background: linear-gradient(to left, rgba($color-white, 1), rgba($color-white, 1) 33%, rgba($color-white, 0));
}
}
}
.breadscroller__list-wrapper {
overflow-x: auto;
overflow-y: hidden;
overflow: -moz-scrollbars-auto;
-ms-overflow-style: auto;
-webkit-overflow-scrolling: touch;
padding: 15px 0;
@include print() {
overflow: visible;
}
}
.breadscroller__list {
position: relative;
display: inline-block;
white-space: nowrap;
padding: 0 16px;
@include bp($bp-tablet-l) {
padding: 0;
}
@include print() {
white-space: normal;
padding: 0;
}
}
.breadscroller__list-item {
display: inline-block;
.breadscroller__item-link,
.breadscroller__item-active {
display: inline-block;
font-family: $font-bold;
font-weight: 700;
line-height: 2em; // refactor to unitless line-height
font-size: 1.2rem;
letter-spacing: .5px;
padding-right: 18px;
margin-right: 2px;
text-decoration: none;
color: $color-dark;
max-width: 180px;
overflow: hidden;
text-overflow: ellipsis;
vertical-align: bottom;
white-space: nowrap;
transition: color $animation-duration-std $animation-easing-std;
@include print() {
overflow: visible;
max-width: 100%;
text-overflow: clip;
}
}
.breadscroller__item-link {
position: relative;
&:hover,
&:focus {
color: $color-green;
&::after {
opacity: 1;
}
}
&::before {
@include pseudo();
position: absolute;
height: 4px;
width: 4px;
background: $color-green;
right: 4px;
top: 9px;
@include print() {
content: '>';
background: $color-white;
top: 0;
}
}
&::after {
@include pseudo();
position: absolute;
left: 0;
bottom: 3px;
width: calc(100% - 18px); // SUBSTRACT PADDING-RIGHT
height: 1px;
background-color: lighten($color-green, 5%);
opacity: 0;
transition: opacity $animation-duration-std*1.5 $animation-easing-std;
}
&:first-child {
margin-left: 3px;
}
&.is-last-visible {
padding-right: 0;
margin-right: 0;
&::before {
display: none;
}
}
}
.breadscroller__item-active {
font-family: $font-regular;
font-weight: 400;
&::before {
display: none;
}
}
abbr {
display: inline;
}
}
}
HTML Output
Default
<nav class="c-breadscroller" data-js-module="scroll-indicator" data-js-options='{"scrollToEnd":true}'>
<div class="grid__container">
<div class="grid__row">
<strong class="breadscroller__headline is-aural" id="breadscroller__headline-1">Sie sind hier:</strong>
<div class="breadscroller__content" data-js-item="scroll-indicator" aria-labelledby="breadscroller__headline-1">
<div class="breadscroller__list-wrapper" data-js-item="scroll-wrapper">
<ul class="breadscroller__list" data-js-item="scroll-content">
<li class="breadscroller__list-item">
<a href="front.html" title="Startseite" class="breadscroller__item-link">Startseite</a>
</li>
<li class="breadscroller__list-item">
<a href="#" title="Dolor amt comnseteteur sadip dolor amet" class="breadscroller__item-link">Dolor amt comnseteteur sadip dolor amet</a>
</li>
<li class="breadscroller__list-item">
<a href="#" title="Dolor amt comnseteteur sadip dolor amet" class="breadscroller__item-link">Dolor amt comnseteteur sadip dolor amet</a>
</li>
<li class="breadscroller__list-item">
<a href="#" title="Dolor amt comnseteteur sadip dolor amet" class="breadscroller__item-link">Dolor amt comnseteteur sadip dolor amet</a>
</li>
<li class="breadscroller__list-item">
<a href="#" title="Dolor amt comnseteteur sadip dolor amet" class="breadscroller__item-link">Dolor amt comnseteteur sadip dolor amet</a>
</li>
<li class="breadscroller__list-item">
<a href="#" title="Dolor amt comnseteteur sadip dolor amet" class="breadscroller__item-link">Dolor amt comnseteteur sadip dolor amet</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</nav>