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! |
/* $CMS_SET(set_ft_imgTitle, “”) $$CMS_SET(set_ft_imgCopyrightTitle, “”)$
$CMS_IF(#global.context.getVariableNames().contains(“set_ft_image”))$$– –$$CMS_IF(!set_ft_image.isEmpty && !set_ft_image.isNull)$$– –$$CMS_IF(#global.context.getVariableNames().contains(“set_ft_imgDescriptionTitle”))$$– –$$CMS_IF(!set_ft_imgDescriptionTitle.isEmpty && !set_ft_imgDescriptionTitle.isNull && set_ft_imgDescriptionTitle != “”)$$– –$$CMS_ELSE$$– –$$CMS_SET(set_ft_imgDescriptionTitle,"")$$– –$$CMS_END_IF$$– –$$CMS_ELSE$$– –$$CMS_SET(set_ft_imgDescriptionTitle,"")$$– –$$CMS_END_IF$$–
--$$CMS_IF(!ref(set_ft_image).meta("FS_0x8298","none").isEmpty && !ref(set_ft_image).meta("FS_0x8298","none").isNull && ref(set_ft_image).meta("FS_0x8298","none") != null && ref(set_ft_image).meta("FS_0x8298","none").toString != "")$$--
--$$CMS_SET(set_ft_imgCopyrightTitle, ref(set_ft_image).meta("FS_0x8298","none").replaceAll("\"","").replaceAll("'","´").replaceAll("\n","").replaceAll("\r",""))$$--
--$$CMS_ELSE$$--
--$$CMS_SET(set_ft_imgCopyrightTitle, "")$$--
--$$CMS_END_IF$$--
--$$CMS_IF(set_ft_imgCopyrightTitle != "")$$--
--$$CMS_IF(set_ft_imgDescriptionTitle.toString() != "")$$--
--$$CMS_SET(set_ft_imgTitle, set_ft_imgDescriptionTitle + " | © " + set_ft_imgCopyrightTitle)$$--
--$$CMS_ELSE$$--
--$$CMS_SET(set_ft_imgTitle, "© " + set_ft_imgCopyrightTitle)$$--
--$$CMS_END_IF$$--
--$$CMS_ELSE$$--
--$$CMS_IF(set_ft_imgDescriptionTitle != "")$$--
--$$CMS_SET(set_ft_imgTitle, set_ft_imgDescriptionTitle)$$--
--$$CMS_END_IF$$--
--$$CMS_END_IF$$--
--$$CMS_END_IF$$--
–$$CMS_END_IF$$–
–$$CMS_VALUE(set_ft_imgTitle)$$– –$$CMS_SET(set_ft_image, null)$$– –$$CMS_SET(set_ft_imgdescriptionTitle, “”)$ */
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>