tawasuyu

tawasuyu/taffy

A high performance rust-powered UI layout library

HTML 231Rust 9TOML 3CSS 1345 Definitions

⎇ e5b721cd225a306635ec3133ef154ea60ac37a39 README.md Markdown · 73 lines · 3.2 KB History raw

Update usage example (#242) e5b721cd2 · Nico Burns · 

1# taffy
2
3[![GitHub CI](https://github.com/DioxusLabs/taffy/actions/workflows/ci.yml/badge.svg)](https://github.com/DioxusLabs/taffy/actions/workflows/ci.yml)
4[![crates.io](https://img.shields.io/crates/v/taffy.svg)](https://crates.io/crates/taffy)
5[![docs.rs](https://img.shields.io/docsrs/taffy)](https://docs.rs/taffy)
6
7`taffy` is a flexible, high-performance, cross-platform UI layout library written in [Rust](https://www.rust-lang.org).
8
9Currently, we only support a [flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) layout algorithm, but support for other paradigms [is planned](https://github.com/DioxusLabs/taffy/issues/28).
10
11This crate is a collaborative, cross-team project, and is designed to be used as a dependency for other UI and GUI libraries.
12Right now, it powers:
13
14- [Dioxus](https://dioxuslabs.com/): a React-like library for building fast, portable, and beautiful user interfaces with Rust
15- [Bevy](https://bevyengine.org/): an ergonomic, ECS-first Rust game engine
16
17## Usage
18
19```rust
20use taffy::prelude::*;
21
22// First create an instance of Taffy
23let mut taffy = Taffy::new();
24
25// Create a tree of nodes using `taffy.new_leaf` and `taffy.new_with_children`.
26// These functions both return a node id which can be used to refer to that node
27// The FlexboxLayout struct is used to specify styling information
28let header_node = taffy
29    .new_leaf(
30        FlexboxLayout {
31            size: Size { width: Dimension::Points(800.0), height: Dimension::Points(100.0) },
32            ..Default::default()
33        },
34    ).unwrap();
35
36let body_node = taffy
37    .new_leaf(
38        FlexboxLayout {
39            size: Size { width: Dimension::Points(800.0), height: Dimension::Undefined },
40            flex_grow: 1.0,
41            ..Default::default()
42        },
43    ).unwrap();
44
45let root_node = taffy
46    .new_with_children(
47        FlexboxLayout {
48            flex_direction: FlexDirection::Column,
49            size: Size { width: Dimension::Points(800.0), height: Dimension::Points(600.0) },
50            ..Default::default()
51        },
52        &[header_node, body_node],
53    )
54    .unwrap();
55
56// Call compute_layout on the root of your tree to run the layout algorithm
57taffy.compute_layout(root_node, Size::NONE).unwrap();
58
59// Inspect the computed layout using taffy.layout
60assert_eq!(taffy.layout(root_node).unwrap().size.width, 800.0);
61assert_eq!(taffy.layout(root_node).unwrap().size.height, 600.0);
62assert_eq!(taffy.layout(header_node).unwrap().size.width, 800.0);
63assert_eq!(taffy.layout(header_node).unwrap().size.height, 100.0);
64assert_eq!(taffy.layout(body_node).unwrap().size.width, 800.0);
65assert_eq!(taffy.layout(body_node).unwrap().size.height, 500.0); // This value was not set explicitly, but was computed by Taffy
66
67```
68
69## Contributions
70
71[Contributions welcome](https://github.com/DioxusLabs/taffy/blob/main/CONTRIBUTING.md):
72if you'd like to use, improve or build `taffy`, feel free to join the conversation, open an [issue](https://github.com/DioxusLabs/taffy/issues) or submit a [PR](https://github.com/DioxusLabs/taffy/pulls).
73If you have questions about how to use `taffy`, open a [discussion](https://github.com/DioxusLabs/taffy/discussions) so we can answer your questions in a way that others can find.

README.md

taffy

GitHub CI crates.io docs.rs

taffy is a flexible, high-performance, cross-platform UI layout library written in Rust.

Currently, we only support a flexbox layout algorithm, but support for other paradigms is planned.

This crate is a collaborative, cross-team project, and is designed to be used as a dependency for other UI and GUI libraries. Right now, it powers:

Usage

use taffy::prelude::*;

// First create an instance of Taffy
let mut taffy = Taffy::new();

// Create a tree of nodes using `taffy.new_leaf` and `taffy.new_with_children`.
// These functions both return a node id which can be used to refer to that node
// The FlexboxLayout struct is used to specify styling information
let header_node = taffy
    .new_leaf(
        FlexboxLayout {
            size: Size { width: Dimension::Points(800.0), height: Dimension::Points(100.0) },
            ..Default::default()
        },
    ).unwrap();

let body_node = taffy
    .new_leaf(
        FlexboxLayout {
            size: Size { width: Dimension::Points(800.0), height: Dimension::Undefined },
            flex_grow: 1.0,
            ..Default::default()
        },
    ).unwrap();

let root_node = taffy
    .new_with_children(
        FlexboxLayout {
            flex_direction: FlexDirection::Column,
            size: Size { width: Dimension::Points(800.0), height: Dimension::Points(600.0) },
            ..Default::default()
        },
        &[header_node, body_node],
    )
    .unwrap();

// Call compute_layout on the root of your tree to run the layout algorithm
taffy.compute_layout(root_node, Size::NONE).unwrap();

// Inspect the computed layout using taffy.layout
assert_eq!(taffy.layout(root_node).unwrap().size.width, 800.0);
assert_eq!(taffy.layout(root_node).unwrap().size.height, 600.0);
assert_eq!(taffy.layout(header_node).unwrap().size.width, 800.0);
assert_eq!(taffy.layout(header_node).unwrap().size.height, 100.0);
assert_eq!(taffy.layout(body_node).unwrap().size.width, 800.0);
assert_eq!(taffy.layout(body_node).unwrap().size.height, 500.0); // This value was not set explicitly, but was computed by Taffy

Contributions

Contributions welcome: if you'd like to use, improve or build taffy, feel free to join the conversation, open an issue or submit a PR. If you have questions about how to use taffy, open a discussion so we can answer your questions in a way that others can find.