Skip to content

Style

Overview

Mesop provides a Python API that wraps the browser's native CSS style API.

API

Style dataclass

Represents the style configuration for a UI component.

ATTRIBUTE DESCRIPTION
align_content

Aligns the flexible container's items on the cross-axis. See MDN doc.

TYPE: ContentAlignmentValues | None

align_items

Specifies the default alignment for items inside a flexible container. See MDN doc.

TYPE: ItemAlignmentValues | None

align_self

Overrides a grid or flex item's align-items value. In Grid, it aligns the item inside the grid area. In Flexbox, it aligns the item on the cross axis. See MDN doc.

TYPE: ItemAlignmentValues | None

aspect_ratio

Specifies the desired width-to-height ratio of a component. See MDN doc.

TYPE: str | None

backdrop_filter

Applies a CSS filter to the backdrop of the component. See MDN doc.

TYPE: str | None

background

Sets the background color or image of the component. See MDN doc.

TYPE: str | None

border

Defines the border properties for each side of the component. See MDN doc.

TYPE: Border | None

border_radius

Defines the border radius. See MDN doc.

TYPE: int | str | None

bottom

Helps set vertical position of a positioned element. See MDN doc.

TYPE: int | str | None

box_shadow

Defines the box shadow. See MDN doc.

TYPE: str | None

box_sizing

Defines the box sizing. See MDN doc.

TYPE: str | None

color

Sets the color of the text inside the component. See MDN doc.

TYPE: str | None

column_gap

Sets the gap between columns. See MDN doc.

TYPE: int | str | None

columns

Specifies the number of columns in a multi-column element. See MDN doc.

TYPE: int | str | None

cursor

Sets the mouse cursor. See MDN doc.

TYPE: str | None

display

Defines the display type of the component. See MDN doc.

TYPE: Literal['block', 'inline', 'inline-block', 'flex', 'inline-flex', 'grid', 'inline-grid', 'none', 'contents'] | None

flex

Defines the flexbox layout using a shorthand property. See MDN doc.

TYPE: int | str | None

flex_basis

Specifies the initial length of a flexible item. See MDN doc.

TYPE: str | None

flex_direction

Establishes the main-axis, thus defining the direction flex items are placed in the flex container. See MDN doc.

TYPE: Literal['row', 'row-reverse', 'column', 'column-reverse'] | None

flex_grow

Defines the ability for a flex item to grow if necessary. See MDN doc.

TYPE: int | None

flex_shrink

Defines the ability for a flex item to shrink if necessary. See MDN doc.

TYPE: int | None

flex_wrap

Allows flex items to wrap onto multiple lines. See MDN doc.

TYPE: Literal['nowrap', 'wrap', 'wrap-reverse'] | None

font_family

Specifies the font family. See MDN doc.

TYPE: str | None

font_size

Sets the size of the font. See MDN doc.

TYPE: int | str | None

font_style

Specifies the font style for text. See MDN doc.

TYPE: Literal['italic', 'normal'] | None

font_weight

Sets the weight (or boldness) of the font. See MDN doc.

TYPE: Literal['bold', 'normal', 'medium', 100, 200, 300, 400, 500, 600, 700, 800, 900] | None

gap

Sets the gap. See MDN doc.

TYPE: int | str | None

grid_area

Sets the grid area. See MDN doc.

TYPE: str | None

grid_auto_columns

CSS property specifies the size of an implicitly-created grid column track or pattern of tracks. See MDN doc.

TYPE: str | None

grid_auto_flow

CSS property controls how the auto-placement algorithm works, specifying exactly how auto-placed items get flowed into the grid. See MDN doc.

TYPE: str | None

grid_auto_rows

CSS property specifies the size of an implicitly-created grid row track or pattern of tracks. See MDN doc.

TYPE: str | None

grid_column

CSS shorthand property specifies a grid item's size and location within a grid column. See MDN doc.

TYPE: str | None

grid_column_start

Sets the grid column start. See MDN doc.

TYPE: int | str | None

grid_column_end

Sets the grid column end. See MDN doc.

TYPE: int | str | None

grid_row

CSS shorthand property specifies a grid item's size and location within a grid row. See MDN doc.

TYPE: str | None

grid_row_start

Sets the grid row start. See MDN doc.

TYPE: int | str | None

grid_row_end

Sets the grid row end. See MDN doc.

TYPE: int | str | None

grid_template_areas

Sets the grid template areas; each element is a row. See MDN doc.

TYPE: list[str] | None

grid_template_columns

Sets the grid template columns. See MDN doc.

TYPE: str | None

grid_template_rows

