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:
|
align_items |
Specifies the default alignment for items inside a flexible container. See MDN doc.
TYPE:
|
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:
|
aspect_ratio |
Specifies the desired width-to-height ratio of a component. See MDN doc.
TYPE:
|
background |
Sets the background color or image of the component. See MDN doc.
TYPE:
|
border |
Defines the border properties for each side of the component. See MDN doc.
TYPE:
|
border_radius |
Defines the border radius. See MDN doc.
TYPE:
|
bottom |
Helps set vertical position of a positioned element. See MDN doc.
TYPE:
|
box_shadow |
Defines the box shadow. See MDN doc.
TYPE:
|
box_sizing |
Defines the box sizing. See MDN doc.
TYPE:
|
color |
Sets the color of the text inside the component. See MDN doc.
TYPE:
|
column_gap |
Sets the gap between columns. See MDN doc.
TYPE:
|
columns |
Specifies the number of columns in a multi-column element. See MDN doc.
TYPE:
|
cursor |
Sets the mouse cursor. See MDN doc.
TYPE:
|
display |
Defines the display type of the component. See MDN doc.
TYPE:
|
flex_basis |
Specifies the initial length of a flexible item. See MDN doc.
TYPE:
|
flex_direction |
Establishes the main-axis, thus defining the direction flex items are placed in the flex container. See MDN doc.
TYPE:
|
flex_grow |
Defines the ability for a flex item to grow if necessary. See MDN doc.
TYPE:
|
flex_shrink |
Defines the ability for a flex item to shrink if necessary. See MDN doc.
TYPE:
|
flex_wrap |
Allows flex items to wrap onto multiple lines. See MDN doc.
TYPE:
|
font_family |
Specifies the font family. See MDN doc.
TYPE:
|
font_size |
Sets the size of the font. See MDN doc.
TYPE:
|
font_style |
Specifies the font style for text. See MDN doc.
TYPE:
|
font_weight |
Sets the weight (or boldness) of the font. See MDN doc.
TYPE:
|
gap |
Sets the gap. See MDN doc.
TYPE:
|
grid_area |
Sets the grid area. See MDN doc.
TYPE:
|
grid_auto_columns |
CSS property specifies the size of an implicitly-created grid column track or pattern of tracks. See MDN doc.
TYPE:
|
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:
|
grid_auto_rows |
CSS property specifies the size of an implicitly-created grid row track or pattern of tracks. See MDN doc.
TYPE:
|
grid_column |
CSS shorthand property specifies a grid item's size and location within a grid column. See MDN doc.
TYPE:
|
grid_column_start |
Sets the grid column start. See MDN doc.
TYPE:
|
grid_column_end |
Sets the grid column end. See MDN doc.
TYPE:
|
grid_row |
CSS shorthand property specifies a grid item's size and location within a grid row. See MDN doc.
TYPE:
|
grid_row_start |
Sets the grid row start. See MDN doc.
TYPE:
|
grid_row_end |
Sets the grid row end. See MDN doc.
TYPE:
|
grid_template_areas |
Sets the grid template areas; each element is a row. See MDN doc.
TYPE:
|
grid_template_columns |
Sets the grid template columns. See MDN doc.
TYPE:
|
grid_template_rows |
Sets the grid template rows. See MDN doc.
TYPE:
|
height |
Sets the height of the component. See MDN doc.
TYPE:
|
justify_content |
Aligns the flexible container's items on the main-axis. See MDN doc.
TYPE:
|
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:
|
justify_self |
Sets the way a box is justified inside its alignment container along the appropriate axis. See MDN doc.
TYPE:
|
left |
Helps set horizontal position of a positioned element. See MDN doc.
TYPE:
|
letter_spacing |
Increases or decreases the space between characters in text. See MDN doc.
TYPE:
|
line |
Set the line height (relative to the font size). See MDN doc.
TYPE:
|
margin |
Sets the margin space required on each side of an element. See MDN doc.
TYPE:
|
opacity |
Sets the opacity property. See MDN doc.
TYPE:
|
outline |
Sets the outline property. Note:
TYPE:
|
overflow_wrap |
Specifies how long text can be broken up by new lines to prevent overflowing. See MDN doc.
TYPE:
|
overflow_x |
Specifies the handling of overflow in the horizontal direction. See MDN doc.
TYPE:
|
overflow_y |
Specifies the handling of overflow in the vertical direction. See MDN doc.
TYPE:
|
padding |
Sets the padding space required on each side of an element. See MDN doc.
TYPE:
|
position |
Specifies the type of positioning method used for an element (static, relative, absolute, fixed, or sticky). See MDN doc.
TYPE:
|
right |
Helps set horizontal position of a positioned element. See MDN doc.
TYPE:
|
rotate |
Allows you to specify rotation transforms individually and independently of the transform property. See MDN doc.
TYPE:
|
row_gap |
Sets the gap between rows. See MDN doc.
TYPE:
|
text_align |
Specifies the horizontal alignment of text in an element. See MDN doc.
TYPE:
|
text_decoration |
Specifies the decoration added to text. See MDN doc.
TYPE:
|
text_overflow |
Specifies how overflowed content that is not displayed should be signaled to the user. See MDN doc.
TYPE:
|
top |
Helps set vertical position of a positioned element. See MDN doc.
TYPE:
|
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:
|
visibility |
Sets the visibility property. See MDN doc.
TYPE:
|
white_space |
Specifies how white space inside an element is handled. See MDN doc.
TYPE:
|
width |
Sets the width of the component. See MDN doc.
TYPE:
|
z-index |
Sets the z-index of the component. See MDN doc.
TYPE:
|
Border
dataclass
Defines the border styles for each side of a UI component.
| ATTRIBUTE | DESCRIPTION |
|---|---|
top |
Style for the top border.
TYPE:
|
right |
Style for the right border.
TYPE:
|
bottom |
Style for the bottom border.
TYPE:
|
left |
Style for the left border.
TYPE:
|
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:
|
| RETURNS | DESCRIPTION |
|---|---|
Border
|
A new Border instance with the specified style applied to all sides.
TYPE:
|
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:
|
horizontal |
The style to apply to the right and left sides of the border.
TYPE:
|
| RETURNS | DESCRIPTION |
|---|---|
Border
|
A new Border instance with the specified styles applied symmetrically.
TYPE:
|
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:
|
color |
The color of the border, represented as a string. This can be any valid CSS color value, or None for no color.
TYPE:
|
style |
The style of the border, which can be 'none' for no border, 'solid' for a solid line.
TYPE:
|
Margin
dataclass
Bases: _EdgeInsets
Defines the margin space around a UI component.
| ATTRIBUTE | DESCRIPTION |
|---|---|
top |
Top margin (note:
TYPE:
|
right |
Right margin
TYPE:
|
bottom |
Bottom margin
TYPE:
|
left |
Left margin
TYPE:
|
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:
|
| RETURNS | DESCRIPTION |
|---|---|
Margin
|
A new Margin instance with the specified value applied to all sides.
TYPE:
|
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:
|
horizontal |
The value to apply to the right and left sides of the margin. Can be an integer (pixel value) or a string.
TYPE:
|
| RETURNS | DESCRIPTION |
|---|---|
Margin
|
A new Margin instance with the specified values applied to the vertical and horizontal sides.
TYPE:
|
Padding
dataclass
Bases: _EdgeInsets
Defines the padding space around a UI component.
| ATTRIBUTE | DESCRIPTION |
|---|---|
top |
Top padding (note:
TYPE:
|
right |
Right padding
TYPE:
|
bottom |
Bottom padding
TYPE:
|
left |
Left padding
TYPE:
|
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:
|
| RETURNS | DESCRIPTION |
|---|---|
Padding
|
A new Padding instance with the specified value applied to all sides.
TYPE:
|
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:
|
horizontal |
The value to apply to the right and left sides of the padding. Can be an integer (pixel value) or a string.
TYPE:
|
| RETURNS | DESCRIPTION |
|---|---|
Padding
|
A new Padding instance with the specified values applied to the vertical and horizontal sides.
TYPE:
|