divider

Divider will be used to separate content vertically or horizontally.

Base Divider

Exported source 
divider = SingleValueFactory("divider", "Base divider component for creating a line between two elements") # Base divider component

Divider Colors

Exported source 
divider_colors = enums_to_simple_factory(divider, [SemanticColorBrand, SemanticColorStatus], "divider color variants using daisyUI semantic colors") # divider color variants

Divider Directions

source

DividerDirection

 DividerDirection (value, names=None, module=None, qualname=None,
                   type=None, start=1, boundary=None)

*str(object=’’) -> str str(bytes_or_buffer[, encoding[, errors]]) -> str

Create a new string object from the given object. If encoding or errors is specified, then the object must expose a data buffer that will be decoded using the given encoding and error handler. Otherwise, returns the result of object.__str__() (if defined) or repr(object). encoding defaults to sys.getdefaultencoding(). errors defaults to ‘strict’.*

Exported source 
class DividerDirection(str, Enum):
    VERTICAL = "vertical"
    HORIZONTAL = "horizontal"

divider_directions = enums_to_simple_factory(divider, [DividerDirection], "divider directions (vertical, horizontal)") # divider directions

Divider Directions

source

DividerPlacement

 DividerPlacement (value, names=None, module=None, qualname=None,
                   type=None, start=1, boundary=None)

*str(object=’’) -> str str(bytes_or_buffer[, encoding[, errors]]) -> str

Create a new string object from the given object. If encoding or errors is specified, then the object must expose a data buffer that will be decoded using the given encoding and error handler. Otherwise, returns the result of object.__str__() (if defined) or repr(object). encoding defaults to sys.getdefaultencoding(). errors defaults to ‘strict’.*

Exported source 
class DividerPlacement(str, Enum):
    START = "start"
    END = "end"

divider_placement = enums_to_simple_factory(divider, [DividerPlacement], "divider placement (start, end)") # divider directions

Divider Test Examples

source

test_divider_basic_examples

 test_divider_basic_examples ()

Test basic divider utilities.

Exported source 
def test_divider_basic_examples():
    """Test basic divider utilities."""
    # Basic divider
    assert str(divider) == "divider"
    
    # Test with modifiers
    assert str(divider.hover) == "hover:divider"
    assert str(divider.md) == "md:divider"
    assert str(divider.dark) == "dark:divider"

# Run the tests
test_divider_basic_examples()

source

test_divider_colors_examples

 test_divider_colors_examples ()

Test divider color variants.

Exported source 
def test_divider_colors_examples():
    """Test divider color variants."""
    # All color variants
    assert str(divider_colors.neutral) == "divider-neutral"
    assert str(divider_colors.primary) == "divider-primary"
    assert str(divider_colors.secondary) == "divider-secondary"
    assert str(divider_colors.accent) == "divider-accent"
    assert str(divider_colors.info) == "divider-info"
    assert str(divider_colors.success) == "divider-success"
    assert str(divider_colors.warning) == "divider-warning"
    assert str(divider_colors.error) == "divider-error"
    
    # With modifiers
    assert str(divider_colors.primary.hover) == "hover:divider-primary"
    assert str(divider_colors.success.focus) == "focus:divider-success"

# Run the tests
test_divider_colors_examples()

source

test_divider_directions_examples

 test_divider_directions_examples ()

Test divider directions variants.

Exported source 
def test_divider_directions_examples():
    """Test divider directions variants."""
    assert str(divider_directions.vertical) == "divider-vertical"
    assert str(divider_directions.horizontal) == "divider-horizontal"

# Run the tests
test_divider_directions_examples()

source

test_divider_placement_examples

 test_divider_placement_examples ()

Test divider placement variants.

Exported source 
def test_divider_placement_examples():
    """Test divider placement variants."""
    assert str(divider_placement.start) == "divider-start"
    assert str(divider_placement.end) == "divider-end"

# Run the tests
test_divider_placement_examples()

source

test_divider_basic_fasthtml_examples

 test_divider_basic_fasthtml_examples ()

Test basic divider and divider with no text from daisyUI v5 documentation.

