Core

The building blocks to the UI

Imports

<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.6/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.21.6/dist/js/uikit-icons.min.js"></script>
<script type="module" src="https://unpkg.com/franken-wc@0.0.6/dist/js/wc.iife.js"></script>
<link rel="stylesheet" href="https://unpkg.com/franken-wc@0.0.6/dist/css/blue.min.css">


<style>
#notebook-container { max-width: none; }
.output_html * { list-style-type: none !important; }
</style>

Theme / Headers

You can select a theme color to and get all the headers.

source

Theme

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

An enumeration.

hdrs = Theme.blue.headers()
app = FastHTML(hdrs=hdrs)

Text Style

source

TextT

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

Text Styles from https://franken-ui.dev/docs/text

# print(enum_to_markdown_table(TextT))

source

TextFont

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

Combinations of TextT that are particularly useful

Basic Components

source

Alert

 Alert (*c, cls=(), **kwargs)

Button

source

ButtonT

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

Options for styling Buttons

# Markdown(enum_to_markdown_table(ButtonT))

source

Button

 Button (*c:Union[str,fastcore.xml.FT],
         cls:Union[str,enum.Enum]=<ButtonT.default: 'uk-button-default'>,
         **kwargs)

A Button with Uk Styling

show(Div(Button("Default Class"),
        Button("Primary Class", cls=ButtonT.primary),
        Button("Secondary Class", cls=ButtonT.secondary),
        Button("Danger Class", cls=ButtonT.danger),
        Button("Ghost Class", cls=ButtonT.ghost),
        Button("Link Class", cls=ButtonT.link),
        Button("Text Class", cls=ButtonT.text),))

Headings

source

H1

 H1 (*c:fastcore.xml.FT|str, cls:enum.Enum|str|tuple=(), **kwargs)

A H1 with Uk Styling

	Type	Default	Details
c	fastcore.xml.FT \| str
cls	enum.Enum \| str \| tuple	()
kwargs
Returns	FT		Heading with `class=uk-h1` cls

source

H2

 H2 (*c:fastcore.xml.FT|str, cls:enum.Enum|str|tuple=(), **kwargs)

A H2 with Uk Styling

	Type	Default	Details
c	fastcore.xml.FT \| str
cls	enum.Enum \| str \| tuple	()
kwargs
Returns	FT		Heading with `class=uk-h2` cls

source

H3

 H3 (*c:fastcore.xml.FT|str, cls:enum.Enum|str|tuple=(), **kwargs)

A H3 with Uk Styling

	Type	Default	Details
c	fastcore.xml.FT \| str
cls	enum.Enum \| str \| tuple	()
kwargs
Returns	FT		Heading with `class=uk-h3` cls

source

H4

 H4 (*c:fastcore.xml.FT|str, cls:enum.Enum|str|tuple=(), **kwargs)

A H4 with Uk Styling

	Type	Default	Details
c	fastcore.xml.FT \| str
cls	enum.Enum \| str \| tuple	()
kwargs
Returns	FT		Heading with `class=uk-h4` cls

source

Titled

 Titled (title:str='FastHTML app', *args, cls='container', **kwargs)

show(Div(
    Titled("Titled"),
    H1("Heading 1 (H1)"),
    H2("Heading 2 (H2)"),
    H3("Heading 3 (H3)"),
    H4("Heading 4 (H4)")))

Titled

Heading 1 (H1)

Heading 2 (H2)

Heading 3 (H3)

Heading 4 (H4)

Dividers

source

DividerT

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

An enumeration.

source

Divider

 Divider (*args, cls=<DividerT.icon: 'uk-divider-icon'>, **kwargs)

source

UkHSplit

 UkHSplit (*c, cls=(), line_cls=(), text_cls=())

show(UkHSplit())

source

UkHLine

 UkHLine (lwidth=2, y_space=4)

show(UkHLine())

Articles & Containers & Sections

source

ArticleMeta

 ArticleMeta (*c, cls=(), **kwargs)

source

ArticleTitle

 ArticleTitle (*c, cls=(), **kwargs)

source

Article

 Article (*c, cls=(), **kwargs)

show(Article(ArticleTitle("Article Title"), ArticleMeta("By: John Doe")))

Article Title

By: John Doe

source

ContainerT

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

Max width container sizes from https://franken-ui.dev/docs/container

source

Container

 Container (*c, cls=(), **kwargs)

show(Container(
    "This is a container with a custom background color.",
    cls=ContainerT.xsmall,
    style="background-color: #e6f2ff; padding: 20px; border-radius: 5px;"
))

