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