CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/pypi-kivymd

Set of widgets for Kivy inspired by Google's Material Design

Pending
Overview
Eval results
Files

lists.mddocs/

Lists & Data Display

Comprehensive list components and data display widgets for presenting structured information. These components include various list item types, data tables, and specialized display widgets that follow Material Design guidelines for information hierarchy and visual organization.

Capabilities

List Container

Main container for organizing list items with Material Design styling.

class MDList:
    """
    Material Design list container.
    
    Container widget for organizing list items with consistent spacing
    and Material Design styling.
    """
    spacing: str | int  # Spacing between list items
    adaptive_height: bool  # Adapt height to content
    
    def add_widget(self, widget):
        """Add list item to the list."""

Single Line List Items

List items that display content in a single line with various configurations.

class OneLineListItem:
    """
    Single line list item with text only.
    
    Basic list item displaying only text content.
    """
    text: str  # Primary text content
    theme_text_color: str  # Text color theme
    divider: str  # Divider type: "Full", "Inset", None
    
class OneLineAvatarListItem:
    """
    Single line list item with avatar space.
    
    List item with space reserved for avatar on the left side.
    """
    text: str  # Primary text content
    theme_text_color: str  # Text color theme
    
class OneLineIconListItem:
    """
    Single line list item with left icon space.
    
    List item with space reserved for icon on the left side.
    """
    text: str  # Primary text content
    theme_text_color: str  # Text color theme
    
class OneLineRightIconListItem:
    """
    Single line list item with right icon space.
    
    List item with space reserved for icon on the right side.
    """
    text: str  # Primary text content
    theme_text_color: str  # Text color theme
    
class OneLineAvatarIconListItem:
    """
    Single line list item with both avatar and icon spaces.
    
    List item with spaces for both left avatar and right icon.
    """
    text: str  # Primary text content
    theme_text_color: str  # Text color theme

Two Line List Items

List items that display content across two lines with various configurations.

class TwoLineListItem:
    """
    Two line list item with primary and secondary text.
    
    List item displaying both primary and secondary text lines.
    """
    text: str  # Primary text content
    secondary_text: str  # Secondary text content
    theme_text_color: str  # Primary text color theme
    secondary_theme_text_color: str  # Secondary text color theme
    
class TwoLineAvatarListItem:
    """
    Two line list item with avatar space.
    
    Two line list item with space reserved for avatar on the left side.
    """
    text: str  # Primary text content  
    secondary_text: str  # Secondary text content
    
class TwoLineIconListItem:
    """
    Two line list item with left icon space.
    
    Two line list item with space reserved for icon on the left side.
    """
    text: str  # Primary text content
    secondary_text: str  # Secondary text content
    
class TwoLineRightIconListItem:
    """
    Two line list item with right icon space.
    
    Two line list item with space reserved for icon on the right side.
    """
    text: str  # Primary text content
    secondary_text: str  # Secondary text content
    
class TwoLineAvatarIconListItem:
    """
    Two line list item with both avatar and icon spaces.
    
    Two line list item with spaces for both left avatar and right icon.
    """
    text: str  # Primary text content
    secondary_text: str  # Secondary text content

Three Line List Items

List items that display content across three lines with various configurations.

class ThreeLineListItem:
    """
    Three line list item with primary and secondary text.
    
    List item displaying primary text and multi-line secondary text.
    """
    text: str  # Primary text content
    secondary_text: str  # Secondary text content (can span two lines)
    theme_text_color: str  # Primary text color theme
    secondary_theme_text_color: str  # Secondary text color theme
    
class ThreeLineAvatarListItem:
    """
    Three line list item with avatar space.
    
    Three line list item with space reserved for avatar on the left side.
    """
    text: str  # Primary text content
    secondary_text: str  # Secondary text content
    
class ThreeLineIconListItem:
    """
    Three line list item with left icon space.
    
    Three line list item with space reserved for icon on the left side.
    """
    text: str  # Primary text content
    secondary_text: str  # Secondary text content
    
class ThreeLineRightIconListItem:
    """
    Three line list item with right icon space.
    
    Three line list item with space reserved for icon on the right side.
    """
    text: str  # Primary text content
    secondary_text: str  # Secondary text content
    
