Demo - Material Design Lite for Seaside

Variations on Material Design buttons like anchors.

Colored FAB

With ripple

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		fab;
		colored;
		with: '+'

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		fab;
		colored;
		rippleEffect;
		with: '+'

Plain FAB

With ripple

Disabled

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		fab;
		with: '+'

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		fab;
		rippleEffect;
		with: '+'

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		fab;
		disabled;
		with: '+'

Colored button

Accent colored

With Ripples

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		primaryColor;
		with: 'Button'

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		accentColor;
		with: 'Button'

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		accentColor;
		rippleEffect;
		with: 'Button'

Plain raised

With ripple

Disabled

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		raised;
		with: 'Button'

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		raised;
		rippleEffect;
		with: 'Button'

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		raised;
		disabled;
		with: 'Button'

Colored button

Accent colored

With Ripples

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		raised;
		primaryColor;
		with: 'Button'

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		raised;
		accentColor;
		with: 'Button'

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		raised;
		accentColor;
		rippleEffect;
		with: 'Button'

Flat button

With ripple

Disabled

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		with: 'Button'

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		rippleEffect;
		with: 'Button'

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		disabled;
		with: 'Button'

Icon button

Colored

	"We could also use the #icon: method"
	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		icon;
		with: [ html mdlIcon: 'mood' ]

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		primaryColor;
		icon: 'mood'

Mini FAB

Colored

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		fab;
		miniFab;
		with: '+'

	html mdlAnchorButton
		callback: [ 'Test' crLog ];
		fab;
		colored;
		miniFab;
		with: '+'