Sets the grid template rows. See MDN doc.

TYPE: str | None

height

Sets the height of the component. See MDN doc.

TYPE: int | str | None

justify_content

Aligns the flexible container's items on the main-axis. See MDN doc.

TYPE: ContentAlignmentValues | None

justify_items

Defines the default justify-self for all items of the box, giving them all a default way of justifying each box along the appropriate axis. See MDN doc.

TYPE: ItemJustifyValues | None

justify_self

Sets the way a box is justified inside its alignment container along the appropriate axis. See MDN doc.

TYPE: ItemJustifyValues | None

left

Helps set horizontal position of a positioned element. See MDN doc.

TYPE: int | str | None

letter_spacing

Increases or decreases the space between characters in text. See MDN doc.

TYPE: int | str | None

line

Set the line height (relative to the font size). See MDN doc.

TYPE: height

margin

Sets the margin space required on each side of an element. See MDN doc.

TYPE: Margin | None

max_height

Sets the maximum height of an element. See MDN doc.

TYPE: int | str | None

max_width

Sets the maximum width of an element. See MDN doc.

TYPE: int | str | None

min_height

Sets the minimum height of an element. See MDN doc.

TYPE: int | str | None

min_width

Sets the minimum width of an element. See MDN doc.

TYPE: int | str | None

object_fit

Specifies how an image or video should be resized to fit its container. See MDN doc.

TYPE: ObjectFitValues | None

opacity

Sets the opacity property. See MDN doc.

TYPE: float | str | None

outline

Sets the outline property. Note: input component has default browser stylings. See MDN doc.

TYPE: str | None

overflow_wrap

Specifies how long text can be broken up by new lines to prevent overflowing. See MDN doc.

TYPE: OverflowWrapValues | None

overflow

Specifies the handling of overflow in the horizontal and vertical direction. See MDN doc.

TYPE: OverflowValues | None

overflow_x

Specifies the handling of overflow in the horizontal direction. See MDN doc.

TYPE: OverflowValues | None

overflow_y

Specifies the handling of overflow in the vertical direction. See MDN doc.

TYPE: OverflowValues | None

padding

Sets the padding space required on each side of an element. See MDN doc.

TYPE: Padding | None

place_items

The CSS place-items shorthand property allows you to align items along both the block and inline directions at once. See MDN doc.

TYPE: str | None

pointer_events

Sets under what circumstances (if any) a particular graphic element can become the target of pointer events. See MDN doc.

TYPE: PointerEventsValues | None

position

Specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky). See MDN doc.

TYPE: Literal['static', 'relative', 'absolute', 'fixed', 'sticky'] | None

right

Helps set horizontal position of a positioned element. See MDN doc.

TYPE: int | str | None

rotate

Allows you to specify rotation transforms individually and independently of the transform property. See MDN doc.

TYPE: str | None

row_gap

Sets the gap between rows. See MDN doc.

TYPE: int | str | None

text_align

Specifies the horizontal alignment of text in an element. See MDN doc.

TYPE: Literal['start', 'end', 'left', 'right', 'center'] | None

text_decoration

Specifies the decoration added to text. See MDN doc.

TYPE: Literal['underline', 'none'] | None

text_overflow

Specifies how overflowed content that is not displayed should be signaled to the user. See MDN doc.

TYPE: Literal['ellipsis', 'clip'] | None

text_shadow

Specifies the shadow effect applied to text. See MDN doc.

TYPE: str | None

text_transform

Specifies the transformation applied to text. See MDN doc.

TYPE: Literal['uppercase', 'lowercase', 'capitalize', 'none', 'full-width', 'full-size-kana'] | None

top

Helps set vertical position of a positioned element. See MDN doc.

TYPE: int | str | None

transform

Lets you rotate, scale, skew, or translate an element. It modifies the coordinate space of the CSS visual formatting model. See MDN doc.

TYPE: str | None

transition

Specifies the transition effect. See MDN doc.

TYPE: str | None

vertical_align

Specifies the vertical alignment of an element. See MDN doc.

TYPE: Literal['baseline', 'sub', 'super', 'top', 'text-top', 'middle', 'bottom', 'text-bottom', 'initial', 'inherit', 'revert', 'revert-layer', 'unset'] | None

visibility

Sets the visibility property. See MDN doc.

TYPE: Literal['visible', 'hidden', 'collapse', 'inherit', 'initial', 'revert', 'revert-layer', 'unset'] | None

white_space

Specifies how white space inside an element is handled. See MDN doc.

TYPE: Literal['normal', 'nowrap', 'pre', 'pre-wrap', 'pre-line', 'break-spaces'] | None

