Utilities

Width

The Width utility provides a precise way to define the width of UI elements, ensuring consistent and predictable layout behavior.

Utility Class
USS Properties
w-0
width: 0px;
w-1
width: 4px;
w-2
width: 8px;
w-3
width: 12px;
w-4
width: 16px;
w-5
width: 20px;
w-6
width: 24px;
w-7
width: 28px;
w-8
width: 32px;
w-9
width: 36px;
w-10
width: 40px;
w-11
width: 44px;
w-12
width: 48px;
w-14
width: 56px;
w-16
width: 64px;
w-20
width: 80px;
w-24
width: 96px;
w-28
width: 112px;
w-32
width: 128px;
w-36
width: 144px;
w-40
width: 160px;
w-44
width: 176px;
w-48
width: 192px;
w-52
width: 208px;
w-56
width: 224px;
w-60
width: 240px;
w-64
width: 256px;
w-72
width: 288px;
w-80
width: 320px;
w-96
width: 384px;
w-px
width: 1px;
w-0point5
width: 2px;
w-1point5
width: 6px;
w-2point5
width: 10px;
w-3point5
width: 14px;
w-1of2
width: 50%;
w-1of3
width: 33.333333%;
w-2of3
width: 66.666667%;
w-1of4
width: 25%;
w-2of4
width: 50%;
w-3of4
width: 75%;
w-1of5
width: 20%;
w-2of5
width: 40%;
w-3of5
width: 60%;
w-4of5
width: 80%;
w-1of6
width: 16.666667%;
w-2of6
width: 33.333333%;
w-3of6
width: 50%;
w-4of6
width: 66.666667%;
w-5of6
width: 83.333333%;
w-1of12
width: 8.333333%;
w-2of12
width: 16.666667%;
w-3of12
width: 25%;
w-4of12
width: 33.333333%;
w-5of12
width: 41.666667%;
w-6of12
width: 50%;
w-7of12
width: 58.333333%;
w-8of12
width: 66.666667%;
w-9of12
width: 75%;
w-10of12
width: 83.333333%;
w-11of12
width: 91.666667%;
w-full
width: 100%;

Usage Example in UXML

Fixed Width

To set a fixed width, use the w-{size} class where {size} corresponds to the width you want to apply. For example, w-24 sets the width to 96px.

<ui:VisualElement class="w-24">
    <!-- Element with a fixed width of 96px -->
</ui:VisualElement>

Proportional Width

For proportional widths, use classes like w-1of2 to set the width relative to the parent container. For example, w-1of2 sets the width to 50% of its parent.

<ui:VisualElement class="w-1of2">
    <!-- Element with a width of 50% of the parent container -->
</ui:VisualElement>

Full Width

The w-full class stretches an element to the full width of its parent container.

<ui:VisualElement class="w-full">
    <!-- Element stretched to the full width of the parent container -->
</ui:VisualElement>

Customize

Modifier Variations

Modifier Variations

You can customize which modifier variations of the Width utility are generated, such as pseudo-classes (e.g., hover, focus) and custom modifiers.

By default, no modifier variations are defined for the Width utility.

By fine-tuning the utility variations, you maintain control over your stylesheet's size and complexity, ensuring that only necessary styles are included. To update these values:

  1. Open the Theme Config Asset: Find the asset within your Unity project.
  2. Navigate to the 'Utilities' Section: Locate the Width utility.
  3. Adjust Modifier Variations: Select which modifiers you want to be generated for the utility. Keep in mind that the order of the modifiers will affect the order and specificity of the generated USS classes.

Class Tags and Properties

Class Tags and Properties

The Width utility generates classes based on predefined tags and their associated USS properties. While we recommend keeping these defaults for consistency and ease of reference in our documentation, you have the option to customize them to suit your project's specific needs.

These values are prepended to the defined values in this format tag-{value}. If a tag is empty, the generated class will simply be the value by itself.

Here are the default tags and the USS properties they set for the Width utility:

  • w : width

To customize these tags and properties, you can edit the Tag Property Map field for the Width utility in the Theme Config asset. This allows you to define new tags or modify existing ones, thus tailoring the generated classes to your preferences.

Extending Core Fields

The Width utility uses values from the following fields from the Core section of the Theme Config asset:

  • Spacing
These fields are used in addition to any custom values defined for the utility. If the same key exists in both the utility and core configurations, the utility's values will override those from the core.

To customize or define these extended fields:

  1. Open the Theme Config Asset: Locate the asset within your Unity project.
  2. Navigate to the 'Utilities' Section: Find the Width utility.
  3. Customize Extend Fields: Modify or add fields in the Extend Fields array to change the core configuration values that are extended. You'll only be able to extend fields of the same type.

Disable Utility

The Width utility is enabled by default. You can disable it by unchecking the Enabled option in the Theme Config asset. This will prevent the generation of the utility's styles.

Previous
Whitespace
Next
Word Spacing