Exported source 
def test_divider_basic_fasthtml_examples():
    """Test basic divider and divider with no text from daisyUI v5 documentation."""
    from cjm_fasthtml_tailwind.utilities.sizing import w, h
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex_direction, place_items, grow, grid_display, flex_display
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.components.data_display.card import card
    
    # Divider with text
    divider_with_text = Div(
        Div(
            "content",
            cls=combine_classes(card, bg_dui.base_300, rounded.box, grid_display, h._20, place_items.center)
        ),
        Div("OR", cls=str(divider)),
        Div(
            "content",
            cls=combine_classes(card, bg_dui.base_300, rounded.box, grid_display, h._20, place_items.center)
        ),
        cls=combine_classes(flex_display, w.full, flex_direction.col)
    )
    
    # Verify structure
    assert divider_with_text.tag == "div"
    assert "flex" in divider_with_text.attrs['class']
    assert "w-full" in divider_with_text.attrs['class']
    assert "flex-col" in divider_with_text.attrs['class']
    
    # Verify first card
    first_card = divider_with_text.children[0]
    assert first_card.tag == "div"
    assert "card" in first_card.attrs['class']
    assert "bg-base-300" in first_card.attrs['class']
    assert "rounded-box" in first_card.attrs['class']
    assert "grid" in first_card.attrs['class']
    assert "h-20" in first_card.attrs['class']
    assert "place-items-center" in first_card.attrs['class']
    assert first_card.children[0] == "content"
    
    # Verify divider
    divider_element = divider_with_text.children[1]
    assert divider_element.tag == "div"
    assert divider_element.attrs['class'] == "divider"
    assert divider_element.children[0] == "OR"
    
    # Verify second card
    second_card = divider_with_text.children[2]
    assert second_card.tag == "div"
    assert "card" in second_card.attrs['class']
    assert second_card.children[0] == "content"
    
    # Divider with no text
    divider_no_text = Div(
        Div(
            "content",
            cls=combine_classes(card, bg_dui.base_300, rounded.box, grid_display, h._20, place_items.center)
        ),
        Div(cls=str(divider)),  # No text
        Div(
            "content",
            cls=combine_classes(card, bg_dui.base_300, rounded.box, grid_display, h._20, place_items.center)
        ),
        cls=combine_classes(flex_display, w.full, flex_direction.col)
    )
    
    # Verify divider with no text
    assert divider_no_text.children[1].tag == "div"
    assert divider_no_text.children[1].attrs['class'] == "divider"
    assert divider_no_text.children[1].children == ()  # No children (no text)
    
    return Div(divider_with_text, divider_no_text)

# Run the tests
test_divider_basic_fasthtml_examples()
<div>
  <div class="flex w-full flex-col">
    <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
    <div class="divider">OR</div>
    <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
  </div>
  <div class="flex w-full flex-col">
    <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
    <div class="divider"></div>
    <div class="card bg-base-300 rounded-box grid h-20 place-items-center">content</div>
  </div>
</div>
test_func = test_divider_basic_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_divider_horizontal_fasthtml_examples

 test_divider_horizontal_fasthtml_examples ()

Test horizontal divider from daisyUI v5 documentation.

Exported source 
def test_divider_horizontal_fasthtml_examples():
    """Test horizontal divider from daisyUI v5 documentation."""
    from cjm_fasthtml_tailwind.utilities.sizing import w, h
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import place_items, grow, grid_display, flex_display
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.components.data_display.card import card
    
    # Horizontal divider
    horizontal_divider = Div(
        Div(
            "content",
            cls=combine_classes(card, bg_dui.base_300, rounded.box, grid_display, h._20, grow(), place_items.center)
        ),
        Div(
            "OR",
            cls=combine_classes(divider, divider_directions.horizontal)
        ),
        Div(
            "content",
            cls=combine_classes(card, bg_dui.base_300, rounded.box, grid_display, h._20, grow(), place_items.center)
        ),
        cls=combine_classes(flex_display, w.full)
    )
    
    # Verify structure
    assert horizontal_divider.tag == "div"
    assert "flex" in horizontal_divider.attrs['class']
    assert "w-full" in horizontal_divider.attrs['class']
    # Note: No flex-col for horizontal layout
    assert "flex-col" not in horizontal_divider.attrs['class']
    
    # Verify first card
    first_card = horizontal_divider.children[0]
    assert first_card.tag == "div"
    assert "card" in first_card.attrs['class']
    assert "bg-base-300" in first_card.attrs['class']
    assert "rounded-box" in first_card.attrs['class']
    assert "grid" in first_card.attrs['class']
    assert "h-20" in first_card.attrs['class']
    assert "grow" in first_card.attrs['class']  # grow for horizontal layout
    assert "place-items-center" in first_card.attrs['class']
    assert first_card.children[0] == "content"
    
    # Verify horizontal divider
    divider_element = horizontal_divider.children[1]
    assert divider_element.tag == "div"
    assert "divider" in divider_element.attrs['class']
    assert "divider-horizontal" in divider_element.attrs['class']
    assert divider_element.children[0] == "OR"
    
    # Verify second card
    second_card = horizontal_divider.children[2]
    assert second_card.tag == "div"
    assert "card" in second_card.attrs['class']
    assert "grow" in second_card.attrs['class']  # grow for horizontal layout
    assert second_card.children[0] == "content"
    
    return horizontal_divider

