NEWSROOM-APP (component )
src/app/shared/components/newsroom-app/templates
Demo Section
Each variation will be presented in the following section.
Readme
newsroomApp (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/newsroom-app
Fields
newsroom-app.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.newsroomAppClasses | String | '' |
Modifier classes for component |
| settings.newsroomAppContextClass | String | 'default' |
Context class of component |
Content
| Parameter | Type | Description |
|---|---|---|
| content.newsroomAppField | String | Please add a description! |
SASS
Variables
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $newsroom-app-my-custom-var | 0px |
Please add a description! |
Modifier Classes
There are modifier classes you can add to c-newsroom-app:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
Templates
newsroom-app.hbs
<div id="newsroom"
class="c-newsroom-app{{#if settings.newsroomAppContextClass}}--{{settings.newsroomAppContextClass}}{{else}}--default{{/if}}{{#if settings.newsroomAppClasses}} {{settings.newsroomAppClasses}}{{/if}}"
data-css="c-newsroom-app">
<newsroom-app>
<!-- Integrieren von Kleeblatt-Lösung der Startseite hier -->
</newsroom-app>
</div>
Data File
newsroom-app.hjson
{
"variations": {
"default": {
"docs": {
"variationName": "Default"
},
"settings": {
"newsroomAppContextClass": "default",
"newsroomAppClasses": "",
"filter_news": false,
"filter_all": true
},
"content": {}
}
}
}
Styles
newsroom-app.scss
/* ===================================================
component: newsroom-app
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-newsroom-app"] {
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-newsroom-app--default {}
HTML Output
Default
<div id="newsroom" class="c-newsroom-app--default" data-css="c-newsroom-app">
<newsroom-app>
<!-- Integrieren von Kleeblatt-Lösung der Startseite hier -->
</newsroom-app>
</div>