Material
-
MText("MText", [])Text
-
text : string
-
style : [ MTextStyle ]
-
text : string
-
MIcon("home", [])Exhaustive list here:
Icon Font-
name : string
Name of the icon from Material Icons
-
style : [ MIconStyle ]
-
name : string
-
MLetterIcon("M", [], [])shows "99+" for value > 99
Best with single-letter text-
text : string
-
iconStyle : [ MIconStyle ]
-
textStyle : [ MTextStyle ]
-
text : string
-
MBaselineCols([ MTextButton("MTEXTBUTTON", nop, [], []), MFixedX(8.0), MTextButton("MTEXTBUTTON", nop, [], [THovering(make(true))]), MFixedX(8.0), MTextButton("MTEXTBUTTON", nop, [MButtonRaised()], []), MFixedX(8.0), MTextButton("MTEXTBUTTON", nop, [MButtonRaised()], [THovering(make(true))]) ])Buttons (see also under Icons)
Material Guidelines | Buttons-
text : string
-
onClick : () -> void
-
style : [ MTextButtonStyle ]
-
state : [ MButtonState ]
-
text : string
-
MBaselineCols([ MTextClickable("MTextClickable", nop, [], []), MFixedX(8.0), MTextClickable("MTextClickable", nop, [], [THovering(make(true))]) ])-
text : string
-
onClick : () -> void
-
style : [ MClickableTextStyle ]
-
state : [ MButtonState ]
-
text : string
-
MBaselineCols([ MTextClickable("MTextClickable", nop, [], []), MFixedX(8.0), MTextClickable("MTextClickable", nop, [], [THovering(make(true))]) ])MIconButton by default has borders that are half of its size, to override this use MIconButtonBorder.
-
name : string
Name of the icon from Material Icons
-
onClick : () -> void
-
style : [ MIconButtonStyle ]
-
state : [ MButtonState ]
-
name : string
-
MBaselineCols([ MFloatingButton("home", [], []), MFixedX(8.0), MFloatingButton("home", [], [TPressed(make(true))]), ])Material Guidelines | Floating Action Button
-
icon : string
-
style : [ MFabStyle ]
-
state : [ MButtonState ]
-
icon : string
-
MBackground(8, contentMaterial)MGrey(300) by default
Low-level, Tropic-like
Draws a white or dark background for the content with a margin, with a shadow according to the depth-
depth : int
-
m : Material
-
depth : int
-
MList( [ MSingleLine("MSingleLine", []), MDoubleLine("MDoubleLine", "MDoubleLine", [THovering(make(true))]), MTripleLine("MTripleLine", "MTripleLine\nMTripleLine", []), ], [], [] )Lists, dropdown, tables
Material Guidelines | Lists-
lines : [ MListLine ]
-
style : [ MListStyle ]
-
state : [ MListState ]
-
lines : [ MListLine ]
-
MDropDown( make(0), "nonSpecified", [ "First item", "Second item" "Third item" ], [] )The non-specified string is used when the current item is outside the range of items
Link is deprecated. TODO: add appropriate doc link here.
Material Guidelines | Dropdown Buttons-
current : DynamicBehaviour<int>
-
nonSpecified : string
-
items : [ string ]
-
style : [ MDropDownStyle ]
-
current : DynamicBehaviour<int>
-
MMultiSelectDropDown( make([0, 1]), [ "First item", "Second item" "Third item" ], [] )-
selected : DynamicBehaviour<[ int ]>
-
items : [ string ]
-
style : [ MMultiSelectDropDownStyle ]
-
selected : DynamicBehaviour<[ int ]>
-
MDatePicker(make(stamp2date(timestamp())), [])Time and date picker
Material Guidelines | Pickers-
date : DynamicBehaviour<Date>
-
style : [ MDatePickerStyle ]
-
date : DynamicBehaviour<Date>
-
MTimePicker(make(stamp2time(timestamp())), [])Material Guidelines | Pickers
Only handles the time part of the time, on update sets seconds to 0-
time : DynamicBehaviour<Time>
-
style : [ MTimePickerStyle ]
-
time : DynamicBehaviour<Time>
-
MColorPicker(make(MPurpleA(700)), [])-
color : DynamicBehaviour<MColor>
-
style : [ MColorPickerStyle ]
-
color : DynamicBehaviour<MColor>
-
MColorPickerMultiSelect(make(buildSet([MPurpleA(700), MRed(500)])), [])-
colors : DynamicBehaviour<Set<MColor>>
-
style : [ MColorPickerMultiSelectStyle ]
-
colors : DynamicBehaviour<Set<MColor>>
-
MAvatar("images/avatar.png", [])Picture centered and resized to fit circle (18 dp radius by default)
-
imageurl : string
-
style : [ MAvatarStyle ]
-
imageurl : string
-
MProgressBar([])Material Guidelines | Linear Progress Indicators
indeterminate-
style : [ MProgressBarStyle ]
-
style : [ MProgressBarStyle ]
-
MProgressCircle([])Material Guidelines | Circular Progress Indicators
-
style : [ MProgressCircleStyle ]
-
style : [ MProgressCircleStyle ]
-
MProgressBarDeterm(make(0.5), [])determinate, percent should grow from 0.0 to 1.0
If size.width < 0, fill x. If size.height < 0, use default height.-
percent : Transform<double>
-
style : [ MProgressBarStyle ]
-
percent : Transform<double>
-
MProgressCircleDeterm(make(0.5), [])-
percent : Transform<double>
-
style : [ MProgressCircleStyle ]
-
percent : Transform<double>
-
MRipple
TODO: Describe what this is-
m : Material
-
m : Material
-
-
m : Material
-
m : Material
-
MSeparator(true)1dp separator
Material Guidelines | Dividers-
horizontal : bool
-
horizontal : bool
-
MSeparatorSize(true, 4.0)-
horizontal : bool
-
minSize : double
-
horizontal : bool
-
MBaselineCols([contentMaterial, contentMaterial2])-
m : [ Material ]
-
m : [ Material ]
-
MGrid([[contentMaterial, contentMaterial2], [contentMaterial2, contentMaterial]])-
m : [ Material ]
-
m : [ Material ]
-
-
m : [[ Material ]]
-
m : [[ Material ]]
-
MLines([contentMaterial, contentMaterial2])-
m : [ Material ]
-
m : [ Material ]
-
MCols([contentMaterial, contentMaterial2])-
m : [ Material ]
-
m : [ Material ]
-
MGroup([contentMaterial2, contentMaterial])-
m : [ Material ]
-
m : [ Material ]
-
-
left : double
-
top : double
-
right : double
-
bottom : double
-
m : Material
-
left : double
-
-
name : string
-
scope : Material
-
name : string
-
MAlpha
See also MAvailable* helpers into material_gui.flow -
MVisible
Preserves the size when invisible -
MShow
Destroys and reconstructs, and is 0 size when invisible -
MIfPreRender
Workaround for MIf to prerender inner stuff, use only in special cases -
MIfLazy
Be careful, f is called 2 times as a maximum, results of these calls are cached.
Check out tests/test_mif_lazy.flow for illustration. -
-
interactivity : [ TInteractivity ]
-
form : Material
-
interactivity : [ TInteractivity ]
-
-
kind : CursorShape2
-
m : Material
-
kind : CursorShape2
-
-
constructors : [ () -> () -> void ]
-
m : Material
-
constructors : [ () -> () -> void ]
-
-
disposers : [ () -> void ]
-
m : Material
-
disposers : [ () -> void ]
-
MFixSize
Overrides logical size (doesn't effect display!). Use only in specific cases -
-
m : Material
-
m : Material
-
-
m : Material
-
m : Material
-
-
m : Material
-
m : Material
-
MCase
Render content which depends on available area.
Not very convenient in this signature, only use if you know what you're doing. -
-
content : Material
-
box : Material
-
style : [ MScrollStyle ]
-
content : Material
-
MChart
Line Chart
Google Charts | Line Chart
Heigth of the chart is calculated without title and subtitle height
Width of the chart is calculated with width of the legend which is 1/4 of the chart width-
data : MChartData
-
style : [ MChartStyle ]
-
data : MChartData
-
-
columns : Transform<[ MChartColumn ]>
-
rows : Transform<[ MChartRow ]>
-
style : [ MDynamicChartStyle ]
-
columns : Transform<[ MChartColumn ]>
-
MCheckBox
Switches, check boxes, sliders, text input
Use MText with MBody style for normal text
Material Guidelines | Checkboxes-
caption : Material
-
value : DynamicBehaviour<bool>
-
style : [ MCheckableStyle ]
-
caption : Material
-
MRadio
Material Guidelines | Radio Buttons
use MRadios to create a group of MRadio at once-
caption : Material
-
thisValue : int
-
activeValue : DynamicBehaviour<int>
-
style : [ MCheckableStyle ]
-
caption : Material
-
MSlider
Material Guidelines | Sliders
Value is within 0.0 - 1.0 by default
MWidth defines width of the slider itself, regardless of borders or icons. To define width of whole MSlider, wrap it into MAvailableWidth.-
value : DynamicBehaviour<double>
-
style : [ MSliderStyle ]
-
value : DynamicBehaviour<double>
-
MSwitchControl
Material Guidelines | Switches-
value : DynamicBehaviour<bool>
-
style : [ MSwitchControlStyle ]
-
value : DynamicBehaviour<bool>
-
MIconToggle
Material Guidelines | Toggle Button-
icon : string
-
style : [ MToggleStyle ]
-
state : [ MToggleState ]
-
icon : string
-
MTooltip
Tooltip, progress, misc
Material Guidelines | Tooltips-
box : Material
-
tooltip : Material
Content of the popup
-
style : [ MTooltipStyle ]
-
box : Material
-
MToolbar
Material Guidelines | App Bars: Top
You can add FAB to toolbar just passing it to style. Size of the toolbar stays same.
You can extend size of the toolbar or change its content by passing your Material to MToolbarContent.-
expander : DynamicBehaviour<bool>
-
title : Material
-
right : [ Material ]
-
style : [ MToolbarStyle ]
-
expander : DynamicBehaviour<bool>
-
MAppStructure
Inspects animation progress
Application structure
Material Guidelines | UI Regions-
parts : [ MLayoutPart ]
-
style : [ MAppStyle ]
-
parts : [ MLayoutPart ]
-
MSideNav
Helper for a common kind of left-hand side nav bar-
head : MSNHead
-
list : Material
-
expander : Transform<bool>
-
style : [ MSideNavStyle ]
-
head : MSNHead
-
MCard
Cards
Material Guidelines | Cards-
blocks : [ MCardBlock ]
-
style : [ MCardStyle ]
-
state : [ MButtonState ]
-
blocks : [ MCardBlock ]
-
MExpander
Displays the header. When expanded, displays the details
Link is deprecated. TODO: add appropriate doc link here.
Material Guidelines | Expansion Panels-
header : Material
-
details : () -> Material
-
expander : DynamicBehaviour<bool>
-
style : [ MExpanderStyle ]
-
header : Material
-
-
content : Material
-
expanded : Transform<bool>
-
style : [ MAnimatedExpanderStyle ]
-
content : Material
-
MMenu
Menu
Material Guidelines | Menus
When button is MTextButton or MIconButton MOpenMenu is created automatically, in other cases
you should handle menu opening yourself.
You can handle onClick actions from whole menu with item id as parameter using MOnListClick or
separately for each menu item using MOnClick. Same goes for MSubMenu.-
button : Material
-
items : [ MMenuLine ]
-
style : [ MMenuStyle ]
-
button : Material
-
-
button : Material
-
items : Transform<[ MMenuLine ]>
-
style : [ MMenuStyle ]
-
button : Material
-
MDropDownMenu
Helper for dropdown like MMenu
Material Guidelines | Dropdown Menu-
items : [ MDropDownMenuLine ]
-
current : DynamicBehaviour<int>
-
style : [ MDropDownMenuStyle ]
-
items : [ MDropDownMenuLine ]
-
MMenuPanel
Menu panel that takes full width.-
items : [ Material ]
-
style : [ MMenuPanelStyle ]
-
items : [ Material ]
-
MGridList
Grid List
Material Guidelines | Image Lists
A grid list consists of a repeated pattern of cells arrayed in a vertical and horizontal layout.
Grid lists are best used on similar data types. They help improve the visual comprehension of the content they contain.-
cells : Transform<[ MGridListCell ]>
-
style : [ MGridListStyle ]
-
cells : Transform<[ MGridListCell ]>
-
-
items : Transform<[ Material ]>
-
style : [ MFlexibleGridStyle ]
-
items : Transform<[ Material ]>
-
-
items : Transform<[ Material ]>
-
style : [ MDynamicGridStyle ]
-
items : Transform<[ Material ]>
-
MRecyclerGrid
Arranges items as grid inside scroll view while rendering only elements visible inside view box
Scroll view takes up whole available space-
items : Transform<[[ Material ]]>
-
style : [ MRecyclerGridStyle ]
-
items : Transform<[[ Material ]]>
-
MTree
Replaces 'fn' with function that allows to scroll to an item on the specific row and column-
children : Transform<[ MTreeNode<?> ]>
-
style : [ MTreeStyle ]
-
children : Transform<[ MTreeNode<?> ]>
-
-
full : Material
-
size : Material
-
style : [ MEllipsisStyle ]
-
full : Material
-
MEllipsisText
Displays the given text in the available area-
text : string
-
style : [ MEllipsisTextStyle ]
-
text : string
-
MSplitter
StartAlign() by default
Splitter
Material Guidelines | Android Split-screen-
m1 : Material
-
m2 : Material
-
size : Material
-
style : [ MSplitterStyle ]
-
m1 : Material
-
MShadow
Please provide these in ascending of width order, and all shorter than MEllipsisText.text.
Adds a shadow to reflect the z-order as specified in
Material Guidelines | Elevation
z is between 0.0 (no shade) to 24.0 -
-
z : Transform<double>
-
m : Material
-
shape : ShadowShape
-
z : Transform<double>
-
MDebug
Draws rectangles : actual size - given color, minimum size - blue, maximum size - green, available space from parent - red, baseline - black line
For special cases see MDebug* into material_gui.flow-
c : int
-
box : Material
-
c : int
-
MSize
Deprecated. Use MFixSize instead of MSize. -
-
m : Material
-
m : Material
-
-
target : Material
-
movableArea : Material
-
style : [ MMovableStyle ]
-
target : Material
-
MResizable
Scales to available area for WidthHeight(-1., -1.)-
content : Material
-
style : [ MResizableStyle ]
-
content : Material
-
MDraggable
Use MDragDrop instead of MDraggable and MDropSpot
MDraggable and MDropSpot are left here for backward compatibility-
id : int
-
stationary : Material
-
style : [ MDragStyle ]
-
id : int
-
-
onHover : DynamicBehaviour<int>
-
onDrop : DynamicBehaviour<int>
-
dropTropic : Material
-
onHover : DynamicBehaviour<int>
-
-
onHover : DynamicBehaviour<int>
-
onDrop : DynamicBehaviour<int>
-
dropTropic : Material
-
handle : bool
-
onHover : DynamicBehaviour<int>
-
-
list : [ MNavigationM ]
-
style : [ MNavigationStyle ]
-
list : [ MNavigationM ]
-
MImageMap
Similar to HTML imagemap: Polygons defining areas. Click to change to the current one-
picture : Tropic
-
areas : [ MArea ]
-
current : DynamicBehaviour<int>
-
style : [ MImageMapStyle ]
-
picture : Tropic
-
-
picURL : string
-
style : [ MPictureStyle ]
-
picURL : string
-
MExplicitTheme
Set a specific theme for the target-
target : Material
-
light : Transform<bool>
-
state : [ MComponentGroupState ]
-
target : Material
-
MChip
Chips
Material Guidelines | Chips-
title : string
-
style : [ MChipStyle ]
-
title : string
-
MScaleAvailable
Scales available space -
-
content : Material
-
state : [ MComponentGroupState ]
-
content : Material
-
-
content : Transform<Material>
-
state : [ MComponentGroupState ]
-
content : Transform<Material>
-
-
items : Transform<[ MListLine ]>
-
style : [ MDynamicListStyle ]
-
state : [ MDynamicListState ]
-
items : Transform<[ MListLine ]>
-
MDynamicTabs
Tabs
Material Guidelines | Tabs
Tabs enable content organization at a high level, such as switching between views, data sets, or functional aspects of an app.
Present tabs as a single row above their associated content. Tab labels should succinctly describe the content within.
Because swipe gestures are used for navigating between tabs, don't pair tabs with content that also supports swiping.-
tabs : Transform<[ MTab ]>
-
selected : DynamicBehaviour<int>
Id of the currently selected tab
-
style : [ MTabsStyle ]
-
tabs : Transform<[ MTab ]>
-
-
fw : DynamicBehaviour<bool>
-
m : Material
-
fw : DynamicBehaviour<bool>
-
-
fs : DynamicBehaviour<bool>
-
m : Material
-
fs : DynamicBehaviour<bool>
-
-
content : Material
-
state : [ MSwipeState ]
-
content : Material
-
-
fn : (MaterialManager) -> Material
-
fn : (MaterialManager) -> Material
-
-
fn : (MFocusGroup) -> Material
-
fn : (MFocusGroup) -> Material
-
-
prop : [ FAccessProperty ]
-
m : Material
-
prop : [ FAccessProperty ]
-
-
positionScale : DynamicBehaviour<PositionScale>
-
m : Material
-
positionScale : DynamicBehaviour<PositionScale>
-
-
url : string
-
wh : Transform<WidthHeight>
-
style : [ RealHTMLStyle ]
-
url : string
-
MVideoPlayer
Supports YouTube and Vimeo links (creates iframe instead of video)-
filename : string
-
wh : Transform<WidthHeight>
-
style : [ MVideoPlayerStyle ]
-
filename : string
-
-
filters : [ Filters ]
-
m : Material
-
filters : [ Filters ]
-
-
shape : Transform<GShape>
-
style : Transform<[ TGraphicsStyle ]>
-
shape : Transform<GShape>
-
MBottomNav
Bottom Navigation
Material Guidelines | Bottom Navigation-
actions : [ MBottomNavAction ]
-
style : [ MBottomNavStyle ]
-
selected : DynamicBehaviour<int>
-
expander : DynamicBehaviour<bool>
-
actions : [ MBottomNavAction ]
-
MDragDrop
3px by default
Draggable and DropSpot in one-
id : Transform<int>
-
content : Material
-
style : [ MDragDropStyle ]
-
id : Transform<int>
-
-
fn : (tropic2acc : (mat : Material, parentInfo : TParentInfo, sheet : Stylesheet, metricsOnly : bool) -> TAcc, parentInfo : TParentInfo, sheet : Stylesheet, metricsOnly : bool) -> TAcc
-
fn : (tropic2acc : (mat : Material, parentInfo : TParentInfo, sheet : Stylesheet, metricsOnly : bool) -> TAcc, parentInfo : TParentInfo, sheet : Stylesheet, metricsOnly : bool) -> TAcc
-
MStepper
A wizard-like stepper
Material Guidelines | Steppers-
steps : [ MStep ]
-
selectedId : DynamicBehaviour<int>
-
type : MStepperType
-
style : [ MStepperStyle ]
-
steps : [ MStep ]
-
MCarousel
Carousel-
contents : [ MCarouselContent ]
-
activeIdx : DynamicBehaviour<int>
-
style : [ MCarouselStyle ]
-
contents : [ MCarouselContent ]
-
-
margin : double
-
radius : double
-
style : [ TGraphicsStyle ]
-
box : Material
-
margin : double
-
MRawButton
Use MComponent instead of MRawButton
MRawButton is left here for backward compatibility-
normal : Material
-
hover : Material
-
pressed : Material
-
disabled : Material
-
shortcut : string
-
style : [ TButtonStyle ]
-
state : [ MRawButtonState ]
-
normal : Material
-
MDynamicParagraph
Overrides MColor
MDynamicParagraph with CenterAlign()/RightAlign() has unlimited width and behaves like filler.
Use FullWidth() to fill all available width by default-
text : Transform<string>
-
style : [ MParagraphStyle ]
-
text : Transform<string>
-
MTextInput
Be sure to make the width a multiple of 8
If width < 0, takes all available width
Material Guidelines | Text Fields-
content : DynamicBehaviour<string>
-
style : [ MTextInputStyle ]
-
state : [ MTextInputState ]
-
content : DynamicBehaviour<string>
-
MSmallEditDialog
Link is deprecated. TODO: add appropriate doc link here.
Material Guidelines | Data Table Interactions
Text input with edit popup. Intended for usage inside MDataTable.-
content : DynamicBehaviour<string>
-
style : [ MTextInputStyle ]
-
state : [ MTextInputState ]
-
content : DynamicBehaviour<string>
-
MDynamicDataTable
A table of information
Material Guidelines | Data Tables-
columns : [ MColumnDynamic ]
-
rows : Transform<[[ Material ]]>
-
style : [ MDataTableStyle ]
-
columns : [ MColumnDynamic ]
-
-
content : DynamicBehaviour<string>
-
dictionaries : [ string ]
-
style : [ MAutoCompleteStyle ]
-
state : [ MTextInputState ]
-
content : DynamicBehaviour<string>
-
-
style : [ TTweakStyle ]
-
content : Material
-
size : Material
-
style : [ TTweakStyle ]
-
-
point : Maybe<DynamicBehaviour<Point>>
-
down : DynamicBehaviour<bool>
-
hover : DynamicBehaviour<bool>
-
onClick : () -> void
-
m : Material
-
point : Maybe<DynamicBehaviour<Point>>
-
MClickable
Click helpers
Sends down events to lower z-order elements.-
m : Material
-
onClick : () -> void
-
m : Material
-
-
state : [ MButtonState ]
-
fn : (focus : MFocus) -> Material
-
state : [ MButtonState ]
-
-
items : MReorderItem
-
order : DynamicBehaviour<int>
-
style : [[ MReorderGridStyle ]]
-
fn : ([ Material ]) -> Material
-
items : MReorderItem
-
MReorderGrid
Drop spot is always above the hovered line. Intended for using into MList to prevent "gluing" of lines-
items : [ MReorderItem ]
-
order : DynamicBehaviour<[ int ]>
-
style : [ MReorderGridStyle ]
-
items : [ MReorderItem ]
-
-
stackChanges : DynamicBehaviour<[ MGroupChange ]>
-
currentStack : ref [ Material ]
-
combiner : TCombiner
-
stackChanges : DynamicBehaviour<[ MGroupChange ]>
-
MInspect
Inspects metrics of m. See MAttach* helpers into material_gui also.-
inspectors : [ TInspector ]
-
m : Material
-
inspectors : [ TInspector ]
-
MBackdrop
Material Guidelines | Backdrop-
header : Material
-
content : Material
-
style : [ MBackdropStyle ]
-
header : Material
-
MAnimator
Helpers for implementing custom elements
Helper to create simple animations. Try MMEasingAnimation for complicated ones.-
m : Material
-
trigger : Transform<bool>
-
style : [ MAnimatorStyle ]
-
m : Material
-
Tropic
Tropic types-
-
positionScale : DynamicBehaviour<PositionScale>
-
t : Tropic
-
positionScale : DynamicBehaviour<PositionScale>
-
TEmpty
Practically exact copies of Form -
-
text : string
-
style : [ TCharacterStyle ]
-
text : string
-
-
text : Transform<string>
-
style : [ TParagraphStyle ]
-
text : Transform<string>
-
-
path : [ StaticGraphicOp ]
-
style : [ TGraphicsStyle ]
-
path : [ StaticGraphicOp ]
-
-
path : Transform<[ StaticGraphicOp ]>
-
style : Transform<[ TGraphicsStyle ]>
-
path : Transform<[ StaticGraphicOp ]>
-
-
url : string
-
style : [ TPictureStyle ]
-
url : string
-
TRealHTML
Keep aspect ratio while scaling to TPictureSize-
url : string
-
wh : Transform<WidthHeight>
-
style : [ RealHTMLStyle ]
-
url : string
-
-
filename : string
-
wh : DynamicBehaviour<WidthHeight>
-
style : [ FVideoStyle ]
-
filename : string
-
TBorder
Recursive Forms, modelled after Form with small adjustments-
left : double
-
top : double
-
right : double
-
bottom : double
-
form : Tropic
-
left : double
-
TVisible
The tropic is NOT destroyed/reconstructed when 'visible' becomes false/true for performance, only hidden.
See TShow in tropic_gui.flow if you want it to be destroyed and reconstructed. -
-
filters : [ Filters ]
-
form : Tropic
-
filters : [ Filters ]
-
-
kind : CursorShape2
-
form : Tropic
-
kind : CursorShape2
-
-
properties : [ FAccessProperty ]
-
form : Tropic
-
properties : [ FAccessProperty ]
-
-
interactivity : [ TInteractivity ]
-
form : Tropic
-
interactivity : [ TInteractivity ]
-
TBaselineOffset
TODO: Introduce more events here
MouseWheel, FineGrainMouseWheel - join these to one
PinchGesture - We have some wrappers for these gestures to make them more robust. See ui/gestures.flow
SwipeGesture,
Add the offset to the baseline -
TFullWindow
Provides a way to get a Tropic as full window
You cannot start with fullscreen on-
fullwindow : DynamicBehaviour<bool>
-
tropic : Tropic
-
fullwindow : DynamicBehaviour<bool>
-
TFullScreen
Provides a way to get a Tropic as full screen
You cannot start with fullscreen on-
fullscreen : DynamicBehaviour<bool>
-
tropic : Tropic
-
fullscreen : DynamicBehaviour<bool>
-
TForm
An escape hatch to include a Form in Tropic, which gets 0 available. The size is defined by Form.-
form : Form
-
form : Form
-
TFormIn
An escape hatch to include a Form in Tropic. Will get available as defined by the box. Size is defined by the box.-
form : Form
-
box : Tropic
-
form : Form
-
TFormAvailable
An escape hatch to include a Form in Tropic. Will get available as defined by the box. Size is defined by the form.-
form : Form
-
box : Tropic
-
form : Form
-
-
fform : FForm
-
metrics : TFormMetrics
-
fform : FForm
-
-
fform : SFForm
-
metrics : TFormMetrics
-
fform : SFForm
-
TCase
Picks the best case based on how much space is available.
The sizes define the ideal size range for the correspond case.
The length of the sizes has to match the cases.
The sizes should reflect the minimum and maximum box that is useful the corresponding case.
Example: If we have a small version of a UI that does not require more than 100x100 pixels,
and then a bigger one, we can do this to automatically choose the best one based on the
available space:
TCase( [ TFixed(100.0, 100.), TGroup2(TFixed(100.0, 100.0), TFillXY())], [ small, big ] ) -
-
constructors : [ () -> () -> void ]
-
tropic : Tropic
-
constructors : [ () -> () -> void ]
-
-
disposers : [ () -> void ]
-
tropic : Tropic
-
disposers : [ () -> void ]
-
TGroup2
Place boxes on top of each other at the top, left corner -
TCols2
Place boxes next to each other such that they are top aligned -
TBaselineCols2
Place boxes next to each other, aligning their baselines -
TLines2
Place boxes on top of each others such that they are left aligned -
TBaselineLines2
Place boxes on top of each others such that they are left aligned and keeps baseline of the first box -
TAvailable
Define how much space fillers have to work with in this box. If the box is physically larger than maxsize, the box will win. -
TTweak
Powerful manipulation with resizing, cropping, alignment.
Pass TEmpty to size if you want to align content to its metrics (useful for content snapping without any other form).-
style : [ TTweakStyle ]
-
content : Tropic
-
size : Tropic
-
style : [ TTweakStyle ]
-
TZoomFill
Do not use directly - this part is handled by trender.-
box : Tropic
-
box : Tropic
-
TFillX
Grow maximally in the width -
TFillY
Grow maximally in the height -
TRounded
A rounded rectangle that is as big as the size metrics-
nw : double
-
ne : double
-
lw : double
-
le : double
-
style : [ TGraphicsStyle ]
-
size : Tropic
-
nw : double
-
TAttach
Given a ghost, that defines resizing behaviour, construct a tropic with access to the metrics of the ghost.
The size is given by the maximum of the ghost and the result. -
TSize
Overrides the size -
TSizeOf
Retrieves size of trpoic-
content : Tropic
-
content : Tropic
-
TCropSize
Like Crop, except it only crops the size, and not any position -
TShift
Moves a tropic the distance, so that the size of the distance is placed at 0,0 in the form.
The size comes from the form. Size is taken from form as is. -
TMinimumGroup2
The smallest of two tropics -
TSubtractGroup2
Size is t1 - t2 -
TDebug
Debug a tropic - size is the given color, minimum size is blue rectangle, maximum size is green rectangle
how much space do we get from the parent - red-
color : int
-
b : Tropic
-
color : int
-
TLet
Define a named value in the given scope. This can be used with TDisplay and TGhost.
Notice TGhost only works if the named thing is displayed. -
TLetAvailable
Works the same as TLet, only takes available as its value.-
name : string
-
scope : Tropic
-
name : string
-
TNamespace
Use clean namespace. Inner TLet names won't override any outer TLet and vice versa.
Inner TDisplay, TGhost, TGhostMin won't see any outer TLet and vice versa.-
tropic : Tropic
-
tropic : Tropic
-
TDisplay
Displays the named value as defined by TLet.-
name : string
-
name : string
-
TGhost
Constructs an empty box with the same metrics as the named value. Notice this only works if the named value is TDisplayed-
name : string
-
name : string
-
TGhostMin
Constructs an empty box with the same minimum metrics as the named value. Notice this only works if the named value is TDisplayed-
name : string
-
name : string
-
TTag
Tag this Tropic so that we can find the position with trenderManager later-
tag : int
-
t : Tropic
-
tag : int
-
-
setfn : (fn : () -> TransformMatrix) -> void
-
t : Tropic
-
setfn : (fn : () -> TransformMatrix) -> void
-
TInspect
Inspects metrics of t. See TAttach* helpers into tropic_gui also.-
inspectors : [ TInspector ]
-
t : Tropic
-
inspectors : [ TInspector ]
-
TOverride
Overrides metrics of t.-
overriders : [ TOverrider ]
-
t : Tropic
-
overriders : [ TOverrider ]
-
-
fn : (tropic2acc : (t : Tropic, parentInfo : TParentInfo, sheet : Stylesheet, metricsOnly : bool) -> TAcc, parentInfo : TParentInfo, sheet : Stylesheet, metricsOnly : bool) -> TAcc
-
fn : (tropic2acc : (t : Tropic, parentInfo : TParentInfo, sheet : Stylesheet, metricsOnly : bool) -> TAcc, parentInfo : TParentInfo, sheet : Stylesheet, metricsOnly : bool) -> TAcc
-
-
stackChanges : DynamicBehaviour<[ TGroupChange ]>
-
currentStack : ref [ Tropic ]
-
combiner : TCombiner
-
stackChanges : DynamicBehaviour<[ TGroupChange ]>
-
-
MParagraph -> Material
Restricts available width for paragraph.-
text : string
-
style : [ MParagraphStyle ]
-
text : string
-
MFocusClickable -> Material
Use MComponent instead of MFocusClickable directly-
state : [ MButtonState ]
-
fn : (focus : MFocus) -> Material
-
state : [ MButtonState ]
-
MVideo -> Material
-
filename : string
-
wh : DynamicBehaviour<WidthHeight>
-
style : [ FVideoStyle ]
-
filename : string
-
MEmpty -> Material
-
MPad -> Material
See also MBorder* helpers into material_gui.flow-
x : double
-
y : double
-
content : Material
-
x : double
-
MOffset -> Material
-
dx : double
-
dy : double
-
content : Material
-
dx : double
-
MScrollBox -> Material
-
content : Material
-
content : Material
-
MActivate -> Material
-
content : Material
-
state : [ MComponentGroupState ]
-
content : Material
-
MActivateMutable -> Material
-
content : Transform<Material>
-
state : [ MComponentGroupState ]
-
content : Transform<Material>
-
MActivateSelect -> Material
-
value : Transform<?>
-
fn : (?) -> Material
-
state : [ MComponentGroupState ]
-
value : Transform<?>
-
MSelect -> Material
-
MComponentGroupSelect -> Material
-
value : Transform<?>
-
fn : (?) -> Material
-
state : [ MComponentGroupState ]
-
value : Transform<?>
-
MGhost -> Material
-
name : string
-
name : string
-
MDisplay -> Material
-
name : string
-
name : string
-
MWidthOf -> Material
-
m : Material
-
m : Material
-
MHeightOf -> Material
-
m : Material
-
m : Material
-
MLinesA -> Material
-
arr : [ Material ]
-
arr : [ Material ]
-
MLines2A -> Material
-
MBaselineLinesA -> Material
-
arr : [ Material ]
-
arr : [ Material ]
-
MBaselineLines2A -> Material
-
MColsA -> Material
-
m : [ Material ]
-
m : [ Material ]
-
MCols2A -> Material
-
MBaselineColsA -> Material
-
m : [ Material ]
-
m : [ Material ]
-
MBaselineCols2A -> Material
-
MGridA -> Material
-
arr : [[ Material ]]
-
arr : [[ Material ]]
-
MBorderA -> Material
-
start : double
-
top : double
-
end : double
-
bottom : double
-
m : Material
-
start : double
-
MPadA -> Material
-
x : double
-
y : double
-
content : Material
-
x : double
-
MOnTop -> Material
Help to create common patterns, when you need to place smth at the top
of another material -
MRightShift -> Material
-
m : Material
-
m : Material
-
MLazyOnCondition -> Material
Construct material only once when condition is or becomes true. -
MShowLazy -> Material
Lazy sibling of MShow. -
MLazyList -> Material
Construct lines in list only when they are in visible space of scroll-
lines : [ () -> Material ]
-
scrollInspect : TScrollInspectVisible
-
lines : [ () -> Material ]
-
MLazyListExtended -> Material
MLazyList with forceLoad - backdoor for loading specific item and items above it without scrolling -
MPopupMenu -> Material
Helper for standard popup menu
topLeft is catched only when isVisible becomes true-
topleft : DynamicBehaviour<Point>
-
isVi
10000
sible : DynamicBehaviour<bool>
-
items : [ MMenuLine ]
-
topleft : DynamicBehaviour<Point>
-
MTopMost -> Material
Helper for lifting element up, above popups and dialogs-
content : Material
-
style : [ MTopMostStyle ]
-
content : Material
-
MDashedCircle -> Material
Helper for creating dashed or dotted circle-
radius : double
-
dashNumber : int
-
color : MColor
-
radius : double
-
MEditGrid -> Material
-
items : MEGItem
-
style : [ MEGItemStyle ]
-
items : MEGItem
-
MEGItem2M -> Material
-
item : MEGItem
-
gstyle : [ MEGItemStyle ]
-
item : MEGItem
-
makeMRealHTML -> Material
-
key : string
-
html : MRealHTML
-
key : string
-
MRealHTMLCrossDomain -> Material
-
MRealHTMLCrossDomain2 -> Material
-
MReorderCols -> Material
Changes items on every dragging ends-
items : DynamicBehaviour<[ ? ]>
-
materialize : (?) -> Material
-
style : [ MReorderStyle ]
-
items : DynamicBehaviour<[ ? ]>
-
MReorderLines -> Material
-
items : DynamicBehaviour<[ ? ]>
-
materialize : (?) -> Material
-
style : [ MReorderStyle ]
-
items : DynamicBehaviour<[ ? ]>
-
SelectMLines -> Material
index - position in array, id - unique identifier -
SelectMLinesA -> Material
-
SelectMCols -> Material
-
SelectMColsA -> Material
-
SelectMGroup -> Material
-
MAudioPlayer -> Material
-
filename : string
-
style : [ MAudioPlayerStyle ]
-
filename : string
-
MMultiAudioPlayer -> Material
FVideoTimeRange style disabled-
filenames : [ string ]
-
mstyle : [ MMultiAudioPlayerStyle ]
-
filenames : [ string ]
-
MInlinePopup -> Material
use to place material on top of placeholder over other elements -
MInlinePopupPosition -> Material
-
MDropDownOrAutoComplete -> Material
-
items : [ string ]
-
selected : DynamicBehaviour<int>
-
style : [ MDropDownOrAutoCompleteStyle ]
-
items : [ string ]
-
MCollapsingBox -> Material
Intended for MAutoComplete case. -
MHTMLStage -> Material
Construct an HTML stage with the given metrics-
wh : Transform<WidthHeight>
-
constructor : (stage : native) -> () -> void
-
wh : Transform<WidthHeight>
-
MLinesSeparated -> Material
-
values : [ Material ]
-
values : [ Material ]
-
MColsSeparated -> Material
-
values : [ Material ]
-
values : [ Material ]
-
MPictureFill -> Material
-
picURL : string
-
style : [ MPictureStyle ]
-
picURL : string
-
MPictureFit -> Material
-
picURL : string
-
style : [ MPictureStyle ]
-
picURL : string
-
MTabs -> Material
-
tabs : [ MTab ]
-
selected : DynamicBehaviour<int>
-
style : [ MTabsStyle ]
-
tabs : [ MTab ]
-
MDataTable -> Material
-
columns : [ MColumnDynamic ]
-
rows : [[ Material ]]
-
style : [ MDataTableStyle ]
-
columns : [ MColumnDynamic ]
-
MAttachBox -> Material
Bunch of helpers to inspect sizes. Consider using MInspect also.-
m : Material
-
box : DynamicBehaviour<WidthHeight>
-
m : Material
-
MAttachWidth -> Material
-
m : Material
-
width : DynamicBehaviour<double>
-
m : Material
-
MAttachHeight -> Material
-
m : Material
-
height : DynamicBehaviour<double>
-
m : Material
-
MAttachWidthHeight -> Material
-
m : Material
-
width : DynamicBehaviour<double>
-
height : DynamicBehaviour<double>
-
m : Material
-
MAttachAvailable -> Material
-
m : Material
-
box : DynamicBehaviour<WidthHeight>
-
m : Material
-
MAttachAvailableWidth -> Material
-
m : Material
-
width : DynamicBehaviour<double>
-
m : Material
-
MAttachAvailableHeight -> Material
-
m : Material
-
height : DynamicBehaviour<double>
-
m : Material
-
MAttachAvailableWidthHeight -> Material
-
m : Material
-
width : DynamicBehaviour<double>
-
height : DynamicBehaviour<double>
-
m : Material
-
MAttachBox2 -> Material
Inspects m, draws content -
MAttachWidth2 -> Material
-
MAttachHeight2 -> Material
-
MAttachBoxThrottle -> Material
Special cases to inspect-
m : Material
-
box : DynamicBehaviour<WidthHeight>
-
maxDelta : int
-
m : Material
-
MThrottleMetrics -> Material
-
m : Material
-
maxDelta : int
-
m : Material
-
MAvailableWidth -> Material
Helpers to set available for only width, only height, or both -
MAvailableHeight -> Material
-
MAvailableWidthHeight -> Material
-
MAlignStart -> Material
MAlign helpers-
m : Material
-
m : Material
-
MAlignEnd -> Material
Align left if LTR, align right if RTL-
m : Material
-
m : Material
-
MAlignStartFill -> Material
Align right if LTR, align left if RTL-
m : Material
-
m : Material
-
MAlignEndFill -> Material
-
m : Material
-
m : Material
-
MAlignLeft -> Material
-
m : Material
-
m : Material
-
MAlignTop -> Material
-
m : Material
-
m : Material
-
MAlignRight -> Material
-
m : Material
-
m : Material
-
MAlignBottom -> Material
-
m : Material
-
m : Material
-
MAlignTopLeft -> Material
-
m : Material
-
m : Material
-
MAlignTopCenter -> Material
-
m : Material
-
m : Material
-
MAlignTopRight -> Material
-
m : Material
-
m : Material
-
MAlignCenterRight -> Material
-
m : Material
-
m : Material
-
MAlignBottomRight -> Material
-
m : Material
-
m : Material
-
MAlignBottomCenter -> Material
-
m : Material
-
m : Material
-
MAlignBottomLeft -> Material
-
m : Material
-
m : Material
-
MAlignCenterLeft -> Material
-
m : Material
-
m : Material
-
MBorder4 -> Material
MBorder helpers
MBorder with equal borders on all 4 sides-
border : double
-
m : Material
-
border : double
-
MBorderT -> Material
Dynamic version of MBorder -
MDebugMetrics -> Material
MDebug helpers
MDebug that shows metrics on top of the material-
c : int
-
m : Material
-
c : int
-
MDebugPositionScale -> Material
-
c : int
-
m : Material
-
c : int
-
MDebugConstruct -> Material
-
tag : string
-
m : Material
-
tag : string
-
MDebugRed -> Material
-
m : Material
-
m : Material
-
MDebugGreen -> Material
-
m : Material
-
m : Material
-
MDebugBlue -> Material
-
m : Material
-
m : Material
-
MDebugPurple -> Material
-
m : Material
-
m : Material
-
MDebugMetricsRed -> Material
-
m : Material
-
m : Material
-
MDebugMetricsGreen -> Material
-
m : Material
-
m : Material
-
MDebugMetricsBlue -> Material
-
m : Material
-
m : Material
-
MDebugMetricsPurple -> Material
-
m : Material
-
m : Material
-
MDebugInteractive -> Material
-
m : Material
-
m : Material
-
MGroupWithoutMetrics -> Material
MGroup with zero metrics
Useful inside complicated components with lots of layers, metrics of which aren't used-
g : [ Material ]
-
g : [ Material ]
-
MGroup2WithoutMetrics -> Material
-
MGroupSameMetrics -> Material
-
g : [ Material ]
-
g : [ Material ]
-
MGroup2SameMetrics -> Material
-
MFixed -> Material
-
x : double
-
y : double
-
x : double
-
MFixedX -> Material
-
x : double
-
x : double
-
MFixedY -> Material
-
y : double
-
y : double
-
MFillXY -> Material
-
MFillX -> Material
-
MFillY -> Material
-
MFillXH -> Material
-
h : double
-
h : double
-
MFillWY -> Material
-
w : double
-
w : double
-
MSelect2 -> Material
-
MSelect3 -> Material
-
MSelect4 -> Material
-
MSelect5 -> Material
-
MSelectConstantMetrics -> Material
-
MCopySize -> Material
Copies size of content to copyFn, copyFn result has no effect on overall metrics
If above is true result of copyFn is placed on top of content
Useful when you need to place TInteractive above or below another one -
MCopySize2 -> Material
Similar to MCopySize, only resulting material has metrics of copyFn
copyFn has two parameters: size of the content, and content itself -
MProportionGrid -> Material
-
MProportionLines -> Material
-
MProportionCols -> Material
-
MProportionBaselineCols -> Material
-
MProportionColsA -> Material
-
MSizedWidth -> Material
-
width : Transform<double>
-
height : double
-
width : Transform<double>
-
MSizedHeight -> Material
-
width : double
-
height : Transform<double>
-
width : double
-
MColsXCenter -> Material
Common helpers of centering a number of tropics-
cols : [ Material ]
-
cols : [ Material ]
-
MColsYCenter -> Material
-
cols : [ Material ]
-
cols : [ Material ]
-
MBaselineColsXCenter -> Material
-
cols : [ Material ]
-
cols : [ Material ]
-
MBaselineColsYCenter -> Material
-
cols : [ Material ]
-
cols : [ Material ]
-
MColsYCenterA -> Material
-
cols : [ Material ]
-
cols : [ Material ]
-
MLinesXCenter -> Material
-
lines : [ Material ]
-
lines : [ Material ]
-
MLinesYCenter -> Material
-
lines : [ Material ]
-
lines : [ Material ]
-
MBaselineLinesXCenter -> Material
-
lines : [ Material ]
-
lines : [ Material ]
-
MBaselineLinesYCenter -> Material
-
lines : [ Material ]
-
lines : [ Material ]
-
MColsCenterY -> Material
Deprecated. Use MColsYCenter instead.-
items : [ Material ]
-
items : [ Material ]
-
MColsSameWidth -> Material
-
cols : [ Material ]
-
cols : [ Material ]
-
MColsSameHeight -> Material
-
cols : [ Material ]
-
cols : [ Material ]
-
MLinesSameWidth -> Material
-
lines : [ Material ]
-
lines : [ Material ]
-
MLinesSameHeight -> Material
-
lines : [ Material ]
-
lines : [ Material ]
-
MLines2InvertZorder -> Material
Same as MLines2, only m1 is above m2 in zorder
Useful if you have for example a toolbar with shadow that has to overlap content below -
MZoomToFit -> Material
if the content fits in the box then it returns the content
if the content does not fit then it returns a zoomed out content
the final metrics is a metrics of the final content -
MRotate90 -> Material
Helpers for turning Material-
m : Material
-
m : Material
-
MRotate90Left -> Material
-
m : Material
-
m : Material
-
MCropWidth -> Material
-
MCropHeight -> Material
-
MEvenGrid -> Material
-
content : [[ Material ]]
-
content : [[ Material ]]
-
MFixSizeKeepBaseline -> Material
-
MBaseline -> Material
-
MFrameT -> Material
Dynamic version of MFrame-
margin : Transform<double>
-
radius : Transform<double>
-
style : [ TGraphicsStyle ]
-
box : Material
-
margin : Transform<double>
-
MFrameCustom -> Material
-
l : double
-
tl : double
-
tlRounded : bool
-
t : double
-
tr : double
-
trRounded : bool
-
r : double
-
br : double
-
brRounded : bool
-
b : double
-
bl : double
-
blRounded : bool
-
style : [ TGraphicsStyle ]
-
box : Material
-
l : double
-
MDynamicText -> Material
Helper for dynamic text-
text : Transform<string>
-
style : [ MParagraphStyle ]
-
text : Transform<string>
-
MHTMLText -> Material
Allows to write html-string like "this is italic and bold text".
It works only in JS-
text : string
-
style : [ MTextStyle ]
-
text : string
-
MHTMLDynamicText -> Material
-
text : Transform<string>
-
style : [ MParagraphStyle ]
-
text : Transform<string>
-
MLoading -> Material
Show text and progressbar below-
text : string
-
text : string
-
MTransformTAcc2 -> Material
Simplified version of MTransformTAcc-
fn : ((Material) -> TAcc) -> TAcc
-
fn : ((Material) -> TAcc) -> TAcc
-
MConstructRenderable -> Material
-
constructors : [ () -> () -> void ]
-
m : Material
-
constructors : [ () -> () -> void ]
-
MZoomMax -> Material
Zoom material if its metrics are bigger than maxWH -
MZoomMaxWidth -> Material
Zoom material if its width is bigger than maxWidth -
MZoomMaxHeight -> Material
Zoom material if its height is bigger than maxHeight -
disableMMouseWheelBelow -> Material
Helpers to make Material not transparent for events-
content : Material
-
content : Material
-
disableMInteractivesBelow -> Material
-
content : Material
-
content : Material
-
blockMInteractives -> Material
Helper to create event blocker layer above element-
content : Material
-
content : Material
-
MMouseWheelInteractive -> Material
-
m : Material
-
deltaX : (double) -> bool
-
deltaY : (double) -> bool
-
m : Material
-
M3DStage -> Material
-
scene : F3DObject
-
camera : F3DObject
-
size : Material
-
style : [ F3DStageStyle ]
-
scene : F3DObject
-
MCanvas -> Material
Draws content with 'canvas' renderer
Works only in js with 'html' renderer, for other targets identical to regular clip
WARNING: Doesn't support native widgets making it applicable only to groups of graphical objects-
content : Material
-
content : Material
-
MDecorator -> Material
-
MSafeArea -> Material
Area with borders equal to device notch or other screen inbounds-
m : Material
-
m : Material
-
MSafeAreaLeft -> Material
-
m : Material
-
m : Material
-
MSafeAreaTop -> Material
-
m : Material
-
m : Material
-
MSafeAreaRight -> Material
-
m : Material
-
m : Material
-
MSafeAreaBottom -> Material
-
m : Material
-
m : Material
-
MMoveClip -> Material
-
MIfFits -> Material
Shows fullSizeContent only if available space is greater than minimum size required to show it
Otherwise shows reducedSizeContent -
MIfFitsWidth -> Material
-
MIfFitsHeight -> Material
-
MShowIfFits -> Material
Shows content only if available space is greater than minimum size required to show it-
content : Material
-
content : Material
-
MShowIfFitsWidth -> Material
-
content : Material
-
content : Material
-
MShowIfFitsHeight -> Material
-
content : Material
-
content : Material
-
M3DEditorProperties2MTabs -> Material
-
editor : M3DEditor
-
editor : M3DEditor