# Run the tests
test_divider_horizontal_fasthtml_examples()
<div class="flex w-full">
  <div class="card bg-base-300 rounded-box grid h-20 grow-1 place-items-center">content</div>
  <div class="divider divider-horizontal">OR</div>
  <div class="card bg-base-300 rounded-box grid h-20 grow-1 place-items-center">content</div>
</div>
test_func = test_divider_horizontal_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_divider_responsive_fasthtml_examples

 test_divider_responsive_fasthtml_examples ()

Test responsive divider (lg:divider-horizontal) from daisyUI v5 documentation.

Exported source 
def test_divider_responsive_fasthtml_examples():
    """Test responsive divider (lg:divider-horizontal) from daisyUI v5 documentation."""
    from cjm_fasthtml_tailwind.utilities.sizing import w, h
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex_direction, place_items, grow, grid_display, flex_display
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.borders import rounded
    from cjm_fasthtml_daisyui.utilities.semantic_colors import bg_dui
    from cjm_fasthtml_daisyui.components.data_display.card import card
    
    # Responsive divider (vertical on small, horizontal on large)
    responsive_divider = Div(
        Div(
            "content",
            cls=combine_classes(card, bg_dui.base_300, rounded.box, grid_display, h._32, grow(), place_items.center)
        ),
        Div(
            "OR",
            cls=combine_classes(divider, divider_directions.horizontal.lg)
        ),
        Div(
            "content",
            cls=combine_classes(card, bg_dui.base_300, rounded.box, grid_display, h._32, grow(), place_items.center)
        ),
        cls=combine_classes(flex_display, w.full, flex_direction.col, flex_direction.row.lg)
    )
    
    # Verify structure
    assert responsive_divider.tag == "div"
    assert "flex" in responsive_divider.attrs['class']
    assert "w-full" in responsive_divider.attrs['class']
    assert "flex-col" in responsive_divider.attrs['class']  # vertical by default
    assert "lg:flex-row" in responsive_divider.attrs['class']  # horizontal on large screens
    
    # Verify first card
    first_card = responsive_divider.children[0]
    assert first_card.tag == "div"
    assert "card" in first_card.attrs['class']
    assert "bg-base-300" in first_card.attrs['class']
    assert "rounded-box" in first_card.attrs['class']
    assert "grid" in first_card.attrs['class']
    assert "h-32" in first_card.attrs['class']  # taller for responsive example
    assert "grow" in first_card.attrs['class']
    assert "place-items-center" in first_card.attrs['class']
    assert first_card.children[0] == "content"
    
    # Verify responsive divider
    divider_element = responsive_divider.children[1]
    assert divider_element.tag == "div"
    assert "divider" in divider_element.attrs['class']
    assert "lg:divider-horizontal" in divider_element.attrs['class']  # horizontal on large screens
    assert divider_element.children[0] == "OR"
    
    # Verify second card
    second_card = responsive_divider.children[2]
    assert second_card.tag == "div"
    assert "card" in second_card.attrs['class']
    assert "h-32" in second_card.attrs['class']  # taller for responsive example
    assert "grow" in second_card.attrs['class']
    assert second_card.children[0] == "content"
    
    return responsive_divider

# Run the tests
test_divider_responsive_fasthtml_examples()
<div class="flex w-full flex-col lg:flex-row">
  <div class="card bg-base-300 rounded-box grid h-32 grow-1 place-items-center">content</div>
  <div class="divider lg:divider-horizontal">OR</div>
  <div class="card bg-base-300 rounded-box grid h-32 grow-1 place-items-center">content</div>
</div>
test_func = test_divider_responsive_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_divider_colors_fasthtml_examples

 test_divider_colors_fasthtml_examples ()

Test divider with colors from daisyUI v5 documentation.

