Add "gap" property to FlexBox (#6354)

holoviz · Feb 18, 2024 · 0980fa4 · 0980fa4
1 parent 313530f
commit 0980fa4
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/panel/layout/flex.py b/panel/layout/flex.py
@@ -54,6 +54,9 @@ class FlexBox(ListLike, ReactiveHTML):
  'space-evenly', 'start', 'end', 'left', 'right'], doc="""
  Defines the alignment along the main axis.""")
 
+ gap = param.String(default='', doc="""
+ Defines the spacing between flex items, supporting various units (px, em, rem, %, vw/vh).""")
+
  _template = (Path(__file__).parent / 'flexbox.html').read_text('utf-8')
 
  def __init__(self, *objects, **params):

diff --git a/panel/layout/flexbox.html b/panel/layout/flexbox.html
@@ -1,4 +1,4 @@
-<div id="flexbox" style="display: flex; flex-wrap: ${flex_wrap}; justify-content: ${justify_content}; flex-direction: ${flex_direction}; align-content: ${align_content}; align-items: ${align_items}; height: 100%;">
+<div id="flexbox" style="display: flex; flex-wrap: ${flex_wrap}; justify-content: ${justify_content}; flex-direction: ${flex_direction}; align-content: ${align_content}; align-items: ${align_items}; gap: ${gap}; height: 100%;">
  {% for obj in objects %}
  <div id="flex-item-{{ loop.index0 }}" style="display: contents;">
  ${objects[{{ loop.index0 }}]}