width

Sets the width of the component. See MDN doc.

TYPE: int | str | None

word_wrap

Specifies how long text can be broken up by new lines to prevent overflowing. See MDN doc.

TYPE: Literal['normal', 'break-word', 'anywhere'] | None

z-index

Sets the z-index of the component. See MDN doc.

TYPE: Literal['normal', 'break-word', 'anywhere'] | None

Border dataclass

Defines the border styles for each side of a UI component.

ATTRIBUTE DESCRIPTION
top

Style for the top border.

TYPE: BorderSide | None

right

Style for the right border.

TYPE: BorderSide | None

bottom

Style for the bottom border.

TYPE: BorderSide | None

left

Style for the left border.

TYPE: BorderSide | None

all staticmethod

Creates a Border instance with all sides having the same style.

PARAMETER DESCRIPTION
value

The style to apply to all sides of the border.

TYPE: BorderSide

RETURNS DESCRIPTION
Border

A new Border instance with the specified style applied to all sides.

TYPE: Border

symmetric staticmethod

Creates a Border instance with symmetric styles for vertical and horizontal sides.

PARAMETER DESCRIPTION
vertical

The style to apply to the top and bottom sides of the border.

TYPE: BorderSide | None DEFAULT: None

horizontal

The style to apply to the right and left sides of the border.

TYPE: BorderSide | None DEFAULT: None

RETURNS DESCRIPTION
Border

A new Border instance with the specified styles applied symmetrically.

TYPE: Border

BorderSide dataclass

Represents the style of a single side of a border in a UI component.

ATTRIBUTE DESCRIPTION
width

The width of the border. Can be specified as an integer value representing pixels, a string with a unit (e.g., '2em'), or None for no width.

TYPE: int | str | None

color

The color of the border, represented as a string. This can be any valid CSS color value, or None for no color.

TYPE: str | None

style

The style of the border. See https://developer.mozilla.org/en-US/docs/Web/CSS/border-style

TYPE: Literal['none', 'solid', 'dashed', 'dotted', 'double', 'groove', 'ridge', 'inset', 'outset', 'hidden'] | None

Margin dataclass

Bases: _EdgeInsets

Defines the margin space around a UI component.

ATTRIBUTE DESCRIPTION
top

Top margin (note: 2 is the same as 2px)

TYPE: int | str | None

right

Right margin

TYPE: int | str | None

bottom

Bottom margin

TYPE: int | str | None

left

Left margin

TYPE: int | str | None

all staticmethod

Creates a Margin instance with the same value for all sides.

PARAMETER DESCRIPTION
value

The value to apply to all sides of the margin. Can be an integer (pixel value) or a string.

TYPE: int | str

RETURNS DESCRIPTION
Margin

A new Margin instance with the specified value applied to all sides.

TYPE: Margin

symmetric staticmethod

Creates a Margin instance with symmetric values for vertical and horizontal sides.

PARAMETER DESCRIPTION
vertical

The value to apply to the top and bottom sides of the margin. Can be an integer (pixel value) or a string.

TYPE: int | str | None DEFAULT: None

horizontal

The value to apply to the right and left sides of the margin. Can be an integer (pixel value) or a string.

TYPE: int | str | None DEFAULT: None

RETURNS DESCRIPTION
Margin

A new Margin instance with the specified values applied to the vertical and horizontal sides.

TYPE: Margin

Padding dataclass

Bases: _EdgeInsets

Defines the padding space around a UI component.

ATTRIBUTE DESCRIPTION
top

Top padding (note: 2 is the same as 2px)

TYPE: int | str | None

right

Right padding

TYPE: int | str | None

bottom

Bottom padding

TYPE: int | str | None

left

Left padding

TYPE: int | str | None

all staticmethod

Creates a Padding instance with the same value for all sides.

PARAMETER DESCRIPTION
value

The value to apply to all sides of the padding. Can be an integer (pixel value) or a string.

TYPE: int | str

RETURNS DESCRIPTION
Padding

A new Padding instance with the specified value applied to all sides.

TYPE: Padding

symmetric staticmethod

Creates a Padding instance with symmetric values for vertical and horizontal sides.

PARAMETER DESCRIPTION
vertical

The value to apply to the top and bottom sides of the padding. Can be an integer (pixel value) or a string.

TYPE: int | str | None DEFAULT: None

horizontal

The value to apply to the right and left sides of the padding. Can be an integer (pixel value) or a string.

TYPE: int | str | None DEFAULT: None

RETURNS DESCRIPTION
Padding

A new Padding instance with the specified values applied to the vertical and horizontal sides.

TYPE: Padding