Effects

Opacity

A widget that makes its child partially transparent.

1.0

0.5

0.1

vue

<template>
  <Row :gap="20">
    <Opacity :opacity="1.0">
      <Container :width="60" :height="60" color="blue" alignment="center">
        <Text data="1.0" :style="TextStyle({ color: 'white' })" />
      </Container>
    </Opacity>
    <Opacity :opacity="0.5">
      <Container :width="60" :height="60" color="blue" alignment="center">
        <Text data="0.5" :style="TextStyle({ color: 'white' })" />
      </Container>
    </Opacity>
    <Opacity :opacity="0.1">
      <Container :width="60" :height="60" color="blue" alignment="center">
        <Text data="0.1" :style="TextStyle({ color: 'white' })" />
      </Container>
    </Opacity>
  </Row>
</template>

<script setup lang="ts">
import { Opacity, Row, Container, Text, TextStyle } from "fluekit";
</script>

Transform

A widget that applies a transformation before painting its child.

Rotation

45°

90°

Scale

0.5x

1.5x

Translate

Offset

Skew

Skew X

Skew Y

3D Rotation

Rot X

Rot Y

Stack & Positioned

Back

Front

vue

<template>
  <div class="demo-box">
    <Column :gap="30" alignment="center">
      <!-- Rotation -->
      <Column :gap="10" alignment="center">
        <Text data="Rotation" :style="labelStyle" />
        <Row :gap="20">
          <Transform :transform="Matrix4.rotationZ(Math.PI / 4)" alignment="center">
            <Container :width="80" :height="80" color="purple" alignment="center">
              <Text data="45°" :style="textStyle" />
            </Container>
          </Transform>
          <Transform :transform="Matrix4.rotationZ(Math.PI / 2)" alignment="center">
            <Container :width="80" :height="80" color="indigo" alignment="center">
              <Text data="90°" :style="textStyle" />
            </Container>
          </Transform>
        </Row>
      </Column>

      <!-- Scale -->
      <Column :gap="10" alignment="center">
        <Text data="Scale" :style="labelStyle" />
        <Row :gap="40">
          <Transform :transform="Matrix4.scaling(0.5, 0.5)" alignment="center">
            <Container :width="80" :height="80" color="blue" alignment="center">
              <Text data="0.5x" :style="textStyle" />
            </Container>
          </Transform>
          <Transform :transform="Matrix4.scaling(1.5, 1.5)" alignment="center">
            <Container :width="80" :height="80" color="blue" alignment="center">
              <Text data="1.5x" :style="textStyle" />
            </Container>
          </Transform>
        </Row>
      </Column>

      <!-- Translate -->
      <Column :gap="10" alignment="center">
        <Text data="Translate" :style="labelStyle" />
        <Container :width="200" :height="100" color="#eeeeee" alignment="center">
          <Transform :transform="Matrix4.translation(20, -20)" alignment="center">
            <Container :width="60" :height="60" color="green" alignment="center">
              <Text data="Offset" :style="textStyle" />
            </Container>
          </Transform>
        </Container>
      </Column>

      <!-- Skew -->
      <Column :gap="10" alignment="center">
        <Text data="Skew" :style="labelStyle" />
        <Row :gap="20">
          <Transform :transform="Matrix4.skewX(0.3)" alignment="center">
            <Container :width="80" :height="80" color="orange" alignment="center">
              <Text data="Skew X" :style="textStyle" />
            </Container>
          </Transform>
          <Transform :transform="Matrix4.skewY(0.3)" alignment="center">
            <Container :width="80" :height="80" color="deepOrange" alignment="center">
              <Text data="Skew Y" :style="textStyle" />
            </Container>
          </Transform>
        </Row>
      </Column>

      <!-- 3D Rotation -->
      <Column :gap="10" alignment="center">
        <Text data="3D Rotation" :style="labelStyle" />
        <Row :gap="20">
          <Transform :transform="Matrix4.rotationX(Math.PI / 4)" alignment="center">
            <Container :width="80" :height="80" color="teal" alignment="center">
              <Text data="Rot X" :style="textStyle" />
            </Container>
          </Transform>
          <Transform :transform="Matrix4.rotationY(Math.PI / 4)" alignment="center">
            <Container :width="80" :height="80" color="cyan" alignment="center">
              <Text data="Rot Y" :style="textStyle" />
            </Container>
          </Transform>
        </Row>
      </Column>

      <!-- Stack & Positioned -->
      <Column :gap="10" alignment="center">
        <Text data="Stack & Positioned" :style="labelStyle" />
        <Container :width="200" :height="200" color="#f0f0f0">
          <Stack>
            <Positioned :top="40" :left="40">
              <Transform :transform="Matrix4.rotationZ(-0.2)" alignment="center">
                <Container
                  :width="120"
                  :height="120"
                  color="rgba(255, 0, 0, 0.5)"
                  alignment="center"
                >
                  <Text data="Back" :style="textStyle" />
                </Container>
              </Transform>
            </Positioned>
            <Positioned :top="40" :left="40">
              <Transform :transform="Matrix4.rotationZ(0.2)" alignment="center">
                <Container
                  :width="120"
                  :height="120"
                  color="rgba(0, 0, 255, 0.5)"
                  alignment="center"
                >
                  <Text data="Front" :style="textStyle" />
                </Container>
              </Transform>
            </Positioned>
          </Stack>
        </Container>
      </Column>
    </Column>
  </div>
