Skip to content

File tree

1 file changed

+69
-72
lines changed

1 file changed

+69
-72
lines changed

docs/data/material/getting-started/supported-components/MaterialUIComponents.js

Lines changed: 69 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -11,18 +11,18 @@ import Link from 'docs/src/modules/components/Link';
1111
const components = [
1212
{
1313
name: 'Accordion',
14-
materialUI: '/material-ui/react-accordion',
14+
materialUI: '/material-ui/react-accordion/',
1515
materialDesign: 'https://m1.material.io/components/expansion-panels.html',
1616
},
1717
{ name: 'Alert', materialUI: '/material-ui/react-alert' },
1818
{
1919
name: 'App Bar: top',
20-
materialUI: '/material-ui/react-app-bar',
20+
materialUI: '/material-ui/react-app-bar/',
2121
materialDesign: 'https://m2.material.io/components/app-bars-top',
2222
},
2323
{
2424
name: 'App Bar: bottom',
25-
materialUI: '/material-ui/react-app-bar#bottom-app-bar',
25+
materialUI: '/material-ui/react-app-bar#bottom-app-bar/',
2626
materialDesign: 'https://m2.material.io/components/app-bars-bottom',
2727
},
2828
{ name: 'Autocomplete', materialUI: '/material-ui/react-autocomplete' },
@@ -35,13 +35,13 @@ const components = [
3535
{ name: 'Badge', materialUI: '/material-ui/react-badge' },
3636
{
3737
name: 'Bottom Navigation',
38-
materialUI: '/material-ui/react-bottom-navigation',
38+
materialUI: '/material-ui/react-bottom-navigation/',
3939
materialDesign: 'https://m2.material.io/components/bottom-navigation',
4040
},
4141
{ name: 'Breadcrumbs', materialUI: '/material-ui/react-breadcrumbs' },
4242
{
4343
name: 'Button',
44-
materialUI: '/material-ui/react-button',
44+
materialUI: '/material-ui/react-button/',
4545
materialDesign: 'https://m2.material.io/components/buttons',
4646
},
4747
{
@@ -53,147 +53,151 @@ const components = [
5353
{ name: 'Button Group', materialUI: '/material-ui/react-button-group' },
5454
{
5555
name: 'Card',
56-
materialUI: '/material-ui/react-card',
56+
materialUI: '/material-ui/react-card/',
5757
materialDesign: 'https://m2.material.io/components/cards',
5858
},
5959
{
6060
name: 'Checkbox',
61-
materialUI: '/material-ui/react-checkbox',
61+
materialUI: '/material-ui/react-checkbox/',
6262
materialDesign: 'https://m2.material.io/components/checkboxes',
6363
},
6464
{
6565
name: 'Chip',
66-
materialUI: '/material-ui/react-chip',
66+
materialUI: '/material-ui/react-chip/',
6767
materialDesign: 'https://m2.material.io/components/chips',
6868
},
69-
{ name: 'Data Grid', materialUI: '/x/react-data-grid' },
69+
{
70+
name: 'Data Grid',
71+
materialUI: '/x/react-data-grid/',
72+
materialDesign: 'https://m2.material.io/components/data-tables',
73+
},
7074
{
7175
name: 'Date Pickers',
72-
materialUI: '/x/react-date-pickers',
76+
materialUI: '/x/react-date-pickers/getting-started/',
7377
materialDesign: 'https://m2.material.io/components/date-pickers',
7478
},
7579
{
7680
name: 'Dialog',
77-
materialUI: '/material-ui/react-dialog',
81+
materialUI: '/material-ui/react-dialog/',
7882
materialDesign: 'https://m2.material.io/components/dialogs',
7983
},
8084
{
8185
name: 'Divider',
82-
materialUI: '/material-ui/react-divider',
86+
materialUI: '/material-ui/react-divider/',
8387
materialDesign: 'https://m2.material.io/components/dividers',
8488
},
8589
{
8690
name: 'Drawer',
87-
materialUI: '/material-ui/react-drawer',
91+
materialUI: '/material-ui/react-drawer/',
8892
materialDesign: 'https://m2.material.io/components/navigation-drawer',
8993
},
9094
{
9195
name: 'Icons',
92-
materialUI: '/material-ui/icons',
96+
materialUI: '/material-ui/icons/',
9397
materialDesign: 'https://m2.material.io/design/iconography/system-icons.html',
9498
},
9599
{
96100
name: 'Image List',
97-
materialUI: '/material-ui/react-image-list',
101+
materialUI: '/material-ui/react-image-list/',
98102
materialDesign: 'https://m2.material.io/components/image-lists',
99103
},
100-
{ name: 'Link', materialUI: '/material-ui/react-link' },
104+
{ name: 'Link', materialUI: '/material-ui/react-link/' },
101105
{
102106
name: 'List',
103-
materialUI: '/material-ui/react-list',
107+
materialUI: '/material-ui/react-list/',
104108
materialDesign: 'https://m2.material.io/components/lists',
105109
},
106-
{ name: 'Masonry', materialUI: '/material-ui/react-masonry' },
110+
{ name: 'Masonry', materialUI: '/material-ui/react-masonry/' },
107111
{
108112
name: 'Material Icons',
109-
materialUI: '/material-ui/material-icons',
113+
materialUI: '/material-ui/material-icons/',
110114
materialDesign: 'https://fonts.google.com/icons',
111115
},
112116
{
113117
name: 'Menu',
114-
materialUI: '/material-ui/react-menu',
118+
materialUI: '/material-ui/react-menu/',
115119
materialDesign: 'https://m2.material.io/components/menus',
116120
},
117121
{
118122
name: 'Modal',
119-
materialUI: '/material-ui/react-modal',
123+
materialUI: '/material-ui/react-modal/',
120124
materialDesign: 'https://m2.material.io/components/dialogs',
121125
},
122126
{
123127
name: 'Navigation Rail',
124128
materialDesign: 'https://m2.material.io/components/navigation-rail',
125129
},
126-
{ name: 'Pagination', materialUI: '/material-ui/react-pagination' },
130+
{ name: 'Pagination', materialUI: '/material-ui/react-pagination/' },
127131
{
128132
name: 'Paper',
129-
materialUI: '/material-ui/react-paper',
133+
materialUI: '/material-ui/react-paper/',
130134
materialDesign: 'https://m2.material.io/design/environment/elevation.html',
131135
},
132136
{
133137
name: 'Progress',
134-
materialUI: '/material-ui/react-progress',
138+
materialUI: '/material-ui/react-progress/',
135139
materialDesign: 'https://m2.material.io/components/progress-indicators',
136140
},
137141
{
138142
name: 'Radio Group',
139-
materialUI: '/material-ui/react-radio-button',
143+
materialUI: '/material-ui/react-radio-button/',
140144
materialDesign: 'https://m2.material.io/components/radio-buttons',
141145
},
142-
{ name: 'Rating', materialUI: '/material-ui/react-rating' },
146+
{ name: 'Rating', materialUI: '/material-ui/react-rating/' },
143147
{
144148
name: 'Select',
145-
materialUI: '/material-ui/react-select',
149+
materialUI: '/material-ui/react-select/',
146150
materialDesign: 'https://m2.material.io/components/menus#exposed-dropdown-menu',
147151
},
148-
{ name: 'Skeleton', materialUI: '/material-ui/react-skeleton' },
152+
{ name: 'Skeleton', materialUI: '/material-ui/react-skeleton/' },
149153
{
150154
name: 'Slider',
151-
materialUI: '/material-ui/react-slider',
155+
materialUI: '/material-ui/react-slider/',
152156
materialDesign: 'https://m2.material.io/components/sliders',
153157
},
154158
{
155159
name: 'Snackbar',
156-
materialUI: '/material-ui/react-snackbar',
160+
materialUI: '/material-ui/react-snackbar/',
157161
materialDesign: 'https://m2.material.io/components/snackbars',
158162
},
159163
{ name: 'Speed Dial', materialUI: '/material-ui/react-speed-dial' },
160164
{
161165
name: 'Stepper',
162-
materialUI: '/material-ui/react-stepper',
166+
materialUI: '/material-ui/react-stepper/',
163167
materialDesign: 'https://m1.material.io/components/steppers.html',
164168
},
165169
{
166170
name: 'Switch',
167-
materialUI: '/material-ui/react-switch',
171+
materialUI: '/material-ui/react-switch/',
168172
materialDesign: 'https://m2.material.io/components/switches',
169173
},
170174
{
171175
name: 'Table',
172-
materialUI: '/material-ui/react-table',
176+
materialUI: '/material-ui/react-table/',
173177
materialDesign: 'https://m2.material.io/components/data-tables',
174178
},
175179
{
176180
name: 'Tabs',
177-
materialUI: '/material-ui/react-tabs',
181+
materialUI: '/material-ui/react-tabs/',
178182
materialDesign: 'https://m2.material.io/components/tabs',
179183
},
180184
{
181185
name: 'Text Field',
182-
materialUI: '/material-ui/react-text-field',
186+
materialUI: '/material-ui/react-text-field/',
183187
materialDesign: 'https://m2.material.io/components/text-fields',
184188
},
185-
{ name: 'Timeline', materialUI: '/material-ui/react-timeline' },
186-
{ name: 'Toggle Button', materialUI: '/material-ui/react-toggle-button' },
189+
{ name: 'Timeline', materialUI: '/material-ui/react-timeline/' },
190+
{ name: 'Toggle Button', materialUI: '/material-ui/react-toggle-button/' },
187191
{
188192
name: 'Tooltip',
189-
materialUI: '/material-ui/react-tooltip',
193+
materialUI: '/material-ui/react-tooltip/',
190194
materialDesign: 'https://m2.material.io/components/tooltips',
191195
},
192-
{ name: 'Transfer List', materialUI: '/material-ui/react-transfer-list' },
193-
{ name: 'Tree View', materialUI: '/material-ui/react-tree-view' },
196+
{ name: 'Transfer List', materialUI: '/material-ui/react-transfer-list/' },
197+
{ name: 'Tree View', materialUI: '/material-ui/react-tree-view/' },
194198
{
195199
name: 'Typography',
196-
materialUI: '/material-ui/react-typography',
200+
materialUI: '/material-ui/react-typography/',
197201
materialDesign: 'https://m2.material.io/design/typography/the-type-system.html',
198202
},
199203
];
@@ -217,50 +221,43 @@ export default function MaterialUIComponents() {
217221
</TableCell>
218222
<TableCell>
219223
{component.materialDesign ? (
220-
<React.Fragment>
221-
<Link
222-
variant="body2"
223-
data-no-markdown-link="true"
224-
href={component.materialDesign}
225-
>
226-
{component.materialDesign.substring(8, 10) === 'm1'
227-
? 'MD 1 (legacy)'
228-
: 'MD 2'}
229-
</Link>
230-
</React.Fragment>
224+
<Link
225+
variant="body2"
226+
data-no-markdown-link="true"
227+
href={component.materialDesign}
228+
>
229+
{component.materialDesign.substring(8, 10) === 'm1'
230+
? 'MD 1 (legacy)'
231+
: 'MD 2'}
232+
</Link>
231233
) : (
232234
'No guidelines'
233235
)}
234236
</TableCell>
235237
<TableCell>
236238
{component.materialUI &&
237239
component.materialUI.indexOf('/material-ui') === 0 ? (
238-
<React.Fragment>
239-
{'✅ '}
240-
<Link
241-
variant="body2"
242-
data-no-markdown-link="true"
243-
href={component.materialUI}
244-
>
245-
Native support
246-
</Link>
247-
</React.Fragment>
240+
<Link
241+
variant="body2"
242+
data-no-markdown-link="true"
243+
href={component.materialUI}
244+
>
245+
Native support
246+
</Link>
248247
) : null}
249248
{component.materialUI && component.materialUI.indexOf('/x') === 0 ? (
250-
<React.Fragment>
251-
<Link
252-
variant="body2"
253-
data-no-markdown-link="true"
254-
href={component.materialUI}
255-
>
256-
Support in MUI X
257-
</Link>
258-
</React.Fragment>
249+
<Link
250+
variant="body2"
251+
data-no-markdown-link="true"
252+
href={component.materialUI}
253+
>
254+
Support in MUI X
255+
</Link>
259256
) : null}
260257
{component.materialUI === 'Composable' ? (
261258
<React.Fragment>{'Composable'}</React.Fragment>
262259
) : null}
263-
{component.materialUI == null ? 'No support' : null}
260+
{component.materialUI == null ? 'No support' : null}
264261
</TableCell>
265262
</TableRow>
266263
))}

0 commit comments

Comments
 (0)