Appearance

The DropDownTree provides a predefined set of appearance options.

Apart from the default vision of the DropDownTree, these alternative styling options enable you to configure each individual aspect of the appearance of a DropDownTree.

• size
• rounded
• fillMode

The current article provides details about how the component changes when the different configurations of its properties are applied. Here are the sections you can directly access:

• DropDownTree Configurator demo
• DropDownTree Sizes
• DropDownTree Roundness
• DropDownTree Fill Mode

Configurator demo

The following example demonstrates configuring different aspects of a DropDownTree appearance through a configurator.

Size

The size of the DropDownTree is controlled through its size property. The values we can pass to the property are as follows:

• small — Sets the padding to 2px and 8px.
• medium(Default) — Sets the padding to 4px and 8px.
• large — Sets the padding to 6px and 8px.
• null — Passing null to the size property gives us the option to define a custom CSS class that sets the padding of the DropDownTree.

The following example demonstrates the usage of each size option:

Roundness

The roundness of the DropDownTree is controlled through its rounded property. The values we can pass to the property are as follows:

• small — Sets the border radius to 1px.
• medium(Default) — Sets the border radius to 2px.

• large — Sets the border radius to 4px.

• full — Sets the border radius to 9999px.
• null — Passing null to the rounded property gives us the option to define a custom CSS class that defines the border-radius of the DropDownTree.

The following example demonstrates the usage of each rounded option:

Fill Mode

The styling of the DropDownTree is controlled through its fillMode property. The values we can pass to the property are as follows:

• solid (Default) — Sets a background color and solid borders.
• flat — Sets transparent background and borders in default state, and background color in focused state.
• outline — Sets a transparent background and solid borders.
• null — Passing null to the fillMode property gives us the option to define a custom CSS class that defines the background and border of the DropDownTree.

The following example demonstrates the usage of each fillMode option:

Suggested Links

• API Reference of the DropDownTree
• DropDownTree size options
• DropDownTree rounded options
• DropDownTree fillMode options
• Creating Custom Styles with ThemeBuilder