Penpot plugins API
    Preparing search index...

    Interface CommonLayout

    CommonLayout represents a common layout interface in the Penpot application. It includes various properties for alignment, spacing, padding, and sizing, as well as a method to remove the layout.

    interface CommonLayout {
        alignItems?: "center" | "start" | "end" | "stretch";
        alignContent?:
            | "center"
            | "start"
            | "end"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly";
        justifyItems?: "center"
        | "start"
        | "end"
        | "stretch";
        justifyContent?:
            | "center"
            | "start"
            | "end"
            | "stretch"
            | "space-between"
            | "space-around"
            | "space-evenly";
        rowGap: number;
        columnGap: number;
        verticalPadding: number;
        horizontalPadding: number;
        topPadding: number;
        rightPadding: number;
        bottomPadding: number;
        leftPadding: number;
        horizontalSizing: "fill"
        | "auto"
        | "fix";
        verticalSizing: "fill" | "auto" | "fix";
        remove(): void;
    }

    Hierarchy (View Summary)

    Index

    Properties

    alignItems? alignContent? justifyItems? justifyContent? rowGap columnGap verticalPadding horizontalPadding topPadding rightPadding bottomPadding leftPadding horizontalSizing verticalSizing

    Methods

    remove

    Properties

    alignItems?: "center" | "start" | "end" | "stretch"

    The alignItems property specifies the default alignment for items inside the container. It can be one of the following values:

    • 'start': Items are aligned at the start.
    • 'end': Items are aligned at the end.
    • 'center': Items are centered.
    • 'stretch': Items are stretched to fill the container.
    alignContent?:
        | "center"
        | "start"
        | "end"
        | "stretch"
        | "space-between"
        | "space-around"
        | "space-evenly"

    The alignContent property specifies how the content is aligned within the container when there is extra space. It can be one of the following values:

    • 'start': Content is aligned at the start.
    • 'end': Content is aligned at the end.
    • 'center': Content is centered.
    • 'space-between': Content is distributed with space between.
    • 'space-around': Content is distributed with space around.
    • 'space-evenly': Content is distributed with even space around.
    • 'stretch': Content is stretched to fill the container.
    justifyItems?: "center" | "start" | "end" | "stretch"

    The justifyItems property specifies the default justification for items inside the container. It can be one of the following values:

    • 'start': Items are justified at the start.
    • 'end': Items are justified at the end.
    • 'center': Items are centered.
    • 'stretch': Items are stretched to fill the container.
    justifyContent?:
        | "center"
        | "start"
        | "end"
        | "stretch"
        | "space-between"
        | "space-around"
        | "space-evenly"

    The justifyContent property specifies how the content is justified within the container when there is extra space. It can be one of the following values:

    • 'start': Content is justified at the start.
    • 'center': Content is centered.
    • 'end': Content is justified at the end.
    • 'space-between': Content is distributed with space between.
    • 'space-around': Content is distributed with space around.
    • 'space-evenly': Content is distributed with even space around.
    • 'stretch': Content is stretched to fill the container.
    rowGap: number

    The rowGap property specifies the gap between rows in the layout.

    columnGap: number

    The columnGap property specifies the gap between columns in the layout.

    verticalPadding: number

    The verticalPadding property specifies the vertical padding inside the container.

    horizontalPadding: number

    The horizontalPadding property specifies the horizontal padding inside the container.

    topPadding: number

    The topPadding property specifies the padding at the top of the container.

    rightPadding: number

    The rightPadding property specifies the padding at the right of the container.

    bottomPadding: number

    The bottomPadding property specifies the padding at the bottom of the container.

    leftPadding: number

    The leftPadding property specifies the padding at the left of the container.

    horizontalSizing: "fill" | "auto" | "fix"

    The horizontalSizing property specifies the horizontal sizing behavior of the container. It can be one of the following values:

    • 'fix': The containers has its own intrinsic fixed size.
    • 'fill': The container fills the available space. Only can be set if it's inside another layout.
    • 'auto': The container fits the content.
    verticalSizing: "fill" | "auto" | "fix"

    The verticalSizing property specifies the vertical sizing behavior of the container. It can be one of the following values:

    • 'fix': The containers has its own intrinsic fixed size.
    • 'fill': The container fills the available space. Only can be set if it's inside another layout.
    • 'auto': The container fits the content.

    Methods

    • The remove method removes the layout.

      Returns void

    Settings

    Member Visibility

    On This Page

    Properties
    Methods