search
/
·
Intro
expand_more
Guides
·
Getting started
·
WebGPU canvas
·
Drawing and animation
·
Scene geometry
·
2D and 3D plot
·
Data-driven geometry
·
Live vs React
·
Memoization
·
WGSL Shaders
·
Renderers and Passes
·
Layout and UI
·
Background
·
Roadmap
·
Contributing
Reference
expand_more
Components
chevron_right
@use-gpu/gltf
chevron_right
@use-gpu/inspect
chevron_right
@use-gpu/inspect-gpu
expand_more
@use-gpu/layout
widgets
Absolute
widgets
Block
widgets
Element
widgets
Embed
widgets
Flex
widgets
Glyphs
widgets
Inline
widgets
Layout
widgets
Overflow
widgets
SDFRectangle
widgets
Text
widgets
Transform
widgets
UI
widgets
UILayers
phishing
useBoxTrait
phishing
useElementTrait
phishing
useImageTrait
phishing
useImplicitElement
east
BoxTrait
east
ElementTrait
east
ImageTrait
east
Inspect
east
Scroller
title
Alignment
title
AlignmentLike
title
Anchor
title
AnchorLike
title
AutoRectangle
title
AutoXY
title
Baseline
title
Dimension
title
Direction
title
Fit
title
FitInto
title
Gap
title
GapLike
title
InlineElement
title
InlineLine
title
InlineRenderer
title
LayoutElement
title
LayoutFit
title
LayoutPicker
title
LayoutRenderer
title
LayoutScroller
title
LayoutShaders
title
Margin
title
MarginLike
title
OverflowMode
title
RenderInline
title
RenderInside
title
RenderOutside
title
Repeat
title
Sizing
title
UIAggregate
chevron_right
@use-gpu/map
chevron_right
@use-gpu/plot
chevron_right
@use-gpu/present
chevron_right
@use-gpu/react
chevron_right
@use-gpu/scene
chevron_right
@use-gpu/voxel
chevron_right
@use-gpu/webgpu
chevron_right
@use-gpu/workbench
chevron_right
Libraries
chevron_right
Live/React
chevron_right
Loaders
chevron_right
Development

inventory_2 @use-gpu/layout

npm install --save @use-gpu/layout
yarn add @use-gpu/layout

Docs: https://usegpu.live/docs/reference-components-@use-gpu-layout

Use.GPU - 2D Layout

Absolute, Block, Flex, Inline, Overflow.

Example

How to center text inside a centered box. Yes, horizontally and vertically. Wow.

return (
  <FlatCamera>

    <Pass>
      <UI>

        <Flex width="100%" height="100%" align="center">
          <Flex width={500} height={150} fill="#3090ff" align="center">

            <Inline>
              <Text weight="black" size={48} color={[1, 1, 1, 1]}>-~ Use.GPU ~-</Text>
            </Inline>

          </Flex>
        </Flex>

      </UI>
    </Pass>

  </FlatCamera>
);

Colofon

Made by Steven Wittens. Part of @use-gpu.

menu
format_list_numbered