material-design

Hide FAB when onscreen keyboard appear

by

You can achieve it by checking for keyboard visibility using viewInsets and hide fab based on it. Example: import ‘package:flutter/material.dart’; void main() { runApp(new MaterialApp( title: “Example”, home: new FabHideOnKeyboard(), )); } class FabHideOnKeyboard extends StatefulWidget { @override _FabHideOnKeyboardState createState() => new _FabHideOnKeyboardState(); } class _FabHideOnKeyboardState extends State<FabHideOnKeyboard> { @override Widget build(BuildContext context) { final … Read more

How to set the CSS content property with a Google Material Icon?

by

Update on 2018 Google removed the codes which were displayed earlier for IE9 and below. To get the codes visit the codepoints file in the GitHub repository. Link to codepoints in GitHub repository: https://github.com/google/material-design-icons/blob/master/font/MaterialIcons-Regular.codepoints Step 1: Include the Material Icons Stylesheet. <link href=”https://fonts.googleapis.com/icon?family=Material+Icons” rel=”stylesheet”> Step 2 : CSS Code: .bullet li a:before { font-family: “Material … Read more

Material UI v5: TypeError: Cannot read properties of undefined (reading ‘create’)

by

Just ran into this myself. You can import createTheme from @mui/material/styles or @mui/system, but they do slightly different things: You can use the utility coming from the @mui/system package, or if you are using @mui/material, you can import it from @mui/material/styles. The difference is in the default theme that is used (if no theme is … Read more

Angular Material VS Materializecss [closed]

by

Go for Materialize. I don’t know why people downvoted your question. It is a legitimate question. And though Angular Material looks like a more attractive choice as it has the famous word “Angular” in its name. But it is definitely not the right choice. It may have better integration with angular but a good programmer … Read more

does angular material have a grid system?

by

If you are using Material2, you can use Angular Flex Layout for responsiveness. It compliments Angular2 well and is lightweight. Basically Material2 + Flex-layout is equivalent to Bootsrap library. Here’s an example of how flex-layout can be used for grid system/responsiveness with Angular/Material2. Sample Code showing use of flex-layout API: <div fxShow.xs=”true” fxShow=”false” >Screen size … Read more

How to set the date in materialize datepicker

by

Materialize datepicker is a modified pickadate.js picker. Accodging to their API docs, this is how to set the picker: Get the picker: var $input = $(‘.datepicker’).pickadate() // Use the picker object directly. var picker = $input.pickadate(‘picker’) Set the date: // Using arrays formatted as [YEAR, MONTH, DATE]. picker.set(‘select’, [2015, 3, 20]) // Using JavaScript Date … Read more