Interface KaplayLayoutPlugin

interface KaplayLayoutPlugin {
    flexbox(style?: FlexboxStyle, index?: number): FlexboxComp;
    flexNode(style?: FlexboxStyle, index?: number): FlexNodeComp;
    static(style?: StaticFlexboxStyle, index?: number): StaticComp;
}

Index

Methods

flexbox flexNode static

Methods

flexbox

flexbox(style?: FlexboxStyle, index?: number): FlexboxComp
turns the object into a flexbox. the object size (and position if it is a child to another flexbox) will be automatically changed to match the layout.
Parameters
- Optionalstyle: FlexboxStyle
  CSS properties.
- Optionalindex: number
  index in which to insert the object into. defaults to appending the object.
Returns FlexboxComp
Example
```
const parent = k.add([
  k.pos(0,0),
  k.rect(0,0),
  k.flex({ padding: 10 }),
])
parent.add([
  k.pos(),
  k.rect(10, 10),
  k.static()
])
```
- Defined in src/main.ts:60

flexNode

flexNode(style?: FlexboxStyle, index?: number): FlexNodeComp
turns the object into a flexbox. without binding position and size. useful for implementing custom transition and custom size measuring.
Parameters
- Optionalstyle: FlexboxStyle
  CSS properties.
- Optionalindex: number
  index in which to insert the object into. defaults to appending the object.
Returns FlexNodeComp
Example
```
const object = k.add([
  k.pos(0,0),
  k.rect(0,0),
  k.flexNode(),
])
obj.onLayoutShift(() => {
  const { width, height } = object.getComputedSize()
  k.tween(object.pos, object.getComputedOffset(), 1, a => object.pos = a)
  k.tween(object.width, width, 1, a => object.width = a)
  k.tween(object.height, height, 1, a => object.height = a)
})
```
- Defined in src/main.ts:38

static

static(style?: StaticFlexboxStyle, index?: number): StaticComp
turns the object into a static children. its size is not managed by kaplay-layout so it wont grow or shrink.
Parameters
- Optionalstyle: StaticFlexboxStyle
  CSS properties.
- Optionalindex: number
  index in which to insert the object into. defaults to appending the object.
Returns StaticComp
Example
```
const parent = k.add([
  k.pos(0,0),
  k.rect(0,0),
  k.flex({ padding: 10 }),
])
parent.add([
  k.pos(),
  k.rect(10, 10),
  k.static()
])
```
- Defined in src/main.ts:81