React Material-UI Cookbook电子书

Dedication

About Packt

Why subscribe?

Packt.com

Contributors

About the author

About the reviewers

Packt is searching for authors like you

Preface

Who this book is for

What this book covers

To get the most out of this book

Download the example code files

Download the color images

Conventions used

Sections

Getting ready

How to do it…

How it works…

There's more…

See also

Get in touch

Reviews

Grids - Placing Components on the Page

Introduction

Applying breakpoints

How to do it...

How it works...

There's more...

See also

Filling space

How to do it...

How it works...

There's more...

See also

Abstracting containers and items

How to do it...

How it works...

There's more...

See also

Fixed column layout

How to do it...

How it works...

There's more...

See also

Changing column direction

How to do it...

How it works...

There's more...

See also

App Bars - The Top Level of Every Page

Introduction

Fixed position

How to do it...

How it works...

There's more...

See also

Hide on scroll

How to do it...

How it works...

There's more...

See also

Toolbar abstraction

How to do it...

How it works...

There's more...

See also

With navigation

How to do it...

How it works...

There's more...

See also

Drawers - A Place for Navigation Controls

Introduction

Drawer types

How to do it...

How it works...

There's more...

See also

Drawer item state

How to do it...

How it works...

There's more...

See also

Drawer item navigation

How to do it...

How it works...

There's more...

See also

Drawer sections

How to do it...

How it works...

There's more...

See also

AppBar interaction

How to do it...

How it works...

There's more...

See also

Tabs - Grouping Content into Tab Sections

Introduction

AppBar integration

How to do it...

How it works...

There's more...

See also

Tab alignment

How to do it...

How it works...

There's more...

See also

Rendering tabs based on state

How to do it...

How it works...

There's more...

See also

Abstracting tab content

How to do it...

How it works...

There's more...

See also

Tab navigation with routes

How to do it...

How it works...

There's more...

See also

Expansion Panels - Group Content into Panel Sections

Introduction

Stateful expansion panels

How to do it...

How it works...

There's more...

See also

Formatting panel headers

How to do it...

How it works...

There's more...

See also

Scrollable panel content

How to do it...

How it works...

See also

Lazy loading panel content

How to do it...

How it works...

There's more...

See also

Lists - Display Simple Collection Data

Introduction

Using state to render list items

How to do it...

How it works...

There's more...

See also

List icons

How to do it...

How it works...

There's more...

See also

List avatars and text

How to do it...

How it works...

There's more...

See also

List sections

How to do it...

How it works...

There's more...

See also

Nested lists

How to do it...

How it works...

There's more...

See also

List controls

How to do it...

How it works...

There's more...

See also

Scrolling lists

How to do it...

How it works...

See also

Tables - Display Complex Collection Data

Introduction

Stateful tables

How to do it...

How it works...

There's more...

See also

Sortable columns

How to do it...

How it works...

There's more...

See also

Filtering rows

How to do it...

How it works...

See also

Selecting rows

How to do it...

How it works...

See also

Row actions

How to do it...

How it works...

See also

Cards - Display Detailed Information

Introduction

Main content

How to do it...

How it works...

See also

Card header

How to do it...

How it works...

There's more...

See also

Performing actions

How to do it...

How it works...

There's more...

See also

Presenting media

How to do it...

How it works...

There's more...

See also

Expandable cards

How to do it...

How it works...

See also

Snackbars - Temporary Messages

Introduction

Snackbar content

How to do it...

How it works...

There's more...

See also

Controlling visibility with state

How to do it...

How it works...

There's more...

See also

Snackbar transitions

How to do it...

How it works...

See also

Positioning snackbars

How to do it...

How it works...

There's more...

See also

Error boundaries and error snackbars

How to do it...

How it works...

There's more...

See also

Snackbars with actions

How to do it...

How it works...

There's more...

See also

Queuing snackbars

How to do it...

How it works...

See also

Buttons - Initiating Actions

Introduction

Button variants

How to do it...

How it works...

See also

Button emphasis

How to do it...

How it works...

There's more...

See also

Link buttons

How to do it...

How it works...

There's more...

See also

Floating actions

How to do it...

How it works...

There's more...

See also

