NEWSROOM-APP (component )

src/app/shared/components/newsroom-app/templates

Demo Section

Each variation will be presented in the following section.

Default


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>

Wonach suchst du?