Visual-Interaction Style Guidelines

Nuamedia prefers to use the framework from http://archives.materializecss.com/0.100.2/ to create the visual elements in a Camlin App.

In order to include this in your project automatically you will need to go to the project settings and set this appropriately - this setting is described in Project Settings.

Once you set this in your project settings you will be able to insert HTML content into various components of your visual flow. 


Continue/Submit Button

This is an example of a continue/submit button that will take up the full width of the page

HTML for button (paste this example HTML into the property of a flow button)

Continue/Submit Button

<div class="waves-effect waves-light btn btn-large col s12 margin-sm green darken-2 right-align"><i class="material-icons right"> play_circle_outline </i>Submit Approval</div>

Yes/No Button Combination

This is an example of a yes and no button that will display across the page like the image below.

HTML for buttons (paste this example HTML into the property of a flow button)

No Button

<div class="waves-effect waves-light btn btn-large col s6 margin-sm red darken-2 left-align"><i class="material-icons left"> close </i>No</div>

Yes Button

<div class="waves-effect waves-light btn btn-large col s6 margin-sm green darken-2 left-align"><i class="material-icons right"> check </i>yes</div>

Return/Back Button

This is an example of a return or back that will be the width of the content of the button and not the full screen width.

HTML for buttons (paste this example HTML into the property of a flow button)

Return Button

<div class="waves-effect waves-light btn btn-large pc70 margin-sm var:color_scheme:var darken-3 right-align"><i class="material-icons left large"> replay </i>Return</div>


Heading for the page

This is an example of a heading that can be added to a page using a HTML Embedded item, note that the colour for this element can be inserted in real-time using the var:<variable_name>:var method where if you set a variable with a content (in this case q string that determines the background colour of this element) then the content of that variable will be inserted in real-time while the button is rendering.  This allows you to set a colour scheme for a project and then easily change that colour scheme as required by setting the variable to the colour desired during the application runtime or as a default value for the variable.

HTML for heading (paste this example HTML into a new 'HTML Embedded' item in the Visual interaction)

Heading 

<div class="var:color_scheme:var darken-2 white-text" style="height: 42px; width 100%; font-size: 23px; line-height: 44px">Account Status</div>

Search