Materialize CSS Snippets

Become more efficient to create layout with Materialize CSS

Steps

1. Fork and prepare to run at .vue | .js | .jsx | .tsx | [done]

2. Review Snippets and Create New Snippets [coming soon]

How to use

Snippets are arranged according to the structure of the official documentation of Materialize css, only type mz- and the component that you want to use. Example: mz-card This will show you all available for the card component snippets. Remember to put the word mz- and then the component that you want to call, card, btn, table, navbar, sidenav etc...

Table of Contents

Template

Snippet	Snippet Content	Description
mz-template:	cnd	Basic html structure using cdn files
mz-template:	local	Basic html structure using local files
mz-template:	grid	Basic grid structure

CSS

mediacss

Snippet	Snippet Content	Description
mz-mediacss:	img-circular	Circular Image
mz-mediacss:	img-responsive	Responsive Image
mz-mediacss:	video-embeds	Embeds video
mz-mediacss:	video-responsive	Responsive Video

table

Snippet	Snippet Content	Description
mz-table:	bordered	Bordered Table
mz-table:	centered	Centered Table
mz-table:	default	Default Table
mz-table:	highlight	Highlight Table
mz-table:	responsive	Responsive Table
mz-table:	striped	Striped Table

typography

Snippet	Snippet Content	Description
mz-typography:	blockquote	Blockquote
mz-typography:	flow-text	Responsive Text

Components

badge

Snippet	Snippet Content	Description
mz-badge:	default	Default Badge
mz-badge:	new	New Badge

breadcrumb

Snippet	Snippet Content	Description
mz-breadcrumb:	breadcrumb	Breadcrumb

buttons

Snippet	Snippet Content	Description
mz-btn:	default	Default Button
mz-btn:	disabled	Disabled Button
mz-btn:	fab-ct-h	Fixed action button click to toggle horizontal
mz-btn:	fab-ct-v	Fixed action button click to toggle vertical
mz-btn:	fab-h	Fixed action button horizontal
mz-btn:	fab-toolbar	Fixed action button toolbar
mz-btn:	fab-v	Fixed action button vertical
mz-btn:	flat	Button Flat
mz-btn:	flat-disabled	Button flat disabled
mz-btn:	floating	Button Floating
mz-btn:	floating-disabled	Button Floating Disabled
mz-btn:	icon-left	Button with icon to the left
mz-btn:	icon-right	Button with icon to the right
mz-btn:	large	Large Button
mz-btn:	large-disabled	Large Button Diasbled
mz-btn:	large-icon-left	Large button with icon on the left
mz-btn:	large-icon-right	Large button with icon on the right
mz-btn:	submit	Submit Button
mz-btn:	fab-toolbar	Fixed action button toolbar

card

Snippet	Snippet Content	Description
mz-card:	basic	Basic Card
mz-card:	fab-large	Card with large Floating Action Button
mz-card:	fab-small	Card with small Floating Action Button
mz-card:	panel	Panel Card
mz-card:	horizontal	Horinzontal Card
mz-card:	image	Image Card
mz-card:	image-lg	Image Card Large
mz-card:	image-md	Image Card Medium
mz-card:	image-sm	Image Card Small
mz-card:	rao-default	Card reveal action option default
mz-card:	rao-lg	Card reveal action option large
mz-card:	rao-md	Card reveal action option medium
mz-card:	rao-sm	Card reveal action option small
mz-card:	reveal-default	Card reveal default
mz-card:	reveal-lg	Card reveal large
mz-card:	reveal-md	Card reveal medium
mz-card:	reveal-sm	Card reveal small

chips

Snippet	Snippet Content	Description
mz-chips:	contact	Chip Contacts
mz-chips:	tags	Chip Tags
mz-chips:	tags-close	Chip tag with icon close

collections

