Taffy is a flexible, high-performance, cross-platform UI layout library written in Rust.
It currently implements the CSS Block, Flexbox and CSS Grid layout algorithms. Support for other paradigms is planned. For more information on this and other future development plans see the roadmap issue.
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:
use taffy::prelude::*;
// First create an instance of TaffyTree
let mut tree : TaffyTree<()> = TaffyTree::new();
// Create a tree of nodes using `TaffyTree.new_leaf` and `TaffyTree.new_with_children`.
// These functions both return a node id which can be used to refer to that node
// The Style struct is used to specify styling information
let header_node = tree
.new_leaf(
Style {
size: Size { width: length(800.0), height: length(100.0) },
..Default::default()
},
).unwrap();
let body_node = tree
.new_leaf(
Style {
size: Size { width: length(800.0), height: auto() },
flex_grow: 1.0,
..Default::default()
},
).unwrap();
let root_node = tree
.new_with_children(
Style {
flex_direction: FlexDirection::Column,
size: Size { width: length(800.0), height: length(600.0) },
..Default::default()
},
&[header_node, body_node],
)
.unwrap();
// Call compute_layout on the root of your tree to run the layout algorithm
tree.compute_layout(root_node, Size::MAX_CONTENT).unwrap();
// Inspect the computed layout using `TaffyTree.layout`
assert_eq!(tree.layout(root_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(root_node).unwrap().size.height, 600.0);
assert_eq!(tree.layout(header_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(header_node).unwrap().size.height, 100.0);
assert_eq!(tree.layout(body_node).unwrap().size.width, 800.0);
assert_eq!(tree.layout(body_node).unwrap().size.height, 500.0); // This value was not set explicitly, but was computed by Taffy Bindings to other languages
Taffy implements the Flexbox and CSS Grid specifications faithfully, so documentation designed for the web should translate cleanly to Taffy's implementation. For reference documentation on individual style properties we recommend the MDN documentation (for example this page on the width property). Such pages can usually be found by searching for "MDN property-name" using a search engine.
If you are interested in guide-level documentation on CSS layout, then we recommend the following resources:
Note that the table below contains multiple different units (milliseconds vs. microseconds)
Benchmark Node Count Depth Yoga (ba27f9d) Taffy (71027a8) yoga 'huge nested' 1,000 3 364.60 µs 329.04 µs yoga 'huge nested' 10,000 4 4.1988 ms 4.3486 ms yoga 'huge nested' 100,000 5 45.804 ms 38.559 ms big trees (wide) 1,000 1 737.77 µs 505.99 µs big trees (wide) 10,000 1 7.1007 ms 8.3395 ms big trees (wide) 100,000 1 135.78 ms 247.42 ms big trees (deep) 4,000 12 2.2333 ms 1.7400 ms big trees (deep) 10,000 14 5.9477 ms 4.4445 ms big trees (deep) 100,000 17 76.755 ms 63.778 ms super deep 1,000 1,000 555.32 µs 472.85 µsContributions 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.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4