</template>

<script setup lang="ts">
import {
  Transform,
  Container,
  Column,
  Row,
  Text,
  TextStyle,
  Matrix4,
  Stack,
  Positioned,
} from "fluekit";

const textStyle = TextStyle({ color: "white", fontSize: 14 });
const labelStyle = TextStyle({ fontWeight: "bold", fontSize: 16, color: "#333" });
</script>

IgnorePointer

A widget that is invisible during hit testing.

Click Me

Ignored

(Red box ignores clicks)

vue

<template>
  <Row :gap="20">
    <GestureDetector behavior="opaque" @click="$alert('Clicked Normal')">
      <Container :width="100" :height="50" color="green" alignment="center">
        <Text data="Click Me" :style="TextStyle({ color: 'white' })" />
      </Container>
    </GestureDetector>
    <GestureDetector behavior="opaque" @click="$alert('Clicked ignoring ')">
      <IgnorePointer ignoring>
        <Container :width="100" :height="50" color="red" alignment="center">
          <Text data="Ignored" :style="TextStyle({ color: 'white' })" />
        </Container>
      </IgnorePointer>
    </GestureDetector>
  </Row>
  <Text data="(Red box ignores clicks)" :style="TextStyle({ fontSize: 12, color: 'grey' })" />
</template>

<script setup lang="ts">
import { Row, GestureDetector, Container, Text, IgnorePointer, TextStyle } from "fluekit";

const $alert = (msg: string) => {
  window.alert(msg);
};
</script>

SafeArea

A widget that insets its child by sufficient padding to avoid operating system intrusions (e.g. notch).

Safe Content Area

vue

<template>
  <Container color="#333" :width="300" :height="150">
    <SafeArea :minimum="{ top: 20, left: 10, right: 10, bottom: 20 }">
      <Container color="white" :width="300" :height="150" alignment="center">
        <Text data="Safe Content Area" />
      </Container>
    </SafeArea>
  </Container>
</template>

<script setup lang="ts">
import { Container, SafeArea, Text } from "fluekit";
</script>

API

Opacity

Props

Name	Type	Default	Description
`opacity`	`number`	`1.0`	The fraction to scale the child's alpha value.

Slots

Name	Description
`default`	The widget below this widget in the tree.

Transform

Props

Name	Type	Default	Description
`transform`	`string`	-	The transformation matrix to apply (CSS transform).
`alignment`	`Alignment`	`'center'`	The alignment of the origin of the coordinate system in which the transform takes place.
`origin`	`string`	-	The origin of the coordinate system (CSS transform-origin).

Slots

Name	Description
`default`	The widget below this widget in the tree.

IgnorePointer

Props

Name	Type	Default	Description
`ignoring`	`boolean`	`false`	Whether this widget ignores pointer events.
`ignoringSemantics`	`boolean`	`false`	Whether this widget is invisible to semantics.

Slots

Name	Description
`default`	The widget below this widget in the tree.

SafeArea

Props

Name	Type	Default	Description
`left`	`boolean`	`true`	Whether to avoid system intrusions on the left.
`top`	`boolean`	`true`	Whether to avoid system intrusions at the top of the screen.
`right`	`boolean`	`true`	Whether to avoid system intrusions on the right.
`bottom`	`boolean`	`true`	Whether to avoid system intrusions on the bottom side of the screen.
`minimum`	`EdgeInsets`	-	This minimum padding to apply.
`maintainBottomViewPadding`	`boolean`	`false`	Specifies whether the safe area should maintain the bottom MediaQueryData.viewPadding.

Slots

Name	Description
`default`	The widget below this widget in the tree.

Effects ​

Opacity ​

Transform ​

IgnorePointer ​

SafeArea ​

API ​

Opacity ​

Props ​

Slots ​

Transform ​

Props ​

Slots ​

IgnorePointer ​

Props ​

Slots ​

SafeArea ​

Props ​

Slots ​

Effects

Opacity

Transform

IgnorePointer

SafeArea

API

Opacity

Props

Slots

Transform

Props

Slots

IgnorePointer

Props

Slots

SafeArea

Props

Slots