readme.md

PixelPadding

A component that lets you set padding from any side using pixel values.

Set up

Step 1: Install the Devvit kit

Open your project folder in the terminal app.

Run npm install @devvit/kit --save

Step 2: Import the PixelPadding component

Add the line import { PixelPadding } from '@devvit/kit'; in the beginning of the component file.

Step 3: Use PixelPadding in your component

Add PixelPadding element to any component in your app, like in example below:

Interactive Example

<PixelPadding x="20px" y="10px">
  <hstack borderColor="red"
          height="200px"
          width="200px"
          cornerRadius="medium"
          gap="small"
          alignment="center middle"
  >
    <hstack backgroundColor="cyan" width="100px" height="60px"/>
    <hstack backgroundColor="green" width="20px" height="20px"/>
  </hstack>
</PixelPadding>

Props and values

all

Pixel value for padding on all sides. This can be overridden by more specific padding properties.

x

Pixel value for padding on left and right sides. This can be overridden by more specific padding properties.

y

Pixel value for padding on top and bottom sides. This can be overridden by more specific padding properties.

left

Pixel value for padding on the left side.

right

Pixel value for padding on the right side.

top

Pixel value for padding on the top side.

bottom

Pixel value for padding on the bottom side.

inspect

Enables the inspector mode and highlights the padding applied in green.