PRESSINFO-LIST-APP (component )
src/app/shared/components/pressinfo-list-app/templates
Demo Section
Each variation will be presented in the following section.
Readme
pressinfoListApp (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/pressinfo-list-app
Fields
pressinfo-list-app.hbs
The partial is a wrapWith partial. This means that you can access all properties and hashes via props.
See Mangony Handlebars Helper - wrapWith for detailed instructions.
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.pressinfoListAppClasses | String | '' |
Modifier classes for component |
| settings.pressinfoListAppContextClass | String | 'default' |
Context class of component |
Content
| Parameter | Type | Description |
|---|---|---|
| content.pressinfoListAppField | String | Please add a description! |
SASS
Variables
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $pressinfo-list-app-my-custom-var | 0px |
Please add a description! |
Modifier Classes
There are modifier classes you can add to c-pressinfo-list-app:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
Templates
pressinfo-list-app.hbs
<div id="pressinfolist" class="c-pressinfo-list-app{{#if settings.pressinfoListAppContextClass}}--{{settings.pressinfoListAppContextClass}}{{else}}--default{{/if}}{{#if settings.pressinfoListAppClasses}} {{settings.pressinfoListAppClasses}}{{/if}}"
data-css="c-pressinfo-list-app">
<pressinfo-list-app>
</pressinfo-list-app>
</div>
Data File
pressinfo-list-app.hjson
{
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"pressinfoListAppContextClass": "default",
"pressinfoListAppClasses": ""
},
"content": {}
}
}
}
Styles
pressinfo-list-app.scss
/* ===================================================
component: pressinfo-list-app
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-pressinfo-list-app"] {
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-pressinfo-list-app--default {
}
HTML Output
Default
<div id="pressinfolist" class="c-pressinfo-list-app--default" data-css="c-pressinfo-list-app">
<pressinfo-list-app>
</pressinfo-list-app>
</div>