Snippet	Snippet Content	Description
mz-collections:	avatar	Avatar Collection
mz-collections:	basic	Basic Collection
mz-collections:	dismissable-content	Dismissable Content collection
mz-collections:	headers	headers collection
mz-collections:	link	Link Collection
mz-collections:	link-active	Link active collection
mz-collections:	secondary-content	Secondary Content Collection

footer

Snippet	Snippet Content	Description
mz-footer:	default	Footer Default

forms

Snippet	Snippet Content	Description
mz-forms:	contact	Contact Form

icons

Snippet	Snippet Content	Description
mz-icons:	default	Default Icon
mz-icons:	lg-icon	Large Icon
mz-icons:	md-icon	Medium Icon
mz-icons:	sm-icon	Small Icon
mz-icons:	tn-icon	Tiny Icon

navbar

Snippet	Snippet Content	Description
mz-navbar:	full_width	Menu full width
mz-navbar:	full-width-fixed	Menu fixed full width
mz-navbar:	width-centered	Menu width centered
mz-navbar:	width-centered-fixed	Menu fixed width centered
mz-navbar:	with-tabs	Menu with tabs

pagination

Snippet	Snippet Content	Description
mz-pagination:	default	Pagination Default

preloader

Snippet	Snippet Content	Description
mz-preloader:	circular-flashing-colors-lg	Preloader circular flashing colors big
mz-preloader:	circular-flashing-colors-default	Preloader circular flashing colors default
mz-preloader:	circular-flashing-colors-sm	Preloader circular flashing colors small
mz-preloader:	color-circular-lg	Preloader color circular big
mz-preloader:	color-circular-default	Preloader color circular default
mz-preloader:	color-circular-sm	Preloader color circular small
mz-preloader:	linear-determinate	Preloader linear determinate
mz-preloader:	linear-indeterminate	Preloader linear indeterminate

JavaScript

carousel

Snippet	Snippet Content	Description
mz-corousel:	default	Default Carousel
mz-corousel:	full-width	Carousel full width
mz-corousel:	special-options	Special options carousel

collapsible

Snippet	Snippet Content	Description
mz-collasible:	accordion	Collapsible accordion
mz-collasible:	expandable	Collapsible expandable
mz-collasible:	popout	Collapsible popout

dialogs

Snippet	Snippet Content	Description
mz-dialogs:	callback-toast	Callback Toast
mz-dialogs:	rounded-toast	Rounded Toast
mz-dialogs:	toast-default	Default Toast
mz-dialogs:	tooltips-bottom	Tooltips Bottom
mz-dialogs:	tooltips-left	Tooltips Left
mz-dialogs:	tooltips-right	Tooltips Right
mz-dialogs:	tooltips-top	Tooltips Top

dropdown

Snippet	Snippet Content	Description
mz-dropdown:	dropdown	Dropdown Structure

featurediscovery

Snippet	Snippet Content	Description
mz-featurediscovery:	tap-target	Tap Target

mediajs

Snippet	Snippet Content	Description
mz-mediajs:	material-box	Material design lightbox
mz-mediajs:	material-box-captions	Material design lightbox captions
mz-mediajs:	slider	Material design slider
mz-mediajs:	slider-fullscreen	Material design slider fullscreen

modals

Snippet	Snippet Content	Description
mz-modals:	bottom-sheet	Bottom Sheet Modal
mz-modals:	default	Default Modal
mz-modals:	fixed-footer	Fixed Footer Modal

sidenav

Snippet	Snippet Content	Description
mz-sidenav:	dropdown-structure	Sidenav Dropdown
mz-sidenav:	fixed-structure	Sidenav Fixed
mz-sidenav:	fullscreen-structure	Sidenav Fullscreen
mz-sidenav:	html-structure	Sidenav HTML Structure

tabs

Snippet	Snippet Content	Description
mz-tabs:	default	Default Tab
mz-tabs:	swipeable	Swipeable tab

Special Thanks

Thanks to Lenin Peña

Forked from materialize-snippets-vscode

Enjoy it!