Module views

Expand description

§Floem built-in Views

This module contains the basic built-in Views of Floem.

§Composing Views

The views in this module are the main building blocks for composing UIs in Floem. There is a collection of different stacks and lists that can be used to build collections of views. There are also basic widgets such as text inputs, labels, images, and svgs.

§Example: Counter

use floem::{reactive::*, views::*};

let mut counter = RwSignal::new(0);

v_stack((
    label(move || format!("Value: {counter}")),
    h_stack((
        button("Increment").action(move || counter += 1),
        button("Decrement").action(move || counter -= 1),
    )),
));

Views in Floem can also be easily refactored.

§Example: Refactored Counter

use floem::prelude::*;

let mut counter = RwSignal::new(0);

let counter_label = label(move || format!("Value: {counter}"));

let increment_button = button("Increment").action(move || counter += 1);
let decrement_button = button("Decrement").action(move || counter -= 1);

let button_stack = (increment_button, decrement_button).h_stack();

(counter_label, button_stack).v_stack();

§Stacks and Lists

There are a few different stacks and lists that you can use to group your views and each is discussed here.

They are:

basic stack
- static and always contains the same elements in the same order
dynamic stack
- can dynamically change the elements in the stack by reactively updating the list of items provided
virtual stack
- can dynamically change the elements in the stack
- can lazily load the items as they appear in a scroll view

There is also a basic list and a virtual list. Lists are like their stack counterparts but they also have built-in support for the selection of items: up and down using arrow keys, top and bottom control using the home and end keys, and for the “acceptance” of an item using the Enter key. You could build this manually yourself using stacks but it is common enough that it is built-in as a list.

§View Trait

The View trait is the trait that Floem uses to build and display elements. The trait contains the methods for implementing updates, styling, layout, events, and painting.

Views are types that implement View. Many of these types will also be built with a child that also implements View. In this way, views can be composed together easily to create complex UIs. This composition is the most common way to build UIs in Floem.

Creating a type and manually implementing the View trait is typically only needed for building new widgets and for special cases.

Re-exports§

pub use scroll::scroll;
pub use scroll::Scroll;
pub use scroll::ScrollExt;
pub use text_editor::*;

Modules§

dropdown: A view that allows the user to select an item from a list of items.
editor
resizable
scroll: Scroll View
slider: A toggle button widget. An example can be found in widget-gallery/button in the floem examples.
text_editor

Macros§

dyn_view

Structs§

Button
ButtonClass
Canvas: A canvas view
Checkbox: A customizable checkbox view for boolean selection.
CheckboxClass: The style class that is applied to the checkbox.
Clip: A wrapper around a child View to clip painting. See clip.
Container: A simple wrapper around another View. See container.
Delay
Diff
DragResizeWindowArea: A view that will resize the window when the mouse is dragged. See drag_resize_window_area.
DragWindowArea: A view that will move the window when the mouse is dragged. See drag_window_area.
DynStack
DynamicContainer: A container for a dynamically updating View. See dyn_container
DynamicView: A container for a dynamically updating View. See dyn_view
Empty: An empty View. See empty.
Enumerate
ImageStyle: Holds information about image position and size inside container.
Img: Holds the data needed for img view fn to display images.
Label: A View that can display text from a String. See label, text, and static_label.
LabelClass
LabelCustomStyle: Represents a custom style for a Label.
LabeledCheckboxClass: The style class that is applied to the labeled checkbox stack.
LabeledRadioButtonClass
List: A list of views that support the selection of items. See list.
ListClass
ListItemClass
ObjectPosition: Specifies the alignment of the element’s contents within the element’s box.
PlaceholderTextClass
RadioButton: The RadioButton struct provides various methods to create and manage radio buttons.
RadioButtonClass
RadioButtonDotClass
RadioButtonDotSelectedClass
RichSpan
RichSpanOwned
RichText
Stack: A collection of static views. See stack and stack_from_iter.
Svg
SvgClass
SvgColor
SvgStrFn
Tab
TextInput: Text Input View
TextInputClass
ToggleButton: A toggle button
ToggleButtonBehavior
ToggleButtonCircleRad
ToggleButtonClass
ToggleButtonCustomStyle: Represents a custom style for a ToggleButton.
ToggleButtonInset
Tooltip: A view that displays a tooltip for its child.
TooltipClass
TooltipContainerClass
ValueContainer: A wrapper around another View that has value updates. See value_container
VirtualExtractor
VirtualStack: A virtual stack that is like a dyn_stack but also lazily loads items for performance. See virtual_stack.