Icon buttons

How to do it...

How it works...

See also

Button sizes

How to do it...

How it works...

There's more...

See also

Text - Collecting Text Input

Introduction

Controlling input with state

How to do it...

How it works...

There's more...

See also

Placeholder and helper text

How to do it...

How it works...

See also

Validation and error display

How to do it...

How it works...

There's more...

See also

Password fields

How to do it...

How it works...

There's more...

See also

Multiline input

How to do it...

How it works...

There's more...

See also

Input adornments

How to do it...

How it works...

There's more...

See also

Input masking

How to do it...

How it works...

See also

Autocomplete and Chips - Text Input Suggestions for Multiple Items

Introduction

Building an Autocomplete component

How to do it...

How it works...

Text input control

Options menu

No options available

Individual option

Placeholder text

SingleValue

ValueContainer

IndicatorSeparator

Clear option indicator

Show menu indicator

Styles

The Autocomplete

See also

Selecting autocomplete suggestions

How to do it...

How it works...

See also

API-driven Autocomplete

How to do it...

How it works...

See also

Highlighting search results

How to do it...

How it works...

See also

Standalone chip input

How to do it...

How it works...

See also

Selection - Make Selections from Choices

Introduction

Abstracting checkbox groups

How to do it...

How it works...

There's more...

See also

Customizing checkbox items

How to do it...

How it works...

There's more...

See also

Abstracting radio button groups

How it works...

How it works...

There's more...

See also

Radio button types

How to do it...

How it works...

See also

Replacing checkboxes with switches

How to do it...

How it works...

There's more...

See also

Controlling selects with state

How to do it...

How it works...

See Also

Selecting multiple items

How to do it...

How it works...

There's more...

See also

Pickers - Selecting Dates and Times

Introduction

Using date pickers

How to do it...

How it works...

There's more...

See also

Using time pickers

How to do it...

How it works...

See also

Setting initial date and time values

How to do it...

How it works...

See also

Combining date and time components

How to do it...

How it works...

See also

Integrating other date and time packages

How to do it...

How it works...

See also

Dialogs - Modal Screens for User Interactions

Introduction

Collecting form input

How to do it...

How it works...

See also

Confirming actions

How to do it...

How it works...

See also

Displaying alerts

How to do it...

How it works...

There's more...

See also

API integration

How to do it...

How it works...

See also

Creating fullscreen dialogs

How to do it...

How it works...

See also

Scrolling dialog content

How to do it...

How it works...

See also

Menus - Display Actions That Pop Out

Introduction

Composing menus with state

How to do it...

How it works...

There's more...

See also

Menu scrolling options

How to do it...

How it works...

See also

Using menu transitions

How to do it...

How it works...

See also

Customizing menu items

How to do it...

How it works...

See also

Typography - Control Font Look and Feel

Introduction

Types of typography

How to do it...

How it works...

There's more...

See also

Using theme colors

How to do it...

How it works...

See also

Aligning text

How to do it...

How it works...

See also

Wrapping text

How to do it...

How it works...

There's more...

See also

Icons - Enhance Icons to Match Your Look and Feel

Introduction

Coloring icons

How to do it...

How it works...

See also

Scaling icons

How to do it...

How it works...

Default

Inherit

Small

Large

See also

Dynamically loading icons

How to do it...

How it works...

See also

Themed icons

How to do it...

How it works...

See also

Installing more icons

How to do it...

How it works...

See also

Themes - Centralize the Look and Feel of Your App

Introduction

Understanding the palette

How to do it...

How it works...

See also

Comparing light and dark themes

How to do it...

How it works...

See also

Customizing typography

How to do it...

How it works...

See also

Nesting themes

How to do it...

How it works...

See also

Understanding component theme settings

How to do it

How it works...

See also

Styles - Applying Styles to Components

Introduction

Basic component styles

How to do it...

How it works...

There's more...

See also

Scoped component styles

How to do it...

How it works...

There's more...

See also

Extending component styles

How to do it...

How it works...

See also

Moving styles to themes

How to do it...

How it works...

See also

Other styling options

How to do it...

How it works...

See also

Other Books You May Enjoy

Leave a review - let other readers know what you think