Exported source 
def test_divider_colors_fasthtml_examples():
    """Test divider with colors from daisyUI v5 documentation."""
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex_direction, flex_display
    
    # Divider with colors
    divider_colors_example = Div(
        Div("Default", cls=str(divider)),
        Div("Neutral", cls=combine_classes(divider, divider_colors.neutral)),
        Div("Primary", cls=combine_classes(divider, divider_colors.primary)),
        Div("Secondary", cls=combine_classes(divider, divider_colors.secondary)),
        Div("Accent", cls=combine_classes(divider, divider_colors.accent)),
        Div("Success", cls=combine_classes(divider, divider_colors.success)),
        Div("Warning", cls=combine_classes(divider, divider_colors.warning)),
        Div("Info", cls=combine_classes(divider, divider_colors.info)),
        Div("Error", cls=combine_classes(divider, divider_colors.error)),
        cls=combine_classes(flex_display, w.full, flex_direction.col)
    )
    
    # Verify structure
    assert divider_colors_example.tag == "div"
    assert "flex" in divider_colors_example.attrs['class']
    assert "w-full" in divider_colors_example.attrs['class']
    assert "flex-col" in divider_colors_example.attrs['class']
    
    # Verify all color dividers
    dividers = divider_colors_example.children
    assert len(dividers) == 9
    
    # Default divider
    assert dividers[0].tag == "div"
    assert dividers[0].attrs['class'] == "divider"
    assert dividers[0].children[0] == "Default"
    
    # Neutral divider
    assert dividers[1].tag == "div"
    assert "divider" in dividers[1].attrs['class']
    assert "divider-neutral" in dividers[1].attrs['class']
    assert dividers[1].children[0] == "Neutral"
    
    # Primary divider
    assert dividers[2].tag == "div"
    assert "divider" in dividers[2].attrs['class']
    assert "divider-primary" in dividers[2].attrs['class']
    assert dividers[2].children[0] == "Primary"
    
    # Secondary divider
    assert dividers[3].tag == "div"
    assert "divider" in dividers[3].attrs['class']
    assert "divider-secondary" in dividers[3].attrs['class']
    assert dividers[3].children[0] == "Secondary"
    
    # Accent divider
    assert dividers[4].tag == "div"
    assert "divider" in dividers[4].attrs['class']
    assert "divider-accent" in dividers[4].attrs['class']
    assert dividers[4].children[0] == "Accent"
    
    # Success divider
    assert dividers[5].tag == "div"
    assert "divider" in dividers[5].attrs['class']
    assert "divider-success" in dividers[5].attrs['class']
    assert dividers[5].children[0] == "Success"
    
    # Warning divider
    assert dividers[6].tag == "div"
    assert "divider" in dividers[6].attrs['class']
    assert "divider-warning" in dividers[6].attrs['class']
    assert dividers[6].children[0] == "Warning"
    
    # Info divider
    assert dividers[7].tag == "div"
    assert "divider" in dividers[7].attrs['class']
    assert "divider-info" in dividers[7].attrs['class']
    assert dividers[7].children[0] == "Info"
    
    # Error divider
    assert dividers[8].tag == "div"
    assert "divider" in dividers[8].attrs['class']
    assert "divider-error" in dividers[8].attrs['class']
    assert dividers[8].children[0] == "Error"
    
    return divider_colors_example

# Run the tests
test_divider_colors_fasthtml_examples()
<div class="flex w-full flex-col">
  <div class="divider">Default</div>
  <div class="divider divider-neutral">Neutral</div>
  <div class="divider divider-primary">Primary</div>
  <div class="divider divider-secondary">Secondary</div>
  <div class="divider divider-accent">Accent</div>
  <div class="divider divider-success">Success</div>
  <div class="divider divider-warning">Warning</div>
  <div class="divider divider-info">Info</div>
  <div class="divider divider-error">Error</div>
</div>
test_func = test_divider_colors_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()

source

test_divider_positions_fasthtml_examples

 test_divider_positions_fasthtml_examples ()

Test divider in different positions (vertical and horizontal) from daisyUI v5 documentation.

