Web-components available in Markdown Free Text
This document describes the web components that can be used in the free text field of AccessibleSurveys.com.
Web component tag MUST be closed:
This will work:
<lapp-youtube videoid="videoid"></lapp-youtube>This will not work:
<lapp-youtube videoid="videoid">Tooltips
pwi-tooltip
An element for displaying tooltip. Tooltip provide additional content when focused or hovered.
Example
Here is a tooltip example: <pwi-tooltip message="this is the tooltip" position="bottom">hover me</pwi-tooltip>Produces:
When a user over the tooltip with or activate it :
Properties
container
container
object
the container used to decide how to position tooltip before opening.
fireonclick
fireonclick
boolean
When true, activate tooltip on click event (and not just on hover)
heading
heading
string
Tooltip title.
message
message
string
message appearing when tooltip is active
noIcon
noIcon
boolean
false
Do not display the info icon top right of tooltip when true
opened
boolean
false
position
position
string
Placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport {'top'
skipFocus
skipFocus
boolean
tooltip is not activatable by tap if true. To use for instance when sloted element is a button (which will receive focus)
tipwidth
tipwidth
string
200
Wdth of the tooltip - overrides css properties.
pwi-form-tooltip
Tooltips to be user in forms. It allows to display glossary definition for complex terms used in the form.
Example
Usually, only term property should be used:
<pwi-form-tooltip term="complexterm">Explain a complex term</pwi-form-tooltip>Produces:
Properties
appName
app-name
string
appName
container
container
object
the container used to decide how to position tooltip before opening.
fireonclick
fireonclick
boolean
When true, activate tooltip on click event (and not just on hover)
heading
heading
string
Tooltip title.
loadingMessage
loadingMessage
string
"loading remote tooltip ..."
loadingMessage message appearing before
remote content was loaded
message
message
string
message appearing when tooltip is active
noIcon
noIcon
boolean
false
Do not display the info icon top right of tooltip when true
opened
boolean
false
path
path
string
path database path
position
position
string
Placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip inside of the viewport {'top'
resource
resource
object
resource the resource object to get
context from. It can be a form or a section.
For editor shall not set this propery as it is handled by the application.
skipFocus
skipFocus
boolean
true
tooltip is not actiabtable by tap if true. To use for instance when sloted element is a button (which will receive focus)
term
term
string
term the term id to get tooltip for
tipwidth
tipwidth
string
200
Wdth of the tooltip - overrides css properties.
Guidance - <pfo-survey-guidance>
<pfo-survey-guidance>pfo-guidance
An element displaying Guidance on how to use iData and how to till out forms.
Guidance appear in the active application language.
Example
<pfo-guidance></pfo-guidance>will display iData Form guidance.
pfo-guidance-video
An element displaying a video on on how to use iData and how to till out forms.
The video adapts to active language
Example
<pfo-guidance-video></pfo-guidance-video>will display iData Form guidance.
Icons
It is sometime helpful to add icons directly in the text. Material icons are available through the following syntax:
<lapp-icon>info</lapp-icon>Produces:
Video - <lapp-youtube> or <lite-youtube>
<lapp-youtube> or <lite-youtube>The element for rendering youtube video is lite-youtube . We deploy an alternative version of this element called lapp-youtube that adds default parameters for allowing to pause videos when necessary, and display videos from the same channel when the video is finished.
Prefer using lapp-youtube over lite-youtube as default parameters are added for you.
Properties
videoid
The YouTube videoid
``
playlabel
label for the play button
Play
params
Set YouTube query parameters
``
Example
Use any YouTube Embedded Players and Player Parameters you like. For lite-youtube We recommend setting rel to 0 as below to avoid showing unrelated video after the video was just played. Those parameters are added by default in lapp-youtube.
<lapp-youtube videoid="xVytWVHX4N0"></lapp-youtube>Or, using the lite-youtube element:
<lapp-youtube videoid="xVytWVHX4N0" param="rel=0&enablejsapi=1"></lapp-youtube>Accessibility
a11y-menu
A menu for accessibility settings. It allows to activate, deactivate or change settings for application theme and contrast, text size, easyread or simplified interface.
In context of forms or survey, it also display readaloud and Internation Sign settings.
Example
<a11y-menu context="survey"></a11y-menu>produces:
Properties
context
context
string
used to show or hide specific accessibility items depending on application context.
For instance, readaloud. international sign are visible only when context = survey.
a11y-dialog-button
A Button opening the application's accessibility menu.
It renders with open accessibility settings label and an accessibility Icon
Example
<a11y-dialog-button outlined></a11y-dialog-button>
Produces:
Properties
outlined
outlined
boolean
Creates an outlined button that is flush with the surface.
unelevated
unelevated
boolean
Creates a contained button that is flush with the surface.
a11y-dialog-button was previously pfo-accessibility-settings, which is now deprecated
Individual accessibility controls
Individual controls exists for each accessibility settings. We recommend the use of <a11y-menu context=form></a11y-menu> in forms as it is more compact.
However there are cases where it makes sense to introduce each accessibility controls individually.
<a11y-easyread></a11y-easyread>
On/Off easyread accessibility settings
<a11y-readaloud></a11y-readaloud>
On/Off readaloud accessibility settings
<a11y-signlanguage></a11y-signlanguage>
On/Off International Sign (IS) accessibility mode
<a11y-theme></a11y-theme>
Display a list of available themes
<a11y-font></a11y-font>
set font size
Last updated