Pluxbox Logo
Version 5
Support Pluxbox.com Video's

Platform components

The components are describing the main building blocks of the web application that we want to create. In order to use their full functionality we have to combine them with the events, settings and state controller logic.

All platform components

Audio, Account dropdown, Badge, Button, Checkbox, Container, Date field, Horizontal divider, Fab button, Grid, Grid column, Icon, Image, Label, List item, Multi select, Navigation bar,Numberfield, Option, Radio, Radiogroup, Rich textarea, Select, Side navigation, Textarea, Textfield, Time field, Tooltip

Events

Events can be fired when a user interacts with the interface (e.g. click, mouse hove etc.). When a component is highlighted in the editor a blue plus sign may appear to the right of the component. This indicates there are events available for this component. When an event has been added, a block will appear in the state controller. This is the method used to interact with the user.

  • change
    All components, like text-fields, date fields, selectors etc., have a change event. When the user changes the value of these fields and moves the focus away from the component, this event is fired. The block in the state controller will contain the new data, which can be used directly. The example below will show the user's text in a notification.

  • click
    Some components, like the container, has a 'click' event. When the user clicks this component, the block in the state controller will output the text "click", which is often used as something true.

  • mouseenter
    Some components, like the container, has a 'mouseenter' event. When the mouse enters this component, the block in the state controller will output the text "mouseenter"; which is often used as something true.

  • mouseleave
    Some components, like the container, has a 'mouseleave' event. When the mouse leaves this component, the block in the state controller will output the text "mouseleave"; which is often used as something true.

  • hover
    A combination of mouseenter and mouseleave. Some components, like the container, has a 'hover' event. When the mouse enters this component, the block in the state controller will output true. When the mouse leaves the component, the output will be false.

Settings

General Settings

Title:

  • Describes the Title attribute of the component and is used internally by the platform.
  • Input: Text
  • Can be set by the state-controller.

Text:

  • Describes the default value of the component(Usually used by textfields, labels etc.).
  • Input: Text
  • Can be set by the state-controller.

Value:

  • Describes the value of the component(Usually used by textfields, labels etc.). It is usually changed by the state-controller.
  • Input: Text
  • Can be set by the state-controller.

Allow HTML:

  • Describes the ability of the component to display HTML code.
  • Input: Boolean
  • Can be set by the state-controller.

Visibility:

  • Describes the visibility of the component. It can be visible or not.
  • Input: Boolean
  • Can be set by the state-controller.

Flex:

  • Describes the flex CSS property of the component. More Info
  • Input:
  • Number(flex-grow)
  • Number(flex-shrink)
  • Text(flex-basis)

Flex wrap:

  • Describes the flex-wrap CSS property of the component. More Info
  • Input: Selector with the following values:
  • Visible(nowrap)
  • Hidden(wrap)
  • Auto(wrap-reverse)

Width:

  • Describes the width CSS property of the component. More Info
  • Input:
  • Number(px or %)
  • Selector with the following values:
  • Pixel(px)
  • Relative(%)
  • Auto
  • Can be set by the state-controller.

Max Width:

  • Describes the max-width CSS property of the component. More Info
  • Input:
  • Number(px or %)
  • Selector with the following values:
  • Pixel(px)
  • Relative(%)
  • Auto
  • Can be set by the state-controller.

Min Width:

  • Describes the min-width CSS property of the component. More Info
  • Input:
  • Number(px or %)
  • Selector with the following values:
  • Pixel(px)
  • Relative(%)
  • Auto
  • Can be set by the state-controller.

Height:

  • Describes the height CSS property of the component. More Info
  • Input:
  • Number(px or %)
  • Selector with the following values:
  • Pixel(px)
  • Relative(%)
  • Auto
  • Can be set by the state-controller.

Min Height:

  • Describes the min-height CSS property of the component. More Info
  • Input:
  • Number(px or %)
  • Selector with the following values:
  • Pixel(px)
  • Relative(%)
  • Auto
  • Can be set by the state-controller.

Family:

  • Describes the font-family CSS property of the component. More Info
  • Input: Selector with the following values:
  • Regular
  • Thin
  • SemiBold
  • Bold
  • Medium Italic

Font size:

  • Describes the font-size CSS property of the component. More Info
  • Input:
  • Number
  • Slider(represents the same value as the number)

Decoration:

  • Describes the text-decoration CSS property of the component. More Info
  • Input: Selector with the following values:
  • None
  • Underline
  • StrikeThrough

White space:

  • Describes the white-space CSS property of the component. More Info
  • Input: Selector with the following values:
  • Regular
  • No wrap
  • Pre
  • Pre wrap
  • Pre line
  • Break spaces

Overflow wrap:

  • Describes the overflow-wrap CSS property of the component. More Info
  • Input: Selector with the following values:
  • Overflow
  • Break word
  • Anywhere

Ellipsis:

  • Describes the ability of the label to collapse when contents are too long. More Info
  • Input: Boolean
  • Can be set by the state-controller.

Disabled:

  • Describes the input ability. If set to No the user will not be able to input anything.
  • Input: Boolean
  • Can be set by the state-controller.

Overflow:

  • Describes the overflow CSS property of the component. More Info
  • Input: Selector with the following values:
  • Visible
  • Hidden
  • Auto
  • Scroll

Wrap:

  • Describes the flex-wrap CSS property of the component. More Info
  • Input: Selector with the following values:
  • Wrap
  • No wrap

Background:

  • Describes the background CSS property of the component. More Info
  • Input:
  • Colorpicker
  • Text(Hexadecimal)
  • Number percentage(opacity)
  • Can be set by the state-controller.