Exported source 
def test_divider_positions_fasthtml_examples():
    """Test divider in different positions (vertical and horizontal) from daisyUI v5 documentation."""
    from cjm_fasthtml_tailwind.utilities.sizing import w
    from cjm_fasthtml_tailwind.utilities.layout import display_tw
    from cjm_fasthtml_tailwind.utilities.flexbox_and_grid import flex_direction, flex_display
    
    # Divider in different positions (vertical)
    vertical_positions = Div(
        Div("Start", cls=combine_classes(divider, divider_placement.start)),
        Div("Default", cls=str(divider)),
        Div("End", cls=combine_classes(divider, divider_placement.end)),
        cls=combine_classes(flex_display, w.full, flex_direction.col)
    )
    
    # Verify vertical positions structure
    assert vertical_positions.tag == "div"
    assert "flex" in vertical_positions.attrs['class']
    assert "w-full" in vertical_positions.attrs['class']
    assert "flex-col" in vertical_positions.attrs['class']
    
    # Verify dividers
    vertical_dividers = vertical_positions.children
    assert len(vertical_dividers) == 3
    
    # Start divider
    assert vertical_dividers[0].tag == "div"
    assert "divider" in vertical_dividers[0].attrs['class']
    assert "divider-start" in vertical_dividers[0].attrs['class']
    assert vertical_dividers[0].children[0] == "Start"
    
    # Default divider (center)
    assert vertical_dividers[1].tag == "div"
    assert vertical_dividers[1].attrs['class'] == "divider"
    assert vertical_dividers[1].children[0] == "Default"
    
    # End divider
    assert vertical_dividers[2].tag == "div"
    assert "divider" in vertical_dividers[2].attrs['class']
    assert "divider-end" in vertical_dividers[2].attrs['class']
    assert vertical_dividers[2].children[0] == "End"
    
    # Divider in different positions (horizontal)
    horizontal_positions = Div(
        Div(
            "Start",
            cls=combine_classes(divider, divider_directions.horizontal, divider_placement.start)
        ),
        Div(
            "Default",
            cls=combine_classes(divider, divider_directions.horizontal)
        ),
        Div(
            "End",
            cls=combine_classes(divider, divider_directions.horizontal, divider_placement.end)
        ),
        cls=combine_classes(flex_display, w.full)
    )
    
    # Verify horizontal positions structure
    assert horizontal_positions.tag == "div"
    assert "flex" in horizontal_positions.attrs['class']
    assert "w-full" in horizontal_positions.attrs['class']
    assert "flex-col" not in horizontal_positions.attrs['class']  # No flex-col for horizontal
    
    # Verify horizontal dividers
    horizontal_dividers = horizontal_positions.children
    assert len(horizontal_dividers) == 3
    
    # Start horizontal divider
    assert horizontal_dividers[0].tag == "div"
    assert "divider" in horizontal_dividers[0].attrs['class']
    assert "divider-horizontal" in horizontal_dividers[0].attrs['class']
    assert "divider-start" in horizontal_dividers[0].attrs['class']
    assert horizontal_dividers[0].children[0] == "Start"
    
    # Default horizontal divider (center)
    assert horizontal_dividers[1].tag == "div"
    assert "divider" in horizontal_dividers[1].attrs['class']
    assert "divider-horizontal" in horizontal_dividers[1].attrs['class']
    assert "divider-start" not in horizontal_dividers[1].attrs['class']
    assert "divider-end" not in horizontal_dividers[1].attrs['class']
    assert horizontal_dividers[1].children[0] == "Default"
    
    # End horizontal divider
    assert horizontal_dividers[2].tag == "div"
    assert "divider" in horizontal_dividers[2].attrs['class']
    assert "divider-horizontal" in horizontal_dividers[2].attrs['class']
    assert "divider-end" in horizontal_dividers[2].attrs['class']
    assert horizontal_dividers[2].children[0] == "End"
    
    return Div(vertical_positions, horizontal_positions)

# Run the tests
test_divider_positions_fasthtml_examples()
<div>
  <div class="flex w-full flex-col">
    <div class="divider divider-start">Start</div>
    <div class="divider">Default</div>
    <div class="divider divider-end">End</div>
  </div>
  <div class="flex w-full">
    <div class="divider divider-horizontal divider-start">Start</div>
    <div class="divider divider-horizontal">Default</div>
    <div class="divider divider-horizontal divider-end">End</div>
  </div>
</div>
test_func = test_divider_positions_fasthtml_examples
app, rt = create_test_app(theme=DaisyUITheme.LIGHT)

@rt
def index():
    return create_test_page(test_func.__doc__.title().replace('.', ''), test_func())
server = start_test_server(app)
display(HTMX())
server.stop()