kuito.
Commencer

Propriétés CSS

Chaque nom de propriété accepté par le compilateur, avec sa catégorie de valeurs. Une propriété non prise en charge fait échouer la compilation.

97 sur 97

color

PropriétéValeurs acceptéesUtilisation
background-colorcolor (colors)background-color: #f8fafc;

Set a card surface color.

colorcolor (colors)color: #0f172a;

Set readable foreground text.

background

PropriétéValeurs acceptéesUtilisation
backgroundcolor, or linear-gradient(<angle> | to <side>, color, color, …)background: linear-gradient(135deg, #2563eb, #0f172a);

Give a header a gradient backdrop.

opacity

PropriétéValeurs acceptéesUtilisation
opacity0–1opacity: 0.6;

Visually de-emphasize secondary content.

padding

PropriétéValeurs acceptéesUtilisation
padding1–4 non-negative lengths, like CSSpadding: 16px;

Add space inside the container.

paddingSides

PropriétéValeurs acceptéesUtilisation
padding-topnon-negative lengthpadding-top: 16px;

Add space inside the container.

padding-rightnon-negative lengthpadding-right: 16px;

Add space inside the container.

padding-bottomnon-negative lengthpadding-bottom: 16px;

Add space inside the container.

padding-leftnon-negative lengthpadding-left: 16px;

Add space inside the container.

padding-horizontalnon-negative lengthpadding-horizontal: 16px;

Add space inside the container.

padding-verticalnon-negative lengthpadding-vertical: 16px;

Add space inside the container.

logicalSides

PropriétéValeurs acceptéesUtilisation
padding-inlinea start and an optional end, as their physical sides take; see Right to leftpadding-inline: 16px;

Add space inside the logical edge of a mirrored layout.

padding-inline-starta start and an optional end, as their physical sides take; see Right to leftpadding-inline-start: 16px;

Add space inside the logical edge of a mirrored layout.

padding-inline-enda start and an optional end, as their physical sides take; see Right to leftpadding-inline-end: 16px;

Add space inside the logical edge of a mirrored layout.

padding-blocka start and an optional end, as their physical sides take; see Right to leftpadding-block: 16px;

Add space inside the logical edge of a mirrored layout.

padding-block-starta start and an optional end, as their physical sides take; see Right to leftpadding-block-start: 16px;

Add space inside the logical edge of a mirrored layout.

padding-block-enda start and an optional end, as their physical sides take; see Right to leftpadding-block-end: 16px;

Add space inside the logical edge of a mirrored layout.

inset-inlinea start and an optional end, as their physical sides take; see Right to leftinset-inline: 8px;

Place an absolutely positioned overlay relative to its container.

inset-inline-starta start and an optional end, as their physical sides take; see Right to leftinset-inline-start: 8px;

Place an absolutely positioned overlay relative to its container.

inset-inline-enda start and an optional end, as their physical sides take; see Right to leftinset-inline-end: 8px;

Place an absolutely positioned overlay relative to its container.

inset-blocka start and an optional end, as their physical sides take; see Right to leftinset-block: 8px;

Place an absolutely positioned overlay relative to its container.

inset-block-starta start and an optional end, as their physical sides take; see Right to leftinset-block-start: 8px;

Place an absolutely positioned overlay relative to its container.

inset-block-enda start and an optional end, as their physical sides take; see Right to leftinset-block-end: 8px;

Place an absolutely positioned overlay relative to its container.

margin-inlinea start and an optional end, as their physical sides take; see Right to leftmargin-inline: 8px;

Separate this view from adjacent content.

margin-inline-starta start and an optional end, as their physical sides take; see Right to leftmargin-inline-start: 8px;

Separate this view from adjacent content.

margin-inline-enda start and an optional end, as their physical sides take; see Right to leftmargin-inline-end: 8px;

Separate this view from adjacent content.

margin-blocka start and an optional end, as their physical sides take; see Right to leftmargin-block: 8px;

Separate this view from adjacent content.

margin-block-starta start and an optional end, as their physical sides take; see Right to leftmargin-block-start: 8px;

Separate this view from adjacent content.

margin-block-enda start and an optional end, as their physical sides take; see Right to leftmargin-block-end: 8px;

Separate this view from adjacent content.

size

PropriétéValeurs acceptéesUtilisation
gapsee Layoutgap: 12px;

Space children without individual margins.

row-gapsee Layoutrow-gap: 12px;

Space children without individual margins.

column-gapsee Layoutcolumn-gap: 12px;

Space children without individual margins.

widthsee Layoutwidth: 160px;

Reserve horizontal space for an image.

heightsee Layoutheight: 48px;

Give a control a consistent height.

min-widthsee Layoutmin-width: 120px;

Keep an action from becoming too narrow.

max-widthsee Layoutmax-width: 640px;

Limit a readable content column.

min-heightsee Layoutmin-height: 44px;

Keep a row tall enough to interact with.

max-heightsee Layoutmax-height: 320px;

Bound a panel height.

aspect-ratiosee Layoutaspect-ratio: 1;

Keep an image square.

position

PropriétéValeurs acceptéesUtilisation
overflowsee Layoutoverflow: hidden;

Clip children to a container.

directionsee Layoutdirection: rtl;

Set a subtree reading direction.

box-sizingsee Layoutbox-sizing: border-box;

Include padding and borders in declared size.

positionsee Layoutposition: absolute;

Position a badge over its parent.

topsee Layouttop: 8px;

Place an absolutely positioned overlay relative to its container.

bottomsee Layoutbottom: 8px;

Place an absolutely positioned overlay relative to its container.

leftsee Layoutleft: 8px;

Place an absolutely positioned overlay relative to its container.

margin-topsee Layoutmargin-top: 8px;

Separate this view from adjacent content.

margin-rightsee Layoutmargin-right: 8px;

Separate this view from adjacent content.

margin-bottomsee Layoutmargin-bottom: 8px;

Separate this view from adjacent content.

margin-leftsee Layoutmargin-left: 8px;

Separate this view from adjacent content.

layoutShorthands

PropriétéValeurs acceptéesUtilisation
insetsee Layoutinset: 8px;

Place an absolutely positioned overlay relative to its container.

marginsee Layoutmargin: 8px;

Separate this view from adjacent content.

margin-horizontalsee Layoutmargin-horizontal: 8px;

Separate this view from adjacent content.

margin-verticalsee Layoutmargin-vertical: 8px;

Separate this view from adjacent content.

flexsee Layoutflex: 1;

Fill free space in a stack.

flex-flowsee Layoutflex-flow: row wrap;

Wrap a row of chips.

flexbox

PropriétéValeurs acceptéesUtilisation
flex-directionsee Layoutflex-direction: row;

Arrange content horizontally.

flex-wrapsee Layoutflex-wrap: wrap;

Allow items onto another line.

flex-growsee Layoutflex-grow: 1;

Allocate remaining space to this child.

flex-shrinksee Layoutflex-shrink: 0;

Keep an icon from shrinking.

flex-basissee Layoutflex-basis: 120px;

Set the starting size of a flex item.

flex-line-countsee Layoutflex-line-count: 2;

Limit a wrapping flex layout to two lines.

align-itemssee Layoutalign-items: center;

Center children on the cross axis.

align-selfsee Layoutalign-self: stretch;

Stretch one child across its container.

align-contentsee Layoutalign-content: space-between;

Distribute wrapped lines.

justify-contentsee Layoutjustify-content: space-between;

Separate a row’s leading and trailing content.

display

PropriétéValeurs acceptéesUtilisation
displaynone, flex; hidden takes true or falsedisplay: none;

Remove content from layout.

hiddennone, flex; hidden takes true or falsehidden: true;

Hide a view through the native hidden prop.

borderParts

PropriétéValeurs acceptéesUtilisation
border-radiusnon-negative length / colorborder-radius: 12px;

Round a card’s corners.

corner-radiusnon-negative length / colorcorner-radius: 12px;

Set rounded corners using the native alias.

border-widthnon-negative length / colorborder-width: 1px;

Set the thickness of an outline.

border-colornon-negative length / colorborder-color: #2563eb;

Highlight a selected control.

border

PropriétéValeurs acceptéesUtilisation
border<width> solid <color>, in any order, each at most once; or noneborder: 1px solid #cbd5e1;

Outline a card.

shadow

PropriétéValeurs acceptéesUtilisation
box-shadow<x> <y> [blur] <color>; blur is halved into the native radiusbox-shadow: 0 4px 12px #00000033;

Lift a floating panel visually.

shadowParts

PropriétéValeurs acceptéesUtilisation
shadow-colorcolor / lengthshadow-color: #00000033;

Tint a native shadow.

shadow-radiuscolor / lengthshadow-radius: 6px;

Soften the shadow edge.

shadow-offset-xcolor / lengthshadow-offset-x: 0px;

Keep a shadow horizontally centered.

shadow-offset-ycolor / lengthshadow-offset-y: 4px;

Move a shadow below its view.

textLength

PropriétéValeurs acceptéesUtilisation
font-sizelengthfont-size: 18px;

Set a body label size.

letter-spacinglengthletter-spacing: 0.5px;

Space a short uppercase label.

fontWeight

PropriétéValeurs acceptéesUtilisation
font-weightnormal, bold, 100–900font-weight: 600;

Emphasize a section title.

font

PropriétéValeurs acceptéesUtilisation
font-familya system, bundled or loaded family (fonts); normal, italicfont-family: system;

Use the platform system font.

font-stylea system, bundled or loaded family (fonts); normal, italicfont-style: italic;

Style an annotation.

lineHeight

PropriétéValeurs acceptéesUtilisation
line-heightlength, or a unitless multiple of the font sizeline-height: 1.5;

Increase paragraph line spacing.

textKeywords

PropriétéValeurs acceptéesUtilisation
text-alignleft/center/right; none/uppercase/lowercase/capitalizetext-align: center;

Center a heading.

text-transformleft/center/right; none/uppercase/lowercase/capitalizetext-transform: uppercase;

Format a short label.

lineClamp

PropriétéValeurs acceptéesUtilisation
-webkit-line-clampwhole number (0 = unlimited)-webkit-line-clamp: 2;

Limit a summary to two lines.

number-of-lineswhole number (0 = unlimited)number-of-lines: 2;

Limit lines through the native alias.

transform

PropriétéValeurs acceptéesUtilisation
transformtranslate(), translateX/Y(), scale(), scaleX/Y(), rotate(deg|rad|turn), nonetransform: translateY(8px) scale(0.98);

Offset and scale a card without changing layout.

transformParts

PropriétéValeurs acceptéesUtilisation
translate-xlength; a number; an angle (deg, rad, turn)translate-x: 8px;

Offset a view horizontally.

translate-ylength; a number; an angle (deg, rad, turn)translate-y: 8px;

Offset a view vertically.

scalelength; a number; an angle (deg, rad, turn)scale: 1.05;

Enlarge a selected item.

scale-xlength; a number; an angle (deg, rad, turn)scale-x: 1.05;

Scale only the horizontal axis.

scale-ylength; a number; an angle (deg, rad, turn)scale-y: 1.05;

Scale only the vertical axis.

rotatelength; a number; an angle (deg, rad, turn)rotate: 15deg;

Rotate a decorative element.

transition

PropriétéValeurs acceptéesUtilisation
transitionsee Transitionstransition: opacity 200ms ease-out;

Animate a change in opacity.

Généré depuis la table de propriétés du compilateur. Elle décrit le sous-ensemble CSS pris en charge, pas la compatibilité navigateur.