Components

Links to Mithril component examples.

Note: Some of these code samples were developed with the old module pattern (pre 0.2.0). It shouldn't be difficult to convert them to the current component architecture

If you can't find what you're looking for here, try looking in Recipes and Snippets.

---

Table of Contents

• Collections
• Cross Component Communication
• Examples
  • Modals
  • Select
  • Radio Buttons
  • Infinite Scroll
  • Content Sliders and Page Flips
  • Data - sort, search, filter
  • Search Box - in-page & site
  • Tooltips
  • Twitter
  • Misc

Collections

• mithril-elements by Phil Toms, a Starter kit for building apps with Mithril custom element types with demo, uses an older version of Mithril, includes Accordion, Jumbotron, Tabset/Tabs, Modal, Use of Occlusion Scroller
• mithril-components - a library of components, mixins and patterns.
• mithril-bootstrap - a lot of work has been done porting bootstrap to Mithril but the project is still in development.
• Polythene - Polymer inspired modular implementation of Material Design
• mithril-mdl - Material Design Lite components
• mui - A very very simple ui library collection
• Construct-UI - A UI library

Communication

• Child to child communication in CoffeeScript.
• See this Stack Overflow answer.

Examples

Modals

• Basic modal/popup/dialog
• mithril-modal from Human Design
• Modal dialog component
• Bootstrap Modal
• mithril-modal - common.js with inline styles

Select

• Select
• simple select component - a simple component that wraps around

Radio

• Radio Buttons example

Checkbox

• Mithril Styled Checkbox

Infinite Scroll

• Infinite Scroll - Infinite scroll for Mithril by Arthur Clemens
• Scroll Occlusion plugin
• A scroll-occluded bootstrap media-list example - see the DEMO
• Infinite Scroll

Data

• Treebeard - A hierarchical data renderer - sort, search, filter data

Content Sliders

• Mithril Slider - Content slider for Mithril
• Mithril Page Slider - Page slider for Mithril
• Page Slider example - uses mithril-transition and pure CSS
• Animated Page Flip - with velocity.js

Search

• Search page text - highlights found text as you type
• Search Github for repository - uses (Reactive) RxJS Observables + auto-complete
• Incremental Search

Tooltips

• Basic tooltip - always appears below
• Tooltips

Twitter

• Post to Twitter in JavaScript or CoffeeScript.

Misc

• sm-table -- semantic-ui data table widget with optional pagination
• Nested Components - DEPRECATED. USE MODERN COMPONENTS
• Video chooser/player + example of paging a long list