Chip#

See also

Material Design spec, Chips

Chips are compact elements that represent an input, attribute, or action.

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chips.png

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()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/ordinary-chip.png

Use with right icon#

MDChip:
    text: "Portland"
    icon_right: "close-circle-outline"
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-with-right-icon.png

Use with left icon#

MDChip:
    text: "Portland"
    icon_left: "map-marker"
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-with-left-icon.png

Use with custom left icon#

MDChip:
    text: "Portland"
    icon_left: "avatar.png"
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-with-custom-left-icon.png

Use with left and right icon#

MDChip:
    text: "Portland"
    icon_left: "avatar.png"
    icon_right: "close-circle-outline"
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-with-left-right-icon.png

Use with outline#

MDChip:
    text: "Portland"
    icon_left: "avatar.png"
    icon_right: "close-circle-outline"
    line_color: app.theme_cls.disabled_hint_text_color
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-with-outline.png

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
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-with-custom-color.png

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
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-with-elevation.png

Behavior#

Long press on the chip, it will be marked. When you click on the marked chip, the mark will be removed:

https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-activate.gif

Examples#

Multiple choose#

Selecting a single choice chip automatically deselects all other chips in the set.

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()
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-multiple-choose.gif

Only choose#

Only one chip will be selected.

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
https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/chip-only-choose.gif

API - kivymd.uix.chip.chip#

class kivymd.uix.chip.chip.MDChip(**kwargs)#

Class implements a rectangular ripple effect.

text#

Chip text.

text is an StringProperty and defaults to ‘’.

icon_left#

Chip left icon.

New in version 1.0.0.

icon_left is an StringProperty and defaults to ‘’.

icon_right#

Chip right icon.

New in version 1.0.0.

icon_right is an StringProperty and defaults to ‘’.

text_color#

Chip’s text color in rgba format.

text_color is an ColorProperty 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 an ColorProperty 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 an ColorProperty 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 an ColorProperty and defaults to None.

active#

Whether the check is marked or not.

New in version 1.0.0.

active is an BooleanProperty and defaults to False.

on_long_touch(self, *args)#

Called when the widget is pressed for a long time.

on_active(self, instance_check, active_value: bool)#
do_animation_check(self, md_bg_color: list, scale_value: int)#
on_press(self, *args)#