You are viewing the documentation for Blueriq 17. Documentation for other versions is available in our documentation directory.
| Corresponding with material release | 1.3.4 (packaged with Blueriq 17.5) |
|---|
Changed in this version
- deprecated presentation style Radio
Content styles in this version
Content style name | Description |
|---|---|
| Bottomsheet | feedback component |
| Expansion | Containers will be expandable |
| Full | Content on the page should take the full width. |
| Large | The content on the page is large (width). |
| Medium | The content on the page is medium (width). |
| Modal | A web page element that displays in front of all other page content |
| Responsive | The width of the content on the page is dependent on the width of the window. |
| Small | The content on the page is narrow (width). |
| Stepper | A wizard-like workflow by dividing content into logical steps |
| tabs | Use this on a container to display its subcontainers as tabs. Ideally used on readonly containers. |
| Tree | expandable tree structure for containers |
Presentation styles in this version
Presentation style name | Description |
|---|---|
| Accent | Shows an element with a specific color as background. In this case the secundary color is Purple. |
| AlignRight | Aligns the elements in a container to the right. |
| AllOptionsVisible | The presentation style AllOptionsVisible will show the options in a multivalued field with domain as checkboxes. |
| Animation | Can be used to animate. For instance to animate statistic charts (like pie, bar etc.) |
| Autocomplete | Can be used on a single-valued domain-list to have auto completion on a select. Can be used in combination with multi-valued attributes to have a auto completion on a chiplist |
| Badge | badge number for text/icon |
| Button | Is used whenever something is displayed as a link and it must be displayed as button instead. (for instance: Document link) |
| Chips | Attribute multivalued readonly |
| Danger | Shows an element with a specific color as background. |
| Disabled | Shows read-only fields in a disabled input style. |
| DoNotShowSearch | Use this presentation style to hide the search box for an instance list |
| FlatButton | Is used to display buttons without having a border and a transparent background. |
| Horizontal | The presentation style horizontal will show the attributes inside the container horizontally. |
| icon_bar_chart *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_book *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_briefcase *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_calendar *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_cog *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_comment *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_download *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_edit *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_envelope *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_exclamation *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_exclamation_triangle *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_folder_open *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_home *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_inbox *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_info_circle *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_pencil *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_phone *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_plus *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_remove *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_time *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_times *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_times_circle *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| icon_user *1 | A font Awesome icon; can be used in buttons and containers as prefix for display name |
| Info | Shows an element with a specific color as background. |
| Introduction | Default a container is shown in a white border on the background. The presentation style introduction shows a text inside a container with a grey background, without border. This is only usable for text items. |
| LargeText | Displays a input field as text-area. |
| OnlyIcon | Displays only a icon when used on a button. No caption will be shown. |
| Password | Add the password style on a string field that you will use as a password field to obscure the text in the input box. |
| Primary | Displays a button as a primary button |
| Radio | DEPRECATED: Use the presentation style AllOptionsVisible instead. Displays a domain list as radio buttons. |
| Secondary | Displays a button as a secondary button |
| Slider | Attribute number |
| StatisticBar | Displays a bar chart |
| StatisticDoughnut | Displays a doughnut chart |
| StatisticLine | Displays a line chart |
| StatisticPie | Displays a pie chart |
| StatisticPolar | StatisticPolar |
| StatisticRadar | Displays a radar chart |
| Success | Shows an element with a specific color as background. |
| Switch | Displays a checkbox as a slide toggle. |
| Tertiary | Displays buttons with a tertiary chosen color. |
| TextEmphasis | With this presentation style you emphasize a piece of text, by making it bold |
| TextEmphasisIntense | With this presentation style you intensely emphasize a piece of text, by making it italic |
| TextEmphasisSubtle | With this presentation style you subtly emphasize a piece of text, by making it underlined |
| Transparent | Default a container is shown in a white border on the background. The presentation style transparant shows a container with a grey background, without border. |
| Warning | Shows an element with a specific color as background. |
| Weight1..3 | Within a `Horizontal` container, children can have presentation styles like `Weight<number>` If you have a child with `Weight3` and another child with `Weight1`, the total weight number would be 4. The first child will take 3/4th of the available horizontal space and the second child would take 1/4th. |
*1 : These icons represent font-awesome icons. This is without the prefix icon_ x and the lower-dash are upper-dash. Example:
- Fontawesome icon:
exclamation-signbecomes in Blueriq Encore:icon_exclamation_sign - To create a new presentation style for a Fontawesome icon in Blueriq Encore, copy the name of the icon you want and replace the Font awesome prefix 'fa fa-' with 'icon_' and replace all hyphens (-) with an underscore (_)
Fontawesome
The version of fontawesome that is bundled with Blueriq is 4.4.0. There is no separate documentation page for this version, see https://fontawesome.com/v4/icons/ for the documentation about 4.7.0.
When selecting an icon check to see if it is introduced in version 4.4.0 or lower.
Overview
Content Tools