Layout Engine
How Takumi implements layout.
Takumi uses Taffy, a Rust implementation of the CSS Flexbox and CSS Grid specifications.
Box Model
Every node in Takumi follows the standard CSS box model. The total size of an element is calculated based on its content, padding, border, and margin.
Auto Sizing
The width and height parameters are optional, which means Takumi can calculate the size based on the content.
import { } from "@takumi-rs/image-response";
export function () {
return new (< />, {
: 1200
});
}
function () {
const = .({ : .(.() * 10) + 1 }, (, ) => );
return (
< ={{ : "100%", : "100%" }}>
{.(() => (
< ={}>Item {}.</>
))}
</>
);
}Intrinsic Size for Images
By default, the image would be measured based on its intrinsic size, you can override it by setting width and height properties.
import { } from "@takumi-rs/image-response";
export function () {
return new (
< ="https://via.placeholder.com/1200x600" ={1200} ={600} />
);
}Edit on GitHub
Last updated on