Back to Devexpress

DxRadioGroup<TData, TValue>.ItemLabelWrapMode Property

blazor-devexpress-dot-blazor-dot-dxradiogroup-2-0bc9a003.md

latest2.1 KB
Original Source

DxRadioGroup<TData, TValue>.ItemLabelWrapMode Property

Specifies how item labels are wrapped.

Namespace : DevExpress.Blazor

Assembly : DevExpress.Blazor.v25.2.dll

NuGet Package : DevExpress.Blazor

Declaration

csharp
[DefaultValue(LabelWrapMode.WordWrap)]
[Parameter]
public LabelWrapMode ItemLabelWrapMode { get; set; }

Property Value

TypeDefaultDescription
LabelWrapModeWordWrap

A LabelWrapMode enumeration value.

|

Available values:

NameDescription
WordWrap

The label is divided into multiple lines to keep text within the target area.

| | NoWrap |

The label is displayed in full.

| | Ellipsis |

The label is cropped to fit into a container and has an end ellipsis.

|

Remarks

The Radio Group component consists of the clickable circles and labels. If the labels are too long to fit the parent component, you can wrap or crop the labels. To do this, use the ItemLabelWrapMode property.

The following example applies the Ellipsis label wrap mode:

razor
<div class="container">
    <DxRadioGroup Items="@Values"
                  @bind-Value="@Value"
                  ItemLabelWrapMode="LabelWrapMode.Ellipsis">
        <p><strong>@Value</strong></p>
    </DxRadioGroup>
</div>

@code {
    string Value { get; set; } = "Parking camera";
    IEnumerable<string> Values = new[] { "Parking camera", "Heated seats", "Air conditioning" };
}
css
.container {
    width: 120px; 
    border: 1px dashed black;
}

See Also

DxRadioGroup<TData, TValue> Class

DxRadioGroup<TData, TValue> Members

DevExpress.Blazor Namespace