class ThreeLineAvatarIconListItem:
    """
    Three line list item with both avatar and icon spaces.
    
    Three line list item with spaces for both left avatar and right icon.
    """
    text: str  # Primary text content
    secondary_text: str  # Secondary text content

List Item Components

Specialized components that can be added to list items for enhanced functionality.

class ILeftBody:
    """
    Interface for left body components in list items.
    
    Defines the interface for components placed in the left area of list items.
    """
    
class ILeftBodyTouch:
    """
    Interface for touchable left body components.
    
    Defines the interface for interactive components in the left area.
    """
    
class IRightBody:
    """
    Interface for right body components in list items.
    
    Defines the interface for components placed in the right area of list items.
    """
    
class IRightBodyTouch:
    """
    Interface for touchable right body components.
    
    Defines the interface for interactive components in the right area.
    """

# Left side components
class IconLeftWidget:
    """Icon widget for left side of list items."""
    icon: str  # Icon name from md_icons
    theme_icon_color: str  # Icon color theme
    
class IconLeftWidgetWithoutTouch:
    """Non-interactive icon widget for left side."""
    icon: str  # Icon name from md_icons
    theme_icon_color: str  # Icon color theme
    
class ImageLeftWidget:
    """Image widget for left side of list items."""
    source: str  # Image source path
    
class ImageLeftWidgetWithoutTouch:
    """Non-interactive image widget for left side."""
    source: str  # Image source path
    
class CheckboxLeftWidget:
    """Checkbox widget for left side of list items."""
    active: bool  # Checkbox state

# Right side components  
class IconRightWidget:
    """Icon widget for right side of list items."""
    icon: str  # Icon name from md_icons
    theme_icon_color: str  # Icon color theme
    
class IconRightWidgetWithoutTouch:
    """Non-interactive icon widget for right side."""
    icon: str  # Icon name from md_icons
    theme_icon_color: str  # Icon color theme
    
class ImageRightWidget:
    """Image widget for right side of list items."""
    source: str  # Image source path
    
class ImageRightWidgetWithoutTouch:
    """Non-interactive image widget for right side."""
    source: str  # Image source path

Data Tables

Comprehensive data table component for displaying structured tabular data.

class MDDataTable:
    """
    Material Design data table.
    
    Advanced table widget for displaying structured data with sorting,
    selection, and pagination capabilities.
    """
    # Data structure
    column_data: list  # Column definitions: [("Name", width), ...]
    row_data: list    # Row data: [("value1", "value2", ...), ...]
    
    # Table behavior
    sorted_on: str    # Column to sort by
    sorted_order: str # Sort order: "ASC" or "DSC"
    
    # Selection
    use_pagination: bool  # Enable pagination
    rows_num: int        # Number of rows per page
    check: bool          # Enable row selection checkboxes
    
    # Callbacks
    def on_row_press(self, instance_table, instance_row):
        """Called when row is pressed."""
        
    def on_check_press(self, instance_table, current_row):
        """Called when row checkbox is pressed."""

Base List Components

Foundation classes for list item implementations.

class BaseListItem:
    """
    Base class for all list items.
    
    Provides common functionality and styling for list items.
    """
    text: str  # Primary text
    text_color: list  # Text color
    font_style: str   # Font style
    divider: str      # Divider style
    _txt_left_pad: str  # Left text padding
    _txt_top_pad: str   # Top text padding
    _txt_bot_pad: str   # Bottom text padding
    _num_lines: int     # Number of text lines
    
    def on_release(self):
        """Called when list item is released."""

Usage Examples

Basic List

from kivymd.uix.list import MDList, OneLineListItem, TwoLineListItem
from kivymd.uix.scrollview import MDScrollView

# Create scrollable list
scroll = MDScrollView()
list_widget = MDList()

# Add single line items
for i in range(5):
    item = OneLineListItem(
        text=f"Item {i + 1}",
        on_release=lambda x, item_text=f"Item {i + 1}": print(f"Clicked: {item_text}")
    )
    list_widget.add_widget(item)

# Add two line items
for i in range(3):
    item = TwoLineListItem(
        text=f"Two Line Item {i + 1}",
        secondary_text="This is secondary text with additional information",
        on_release=lambda x, item_text=f"Two Line Item {i + 1}": print(f"Clicked: {item_text}")
    )
    list_widget.add_widget(item)

