Default
more!
SHOW-MORE (component )
src/app/shared/components/show-more/templates
Demo Section
Each variation will be presented in the following section.
Readme
showMore (component)
Description
This blueprint is based on the blueprint of Veams.
Requirements
Veams#5.0.0
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/show-more
Fields
show-more.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.showMoreClasses | String | '' |
Modifier classes for component |
| settings.showMoreContextClass | String | 'default' |
Context class of component |
| settings.showMoreJsOptions | Object | null |
JavaScript options object which gets stringified |
Content
| Parameter | Type | Description |
|---|---|---|
| content.showMoreField | String | Please add a description! |
JavaScript Options
The module gives you the possibility to override default JS options:
| Option | Type | Default | Description |
|---|---|---|---|
| optionOne | String | 'is-option' |
Please add a description! |
SASS
Variables
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $show-more-my-custom-var | 0px |
Please add a description! |
Modifier Classes
There are modifier classes you can add to c-show-more:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
Templates
show-more.hbs
<div class="c-show-more{{#if settings.showMoreContextClass}}--{{settings.showMoreContextClass}}{{else}}--default{{/if}}{{#if settings.showMoreClasses}} {{settings.showMoreClasses}}{{/if}}"
data-css="c-show-more"
data-js-module="show-more"{{#if settings.showMoreJsOptions}}
data-js-options='{{stringify settings.showMoreJsOptions}}'{{/if}}>
<div id="showmorebutton" class="filterable-list__list-init-show-more-wrapper">
<button type="button" class="filterable-list__list-init-show-more"
data-js-item="js-show-more" aria-expanded="false" aria-controls="unique-id-56442">
<span class="filterable-list__list-init-show-more-text"
data-js-item="filterable-list-show-more-btn-label"> weitere Ergebnisse anzeigen</span>
</button>
</div>
<div id="showmore" class="c-show-more__hidden">more!</div>
</div>
</div>
Data File
show-more.hjson
{
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"showMoreContextClass": "default",
"showMoreClasses": "",
"showMoreJsOptions": {}
},
"content": {}
}
}
}
Styles
show-more.scss
/* ===================================================
component: show-more
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-show-more"] {
/*
SHOW MORE
----------------------- */
.filterable-list__list-init-show-more-wrapper {
width: 100%;
display: block;
text-align: center;
position: relative;
clear: both;
&::before {
@include pseudo();
@include centering(v);
position: absolute;
width: 100%;
height: 1px;
border-top: 1px solid $color-gray-light;
margin-top: 1px;
}
@include print() {
display: none;
}
}
.filterable-list__list-init-show-more {
@include reset-btn();
padding: 10px 30px;
min-width: 275px;
display: inline-block;
text-align: center;
background-color: $color-green;
cursor: pointer;
position: relative;
transition: background-color $animation-duration-std
$animation-easing-std;
color: $color-white;
@include bp($bp-desktop-l) {
padding: 18px 30px;
}
.no-touch &:hover,
&.a11y-focus-key {
background-color: $color-white;
.filterable-list__list-init-show-more-text {
color: $color-green;
&::before,
&::after {
background-color: $color-green;
}
}
&::before {
opacity: 1;
}
}
&:focus {
background-color: $color-green;
.filterable-list__list-init-show-more-text {
color: $color-white;
&::before,
&::after {
background-color: $color-white;
}
}
&::before {
opacity: 0;
}
}
/*
MODIFIERS
----------------------- */
&.is-show-all {
.filterable-list__list-init-show-more-text {
padding-left: 0;
&::before,
&::after {
display: none;
}
}
}
&::before {
@include pseudo();
position: absolute;
width: calc(100% - 2px);
height: calc(100% - 2px);
border: 1px solid $color-green;
display: block;
z-index: 2;
top: 0;
left: 0;
opacity: 0;
transition: opacity $animation-duration-std $animation-easing-std;
}
&::after {
}
}
.filterable-list__list-init-show-more-text {
color: $color-white;
font-size: 1.6rem;
line-height: (24/16);
letter-spacing: .3px;
font-family: $font-bold;
display: inline-block;
transition: color $animation-duration-std $animation-easing-std;
position: relative;
padding-left: 25px;
&::before {
@include pseudo();
width: 15px;
height: 3px;
display: block;
background-color: $color-white;
position: absolute;
left: 0;
top: 11px;
transition: background-color $animation-duration-std
$animation-easing-std;
}
&::after {
@include pseudo();
@include centering(v);
width: 3px;
height: 15px;
display: block;
background-color: $color-white;
position: absolute;
top: 12px;
left: 6px;
transition: background-color $animation-duration-std
$animation-easing-std;
}
}
.c-show-more__hidden {
display: none;
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-show-more--default {
}
Scripts
show-more.js
/**
* Description of SocialEmbed.
* Class properties and decorators are supported.
*
* @module ShowMore
* @version v1.0.0
*
* @author your_name
*/
// Imports
import $ from 'jquery';
import Component from '@veams/component';
class ShowMore 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: {
jsShowMore: '[data-js-item="js-show-more"]'
},
classes: {}
};
super(obj, options);
}
didMount() {
console.log('Component ShowMore mounted!');
}
/**
* Render class
*/
render() {
return this;
}
// Local Handlers
get events() {
return {
'{{context.EVENTS.click}} {{this.options.selectors.jsShowMore}}': 'jsShowMoreClick'
};
}
jsShowMoreClick(e) {
$('#showmore').removeClass('c-show-more__hidden');
$('#showmorebutton').addClass('c-show-more__hidden');
return true;
}
}
export default ShowMore;
HTML Output
Default
<div class="c-show-more--default" data-css="c-show-more" data-js-module="show-more" data-js-options='{}'>
<div id="showmorebutton" class="filterable-list__list-init-show-more-wrapper">
<button type="button" class="filterable-list__list-init-show-more" data-js-item="js-show-more" aria-expanded="false" aria-controls="unique-id-56442">
<span class="filterable-list__list-init-show-more-text" data-js-item="filterable-list-show-more-btn-label"> weitere Ergebnisse anzeigen</span>
</button>
</div>
<div id="showmore" class="c-show-more__hidden">more!</div>
</div>
</div>