BACK-BUTTON (Bedienelemente )

src/app/shared/components/back-button/templates

Demo Section

Each variation will be presented in the following section.

Default

Home
Zurück zur vorherigen Seite

Readme

backButton (component)

Description

This component represents a simple back button, making use of the history.back() browser function.

Requirements

Installation

Installation with Veams from local machine

veams install bp absolute/filepath/to/back-button

Fields

back-button.hbs

Settings

Parameter Type Default Description
settings.backButtonClasses String '' Modifier classes for component
settings.backButtonContextClass String 'default' Context class of component
settings.backButtonJsOptions Object null JavaScript options object which gets stringified

Content

Parameter Type Description
content.linkHref String Set the default href of the link
content.linkAnchor String Anchor text for accessibility
content.linkText String Link text for back button

JavaScript Options

The module gives you the possibility to override default JS options:

Option Type Default Description
selectors.backButton String '[data-js-item="back-link"]' Element selector for back link

Templates

back-button.hbs

<div class="c-back-button{{#if settings.backButtonContextClass}}--{{settings.backButtonContextClass}}{{else}}--default{{/if}}{{#if settings.backButtonClasses}} {{settings.backButtonClasses}}{{/if}}"
     data-css="c-back-button"
     data-js-module="back-button"{{#if settings.backButtonJsOptions}}
     data-js-options='{{stringify settings.backButtonJsOptions}}'{{/if}}>

	 <div class="back-button__item">
		 <div class="back-button__linkbox">
			 <span class="back-button__linkbox-text">Home</span>
		 </div>
	</div>

	<div class="back-button__link">
	 	<span class="back-button__link-text">{{content.linkText}}</span>
	</div>

	<a data-js-item="back-link" class="back-button__a11y-clickarea" title="{{content.linkAnchor}}"></a>

</div>

Data File

back-button.hjson

{
	"variations": {
		"default": {
			"docs": {
				"variationName": "Default"
			},
			"settings": {
				"backButtonContextClass": "default",
				"backButtonClasses": false,
				"backButtonJsOptions": {}
			},
			"content": {
				"linkHref": "#",
				"linkAnchor": "Zurück",
				"linkText": "Zurück zur vorherigen Seite"

			}
		}
	}
}

Styles

back-button.scss

/* ===================================================
component: back-button
=================================================== */

/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-back-button"] {
}

/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-back-button--default {
	position: relative;

	@include bp($bp-mobile-s) {
		@include grid-column-height(2, $neat-grid, false);
	}
	@include bp($bp-mobile-p) {
		@include grid-column-height(1, $neat-grid, false);
	}

	&:hover,
	&.a11y-focus-key {

		.back-button__linkbox {
			background-color: $color-white;
			border-color: $color-green;
			color: $color-green;

			/*
			MODIFIERS
			----------------------- */
			&.a11y-focus-key { // NORMAL A11Y-STYLES NOT WORKING PROPERLY
				border: 2px dashed #800;
				outline: none;
			}

		}

		.back-button__linkbox-text {
			@include sprites-icon-arrow-left-green();

			@include hcm() {
				color: $color-black;
				height: auto;
				width: auto;
				font-size: 16px;
			}
		}

		.back-button__link-text {
			color: $color-dark;
		}

	}

	/* BACK-BUTTON LINK-BOX MIT ICON */

	.back-button__item {
		position: relative;
		float: left;

		@include bp($bp-mobile-s) {
			@include grid-box(2);
		}

		@include bp($bp-mobile-p) {
			@include grid-box(1);
		}
	}

	.back-button__linkbox {
		position: absolute;
		top: 0;
		left: 0;
		display: flex;
		width: 100%;
		height: 100%;
		text-decoration: none;
		border: 1px solid $color-green;
		background-color: $color-green;
		color: $color-white;
		justify-content: center;
		align-items: center;
		cursor: pointer;
		transition: border $animation-duration-std $animation-easing-std, background $animation-duration-std $animation-easing-std;
	}

	.back-button__linkbox-text {
		@include hidden-text();
		@include sprites-icon-arrow-left-white();

		@include hcm() {
			color: $color-black;
			height: auto;
			width: auto;
			font-size: 1.6rem;
		}

	}

	/* BACK-BUTTON LINK-TEXT */

	.back-button__link {
		position: relative;
		float: left;

		@include bp($bp-mobile-s) {
			@include grid-column-height(2, $neat-grid, false);
			@include grid-column-width(10);
		}
		@include bp($bp-mobile-p) {
			@include grid-column-height(1, $neat-grid, false);
			@include grid-column-width(11);
		}
	}

	.back-button__link-text {
		position: absolute;
		top: 0;
		display: flex;
		width: 100%;
		height: 100%;
		text-decoration: none;
		align-items: center;
		font-family: $font-bold;
		font-weight: 700;
		color: $color-green;
		transition: color $animation-duration-std $animation-easing-std;
		font-size: 1.3rem;
		line-height: (21/13);
		letter-spacing: .22px;

		@include bp($bp-mobile-s) {
			left: 10px;
		}

		@include bp($bp-mobile-p) {
			left: 20px;
		}
	}

	/* CLICKAREA */

	.back-button__a11y-clickarea {
		@include clickarea();

		cursor: pointer;

	}

}

Scripts

back-button.js

/**
 * Description of BackButton.
 * Class properties and decorators are supported.
 *
 * @module BackButton
 * @version v1.0.0
 *
 * @author Eckhard Sedlmayer
 */

// Imports
import $ from 'jquery';
import Component from '@veams/component';

class BackButton extends Component {
	/**
	 * Class Properties
	 */
	$el = $(this.el);

	/**
	 * Constructor for our class
	 *
	 * @see module.js
	 *
	 * @param {Object} obj - Object which is passed to our class
	 * @param {Object} obj.el - element which will be saved in this.el
	 * @param {Object} obj.options - options which will be passed in as JSON object
	 */
	constructor(obj) {
		let options = {
			selectors: {
				backButton: '[data-js-item="back-link"]'
			},
			classes: {}
		};

		super(obj, options);
	}

	didMount() {
		//console.log('Component BackButton mounted!');
	}

	/**
	 * Render class
	 */
	render() {
		return this;
	}

	get events() {
		return {
			'{{context.EVENTS.click}} {{this.options.selectors.backButton}}': 'onBackButtonClick'
		};
	}

	/** =================================================
	 * CUSTOM OVERLAY METHODS
	 * ================================================= */

	onBackButtonClick(e) {
		e.preventDefault();
		window.history.back();

		/**
		 * add filter reset functionality
		 */
	}
}

export default BackButton;

HTML Output

Default

<div class="c-back-button--default" data-css="c-back-button" data-js-module="back-button" data-js-options='{}'>
	<div class="back-button__item">
		<div class="back-button__linkbox">
			<span class="back-button__linkbox-text">Home</span>
		</div>
	</div>
	<div class="back-button__link">
		<span class="back-button__link-text">Zurück zur vorherigen Seite</span>
	</div>
	<a data-js-item="back-link" class="back-button__a11y-clickarea" title="Zurück"></a>
</div>

Wonach suchst du?

Datenschutzhinweis mit Link