Padding:

  • Describes the padding CSS property of the component. More Info
  • Input:
  • Number(px)
  • Selector to choose which form of padding command to use(e.g. padding: 2px; or padding: 1px 2px 3px 4px;)

Margin:

  • Describes the margin CSS property of the component. More Info
  • Input:
  • Number(px)
  • Selector to choose which form of margin command to use(e.g. margin: 2px; or margin: 1px 2px 3px 4px;)

Position Settings

Position:

  • Describes the position CSS property of the component. More Info
  • Input:
  • Selector with the following values:
  • Static
  • Absolute
  • Relative
  • Sticky

Left:

  • Describes the left CSS property of the component. More Info
  • Input:
  • Number
  • Selector with the following values:
  • Pixel(px)
  • Relative(%)
  • Auto
  • Can be set by the state-controller.

Top:

  • Describes the top CSS property of the component. More Info
  • Input:
  • Number
  • Selector with the following values:
  • Pixel(px)
  • Relative(%)
  • Auto
  • Can be set by the state-controller.

Z Index:

  • Describes the z-index CSS property of the component. More Info
  • Input: Number
  • Can be set by the state-controller.

Slide Up:

  • Is set to true when we want a component to have a slide-up animation when the page loads.
  • Input: Boolean
  • Can be set by the state-controller.

Border Settings

Color:

  • Describes the border-color CSS property of the component. More Info
  • Input:
  • Colorpicker
  • Text (Hexadecimal)
  • Number percentage(opacity)
  • Can be set by the state-controller.

Stroke width:

  • Describes the border-width CSS property of the component. More Info
  • Input:
  • Number(px)
  • Selector to choose which form of border-width command to use(e.g. border-width: 2px; or border-width: 1px 2px 3px 4px;)

Radius:

  • Describes the border-radius CSS property of the component. More Info
  • Input:
  • Number(px)
  • Selector to choose which form of border-radius command to use(e.g. border-radius: 2px; or border-radius: 1px 2px 3px 4px;).

Shadow Settings

Color:

  • Describes the color part of the box-shadow CSS property of the component. More Info
  • Input:
  • Colorpicker
  • Text (Hexadecimal)
  • Number percentage(opacity)
  • Can be set by the state-controller.

Position:

  • Describes the length part of the box-shadow CSS property of the component. More Info
  • Input:
  • Number(offset-x)
  • Number(offset-y)
  • Number(blur-radius)
  • Number(spread-radius)

Grid Settings

Zebra color:

  • Gives the ability to the user to use alternating colors when creating grids.
  • Input:
  • Colorpicker
  • Text(Hexadecimal)
  • Number percentage(opacity)
  • Can be set by the state-controller.

Caption:

  • Describes the caption/header of the grid column.
  • Input: Text
  • Can be set by the state-controller.

Footer:

  • Describes the footer content of the grid column.
  • Input: Text
  • Can be set by the state-controller.

Auto shrink:

  • Describes the ability of the grid column to shrink if the contents are short.
  • Input: Boolean
  • Can be set by the state-controller.

Icon Settings

Library set:

  • Describes the source of the icon.
  • Input: Selector with the following values:
  • Pluxbox Icons
  • Material Icons

Name:

  • Describes the name of the icon in a specific library set.
  • Input: Text
  • Can be set by the state-controller.

Icon size:

  • Describes size of the icon
  • Input:
  • Number(px)
  • Slider(represents the same value as the number)

Navigation Bar Settings

Active text:

  • Describes the font color of the active tab text.
  • Input:
  • Colorpicker
  • Text(Hexadecimal)
  • Number percentage(opacity)
  • Can be set by the state-controller.

Active tab:

  • Describes the underline color of the active tab.
  • Input:
  • Colorpicker
  • Text(Hexadecimal)
  • Number percentage(opacity)
  • Can be set by the state-controller.

Active bar:

  • Describes the background color of the active tab.
  • Input:
  • Colorpicker
  • Text(Hexadecimal)
  • Number percentage(opacity)
  • Can be set by the state-controller.

Frame Settings

Slide in:

  • Describes the animation type that you would like your frame to have.
  • Input: Selector with the following values:
  • None
  • No animation
  • Bottom Up
  • Right to Left

Default view:

  • Describes the default view of the frame. When the frame load it will always show this view.
  • Input: Selector with all the views in the workspace

Url Builder

Through this interface you are able to navigate through the frames of the platform and decide which view your link is going to navigate to once clicked.

Audio settings

Show controls:

  • Describes the choice of showing the controls.
  • Input: Boolean
  • Can be set by the state-controller.

Audio URL:

  • Describes the URL source of the audio.
  • Input: Text
  • Can be set by the state-controller.

Play | Pause:

  • Gives you the ability to play/pause the audio through the state controller.
  • Can be set by the state-controller.

Image settings

Upload:

  • Describes default image that this component shows.
  • Input: File
  • Can be set by the state-controller.

Button settings

Caption:

  • Describes text that is on the button.
  • Input: Text
  • Can be set by the state-controller.

Primary:

  • Describes the ability to invert the colors of the buttons.
  • Input: Boolean
  • Can be set by the state-controller.

Checkbox | Radio button settings

Checked:

  • Describes the initial state of the checkbox. If set to Yes the checkbox will be checked by default. More Info
  • Input: Boolean
  • Can be set by the state-controller.

Tooltip settings

Direction:

  • Describes the direction on which the tooltip appears.
  • Input: Selector with the following values:
  • Right
  • Left

Cursor setting

Cursor:

  • Describes cursor property of the component More Info
  • Input: Selector with the following values described in the link above