https://github.com/pixijs/layout

Library for arranging/resizing pixiJS rendered elements basing on css like configs
https://github.com/pixijs/layout

layout pixijs ui

Last synced: 2 days ago
JSON representation

Library for arranging/resizing pixiJS rendered elements basing on css like configs

• Host: GitHub
• URL: https://github.com/pixijs/layout
• Owner: pixijs
• License: mit
• Created: 2022-12-16T12:59:37.000Z (almost 2 years ago)
• Default Branch: main
• Last Pushed: 2024-07-31T14:27:18.000Z (3 months ago)
• Last Synced: 2024-10-29T21:06:13.264Z (14 days ago)
• Topics: layout, pixijs, ui
• Language: TypeScript
• Homepage: https://pixijs.io/layout/
• Size: 16.1 MB
• Stars: 74
• Watchers: 1
• Forks: 5
• Open Issues: 12
• Metadata Files:
  • Readme: README.md
  • Contributing: .github/CONTRIBUTING.md
  • Funding: .github/FUNDING.yml
  • License: LICENSE
  • Codeowners: .github/CODEOWNERS

Awesome Lists containing this project

README

        


    






    
It is a library for arranging/resizing pixi rendered elements basing on css like configs. It is made for simple and fast implementation of the responsive user interfaces in your games.



**We are now a part of the [Open Collective](https://opencollective.com/pixijs) and with your support you can help us make PixiJS even better. To make a donation, simply click the button below and we'll love you forever!**

Here are some useful resources:

-   [Full docs](https://pixijs.io/layout/)

-   [Github Repo](https://github.com/pixijs/layout)

-   [Sandbox](https://pixijs.io/layout/storybook)

## Compatibility

Depending on your version of PixiJS, you'll need to figure out which major version of PixiLayout to use.

| PixiJS      | PixiLayout     |

|-------------|----------------|

| v7.x        | v1.x           |

| v8.x        | v2.x           |

## Install

```sh

npm i @pixi/layout

```

## Usage

```js

import { Layout } from "@pixi/layout";

new Layout({

    content: {

        content: Sprite.from("bunny.png"),

        styles: {

            position: "center",

            maxWidth: "100%",

            minHeight: "100%",

        },

    },

    styles: {

        background: "red",

        position: "center",

        width: `100%`,

        height: `100%`,

    },

});

```

### Contribute

Want to be part of the PixiUI project? Great! All are welcome! We will get there quicker

together :) Whether you find a bug, have a great feature request, or you fancy owning a task

from the road map above, feel free to get in touch.

Make sure to read the [Contributing Guide](.github/CONTRIBUTING.md)

before submitting changes.

Also you can check the [Controllers influence schemas](.github/SCHEMAS.md)

### License

This content is released under the (http://opensource.org/licenses/MIT) MIT License.