Card wrapper

Note: this is a simple wrapper for material design lite with mithril

Resource:

Mithril link
Material design lite link

Implement

// es6
let demoCard = {
  view(ctrl, args) {
    args = Object.assign(args, {
      stylename: formatName(args.caption) || 'demo',
      width: args.width || 400,
      height: args.height || 400
    });
    return m(Grid, {}, [
      m('style', {}, `.${args.stylename}-card-image.mdl-card {
          width: ${args.width}px;
          height: ${args.height}px;
          background: url('${args.src}') center / cover;
        }
        .${args.stylename}-card-image > .mdl-card__actions {
          height: 52px;
          padding: 16px;
          background: rgba(0, 0, 0, 0.2);
        }
        .${args.stylename}-card-image__filename {
          color: #fff;
          font-size: 14px;
          font-weight: 500;
        }`
      ),
      m('div', {class: `${args.stylename}-card-image mdl-card mdl-shadow--2dp`}, [
        m('div', {class: `mdl-card__title mdl-card--expand`}, ''),
        m('div', {class: 'mdl-card__actions'}, m(`span.${args.stylename}-card-image__filename`, {}, args.caption || ''))
      ])
    ]);
  }
}

Usage:

m('div', {}, m(demoCard, {
  src: 'http://img6.cache.netease.com/photo/0001/2016-01-13/BD6V26T55MC30001.jpg',
  caption: 'demo'}, '')
);

Screenshot