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.
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:
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 thepaddingto2pxand8px.medium— Sets thepaddingto4pxand8px.large— Sets thepaddingto6pxand8px.
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:
-
none— Sets noborder radius. -
small— Sets theborder radiusto1px. -
medium— Sets theborder radiusto2px.
large— Sets theborder radiusto4px.
full— Sets theborder radiusto9999px.
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— Sets abackgroundcolor andsolid borders.flat— Setstransparent background and bordersin default state, andbackground colorin focused state.outline— Sets atransparent backgroundandsolid borders.
The following example demonstrates the usage of each fillMode option: