Material Ui Fullscreen Dialog

screenshot of Material Ui Fullscreen Dialog
react
material-ui

Material Ui Fullscreen Dialog

A fullscreen dialog for Material-UI.

Overview

material-ui-fullscreen-dialog is a project that provides a fullscreen dialog component for Material-UI. It allows users to display a fullscreen dialog with various customizable properties and features.

Features

  • actionButton: A customizable button used as the affirmative action button.
  • appBarClassName: Allows users to set custom CSS classes for the app bar.
  • appBarStyle: Overrides the inline-styles of the app bar.
  • appBarZDepth: Controls the z-depth of the app bar, affecting its shadow.
  • children: The content elements to be displayed in the dialog.
  • closeIcon: Customizable icon element used for the dismissive action.
  • containerClassName: Allows users to set custom CSS classes for the dialog's children container.
  • containerStyle: Overrides the inline-styles of the dialog's children container.
  • immersive: Toggles immersive mode, overlaying the content with a semi-transparent gradient.
  • onRequestClose: Callback function invoked when the dismissive action button is touched.
  • open: Controls whether the dialog is opened or not.
  • style: Overrides the inline-styles of the dialog's root element.
  • title: The title of the dialog.
  • titleStyle: Overrides the inline-styles of the app bar's title element.

Installation

To install material-ui-fullscreen-dialog, you can use npm or yarn. Here is an example of how to install it using npm:

npm install material-ui-fullscreen-dialog

After installing, you can import the component in your code and start using it:

import FullscreenDialog from 'material-ui-fullscreen-dialog';

Summary

material-ui-fullscreen-dialog is a project that provides a fullscreen dialog component for Material-UI. It offers various customization options, such as setting custom CSS classes, overriding inline-styles, and controlling the immersive mode. The component is easy to install and use, making it a useful addition for developers working with Material-UI.

react
React

React is a widely used JavaScript library for building user interfaces and single-page applications. It follows a component-based architecture and uses a virtual DOM to efficiently update and render UI components

material-ui
Material UI

material-ui adds classes to Tailwind CSS for all common UI components. Classes like btn, card, etc. This allows us to focus on important things instead of making basic elements for every project.