Struct Col 

pub struct Col {
    pub gap: f32,
    pub children: Vec<UiRef>,
}

Fields

gap: f32

children: Vec<UiRef>

Implementations

impl Col

pub fn new(children: impl Into<Vec<UiRef>>) -> UiRef

Examples found in repository

examples/ui.rs (lines 140-166)

    fn text_section(&self) -> UiRef {
        BoxFill::new(
            Color::NEUTRAL_950,
            Padding::all(
                20.0,
                Scroll::new(
                    id!(),
                    Col::new([
                        Text::title("Title"),
                        Text::body(
                            "Lorem ipsum dolor sit amet, consectetur\n\n adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                        ),
                        Text::h1("Heading 1"),
                        Text::body("Lorem ipsum dolor sit amet."),
                        Text::h2("Heading 1"),
                        Text::body("Lorem ipsum dolor sit amet."),
                        Text::mono_sized(
                            format!(
                                "{} {} {} {}",
                                ICON_PLUS_CIRCLE, ICON_BOMB, ICON_CARET_DOWN, ICON_CIRCLE_NOTCH
                            ),
                            40,
                        ),
                        Text::h3("Heading 1"),
                        Text::body("Lorem ipsum dolor sit amet."),
                        Text::italic("Lorem ipsum dolor sit amet."),
                        Text::bold("Lorem ipsum dolor sit amet."),
                        Text::bold_italic("Lorem ipsum dolor sit amet."),
                        Col::new(
                            Palette::NEUTRAL
                                .shades()
                                .map(|c| bold_italic_colored("Lorem ipsum dolor sit amet.", c)),
                        ),
                    ]),
                ),
            ),
        )
    }

examples/multiplayer.rs (lines 102-126)

fn chat(state: &mut MultiplayerState<State>) {
    if !storage_exists::<ChatState>() {
        storage_store_state(ChatState { messages: vec![] });
    }

    let messages = &mut storage_get_state_mut::<ChatState>().messages;

    let other_state = unsafe { &*{ state as *const MultiplayerState<State> } };
    for notification in state.drain_notifications() {
        let Some(user) = other_state.get_user(notification.user_id) else {
            break;
        };
        let username = &user.username;
        let text = String::from_utf8(notification.data).unwrap();

        messages.push(rich_text(format!("<b>{username}</b>: {text}")).unwrap());
    }

    let input_id = id!();
    let button_id = id!();

    if button_clicked_last_frame(button_id) {
        let input_state = text_input_state(input_id);
        messages.push(rich_text(format!("<b>You</b>: {}", input_state.value)).unwrap());
        state.send_notification(input_state.value.as_bytes().to_vec());
        input_state.value = "".to_string();
    }

    let ui = Align::bottom_left(
        BoxFill::new(
            flat::BG0,
            Padding::all(
                20.0,
                Col::new([
                    FlexRow::with_gap(
                        10.0,
                        [
                            FlexBox::Flex(flat::TextInput::new(flat::BG1, input_id)),
                            FlexBox::Fixed(flat::Button::text(
                                flat::BG1,
                                flat::BG2,
                                button_id,
                                "Send",
                            )),
                        ],
                    ),
                    Scroll::new(
                        id!(),
                        Col::with_gap(
                            10.0,
                            messages
                                .iter()
                                .map(|r| RichTextNode::new(r.clone()))
                                .collect::<Vec<_>>(),
                        ),
                    )
                    .padding_vertical(20.0),
                ]),
            ),
        )
        .sized_wh(600.0, 400.0),
    )
    .sized(window_size());

    draw_ui(ui, Vec2::ZERO);
}

pub fn with_gap(gap: f32, children: impl Into<Vec<UiRef>>) -> UiRef

Examples found in repository

examples/gamepad.rs (lines 33-40)

fn choose_gamepad() -> Option<GamepadId> {
    let input = gamepad::input();
    let gamepads: Vec<_> = input.gamepads().collect();

    use ui::prelude::*;
    let ui = Col::with_gap(
        10.0,
        gamepads
            .iter()
            .enumerate()
            .map(|(i, (_, pad))| flat::Button::primary_text(i, pad.name()))
            .collect::<Vec<_>>(),
    );

    draw_ui(ui, Vec2::splat(10.0));

    Some(
        gamepads
            .get(*all_elements_interacted_this_frame().first()?)?
            .0,
    )
}

examples/ui.rs (lines 60-75)

    fn scroll_section(&self) -> UiRef {
        BoxFill::new(
            Color::GRAY_900,
            Scroll::new(
                id!(),
                Padding::all(
                    10.0,
                    Col::with_gap(
                        10.0,
                        (0..100)
                            .map(|n| {
                                SizedBox::height(
                                    40.0,
                                    Fill::rounded_hover(
                                        Color::GRAY_800,
                                        Color::GRAY_700,
                                        7.0,
                                        Center::new(Text::new(n)),
                                    ),
                                )
                            })
                            .collect::<Vec<_>>(),
                    ),
                ),
            ),
        )
    }

    fn w95_section(&mut self) -> UiRef {
        let color_button = id!();
        let wait_button = id!();

        if button_clicked_last_frame(color_button) {
            self.clear_color = rand_color();
        }

        if button_clicked_last_frame(wait_button) {
            toggle_wait_for_events();
        }

        w95::Card::thick(
            20.0,
            Scroll::new(
                id!(),
                Col::with_gap(
                    10.0,
                    [
                        black_text(format!("{:.0}", avg_fps())),
                        black_text("Hello world!"),
                        black_text("This is UI."),
                        w95::Button::text(color_button, "Background"),
                        w95::Button::text(
                            wait_button,
                            format!("Toggle wait for events: {}", get_wait_for_events()),
                        ),
                        Text::new_with_size_color("Styled text", 30, Color::RED_600),
                        ConstrainedBox::max_size(
                            vec2(300.0, 200.0),
                            w95::Card::new(0.0, ImageNode::from_texture(self.guy)),
                        ),
                        w95::ProgressBar::new(vec2(200.0, 20.0), self.progress, 1.0, id!()),
                        Fill::gradient(
                            Color::NEUTRAL_100,
                            w95::PRIMARY,
                            FRAC_PI_2,
                            Center::new(AspectRatio::new(
                                4.0,
                                BoxFill::new(
                                    Color::NEUTRAL_200,
                                    CircleFill::new(Color::NEUTRAL_300).sized_wh(150.0, 150.0),
                                ),
                            )),
                        )
                        .sized_wh(200.0, 200.0),
                    ],
                ),
            ),
        )
    }

    fn text_section(&self) -> UiRef {
        BoxFill::new(
            Color::NEUTRAL_950,
            Padding::all(
                20.0,
                Scroll::new(
                    id!(),
                    Col::new([
                        Text::title("Title"),
                        Text::body(
                            "Lorem ipsum dolor sit amet, consectetur\n\n adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.",
                        ),
                        Text::h1("Heading 1"),
                        Text::body("Lorem ipsum dolor sit amet."),
                        Text::h2("Heading 1"),
                        Text::body("Lorem ipsum dolor sit amet."),
                        Text::mono_sized(
                            format!(
                                "{} {} {} {}",
                                ICON_PLUS_CIRCLE, ICON_BOMB, ICON_CARET_DOWN, ICON_CIRCLE_NOTCH
                            ),
                            40,
                        ),
                        Text::h3("Heading 1"),
                        Text::body("Lorem ipsum dolor sit amet."),
                        Text::italic("Lorem ipsum dolor sit amet."),
                        Text::bold("Lorem ipsum dolor sit amet."),
                        Text::bold_italic("Lorem ipsum dolor sit amet."),
                        Col::new(
                            Palette::NEUTRAL
                                .shades()
                                .map(|c| bold_italic_colored("Lorem ipsum dolor sit amet.", c)),
                        ),
                    ]),
                ),
            ),
        )
    }

    fn button_section(&mut self) -> UiRef {
        let button = id!();

        if button_clicked_last_frame(button) {
            self.show_message = !self.show_message;
        }

        library::flat::Card::bg0_expand(Col::with_gap(
            30.0,
            [
                Center::new(flat::Button::primary_text(button, "Click me!")),
                if self.show_message {
                    Center::new(Text::body("Thanks for clicking."))
                } else {
                    EMPTY
                },
            ],
        ))
        .scissored()
    }

    fn align_section(&self) -> UiRef {
        BoxFill::new(
            Color::BLACK,
            Stack::new([
                Align::top_left(square(Color::RED_500)),
                Align::top_center(square(Color::ORANGE_500)),
                Align::top_right(square(Color::YELLOW_500)),
                Align::center_right(square(Color::GREEN_500)),
                Align::bottom_right(square(Color::SKY_500)),
                Align::bottom_center(square(Color::BLUE_500)),
                Align::bottom_left(square(Color::PURPLE_500)),
                Align::center_left(square(Color::PINK_500)),
                Align::center(square(Color::WHITE)),
            ]),
        )
        .scissored()
    }

    fn flat_section(&mut self) -> UiRef {
        use flat::*;

        let bars: Vec<_> = Palette::PALETTES
            .iter()
            .enumerate()
            .skip(5)
            .map(|(i, p)| {
                flat::LoadingBar::new_with_speed(p.v400, i as f32 * 10.0 + 10.0)
                    .height_infinite_width(30.0)
            })
            .collect();

        let input_id = id!();

        if text_input_changed(input_id) {
            println!("{}", text_input_value(input_id));
        }

        Card::bg0_expand(FlexCol::with_gap(
            10.0,
            [
                FlexBox::Flex(Col::with_gap(
                    20.0,
                    [
                        Drawer::new(
                            "Click me!",
                            BG1,
                            id!(),
                            Col::with_gap(10.0, bars).scroll(id!()),
                        )
                        .max_height(400.0),
                        Text::new(self.slider_a_value),
                        Slider::new(&mut self.slider_a_value, 0, 30, id!()),
                        Slider::alternate(&mut self.slider_b_value, 0.0, 30.0, id!()),
                        Slider::rounded(&mut self.slider_c_value, 0.0, 30.0, id!()),
                        self.window_button(),
                    ],
                )),
                FlexBox::Fixed(TextInput::with_prompt(BG2, "Start typing...", input_id)),
                // FlexBox::Fixed(Text::new("Hello world.")),
            ],
        ))
    }

    fn window_button(&self) -> UiRef {
        let window_id = id!();
        let window_button_id = id!();

        let window = flat::FloatingWindow::new(
            "Hello world",
            window_id,
            Col::with_gap(
                10.0,
                [
                    Text::body("This is a window"),
                    ImageNode::from_texture_with_scale(self.guy, 300.0),
                    Grid::with_gap(
                        4,
                        4,
                        5.0,
                        (0..16)
                            .map(|_| {
                                Border::all(
                                    5.0,
                                    Color::WHITE,
                                    Fill::hover(Color::BLACK, Color::WHITE, EMPTY),
                                )
                            })
                            .collect::<Vec<_>>(),
                    )
                    .sized_wh(200., 200.),
                ],
            ),
        );

        if button_clicked_last_frame(window_button_id)
            && let Some(state) = floating_window_state(window_id)
        {
            state.open = !state.open;
        }

        Stack::new([
            flat::Button::text(flat::BG1, flat::BG2, window_button_id, "Toggle window"),
            window,
        ])
    }

examples/multiplayer.rs (lines 117-123)

fn chat(state: &mut MultiplayerState<State>) {
    if !storage_exists::<ChatState>() {
        storage_store_state(ChatState { messages: vec![] });
    }

    let messages = &mut storage_get_state_mut::<ChatState>().messages;

    let other_state = unsafe { &*{ state as *const MultiplayerState<State> } };
    for notification in state.drain_notifications() {
        let Some(user) = other_state.get_user(notification.user_id) else {
            break;
        };
        let username = &user.username;
        let text = String::from_utf8(notification.data).unwrap();

        messages.push(rich_text(format!("<b>{username}</b>: {text}")).unwrap());
    }

    let input_id = id!();
    let button_id = id!();

    if button_clicked_last_frame(button_id) {
        let input_state = text_input_state(input_id);
        messages.push(rich_text(format!("<b>You</b>: {}", input_state.value)).unwrap());
        state.send_notification(input_state.value.as_bytes().to_vec());
        input_state.value = "".to_string();
    }

    let ui = Align::bottom_left(
        BoxFill::new(
            flat::BG0,
            Padding::all(
                20.0,
                Col::new([
                    FlexRow::with_gap(
                        10.0,
                        [
                            FlexBox::Flex(flat::TextInput::new(flat::BG1, input_id)),
                            FlexBox::Fixed(flat::Button::text(
                                flat::BG1,
                                flat::BG2,
                                button_id,
                                "Send",
                            )),
                        ],
                    ),
                    Scroll::new(
                        id!(),
                        Col::with_gap(
                            10.0,
                            messages
                                .iter()
                                .map(|r| RichTextNode::new(r.clone()))
                                .collect::<Vec<_>>(),
                        ),
                    )
                    .padding_vertical(20.0),
                ]),
            ),
        )
        .sized_wh(600.0, 400.0),
    )
    .sized(window_size());

    draw_ui(ui, Vec2::ZERO);
}

Trait Implementations

impl Debug for Col

fn fmt(&self, f: &mut Formatter<'_>) -> Result<(), Error>

Formats the value using the given formatter.

impl Default for Col

fn default() -> Col

Returns the “default value” for a type.

impl UiNode for Col

fn preferred_dimensions(&self) -> Vec2

fn size(&self, area: Area) -> Vec2

fn draw(&self, area: Area, state: &UiState) -> Vec2