Styles

In a Blueriq theme, working with presentation styles is a common activity. This chapter describes the tools that are provided by the framework.

PresentationStyles

Each Blueriq element has a set of presentation styles that is available using Element.styles as an instance of PresentationStyles. This class has some useful utilities to work with presentation styles.

import { PresentationStyles } from '@blueriq/core';

const styles = PresentationStyles.of('a', 'c'); // typically obtained using Element.styles

/** Presence utilities */
styles.has('a'); // returns true if 'a' is present
// => true

styles.has(style => style.startsWith('column_')); // returns true if a presentation style with prefix 'column_' is present
// => false

styles.hasAny('a', 'b', 'c'); // returns true of at least one of the given presentation styles is present
// => true 

styles.hasAll('a', 'b', 'c'); // returns true of all of the given presentation styles are present
// => false

/** Set operations, return new immutable set of presentation styles */
styles.add('a', 'b'); // ensure the given presentation styles are present
// => { 'a', 'b', 'c' }

styles.subtract('a', 'b'); // ensures the given presentation styles are not present
// => { 'c' }

styles.only('a', 'b') // ensures only the given presentation styles are present, if they are present in the original styles
// => { 'a' }

Classes Directive

Similarly to ngClass, the framework provides the bqClasses directive that will apply a set of presentation styles to the DOM element.

<button bqClasses></button>

Optionally, you may provide a local mapping of presentation style to classname:

<button [bqClasses]="{'button_default':'btn btn-default'}"></button>

By default, bqClasses will use the presentation styles of the currently rendered Blueriq element. You may specify a different element using bqClassesElement:

<button bqClasses [bqClassesElement]="someButton"></button>

Alternatively, if you just have a set of presentation styles, use bqClassesStyles instead:

<button bqClasses [bqClassesStyles]="someStyles"></button>

Styles Mapping

Instead of providing a mapping from presentation style to classname locally, you may also register common translations globally in an Angular module:

import { NgModule } from '@angular/core';
import { BlueriqStyles } from '@blueriq/angular';
import { Button, TextItem } from '@blueriq/core';

@NgModule({
  // ...
  providers: [
    // ...
    BlueriqStyles.mapping([
      // translate the presentation style 'bold' to classname 'strong'
      { from: 'bold', to: 'strong' },

      // translate the presentation style 'success' to classname 'alert alert-success', if the element is a text item
      { from: 'success', to: 'alert alert-success', when: { type: TextItem } },

      // translate the presentation style 'default' to classname 'alert alert-success', if the element has content style 'button'
      { from: 'default', to: 'btn btn-default', when: { contentStyle: 'button' } },
    ]),
    // ...
  ],
  // ...
})
export class StylingModule {}

Style Translators

If the static mapping as shown above is not capable enough of declaring your presentation style mapping, you may chose to implement a custom StyleTranslator instead. The following example shows how a column system may be implemented:

import { StyleTranslator, Styles } from '@blueriq/angular';
import { Element } from '@blueriq/core';

export class BootstrapGridStyles implements StyleTranslator {

  translate(style: string, element: Element): Styles {
    if (style.startsWith('dashboard_column')) {
      return ['col-xs-12', 'col-md-' + style.substring(16)];
    }
  }

}

Styles

PresentationStyles

Classes Directive

Styles Mapping

Style Translators

result-matching ""

No results matching ""