readme.md

musicfox-dash-components

Dash components from your favorite music technology company musicfox.io

Quickstart

Get the goods:

pip install --user musicfox-dash-components

Then import the musicfox.io component library:

>>> import musicfox_dash_components as mdc

Hello component: mdc.Hello

This component narrowly implements a typical web-walkthrough intro using a small subset of the intro.js component library.

Usage

>>> steps = [
>>>     dict(intro='my intro language', element='#selector-by-id1'),
>>>     dict(intro='my other intro language', element='.selector-by-class1'),
>>>     dict(intro='my other other intro language', element='.position-test', position='right'), #whoa...
>>> ]
>>> mdc.Hello(steps=steps) # no HTML-5 attributes necessary as Hello will fire on page load for the given steps

ToDo component: mdc.ToDo

This component narrowly implements a ToDo card with five simple sections: A Header, A Title, a Subtitle, a ToDo List and a Footer.

Weekly todos

Groceries

Things we need to acquire from the market

• Apples
• Pears
• Blueberries
• Cereal
• ...

You get the point. 😉

Usage

>>> mdc.ToDo(id="my-todo-container",
>>>     title="Groceries",
>>>     subtitle="Our weekly list of items to obtain from a grocer.",
>>>     todos=[ # a list of markdown-formatted strings
>>>         "Apples", "Pears", "Blueberries", 
>>>         "Cereal", "Kidney Beans", 
>>>         "Tofu", "Ribeye Steak",
>>>         "Nutella",
>>>     ],
>>>     footer=f"Updated: just {pd.datetime.now()}"
>>> ) # Sometimes, less is more. 

We use Bootstrap cards and React-markdown under the hood.
Visit them for styling info, etc...
Required Params

• id: a string id for the composed element
• todos: a list of strings or dictionary key:value string:list, a ToDo List
  • a todo can always be nested as dictionary string key and value list (and possibly more dictionaries)

Optional Params

• header: a string Header for the todo list
• title: a string Title for the todo list
• subtitle: a string Subtitle for the todo list
• footer: a string Footer for the todo list

Twash component: mdc.Twash

Twitter, for Dash.

This component implements an embedded Twitter timeline.

Usage

>>> mdc.Twash(
>>>     id='myDOMId',
>>>     handle="PostMalone",
>>> ) # full page blasting of Post Malone's Twitter