scroll.add_widget(list_widget)

List with Icons and Avatars

from kivymd.uix.list import (
    MDList, OneLineAvatarIconListItem, 
    IconLeftWidget, IconRightWidget
)

# Create list with icons
list_widget = MDList()

# Contact list example
contacts = [
    ("John Doe", "phone", "email"),
    ("Jane Smith", "phone", "message"),
    ("Bob Johnson", "phone", "video-call")
]

for name, left_icon, right_icon in contacts:
    item = OneLineAvatarIconListItem(
        text=name,
        on_release=lambda x, contact_name=name: print(f"Called {contact_name}")
    )
    
    # Add left icon (avatar placeholder)
    item.add_widget(IconLeftWidget(
        icon=left_icon,
        theme_icon_color="Primary"
    ))
    
    # Add right action icon
    item.add_widget(IconRightWidget(
        icon=right_icon,
        theme_icon_color="Primary"
    ))
    
    list_widget.add_widget(item)

Data Table

from kivymd.uix.datatables import MDDataTable
from kivy.metrics import dp

# Define table structure
data_table = MDDataTable(
    size_hint=(0.9, 0.6),
    pos_hint={"center_x": 0.5, "center_y": 0.5},
    
    # Column definitions: (name, width_in_dp)
    column_data=[
        ("Name", dp(60)),
        ("Age", dp(40)),
        ("City", dp(60)),
        ("Department", dp(80)),
    ],
    
    # Row data
    row_data=[
        ("John Doe", "25", "New York", "Engineering"),
        ("Jane Smith", "30", "San Francisco", "Design"),
        ("Bob Johnson", "28", "Seattle", "Marketing"),
        ("Alice Brown", "32", "Boston", "Sales"),
        ("Charlie Wilson", "27", "Austin", "Engineering"),
    ],
    
    # Table options
    sorted_on="Name",
    sorted_order="ASC",
    elevation=2,
    use_pagination=True,
    rows_num=3,
    check=True
)

# Handle row selection
def on_row_press(instance_table, instance_row):
    print(f"Row pressed: {instance_row.text}")

def on_check_press(instance_table, current_row):
    print(f"Row checked: {current_row}")

data_table.bind(on_row_press=on_row_press)
data_table.bind(on_check_press=on_check_press)

Custom List Item

from kivymd.uix.list import BaseListItem
from kivymd.uix.label import MDLabel
from kivymd.uix.button import MDIconButton
from kivymd.uix.boxlayout import MDBoxLayout

class CustomListItem(BaseListItem):
    def __init__(self, title, subtitle, action_icon="more-vert", **kwargs):
        super().__init__(**kwargs)
        
        # Create layout
        layout = MDBoxLayout(
            orientation="horizontal",
            adaptive_height=True,
            spacing="16dp",
            padding=["16dp", "8dp"]
        )
        
        # Text content
        text_layout = MDBoxLayout(
            orientation="vertical",
            adaptive_height=True,
            size_hint_x=0.8
        )
        
        title_label = MDLabel(
            text=title,
            font_style="Subtitle1",
            theme_text_color="Primary",
            size_hint_y=None,
            height="24dp"
        )
        
        subtitle_label = MDLabel(
            text=subtitle,
            font_style="Body2",
            theme_text_color="Secondary",
            size_hint_y=None,
            height="20dp"
        )
        
        text_layout.add_widget(title_label)
        text_layout.add_widget(subtitle_label)
        
        # Action button
        action_button = MDIconButton(
            icon=action_icon,
            theme_icon_color="Primary",
            size_hint=(None, None),
            size=("40dp", "40dp")
        )
        
        layout.add_widget(text_layout)
        layout.add_widget(action_button)
        
        self.add_widget(layout)

# Usage
custom_item = CustomListItem(
    title="Custom Item",
    subtitle="This is a custom list item with additional functionality",
    action_icon="star"
)

Install with Tessl CLI

npx tessl i tessl/pypi-kivymd

docs

advanced.md

animations.md

application.md

buttons.md

dialogs.md

index.md

layouts.md

lists.md

navigation.md

text-input.md

tile.json