0%

Style playground

You can edit the styles below and see them immediately take effect on the outer frame:

State

Invisible

Disabled

Read only

Selected

Active

Dragging

Sliding

Focused

Attended

Checked

Indeterminate

Hovered

Long hovered

Long pressed

Drag hovered

Abilities

Selectable

Activatable

Clickable

Double clickable

Triple clickable

Repeat clickable

Long pressable

Draggable

Droppable

Slideable

Checkable

Scrollable

Focusable

Hoverable

Long hoverable

Scrollable unattended

Cursor

None

Padding

Top

Dp

Right

Dp

Bottom

Dp

Left

Dp

Margin

Top

Dp

Right

Dp

Bottom

Dp

Left

Dp

Display

Flex

Direction

Row

Column

Wrap

Justify

Content

Start

Items

Start

Self

Auto

Align

Content

Start

Items

Start

Self

Auto

Min

X

Dp

Y

Dp

Max

X

Dp

Y

Dp

Grow

X

Y

Grow wrap

Render box

Fill margin

Overflow

X

Visible

Y

Visible

Gap

X

Em

Y

Em

Columns

Object fit

Fill

Object position

X

Dp

Y

Dp

Border

Border

Max border

Border

Box shadow

None

Max box shadow

None

Color

Background

Edit color

Opacity

State layer

State color

Actual background

Virtual keyboard

None

Pos

X

Dp

Y

Dp

Col span

Scrollbar width

Dp

Icon size

X

Dp

Y

Dp

Font

Font

Text

Text

Unit context

Context