This page serves as a reference to USS properties currently supported in UI(User Interface) Allows a user to interact with your application. More info
See in Glossary Toolkit.
| Property | Syntax | Inherited? | |
|---|---|---|---|
| align-content | align-content: flex-start | flex-end | center | stretch | auto |
||
| align-items | align-items: flex-start | flex-end | center | stretch | auto |
||
| align-self | align-self: flex-start | flex-end | center | stretch | auto |
||
| background-color | background-color: {color} |
||
| background-image | background-image: {resource} | {url} | none |
||
| border-bottom-color | border-bottom-color: {color} |
||
| border-bottom-left-radius | border-bottom-left-radius: {length} | {percentage} |
||
| border-bottom-right-radius | border-bottom-right-radius: {length} | {percentage} |
||
| border-bottom-width | border-bottom-width: {length} |
||
| border-color | border-color: {color}{1,4} |
||
| border-left-color | border-left-color: {color} |
||
| border-left-width | border-left-width: {length} |
||
| border-radius | border-radius: {length} | {percentage} {1,4} |
||
| border-right-color | border-right-color: {color} |
||
| border-right-width | border-right-width: {length} |
||
| border-top-color | border-top-color: {color} |
||
| border-top-left-radius | border-top-left-radius: {length} | {percentage} |
||
| border-top-right-radius | border-top-right-radius: {length} | {percentage} |
||
| border-top-width | border-top-width: {length} |
||
| border-width | border-width: {length}{1,4} |
||
| bottom | bottom: {length} | {percentage} | auto |
||
| color | color: {color} |
Yes | |
| cursor | cursor: {resource} | {url} {integer} {integer} ? | arrow | text | resize-vertical | resize-horizontal | link | slide-arrow | resize-up-right | resize-up-left | move-arrow | rotate-arrow | scale-arrow | arrow-plus | arrow-minus | pan | orbit | zoom | fps | split-resize-up-down | split-resize-left-right |
||
| display | display: flex | none |
||
| flex | flex: none | {'flex-grow'} {'flex-shrink'}? | | {'flex-basis'} |
||
| flex-basis | flex-basis: {'width'} |
||
| flex-direction | flex-direction: column | row | column-reverse | row-reverse |
||
| flex-grow | flex-grow: {number} |
||
| flex-shrink | flex-shrink: {number} |
||
| flex-wrap | flex-wrap: nowrap | wrap | wrap-reverse |
||
| font-size | font-size: {length} | {percentage} |
Yes | |
| height | height: {length} | {percentage} | auto |
||
| justify-content | justify-content: flex-start | flex-end | center | space-between | space-around |
||
| left | left: {length} | {percentage} | auto |
||
| margin | margin: {length} | {percentage} | auto {1,4} |
||
| margin-bottom | margin-bottom: {length} | {percentage} | auto |
||
| margin-left | margin-left: {length} | {percentage} | auto |
||
| margin-right | margin-right: {length} | {percentage} | auto |
||
| margin-top | margin-top: {length} | {percentage} | auto |
||
| max-height | max-height: {length} | {percentage} | none |
||
| max-width | max-width: {length} | {percentage} | none |
||
| min-height | min-height: {length} | {percentage} | auto |
||
| min-width | min-width: {length} | {percentage} | auto |
||
| opacity | opacity: {number} |
||
| overflow | overflow: visible | hidden | scroll |
||
| padding | padding: {length} | {percentage} {1,4} |
||
| padding-bottom | padding-bottom: {length} | {percentage} |
||
| padding-left | padding-left: {length} | {percentage} |
||
| padding-right | padding-right: {length} | {percentage} |
||
| padding-top | padding-top: {length} | {percentage} |
||
| position | position: relative | absolute |
||
| right | right: {length} | {percentage} | auto |
||
| text-overflow | text-overflow: clip | ellipsis |
||
| top | top: {length} | {percentage} | auto |
||
| -unity-background-image-tint-color | -unity-background-image-tint-color: {color} |
||
| -unity-background-scale-mode | -unity-background-scale-mode: stretch-to-fill | scale-and-crop | scale-to-fit |
||
| -unity-font | -unity-font: {resource} | {url} |
Yes | |
| -unity-font-style | -unity-font-style: normal | italic | bold | bold-and-italic |
||
| -unity-overflow-clip-box | -unity-overflow-clip-box: padding-box | content-box |
||
| -unity-slice-bottom | -unity-slice-bottom: {integer} |
||
| -unity-slice-left | -unity-slice-left: {integer} |
||
| -unity-slice-right | -unity-slice-right: {integer} |
||
| -unity-slice-top | -unity-slice-top: {integer} |
||
| -unity-text-align | -unity-text-align: upper-left | middle-left | lower-left | upper-center | middle-center | lower-center | upper-right | middle-right | lower-right |
Yes | |
| -unity-text-overflow-position | -unity-text-overflow-position: start | middle | end |
||
| visibility | visibility: visible | hidden |
Yes | |
| white-space | white-space: normal | nowrap |
Yes | |
| width | width: {length} | {percentage} | auto |