import m from 'mithril' ; import { Card , RadioGroup , Switch , Size } from '@/' ; import { Example , SizeSelect } from '@shared/examples' ; const EXAMPLE_SRC = 'components/card/examples/index.ts' ; const elevations = [ '0' , '1' , '2' , '3' , '4' ] ; export class CardExample { private elevation = 1 ; private fluid : boolean ; private interactive = false ; private size : Size ; public view ( ) { return m ( Example , { options : this . renderOptions ( ) , center : true , src : EXAMPLE_SRC } , [ m ( Card , { elevation : this . elevation , fluid : this . fluid , interactive : this . interactive , size : this . size , style : 'min-width: 300px' } , m ( 'h4' , 'Card title' ) , m ( '' , 'Card content' ) ) ] ) ; } private renderOptions ( ) { return [ m ( 'h5' , 'Size' ) , m ( SizeSelect , { value : this . size , onSelect : ( size ) => this . size = size } ) , m ( Switch , { label : 'Interactive' , onchange : ( ) => this . interactive = ! this . interactive } ) , m ( Switch , { label : 'Fluid' , onchange : ( ) => this . fluid = ! this . fluid } ) , m ( 'h5' , 'Elevation' ) , m ( RadioGroup , { options : elevations , value : this . elevation . toString ( ) , onchange : ( e ) => this . elevation = parseInt ( ( e . currentTarget as HTMLInputElement ) . value ) } ) ] ; } }