This is a container with a custom background color.

source

SectionT

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

Section styles from UIkit

# Markdown(enum_to_markdown_table(SectionT))

source

Section

 Section (*c, cls=(), **kwargs)

Forms & Inputs

source

Legend

 Legend (*c, cls=(), **kwargs)

source

Fieldset

 Fieldset (*c, cls=(), **kwargs)

source

Switch

 Switch (*c, cls='min-w-9', **kwargs)

source

TextArea

 TextArea (*c, cls=(), **kwargs)

source

Toggle_switch

 Toggle_switch (*c, cls=(), **kwargs)

source

Range

 Range (*c, cls=(), **kwargs)

source

CheckboxX

 CheckboxX (*c, cls=(), **kwargs)

source

Radio

 Radio (*c, cls=(), **kwargs)

source

Select

 Select (*option, cls=(), **kwargs)

source

Input

 Input (*c, cls=(), **kwargs)

source

FormLabel

 FormLabel (*c, cls=(), **kwargs)

show(Form(
    Fieldset(
        Legend("Fieldset Legend 1"),
        FormLabel("Input: ", Input()),    
        FormLabel("Select: ", Select(fh.Option("Option 1"), fh.Option("Option 2"))),
        FormLabel("Radio: ", Radio()),
        FormLabel("Checkbox: ", CheckboxX()),
        FormLabel("Button: ", Button("Click me")),
        cls='space-x-4'),   
    Fieldset(
        Legend("Fieldset Legend 2"),        
        FormLabel("Range: ", Range()),
        FormLabel("Toggle switch: ", Toggle_switch()),
        FormLabel("TextArea: ", TextArea()),
        FormLabel("Switch: ", Switch()),
        cls='space-x-4'),   
    cls="space-y-6"
))

source

LabelT

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

An enumeration.

source

Label

 Label (*c, cls=(), **kwargs)

show(Div(
    Label("Default"),
    Label("Primary",cls=LabelT.primary),
    Label("Secondary",cls=LabelT.secondary),
    Label("Default",cls=LabelT.danger),
))

DefaultPrimarySecondaryDefault

source

UkFormSection

 UkFormSection (title, description, *c, button_txt='Update',
                outer_margin=6, inner_margin=6)

Labeled Inputs

Inputs of various types often go with a label. Because of this we created functions to do this for you along with properly linking the for attribute from the lable to the input. We also have some nice defaults, such as putting a little spacing between the label and the input

source

GenericLabelInput

 GenericLabelInput (label:str|fastcore.xml.FT, lbl_cls='', input_cls='',
                    container=functools.partial(<function ft at
                    0x7f0a6c6657e0>, 'div', void_=False), cls='', id='',
                    input_fn=<function noop>, **kwargs)

Div(Label,Input) component with Uk styling injected appropriately. Generally you should higher level API, such as UkTextArea which is created for you in this library

source

LabelInput

 LabelInput (*args, cls='space-y-2', lbl_cls='', input_cls='',
             container=functools.partial(<function ft at 0x7f0a6c6657e0>,
             'div', void_=False), id='')

show(LabelInput('My Label',id='myid'))

My Label

source

LabelRadio

 LabelRadio (label:str|fastcore.xml.FT, lbl_cls='', input_cls='',
             container=functools.partial(<function ft at 0x7f0a6c6657e0>,
             'div', void_=False), cls='flex items-center space-x-2',
             id='', **kwargs)

Div(Label,Input) component with Uk styling injected appropriately. Generally you should higher level API, such as UkTextArea which is created for you in this library

show(LabelRadio('My Label',id='myid'))

My Label

source

