Card#
#
See also
Cards contain content and actions about a single subject.
KivyMD provides the following card classes for use:
Note
MDCard
inherited from
BoxLayout
. You can use all parameters and
attributes of the BoxLayout
class in the
MDCard
class.
MDCard#
There are three types of cards: elevated, filled, and outlined:
Elevated card
Filled card
Outlined card
Example#
from kivy.lang import Builder
from kivy.properties import StringProperty
from kivymd.app import MDApp
from kivymd.uix.card import MDCard
KV = '''
<MyCard>
padding: "4dp"
size_hint: None, None
size: "240dp", "100dp"
MDRelativeLayout:
MDIconButton:
icon: "dots-vertical"
pos_hint: {"top": 1, "right": 1}
MDLabel:
text: root.text
adaptive_size: True
color: "grey"
pos: "12dp", "12dp"
bold: True
MDScreen:
theme_bg_color: "Custom"
md_bg_color: self.theme_cls.backgroundColor
MDBoxLayout:
id: box
adaptive_size: True
spacing: "12dp"
pos_hint: {"center_x": .5, "center_y": .5}
'''
class MyCard(MDCard):
'''Implements a material card.'''
text = StringProperty()
class Example(MDApp):
def build(self):
return Builder.load_string(KV)
def on_start(self):
super().on_start()
for style in ("elevated", "filled", "outlined"):
self.root.ids.box.add_widget(
MyCard(style=style, text=style.capitalize())
)
Example().run()
from kivymd.app import MDApp
from kivymd.uix.boxlayout import MDBoxLayout
from kivymd.uix.button import MDIconButton
from kivymd.uix.card import MDCard
from kivymd.uix.label import MDLabel
from kivymd.uix.relativelayout import MDRelativeLayout
from kivymd.uix.screen import MDScreen
class MyCard(MDCard):
'''Implements a material card.'''
class Example(MDApp):
def build(self):
return (
MDScreen(
MDBoxLayout(
id="box",
adaptive_size=True,
spacing="12dp",
pos_hint={"center_x": 0.5, "center_y": 0.5},
),
theme_bg_color="Custom",
md_bg_color=self.theme_cls.backgroundColor,
)
)
def on_start(self):
super().on_start()
for style in ("elevated", "filled", "outlined"):
self.root.ids.box.add_widget(
MyCard(
MDRelativeLayout(
MDIconButton(
icon="dots-vertical",
pos_hint={"top": 1, "right": 1}
),
MDLabel(
text=style.capitalize(),
adaptive_size=True,
pos=("12dp", "12dp"),
),
),
style=style,
padding="4dp",
size_hint=(None, None),
size=("240dp", "100dp"),
ripple_behavior=True,
)
)
Example().run()
Elevated#
MDCard
style: "elevated"
Filled#
MDCard
style: "filled"
Outlined#
MDCard
style: "outlined"
Customization of card#
from kivy.lang import Builder
from kivymd.app import MDApp
KV = '''
MDScreen:
theme_bg_color: "Custom"
md_bg_color: self.theme_cls.backgroundColor
MDCard:
style: "elevated"
pos_hint: {"center_x": .5, "center_y": .5}
padding: "4dp"
size_hint: None, None
size: "240dp", "100dp"
# Sets custom properties.
theme_shadow_color: "Custom"
shadow_color: "green"
theme_bg_color: "Custom"
md_bg_color: "white"
md_bg_color_disabled: "grey"
theme_shadow_offset: "Custom"
shadow_offset: (1, -2)
theme_shadow_softness: "Custom"
shadow_softness: 1
theme_elevation_level: "Custom"
elevation_level: 2
MDRelativeLayout:
MDIconButton:
icon: "dots-vertical"
pos_hint: {"top": 1, "right": 1}
MDLabel:
text: "Elevated"
adaptive_size: True
color: "grey"
pos: "12dp", "12dp"
bold: True
'''
class Example(MDApp):
def build(self):
self.theme_cls.primary_palette = "Green"
return Builder.load_string(KV)
Example().run()
MDCardSwipe#
To create a card with swipe-to-delete behavior, you must create a new class
that inherits from the MDCardSwipe
class:
<SwipeToDeleteItem>
size_hint_y: None
height: content.height
MDCardSwipeLayerBox:
MDCardSwipeFrontBox:
OneLineListItem:
id: content
text: root.text
_no_ripple_effect: True
class SwipeToDeleteItem(MDCardSwipe):
text = StringProperty()
Example#
from kivy.lang import Builder
from kivy.properties import StringProperty
from kivymd.app import MDApp
from kivymd.uix.card import MDCardSwipe
KV = '''
<SwipeToDeleteItem>:
size_hint_y: None
height: content.height
MDCardSwipeLayerBox:
padding: "8dp"
MDIconButton:
icon: "trash-can"
pos_hint: {"center_y": .5}
on_release: app.remove_item(root)
MDCardSwipeFrontBox:
OneLineListItem:
id: content
text: root.text
_no_ripple_effect: True
MDScreen:
MDScrollView:
MDList:
id: md_list
padding: 0
'''
class SwipeToDeleteItem(MDCardSwipe):
text = StringProperty()
class Example(MDApp):
def __init__(self, **kwargs):
super().__init__(**kwargs)
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
self.screen = Builder.load_string(KV)
def build(self):
return self.screen
def remove_item(self, instance):
self.screen.ids.md_list.remove_widget(instance)
def on_start(self):
super().on_start()
for i in range(20):
self.screen.ids.md_list.add_widget(
SwipeToDeleteItem(text=f"One-line item {i}")
)
Example().run()
from kivymd.app import MDApp
from kivymd.uix.card import (
MDCardSwipe, MDCardSwipeLayerBox, MDCardSwipeFrontBox
)
from kivymd.uix.list import MDList, OneLineListItem
from kivymd.uix.screen import MDScreen
from kivymd.uix.scrollview import MDScrollView
class Example(MDApp):
def build(self):
self.theme_cls.theme_style = "Dark"
self.theme_cls.primary_palette = "Orange"
return (
MDScreen(
MDScrollView(
MDList(
id="md_list",
padding=0,
),
id="scroll",
scroll_timeout=100,
),
)
)
def on_start(self):
'''Creates a list of cards.'''
super().on_start()
for i in range(20):
self.root.ids.scroll.ids.md_list.add_widget(
MDCardSwipe(
MDCardSwipeLayerBox(),
MDCardSwipeFrontBox(
OneLineListItem(
id="content",
text=f"One-line item {i}",
_no_ripple_effect=True,
)
),
size_hint_y=None,
height="48dp",
)
)
Example().run()
Binding a swipe to one of the sides of the screen#
<SwipeToDeleteItem>
# By default, the parameter is "left"
anchor: "right"
Note
You cannot use the left and right swipe at the same time.
Swipe behavior#
<SwipeToDeleteItem>
# By default, the parameter is "hand"
type_swipe: "hand" # "auto"
Removing an item using the type_swipe = "auto"
parameter#
The map provides the MDCardSwipe.on_swipe_complete
event.
You can use this event to remove items from a list:
<SwipeToDeleteItem>:
on_swipe_complete: app.on_swipe_complete(root)
.. code-block:: python
MDCardSwipe(
...
on_swipe_complete=self.on_swipe_complete,
)
def on_swipe_complete(self, instance):
self.root.ids.md_list.remove_widget(instance)
def on_swipe_complete(self, instance):
self.root.ids.box.ids.scroll.ids.md_list.remove_widget(instance)
Add content to the bottom layer of the card#
To add content to the bottom layer of the card,
use the MDCardSwipeLayerBox
class.
<SwipeToDeleteItem>:
MDCardSwipeLayerBox:
padding: "8dp"
MDIconButton:
icon: "trash-can"
pos_hint: {"center_y": .5}
on_release: app.remove_item(root)
API - kivymd.uix.card.card
#
- class kivymd.uix.card.card.MDCard(*args, **kwargs)#
Card class.
For more information, see in the
DeclarativeBehavior
andMDAdaptiveWidget
andThemableBehavior
andBackgroundColorBehavior
andCommonElevationBehavior
andRectangularRippleBehavior
andStateLayerBehavior
andButtonBehavior
andBoxLayout
and classes documentation.- ripple_behavior#
Use ripple effect for card.
ripple_behavior
is aBooleanProperty
and defaults to False.
- radius#
Card radius by default.
New in version 1.0.0.
radius
is anVariableListProperty
and defaults to [dp(16), dp(16), dp(16), dp(16)].
- style#
Card type.
New in version 1.0.0.
Available options are: ‘filled’, ‘elevated’, ‘outlined’.
style
is anOptionProperty
and defaults to None.
- md_bg_color_disabled#
The background color in (r, g, b, a) or string format of the card when the card is disabled.
md_bg_color_disabled
is aColorProperty
and defaults to None.
- on_release(*args) None #
Fired when the button is released (i.e. the touch/click that pressed the button goes away).
- class kivymd.uix.card.card.MDCardSwipe(*args, **kwargs)#
Card swipe class.
For more information, see in the
MDRelativeLayout
class documentation.- Events:
on_swipe_complete
Fired when a swipe of card is completed.
- open_progress#
Percent of visible part of side panel. The percent is specified as a floating point number in the range 0-1. 0.0 if panel is closed and 1.0 if panel is opened.
open_progress
is aNumericProperty
and defaults to 0.0.
- opening_transition#
The name of the animation transition type to use when animating to the
state
‘opened’.opening_transition
is aStringProperty
and defaults to ‘out_cubic’.
- closing_transition#
The name of the animation transition type to use when animating to the
state
‘closed’.closing_transition
is aStringProperty
and defaults to ‘out_sine’.
- closing_interval#
Interval for closing the front layer.
New in version 1.1.0.
closing_interval
is aNumericProperty
and defaults to 0.
- anchor#
Anchoring screen edge for card. Available options are: ‘left’, ‘right’.
anchor
is aOptionProperty
and defaults to left.
- swipe_distance#
The distance of the swipe with which the movement of navigation drawer begins.
swipe_distance
is aNumericProperty
and defaults to 50.
- opening_time#
The time taken for the card to slide to the
state
‘open’.opening_time
is aNumericProperty
and defaults to 0.2.
- state#
Detailed state. Sets before
state
. Bind tostate
instead ofstatus
. Available options are: ‘closed’, ‘opened’.status
is aOptionProperty
and defaults to ‘closed’.
- max_swipe_x#
If, after the events of
on_touch_up
card position exceeds this value - will automatically execute the methodopen_card
, and if not - will automatically beclose_card
method.max_swipe_x
is aNumericProperty
and defaults to 0.3.
- max_opened_x#
The value of the position the card shifts to when
type_swipe
s set to ‘hand’.max_opened_x
is aNumericProperty
and defaults to 100dp.
- type_swipe#
Type of card opening when swipe. Shift the card to the edge or to a set position
max_opened_x
. Available options are: ‘auto’, ‘hand’.type_swipe
is aOptionProperty
and defaults to auto.
- on_swipe_complete(*args)#
Fired when a swipe of card is completed.
- on_anchor(instance_swipe_to_delete_item, anchor_value: str) None #
Fired when the value of
anchor
changes.
- on_open_progress(instance_swipe_to_delete_item, progress_value: float) None #
Fired when the value of
open_progress
changes.
- on_touch_move(touch)#
Receive a touch move event. The touch is in parent coordinates.
See
on_touch_down()
for more information.
- on_touch_up(touch)#
Receive a touch up event. The touch is in parent coordinates.
See
on_touch_down()
for more information.
- on_touch_down(touch)#
Receive a touch down event.
- Parameters:
- touch:
MotionEvent
class Touch received. The touch is in parent coordinates. See
relativelayout
for a discussion on coordinate systems.
- touch:
- Returns:
bool If True, the dispatching of the touch event will stop. If False, the event will continue to be dispatched to the rest of the widget tree.
- add_widget(widget, index=0, canvas=None)#
Add a new widget as a child of this widget.
- Parameters:
- widget:
Widget
Widget to add to our list of children.
- index: int, defaults to 0
Index to insert the widget in the list. Notice that the default of 0 means the widget is inserted at the beginning of the list and will thus be drawn on top of other sibling widgets. For a full discussion of the index and widget hierarchy, please see the Widgets Programming Guide.
New in version 1.0.5.
- canvas: str, defaults to None
Canvas to add widget’s canvas to. Can be ‘before’, ‘after’ or None for the default canvas.
New in version 1.9.0.
- widget:
>>> from kivy.uix.button import Button >>> from kivy.uix.slider import Slider >>> root = Widget() >>> root.add_widget(Button()) >>> slider = Slider() >>> root.add_widget(slider)
- class kivymd.uix.card.card.MDCardSwipeFrontBox(*args, **kwargs)#
Card swipe front box.
For more information, see in the
MDCard
class documentation.
- class kivymd.uix.card.card.MDCardSwipeLayerBox(*args, **kwargs)#
Card swipe back box.
For more information, see in the
MDBoxLayout
class documentation.