vff-controllers
v1.0.69
Published
Videoflow controller components
Downloads
18
Readme
Table of contents
- Videoflow Controllers Library
- Videoflow Controllers
- Loading dependencies
- Starter Template
- How to use this library
- Using Controllers
- Available Controllers
Videoflow Controllers Library
This library provides HTML components and Layout helper classes that will allow you to create your Videoflow controllers out of the box.
Videoflow Controllers
Videflow controllers allow you to manage your visual engagement data in most intuitive way. Controllers are HTML elements and can be simply used inside you're HTML. Please note, VFF controllers are Custom Elements and can not be self closing tags. The proper way of using a component is by always writing the opening and the closing tag:
<vff-custom-component></vff-custom-component>Loading dependencies
Javascript
<script type="module" src="https://unpkg.com/vff-controllers/dist/vff-controller/vff-controller.esm.js"></script>
<script nomodule="" src="https://unpkg.com/vff-controllers/dist/vff-controller/vff-controller.js"></script>CSS
<link rel="stylesheet" href="https://unpkg.com/vff-controllers/dist/vff-controller/vff-controller.css"/>Starter Template
<!DOCTYPE html>
<html dir="ltr" lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
<title>Videflow Controllers Starter</title>
<!-- Videoflow CSS -->
<link rel="stylesheet" href="https://unpkg.com/vff-controllers/dist/vff-controller/vff-controller.css"/>
<!-- Videoflow Controllers -->
<script type="module" src="https://unpkg.com/vff-controllers/dist/vff-controller/vff-controller.esm.js"></script>
<script nomodule="" src="https://unpkg.com/vff-controllers/dist/vff-controller/vff-controller.js"></script>
</head>
<body>
<vff-tabs default="section1">
<vff-tab for="section1">First</vff-tab>
<vff-tab for="section2">Second</vff-tab>
<vff-tab for="section3">Third</vff-tab>
</vff-tabs>
<div id="section1" class="ctrl-container">
<div class="ctrl-container-row">[YOUR HTML HERE]</div>
</div>
<div id="section2" class="ctrl-container">
<div class="ctrl-container-row">[YOUR HTML HERE]</div>
</div>
<div id="section3" class="ctrl-container">
<div class="ctrl-container-row">[YOUR HTML HERE]</div>
</div>
</body>
</html>How to use this library
Basic Layout
A section must have a ctrl-container class html<div id="section1" class="ctrl-container">
This is needed in order to control section visibility and give a section the initial CSS it needs.
Each direct descendant of a ctrl-container must have in ctrl-container-row class.
<div id="section1" class="ctrl-container">
<div class="ctrl-container-row">[YOUR HTML HERE]</div>
</div>Tabs
Tabs used to control section visibility.
Each tab has a for attribute : html<vff-tab for="section_id">.
This attribute specifies which content section a tab is bound to.
<vff-tabs>
<vff-tab for="section1">First</vff-tab>
</vff-tabs>Sections
Sections used to visually divide controllers, each section holds controllers needed for a specific engagement screen.
In order to allow a section to be bound to a tab it must have the same id=section_id as the tab.
<div id="section1" class="ctrl-container"></div>Classes
.ctrl-container
.ctrl-container-row
.ctrl-container-block
Using Controllers
Common events that each component fires in different stages of it's life cycle:
Common events that each component listens to:
Available Controllers
After setting up the basic layout, you can start declaring which controllers your layout will include.
vff-checkbox:
<vff-checkbox>You can have you're text here!</vff-checkbox>Properties
vff-radio-button:
<vff-radio-button name="radio-group">Radio1</vff-radio-button>
<vff-radio-button name="radio-group">Radio2</vff-radio-button>
<vff-radio-button name="radio-group">Radio3</vff-radio-button>Properties
vff-image-browser:
<vff-image-browser></vff-image-browser>Properties
Methods
vff-color-picker:
<vff-color-picker></vff-color-picker>Properties
vff-select:
<vff-select></vff-select>Interfaces
Properties:
| Property | Type | Description | |----------|---------------------------|---------------------------------------| | options | SelectItem | SelectItem[] | Sets or returns all available options | | multiple | boolean | Enables multiple selection | | value | SelectItem[] | Sets or returns selected options |
Important: When setting the options, the key must be a unique value to avoid unexpected behaviour.
vff-text:
<vff-text></vff-text>Properties:
| Property | Type | Description | |-------------|---------|-------------------------------------------------------------------------| | multiline | boolean | Defines a multi-line text input control | | placeholder | string | Specifies a short hint that describes the expected value of a text area | | value | string | Sets or returns the contents of a text area |
vff-range:
<vff-range></vff-range>Properties:
| Property | Type | Description | |:---------|:-------|:----------------------------------------------------------------| | max | number | Sets or returns the maximum value allowed | | min | number | Sets or returns the minimum value allowed | | step | number | Sets or returns the number of intervals of a slider control | | value | number | Sets or returns the value of a slider control |
vff-video-time:
<vff-video-time></vff-video-time>Properties:
| Property | Type | Description | |:---------|:-------|:---------------------------------------------------------------------| | value | number | Sets or returns the value in seconds. |