LabelCheckboxX

 LabelCheckboxX (label:str|fastcore.xml.FT, lbl_cls='', input_cls='',
                 container=functools.partial(<function ft at
                 0x7f0a6c6657e0>, 'div', void_=False), cls='flex items-
                 center space-x-2', id='', **kwargs)

Div(Label,Input) component with Uk styling injected appropriately. Generally you should higher level API, such as UkTextArea which is created for you in this library

show(LabelCheckboxX('My Label',id='myid'))

My Label

source

LabelRange

 LabelRange (*args, cls='space-y-2', lbl_cls='', input_cls='',
             container=functools.partial(<function ft at 0x7f0a6c6657e0>,
             'div', void_=False), id='')

show(LabelRange('My Label',id='myid'))

My Label

source

LabelTextArea

 LabelTextArea (*args, cls='space-y-2', lbl_cls='', input_cls='',
                container=functools.partial(<function ft at
                0x7f0a6c6657e0>, 'div', void_=False), id='')

show(LabelTextArea('mylabel',container=Form))

source

LabelSwitch

 LabelSwitch (*args, cls='space-x-2', lbl_cls='', input_cls='',
              container=functools.partial(<function ft at 0x7f0a6c6657e0>,
              'div', void_=False), id='')

show(LabelSwitch('mylabel',id='myid'))

mylabel

source

LabelSelect

 LabelSelect (*option, label:str|fastcore.xml.FT, lbl_cls='',
              input_cls='', container=functools.partial(<function ft at
              0x7f0a6c6657e0>, 'div', void_=False), cls='space-y-2',
              id='', **kwargs)

Div(Label,Input) component with Uk styling injected appropriately. Generally you should higher level API, such as UkTextArea which is created for you in this library

show(LabelSelect(Option(1),Option(2),label='My Label', id='myid'))

My Label

source

Options

 Options (*c, selected_idx:int=None, disabled_idxs:set=None)

Helper function to wrap things into Options for use in UkSelect

# list(map(to_xml,Options('option1','option2','option3', selected_idx=1, disabled_idxs={0,2})))

UK Select is a custom select that has more functionality than the basic select. One particularly useful feature is the searchable, which allows the user to type to search for options in the Select.

source

UkSelect

 UkSelect (*option, inp_cls=(), cls=('space-y-2',), id='', name='',
           placeholder='', searchable=False, **kwargs)

Creates a select dropdown with uk styling

source

LabelUkSelect

 LabelUkSelect (*option, label=(), lbl_cls=(), inp_cls=(),
                cls=('space-y-2',), id='', name='', placeholder='',
                searchable=False, **kwargs)

Creates a select dropdown with uk styling

show(UkSelect(Option(1),Option(2),label='My Label', id='myid', searchable=True))

Links

source

AT

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

Link styles from https://franken-ui.dev/docs/link

show(Div(cls='space-x-4')(('Default Link'),
                     A('Muted Link', cls=AT.muted),
                     A('Text Link', cls=AT.text),
                     A('Reset Link', cls=AT.reset)))

Default LinkMuted Link Text Link Reset Link

Lists

source

ListT

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

List styles from https://franken-ui.dev/docs/list

source

List

 List (*c, cls=(), **kwargs)

list_options = [(style,str(cls)) for style,cls in ListT.__members__.items()]
def create_list(style, cls): return List(fh.Li("Item 1"), fh.Li("Item 2"), cls=cls)

lists = [Div(H4(f"{style} List:"), create_list(style, cls)) for style, cls in list_options]
show(Div(*lists, cls="grid grid-cols-4"))

disc List:

Item 1
Item 2

circle List:

Item 1
Item 2

square List:

Item 1
Item 2

decimal List:

Item 1
Item 2

hyphen List:

Item 1
Item 2

muted List:

Item 1
Item 2

primary List:

Item 1
Item 2

secondary List:

Item 1
Item 2

bullet List:

Item 1
Item 2

divider List:

Item 1
Item 2

striped List:

Item 1
Item 2

Modal

source

ModalCloseButton

 ModalCloseButton (*c, cls=(), **kwargs)

source

ModalTitle

 ModalTitle (*c, cls=(), **kwargs)

source

ModalFooter

 ModalFooter (*c, cls=(), **kwargs)

source

ModalBody

 ModalBody (*c, cls=(), **kwargs)

source

ModalHeader

 ModalHeader (*c, cls=(), **kwargs)

source

ModalDialog

 ModalDialog (*c, cls=(), **kwargs)

source

ModalContainer

 ModalContainer (*c, cls=(), **kwargs)

show(ModalCloseButton('Modal Close Button', cls=ButtonT.primary))

source

Modal

 Modal (*c, header=None, footer=None, cls=(), dialog_cls=(),
        header_cls='p-6', body_cls='space-y-6', footer_cls=(), id='',
        **kwargs)

Create a Modal using the appropriate Modal classes to put the boilerplate in the appropriate places for you*

Show(Div(
    Button("Open Modal",uk_toggle="target: #my-modal" ),
    Modal(ModalTitle("Simple Test Modal"), 
          P("With some somewhat brief content to show that it works!", cls=TextFont.muted_sm),
          footer=ModalCloseButton("Close", cls=ButtonT.primary),id='my-modal')))

Open in new tab

Padding | Positioning

source

PaddingT

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

Padding Modifiers from https://franken-ui.dev/docs/padding

source

PositionT

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

Position modifiers from https://franken-ui.dev/docs/position

Other

source

Placeholder

 Placeholder (*c, cls=(), **kwargs)

show(Placeholder("Placeholder"))

Placeholder

source

Progress

 Progress (*c, cls=(), value='', max='', **kwargs)

show(Progress(value=20, max=100))

Icons and Avatars

source

UkIcon

 UkIcon (icon, height=None, width=None, stroke_width=None, cls=(),
         **kwargs)

source

UkIconLink

 UkIconLink (icon, height=None, width=None, stroke_width=None, cls=(),
             button=False, **kwargs)

Show(UkIcon("rocket",100,100,stroke_width=1))

Open in new tab

class IconButtonT(VEnum):
    xsmall = 'uk-icon-button-xsmall'
    small  = 'uk-icon-button-small'
    outline= 'uk-icon-button-outline'

source

DiceBearAvatar

 DiceBearAvatar (seed_name, h=20, w=20)

	Type	Default	Details
seed_name			Seed name (ie ‘Isaac Flath’)
h	int	20	Height
w	int	20	Width

show(DiceBearAvatar('Isaac Flath', 20, 20))

Flexbox | Grid

The most common pattern for spacing it to organize the general high level page layout with a Grid, and smaller components with Flex.

Tip

Play Flex Box Froggy to get an understanding of flex box.

source

FlexT

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

Flexbox modifiers from UIkit

source

GridT

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

Grid modifiers from UIkit

source

Grid

 Grid (*div, cols=None, cls=<GridT.small: 'uk-grid-small'>, **kwargs)

Creates a grid with the given number of columns, often used for a grid of cards

show(Grid(*map(Button, "abcdef"),cols=3))

We can use the FlexT enum above to create Divs that arrange components in a flex box in different ways.

For example, FullySpacedDiv applies a very common pattern so we’ve made a function that helps to this for you. But if you look at the code, it’s really just using the enum to apply the right combonation of flex classes.

source

FullySpacedDiv

 FullySpacedDiv (*c, cls='uk-width-1-1', **kwargs)

Creates a flex div with it’s components having as much space between them as possible

Exported source

def FullySpacedDiv(*c,                # Components
                   cls='uk-width-1-1',# Classes for outer div
                   **kwargs           # Additional args for outer div
                  ):                  # Div with spaced components via flex classes
    "Creates a flex div with it's components having as much space between them as possible"
    cls = stringify(cls)
    return Div(cls=(FlexT.block,FlexT.between,FlexT.middle,cls), **kwargs)(*c)

from functools import partial
_button = partial(Button,cls=ButtonT.primary)

show(FullySpacedDiv(*map(_button, range(3))))

source

CenteredDiv

 CenteredDiv (*c, cls='space-y-4', **kwargs)

Creates a flex div with it’s components centered in it

show(CenteredDiv(*map(_button, range(3))))

source

LAlignedDiv

 LAlignedDiv (*c, cls='space-x-4', **kwargs)

Creates a flex div with it’s components aligned to the left

show(LAlignedDiv(*map(_button, range(3))))

source

RAlignedDiv

 RAlignedDiv (*c, cls='space-x-4', **kwargs)

Creates a flex div with it’s components aligned to the right

show(RAlignedDiv(*map(_button, range(3))))

source

VStackedDiv

 VStackedDiv (*c, cls='space-y-4', **kwargs)

show(VStackedDiv(*map(_button, range(3))))

source

HStackedDiv

 HStackedDiv (*c, cls='space-x-4', **kwargs)

show(HStackedDiv(*map(_button, range(3))))

Nav

A Nav is something highly versatile that is the foundation for many things. Three common places to use a Nav:

+ On its own as a sidebar navigation
+ In a button to give it a drop-down like behavior
+ In a Navbar to give drop down options in the navbar

source

NavT

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

An enumeration.

source

NavContainer

 NavContainer (*li, cls=<NavT.primary: 'uk-nav-primary'>, parent=True,
               uk_nav=False, **kwargs)

mbrs1 = [Li(A('Option 1'), cls='uk-active'), 
         Li(A('Option 2')),
         Li(A('Option 3'))]

show(NavContainer(*mbrs1))

Option 1
Option 2
Option 3

source

NavCloseLi

 NavCloseLi (*c, cls=(), **kwargs)

source

NavSubtitle

 NavSubtitle (*c, cls=<TextFont.muted_sm: 'uk-text-muted uk-text-small'>,
              **kwargs)

source

NavHeaderLi

 NavHeaderLi (*c, cls=(), **kwargs)

source

NavDividerLi

 NavDividerLi (*c, cls=(), **kwargs)

source

NavParentLi

 NavParentLi (*nav_container, cls=(), **kwargs)

NavDividerLi()

<li class="uk-nav-divider "></li>

mbrs2 = [Li(A('Child 1')), Li(A('Child 2')),Li(A('Child 3'))]

Show(
    NavContainer(
        NavHeaderLi("NavHeaderLi"),
        *mbrs1,
        Li(A(href='')(Div("Subtitle Ex",NavSubtitle("NavSubtitle text to be shown")))),
        NavDividerLi(),
        NavParentLi(
            A('Parent Name'),
            NavContainer(*mbrs2,parent=False),
             ),
    )
)

Open in new tab

def NavParentIcon(): return Span(uk_nav_parent_icon=True)

NavBar

source

NavBarCenter

 NavBarCenter (*c, cls=(), **kwargs)

source

NavBarRSide

 NavBarRSide (*c, cls=(), **kwargs)

source

NavBarLSide

 NavBarLSide (*c, cls=(), **kwargs)

source

NavBarContainer

 NavBarContainer (*c, cls=(), container_cls=<ContainerT.expand: 'uk-
                  container-expand'>, uk_navbar=True, **kwargs)

source

NavBarNav

 NavBarNav (*li, cls=(), **kwargs)

source

NavBarSubtitle

 NavBarSubtitle (title, subtitle, cls=(), subtitle_cls=<TextFont.muted_sm:
                 'uk-text-muted uk-text-small'>, **kwargs)

source

NavBarNavContainer

 NavBarNavContainer (*li, cls=<NavT.primary: 'uk-nav-primary'>,
                     parent=True, uk_nav=False, **kwargs)

source

NavBarParentIcon

 NavBarParentIcon ()

l = NavBarNav(Li(cls='uk-active')(A("Active",href='')),
              Li(A("Parent",href=''),
                  NavBarNavContainer(
                      Li(cls='uk-active')(A("Active",href='')),
                      Li(A("Item",href='')),
                      Li(A("Item",href='')))),
              Li(A("Item",href='')))

r = NavBarNav(
            Li(cls='uk-active')(A(NavBarSubtitle("Title","Subtitle"),href='')),
            Li(A("DropDown",NavBarParentIcon(),href=''),
                NavBarNavContainer(
                    NavHeaderLi("NavHeaderLi"),
                    *mbrs1,
                    Li(A(href='')(Div("Subtitle Ex",NavSubtitle("NavSubtitle text to be shown")))),
                    NavDividerLi(),
                    NavParentLi(
                        A('Parent Name'),
                        NavContainer(*mbrs2,parent=False)))),
            
    Li(A(NavBarSubtitle("Title","Subtitle"),href='')))

Show(
NavBarContainer(
    NavBarLSide(l),
    NavBarRSide(r)
)
)

Open in new tab

DropDown

source

DropDownNavContainer

 DropDownNavContainer (*li, cls=<NavT.primary: 'uk-nav-primary'>,
                       parent=True, uk_nav=False, uk_dropdown=True,
                       **kwargs)

Show(Div(
        Button("Open DropDown"),
        DropDownNavContainer(Li(A("Item 1",href=''),Li(A("Item 2",href=''))))))

Open in new tab

Tabs

source

TabContainer

 TabContainer (*li, cls='', alt=False, **kwargs)

show(Container(TabContainer(
    Li(A("Active",href='#', cls='uk-active')),
    Li(A("Item",href='#')),
    Li(A("Item",href='#')),
    Li(A("Disabled",href='#', cls='uk-disabled')),
    alt=True)))

show(Container(TabContainer(
    Li(A("Active",href='#', cls='uk-active')),
    Li(A("Item",href='#')),
    Li(A("Item",href='#')),
    Li(A("Disabled",href='#', cls='uk-disabled')),
    )))

Cards

source

CardT

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

Card styles from UIkit

source

CardContainer

 CardContainer (*c, cls=<CardT.default: 'uk-card-default'>, **kwargs)

source

CardFooter

 CardFooter (*c, cls=(), **kwargs)

source

CardBody

 CardBody (*c, cls=(), **kwargs)

source

CardHeader

 CardHeader (*c, cls=(), **kwargs)

source

CardTitle

 CardTitle (*c, cls=(), **kwargs)

source

CardTitle

 CardTitle (*c, cls=(), **kwargs)

source

Card

 Card (*c, header=None, footer=None, body_cls='space-y-6', header_cls=(),
       footer_cls=(), cls=(), **kwargs)

show(
    Card(
        Form(LabelInput("Input"),LabelRange("Range")),
        header=Div(CardTitle("Header"),P("A card with header and footer",cls=TextFont.muted_sm)),
        footer=LAlignedDiv(Button("Footer Submit button")),
)
)

Header

A card with header and footer

Tables

source

TableT

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

An enumeration.

source

Table

 Table (*args, cls=(<TableT.middle: 'uk-table-middle'>, <TableT.divider:
        'uk-table-divider'>, <TableT.hover: 'uk-table-hover'>,
        <TableT.small: 'uk-table-small'>), **kwargs)

source

Tbody

 Tbody (*rows, cls=(), sortable=False, **kwargs)

source

Thead

 Thead (*rows, cls=(), **kwargs)

source

Tr

 Tr (*cells, cls=(), **kwargs)

source

Th

 Th (*args, cls=(), shrink=False, expand=False, small=False)

source

Td

 Td (*args, cls=(), shrink=False, expand=False, small=False)

show(
Table(
    Thead(Tr(Th('Name'), Th('Age'), Th('City'))),
    Tbody(Tr(Td('Alice'), Td('25'), Td('New York')),
          Tr(Td('Bob'), Td('30'), Td('San Francisco')),
          Tr(Td('Charlie'), Td('35'), Td('London'))),
    Tfoot(Tr(Td('Total'), Td('90'))))
)

Name	Age	City
Alice	25	New York
Bob	30	San Francisco
Charlie	35	London
Total	90

source

TableFromLists

 TableFromLists (header_data, body_data, footer_data=None,
                 header_cell_render=<function Th>,
                 body_cell_render=<function Td>,
                 footer_cell_render=<function Td>, cls=(<TableT.middle:
                 'uk-table-middle'>, <TableT.divider: 'uk-table-divider'>,
                 <TableT.hover: 'uk-table-hover'>, <TableT.small: 'uk-
                 table-small'>), sortable=False, **kwargs)

# Test the function
header = ['Name', 'Age', 'City']
body = [['Alice', '25', 'New York'],
        ['Bob', '30', 'San Francisco'],
        ['Charlie', '35', 'London']]
footer = ['Total', '90']

show(TableFromLists(header, body, footer))

Name	Age	City
Alice	25	New York
Bob	30	San Francisco
Charlie	35	London
Total	90

source

TableFromDicts

 TableFromDicts (header_data:Sequence, body_data:Sequence[dict],
                 footer_data=None, header_cell_render=<function Th>,
                 body_cell_render=<function <lambda>>,
                 footer_cell_render=<function <lambda>>,
                 cls=(<TableT.middle: 'uk-table-middle'>, <TableT.divider:
                 'uk-table-divider'>, <TableT.hover: 'uk-table-hover'>,
                 <TableT.small: 'uk-table-small'>), sortable=False,
                 **kwargs)

# Example usage:
def header_render(v): return Th(v.upper())
def body_render(k, v):
    match k.lower():
        case 'name': return Td(v['name'], cls='font-bold')
        case 'age': return Td(f"{v['age']} years")
        case _: return Td(v[k.lower()])

header_data = ['Name', 'Age', 'City']
body_data = [{'name': 'Alice', 'age': 30, 'city': 'New York'},
             {'name': 'Bob', 'age': 25, 'city': 'London'}]

show(TableFromDicts(header_data, body_data, header_cell_render=header_render, body_cell_render=body_render))

NAME	AGE	CITY
Alice	30 years	New York
Bob	25 years	London

Markdown

source

apply_classes

 apply_classes (html_str:str, class_map=None, class_map_mods=None)

_test = apply_classes("<div><h1>Hello, world!</h1></div>", class_map_mods={'h1': 'uk-h1 my-4 mb-4'})
assert _test == '<div><h1 class="uk-h1 my-4 mb-4">Hello, world!</h1></div>'

source

render_md

 render_md (md_content)

_

<script>
window.addEventListener('load', function() {
    for (let i = 1; i <= 6; i++) {
        document.querySelectorAll(`h${i}`).forEach(el => {
            el.classList.add(`uk-h${i}`);
        });
    }
});

document.querySelectorAll('.sidebar-item-text').forEach(el => {
  el.style.visibility = 'visible';
})

</script>