Back to Polythene Shadow main page

Shadow component for Mithril

• Options
• Usage
• Appearance
  • Styling
    • Themed component
    • CSS

Options

Shadow options

Usage

Shadow has 5 depth levels, configured with option shadowDepth.

import m from "mithril"
import { Shadow } from "polythene-mithril"

m(Shadow, { shadowDepth: 2 })

To add a shadow to an element, the element must have the style position: "relative". In this example the shadow is added to the outer div:

m(".outer",
  {
    style: { position: "relative" }
  },
  [
    m("span", "Some card"),
    m(Shadow, { shadowDepth: 2 })
  ]
)

To animated the shadow on change, use animated. Using a dynamic shadowDepth value from vnode.state:

m(Shadow, {
  shadowDepth: vnode.state.shadowDepth,
  animated: true
})

Appearance

Styling

Below are examples how to change the shadow appearance, either with a theme or with CSS.

You can find more information about theming in Theming.

Themed component

import { ShadowCSS } from "polythene-css"

ShadowCSS.addStyle(".themed-shadow", {
  shadow_bottom_depth_1: "10px 10px 10px 0px rgba(45,58,112,.5)"
})

m(Shadow, {
  className: "themed-shadow"
})

Depth can be set using a theme (replacing the component option):

ShadowCSS.addStyle(".themed-shadow", {
  shadow_depth: 3
})

CSS

Change CSS using the Shadow CSS classes.

Class names can be imported with:

import classes from "polythene-css-classes/shadow"