Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.
Awesome Lists | Featured Topics | Projects
https://github.com/vscodeshift/material-ui-snippets

snippets for Material-UI
https://github.com/vscodeshift/material-ui-snippets
material-ui snippets vscode vscode-extension
Last synced: 2 months ago
JSON representation
snippets for Material-UI
Host: GitHub
URL: https://github.com/vscodeshift/material-ui-snippets
Owner: vscodeshift
License: mit
Created: 2020-01-24T23:21:32.000Z (about 5 years ago)
Default Branch: master
Last Pushed: 2023-03-06T11:51:11.000Z (almost 2 years ago)
Last Synced: 2024-11-15T19:55:09.803Z (3 months ago)
Topics: material-ui, snippets, vscode, vscode-extension
Language: TypeScript
Size: 2.42 MB
Stars: 40
Watchers: 2
Forks: 7
Open Issues: 12
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project

README

        # Snippets for Material-UI

![demo](/docs/snippet.gif?raw=true)

[![CircleCI](https://circleci.com/gh/vscodeshift/material-ui-snippets.svg?style=svg)](https://circleci.com/gh/vscodeshift/material-ui-snippets)

[![semantic-release](https://img.shields.io/badge/%20%20%F0%9F%93%A6%F0%9F%9A%80-semantic--release-e10079.svg)](https://github.com/semantic-release/semantic-release)

[![Commitizen friendly](https://img.shields.io/badge/commitizen-friendly-brightgreen.svg)](http://commitizen.github.io/cz-cli/)

[![Visual Studio Marketplace Version](https://img.shields.io/visual-studio-marketplace/v/vscodeshift.material-ui-snippets)](https://marketplace.visualstudio.com/items?itemName=vscodeshift.material-ui-snippets)

**Note:** There are two ways to insert these:

- **Trigger Suggest** (⌃Space on macOS) and then type in the name; or you can

  enable the **Editor: Tab Completion** setting, then type the name of the

  snippet and press Tab.

- Execute the corresponding **editor commands** like `Material-UI: insert ` (or even better, make keybindings for them!).

**Performance Warning:** Currently, the suggestions can cause performance issues due to VSCode API limitations.

After the API is improved in an upcoming release I can fix these performance issues. Until then, the workaround

is to either disable adding automatic imports for snippets (**Settings > Extensions > Material-UI Snippets > Add Completion Imports**)

or use the commands to insert snippets instead of suggestions.

# Using MUI v5?

For MUI v5 you'll need [`mui-snippets`](https://github.com/vscodeshift/mui-snippets) instead. This extension is for Material-UI v4.

# Features

- Works in JS/X and TSX

- Automatically adds missing imports when a snippet is inserted (as long as it succeeds in parsing the entire file)

- You can configure whether to use controlled or uncontrolled form controls in the extension settings.

# Settings

## Form Control Mode

- controlled - inserts `value` and `onChange` properties

- uncontrolled - inserts `defaultValue` property

## Import Paths

- auto - uses top level if other top level imports are found, second level otherwise

- top level - `import { Button } from '@material-ui/core'`

- second level - `import Button from '@material-ui/core/Button'`

# Snippets

- [`muiAppBar`: <AppBar>](#muiappbar-appbar)

- [`muiAppBarMenu`: <AppBar> with menu icon](#muiappbarmenu-appbar-with-menu-icon)

- [`muiBottomNavigation`: <BottomNavigation>](#muibottomnavigation-bottomnavigation)

- [`muiBottomNavigationAction`: <BottomNavigationAction>](#muibottomnavigationaction-bottomnavigationaction)

- [`muiButton`: <Button>](#muibutton-button)

- [`muiButtonGroup`: <ButtonGroup>](#muibuttongroup-buttongroup)

- [`muiButtonGroupSize`: <ButtonGroup> with size](#muibuttongroupsize-buttongroup-with-size)

- [`muiButtonGroupVertical`: vertical <ButtonGroup>](#muibuttongroupvertical-vertical-buttongroup)

- [`muiButtonSize`: <Button> with size](#muibuttonsize-button-with-size)

- [`muiButtonText`: text <Button>](#muibuttontext-text-button)

- [`muiButtonWithIcon`: <Button> with icon and label](#muibuttonwithicon-button-with-icon-and-label)

- [`muiCardHeader`: <CardHeader>](#muicardheader-cardheader)

- [`muiCardMedia`: <CardMedia>](#muicardmedia-cardmedia)

- [`muiCheckboxLabel`: <Checkbox> with <FormControlLabel>](#muicheckboxlabel-checkbox-with-formcontrollabel)

- [`muiCheckboxLabelPlacement`: <Checkbox> with <FormControlLabel>](#muicheckboxlabelplacement-checkbox-with-formcontrollabel)

- [`muiContainer`: <Container>](#muicontainer-container)

- [`muiDialog`: <Dialog>](#muidialog-dialog)

- [`muiDialogSimple`: <Dialog>](#muidialogsimple-dialog)

- [`muiDrawerPermanent`: permanent <Drawer>](#muidrawerpermanent-permanent-drawer)

- [`muiDrawerPersistent`: persistent <Drawer>](#muidrawerpersistent-persistent-drawer)

- [`muiDrawerTemporary`: temporary <Drawer>](#muidrawertemporary-temporary-drawer)

- [`muiEndAdornment`: end <InputAdornment>](#muiendadornment-end-inputadornment)

- [`muiExpansionPanel`: <ExpansionPanel>](#muiexpansionpanel-expansionpanel)

- [`muiExpansionPanelControlled`: controlled <ExpansionPanel>](#muiexpansionpanelcontrolled-controlled-expansionpanel)

- [`muiFab`: <Fab>](#muifab-fab)

- [`muiFabExtended`: <Fab variant="extended">](#muifabextended-fab-variantextended)

- [`muiFormControl`: <FormControl>](#muiformcontrol-formcontrol)

- [`muiFormControlGroup`: <FormControl> with <FormGroup>](#muiformcontrolgroup-formcontrol-with-formgroup)

- [`muiGridContainer`: <Grid container>](#muigridcontainer-grid-container)

- [`muiGridContainerCenter`: <Grid container> with centering](#muigridcontainercenter-grid-container-with-centering)

- [`muiGridContainerFull`: <Grid container> with all props](#muigridcontainerfull-grid-container-with-all-props)

- [`muiGridListSubheader`: <GridList> subheader](#muigridlistsubheader-gridlist-subheader)

- [`muiGridListTilebar`: <GridListTileBar>](#muigridlisttilebar-gridlisttilebar)

- [`muiIconButton`: <IconButton>](#muiiconbutton-iconbutton)

- [`muiMenu`: <Menu>](#muimenu-menu)

- [`muiMenuItem`: <MenuItem>](#muimenuitem-menuitem)

- [`muiMenuPopupState`: <Menu> for material-ui-popup-state](#muimenupopupstate-menu-for-material-ui-popup-state)

- [`muiRadioGroup`: <FormControl> with <RadioGroup>](#muiradiogroup-formcontrol-with-radiogroup)

- [`muiRadioLabel`: <Radio> with <FormControlLabel>](#muiradiolabel-radio-with-formcontrollabel)

- [`muiRadioLabelPlacement`: <Radio> with <FormControlLabel> with labelPlacement](#muiradiolabelplacement-radio-with-formcontrollabel-with-labelplacement)

- [`muiSelectItem`: <MenuItem> inside <Select>](#muiselectitem-menuitem-inside-select)

- [`muiSliderContinuous`: <Slider> with continuous values](#muislidercontinuous-slider-with-continuous-values)

- [`muiSliderDiscrete`: <Slider> with discrete values](#muisliderdiscrete-slider-with-discrete-values)

- [`muiSnackbar`: <Snackbar>](#muisnackbar-snackbar)

- [`muiSnackbarContent`: <SnackbarContent>](#muisnackbarcontent-snackbarcontent)

- [`muiStartAdornment`: start <InputAdornment>](#muistartadornment-start-inputadornment)

- [`muiStep`: <Step>](#muistep-step)

- [`muiStepContent`: <Step> with <StepContent>](#muistepcontent-step-with-stepcontent)

- [`muiStepOptional`: optional <Step>](#muistepoptional-optional-step)

- [`muiStepper`: <Stepper>](#muistepper-stepper)

- [`muiSwipeableViews`: <SwipeableViews>](#muiswipeableviews-swipeableviews)

- [`muiSwitch`: <Switch>](#muiswitch-switch)

- [`muiSwitchLabel`: <Switch> with <FormControlLabel>](#muiswitchlabel-switch-with-formcontrollabel)

- [`muiSwitchLabelPlacement`: <Switch> with <FormControlLabel> with labelPlacement](#muiswitchlabelplacement-switch-with-formcontrollabel-with-labelplacement)

- [`muiTabPanel`: <TabPanel>](#muitabpanel-tabpanel)

- [`muiTabs`: <Tabs>](#muitabs-tabs)

- [`muiTabsScrollable`: scrollable <Tabs>](#muitabsscrollable-scrollable-tabs)

- [`muiTextField`: <TextField>](#muitextfield-textfield)

- [`muiTextFieldMore`: <TextField> with more props](#muitextfieldmore-textfield-with-more-props)

- [`muiTextFieldSelect`: <TextField select>](#muitextfieldselect-textfield-select)

- [`muiTextFieldVariant`: <TextField> with variant](#muitextfieldvariant-textfield-with-variant)

- [`muiTooltip`: <Tooltip>](#muitooltip-tooltip)

- [`muiTypography`: <Typography>](#muitypography-typography)

### `muiAppBar`: <AppBar>

```

  

    

      $5

    

  

```

### `muiAppBarMenu`: <AppBar> with menu icon

```

  

    

      

    

    

      $5

    

  

```

### `muiBottomNavigation`: <BottomNavigation>

```

  $4

```

### `muiBottomNavigationAction`: <BottomNavigationAction>

```

```

### `muiButton`: <Button>

```

  $4

```

### `muiButtonGroup`: <ButtonGroup>

```

  $5

  $6

  $7

```

### `muiButtonGroupSize`: <ButtonGroup> with size

```

  $6

  $7

  $8

```

### `muiButtonGroupVertical`: vertical <ButtonGroup>

```

  $5

  $6

  $7

```

### `muiButtonSize`: <Button> with size

```

  $5

```

### `muiButtonText`: text <Button>

```

$3

```

### `muiButtonWithIcon`: <Button> with icon and label

```

  $5

```

### `muiCardHeader`: <CardHeader>

```

      $4

    

  \}}${5:

  action={

    

      $8

    

  \}}${9:

  title="$10"}${11:

  subheader="$12"}

  $13

/>

```

### `muiCardMedia`: <CardMedia>

```

```

### `muiCheckboxLabel`: <Checkbox> with <FormControlLabel>

#### Controlled

```

  }

/>

```

#### Uncontrolled

```

  }

/>

```

### `muiCheckboxLabelPlacement`: <Checkbox> with <FormControlLabel>

#### Controlled

```

  }

/>

```

#### Uncontrolled

```

  }

/>

```

### `muiContainer`: <Container>

```

  $3

```

### `muiDialog`: <Dialog>

```

${4:

  

    $5

  }${6:

  ${7:

    

      $8

    }

  }${9:

  

    ${12:

      Cancel}

    

  }

```

### `muiDialogSimple`: <Dialog>

```

  $4

```

### `muiDrawerPermanent`: permanent <Drawer>

```

  $3

```

### `muiDrawerPersistent`: persistent <Drawer>

```

  $4

```

### `muiDrawerTemporary`: temporary <Drawer>

```

  $5

```

### `muiEndAdornment`: end <InputAdornment>

```

endAdornment={

  

    $0

  

}

```

### `muiExpansionPanel`: <ExpansionPanel>

```

  }

    aria-label="${1:Expand}"

    aria-controls="$2-content"

    id="$2-header"

  >

    $4

  

  $5

```

### `muiExpansionPanelControlled`: controlled <ExpansionPanel>

```

  }

    aria-label="${3:Expand}"

    aria-controls="$4-content"

    id="$4-header"

  >

    $6

  

  $7

```

### `muiFab`: <Fab>

```

  <$4Icon />

```

### `muiFabExtended`: <Fab variant="extended">

```

  <$4Icon />

  $5

```

### `muiFormControl`: <FormControl>

```

  $2

  $0

  $3

```

### `muiFormControlGroup`: <FormControl> with <FormGroup>

```

  $4

  

    $0

  

  $5

```

### `muiGridContainer`: <Grid container>

```

  $3

```

### `muiGridContainerCenter`: <Grid container> with centering

```

  $10

```

### `muiGridContainerFull`: <Grid container> with all props

```

  $14

```

### `muiGridListSubheader`: <GridList> subheader

```

  $2

```

### `muiGridListTilebar`: <GridListTileBar>

```

      $8

    

  \}}

/>

```

### `muiIconButton`: <IconButton>

```

  $4

```

### `muiMenu`: <Menu>

```

  $5

```

### `muiMenuItem`: <MenuItem>

```

$3

```

### `muiMenuPopupState`: <Menu> for material-ui-popup-state

```

  $4

```

### `muiRadioGroup`: <FormControl> with <RadioGroup>

```

  $4

  $0

  $9

```

### `muiRadioLabel`: <Radio> with <FormControlLabel>

```

} />

```

### `muiRadioLabelPlacement`: <Radio> with <FormControlLabel> with labelPlacement

```

}

/>

```

### `muiSelectItem`: <MenuItem> inside <Select>

```

$3

```

### `muiSliderContinuous`: <Slider> with continuous values

#### Controlled

```

```

#### Uncontrolled

```

```

### `muiSliderDiscrete`: <Slider> with discrete values

#### Controlled

```

```

#### Uncontrolled

```

```

### `muiSnackbar`: <Snackbar>

```

      

    

  \}}

/>

```

### `muiSnackbarContent`: <SnackbarContent>

```

```

### `muiStartAdornment`: start <InputAdornment>

```

startAdornment={

  

    $0

  

}

```

### `muiStep`: <Step>

```

  $4

```

### `muiStepContent`: <Step> with <StepContent>

```

  $4

  

    $5

  

```

### `muiStepOptional`: optional <Step>

```

  ${4:Optional}}

  >

    $5

  

```

### `muiStepper`: <Stepper>

```

  $2

```

### `muiSwipeableViews`: <SwipeableViews>

```

  $0

```

### `muiSwitch`: <Switch>

#### Controlled

```

```

#### Uncontrolled

```

```

### `muiSwitchLabel`: <Switch> with <FormControlLabel>

#### Controlled

```

  }

/>

```

#### Uncontrolled

```

  }

/>

```

### `muiSwitchLabelPlacement`: <Switch> with <FormControlLabel> with labelPlacement

#### Controlled

```

  }

/>

```

#### Uncontrolled

```

  }

/>

```

### `muiTabPanel`: <TabPanel>

```

  $5

```

### `muiTabs`: <Tabs>

```

  

    $7

  

```

### `muiTabsScrollable`: scrollable <Tabs>

```

  

    $8

  

```

### `muiTextField`: <TextField>

#### Controlled

```

```

#### Uncontrolled

```

```

### `muiTextFieldMore`: <TextField> with more props

#### Controlled

```

```

#### Uncontrolled

```

```

### `muiTextFieldSelect`: <TextField select>

#### Controlled

```

```

#### Uncontrolled

```

```

### `muiTextFieldVariant`: <TextField> with variant

#### Controlled

```

```

#### Uncontrolled

```

```

### `muiTooltip`: <Tooltip>

```

  $TM_SELECTED_TEXT$0

```

### `muiTypography`: <Typography>

```

$TM_SELECTED_TEXT$0

```