Modes
Modes display selected items.
DEFAULT
SIMPLE
BADGE
mode="SIMPLE"
Type | Default |
---|---|
string | SIMPLE |
note
Single item pickers won't be affected by the mode
property.
Change the default mode
You can change the default mode of the package globally.
DropDownPicker.setMode("BADGE");
Badge Mode Props
showBadgeDot
Shows dots in the badges.
showBadgeDot={true}
Type | Default |
---|---|
bool | true |
renderBadgeItem
Renders the selected items.
renderBadgeItem={(props) => <Badge {...props} />}
note
You need to move it to an independent component otherwise the items will be re-rendered.
- See: RenderBadgeItem.js
Type |
---|
function |
Styling
badgeStyle
badgeStyle={{
padding: 5
}}
badgeTextStyle
badgeTextStyle={{
fontStyle: "italic"
}}
badgeDotStyle
badgeDotStyle={{
borderRadius: 2
}}
badgeSeparatorStyle
badgeSeparatorStyle={{
width: 30
}}
badgeColors
Gives background colors to badges based on the value
.
badgeColors={["red", "blue", "orange"]}
Type |
---|
object, string |
badgeDotColors
Gives background colors to badge dots based on the value
.
badgeDotColors={["red", "blue", "orange"]}
Type |
---|
object, string |