Chip
See also Chips are compact elements that represent an input, attribute, or action. Long press on the chip, it will be marked.
When you click on the marked chip, the mark will be removed: Selecting a single choice chip automatically deselects all other chips in the set. Only one chip will be selected.
Usage
from kivy.lang import Builder
from kivymd.app import MDApp
KV = '''
MDScreen:
MDChip:
text: "Portland"
pos_hint: {"center_x": .5, "center_y": .5}
on_release: app.on_release_chip(self)
'''
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
def on_release_chip(self, instance_check):
print(instance_check)
Test().run()
Use with right icon
MDChip:
text: "Portland"
icon_right: "close-circle-outline"
Use with left icon
MDChip:
text: "Portland"
icon_left: "map-marker"
Use with custom left icon
MDChip:
text: "Portland"
icon_left: "avatar.png"
Use with left and right icon
MDChip:
text: "Portland"
icon_left: "avatar.png"
icon_right: "close-circle-outline"
Use with outline
MDChip:
text: "Portland"
icon_left: "avatar.png"
icon_right: "close-circle-outline"
line_color: app.theme_cls.disabled_hint_text_color
Use with custom color
MDChip:
text: "Portland"
icon_left: "avatar.png"
icon_right: "close-circle-outline"
line_color: app.theme_cls.disabled_hint_text_color
md_bg_color: 1, 0, 0, .5
Use with elevation
MDChip:
text: "Portland"
icon_left: "avatar.png"
icon_right: "close-circle-outline"
line_color: app.theme_cls.disabled_hint_text_color
md_bg_color: 1, 0, 0, .5
elevation: 12
Behavior
Examples
Multiple choose
from kivy.animation import Animation
from kivy.lang import Builder
from kivymd.uix.screen import MDScreen
from kivymd.uix.chip import MDChip
from kivymd.app import MDApp
KV = '''
<MyScreen>
MDBoxLayout:
orientation: "vertical"
adaptive_size: True
spacing: "12dp"
padding: "56dp"
pos_hint: {"center_x": .5, "center_y": .5}
MDLabel:
text: "Multiple choice"
bold: True
font_style: "H5"
adaptive_size: True
MDBoxLayout:
id: chip_box
adaptive_size: True
spacing: "8dp"
MyChip:
text: "Elevator"
on_press: if self.active: root.removes_marks_all_chips()
MyChip:
text: "Washer / Dryer"
on_press: if self.active: root.removes_marks_all_chips()
MyChip:
text: "Fireplace"
on_press: if self.active: root.removes_marks_all_chips()
ScreenManager:
MyScreen:
'''
class MyChip(MDChip):
icon_check_color = (0, 0, 0, 1)
text_color = (0, 0, 0, 0.5)
_no_ripple_effect = True
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.bind(active=self.set_chip_bg_color)
self.bind(active=self.set_chip_text_color)
def set_chip_bg_color(self, instance_chip, active_value: int):
'''
Will be called every time the chip is activated/deactivated.
Sets the background color of the chip.
'''
self.md_bg_color = (
(0, 0, 0, 0.4)
if active_value
else (
self.theme_cls.bg_darkest
if self.theme_cls.theme_style == "Light"
else (
self.theme_cls.bg_light
if not self.disabled
else self.theme_cls.disabled_hint_text_color
)
)
)
def set_chip_text_color(self, instance_chip, active_value: int):
Animation(
color=(0, 0, 0, 1) if active_value else (0, 0, 0, 0.5), d=0.2
).start(self.ids.label)
class MyScreen(MDScreen):
def removes_marks_all_chips(self):
for instance_chip in self.ids.chip_box.children:
if instance_chip.active:
instance_chip.active = False
class Test(MDApp):
def build(self):
return Builder.load_string(KV)
Test().run()
Only choose
KV = '''
<MyScreen>
[...]
MDBoxLayout:
id: chip_box
adaptive_size: True
spacing: "8dp"
MyChip:
text: "Elevator"
on_active: if self.active: root.removes_marks_all_chips(self)
MyChip:
text: "Washer / Dryer"
on_active: if self.active: root.removes_marks_all_chips(self)
MyChip:
text: "Fireplace"
on_active: if self.active: root.removes_marks_all_chips(self)
[...]
'''
class MyScreen(MDScreen):
def removes_marks_all_chips(self, selected_instance_chip):
for instance_chip in self.ids.chip_box.children:
if instance_chip != selected_instance_chip:
instance_chip.active = False
API - kivymd.uix.chip.chip
- class kivymd.uix.chip.chip.MDChip(**kwargs)
Class implements a rectangular ripple effect.
- text
Chip text.
text
is anStringProperty
and defaults to ‘’.
- icon
Chip icon.
Deprecated since version 1.0.0: Use
icon_right
andicon_left
instead.icon
is anStringProperty
and defaults to ‘checkbox-blank-circle’.
- icon_left
Chip left icon.
New in version 1.0.0.
icon_left
is anStringProperty
and defaults to ‘’.
- icon_right
Chip right icon.
New in version 1.0.0.
icon_right
is anStringProperty
and defaults to ‘’.
- color
Chip color in
rgba
format.Deprecated since version 1.0.0.
color
is anColorProperty
and defaults to None.
- text_color
Chip’s text color in
rgba
format.text_color
is anColorProperty
and defaults to None.
- icon_color
Chip’s icon color in
rgba
format.Deprecated since version 1.0.0: Use
icon_right_color
andicon_left_color
instead.icon_color
is anColorProperty
and defaults to None.
- icon_right_color
Chip’s right icon color in
rgba
format.New in version 1.0.0.
icon_right_color
is anColorProperty
and defaults to None.
- icon_left_color
Chip’s left icon color in
rgba
format.New in version 1.0.0.
icon_left_color
is anColorProperty
and defaults to None.
- icon_check_color
Chip’s check icon color in
rgba
format.New in version 1.0.0.
icon_check_color
is anColorProperty
and defaults to None.
- check
If True, a checkmark is added to the left when touch to the chip.
Deprecated since version 1.0.0.
check
is anBooleanProperty
and defaults to False.
- selected_chip_color
The color of the chip that is currently selected in
rgba
format.Deprecated since version 1.0.0.
selected_chip_color
is anColorProperty
and defaults to None.
- active
Whether the check is marked or not.
New in version 1.0.0.
active
is anBooleanProperty
and defaults to False.
- on_long_touch(self, *args)
Called when the widget is pressed for a long time.
- on_press(self, *args)