Enums§

HorizPosition: Specifies object position on horizontal axis inside the element’s box.
Movement
ObjectFit: How the content of a replaced element, such as an img or video, should be resized to fit its container. See https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit.
SvgOrStyle
TextDirection
ToggleHandleBehavior: Controls the switching behavior of the switch. The corresponding style prop is ToggleButtonBehavior
VertPosition: Specifies object position on vertical axis inside the element’s box.

Constants§

DEFAULT_CHECKBOX_SVG: The default checkbox SVG

Traits§

ButtonExt
ClipExt: A trait that adds a clip method to any type that implements IntoView.
ContainerExt: A trait that adds a container method to any type that implements IntoView.
Decorators: A trait that extends the appearance and functionality of Views through styling and event handling.
ListExt
RichTextExt
StackExt
SvgCssPropExtractor
TooltipExt
VirtualVector: A trait that can be implemented on a type so that the type can be used in a virtual_stack or virtual_list.

Functions§

brush_to_css_string
button
canvas: Creates a new Canvas view that can be used for custom painting
checkbox: Renders a checkbox the provided checked signal. See also Checkbox::new and Checkbox::new_rw.
clip: A clip is a wrapper around a child View that will clip the painting of the child so that it does not show outside of the viewport of the Clip.
container: A simple wrapper around another View
create_value_container_signals: A convenience function that creates two signals for use in a value_container
custom_checkbox: Renders a checkbox using a checked signal and custom SVG. See also Checkbox::new_rw and
custom_labeled_checkbox: Renders a checkbox using the a checked signal and a custom SVG. See also Checkbox::custom_labeled_rw
drag_resize_window_area: A view that will resize the window when the mouse is dragged.
drag_window_area: A view that will move the window when the mouse is dragged.
dyn_container: A container for a dynamically updating View
dyn_stack: A stack whose items can be reactively updated.
dyn_view: A container for a dynamically updating View
empty: An empty View. This view can still have a size, background, border radius, and outline.
h_stack: A stack which defaults to FlexDirection::Row. See also v_stack.
h_stack_from_iter: Creates a stack from an iterator of views. It defaults to FlexDirection::Row. See also v_stack_from_iter.
img: A view that can display an image and controls its position.
img_from_path: A view that can display an image and controls its position.
label: A view that can reactively display text from an item that implements Display. See also text for a non-reactive label.
labeled_checkbox: Renders a checkbox using the provided checked signal. See also Checkbox::labeled and Checkbox::labeled_rw.
labeled_radio_button: Renders a radio button that appears as selected if the signal equals the given enum value.
list: A list of views built from an iterator which remains static and always contains the same elements in the same order.
radio_button: Renders a radio button that appears as selected if the signal equals the given enum value. Can be combined with a label and a stack with a click event (as in examples/widget-gallery).
rich_text
stack: A basic stack that is built from a tuple of views which remains static and always contains the same elements in the same order.
stack_from_iter: Creates a stack from an iterator of views. See also v_stack_from_iter and h_stack_from_iter.
static_label: A non-reactive view that can display text from an item that can be turned into a String. See also label.
svg
tab
text: A non-reactive view that can display text from an item that implements Display. See also label.
text_input: Text Input View
toggle_button: A reactive toggle button
tooltip: A view that displays a tooltip for its child.
v_stack: A stack which defaults to FlexDirection::Column. See also h_stack.
v_stack_from_iter: Creates a stack from an iterator of views. It defaults to FlexDirection::Column.See also h_stack_from_iter.
value_container: A wrapper around another View that has value updates.
virtual_list: A view that supports virtual scrolling with item selection. Selection is done using arrow keys, home/end for top/bottom.
virtual_stack: A View that is like a dyn_stack but also lazily loads the items as they appear in a scroll view

Type Aliases§

VirtViewFn

Module viewsCopy item path