:github_url: https://github.com/kivymd/KivyMD/blob/master/kivymd/uix/imagelist/imagelist.py ImageList ========= .. py:module:: kivymd.uix.imagelist.imagelist .. autoapi-nested-parse:: Components/ImageList ==================== .. seealso:: `Material Design spec, Image lists `_ .. rubric:: Image lists display a collection of images in an organized grid. .. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/image-list.png :align: center Usage ----- .. tabs:: .. tab:: Declarative KV style .. code-block:: kv MDSmartTile: [...] MDSmartTileImage: [...] MDSmartTileOverlayContainer: [...] # Content [...] .. tab:: Declarative Python style .. code-block:: python MDSmartTile( MDSmartTileImage( ), MDSmartTileOverlayContainer( # Content ) ) Anatomy ------- .. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/image-list-anatomy.png :align: center Example ------- .. tabs:: .. tab:: Declarative python style with KV .. code-block:: python from kivy.lang import Builder from kivymd.app import MDApp KV = ''' MDScreen: md_bg_color: self.theme_cls.backgroundColor MDSmartTile: pos_hint: {"center_x": .5, "center_y": .5} size_hint: None, None size: "320dp", "320dp" overlap: False MDSmartTileImage: source: "bg.jpg" radius: [dp(24), dp(24), 0, 0] MDSmartTileOverlayContainer: md_bg_color: 0, 0, 0, .5 adaptive_height: True padding: "8dp" spacing: "8dp" radius: [0, 0, dp(24), dp(24)] MDIconButton: icon: "heart-outline" theme_icon_color: "Custom" icon_color: 1, 0, 0, 1 pos_hint: {"center_y": .5} on_release: self.icon = "heart" \ if self.icon == "heart-outline" else \ "heart-outline" MDLabel: text: "Ibanez GRG121DX-BKF" theme_text_color: "Custom" text_color: "white" ''' class Example(MDApp): def build(self): self.theme_cls.theme_style = "Dark" return Builder.load_string(KV) Example().run() .. tab:: Declarative python style .. code-block:: python from kivy.metrics import dp from kivymd.app import MDApp from kivymd.uix.button import MDIconButton from kivymd.uix.imagelist import ( MDSmartTile, MDSmartTileImage, MDSmartTileOverlayContainer, ) from kivymd.uix.label import MDLabel from kivymd.uix.screen import MDScreen class Example(MDApp): def set_icon(self, heart_outline): heart_outline.icon = ( "heart" if heart_outline.icon == "heart-outline" else "heart-outline" ) def on_start(self): self.root.get_ids().heart_outline.bind(on_release=self.set_icon) def build(self): self.theme_cls.theme_style = "Dark" return MDScreen( MDSmartTile( MDSmartTileImage( source="bg.jpg", radius=[dp(24), dp(24), 0, 0], ), MDSmartTileOverlayContainer( MDIconButton( id="heart_outline", icon="heart-outline", theme_icon_color="Custom", icon_color=(1, 0, 0, 1), pos_hint={"center_y": 0.5}, ), MDLabel( text="Ibanez GRG121DX-BKF", theme_text_color="Custom", text_color="white", ), md_bg_color=(0, 0, 0, 0.5), adaptive_height=True, padding="8dp", spacing="8dp", radius=[0, 0, dp(24), dp(24)], ), pos_hint={"center_x": 0.5, "center_y": 0.5}, size_hint=(None, None), size=("320dp", "320dp"), overlap=False, ), md_bg_color=self.theme_cls.backgroundColor, ) Example().run() .. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/image-list-example.png :align: center API break ========= 1.2.0 version ------------- .. code-block:: kv MDSmartTile: [...] # Content. MDIconButton: [...] MDLabel: [...] 2.0.0 version ------------- .. code-block:: kv MDSmartTile: [...] MDSmartTileImage: [...] MDSmartTileOverlayContainer: [...] # Content. [...] API - :mod:`kivymd.uix.imagelist.imagelist` ------------------------------------------- .. py:class:: MDSmartTileImage(**kwargs) Implements the tile image. .. versionchanged:: 2.0.0 The `SmartTileImage` class has been renamed to `MDSmartTileImage`. For more information, see in the :class:`~kivymd.uix.behaviors.ripple_behavior.RectangularRippleBehavior` and :class:`~kivy.uix.behaviors.ButtonBehavior` and :class:`~kivymd.uix.fitimage.fitimage.FitImage` classes documentation. .. py:method:: on_touch_down(touch) Receive a touch down event. :Parameters: `touch`: :class:`~kivy.input.motionevent.MotionEvent` class Touch received. The touch is in parent coordinates. See :mod:`~kivy.uix.relativelayout` for a discussion on coordinate systems. :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. .. py:class:: MDSmartTileOverlayContainer(*args, **kwargs) Implements a container for custom widgets to be added to the tile. .. versionchanged:: 2.0.0 The `SmartTileOverlayBox` class has been renamed to `MDSmartTileOverlayContainer`. For more information, see in the :class:`~kivy.uix.boxlayout.BoxLayout` class documentation. .. py:method:: add_widget(widget, *args, **kwargs) Add a new widget as a child of this widget. :Parameters: `widget`: :class:`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 :doc:`Widgets Programming Guide `. .. versionadded:: 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. .. versionadded:: 1.9.0 .. code-block:: python >>> from kivy.uix.button import Button >>> from kivy.uix.slider import Slider >>> root = Widget() >>> root.add_widget(Button()) >>> slider = Slider() >>> root.add_widget(slider) .. py:class:: MDSmartTile(*args, **kwargs) A tile for more complex needs. For more information, see in the :class:`~kivymd.uix.relativelayout.MDRelativeLayout` class documentation. Includes an image, a container to place overlays and a box that can act as a header or a footer, as described in the Material Design specs. :Events: `on_press` Fired when the button is pressed. `on_release` Fired when the button is released (i.e. the touch/click that pressed the button goes away). .. py:attribute:: overlay_mode Determines weather the information box acts as a header or footer to the image. Available are options: `'footer'`, `'header'`. .. versionchanged:: 2.0.0 The `box_position` attribute has been renamed to `overlay_mode`. .. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/image-list-overlay-mode.png :align: center :attr:`overlay_mode` is a :class:`~kivy.properties.OptionProperty` and defaults to `'footer'`. .. py:attribute:: overlap Determines if the `header/footer` overlaps on top of the image or not. .. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/image-list-overlap.png :align: center :attr:`overlap` is a :class:`~kivy.properties.BooleanProperty` and defaults to `True`. .. py:attribute:: ripple_effect .. py:method:: on_release(*args) Fired when the button is released (i.e. the touch/click that pressed the button goes away). .. py:method:: on_press(*args) Fired when the button is pressed. .. py:method:: add_widget(widget, *args, **kwargs) Add a new widget as a child of this widget. :Parameters: `widget`: :class:`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 :doc:`Widgets Programming Guide `. .. versionadded:: 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. .. versionadded:: 1.9.0 .. code-block:: python >>> from kivy.uix.button import Button >>> from kivy.uix.slider import Slider >>> root = Widget() >>> root.add_widget(Button()) >>> slider = Slider() >>> root.add_widget(slider)