Chip¶
Chips are compact, interactive elements used for actions, filtering, or input. They support leading icons, trailing close buttons, and toggle state.
Variants¶
| Class | Use case |
|---|---|
MorphChip |
Basic action chip |
MorphFilterChip |
Toggle chip for filter selection |
MorphInputChip |
Represents an input token with a close button |
Usage¶
from morphui.uix.chip import MorphChip, MorphFilterChip
# Action chip
chip = MorphChip(text="Export", on_release=self.export)
# Filter chip (toggleable)
chip = MorphFilterChip(text="In Stock", on_release=self.filter)
# With leading icon
chip = MorphChip(text="Download", leading_icon='download')
morphui.uix.chip
¶
Chip widgets for MorphUI.
Chips are compact interactive elements that represent actions, filter criteria, or user-entered input tokens. All chip variants support leading icons, toggling, and full MorphUI theming.
| CLASS | DESCRIPTION |
|---|---|
MorphChip |
Basic action chip. |
MorphFilterChip |
Toggleable filter chip for multi-select filtering scenarios. |
MorphInputChip |
Input token chip with a trailing close/remove button. |
MorphChip(**kwargs)
¶
Bases: MorphHoverBehavior, MorphRippleBehavior, MorphButtonBehavior, MorphColorThemeBehavior, MorphRoundSidesBehavior, MorphDelegatedThemeBehavior, MorphContentLayerBehavior, MorphInteractionLayerBehavior, MorphSurfaceLayerBehavior, MorphElevationBehavior, MorphIconLabelIconContainer
Morph Chip component.
A chip is a compact element that represents an input, attribute, or action. Chips can contain a leading icon, text, and a trailing icon. They are typically used for filtering, assisting, input and suggestions.
Use the leading_icon and trailing_icon properties to add
icons to the chip. The label_text property is used to set the text
of the chip.
Inherits from :class:~morphui.uix.container.MorphIconLabelIconContainer
which provides the base layout structure and child widget management.
Example
````python from kivy.clock import Clock from morphui.app import MorphApp from morphui.uix.chip import MorphChip from morphui.uix.chip import MorphInputChip from morphui.uix.chip import MorphFilterChip from morphui.uix.floatlayout import MorphFloatLayout
class MyApp(MorphApp): def build(self) -> MorphFloatLayout: self.theme_manager.seed_color = 'morphui_teal' self.theme_manager.switch_to_dark() self.layout = MorphFloatLayout( MorphChip( identity='chip', normal_leading_icon='language-python', normal_trailing_icon='close', label_text='Python Chip', pos_hint={'center_x': 0.5, 'center_y': 0.6}, theme_color_bindings=dict( normal_content_color='primary_color', normal_surface_color='transparent_color', normal_border_color='outline_variant_color',),), MorphFilterChip( identity='filter', label_text='Filter Chip', pos_hint={'center_x': 0.5, 'center_y': 0.5}), MorphInputChip( identity='input_chip', label_text='Input Chip', pos_hint={'center_x': 0.5, 'center_y': 0.4},), theme_color_bindings={ 'normal_surface_color': 'surface_container_low_color',}) self.input_chip = self.layout.identities.input_chip self.input_chip.bind(on_trailing_widget_release=self.re_add_chip) return self.layout
def re_add_chip(self, dt: float) -> None:
def _re_add(dt):
if not self.input_chip.parent:
self.layout.add_widget(self.input_chip)
Clock.schedule_once(_re_add, 2)
if name == 'main': MyApp().run()
default_child_classes = {'leading_widget': MorphChipLeadingIconLabel, 'label_widget': MorphChipTextLabel, 'trailing_widget': MorphChipTrailingIconButton}
class-attribute
instance-attribute
¶
Default child widgets for the chip.
This dictionary maps widget identities to their default classes.
default_config = dict(theme_color_bindings=(dict(normal_surface_color='transparent_color', normal_content_color='content_surface_color', normal_border_color='outline_variant_color')), leading_scale_enabled=True, trailing_scale_enabled=True, orientation='horizontal', auto_size=True, padding=[dp(8), dp(4)], spacing=(dp(4)), radius=(dp(8)), round_sides=False)
class-attribute
instance-attribute
¶
Default configuration for the :class:MorphChip component.
MorphFilterChip(**kwargs)
¶
Bases: MorphToggleButtonBehavior, MorphChip
Morph Filter Chip component.
A filter chip represents a filter option that can be toggled on or off. It is used to apply filters to content or data sets.
Example
````python from morphui.app import MorphApp from morphui.uix.chip import MorphFilterChip from morphui.uix.floatlayout import MorphFloatLayout
class MyApp(MorphApp): def build(self) -> MorphFloatLayout: self.theme_manager.switch_to_dark() return MorphFloatLayout( MorphFilterChip( identity='my_widget', leading_icon='filter',), normal_surface_color=self.theme_manager.surface_color,)
if name == 'main': MyApp().run()
default_config = MorphChip.default_config.copy() | dict(theme_color_bindings=(dict(normal_surface_color='transparent_color', normal_content_color='content_surface_color', normal_border_color='outline_variant_color', active_surface_color='secondary_container_color', active_content_color='content_secondary_container_color', active_border_color='transparent_color', disabled_surface_color='transparent_color', disabled_content_color='outline_color')), normal_leading_icon='', active_leading_icon='check')
class-attribute
instance-attribute
¶
Default configuration for the :class:MorphFilterChip component.
MorphInputChip(**kwargs)
¶
Bases: MorphChip
Morph Input Chip component.
An input chip represents a user input or selection that can be removed. It typically includes a trailing icon button for removal.
Example
````python from morphui.app import MorphApp from morphui.uix.chip import MorphInputChip from morphui.uix.floatlayout import MorphFloatLayout
class MyApp(MorphApp): def build(self) -> MorphFloatLayout: self.theme_manager.switch_to_dark() return MorphFloatLayout( MorphInputChip( identity='my_widget', label_text='Input Chip', trailing_icon='close',), normal_surface_color=self.theme_manager.surface_color,) if name == 'main': MyApp().run()
default_config = MorphChip.default_config.copy() | dict(normal_trailing_icon='close')
class-attribute
instance-attribute
¶
Default configuration for the :class:MorphInputChip component.
on_trailing_widget_press(*args)
¶
Handle the press event of the trailing icon button.
This method is called when the trailing icon button is pressed. It can be used to provide visual feedback or initiate actions before the chip is removed.
on_trailing_widget_release(*args)
¶
Handle the release event of the trailing icon button.
This method is called when the trailing icon button is released. It removes the chip from its parent layout.