Skip to main content

spacer

Spacer​

from dara.components.common.spacer import Spacer

class Spacer(ContentComponent)

Spacer

A Spacer component is a way of adding space between two elements in your document. It can be placed in a vertical or horizontal stack and add a gap (defined by the size property, defaults to 0.75rem) into the flow of the parent.

Additionally, Spacer can also draw a dividing line down the center of this gap to act as a separator between different sections or columns. Setting line=True will enable the line and setting the inset property will define how close to the container edge it goes.

A Spacer component can be created like so:


from dara.components.common import Spacer, Stack, Text

Stack(
    Text('Above Spacer'),
    Spacer(),
    Text('Below Spacer'),
)

Or with a dividing line:


from dara.components.common import Spacer, Stack, Text

Stack(
    Text('Above Spacer'),
    Spacer(line=True),
    Text('Below Spacer'),
)

You can also add an inset to the line as px or percentage:


from dara.components.common import Spacer, Stack, Text

Stack(
    Text('Above Spacer'),
    Spacer(line=True, inset='1rem'),
    Text('Middle Spacer'),
    Spacer(line=True, inset='5%'),
    Text('Below Spacer'),
)

Arguments:

  • line: Whether the spacer should draw a dividing line
  • size: The size of the gap to introduce (can be a number of pixels or percentage)
  • inset: The distance away from the edges to stop drawing the line (can be a number of pixels or percentage)

Attributes​

  • line: bool
  • size: Union[int, str]
  • inset: Union[int, str]