160 lines
3.6 KiB
Python
160 lines
3.6 KiB
Python
|
"""
|
|||
|
Components/Divider
|
|||
|
==================
|
|||
|
|
|||
|
.. versionadded:: 2.0.0
|
|||
|
|
|||
|
.. seealso::
|
|||
|
|
|||
|
`Material Design 3 spec, Divider <https://m3.material.io/components/divider/overview>`_
|
|||
|
|
|||
|
.. rubric:: Dividers are thin lines that group content in lists or other containers.
|
|||
|
|
|||
|
.. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/divider.png
|
|||
|
:align: center
|
|||
|
|
|||
|
- Make dividers visible but not bold
|
|||
|
- Only use dividers if items can’t be grouped with open space
|
|||
|
- Use dividers to group things, not separate individual items
|
|||
|
|
|||
|
`KivyMD` provides the following bar positions for use:
|
|||
|
|
|||
|
- HorizontalDivider_
|
|||
|
- VerticalDivider_
|
|||
|
|
|||
|
.. HorizontalDivider:
|
|||
|
|
|||
|
HorizontalDivider
|
|||
|
-----------------
|
|||
|
|
|||
|
Dividers are one way to visually group components and create hierarchy.
|
|||
|
They can also be used to imply nested parent/child relationships.
|
|||
|
|
|||
|
.. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/divider-horizontal-desc.png
|
|||
|
:align: center
|
|||
|
|
|||
|
.. code-block:: python
|
|||
|
|
|||
|
from kivy.lang import Builder
|
|||
|
|
|||
|
from kivymd.app import MDApp
|
|||
|
|
|||
|
KV = '''
|
|||
|
MDScreen:
|
|||
|
md_bg_color: self.theme_cls.backgroundColor
|
|||
|
|
|||
|
MDDivider:
|
|||
|
size_hint_x: .5
|
|||
|
pos_hint: {'center_x': .5, 'center_y': .5}
|
|||
|
'''
|
|||
|
|
|||
|
|
|||
|
class Example(MDApp):
|
|||
|
def build(self):
|
|||
|
self.theme_cls.theme_style = "Dark"
|
|||
|
return Builder.load_string(KV)
|
|||
|
|
|||
|
|
|||
|
Example().run()
|
|||
|
|
|||
|
.. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/divider-horizontal.png
|
|||
|
:align: center
|
|||
|
|
|||
|
.. VerticalDivider:
|
|||
|
|
|||
|
VerticalDivider
|
|||
|
---------------
|
|||
|
|
|||
|
A vertical divider can be used to arrange content on a larger screen, such as
|
|||
|
separating paragraph text from video or imagery media.
|
|||
|
|
|||
|
.. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/divider-vertical-desc.png
|
|||
|
:align: center
|
|||
|
|
|||
|
.. code-block:: kv
|
|||
|
|
|||
|
MDDivider:
|
|||
|
size_hint_y: .5
|
|||
|
orientation: "vertical"
|
|||
|
|
|||
|
.. image:: https://github.com/HeaTTheatR/KivyMD-data/raw/master/gallery/kivymddoc/divider-vertical.png
|
|||
|
:align: center
|
|||
|
|
|||
|
API break
|
|||
|
=========
|
|||
|
|
|||
|
1.2.0 version
|
|||
|
-------------
|
|||
|
|
|||
|
.. code-block:: kv
|
|||
|
|
|||
|
MDSeparator:
|
|||
|
[...]
|
|||
|
|
|||
|
2.0.0 version
|
|||
|
-------------
|
|||
|
|
|||
|
.. code-block:: kv
|
|||
|
|
|||
|
MDDivider:
|
|||
|
[...]
|
|||
|
"""
|
|||
|
|
|||
|
__all__ = ("MDDivider",)
|
|||
|
|
|||
|
import os
|
|||
|
|
|||
|
from kivy.clock import Clock
|
|||
|
from kivy.lang import Builder
|
|||
|
from kivy.metrics import dp
|
|||
|
from kivy.properties import ColorProperty, NumericProperty
|
|||
|
from kivy.uix.boxlayout import BoxLayout
|
|||
|
|
|||
|
from kivymd import uix_path
|
|||
|
|
|||
|
with open(
|
|||
|
os.path.join(uix_path, "divider", "divider.kv"), encoding="utf-8"
|
|||
|
) as kv_file:
|
|||
|
Builder.load_string(kv_file.read())
|
|||
|
|
|||
|
|
|||
|
class MDDivider(BoxLayout):
|
|||
|
"""
|
|||
|
A divider line.
|
|||
|
|
|||
|
.. versionadded:: 2.0.0
|
|||
|
|
|||
|
For more information, see in the
|
|||
|
:class:`~kivy.uix.boxlayout.BoxLayout` class documentation.
|
|||
|
"""
|
|||
|
|
|||
|
color = ColorProperty(None)
|
|||
|
"""
|
|||
|
Divider color in (r, g, b, a) or string format.
|
|||
|
|
|||
|
:attr:`color` is a :class:`~kivy.properties.ColorProperty`
|
|||
|
and defaults to `None`.
|
|||
|
"""
|
|||
|
|
|||
|
divider_width = NumericProperty(dp(1))
|
|||
|
"""
|
|||
|
Divider width.
|
|||
|
|
|||
|
:attr:`divider_width` is an :class:`~kivy.properties.NumericProperty`
|
|||
|
and defaults to `dp(1)`.
|
|||
|
"""
|
|||
|
|
|||
|
def __init__(self, **kwargs):
|
|||
|
super().__init__(**kwargs)
|
|||
|
Clock.schedule_once(self.on_orientation)
|
|||
|
|
|||
|
def on_orientation(self, *args) -> None:
|
|||
|
"""Fired when the values of :attr:`orientation` change."""
|
|||
|
|
|||
|
if self.orientation == "vertical":
|
|||
|
self.size_hint_x = None
|
|||
|
self.width = self.divider_width
|
|||
|
elif self.orientation == "horizontal":
|
|||
|
self.size_hint_y = None
|
|||
|
self.height = self.divider_width
|