diff --git a/CHANGELOG.md b/CHANGELOG.md index a1d20ed31b54f8..add75b1e74bee4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -4610,7 +4610,7 @@ _Jun 23, 2021_ A big thanks to the 18 contributors who made this release possible. Here are some highlights ✨: - 🚀 We have only 2 left in the [breaking changes](https://github.com/mui/material-ui/issues/20012). The plan to release 5.0.0-beta.0 is on July 1st and will start to promote its usage over v4. -- 🎨 We have updated `Slider` to match current [Material Design guidelines](https://material.io/components/sliders). +- 🎨 We have updated `Slider` to match current [Material Design guidelines](https://m2.material.io/components/sliders). @@ -4695,7 +4695,7 @@ A big thanks to the 18 contributors who made this release possible. Here are som - ​[Slider] Adjust css to match the specification (#26632) @siriwatknp - Rework the CSS to match the latest [Material Design guidelines](https://material.io/components/sliders) and make custom styles more intuitive. [See documentation](https://mui.com/components/slider/). + Rework the CSS to match the latest [Material Design guidelines](https://m2.material.io/components/sliders) and make custom styles more intuitive. [See documentation](https://mui.com/components/slider/). @@ -4943,7 +4943,7 @@ A big thanks to the 14 contributors who made this release possible. Here are som - ​[AppBar] Fix background color on dark mode (#26545) @siriwatknp - The `color` prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the [Material Design guidelines](https://material.io/design/color/dark-theme.html). Use `enableColorOnDark` to restore the behavior of v4. + The `color` prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the [Material Design guidelines](https://m2.material.io/design/color/dark-theme.html). Use `enableColorOnDark` to restore the behavior of v4. ```jsx @@ -5105,8 +5105,8 @@ A big thanks to the 14 contributors who made this release possible. Here are som Update the implementation to better match Material Design: - - Tab `minWidth` changed from `72px` => `90px` (without media-query) according to [material-design spec](https://material.io/components/tabs#specs) - - Tab `maxWidth` changed from `264px` => `360px` according to [material-design spec](https://material.io/components/tabs#specs) + - Tab `minWidth` changed from `72px` => `90px` (without media-query) according to [material-design spec](https://m2.material.io/components/tabs#specs) + - Tab `maxWidth` changed from `264px` => `360px` according to [material-design spec](https://m2.material.io/components/tabs#specs) #### Changes @@ -6450,7 +6450,7 @@ A big thanks to the 26 contributors who made this release possible. Here are som - ​[icons] Synchronize icons (#25055) @eps1lon - The icons were synchronized with https://material.io/resources/icons/. This change increases the number of supported icons from 1,349 to 1,781 per theme (we support 5 themes). The breaking changes: + The icons were synchronized with https://m2.material.io/resources/icons/. This change increases the number of supported icons from 1,349 to 1,781 per theme (we support 5 themes). The breaking changes: ```diff // AmpStories -> Download diff --git a/CHANGELOG.old.md b/CHANGELOG.old.md index d9aba68795321b..459a2dff19dcdf 100644 --- a/CHANGELOG.old.md +++ b/CHANGELOG.old.md @@ -6875,7 +6875,7 @@ Here are some highlights ✨: - After many iterations, we are happy to announce `@material-ui/icons` v2.0.0 💃. With this version, you can take advantage of all the icons recently released by Google: - https://material.io/tools/icons/. There are more than 5,000 icons. + https://m2.material.io/tools/icons/. There are more than 5,000 icons. (#12016, #12036, #12170, #12111, #12225) - The 1.4.0 release of Material UI has introduced a new implementation of the Tooltip and Popper component. @@ -8464,7 +8464,7 @@ The `inputType` property was renamed `type`. - [Checkbox, Radio, Switch] Change default color, add color prop (#10138) @mbrookes -The Material Design specification says that selection controls elements should [use the application's secondary color](https://material.io/guidelines/components/selection-controls.html). +The Material Design specification says that selection controls elements should [use the application's secondary color](https://m2.material.io/guidelines/components/selection-controls.html). ```diff - @@ -9002,7 +9002,7 @@ Here are some highlights ✨: - [core] Revise the theme.palette.primary & secondary approach (#9794) @mbrookes -It's an important simplification of the palette system. You can now directly use the "official" Color Tool](https://material.io/color/). +It's an important simplification of the palette system. You can now directly use the "official" Color Tool](https://m2.material.io/color/). - Instead of using a rich color object of 14 different keys, we rely on an object of 4 different keys: `light`, `main`, `dark` and `contrastText`. - Providing the full-color object used to be required. Now, we will provide a nice default to the different values using the `main` value. diff --git a/README.md b/README.md index 42aef00ad3b8b3..60ef5c17f99f2d 100644 --- a/README.md +++ b/README.md @@ -7,7 +7,7 @@ **MUI Core** contains foundational React UI component libraries for shipping new features faster. -- [_Material UI_](https://mui.com/material-ui/getting-started/overview/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://material.io/design/introduction/) system. +- [_Material UI_](https://mui.com/material-ui/getting-started/overview/) is a comprehensive library of components that features our implementation of Google's [Material Design](https://m2.material.io/design/introduction/) system. - [_Joy UI_](https://mui.com/joy-ui/getting-started/overview/) is a beautifully designed library of React UI components. diff --git a/docs/data/base/components/focus-trap/focus-trap.md b/docs/data/base/components/focus-trap/focus-trap.md index 76d74c9eb6246f..846680d6684687 100644 --- a/docs/data/base/components/focus-trap/focus-trap.md +++ b/docs/data/base/components/focus-trap/focus-trap.md @@ -5,7 +5,7 @@ components: FocusTrap githubLabel: 'component: FocusTrap' --- -# Focus trap +# Focus Trap

The FocusTrap component prevents the user's focus from escaping its children components.

diff --git a/docs/data/base/components/textarea-autosize/textarea-autosize.md b/docs/data/base/components/textarea-autosize/textarea-autosize.md index dd6c7dbcc80ce3..e0588b118f55b7 100644 --- a/docs/data/base/components/textarea-autosize/textarea-autosize.md +++ b/docs/data/base/components/textarea-autosize/textarea-autosize.md @@ -5,7 +5,7 @@ components: TextareaAutosize githubLabel: 'component: TextareaAutosize' --- -# Textarea autosize +# Textarea Autosize

The TextareaAutosize component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.

diff --git a/docs/data/base/pages.ts b/docs/data/base/pages.ts index 73439680b04155..686b29f4b82b76 100644 --- a/docs/data/base/pages.ts +++ b/docs/data/base/pages.ts @@ -60,14 +60,14 @@ const pages = [ pathname: '/base/components/utils', subheader: 'utils', children: [ - { pathname: '/base/react-click-away-listener', title: 'Click-away listener' }, + { pathname: '/base/react-click-away-listener', title: 'Click-Away Listener' }, { pathname: '/base/react-focus-trap', title: 'Focus Trap' }, { pathname: '/base/react-form-control', title: 'Form control' }, { pathname: '/base/react-modal', title: 'Modal' }, { pathname: '/base/react-no-ssr', title: 'No SSR' }, { pathname: '/base/react-popper', title: 'Popper' }, { pathname: '/base/react-portal', title: 'Portal' }, - { pathname: '/base/react-textarea-autosize', title: 'Textarea autosize' }, + { pathname: '/base/react-textarea-autosize', title: 'Textarea Autosize' }, ], }, ], diff --git a/docs/data/joy/components/aspect-ratio/aspect-ratio.md b/docs/data/joy/components/aspect-ratio/aspect-ratio.md index 5bf8cc1bf86aa7..1478ca0456e288 100644 --- a/docs/data/joy/components/aspect-ratio/aspect-ratio.md +++ b/docs/data/joy/components/aspect-ratio/aspect-ratio.md @@ -3,9 +3,9 @@ product: joy-ui title: React Aspect Ratio component --- -# Aspect ratio +# Aspect Ratio -

The aspect ratio component shapes the content with the specified ratio.

+

The Aspect Ratio component shapes the content with the specified ratio.

## Introduction diff --git a/docs/data/joy/pages.ts b/docs/data/joy/pages.ts index 70d7b7e5325740..ebca4c87166282 100644 --- a/docs/data/joy/pages.ts +++ b/docs/data/joy/pages.ts @@ -33,7 +33,7 @@ const pages = [ { pathname: '/joy-ui/react-text-field', title: 'Text Field' }, { pathname: '/joy-ui/react-textarea' }, { pathname: '/joy-ui/react-checkbox' }, - { pathname: '/joy-ui/react-radio-button' }, + { pathname: '/joy-ui/react-radio-button', title: 'Radio Group' }, { pathname: '/joy-ui/react-select' }, { pathname: '/joy-ui/react-slider' }, { pathname: '/joy-ui/react-switch' }, @@ -43,7 +43,7 @@ const pages = [ pathname: '/joy-ui/components/data-display', subheader: 'data-display', children: [ - { pathname: '/joy-ui/react-aspect-ratio' }, + { pathname: '/joy-ui/react-aspect-ratio', title: 'Aspect Ratio' }, { pathname: '/joy-ui/react-avatar' }, { pathname: '/joy-ui/react-badge' }, { pathname: '/joy-ui/react-chip' }, diff --git a/docs/data/material/components/accordion/accordion-pt.md b/docs/data/material/components/accordion/accordion-pt.md index 6654baf400324d..e1a4062d8ee48e 100644 --- a/docs/data/material/components/accordion/accordion-pt.md +++ b/docs/data/material/components/accordion/accordion-pt.md @@ -3,7 +3,7 @@ product: material-ui title: Componente de Acordeão React components: Accordion, AccordionActions, AccordionDetails, AccordionSummary githubLabel: 'component: Accordion' -materialDesign: https://material.io/archive/guidelines/components/expansion-panels.html +materialDesign: https://m1.material.io/components/expansion-panels.html waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ --- @@ -16,7 +16,7 @@ Um acordeão é um contêiner leve que pode estar sozinho ou conectado em uma su {{"component": "modules/components/ComponentLinkHeader.js"}} :::info -**Note:** Accordions are no longer documented in the [Material Design guidelines](https://material.io/), but MUI will continue to support them. It was formerly known as the "expansion panel". +**Note:** Accordions are no longer documented in the [Material Design guidelines](https://m2.material.io/), but MUI will continue to support them. It was formerly known as the "expansion panel". ::: ## Acordeão básico diff --git a/docs/data/material/components/accordion/accordion-zh.md b/docs/data/material/components/accordion/accordion-zh.md index 867bd382d9e405..3cfd82572b4cf4 100644 --- a/docs/data/material/components/accordion/accordion-zh.md +++ b/docs/data/material/components/accordion/accordion-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Accordion （扩展面板）组件 components: Accordion, AccordionActions, AccordionDetails, AccordionSummary githubLabel: 'component: accordion' -materialDesign: https://material.io/archive/guidelines/components/expansion-panels.html +materialDesign: https://m1.material.io/components/expansion-panels.html waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ --- @@ -15,7 +15,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ {{"component": "modules/components/ComponentLinkHeader.js"}} -**注意：** 此版本的扩展面板将不再记录在 [Material Design 指南中](https://material.io/)，但 Material-UI 将继续支持它。 它之前被称为“expansion panel”。 +**注意：** 此版本的扩展面板将不再记录在 [Material Design 指南中](https://m2.material.io/)，但 Material-UI 将继续支持它。 它之前被称为“expansion panel”。 ::: ## 简单的扩展面板 diff --git a/docs/data/material/components/accordion/accordion.md b/docs/data/material/components/accordion/accordion.md index bd0107671b3257..f1e97ed84b63ec 100644 --- a/docs/data/material/components/accordion/accordion.md +++ b/docs/data/material/components/accordion/accordion.md @@ -3,7 +3,7 @@ product: material-ui title: React Accordion component components: Accordion, AccordionActions, AccordionDetails, AccordionSummary githubLabel: 'component: accordion' -materialDesign: https://material.io/archive/guidelines/components/expansion-panels.html +materialDesign: https://m1.material.io/components/expansion-panels.html waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/accordion/ --- @@ -17,7 +17,7 @@ An accordion is a lightweight container that may either be used standalone, or b :::info **Note:** -Accordions are no longer documented in the [Material Design guidelines](https://material.io/), but MUI will continue to support them. It was formerly known as the "expansion panel". +Accordions are no longer documented in the [Material Design guidelines](https://m2.material.io/), but MUI will continue to support them. It was formerly known as the "expansion panel". ::: ## Basic accordion diff --git a/docs/data/material/components/alert/alert-pt.md b/docs/data/material/components/alert/alert-pt.md index 6c3929c4d25dba..1229d587b0d5b3 100644 --- a/docs/data/material/components/alert/alert-pt.md +++ b/docs/data/material/components/alert/alert-pt.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/alert/

Um alerta exibe uma mensagem curta e importante de uma forma que atrai a atenção do usuário sem interromper o que ele estiver fazendo.

-**Nota:** Este componente não está documentado nas [diretrizes do Material Design](https://material.io/), mas MUI o suporta. +**Nota:** Este componente não está documentado nas [diretrizes do Material Design](https://m2.material.io/), mas MUI o suporta. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/alert/alert-zh.md b/docs/data/material/components/alert/alert-zh.md index c82f9a270582c6..de61ab8326c2c2 100644 --- a/docs/data/material/components/alert/alert-zh.md +++ b/docs/data/material/components/alert/alert-zh.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/alert/

一个警告提示组件展示了一段简短且重要的信息，在不影响用户操作的同时能够吸引用户的注意力。

-**注意：** 警告提示不属于 [Material Design 指南](https://material.io/) 中的一部分，但是 MUI 仍然会继续支持该组件。 +**注意：** 警告提示不属于 [Material Design 指南](https://m2.material.io/) 中的一部分，但是 MUI 仍然会继续支持该组件。 {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/alert/alert.md b/docs/data/material/components/alert/alert.md index fa7f6fbc51cd94..16d6a4ec9f239e 100644 --- a/docs/data/material/components/alert/alert.md +++ b/docs/data/material/components/alert/alert.md @@ -10,7 +10,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/alert/

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

-**Note:** This component is not documented in the [Material Design guidelines](https://material.io/), but MUI supports it. +**Note:** This component is not documented in the [Material Design guidelines](https://m2.material.io/), but MUI supports it. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/app-bar/app-bar-pt.md b/docs/data/material/components/app-bar/app-bar-pt.md index 39c0a71e92340c..e5cd61dd7399f1 100644 --- a/docs/data/material/components/app-bar/app-bar-pt.md +++ b/docs/data/material/components/app-bar/app-bar-pt.md @@ -3,7 +3,7 @@ product: material-ui title: App bar React component components: AppBar, Toolbar, Menu githubLabel: 'component: app bar' -materialDesign: https://material.io/components/app-bars-top +materialDesign: https://m2.material.io/components/app-bars-top --- # App bar @@ -148,6 +148,6 @@ function HideOnScroll(props) { ## Enable color on dark -Following the [Material Design guidelines](https://material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the app bar in dark mode. You can override this behavior by setting the `enableColorOnDark` prop to `true`. +Following the [Material Design guidelines](https://m2.material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the app bar in dark mode. You can override this behavior by setting the `enableColorOnDark` prop to `true`. {{"demo": "EnableColorOnDarkAppBar.js", "bg": true}} diff --git a/docs/data/material/components/app-bar/app-bar-zh.md b/docs/data/material/components/app-bar/app-bar-zh.md index b07b4ba0568554..596392551c7402 100644 --- a/docs/data/material/components/app-bar/app-bar-zh.md +++ b/docs/data/material/components/app-bar/app-bar-zh.md @@ -3,7 +3,7 @@ product: material-ui title: 应用栏（App bar）React组件 components: AppBar, Toolbar, Menu githubLabel: 'component: app bar' -materialDesign: https://material.io/components/app-bars-top +materialDesign: https://m2.material.io/components/app-bars-top --- # 应用栏（App bar） @@ -148,6 +148,6 @@ function HideOnScroll(props) { ## 启用深色模式颜色 -按照[Material Design设计准则](https://material.io/design/color/dark-theme.html)，`color`属性对深色模式下的应用栏外观没有影响。 你可以通过将`enableColorOnDark`属性设置为`true`覆盖这一行为。 +按照[Material Design设计准则](https://m2.material.io/design/color/dark-theme.html)，`color`属性对深色模式下的应用栏外观没有影响。 你可以通过将`enableColorOnDark`属性设置为`true`覆盖这一行为。 {{"demo": "EnableColorOnDarkAppBar.js", "bg": true}} diff --git a/docs/data/material/components/app-bar/app-bar.md b/docs/data/material/components/app-bar/app-bar.md index e924e553327c75..01b98f6770c929 100644 --- a/docs/data/material/components/app-bar/app-bar.md +++ b/docs/data/material/components/app-bar/app-bar.md @@ -1,14 +1,14 @@ --- product: material-ui -title: App bar React component +title: App Bar React component components: AppBar, Toolbar, Menu githubLabel: 'component: app bar' -materialDesign: https://material.io/components/app-bars-top +materialDesign: https://m2.material.io/components/app-bars-top --- -# App bar +# App Bar -

The App bar displays information and actions relating to the current screen.

+

The App Bar displays information and actions relating to the current screen.

The top App bar provides content and actions related to the current screen. It's used for branding, screen titles, navigation, and actions. @@ -148,7 +148,7 @@ function HideOnScroll(props) { ## Enable color on dark -Following the [Material Design guidelines](https://material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the app bar in dark mode. +Following the [Material Design guidelines](https://m2.material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the app bar in dark mode. You can override this behavior by setting the `enableColorOnDark` prop to `true`. {{"demo": "EnableColorOnDarkAppBar.js", "bg": true}} diff --git a/docs/data/material/components/bottom-navigation/bottom-navigation-pt.md b/docs/data/material/components/bottom-navigation/bottom-navigation-pt.md index 3a3772444928eb..5663b6479ff620 100644 --- a/docs/data/material/components/bottom-navigation/bottom-navigation-pt.md +++ b/docs/data/material/components/bottom-navigation/bottom-navigation-pt.md @@ -3,14 +3,14 @@ product: material-ui title: Bottom navigation React component components: BottomNavigation, BottomNavigationAction githubLabel: 'component: bottom navigation' -materialDesign: https://material.io/components/bottom-navigation +materialDesign: https://m2.material.io/components/bottom-navigation --- # Bottom navigation

A barra de navegação inferior permite navegar entre os principais destinos em um aplicativo.

-Barras de [navegação inferior](https://material.io/design/components/bottom-navigation.html) apresentam de três a cinco destinos na parte inferior da tela. Cada destino é apresentado por um ícone e opcionalmente um rótulo de texto. Quando um ícone de navegação inferior é pressionado, o usuário é levado ao destino associado com ícone. +Barras de [navegação inferior](https://m2.material.io/components/bottom-navigation) apresentam de três a cinco destinos na parte inferior da tela. Cada destino é apresentado por um ícone e opcionalmente um rótulo de texto. Quando um ícone de navegação inferior é pressionado, o usuário é levado ao destino associado com ícone. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/bottom-navigation/bottom-navigation-zh.md b/docs/data/material/components/bottom-navigation/bottom-navigation-zh.md index 7cd30eb992d8d2..43acfa723c6cd2 100644 --- a/docs/data/material/components/bottom-navigation/bottom-navigation-zh.md +++ b/docs/data/material/components/bottom-navigation/bottom-navigation-zh.md @@ -3,7 +3,7 @@ product: material-ui title: Bottom navigation React component components: BottomNavigation, BottomNavigationAction githubLabel: 'component: bottom navigation' -materialDesign: https://material.io/components/bottom-navigation +materialDesign: https://m2.material.io/components/bottom-navigation --- # Bottom navigation diff --git a/docs/data/material/components/bottom-navigation/bottom-navigation.md b/docs/data/material/components/bottom-navigation/bottom-navigation.md index d6a3b31856759d..ffe87e2809bfc0 100644 --- a/docs/data/material/components/bottom-navigation/bottom-navigation.md +++ b/docs/data/material/components/bottom-navigation/bottom-navigation.md @@ -1,14 +1,14 @@ --- product: material-ui -title: Bottom navigation React component +title: Bottom Navigation React component components: BottomNavigation, BottomNavigationAction githubLabel: 'component: bottom navigation' -materialDesign: https://material.io/components/bottom-navigation +materialDesign: https://m2.material.io/components/bottom-navigation --- -# Bottom navigation +# Bottom Navigation -

Bottom navigation bars allow movement between primary destinations in an app.

+

The Bottom Bavigation bar allows movement between primary destinations in an app.

Bottom navigation bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon. diff --git a/docs/data/material/components/buttons/buttons-pt.md b/docs/data/material/components/buttons/buttons-pt.md index cf5d533e1f43ff..28bebb136b9738 100644 --- a/docs/data/material/components/buttons/buttons-pt.md +++ b/docs/data/material/components/buttons/buttons-pt.md @@ -2,7 +2,7 @@ product: material-ui title: Componente React para Botão components: Button, IconButton, ButtonBase, LoadingButton -materialDesign: https://material.io/components/buttons +materialDesign: https://m2.material.io/components/buttons githubLabel: 'component: button' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/ unstyled: /base/react-button/ @@ -12,7 +12,7 @@ unstyled: /base/react-button/

Botões permitem que os usuários tomem ações e decisões com um simples toque.

-[Botões](https://material.io/design/components/buttons.html) comunicam ações que os usuários podem realizar. Eles são normalmente colocados em toda a interface do usuário, em lugares como: +[Botões](https://m2.material.io/components/buttons) comunicam ações que os usuários podem realizar. Eles são normalmente colocados em toda a interface do usuário, em lugares como: - Janelas modais - Formulários @@ -29,13 +29,13 @@ O `Botão` vem com três variantes: texto (padrão), contido e delineado. ### Botões de texto -[Botões de texto](https://material.io/components/buttons#text-button) normalmente são usados ​​para ações menos pronunciadas, incluindo aquelas localizadas: em caixas de diálogo, em cartões. Em cartões, os botões de texto ajudam a manter a ênfase no conteúdo do cartão. +[Botões de texto](https://m2.material.io/components/buttons#text-button) normalmente são usados ​​para ações menos pronunciadas, incluindo aquelas localizadas: em caixas de diálogo, em cartões. Em cartões, os botões de texto ajudam a manter a ênfase no conteúdo do cartão. {{"demo": "TextButtons.js"}} ### Botões contidos -[Botões Contidos](https://material.io/design/components/buttons.html#contained-button) tem alta ênfase, distinguem-se pelo uso de elevação e preenchimento. Eles contém as principais ações da sua aplicação. +[Botões Contidos](https://m2.material.io/components/buttons#contained-button) tem alta ênfase, distinguem-se pelo uso de elevação e preenchimento. Eles contém as principais ações da sua aplicação. {{"demo": "ContainedButtons.js"}} @@ -45,7 +45,7 @@ Você pode remover a elevação com a propriedade `disableElevation`. ### Botões delineados -[Outlined buttons](https://material.io/components/buttons#outlined-button) are medium-emphasis buttons. They contain actions that are important but aren't the primary action in an app. +[Outlined buttons](https://m2.material.io/components/buttons#outlined-button) are medium-emphasis buttons. They contain actions that are important but aren't the primary action in an app. Botões delineados são uma alternativa de menor ênfase comparado com botões contidos, ou uma uma alternativa de maior ênfase comparado com botões de texto. diff --git a/docs/data/material/components/buttons/buttons-zh.md b/docs/data/material/components/buttons/buttons-zh.md index 2371b37446a7ac..bdd41443e8cfd1 100644 --- a/docs/data/material/components/buttons/buttons-zh.md +++ b/docs/data/material/components/buttons/buttons-zh.md @@ -2,7 +2,7 @@ product: material-ui title: React Button（按钮）组件 components: Button, IconButton, ButtonBase, LoadingButton -materialDesign: https://material.io/components/buttons +materialDesign: https://m2.material.io/components/buttons githubLabel: 'component: button' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/ unstyled: /base/react-button/ @@ -29,13 +29,13 @@ unstyled: /base/react-button/ ### 文本按钮 -[Text buttons](https://material.io/components/buttons#text-button) are typically used for less-pronounced actions, including those located: in dialogs, in cards. 在卡片中，文本按钮有助于强调卡片的内容。 在卡片中，文本按钮有助于强调卡片的内容。 +[Text buttons](https://m2.material.io/components/buttons#text-button) are typically used for less-pronounced actions, including those located: in dialogs, in cards. 在卡片中，文本按钮有助于强调卡片的内容。 在卡片中，文本按钮有助于强调卡片的内容。 {{"demo": "TextButtons.js"}} ### 实心按钮 -[实心按钮](https://material.io/design/components/buttons.html#contained-button) 表示高度的强调，你根据它们的立体效果和填充颜色来区分彼此。 它们用于触发应用程序所具有的主要功能。 +[实心按钮](https://m2.material.io/components/buttons#contained-button) 表示高度的强调，你根据它们的立体效果和填充颜色来区分彼此。 它们用于触发应用程序所具有的主要功能。 {{"demo": "ContainedButtons.js"}} @@ -45,7 +45,7 @@ unstyled: /base/react-button/ ### 描边按钮 -[Outlined buttons](https://material.io/components/buttons#outlined-button) are medium-emphasis buttons. They contain actions that are important but aren't the primary action in an app. 它们用于触发应用程序中重要、但并非主要的那些操作。 They contain actions that are important but aren't the primary action in an app. +[Outlined buttons](https://m2.material.io/components/buttons#outlined-button) are medium-emphasis buttons. They contain actions that are important but aren't the primary action in an app. 它们用于触发应用程序中重要、但并非主要的那些操作。 They contain actions that are important but aren't the primary action in an app. 你也可以将描边按钮作为比实心按钮次要一点的替代方案，或者用来作为比文本按钮重要一点的展示。 diff --git a/docs/data/material/components/buttons/buttons.md b/docs/data/material/components/buttons/buttons.md index 28d99752fcf413..1d93e780bea939 100644 --- a/docs/data/material/components/buttons/buttons.md +++ b/docs/data/material/components/buttons/buttons.md @@ -2,7 +2,7 @@ product: material-ui title: React Button component components: Button, IconButton, ButtonBase, LoadingButton -materialDesign: https://material.io/components/buttons +materialDesign: https://m2.material.io/components/buttons githubLabel: 'component: button' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/button/ unstyled: /base/react-button/ @@ -29,7 +29,7 @@ The `Button` comes with three variants: text (default), contained, and outlined. ### Text button -[Text buttons](https://material.io/components/buttons#text-button) +[Text buttons](https://m2.material.io/components/buttons#text-button) are typically used for less-pronounced actions, including those located: in dialogs, in cards. In cards, text buttons help maintain an emphasis on card content. @@ -37,7 +37,7 @@ In cards, text buttons help maintain an emphasis on card content. ### Contained button -[Contained buttons](https://material.io/components/buttons#contained-button) +[Contained buttons](https://m2.material.io/components/buttons#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app. @@ -49,7 +49,7 @@ You can remove the elevation with the `disableElevation` prop. ### Outlined button -[Outlined buttons](https://material.io/components/buttons#outlined-button) are medium-emphasis buttons. +[Outlined buttons](https://m2.material.io/components/buttons#outlined-button) are medium-emphasis buttons. They contain actions that are important but aren't the primary action in an app. Outlined buttons are also a lower emphasis alternative to contained buttons, diff --git a/docs/data/material/components/cards/cards-pt.md b/docs/data/material/components/cards/cards-pt.md index 68ed42f94c9a58..3ad10ed0d476f0 100644 --- a/docs/data/material/components/cards/cards-pt.md +++ b/docs/data/material/components/cards/cards-pt.md @@ -3,14 +3,14 @@ product: material-ui title: Componente React para Cartão components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper githubLabel: 'component: card' -materialDesign: https://material.io/components/cards +materialDesign: https://m2.material.io/components/cards --- # Cartão

Cartões contêm conteúdo e ações sobre um único assunto.

-[Cartões](https://material.io/design/components/cards.html) são componentes que exibem conteúdo e ações em um único tópico. +[Cartões](https://m2.material.io/components/cards) são componentes que exibem conteúdo e ações em um único tópico. Eles devem ser relevantes, de fácil verificação e apresentar informações úteis. Elementos, como texto e imagens, deve ser colocado sobre eles de uma forma que indica claramente a hierarquia. diff --git a/docs/data/material/components/cards/cards-zh.md b/docs/data/material/components/cards/cards-zh.md index 57e328e8abb3b7..9564cc15fe4413 100644 --- a/docs/data/material/components/cards/cards-zh.md +++ b/docs/data/material/components/cards/cards-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Card（卡片）组件 components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper githubLabel: 'component: card' -materialDesign: https://material.io/components/cards +materialDesign: https://m2.material.io/components/cards --- # Card 卡片 diff --git a/docs/data/material/components/cards/cards.md b/docs/data/material/components/cards/cards.md index 9186ecc713f54b..adfd800b5646e4 100644 --- a/docs/data/material/components/cards/cards.md +++ b/docs/data/material/components/cards/cards.md @@ -3,7 +3,7 @@ product: material-ui title: React Card component components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper githubLabel: 'component: card' -materialDesign: https://material.io/components/cards +materialDesign: https://m2.material.io/components/cards --- # Card diff --git a/docs/data/material/components/checkboxes/checkboxes-pt.md b/docs/data/material/components/checkboxes/checkboxes-pt.md index 4125f4fd3b9270..25450680188099 100644 --- a/docs/data/material/components/checkboxes/checkboxes-pt.md +++ b/docs/data/material/components/checkboxes/checkboxes-pt.md @@ -2,7 +2,7 @@ product: material-ui title: Componente React para Caixa de seleção components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel -materialDesign: 'https://material.io/components/selection-controls#checkboxes' +materialDesign: 'https://m2.material.io/components/selection-controls#checkboxes' githubLabel: 'component: checkbox' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ --- @@ -11,7 +11,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/

Caixas de seleção permitem ao usuário selecionar um ou mais itens de um conjunto.

-[Caixas de seleção](https://material.io/design/components/selection-controls.html#checkboxes) podem ser usadas para ativar ou desativar uma opção. +[Caixas de seleção](https://m2.material.io/components/checkboxes) podem ser usadas para ativar ou desativar uma opção. Se você tem várias opções aparecendo em uma lista, você pode economizar espaço usando caixas de seleção ao invés de interruptores liga/desliga. Se você tem uma única opção, evite usar uma caixa de seleção e use um interruptor de liga/desliga. diff --git a/docs/data/material/components/checkboxes/checkboxes-zh.md b/docs/data/material/components/checkboxes/checkboxes-zh.md index acf2216cf985c4..850b299b68ecd4 100644 --- a/docs/data/material/components/checkboxes/checkboxes-zh.md +++ b/docs/data/material/components/checkboxes/checkboxes-zh.md @@ -2,7 +2,7 @@ product: material-ui title: React Checkbox（选择框）组件 components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel -materialDesign: 'https://material.io/components/selection-controls#checkboxes' +materialDesign: 'https://m2.material.io/components/selection-controls#checkboxes' githubLabel: 'component: checkbox' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ --- diff --git a/docs/data/material/components/checkboxes/checkboxes.md b/docs/data/material/components/checkboxes/checkboxes.md index 642c5545e4cf2a..890f76fc1c067e 100644 --- a/docs/data/material/components/checkboxes/checkboxes.md +++ b/docs/data/material/components/checkboxes/checkboxes.md @@ -2,7 +2,7 @@ product: material-ui title: React Checkbox component components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel -materialDesign: https://material.io/components/selection-controls#checkboxes +materialDesign: https://m2.material.io/components/selection-controls#checkboxes githubLabel: 'component: checkbox' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/checkbox/ --- diff --git a/docs/data/material/components/chips/chips-pt.md b/docs/data/material/components/chips/chips-pt.md index 2eab808c72b5c9..e42ffa36e651d2 100644 --- a/docs/data/material/components/chips/chips-pt.md +++ b/docs/data/material/components/chips/chips-pt.md @@ -3,14 +3,14 @@ product: material-ui title: Componente React Chip components: Chip githubLabel: 'component: chip' -materialDesign: https://material.io/components/chips +materialDesign: https://m2.material.io/components/chips --- # Chip

Chips são elementos compactos que representam uma entrada, atributo ou ação.

-[Chips](https://material.io/design/components/chips.html) permitirão que usuários insiram informações, façam seleções, filtrem conteúdo ou acionem gatilhos. +[Chips](https://m2.material.io/components/chips) permitirão que usuários insiram informações, façam seleções, filtrem conteúdo ou acionem gatilhos. Embora incluído aqui como um componente independente, o uso mais comum será em alguma forma de entrada, portanto, alguns dos comportamentos demonstrados aqui não são mostrados considerando um contexto. diff --git a/docs/data/material/components/chips/chips-zh.md b/docs/data/material/components/chips/chips-zh.md index 2a02fc725b4b51..d7c045069585b5 100644 --- a/docs/data/material/components/chips/chips-zh.md +++ b/docs/data/material/components/chips/chips-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Chip（纸片）组件 components: Chip githubLabel: 'component: chip' -materialDesign: https://material.io/components/chips +materialDesign: https://m2.material.io/components/chips --- # Chip diff --git a/docs/data/material/components/chips/chips.md b/docs/data/material/components/chips/chips.md index ef744a3c515be1..a57146eec3ffb0 100644 --- a/docs/data/material/components/chips/chips.md +++ b/docs/data/material/components/chips/chips.md @@ -3,7 +3,7 @@ product: material-ui title: React Chip component components: Chip githubLabel: 'component: chip' -materialDesign: https://material.io/components/chips +materialDesign: https://m2.material.io/components/chips --- # Chip diff --git a/docs/data/material/components/click-away-listener/click-away-listener.md b/docs/data/material/components/click-away-listener/click-away-listener.md index 753e01a607decc..0554ea08287c88 100644 --- a/docs/data/material/components/click-away-listener/click-away-listener.md +++ b/docs/data/material/components/click-away-listener/click-away-listener.md @@ -5,9 +5,9 @@ components: ClickAwayListener githubLabel: 'component: ClickAwayListener' --- -# Click-away listener +# Click-Away Listener -

Detect if a click event happened outside of an element. It listens for clicks that occur somewhere in the document.

+

The ClickAwayListener component detects when a click event happens outside of its child element.

- 📦 [992 B gzipped](/size-snapshot/). - ⚛️ Supports portals diff --git a/docs/data/material/components/css-baseline/css-baseline.md b/docs/data/material/components/css-baseline/css-baseline.md index 40b02965562dd1..2f6e45797a829b 100644 --- a/docs/data/material/components/css-baseline/css-baseline.md +++ b/docs/data/material/components/css-baseline/css-baseline.md @@ -6,7 +6,7 @@ githubLabel: 'component: CssBaseline' # CSS Baseline -

MUI provides a CssBaseline component to kickstart an elegant, consistent, and simple baseline to build upon.

+

The CssBaseline component helps to kickstart an elegant, consistent, and simple baseline to build upon.

{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} diff --git a/docs/data/material/components/dialogs/dialogs-pt.md b/docs/data/material/components/dialogs/dialogs-pt.md index 650add060ffbcf..0922952a58c85b 100644 --- a/docs/data/material/components/dialogs/dialogs-pt.md +++ b/docs/data/material/components/dialogs/dialogs-pt.md @@ -3,7 +3,7 @@ product: material-ui title: Componente Diálogo para React components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Slide githubLabel: 'component: dialog' -materialDesign: https://material.io/components/dialogs +materialDesign: https://m2.material.io/components/dialogs waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/ --- diff --git a/docs/data/material/components/dialogs/dialogs-zh.md b/docs/data/material/components/dialogs/dialogs-zh.md index 44d494d3daaeaa..84eaedce2d9851 100644 --- a/docs/data/material/components/dialogs/dialogs-zh.md +++ b/docs/data/material/components/dialogs/dialogs-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Dialog（对话框）组件 components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Slide githubLabel: 'component: dialog' -materialDesign: https://material.io/components/dialogs +materialDesign: https://m2.material.io/components/dialogs waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/ --- diff --git a/docs/data/material/components/dialogs/dialogs.md b/docs/data/material/components/dialogs/dialogs.md index cd32e0753a82b7..b7df2beeea4440 100644 --- a/docs/data/material/components/dialogs/dialogs.md +++ b/docs/data/material/components/dialogs/dialogs.md @@ -3,7 +3,7 @@ product: material-ui title: React Dialog component components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Slide githubLabel: 'component: dialog' -materialDesign: https://material.io/components/dialogs +materialDesign: https://m2.material.io/components/dialogs waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/dialogmodal/ --- diff --git a/docs/data/material/components/dividers/dividers-pt.md b/docs/data/material/components/dividers/dividers-pt.md index 68f24573223c83..66de6aa5b2b6dd 100644 --- a/docs/data/material/components/dividers/dividers-pt.md +++ b/docs/data/material/components/dividers/dividers-pt.md @@ -3,14 +3,14 @@ product: material-ui title: Componente React Divisor components: Divider githubLabel: 'component: divider' -materialDesign: https://material.io/components/dividers +materialDesign: https://m2.material.io/components/dividers --- # Divider

Um divisor é uma linha fina que agrupa conteúdo em listas e leiautes.

-[Divisores](https://material.io/design/components/dividers.html) separam conteúdos em grupos correspondentes. +[Divisores](https://m2.material.io/components/dividers) separam conteúdos em grupos correspondentes. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/dividers/dividers-zh.md b/docs/data/material/components/dividers/dividers-zh.md index 0bb3433ecc57fd..9f2c96ec555e58 100644 --- a/docs/data/material/components/dividers/dividers-zh.md +++ b/docs/data/material/components/dividers/dividers-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Divider（分隔线）组件 components: Divider githubLabel: 'component: divider' -materialDesign: https://material.io/components/dividers +materialDesign: https://m2.material.io/components/dividers --- # Divider diff --git a/docs/data/material/components/dividers/dividers.md b/docs/data/material/components/dividers/dividers.md index 6ad7cf3de83cbe..22f85bf674451c 100644 --- a/docs/data/material/components/dividers/dividers.md +++ b/docs/data/material/components/dividers/dividers.md @@ -3,7 +3,7 @@ product: material-ui title: React Divider component components: Divider githubLabel: 'component: divider' -materialDesign: https://material.io/components/dividers +materialDesign: https://m2.material.io/components/dividers --- # Divider diff --git a/docs/data/material/components/drawers/drawers-pt.md b/docs/data/material/components/drawers/drawers-pt.md index dac609d561f592..66583cf701fa4c 100644 --- a/docs/data/material/components/drawers/drawers-pt.md +++ b/docs/data/material/components/drawers/drawers-pt.md @@ -3,7 +3,7 @@ product: material-ui title: Componente Drawer para React components: Drawer, SwipeableDrawer githubLabel: 'component: drawer' -materialDesign: https://material.io/components/navigation-drawer +materialDesign: https://m2.material.io/components/navigation-drawer --- # Drawer @@ -12,7 +12,7 @@ materialDesign: https://material.io/components/navigation-drawer A navegação por drawers (ou "barras laterais") fornecem acesso a partes e funcionalidades do aplicativo, como trocar de conta. Eles podem estar permanentemente na tela ou controlados por um ícone de menu de navegação. -[Seções laterais](https://material.io/design/components/sheets-side.html) são áreas complementares usadas principalmente em tablets e computadores. +[Seções laterais](https://m2.material.io/design/components/sheets-side.html) são áreas complementares usadas principalmente em tablets e computadores. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/drawers/drawers-zh.md b/docs/data/material/components/drawers/drawers-zh.md index c5cf2297feb2cf..a7a8108a28aa08 100644 --- a/docs/data/material/components/drawers/drawers-zh.md +++ b/docs/data/material/components/drawers/drawers-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Drawer（抽屉）组件 components: Drawer, SwipeableDrawer githubLabel: 'component: drawer' -materialDesign: https://material.io/components/navigation-drawer +materialDesign: https://m2.material.io/components/navigation-drawer --- # Drawer（抽屉） @@ -12,7 +12,7 @@ materialDesign: https://material.io/components/navigation-drawer 用户能够通过 Navigation drawers（或者 “sidebars”）来访问目标地址和一些应用功能，例如切换帐户。 它们既可以永久在屏幕上，也可以由一个导航菜单图标控制。 -[Side sheets](https://material.io/components/sheets-side) 主要在平板和桌面上作为辅助侧边栏使用。 +[Side sheets](https://m2.material.io/components/sheets-side) 主要在平板和桌面上作为辅助侧边栏使用。 {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/drawers/drawers.md b/docs/data/material/components/drawers/drawers.md index b0da85c95723de..4c2f413ade3618 100644 --- a/docs/data/material/components/drawers/drawers.md +++ b/docs/data/material/components/drawers/drawers.md @@ -3,7 +3,7 @@ product: material-ui title: React Drawer component components: Drawer, SwipeableDrawer githubLabel: 'component: drawer' -materialDesign: https://material.io/components/navigation-drawer +materialDesign: https://m2.material.io/components/navigation-drawer --- # Drawer @@ -12,7 +12,7 @@ materialDesign: https://material.io/components/navigation-drawer Navigation drawers (or "sidebars") provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon. -[Side sheets](https://material.io/components/sheets-side) are supplementary surfaces primarily used on tablet and desktop. +[Side sheets](https://m2.material.io/components/sheets-side) are supplementary surfaces primarily used on tablet and desktop. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/floating-action-button/floating-action-button-pt.md b/docs/data/material/components/floating-action-button/floating-action-button-pt.md index 64ba4b7ad07668..d649ec0c83b691 100644 --- a/docs/data/material/components/floating-action-button/floating-action-button-pt.md +++ b/docs/data/material/components/floating-action-button/floating-action-button-pt.md @@ -3,7 +3,7 @@ product: material-ui title: Componente React Botão de ação flutuante components: Fab githubLabel: 'component: Fab' -materialDesign: https://material.io/components/buttons-floating-action-button +materialDesign: https://m2.material.io/components/buttons-floating-action-button --- # Botão de ação flutuante diff --git a/docs/data/material/components/floating-action-button/floating-action-button-zh.md b/docs/data/material/components/floating-action-button/floating-action-button-zh.md index fe2f019fd942ae..f8278c25e678f7 100644 --- a/docs/data/material/components/floating-action-button/floating-action-button-zh.md +++ b/docs/data/material/components/floating-action-button/floating-action-button-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Fab（浮动操作按钮）组件 components: Fab githubLabel: 'component: Fab' -materialDesign: https://material.io/components/buttons-floating-action-button +materialDesign: https://m2.material.io/components/buttons-floating-action-button --- # Floating action button 浮动操作按钮组件 diff --git a/docs/data/material/components/floating-action-button/floating-action-button.md b/docs/data/material/components/floating-action-button/floating-action-button.md index 85e88903dced1b..685b546f09fad3 100644 --- a/docs/data/material/components/floating-action-button/floating-action-button.md +++ b/docs/data/material/components/floating-action-button/floating-action-button.md @@ -3,12 +3,12 @@ product: material-ui title: React Floating Action Button (FAB) component components: Fab githubLabel: 'component: Fab' -materialDesign: https://material.io/components/buttons-floating-action-button +materialDesign: https://m2.material.io/components/buttons-floating-action-button --- # Floating Action Button -

A floating action button (FAB) performs the primary, or most common, action on a screen.

+

A Floating Action Button (FAB) performs the primary, or most common, action on a screen.

A floating action button appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in two types: regular, and extended. diff --git a/docs/data/material/components/grid/grid-pt.md b/docs/data/material/components/grid/grid-pt.md index 1f814fce8d4f16..d9aab4983507f6 100644 --- a/docs/data/material/components/grid/grid-pt.md +++ b/docs/data/material/components/grid/grid-pt.md @@ -3,14 +3,14 @@ product: material-ui title: Componente React Grade components: Grid githubLabel: 'component: Grid' -materialDesign: https://material.io/design/layout/understanding-layout.html +materialDesign: https://m2.material.io/design/layout/understanding-layout.html --- # Grid

O leiaute responsivo da grade do Material Design se adapta ao tamanho e orientação da tela, garantindo a consistência entre leiautes.

-Uma [grade](https://material.io/design/layout/responsive-layout-grid.html) cria consistência visual entre leiautes, enquanto permite flexibilidade em uma ampla variedade de projetos. A UI responsiva do Material Design é baseada em uma grade de 12 colunas. +Uma [grade](https://m2.material.io/design/layout/responsive-layout-grid.html) cria consistência visual entre leiautes, enquanto permite flexibilidade em uma ampla variedade de projetos. A UI responsiva do Material Design é baseada em uma grade de 12 colunas. {{"component": "modules/components/ComponentLinkHeader.js"}} @@ -65,7 +65,7 @@ The `rowSpacing` and `columnSpacing` props allow for specifying the row and colu ## Valores responsivos -You can switch the props' value based on the active breakpoint. For instance, we can implement the ["recommended"](https://material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design. +You can switch the props' value based on the active breakpoint. For instance, we can implement the ["recommended"](https://m2.material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design. {{"demo": "ResponsiveGrid.js", "bg": true}} diff --git a/docs/data/material/components/grid/grid-zh.md b/docs/data/material/components/grid/grid-zh.md index c0e0690ae337ff..8f0bf61db17745 100644 --- a/docs/data/material/components/grid/grid-zh.md +++ b/docs/data/material/components/grid/grid-zh.md @@ -3,14 +3,14 @@ product: material-ui title: React Grid（栅格）组件 components: Grid githubLabel: 'component: Grid' -materialDesign: https://material.io/design/layout/understanding-layout.html +materialDesign: https://m2.material.io/design/layout/understanding-layout.html --- # Grid 栅格

Material Design 响应式布局的栅格可适应屏幕大小和方向，确保布局在不同尺寸之间的一致性。

-[Grid 栅格组件](https://material.io/design/layout/responsive-layout-grid.html) 能确保不同布局间的视觉层面的舒适感，同时在众多不同设计中保持灵活性。 Material Design 基于 12 列的网格布局来做到 UI 的响应式。 +[Grid 栅格组件](https://m2.material.io/design/layout/responsive-layout-grid.html) 能确保不同布局间的视觉层面的舒适感，同时在众多不同设计中保持灵活性。 Material Design 基于 12 列的网格布局来做到 UI 的响应式。 {{"component": "modules/components/ComponentLinkHeader.js"}} @@ -64,7 +64,7 @@ materialDesign: https://material.io/design/layout/understanding-layout.html ## 响应式的值 -You can switch the props' value based on the active breakpoint. For instance, we can implement the ["recommended"](https://material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design. +You can switch the props' value based on the active breakpoint. For instance, we can implement the ["recommended"](https://m2.material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design. {{"demo": "ResponsiveGrid.js", "bg": true}} diff --git a/docs/data/material/components/grid/grid.md b/docs/data/material/components/grid/grid.md index a3e02de569c33f..46e05f32d40803 100644 --- a/docs/data/material/components/grid/grid.md +++ b/docs/data/material/components/grid/grid.md @@ -3,14 +3,14 @@ product: material-ui title: React Grid component components: Grid githubLabel: 'component: Grid' -materialDesign: https://material.io/design/layout/understanding-layout.html +materialDesign: https://m2.material.io/design/layout/understanding-layout.html --- # Grid

The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts.

-The [grid](https://material.io/design/layout/responsive-layout-grid.html) creates visual consistency between layouts while allowing flexibility across a wide variety of designs. +The [grid](https://m2.material.io/design/layout/responsive-layout-grid.html) creates visual consistency between layouts while allowing flexibility across a wide variety of designs. Material Design's responsive UI is based on a 12-column grid layout. {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} @@ -70,7 +70,7 @@ It's similar to the `row-gap` and `column-gap` properties of [CSS Grid](/system/ ## Responsive values You can switch the props' value based on the active breakpoint. -For instance, we can implement the ["recommended"](https://material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design. +For instance, we can implement the ["recommended"](https://m2.material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design. {{"demo": "ResponsiveGrid.js", "bg": true}} diff --git a/docs/data/material/components/grid2/grid2-pt.md b/docs/data/material/components/grid2/grid2-pt.md index fa3c2c17678067..3431982d7a9b0f 100644 --- a/docs/data/material/components/grid2/grid2-pt.md +++ b/docs/data/material/components/grid2/grid2-pt.md @@ -2,7 +2,7 @@ product: material-ui title: React Grid component githubLabel: 'component: Grid' -materialDesign: https://material.io/design/layout/understanding-layout.html +materialDesign: https://m2.material.io/design/layout/understanding-layout.html --- # Grid version 2 @@ -91,7 +91,7 @@ The `rowSpacing` and `columnSpacing` props let you specify row and column gaps i ## Responsive values -You can set prop values to change when a given breakpoint is active. For instance, we can implement Material Design's [recommended](https://material.io/design/layout/responsive-layout-grid.html) responsive layout grid, as seen in the following demo: +You can set prop values to change when a given breakpoint is active. For instance, we can implement Material Design's [recommended](https://m2.material.io/design/layout/responsive-layout-grid.html) responsive layout grid, as seen in the following demo: {{"demo": "ResponsiveGrid.js", "bg": true}} diff --git a/docs/data/material/components/grid2/grid2-zh.md b/docs/data/material/components/grid2/grid2-zh.md index fa3c2c17678067..3431982d7a9b0f 100644 --- a/docs/data/material/components/grid2/grid2-zh.md +++ b/docs/data/material/components/grid2/grid2-zh.md @@ -2,7 +2,7 @@ product: material-ui title: React Grid component githubLabel: 'component: Grid' -materialDesign: https://material.io/design/layout/understanding-layout.html +materialDesign: https://m2.material.io/design/layout/understanding-layout.html --- # Grid version 2 @@ -91,7 +91,7 @@ The `rowSpacing` and `columnSpacing` props let you specify row and column gaps i ## Responsive values -You can set prop values to change when a given breakpoint is active. For instance, we can implement Material Design's [recommended](https://material.io/design/layout/responsive-layout-grid.html) responsive layout grid, as seen in the following demo: +You can set prop values to change when a given breakpoint is active. For instance, we can implement Material Design's [recommended](https://m2.material.io/design/layout/responsive-layout-grid.html) responsive layout grid, as seen in the following demo: {{"demo": "ResponsiveGrid.js", "bg": true}} diff --git a/docs/data/material/components/grid2/grid2.md b/docs/data/material/components/grid2/grid2.md index c0a0a4c73fd490..d05ba9a3728bb1 100644 --- a/docs/data/material/components/grid2/grid2.md +++ b/docs/data/material/components/grid2/grid2.md @@ -2,7 +2,7 @@ product: material-ui title: React Grid component githubLabel: 'component: Grid' -materialDesign: https://material.io/design/layout/understanding-layout.html +materialDesign: https://m2.material.io/design/layout/understanding-layout.html --- # Grid version 2 @@ -101,7 +101,7 @@ They behave similarly to the `row-gap` and `column-gap` properties of [CSS Grid] ## Responsive values You can set prop values to change when a given breakpoint is active. -For instance, we can implement Material Design's [recommended](https://material.io/design/layout/responsive-layout-grid.html) responsive layout grid, as seen in the following demo: +For instance, we can implement Material Design's [recommended](https://m2.material.io/design/layout/responsive-layout-grid.html) responsive layout grid, as seen in the following demo: {{"demo": "ResponsiveGrid.js", "bg": true}} diff --git a/docs/data/material/components/icons/icons-pt.md b/docs/data/material/components/icons/icons-pt.md index 0aae8b0c0d467e..14205304295109 100644 --- a/docs/data/material/components/icons/icons-pt.md +++ b/docs/data/material/components/icons/icons-pt.md @@ -3,7 +3,7 @@ product: material-ui title: Componente React para Ícones components: Icon, SvgIcon githubLabel: 'components: SvgIcon' -materialDesign: https://material.io/design/iconography/system-icons.html +materialDesign: https://m2.material.io/design/iconography/system-icons.html --- # Ícones diff --git a/docs/data/material/components/icons/icons-zh.md b/docs/data/material/components/icons/icons-zh.md index 8778ace4be2b17..7a7c5dd6508552 100644 --- a/docs/data/material/components/icons/icons-zh.md +++ b/docs/data/material/components/icons/icons-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Icon（图标）组件 components: Icon, SvgIcon githubLabel: 'components: SvgIcon' -materialDesign: https://material.io/design/iconography/system-icons.html +materialDesign: https://m2.material.io/design/iconography/system-icons.html --- # Icons 图标 diff --git a/docs/data/material/components/icons/icons.md b/docs/data/material/components/icons/icons.md index 39fa723e844454..03c5fcf917ab7d 100644 --- a/docs/data/material/components/icons/icons.md +++ b/docs/data/material/components/icons/icons.md @@ -3,7 +3,7 @@ product: material-ui title: React Icon Component components: Icon, SvgIcon githubLabel: 'components: SvgIcon' -materialDesign: https://material.io/design/iconography/system-icons.html +materialDesign: https://m2.material.io/design/iconography/system-icons.html --- # Icons diff --git a/docs/data/material/components/image-list/image-list-pt.md b/docs/data/material/components/image-list/image-list-pt.md index 2b6969e1b48f55..4a409fc1e1a300 100644 --- a/docs/data/material/components/image-list/image-list-pt.md +++ b/docs/data/material/components/image-list/image-list-pt.md @@ -2,7 +2,7 @@ product: material-ui title: Componente React para Lista de Imagem components: ImageList, ImageListItem, ImageListItemBar -materialDesign: https://material.io/components/image-lists +materialDesign: https://m2.material.io/components/image-lists githubLabel: 'component: image list' --- diff --git a/docs/data/material/components/image-list/image-list-zh.md b/docs/data/material/components/image-list/image-list-zh.md index cec8ac4e5586df..8c9bc57d220a8a 100644 --- a/docs/data/material/components/image-list/image-list-zh.md +++ b/docs/data/material/components/image-list/image-list-zh.md @@ -2,7 +2,7 @@ product: material-ui title: React Image list（图像列表）组件 components: ImageList, ImageListItem, ImageListItemBar -materialDesign: https://material.io/components/image-lists +materialDesign: https://m2.material.io/components/image-lists githubLabel: 'component: image list' --- diff --git a/docs/data/material/components/image-list/image-list.md b/docs/data/material/components/image-list/image-list.md index 73f43b6f24a6eb..36964bc7b3f504 100644 --- a/docs/data/material/components/image-list/image-list.md +++ b/docs/data/material/components/image-list/image-list.md @@ -1,14 +1,14 @@ --- product: material-ui -title: Image list React component +title: Image Kist React component components: ImageList, ImageListItem, ImageListItemBar -materialDesign: https://material.io/components/image-lists +materialDesign: https://m2.material.io/components/image-lists githubLabel: 'component: image list' --- -# Image list +# Image List -

Image lists display a collection of images in an organized grid.

+

The Image List displays a collection of images in an organized grid.

Image lists represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold. diff --git a/docs/data/material/components/lists/lists-pt.md b/docs/data/material/components/lists/lists-pt.md index fbfe332bfc550b..bd6c6d46c624e0 100644 --- a/docs/data/material/components/lists/lists-pt.md +++ b/docs/data/material/components/lists/lists-pt.md @@ -3,14 +3,14 @@ product: material-ui title: Componente React Lista components: Collapse, Divider, List, ListItem, ListItemButton, ListItemAvatar, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader githubLabel: 'component: list' -materialDesign: https://material.io/components/lists +materialDesign: https://m2.material.io/components/lists --- # Listas

Listas são continuas, apresentam verticalmente texto ou imagens.

-[Listas](https://material.io/design/components/lists.html) são um grupo contínuo de texto ou imagens. Elas são compostas por itens contendo ações primárias e complementares, que são representados por ícones e texto. +[Listas](https://m2.material.io/components/lists) são um grupo contínuo de texto ou imagens. Elas são compostas por itens contendo ações primárias e complementares, que são representados por ícones e texto. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/lists/lists-zh.md b/docs/data/material/components/lists/lists-zh.md index b079eaeed45154..39456ddc8238df 100644 --- a/docs/data/material/components/lists/lists-zh.md +++ b/docs/data/material/components/lists/lists-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React List（列表）组件 components: Collapse, Divider, List, ListItem, ListItemButton, ListItemAvatar, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader githubLabel: 'component: list' -materialDesign: https://material.io/components/lists +materialDesign: https://m2.material.io/components/lists --- # List 列表 diff --git a/docs/data/material/components/lists/lists.md b/docs/data/material/components/lists/lists.md index b292658cea68fa..532313cf19720d 100644 --- a/docs/data/material/components/lists/lists.md +++ b/docs/data/material/components/lists/lists.md @@ -3,7 +3,7 @@ product: material-ui title: React List component components: Collapse, Divider, List, ListItem, ListItemButton, ListItemAvatar, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader githubLabel: 'component: list' -materialDesign: https://material.io/components/lists +materialDesign: https://m2.material.io/components/lists --- # Lists diff --git a/docs/data/material/components/material-icons/material-icons-pt.md b/docs/data/material/components/material-icons/material-icons-pt.md index dd16eb4125a34f..12ed0e258b1561 100644 --- a/docs/data/material/components/material-icons/material-icons-pt.md +++ b/docs/data/material/components/material-icons/material-icons-pt.md @@ -1,7 +1,7 @@ --- product: material-ui components: Ícone, SvgIcon -materialDesign: https://material.io/design/iconography/system-icons.html +materialDesign: https://m2.material.io/design/iconography/system-icons.html packageName: '@mui/icons-material' githubLabel: 'pacote: ícones' --- diff --git a/docs/data/material/components/material-icons/material-icons-zh.md b/docs/data/material/components/material-icons/material-icons-zh.md index 0a713751e6346a..b236c3332cfece 100644 --- a/docs/data/material/components/material-icons/material-icons-zh.md +++ b/docs/data/material/components/material-icons/material-icons-zh.md @@ -1,7 +1,7 @@ --- product: material-ui components: Icon, SvgIcon -materialDesign: https://material.io/design/iconography/system-icons.html +materialDesign: https://m2.material.io/design/iconography/system-icons.html packageName: '@mui/icons-material' githubLabel: 'package: icons' --- diff --git a/docs/data/material/components/material-icons/material-icons.md b/docs/data/material/components/material-icons/material-icons.md index a6adaaf6040e07..a702500ac28cfb 100644 --- a/docs/data/material/components/material-icons/material-icons.md +++ b/docs/data/material/components/material-icons/material-icons.md @@ -1,7 +1,7 @@ --- product: material-ui components: Icon, SvgIcon -materialDesign: https://material.io/design/iconography/system-icons.html +materialDesign: https://m2.material.io/design/iconography/system-icons.html packageName: '@mui/icons-material' githubLabel: 'package: icons' --- diff --git a/docs/data/material/components/menus/menus-pt.md b/docs/data/material/components/menus/menus-pt.md index 16149f2d2d4a2c..1419409ee7c75f 100644 --- a/docs/data/material/components/menus/menus-pt.md +++ b/docs/data/material/components/menus/menus-pt.md @@ -3,7 +3,7 @@ product: material-ui title: Componente React Menu components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper githubLabel: 'component: menu' -materialDesign: https://material.io/components/menus +materialDesign: https://m2.material.io/components/menus waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/ unstyled: /base/react-menu/ --- diff --git a/docs/data/material/components/menus/menus-zh.md b/docs/data/material/components/menus/menus-zh.md index de9ed8d9d11b89..74be240a972b1b 100644 --- a/docs/data/material/components/menus/menus-zh.md +++ b/docs/data/material/components/menus/menus-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Menu（菜单）组件 components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper githubLabel: 'component: menu' -materialDesign: https://material.io/components/menus +materialDesign: https://m2.material.io/components/menus waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/ unstyled: /base/react-menu/ --- diff --git a/docs/data/material/components/menus/menus.md b/docs/data/material/components/menus/menus.md index 4e2f669c2a31bc..7148995037717c 100644 --- a/docs/data/material/components/menus/menus.md +++ b/docs/data/material/components/menus/menus.md @@ -3,7 +3,7 @@ product: material-ui title: React Menu component components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper githubLabel: 'component: menu' -materialDesign: https://material.io/components/menus +materialDesign: https://m2.material.io/components/menus waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/ unstyled: /base/react-menu/ --- diff --git a/docs/data/material/components/paper/paper.md b/docs/data/material/components/paper/paper.md index a16880006c6a6e..2cac7dce2eb093 100644 --- a/docs/data/material/components/paper/paper.md +++ b/docs/data/material/components/paper/paper.md @@ -3,6 +3,7 @@ product: material-ui title: React Paper component components: Paper githubLabel: 'component: Paper' +materialDesign: https://m2.material.io/design/environment/elevation.html --- # Paper diff --git a/docs/data/material/components/progress/progress-pt.md b/docs/data/material/components/progress/progress-pt.md index 98251526335520..d07633edc62300 100644 --- a/docs/data/material/components/progress/progress-pt.md +++ b/docs/data/material/components/progress/progress-pt.md @@ -3,14 +3,14 @@ product: material-ui title: Componentes React para progresso circular, linear components: CircularProgress, LinearProgress githubLabel: 'component: CircularProgress' -materialDesign: https://material.io/components/progress-indicators +materialDesign: https://m2.material.io/components/progress-indicators --- # Progresso

Indicadores de progresso comumente conhecidos como spinners, expressam um tempo de espera não especificado ou exibem a duração de um processo.

-[Indicadores de progresso](https://material.io/design/components/progress-indicators.html) informam aos usuários sobre o estado de processos em progresso, como o carregamento de um aplicativo, envio de um formulário, ou atualizações. +[Indicadores de progresso](https://m2.material.io/components/progress-indicators) informam aos usuários sobre o estado de processos em progresso, como o carregamento de um aplicativo, envio de um formulário, ou atualizações. - O indicador circular **determinado** preenche a faixa circular invisível com cor, a medida que o indicador se move de 0 a 360 graus. - Indicador **indeterminado** demonstra um tempo de espera não especificado. diff --git a/docs/data/material/components/progress/progress-zh.md b/docs/data/material/components/progress/progress-zh.md index faad2c02974b25..e41c48e39fd3aa 100644 --- a/docs/data/material/components/progress/progress-zh.md +++ b/docs/data/material/components/progress/progress-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Circular progress（进度环组件），React Linear progress （进度条组件） components: CircularProgress, LinearProgress githubLabel: 'component: CircularProgress' -materialDesign: https://material.io/components/progress-indicators +materialDesign: https://m2.material.io/components/progress-indicators --- # Progress 进度条组件 diff --git a/docs/data/material/components/progress/progress.md b/docs/data/material/components/progress/progress.md index e8ad5037c0113f..ef5b5f22b8cf0a 100644 --- a/docs/data/material/components/progress/progress.md +++ b/docs/data/material/components/progress/progress.md @@ -3,7 +3,7 @@ product: material-ui title: Circular, Linear progress React components components: CircularProgress, LinearProgress githubLabel: 'component: progress' -materialDesign: https://material.io/components/progress-indicators +materialDesign: https://m2.material.io/components/progress-indicators --- # Progress diff --git a/docs/data/material/components/radio-buttons/radio-buttons-pt.md b/docs/data/material/components/radio-buttons/radio-buttons-pt.md index 95d2b23a4f93d1..9aeb3a9e8dd06e 100644 --- a/docs/data/material/components/radio-buttons/radio-buttons-pt.md +++ b/docs/data/material/components/radio-buttons/radio-buttons-pt.md @@ -3,7 +3,7 @@ product: material-ui title: Componente React para Botões de opção components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel githubLabel: 'component: radio' -materialDesign: 'https://material.io/components/selection-controls#radio-buttons' +materialDesign: 'https://m2.material.io/components/selection-controls#radio-buttons' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/ --- @@ -11,7 +11,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/

Botões de opção permitem o usuário selecionar uma das opções de um conjunto.

-Use [botões de opção](https://material.io/design/components/selection-controls.html#radio-buttons) quando um usuário precisar ver todas as opções disponíveis. If available options can be collapsed, consider using a [Select component](/material-ui/react-select/) because it uses less space. +Use [botões de opção](https://m2.material.io/components/radio-buttons) quando um usuário precisar ver todas as opções disponíveis. If available options can be collapsed, consider using a [Select component](/material-ui/react-select/) because it uses less space. Os botões de opção devem ter a opção comum e mais usada selecionada por padrão. diff --git a/docs/data/material/components/radio-buttons/radio-buttons-zh.md b/docs/data/material/components/radio-buttons/radio-buttons-zh.md index e26ec1aae7d9b6..e7c53b1219681a 100644 --- a/docs/data/material/components/radio-buttons/radio-buttons-zh.md +++ b/docs/data/material/components/radio-buttons/radio-buttons-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Radio buttons（单选按钮）组件 components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel githubLabel: 'component: radio' -materialDesign: 'https://material.io/components/selection-controls#radio-buttons' +materialDesign: 'https://m2.material.io/components/selection-controls#radio-buttons' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/ --- diff --git a/docs/data/material/components/radio-buttons/radio-buttons.md b/docs/data/material/components/radio-buttons/radio-buttons.md index 39eca613ee0692..50f6bacd12ece8 100644 --- a/docs/data/material/components/radio-buttons/radio-buttons.md +++ b/docs/data/material/components/radio-buttons/radio-buttons.md @@ -1,15 +1,15 @@ --- product: material-ui -title: React Radio button component +title: React Radio Group component components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel githubLabel: 'component: radio' -materialDesign: https://material.io/components/selection-controls#radio-buttons +materialDesign: https://m2.material.io/components/selection-controls#radio-buttons waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/radiobutton/ --- -# Radio button +# Radio Group -

Radio buttons allow the user to select one option from a set.

+

The Radio Group allows the user to select one option from a set.

Use radio buttons when the user needs to see all available options. If available options can be collapsed, consider using a [Select component](/material-ui/react-select/) because it uses less space. diff --git a/docs/data/material/components/selects/selects.md b/docs/data/material/components/selects/selects.md index 99babf0fdb93b0..34b638a0cca23a 100644 --- a/docs/data/material/components/selects/selects.md +++ b/docs/data/material/components/selects/selects.md @@ -3,6 +3,7 @@ product: material-ui title: React Select component components: Select, NativeSelect githubLabel: 'component: select' +materialDesign: https://m2.material.io/components/menus#exposed-dropdown-menu waiAria: https://www.w3.org/WAI/ARIA/apg/example-index/combobox/combobox-select-only.html unstyled: /base/react-select/ --- diff --git a/docs/data/material/components/slider/slider-pt.md b/docs/data/material/components/slider/slider-pt.md index a7c49c11ee3bce..762f53296c9d4c 100644 --- a/docs/data/material/components/slider/slider-pt.md +++ b/docs/data/material/components/slider/slider-pt.md @@ -3,7 +3,7 @@ product: material-ui title: Componente React Slider components: Slider githubLabel: 'component: slider' -materialDesign: https://material.io/components/sliders +materialDesign: https://m2.material.io/components/sliders waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/slidertwothumb/ unstyled: /base/react-slider/ --- @@ -12,7 +12,7 @@ unstyled: /base/react-slider/

Sliders permitem que os usuários façam seleções a partir de um intervalo de valores.

-[Sliders](https://material.io/design/components/sliders.html) refletem um intervalo de valores ao longo de uma barra, a partir do qual os usuários podem selecionar um único valor. Eles são ideais para ajustar configurações como volume, brilho ou aplicação de filtros de imagem. +[Sliders](https://m2.material.io/design/components/sliders.html) refletem um intervalo de valores ao longo de uma barra, a partir do qual os usuários podem selecionar um único valor. Eles são ideais para ajustar configurações como volume, brilho ou aplicação de filtros de imagem. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/slider/slider-zh.md b/docs/data/material/components/slider/slider-zh.md index 437ecdcf57f70a..9069aad46ff81f 100644 --- a/docs/data/material/components/slider/slider-zh.md +++ b/docs/data/material/components/slider/slider-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Slider（滑块）组件 components: Slider githubLabel: 'component: slider' -materialDesign: https://material.io/components/sliders +materialDesign: https://m2.material.io/components/sliders waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/slidertwothumb/ unstyled: /base/react-slider/ --- diff --git a/docs/data/material/components/slider/slider.md b/docs/data/material/components/slider/slider.md index 063ab4c2aa89d9..b5275d9b4774cc 100644 --- a/docs/data/material/components/slider/slider.md +++ b/docs/data/material/components/slider/slider.md @@ -3,7 +3,7 @@ product: material-ui title: React Slider component components: Slider githubLabel: 'component: slider' -materialDesign: https://material.io/components/sliders +materialDesign: https://m2.material.io/components/sliders waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/slidertwothumb/ unstyled: /base/react-slider/ --- diff --git a/docs/data/material/components/snackbars/snackbars-pt.md b/docs/data/material/components/snackbars/snackbars-pt.md index 39d96bc8b9c5b7..e2756ad4c85832 100644 --- a/docs/data/material/components/snackbars/snackbars-pt.md +++ b/docs/data/material/components/snackbars/snackbars-pt.md @@ -3,7 +3,7 @@ product: material-ui title: Componente React Snackbar components: Snackbar, SnackbarContent githubLabel: 'component: snackbar' -materialDesign: https://material.io/components/snackbars +materialDesign: https://m2.material.io/components/snackbars waiAria: 'https://www.w3.org/TR/wai-aria-1.1/#alert' --- @@ -11,7 +11,7 @@ waiAria: 'https://www.w3.org/TR/wai-aria-1.1/#alert'

Snackbars fornecem mensagens breves sobre os processos de aplicativos. O componente também é conhecido como toast(torrada).

-[Snackbars](https://material.io/design/components/snackbars.html) informam aos usuários de um processo que a aplicação realizou ou irá executar. Eles aparecem temporariamente, na parte inferior da tela. They shouldn't interrupt the user experience, and they don't require user input to disappear. +[Snackbars](https://m2.material.io/components/snackbars) informam aos usuários de um processo que a aplicação realizou ou irá executar. Eles aparecem temporariamente, na parte inferior da tela. They shouldn't interrupt the user experience, and they don't require user input to disappear. Snackbars contêm uma única linha de texto diretamente relacionada à operação realizada. Eles podem conter uma ação de texto, mas não ícones. Você pode usá-los para exibir notificações. diff --git a/docs/data/material/components/snackbars/snackbars-zh.md b/docs/data/material/components/snackbars/snackbars-zh.md index 4641f9d0c1a739..78adfc171a2f72 100644 --- a/docs/data/material/components/snackbars/snackbars-zh.md +++ b/docs/data/material/components/snackbars/snackbars-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Snackbar（消息条）组件 components: Snackbar, SnackbarContent githubLabel: 'component: snackbar' -materialDesign: https://material.io/components/snackbars +materialDesign: https://m2.material.io/components/snackbars waiAria: 'https://www.w3.org/TR/wai-aria-1.1/#alert' --- diff --git a/docs/data/material/components/snackbars/snackbars.md b/docs/data/material/components/snackbars/snackbars.md index c21db4ad1c114a..233773dad3617b 100644 --- a/docs/data/material/components/snackbars/snackbars.md +++ b/docs/data/material/components/snackbars/snackbars.md @@ -3,7 +3,7 @@ product: material-ui title: React Snackbar component components: Snackbar, SnackbarContent githubLabel: 'component: snackbar' -materialDesign: https://material.io/components/snackbars +materialDesign: https://m2.material.io/components/snackbars waiAria: https://www.w3.org/TR/wai-aria-1.1/#alert --- diff --git a/docs/data/material/components/speed-dial/speed-dial-pt.md b/docs/data/material/components/speed-dial/speed-dial-pt.md index bd2e9018a82788..775a553bd09ceb 100644 --- a/docs/data/material/components/speed-dial/speed-dial-pt.md +++ b/docs/data/material/components/speed-dial/speed-dial-pt.md @@ -3,7 +3,7 @@ product: material-ui title: React Speed dial component components: SpeedDial, SpeedDialAction, SpeedDialIcon githubLabel: 'component: speed dial' -materialDesign: 'https://material.io/components/buttons-floating-action-button#types-of-transitions' +materialDesign: 'https://m2.material.io/components/buttons-floating-action-button#types-of-transitions' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/ --- diff --git a/docs/data/material/components/speed-dial/speed-dial-zh.md b/docs/data/material/components/speed-dial/speed-dial-zh.md index f11876c0341fbc..f918d34a15a23a 100644 --- a/docs/data/material/components/speed-dial/speed-dial-zh.md +++ b/docs/data/material/components/speed-dial/speed-dial-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Speed dial component components: SpeedDial, SpeedDialAction, SpeedDialIcon githubLabel: 'component: speed dial' -materialDesign: 'https://material.io/components/buttons-floating-action-button#types-of-transitions' +materialDesign: 'https://m2.material.io/components/buttons-floating-action-button#types-of-transitions' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/ --- diff --git a/docs/data/material/components/speed-dial/speed-dial.md b/docs/data/material/components/speed-dial/speed-dial.md index f4102372791bfe..7bc518ee7086c6 100644 --- a/docs/data/material/components/speed-dial/speed-dial.md +++ b/docs/data/material/components/speed-dial/speed-dial.md @@ -1,15 +1,15 @@ --- product: material-ui -title: React Speed dial component +title: React Speed Dial component components: SpeedDial, SpeedDialAction, SpeedDialIcon githubLabel: 'component: speed dial' -materialDesign: https://material.io/components/buttons-floating-action-button#types-of-transitions +materialDesign: https://m2.material.io/components/buttons-floating-action-button#types-of-transitions waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/menubutton/ --- -# Speed dial +# Speed Dial -

When pressed, a floating action button can display three to six related actions in the form of a speed dial.

+

When pressed, a floating action button can display three to six related actions in the form of a Speed Dial.

If more than six actions are needed, something other than a FAB should be used to present them. diff --git a/docs/data/material/components/steppers/steppers-pt.md b/docs/data/material/components/steppers/steppers-pt.md index 8dc496b5000290..9f92ae983b9006 100644 --- a/docs/data/material/components/steppers/steppers-pt.md +++ b/docs/data/material/components/steppers/steppers-pt.md @@ -3,14 +3,14 @@ product: material-ui title: Componente React Assistente components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper githubLabel: 'component: stepper' -materialDesign: https://material.io/archive/guidelines/components/steppers.html +materialDesign: https://m1.material.io/components/steppers.html --- # Assistente

Assistentes transmitem progresso através de etapas numeradas. Ele fornece um fluxo de trabalho com etapas.

-[Assistentes](https://material.io/archive/guidelines/components/steppers.html) exibem o progresso através de uma sequência de etapas lógicas e numeradas. Eles também podem ser usados para navegação. Assistentes podem exibir uma mensagem de feedback transiente depois que uma etapa é salva. +[Assistentes](https://m1.material.io/components/steppers.html) exibem o progresso através de uma sequência de etapas lógicas e numeradas. Eles também podem ser usados para navegação. Assistentes podem exibir uma mensagem de feedback transiente depois que uma etapa é salva. - **Tipos de etapas**: Editável, Somente leitura, Mobile, Opcional - **Tipos de assistentes**: Horizontal, Vertical, Linear, Não linear @@ -18,7 +18,7 @@ materialDesign: https://material.io/archive/guidelines/components/steppers.html {{"component": "modules/components/ComponentLinkHeader.js"}} :::warning -**Note:** Steppers are no longer documented in the [Material Design guidelines](https://material.io/), but Material UI will continue to support them. +**Note:** Steppers are no longer documented in the [Material Design guidelines](https://m2.material.io/), but Material UI will continue to support them. ::: ## Assistente horizontal @@ -79,7 +79,7 @@ The content of a step is unmounted when closed. If you need to make the content ## Assistente Mobile -This component implements a compact stepper suitable for a mobile device. It has more limited functionality than the vertical stepper. See [mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) for its inspiration. +This component implements a compact stepper suitable for a mobile device. It has more limited functionality than the vertical stepper. See [mobile steps](https://m1.material.io/components/steppers.html#steppers-types-of-steps) for its inspiration. The mobile stepper supports three variants to display progress through the available steps: text, dots, and progress. diff --git a/docs/data/material/components/steppers/steppers-zh.md b/docs/data/material/components/steppers/steppers-zh.md index 787ad465772baa..06dfaf91d58b61 100644 --- a/docs/data/material/components/steppers/steppers-zh.md +++ b/docs/data/material/components/steppers/steppers-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Stepper（步骤条）组件 components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper githubLabel: 'component: stepper' -materialDesign: https://material.io/archive/guidelines/components/steppers.html +materialDesign: https://m1.material.io/components/steppers.html --- # Stepper 步骤条组件 @@ -18,7 +18,7 @@ materialDesign: https://material.io/archive/guidelines/components/steppers.html {{"component": "modules/components/ComponentLinkHeader.js"}} :::warning -**Note:** Steppers are no longer documented in the [Material Design guidelines](https://material.io/), but Material UI will continue to support them. +**Note:** Steppers are no longer documented in the [Material Design guidelines](https://m2.material.io/), but Material UI will continue to support them. ::: ## 水平步骤条 @@ -79,7 +79,7 @@ The content of a step is unmounted when closed. If you need to make the content ## 移动设备上的步骤条 -This component implements a compact stepper suitable for a mobile device. It has more limited functionality than the vertical stepper. See [mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) for its inspiration. +This component implements a compact stepper suitable for a mobile device. It has more limited functionality than the vertical stepper. See [mobile steps](https://m1.material.io/components/steppers.html#steppers-types-of-steps) for its inspiration. The mobile stepper supports three variants to display progress through the available steps: text, dots, and progress. diff --git a/docs/data/material/components/steppers/steppers.md b/docs/data/material/components/steppers/steppers.md index 8be159cb770d1c..105d590fddc6df 100644 --- a/docs/data/material/components/steppers/steppers.md +++ b/docs/data/material/components/steppers/steppers.md @@ -3,7 +3,7 @@ product: material-ui title: React Stepper component components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper githubLabel: 'component: stepper' -materialDesign: https://material.io/archive/guidelines/components/steppers.html +materialDesign: https://m1.material.io/components/steppers.html --- # Stepper @@ -19,7 +19,7 @@ Steppers may display a transient feedback message after a step is saved. {{"component": "modules/components/ComponentLinkHeader.js"}} :::warning -**Note:** Steppers are no longer documented in the [Material Design guidelines](https://material.io/), but Material UI will continue to support them. +**Note:** Steppers are no longer documented in the [Material Design guidelines](https://m2.material.io/), but Material UI will continue to support them. ::: ## Horizontal stepper @@ -84,7 +84,7 @@ If you need to make the content available to search engines or render expensive ## Mobile stepper -This component implements a compact stepper suitable for a mobile device. It has more limited functionality than the vertical stepper. See [mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) for its inspiration. +This component implements a compact stepper suitable for a mobile device. It has more limited functionality than the vertical stepper. See [mobile steps](https://m1.material.io/components/steppers.html#steppers-types-of-steps) for its inspiration. The mobile stepper supports three variants to display progress through the available steps: text, dots, and progress. diff --git a/docs/data/material/components/switches/switches-pt.md b/docs/data/material/components/switches/switches-pt.md index 58fe06c5e580a7..499c32ecf5ee51 100644 --- a/docs/data/material/components/switches/switches-pt.md +++ b/docs/data/material/components/switches/switches-pt.md @@ -3,7 +3,7 @@ product: material-ui title: Componente React Interruptor components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel githubLabel: 'component: switch' -materialDesign: 'https://material.io/components/selection-controls#switches' +materialDesign: 'https://m2.material.io/components/selection-controls#switches' unstyled: /base/react-switch/ --- @@ -11,7 +11,7 @@ unstyled: /base/react-switch/

Interruptores alternam o estado de uma única configuração ligado ou desligado.

-[Interruptores](https://material.io/design/components/selection-controls.html#switches) são a forma preferida de ajustes de configuração em mobile. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label. +[Interruptores](https://m2.material.io/design/components/selection-controls.html#switches) são a forma preferida de ajustes de configuração em mobile. The option that the switch controls, as well as the state it's in, should be made clear from the corresponding inline label. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/switches/switches-zh.md b/docs/data/material/components/switches/switches-zh.md index 19a430d7005aa0..2a4b980a6d1565 100644 --- a/docs/data/material/components/switches/switches-zh.md +++ b/docs/data/material/components/switches/switches-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Switch（开关）组件 components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel githubLabel: 'component: switch' -materialDesign: 'https://material.io/components/selection-controls#switches' +materialDesign: 'https://m2.material.io/components/selection-controls#switches' unstyled: /base/react-switch/ --- diff --git a/docs/data/material/components/switches/switches.md b/docs/data/material/components/switches/switches.md index 8c0bc2597d5f8f..0a12d11fc1659a 100644 --- a/docs/data/material/components/switches/switches.md +++ b/docs/data/material/components/switches/switches.md @@ -3,7 +3,7 @@ product: material-ui title: React Switch component components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel githubLabel: 'component: switch' -materialDesign: https://material.io/components/selection-controls#switches +materialDesign: https://m2.material.io/components/selection-controls#switches unstyled: /base/react-switch/ --- diff --git a/docs/data/material/components/tables/tables-pt.md b/docs/data/material/components/tables/tables-pt.md index 6f71a73fef627b..b83667e081ae1d 100644 --- a/docs/data/material/components/tables/tables-pt.md +++ b/docs/data/material/components/tables/tables-pt.md @@ -4,7 +4,7 @@ title: Componente React Tabela components: Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel githubLabel: 'component: table' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/table/ -materialDesign: https://material.io/components/data-tables +materialDesign: https://m2.material.io/components/data-tables --- # Tabela diff --git a/docs/data/material/components/tables/tables-zh.md b/docs/data/material/components/tables/tables-zh.md index b39b822942f531..0f80652b9ac9be 100644 --- a/docs/data/material/components/tables/tables-zh.md +++ b/docs/data/material/components/tables/tables-zh.md @@ -4,7 +4,7 @@ title: React Table（表格）组件 components: Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel githubLabel: 'component: table' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/table/ -materialDesign: https://material.io/components/data-tables +materialDesign: https://m2.material.io/components/data-tables --- # Table 表格 diff --git a/docs/data/material/components/tables/tables.md b/docs/data/material/components/tables/tables.md index aa91288a793d70..419ba84feea167 100644 --- a/docs/data/material/components/tables/tables.md +++ b/docs/data/material/components/tables/tables.md @@ -4,7 +4,7 @@ title: React Table component components: Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel githubLabel: 'component: table' waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/table/ -materialDesign: https://material.io/components/data-tables +materialDesign: https://m2.material.io/components/data-tables --- # Table diff --git a/docs/data/material/components/tabs/tabs-pt.md b/docs/data/material/components/tabs/tabs-pt.md index 509674f58d2912..c1091eeae43d71 100644 --- a/docs/data/material/components/tabs/tabs-pt.md +++ b/docs/data/material/components/tabs/tabs-pt.md @@ -3,7 +3,7 @@ product: material-ui title: Componente React Abas components: Tabs, Tab, TabScrollButton, TabContext, TabList, TabPanel, TabsUnstyled, TabUnstyled, TabPanelUnstyled, TabsListUnstyled githubLabel: 'component: tabs' -materialDesign: https://material.io/components/tabs +materialDesign: https://m2.material.io/components/tabs waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/ unstyled: /base/react-tabs/ --- @@ -12,7 +12,7 @@ unstyled: /base/react-tabs/

As abas facilitam a exploração e alternam entre diferentes visualizações.

-As [abas](https://material.io/design/components/tabs.html) organizam e permitem a navegação entre grupos de conteúdo relacionados e no mesmo nível hierárquico. +As [abas](https://m2.material.io/design/components/tabs.html) organizam e permitem a navegação entre grupos de conteúdo relacionados e no mesmo nível hierárquico. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/tabs/tabs-zh.md b/docs/data/material/components/tabs/tabs-zh.md index 40eac1f730f760..baedded12768ea 100644 --- a/docs/data/material/components/tabs/tabs-zh.md +++ b/docs/data/material/components/tabs/tabs-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Tabs（选项卡）组件 components: Tabs, Tab, TabScrollButton, TabContext, TabList, TabPanel, TabsUnstyled, TabUnstyled, TabPanelUnstyled, TabsListUnstyled githubLabel: 'component: tabs' -materialDesign: https://material.io/components/tabs +materialDesign: https://m2.material.io/components/tabs waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/ unstyled: /base/react-tabs/ --- diff --git a/docs/data/material/components/tabs/tabs.md b/docs/data/material/components/tabs/tabs.md index 917af807bd1219..88fe09d62526e4 100644 --- a/docs/data/material/components/tabs/tabs.md +++ b/docs/data/material/components/tabs/tabs.md @@ -3,7 +3,7 @@ product: material-ui title: React Tabs component components: Tabs, Tab, TabScrollButton, TabContext, TabList, TabPanel, TabsUnstyled, TabUnstyled, TabPanelUnstyled, TabsListUnstyled githubLabel: 'component: tabs' -materialDesign: https://material.io/components/tabs +materialDesign: https://m2.material.io/components/tabs waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/ unstyled: /base/react-tabs/ --- diff --git a/docs/data/material/components/text-fields/text-fields-pt.md b/docs/data/material/components/text-fields/text-fields-pt.md index fe20b76715c298..565b7b9317170b 100644 --- a/docs/data/material/components/text-fields/text-fields-pt.md +++ b/docs/data/material/components/text-fields/text-fields-pt.md @@ -3,7 +3,7 @@ product: material-ui title: Text field React component components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, InputBase, InputLabel, OutlinedInput, TextField githubLabel: 'component: text field' -materialDesign: https://material.io/components/text-fields +materialDesign: https://m2.material.io/components/text-fields unstyled: /base/react-input/ --- @@ -11,7 +11,7 @@ unstyled: /base/react-input/

Campos de texto permitem que os usuários digitem e editem texto.

-[Campos de texto](https://material.io/design/components/text-fields.html) permitem que os usuários insiram texto em uma interface de usuário. Eles geralmente aparecem em formulários e diálogos. +[Campos de texto](https://m2.material.io/components/text-fields) permitem que os usuários insiram texto em uma interface de usuário. Eles geralmente aparecem em formulários e diálogos. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/text-fields/text-fields-zh.md b/docs/data/material/components/text-fields/text-fields-zh.md index bf739b698a76dc..6b6bee346e91df 100644 --- a/docs/data/material/components/text-fields/text-fields-zh.md +++ b/docs/data/material/components/text-fields/text-fields-zh.md @@ -3,7 +3,7 @@ product: material-ui title: Text field React component components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, InputBase, InputLabel, OutlinedInput, TextField githubLabel: 'component: text field' -materialDesign: https://material.io/components/text-fields +materialDesign: https://m2.material.io/components/text-fields unstyled: /base/react-input/ --- @@ -21,7 +21,7 @@ unstyled: /base/react-input/ {{"demo": "BasicTextFields.js"}} -**友情提示：** [Material 设计指南](https://material.io/)不再记录 `TextField` 的 standard 布局，（[原因见此](https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03)），但是 Material-UI 会继续支持此布局。 +**友情提示：** [Material 设计指南](https://m2.material.io/)不再记录 `TextField` 的 standard 布局，（[原因见此](https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03)），但是 Material-UI 会继续支持此布局。 ## Form props 表单的属性 diff --git a/docs/data/material/components/text-fields/text-fields.md b/docs/data/material/components/text-fields/text-fields.md index a7ddd833b8cccc..83dda1aa4fd21c 100644 --- a/docs/data/material/components/text-fields/text-fields.md +++ b/docs/data/material/components/text-fields/text-fields.md @@ -3,13 +3,13 @@ product: material-ui title: React Text Field component components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, InputBase, InputLabel, OutlinedInput, TextField githubLabel: 'component: text field' -materialDesign: https://material.io/components/text-fields +materialDesign: https://m2.material.io/components/text-fields unstyled: /base/react-input/ --- # Text Field -

Text fields let users enter and edit text.

+

Text Fields let users enter and edit text.

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. @@ -22,7 +22,7 @@ It comes with three variants: outlined (default), filled, and standard. {{"demo": "BasicTextFields.js"}} -**Note:** The standard variant of the `TextField` is no longer documented in the [Material Design guidelines](https://material.io/) +**Note:** The standard variant of the `TextField` is no longer documented in the [Material Design guidelines](https://m2.material.io/) ([here's why](https://medium.com/google-design/the-evolution-of-material-designs-text-fields-603688b3fe03)), but MUI will continue to support it. diff --git a/docs/data/material/components/timeline/timeline-pt.md b/docs/data/material/components/timeline/timeline-pt.md index 62d832e0835afc..baaaebc85a37bb 100644 --- a/docs/data/material/components/timeline/timeline-pt.md +++ b/docs/data/material/components/timeline/timeline-pt.md @@ -10,7 +10,7 @@ packageName: '@mui/lab'

A linha do tempo exibe uma lista de eventos em ordem cronológica.

-**Observação:** Este componente não está documentado nas [diretrizes do Material Design](https://material.io/), mas o Material-UI o suporta. +**Observação:** Este componente não está documentado nas [diretrizes do Material Design](https://m2.material.io/), mas o Material-UI o suporta. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/timeline/timeline-zh.md b/docs/data/material/components/timeline/timeline-zh.md index 6ed54d5e22fd3c..6c8b477098404e 100644 --- a/docs/data/material/components/timeline/timeline-zh.md +++ b/docs/data/material/components/timeline/timeline-zh.md @@ -10,7 +10,7 @@ packageName: '@mui/lab'

时间轴组件按时间顺序来展示了一系列的事件。

-**请注意：**该组件不再出现在 [Material Design 指南](https://material.io/)中, 但 Material-UI 会继续支持此组件。 +**请注意：**该组件不再出现在 [Material Design 指南](https://m2.material.io/)中, 但 Material-UI 会继续支持此组件。 {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/timeline/timeline.md b/docs/data/material/components/timeline/timeline.md index 7eb74ddbc1f6c3..adfaef3f278444 100644 --- a/docs/data/material/components/timeline/timeline.md +++ b/docs/data/material/components/timeline/timeline.md @@ -10,7 +10,7 @@ packageName: '@mui/lab'

The timeline displays a list of events in chronological order.

-**Note:** This component is not documented in the [Material Design guidelines](https://material.io/), but MUI supports it. +**Note:** This component is not documented in the [Material Design guidelines](https://m2.material.io/), but MUI supports it. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/toggle-button/toggle-button-pt.md b/docs/data/material/components/toggle-button/toggle-button-pt.md index 57c7b393f0f270..1ff83432cd298b 100644 --- a/docs/data/material/components/toggle-button/toggle-button-pt.md +++ b/docs/data/material/components/toggle-button/toggle-button-pt.md @@ -3,14 +3,14 @@ product: material-ui title: Toggle button React component components: ToggleButton, ToggleButtonGroup githubLabel: 'component: toggle button' -materialDesign: 'https://material.io/components/buttons#toggle-button' +materialDesign: 'https://m2.material.io/components/buttons#toggle-button' --- # Toggle button

Os botões de alternância podem ser usados para agrupar opções relacionadas.

-Para enfatizar grupos de [botões de alternância](https://material.io/components/buttons#toggle-button) relacionados, o grupo deve ter um contêiner em comum. O `ToggleButtonGroup` controla o estado selecionado de seus botões filhos através de sua propriedade `value`. +Para enfatizar grupos de [botões de alternância](https://m2.material.io/components/buttons#toggle-button) relacionados, o grupo deve ter um contêiner em comum. O `ToggleButtonGroup` controla o estado selecionado de seus botões filhos através de sua propriedade `value`. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/toggle-button/toggle-button-zh.md b/docs/data/material/components/toggle-button/toggle-button-zh.md index e584ac30b0c704..89d9d19107c0dd 100644 --- a/docs/data/material/components/toggle-button/toggle-button-zh.md +++ b/docs/data/material/components/toggle-button/toggle-button-zh.md @@ -3,7 +3,7 @@ product: material-ui title: Toggle button React component components: ToggleButton, ToggleButtonGroup githubLabel: 'component: toggle button' -materialDesign: 'https://material.io/components/buttons#toggle-button' +materialDesign: 'https://m2.material.io/components/buttons#toggle-button' --- # Toggle button diff --git a/docs/data/material/components/toggle-button/toggle-button.md b/docs/data/material/components/toggle-button/toggle-button.md index a08130eb8de84d..6040026bad3458 100644 --- a/docs/data/material/components/toggle-button/toggle-button.md +++ b/docs/data/material/components/toggle-button/toggle-button.md @@ -1,14 +1,14 @@ --- product: material-ui -title: Toggle button React component +title: Toggle Button React component components: ToggleButton, ToggleButtonGroup githubLabel: 'component: toggle button' -materialDesign: https://material.io/components/buttons#toggle-button +materialDesign: https://m2.material.io/components/buttons#toggle-button --- -# Toggle button +# Toggle Button -

Toggle buttons can be used to group related options.

+

A Toggle Button can be used to group related options.

To emphasize groups of related Toggle buttons, a group should share a common container. diff --git a/docs/data/material/components/tooltips/tooltips-pt.md b/docs/data/material/components/tooltips/tooltips-pt.md index d8d952c6087d2b..e84ab384659da7 100644 --- a/docs/data/material/components/tooltips/tooltips-pt.md +++ b/docs/data/material/components/tooltips/tooltips-pt.md @@ -3,7 +3,7 @@ product: material-ui title: Componente React para Dicas components: Tooltip githubLabel: 'component: tooltip' -materialDesign: https://material.io/components/tooltips +materialDesign: https://m2.material.io/components/tooltips waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ --- @@ -11,7 +11,7 @@ waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/

Dicas exibem texto informativo quando os usuários passam o mouse, focalizam ou tocam em um elemento.

-Quando ativada, [dicas](https://material.io/design/components/tooltips.html) exibem um rótulo de texto identificando o elemento, como uma descrição de sua função. +Quando ativada, [dicas](https://m2.material.io/design/components/tooltips.html) exibem um rótulo de texto identificando o elemento, como uma descrição de sua função. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/tooltips/tooltips-zh.md b/docs/data/material/components/tooltips/tooltips-zh.md index 9b9732569088d7..bcc1610b1e41ba 100644 --- a/docs/data/material/components/tooltips/tooltips-zh.md +++ b/docs/data/material/components/tooltips/tooltips-zh.md @@ -3,7 +3,7 @@ product: material-ui title: React Tooltip（工具提示）组件 components: Tooltip githubLabel: 'component: tooltip' -materialDesign: https://material.io/components/tooltips +materialDesign: https://m2.material.io/components/tooltips waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ --- diff --git a/docs/data/material/components/tooltips/tooltips.md b/docs/data/material/components/tooltips/tooltips.md index 38e5b2c87f4245..7723e2806b547f 100644 --- a/docs/data/material/components/tooltips/tooltips.md +++ b/docs/data/material/components/tooltips/tooltips.md @@ -3,7 +3,7 @@ product: material-ui title: React Tooltip component components: Tooltip githubLabel: 'component: tooltip' -materialDesign: https://material.io/components/tooltips +materialDesign: https://m2.material.io/components/tooltips waiAria: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/ --- diff --git a/docs/data/material/components/transfer-list/transfer-list.md b/docs/data/material/components/transfer-list/transfer-list.md index db8787625bea2a..ab593edba585b0 100644 --- a/docs/data/material/components/transfer-list/transfer-list.md +++ b/docs/data/material/components/transfer-list/transfer-list.md @@ -5,9 +5,9 @@ components: List, ListItem, Checkbox, Switch githubLabel: 'component: transfer list' --- -# Transfer list +# Transfer List -

A transfer list (or "shuttle") enables the user to move one or more list items between lists.

+

A Transfer List (or "shuttle") enables the user to move one or more list items between lists.

{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} diff --git a/docs/data/material/components/transitions/transitions-pt.md b/docs/data/material/components/transitions/transitions-pt.md index 7bbdc474a62139..bc4fa4a3ce6239 100644 --- a/docs/data/material/components/transitions/transitions-pt.md +++ b/docs/data/material/components/transitions/transitions-pt.md @@ -9,7 +9,7 @@ githubLabel: 'component: Transition'

Transições ajudam a deixar a interface expressiva e fácil de usar.

-Material-UI provê um número de transições que podem ser usadas para introduzir alguns [movimentos](https://material.io/design/motion/) básicos para os componentes de sua aplicação. +Material-UI provê um número de transições que podem ser usadas para introduzir alguns [movimentos](https://m2.material.io/design/motion/) básicos para os componentes de sua aplicação. [A paleta](/system/palette/) com funções de estilo. diff --git a/docs/data/material/components/transitions/transitions-zh.md b/docs/data/material/components/transitions/transitions-zh.md index ed0a07265ed1d8..3acd6528bea415 100644 --- a/docs/data/material/components/transitions/transitions-zh.md +++ b/docs/data/material/components/transitions/transitions-zh.md @@ -9,7 +9,7 @@ githubLabel: 'component: Transition'

过渡动画有利于增强 UI 的表现力并且让人更易于使用。

-Material-UI 提供了一系列的过渡效果，你可以将一些基本的 [动作](https://material.io/design/motion/) 添加到你的应用组件中。 +Material-UI 提供了一系列的过渡效果，你可以将一些基本的 [动作](https://m2.material.io/design/motion/) 添加到你的应用组件中。 {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} diff --git a/docs/data/material/components/transitions/transitions.md b/docs/data/material/components/transitions/transitions.md index 5067a97bec2cef..43b76a31d5db32 100644 --- a/docs/data/material/components/transitions/transitions.md +++ b/docs/data/material/components/transitions/transitions.md @@ -9,7 +9,7 @@ githubLabel: 'component: transitions'

Transitions help to make a UI expressive and easy to use.

-MUI provides transitions that can be used to introduce some basic [motion](https://material.io/design/motion/) to your applications. +MUI provides transitions that can be used to introduce some basic [motion](https://m2.material.io/design/motion/) to your applications. {{"component": "modules/components/ComponentLinkHeader.js", "design": false}} diff --git a/docs/data/material/components/typography/typography-pt.md b/docs/data/material/components/typography/typography-pt.md index 02f0f3b3f1ec9d..8b0b91dcf6f9a7 100644 --- a/docs/data/material/components/typography/typography-pt.md +++ b/docs/data/material/components/typography/typography-pt.md @@ -3,14 +3,14 @@ product: material-ui title: Componente React de Tipografia components: Typography githubLabel: 'component: Typography' -materialDesign: https://material.io/design/typography/the-type-system.html +materialDesign: https://m2.material.io/design/typography/the-type-system.html --- # Typography

Use a tipografia para apresentar seu design e conteúdo da forma mais clara e eficiente possível.

-O uso de diferentes tamanhos e estilos de uma só vez pode estragar qualquer leiaute. Uma [escala tipográfica](https://material.io/design/typography/#type-scale) tem um conjunto limitado de tipos de tamanhos que funcionam bem em conjunto com o leiaute de grade. +O uso de diferentes tamanhos e estilos de uma só vez pode estragar qualquer leiaute. Uma [escala tipográfica](https://m2.material.io/design/typography/#type-scale) tem um conjunto limitado de tipos de tamanhos que funcionam bem em conjunto com o leiaute de grade. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/typography/typography-zh.md b/docs/data/material/components/typography/typography-zh.md index 3896aaa4167061..30074ea4afeca4 100644 --- a/docs/data/material/components/typography/typography-zh.md +++ b/docs/data/material/components/typography/typography-zh.md @@ -3,14 +3,14 @@ product: material-ui title: React Typography（文字铸排）组件 components: Typography githubLabel: 'component: Typography' -materialDesign: https://material.io/design/typography/the-type-system.html +materialDesign: https://m2.material.io/design/typography/the-type-system.html --- # Typography

使用文字铸排可以尽可能清晰、高效地展示您的设计和内容。

-大量字阶和样式会影响任何布局的美观性。 [版式比例](https://material.io/design/typography/#type-scale)是一组有限的类型大小, 与布局网格一起工作很好。 +大量字阶和样式会影响任何布局的美观性。 [版式比例](https://m2.material.io/design/typography/#type-scale)是一组有限的类型大小, 与布局网格一起工作很好。 {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/components/typography/typography.md b/docs/data/material/components/typography/typography.md index 18c69933baf485..a0b161ffa4a4c0 100644 --- a/docs/data/material/components/typography/typography.md +++ b/docs/data/material/components/typography/typography.md @@ -3,7 +3,7 @@ product: material-ui title: React Typography component components: Typography githubLabel: 'component: Typography' -materialDesign: https://material.io/design/typography/the-type-system.html +materialDesign: https://m2.material.io/design/typography/the-type-system.html --- # Typography @@ -11,7 +11,7 @@ materialDesign: https://material.io/design/typography/the-type-system.html

Use typography to present your design and content as clearly and efficiently as possible.

Too many type sizes and styles at once can spoil any layout. -A [typographic scale](https://material.io/design/typography/#type-scale) has a limited set of type sizes that work well together along with the layout grid. +A [typographic scale](https://m2.material.io/design/typography/#type-scale) has a limited set of type sizes that work well together along with the layout grid. {{"component": "modules/components/ComponentLinkHeader.js"}} diff --git a/docs/data/material/customization/breakpoints/breakpoints-pt.md b/docs/data/material/customization/breakpoints/breakpoints-pt.md index ee24f1a537a030..0a3fee1e14148b 100644 --- a/docs/data/material/customization/breakpoints/breakpoints-pt.md +++ b/docs/data/material/customization/breakpoints/breakpoints-pt.md @@ -2,7 +2,7 @@

API que permite o uso de pontos de quebra em uma ampla variedade de contextos.

-Para uma experiência de usuário ideal, as interfaces do material design precisam adaptar seu leiaute em vários pontos de quebra. Material-UI usa uma implementação **simplificada** da [especificação](https://material.io/design/layout/responsive-layout-grid.html#breakpoints) original. +Para uma experiência de usuário ideal, as interfaces do material design precisam adaptar seu leiaute em vários pontos de quebra. Material-UI usa uma implementação **simplificada** da [especificação](https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints) original. The breakpoints are used internally in various components to make them responsive, but you can also take advantage of them for controlling the layout of your application through the [Grid](/material-ui/react-grid/) component. diff --git a/docs/data/material/customization/breakpoints/breakpoints-zh.md b/docs/data/material/customization/breakpoints/breakpoints-zh.md index 2000cd5512a36f..61414f6cbb36ef 100644 --- a/docs/data/material/customization/breakpoints/breakpoints-zh.md +++ b/docs/data/material/customization/breakpoints/breakpoints-zh.md @@ -2,7 +2,7 @@

能够在各种情况下使用断点的 API。

-为了获得最佳的用户体验，在不同的断点下，Material Design 的接口需要适应它们的布局。 MUI 使用原始[规范](https://material.io/design/layout/responsive-layout-grid.html#breakpoints)的**简化**实现。 +为了获得最佳的用户体验，在不同的断点下，Material Design 的接口需要适应它们的布局。 MUI 使用原始[规范](https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints)的**简化**实现。 The breakpoints are used internally in various components to make them responsive, but you can also take advantage of them for controlling the layout of your application through the [Grid](/material-ui/react-grid/) component. diff --git a/docs/data/material/customization/breakpoints/breakpoints.md b/docs/data/material/customization/breakpoints/breakpoints.md index 1856d47ccdec3a..1f79ebf9e00741 100644 --- a/docs/data/material/customization/breakpoints/breakpoints.md +++ b/docs/data/material/customization/breakpoints/breakpoints.md @@ -3,7 +3,7 @@

API that enables the use of breakpoints in a wide variety of contexts.

For optimal user experience, Material Design interfaces need to be able to adapt their layout at various breakpoints. -MUI uses a **simplified** implementation of the original [specification](https://material.io/design/layout/responsive-layout-grid.html#breakpoints). +MUI uses a **simplified** implementation of the original [specification](https://m2.material.io/design/layout/responsive-layout-grid.html#breakpoints). The breakpoints are used internally in various components to make them responsive, but you can also take advantage of them diff --git a/docs/data/material/customization/color/color-pt.md b/docs/data/material/customization/color/color-pt.md index 1675f2b34001ca..f63b8cd1a486a8 100644 --- a/docs/data/material/customization/color/color-pt.md +++ b/docs/data/material/customization/color/color-pt.md @@ -2,15 +2,15 @@

Transmita significado através da cor. Out of the box you get access to all colors in the Material Design guidelines.

-O [sistema de cores](https://material.io/design/color/) do Material Design pode ser usado para criar um tema que reflete sua marca ou estilo. +O [sistema de cores](https://m2.material.io/design/color/) do Material Design pode ser usado para criar um tema que reflete sua marca ou estilo. ## Escolhendo cores ### Ferramenta oficial de cores -A equipe do Material Design também criou uma ferramenta de configuração de paleta incrível: [material.io/resources/color/](https://material.io/resources/color/). Isso pode ajudar você a criar uma paleta de cores para sua UI, bem como medir o nível de acessibilidade de qualquer combinação de cores. +A equipe do Material Design também criou uma ferramenta de configuração de paleta incrível: [material.io/resources/color/](https://m2.material.io/resources/color/). Isso pode ajudar você a criar uma paleta de cores para sua UI, bem como medir o nível de acessibilidade de qualquer combinação de cores. - + Ferramenta oficial de cores @@ -42,7 +42,7 @@ const theme = createTheme({ ### Área de exemplos -Para testar um esquema de cores do [material.io/design/color](https://material.io/design/color/) com a documentação do Material-UI, simplesmente selecione as cores usando a paleta e os controles deslizantes abaixo. Como alternativa, você pode inserir valores hexadecimais nos campos de texto Primary e Secondary. +Para testar um esquema de cores do [material.io/design/color](https://m2.material.io/design/color/) com a documentação do Material-UI, simplesmente selecione as cores usando a paleta e os controles deslizantes abaixo. Como alternativa, você pode inserir valores hexadecimais nos campos de texto Primary e Secondary. {{"demo": "ColorTool.js", "hideToolbar": true, "bg": true}} @@ -71,7 +71,7 @@ If you are using the default primary and / or secondary shades then by providing ### Ferramentas da comunidade - [material-ui-tema-editor](https://in-your-saas.github.io/material-ui-theme-editor/): Uma ferramenta para gerar temas para seus aplicativos de Material-UI, basta selecionar as cores e ter uma visualização ao vivo. Inclui modelos de site básicos para mostrar vários componentes e como eles são afetados pelo tema -- [Material palette generator](https://material.io/inline-tools/color/): O gerador de paleta do Material pode ser usado para gerar uma paleta para qualquer cor que você inserir. +- [Material palette generator](https://m2.material.io/inline-tools/color/): O gerador de paleta do Material pode ser usado para gerar uma paleta para qualquer cor que você inserir. ## Paletas de cores Material Design 2014 diff --git a/docs/data/material/customization/color/color-zh.md b/docs/data/material/customization/color/color-zh.md index a2f2ff04b9d5fd..e0df861b233c6f 100644 --- a/docs/data/material/customization/color/color-zh.md +++ b/docs/data/material/customization/color/color-zh.md @@ -2,15 +2,15 @@

颜色承载了不同的寓意。 Out of the box you get access to all colors in the Material Design guidelines.

-Material Design [颜色系统](https://material.io/design/color/) 可用于创建反映您的品牌或风格的颜色主题。 +Material Design [颜色系统](https://m2.material.io/design/color/) 可用于创建反映您的品牌或风格的颜色主题。 ## 选取颜色 ### 官方的色彩工具 -Material Design 团队也搭建了一个非常棒的调色板配置工具： [material.io/resources/color/](https://material.io/resources/color/)。 您可以用它来为 UI 创建调色板，以及检测任何颜色组合的无障碍水平。 +Material Design 团队也搭建了一个非常棒的调色板配置工具： [material.io/resources/color/](https://m2.material.io/resources/color/)。 您可以用它来为 UI 创建调色板，以及检测任何颜色组合的无障碍水平。 - + 官方的色彩工具 @@ -42,7 +42,7 @@ const theme = createTheme({ ### 练习 -若想用 Material-UI 文档来测试 [material.io/design/color](https://material.io/design/color/) 的配色方案，只需使用下面的调色板和滑块来选取颜色即可。 另外，您也可以在主要（Primary）和次要（Secondary）文本字段中输入十六进制（hex）值。 +若想用 Material-UI 文档来测试 [material.io/design/color](https://m2.material.io/design/color/) 的配色方案，只需使用下面的调色板和滑块来选取颜色即可。 另外，您也可以在主要（Primary）和次要（Secondary）文本字段中输入十六进制（hex）值。 {{"demo": "ColorTool.js", "hideToolbar": true, "bg": true}} @@ -71,7 +71,7 @@ If you are using the default primary and / or secondary shades then by providing ### 社区提供的一些工具 - [mui-theme-creator](https://bareynol.github.io/mui-theme-creator/)：一个帮助设计和定制 Material-UI 组件库主题的工具。 包括基本的网站模板，并且展示各种组件及其受主题影响的方式。 -- [Material palette generator](https://material.io/inline-tools/color/)：它可用于通过您输入的任何颜色生成一系列的调色板。 +- [Material palette generator](https://m2.material.io/inline-tools/color/)：它可用于通过您输入的任何颜色生成一系列的调色板。 ## 2014 Material Design 调色板 diff --git a/docs/data/material/customization/color/color.md b/docs/data/material/customization/color/color.md index 307728cbd04189..cfd473cb8174a0 100644 --- a/docs/data/material/customization/color/color.md +++ b/docs/data/material/customization/color/color.md @@ -2,16 +2,16 @@

Convey meaning through color. Out of the box you get access to all colors in the Material Design guidelines.

-The Material Design [color system](https://material.io/design/color/) can be used to create a color theme that reflects your brand or style. +The Material Design [color system](https://m2.material.io/design/color/) can be used to create a color theme that reflects your brand or style. ## Picking colors ### Official color tool -The Material Design team has also built an awesome palette configuration tool: [material.io/resources/color/](https://material.io/resources/color/). +The Material Design team has also built an awesome palette configuration tool: [material.io/resources/color/](https://m2.material.io/resources/color/). This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination. - + Official color tool
@@ -42,7 +42,7 @@ const theme = createTheme({ ### Playground -To test a [material.io/design/color](https://material.io/design/color/) color scheme with the MUI documentation, simply select colors using the palette and sliders below. +To test a [material.io/design/color](https://m2.material.io/design/color/) color scheme with the MUI documentation, simply select colors using the palette and sliders below. Alternatively, you can enter hex values in the Primary and Secondary text fields. {{"demo": "ColorTool.js", "hideToolbar": true, "bg": true}} @@ -72,7 +72,7 @@ If you are using the default primary and / or secondary shades then by providing ### Tools by the community - [mui-theme-creator](https://bareynol.github.io/mui-theme-creator/): A tool to help design and customize themes for the MUI component library. Includes basic site templates to show various components and how they are affected by the theme -- [Material palette generator](https://material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input. +- [Material palette generator](https://m2.material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input. ## 2014 Material Design color palettes diff --git a/docs/data/material/customization/density/density-pt.md b/docs/data/material/customization/density/density-pt.md index 0e3b2975c87b46..b8f8886c5e7987 100644 --- a/docs/data/material/customization/density/density-pt.md +++ b/docs/data/material/customization/density/density-pt.md @@ -4,7 +4,7 @@ ## Aplicando densidade -Esta seção explica como aplicar a densidade. Ela não cobre casos de uso potenciais ou considerações sobre o uso de densidade em seu aplicativo. The Material Design guidelines have a [comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) covering these topics in more detail. +Esta seção explica como aplicar a densidade. Ela não cobre casos de uso potenciais ou considerações sobre o uso de densidade em seu aplicativo. The Material Design guidelines have a [comprehensive guide](https://m2.material.io/design/layout/applying-density.html) covering these topics in more detail. ## Implementando densidade @@ -32,7 +32,7 @@ Os seguintes componentes possuem propriedades que aplicam maior densidade: Esta ferramenta permite aplicar densidade via espaçamento e propriedades de componentes. Você pode navegar e ver como isso se aplica à sensação geral dos componentes do Material-UI. -Se você ativar alta densidade, um tema personalizado será aplicado a documentação. Este tema é apenas para fins de demonstração. Você _não deve_ aplicar este tema para todo o seu aplicativo, isso pode impactar negativamente a experiência do usuário. The [Material Design guidelines](https://material.io/design/layout/applying-density.html#typographic-density) has examples for when not to apply density. +Se você ativar alta densidade, um tema personalizado será aplicado a documentação. Este tema é apenas para fins de demonstração. Você _não deve_ aplicar este tema para todo o seu aplicativo, isso pode impactar negativamente a experiência do usuário. The [Material Design guidelines](https://m2.material.io/design/layout/applying-density.html) has examples for when not to apply density. O tema é configurado com as seguintes opções: diff --git a/docs/data/material/customization/density/density-zh.md b/docs/data/material/customization/density/density-zh.md index 856a7176d83a80..bcf57115ea5891 100644 --- a/docs/data/material/customization/density/density-zh.md +++ b/docs/data/material/customization/density/density-zh.md @@ -4,7 +4,7 @@ ## 使用密度 -本节解释了如何应用密度。 这不包括一些潜在的用例，也不包括在应用程序中使用密度的注意事项。 The Material Design guidelines have a [comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) covering these topics in more detail. +本节解释了如何应用密度。 这不包括一些潜在的用例，也不包括在应用程序中使用密度的注意事项。 The Material Design guidelines have a [comprehensive guide](https://m2.material.io/design/layout/applying-density.html) covering these topics in more detail. ## 实现密度（density） @@ -32,7 +32,7 @@ 该工具允许您可以来通过 spacing 和 component 属性来应用密度。 您可以浏览一下，看看在 Material-UI 组件上使用后的整体感觉如何。 -如果您启用了较大的密度，那么一个自定义的主题将被应用到当前的文档中。 该主题仅为演示使用。 您 _不应该_ 将此主题应用在整个应用程序中，因为这可能会对用户的体验产生一些负面影响。 The [Material Design guidelines](https://material.io/design/layout/applying-density.html#typographic-density) has examples for when not to apply density. +如果您启用了较大的密度，那么一个自定义的主题将被应用到当前的文档中。 该主题仅为演示使用。 您 _不应该_ 将此主题应用在整个应用程序中，因为这可能会对用户的体验产生一些负面影响。 The [Material Design guidelines](https://m2.material.io/design/layout/applying-density.html) has examples for when not to apply density. 主题配置有以下选项： diff --git a/docs/data/material/customization/density/density.md b/docs/data/material/customization/density/density.md index 52b99f19e500a9..a9415dfd5f0b46 100644 --- a/docs/data/material/customization/density/density.md +++ b/docs/data/material/customization/density/density.md @@ -6,7 +6,7 @@ This section explains how to apply density. It doesn't cover potential use cases, or considerations for using density in your application. -The Material Design guidelines have a [comprehensive guide](https://material.io/design/layout/applying-density.html#typographic-density) covering these topics in more detail. +The Material Design guidelines have a [comprehensive guide](https://m2.material.io/design/layout/applying-density.html) covering these topics in more detail. ## Implementing density @@ -39,7 +39,7 @@ around and see how this applies to the overall feel of MUI components. If you enable high density a custom theme is applied to the docs. This theme is only for demonstration purposes. You _should not_ apply this theme to your whole application -as this might negatively impact user experience. The [Material Design guidelines](https://material.io/design/layout/applying-density.html#typographic-density) has examples +as this might negatively impact user experience. The [Material Design guidelines](https://m2.material.io/design/layout/applying-density.html) has examples for when not to apply density. The theme is configured with the following options: diff --git a/docs/data/material/customization/spacing/spacing-pt.md b/docs/data/material/customization/spacing/spacing-pt.md index 8c6891d07ba7f5..ca6e0f5b2206fc 100644 --- a/docs/data/material/customization/spacing/spacing-pt.md +++ b/docs/data/material/customization/spacing/spacing-pt.md @@ -2,7 +2,7 @@

Use o auxiliar theme.spacing() para criar um espaçamento consistente entre os elementos da sua UI.

-Material-UI usa [um fator de escala recomendado de 8px](https://material.io/design/layout/understanding-layout.html) por padrão. +Material-UI usa [um fator de escala recomendado de 8px](https://m2.material.io/design/layout/understanding-layout.html) por padrão. ```js const theme = createTheme(); diff --git a/docs/data/material/customization/spacing/spacing-zh.md b/docs/data/material/customization/spacing/spacing-zh.md index da1956b07f9d48..6113452e455716 100644 --- a/docs/data/material/customization/spacing/spacing-zh.md +++ b/docs/data/material/customization/spacing/spacing-zh.md @@ -2,7 +2,7 @@

使用 theme.spacing() 助手来打造 UI 元素之间的一致的间距。

-Material-UI 默认使用的是 [设计指南上建议的 8px 缩放系数](https://material.io/design/layout/understanding-layout.html)。 +Material-UI 默认使用的是 [设计指南上建议的 8px 缩放系数](https://m2.material.io/design/layout/understanding-layout.html)。 ```js const theme = createTheme(); diff --git a/docs/data/material/customization/spacing/spacing.md b/docs/data/material/customization/spacing/spacing.md index 11521c1ec7aff0..c3d02670b3a836 100644 --- a/docs/data/material/customization/spacing/spacing.md +++ b/docs/data/material/customization/spacing/spacing.md @@ -2,7 +2,7 @@

Use the theme.spacing() helper to create consistent spacing between the elements of your UI.

-MUI uses [a recommended 8px scaling factor](https://material.io/design/layout/understanding-layout.html) by default. +MUI uses [a recommended 8px scaling factor](https://m2.material.io/design/layout/understanding-layout.html) by default. ```js const theme = createTheme(); diff --git a/docs/data/material/customization/theming/theming-zh.md b/docs/data/material/customization/theming/theming-zh.md index 9399a3c98c8857..fd158b674017e9 100644 --- a/docs/data/material/customization/theming/theming-zh.md +++ b/docs/data/material/customization/theming/theming-zh.md @@ -77,7 +77,7 @@ declare module '@mui/material/styles' { The community has built great tools to build a theme: - [mui-theme-creator](https://bareynol.github.io/mui-theme-creator/)：一个帮助设计和定制 MUI 组件库主题的工具。 这其中包括基本的网站模板，并且展示各种组件以及它们如何受到主题的影响 -- [Material 调色板生成器](https://material.io/inline-tools/color/)：您可以在 Material 调色板生成器中输入的任何颜色，它将帮您生成一系列的颜色组合。 +- [Material 调色板生成器](https://m2.material.io/inline-tools/color/)：您可以在 Material 调色板生成器中输入的任何颜色，它将帮您生成一系列的颜色组合。 ## 访问一个组件中的主题 diff --git a/docs/data/material/customization/theming/theming.md b/docs/data/material/customization/theming/theming.md index 04ffb3fee2f7b6..f6cb945b9b2f4d 100644 --- a/docs/data/material/customization/theming/theming.md +++ b/docs/data/material/customization/theming/theming.md @@ -81,7 +81,7 @@ declare module '@mui/material/styles' { The community has built great tools to build a theme: - [mui-theme-creator](https://bareynol.github.io/mui-theme-creator/): A tool to help design and customize themes for the MUI component library. Includes basic site templates to show various components and how they are affected by the theme -- [Material palette generator](https://material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input. +- [Material palette generator](https://m2.material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input. ## Accessing the theme in a component diff --git a/docs/data/material/discover-more/languages/Languages.js b/docs/data/material/discover-more/languages/Languages.js index dabffd04fa5a55..4f65298af18b30 100644 --- a/docs/data/material/discover-more/languages/Languages.js +++ b/docs/data/material/discover-more/languages/Languages.js @@ -21,7 +21,6 @@ export default function Languages() { diff --git a/docs/data/material/discover-more/related-projects/related-projects-pt.md b/docs/data/material/discover-more/related-projects/related-projects-pt.md index 8a5a07854e2b0a..b54e94e060acc2 100644 --- a/docs/data/material/discover-more/related-projects/related-projects-pt.md +++ b/docs/data/material/discover-more/related-projects/related-projects-pt.md @@ -40,4 +40,4 @@ Developers from the MUI community have built some excellent supplemental tools f ## Theming - [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material UI applications that features live previewing. -- [Material palette generator](https://material.io/inline-tools/color/): The official Material Design palette generator can be used to generate a palette for any color you choose. +- [Material palette generator](https://m2.material.io/inline-tools/color/): The official Material Design palette generator can be used to generate a palette for any color you choose. diff --git a/docs/data/material/discover-more/related-projects/related-projects-zh.md b/docs/data/material/discover-more/related-projects/related-projects-zh.md index b53d9ac38a50b1..904781cafc4240 100644 --- a/docs/data/material/discover-more/related-projects/related-projects-zh.md +++ b/docs/data/material/discover-more/related-projects/related-projects-zh.md @@ -40,4 +40,4 @@ Developers from the MUI community have built some excellent supplemental tools f ## Theming - [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material UI applications that features live previewing. -- [Material palette generator](https://material.io/inline-tools/color/): The official Material Design palette generator can be used to generate a palette for any color you choose. +- [Material palette generator](https://m2.material.io/inline-tools/color/): The official Material Design palette generator can be used to generate a palette for any color you choose. diff --git a/docs/data/material/discover-more/related-projects/related-projects.md b/docs/data/material/discover-more/related-projects/related-projects.md index 2a202cee327074..63da4556552f3d 100644 --- a/docs/data/material/discover-more/related-projects/related-projects.md +++ b/docs/data/material/discover-more/related-projects/related-projects.md @@ -52,4 +52,4 @@ Feel free to submit a pull request! ## Theming - [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material UI applications that features live previewing. -- [Material palette generator](https://material.io/inline-tools/color/): The official Material Design palette generator can be used to generate a palette for any color you choose. +- [Material palette generator](https://m2.material.io/inline-tools/color/): The official Material Design palette generator can be used to generate a palette for any color you choose. diff --git a/docs/data/material/discover-more/roadmap/roadmap.md b/docs/data/material/discover-more/roadmap/roadmap.md index a357c7ec2c087a..726ed9150824d6 100644 --- a/docs/data/material/discover-more/roadmap/roadmap.md +++ b/docs/data/material/discover-more/roadmap/roadmap.md @@ -17,7 +17,7 @@ Here are the top priorities: - Identify frequently needed components. There are many resources we leverage for this: the developer survey answers, GitHub issue upvotes, Algolia search volume, Google search volume, documentation usage, npm downloads, etc. - Prioritize the creation of frequently needed components. - Encourage the usage of third-party components if they already exist and are well maintained. -- **Design.** 🎀 We are relatively up-to-date, but the Material Design guidelines [are evolving](https://material.io/whats-new/). So should we. We also plan to implement [a second design](https://github.com/mui/material-ui/issues/22485). +- **Design.** 🎀 We are relatively up-to-date, but the Material Design guidelines [are evolving](https://material.io/blog/). So should we. We also plan to implement [a second design](https://github.com/mui/material-ui/issues/22485). - **Better customization.** 💅 We want to make component customization intuitive, no matter if you are using global CSS or styled-components: - **Better documentation.** 📚 No solution is complete without great documentation. - **Performance.** 🚀 React abstraction has a cost. The more components you render, the slower your page will be. You will notice stark differences when rendering a large table or list. diff --git a/docs/data/material/getting-started/overview/overview-pt.md b/docs/data/material/getting-started/overview/overview-pt.md index 6df87e1e005138..e795fc45dcc626 100644 --- a/docs/data/material/getting-started/overview/overview-pt.md +++ b/docs/data/material/getting-started/overview/overview-pt.md @@ -8,7 +8,7 @@ title: Overview ## Introduction -Material UI is an open-source React component library that implements Google's [Material Design](https://material.io/). +Material UI is an open-source React component library that implements Google's [Material Design](https://m2.material.io/). It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box. @@ -21,7 +21,7 @@ Material UI v5 supports Material Design v2. Adoption of v3 is tentatively planne ## Advantages of Material UI - **Ship faster:** thousands of open-source [contributors](https://api7.ai/contributor-graph?chart=contributorOverTime&repo=mui-org/material-ui) have poured countless hours into these components. Focus on your core business logic instead of reinventing the wheel—we've got your UI covered. -- **Beautiful by default:** we're meticulous about our implementation of [Material Design](https://material.io/), ensuring that every Material UI component meets the highest standards of form and function, but diverge from the official spec where necessary to provide multiple great options. +- **Beautiful by default:** we're meticulous about our implementation of [Material Design](https://m2.material.io/), ensuring that every Material UI component meets the highest standards of form and function, but diverge from the official spec where necessary to provide multiple great options. - **Customizability:** the library includes an extensive set of intuitive customizability features. [The templates](https://mui.com/store/) in our store demonstrate how far you can go with customization. - **Cross-team collaboration:** Material UI's intuitive developer experience reduces the barrier to entry for back-end developers and less technical designers, empowering teams to collaborate more effectively. The [design kits](https://mui.com/design-kits/) streamline your workflow and boost consistency between designers and developers. - **Trusted by thousands of organizations:** Material UI has the largest UI community in the React ecosystem. It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul. You can count on community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)). diff --git a/docs/data/material/getting-started/overview/overview-zh.md b/docs/data/material/getting-started/overview/overview-zh.md index 6df87e1e005138..e795fc45dcc626 100644 --- a/docs/data/material/getting-started/overview/overview-zh.md +++ b/docs/data/material/getting-started/overview/overview-zh.md @@ -8,7 +8,7 @@ title: Overview ## Introduction -Material UI is an open-source React component library that implements Google's [Material Design](https://material.io/). +Material UI is an open-source React component library that implements Google's [Material Design](https://m2.material.io/). It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box. @@ -21,7 +21,7 @@ Material UI v5 supports Material Design v2. Adoption of v3 is tentatively planne ## Advantages of Material UI - **Ship faster:** thousands of open-source [contributors](https://api7.ai/contributor-graph?chart=contributorOverTime&repo=mui-org/material-ui) have poured countless hours into these components. Focus on your core business logic instead of reinventing the wheel—we've got your UI covered. -- **Beautiful by default:** we're meticulous about our implementation of [Material Design](https://material.io/), ensuring that every Material UI component meets the highest standards of form and function, but diverge from the official spec where necessary to provide multiple great options. +- **Beautiful by default:** we're meticulous about our implementation of [Material Design](https://m2.material.io/), ensuring that every Material UI component meets the highest standards of form and function, but diverge from the official spec where necessary to provide multiple great options. - **Customizability:** the library includes an extensive set of intuitive customizability features. [The templates](https://mui.com/store/) in our store demonstrate how far you can go with customization. - **Cross-team collaboration:** Material UI's intuitive developer experience reduces the barrier to entry for back-end developers and less technical designers, empowering teams to collaborate more effectively. The [design kits](https://mui.com/design-kits/) streamline your workflow and boost consistency between designers and developers. - **Trusted by thousands of organizations:** Material UI has the largest UI community in the React ecosystem. It's almost as old as React itself—its history stretches back to 2014—and we're in this for the long haul. You can count on community's support for years to come (e.g. [Stack Overflow](https://insights.stackoverflow.com/trends?tags=material-ui)). diff --git a/docs/data/material/getting-started/overview/overview.md b/docs/data/material/getting-started/overview/overview.md index 5ce816994d13ba..0f7b07e9fda957 100644 --- a/docs/data/material/getting-started/overview/overview.md +++ b/docs/data/material/getting-started/overview/overview.md @@ -8,7 +8,7 @@ title: Overview ## Introduction -Material UI is an open-source React component library that implements Google's [Material Design](https://material.io/). +Material UI is an open-source React component library that implements Google's [Material Design](https://m2.material.io/). It includes a comprehensive collection of prebuilt components that are ready for use in production right out of the box. @@ -24,7 +24,7 @@ You can follow [this GitHub issue](https://github.com/mui/material-ui/issues/293 - **Ship faster:** Over 2,500 open-source [contributors](https://github.com/mui/material-ui/graphs/contributors) have poured countless hours into these components. Focus on your core business logic instead of reinventing the wheel—we've got your UI covered. -- **Beautiful by default:** we're meticulous about our implementation of [Material Design](https://material.io/), ensuring that every Material UI component meets the highest standards of form and function, +- **Beautiful by default:** we're meticulous about our implementation of [Material Design](https://m2.material.io/), ensuring that every Material UI component meets the highest standards of form and function, but diverge from the official spec where necessary to provide multiple great options. - **Customizability:** the library includes an extensive set of intuitive customizability features. [The templates](https://mui.com/store/) in our store demonstrate how far you can go with customization. - **Cross-team collaboration:** Material UI's intuitive developer experience reduces the barrier to entry for back-end developers and less technical designers, empowering teams to collaborate more effectively. diff --git a/docs/data/material/getting-started/supported-components/MaterialUIComponents.js b/docs/data/material/getting-started/supported-components/MaterialUIComponents.js new file mode 100644 index 00000000000000..90697f23ba737b --- /dev/null +++ b/docs/data/material/getting-started/supported-components/MaterialUIComponents.js @@ -0,0 +1,271 @@ +import * as React from 'react'; +import Table from '@mui/material/Table'; +import TableHead from '@mui/material/TableHead'; +import TableBody from '@mui/material/TableBody'; +import TableCell from '@mui/material/TableCell'; +import TableRow from '@mui/material/TableRow'; +import Paper from '@mui/material/Paper'; +import Typography from '@mui/material/Typography'; +import Link from 'docs/src/modules/components/Link'; + +const components = [ + { + name: 'Accordion', + materialUI: '/material-ui/react-accordion', + materialDesign: 'https://m1.material.io/components/expansion-panels.html', + }, + { name: 'Alert', materialUI: '/material-ui/react-alert' }, + { + name: 'App Bar: top', + materialUI: '/material-ui/react-app-bar', + materialDesign: 'https://m2.material.io/components/app-bars-top', + }, + { + name: 'App Bar: bottom', + materialUI: '/material-ui/react-app-bar#bottom-app-bar', + materialDesign: 'https://m2.material.io/components/app-bars-bottom', + }, + { name: 'Autocomplete', materialUI: '/material-ui/react-autocomplete' }, + { + name: 'Banner', + materialUI: 'Composable', + materialDesign: 'https://m2.material.io/components/banners', + }, + { name: 'Avatar', materialUI: '/material-ui/react-avatar' }, + { name: 'Badge', materialUI: '/material-ui/react-badge' }, + { + name: 'Bottom Navigation', + materialUI: '/material-ui/react-bottom-navigation', + materialDesign: 'https://m2.material.io/components/bottom-navigation', + }, + { name: 'Breadcrumbs', materialUI: '/material-ui/react-breadcrumbs' }, + { + name: 'Button', + materialUI: '/material-ui/react-button', + materialDesign: 'https://m2.material.io/components/buttons', + }, + { + name: 'Floating Action Button', + materialDesign: + 'https://m2.material.io/components/buttons-floating-action-button', + materialUI: '/material-ui/react-floating-action-button', + }, + { name: 'Button Group', materialUI: '/material-ui/react-button-group' }, + { + name: 'Card', + materialUI: '/material-ui/react-card', + materialDesign: 'https://m2.material.io/components/cards', + }, + { + name: 'Checkbox', + materialUI: '/material-ui/react-checkbox', + materialDesign: 'https://m2.material.io/components/checkboxes', + }, + { + name: 'Chip', + materialUI: '/material-ui/react-chip', + materialDesign: 'https://m2.material.io/components/chips', + }, + { name: 'Data Grid', materialUI: '/x/react-data-grid' }, + { + name: 'Date Pickers', + materialUI: '/x/react-date-pickers', + materialDesign: 'https://m2.material.io/components/date-pickers', + }, + { + name: 'Dialog', + materialUI: '/material-ui/react-dialog', + materialDesign: 'https://m2.material.io/components/dialogs', + }, + { + name: 'Divider', + materialUI: '/material-ui/react-divider', + materialDesign: 'https://m2.material.io/components/dividers', + }, + { + name: 'Drawer', + materialUI: '/material-ui/react-drawer', + materialDesign: 'https://m2.material.io/components/navigation-drawer', + }, + { + name: 'Icons', + materialUI: '/material-ui/icons', + materialDesign: 'https://m2.material.io/design/iconography/system-icons.html', + }, + { + name: 'Image List', + materialUI: '/material-ui/react-image-list', + materialDesign: 'https://m2.material.io/components/image-lists', + }, + { name: 'Link', materialUI: '/material-ui/react-link' }, + { + name: 'List', + materialUI: '/material-ui/react-list', + materialDesign: 'https://m2.material.io/components/lists', + }, + { name: 'Masonry', materialUI: '/material-ui/react-masonry' }, + { + name: 'Material Icons', + materialUI: '/material-ui/material-icons', + materialDesign: 'https://fonts.google.com/icons', + }, + { + name: 'Menu', + materialUI: '/material-ui/react-menu', + materialDesign: 'https://m2.material.io/components/menus', + }, + { + name: 'Modal', + materialUI: '/material-ui/react-modal', + materialDesign: 'https://m2.material.io/components/dialogs', + }, + { + name: 'Navigation Rail', + materialDesign: 'https://m2.material.io/components/navigation-rail', + }, + { name: 'Pagination', materialUI: '/material-ui/react-pagination' }, + { + name: 'Paper', + materialUI: '/material-ui/react-paper', + materialDesign: 'https://m2.material.io/design/environment/elevation.html', + }, + { + name: 'Progress', + materialUI: '/material-ui/react-progress', + materialDesign: 'https://m2.material.io/components/progress-indicators', + }, + { + name: 'Radio Group', + materialUI: '/material-ui/react-radio-button', + materialDesign: 'https://m2.material.io/components/radio-buttons', + }, + { name: 'Rating', materialUI: '/material-ui/react-rating' }, + { + name: 'Select', + materialUI: '/material-ui/react-select', + materialDesign: 'https://m2.material.io/components/menus#exposed-dropdown-menu', + }, + { name: 'Skeleton', materialUI: '/material-ui/react-skeleton' }, + { + name: 'Slider', + materialUI: '/material-ui/react-slider', + materialDesign: 'https://m2.material.io/components/sliders', + }, + { + name: 'Snackbar', + materialUI: '/material-ui/react-snackbar', + materialDesign: 'https://m2.material.io/components/snackbars', + }, + { name: 'Speed Dial', materialUI: '/material-ui/react-speed-dial' }, + { + name: 'Stepper', + materialUI: '/material-ui/react-stepper', + materialDesign: 'https://m1.material.io/components/steppers.html', + }, + { + name: 'Switch', + materialUI: '/material-ui/react-switch', + materialDesign: 'https://m2.material.io/components/switches', + }, + { + name: 'Table', + materialUI: '/material-ui/react-table', + materialDesign: 'https://m2.material.io/components/data-tables', + }, + { + name: 'Tabs', + materialUI: '/material-ui/react-tabs', + materialDesign: 'https://m2.material.io/components/tabs', + }, + { + name: 'Text Field', + materialUI: '/material-ui/react-text-field', + materialDesign: 'https://m2.material.io/components/text-fields', + }, + { name: 'Timeline', materialUI: '/material-ui/react-timeline' }, + { name: 'Toggle Button', materialUI: '/material-ui/react-toggle-button' }, + { + name: 'Tooltip', + materialUI: '/material-ui/react-tooltip', + materialDesign: 'https://m2.material.io/components/tooltips', + }, + { name: 'Transfer List', materialUI: '/material-ui/react-transfer-list' }, + { name: 'Tree View', materialUI: '/material-ui/react-tree-view' }, + { + name: 'Typography', + materialUI: '/material-ui/react-typography', + materialDesign: 'https://m2.material.io/design/typography/the-type-system.html', + }, +]; + +export default function MaterialUIComponents() { + return ( + + + + + Components + Material Design + Material UI + + + + {components.map((component) => ( + + + {component.name} + + + {component.materialDesign ? ( + + + {component.materialDesign.substring(8, 10) === 'm1' + ? 'MD 1 (legacy)' + : 'MD 2'} + + + ) : ( + 'No guidelines' + )} + + + {component.materialUI && + component.materialUI.indexOf('/material-ui') === 0 ? ( + + {'✅ '} + + Native support + + + ) : null} + {component.materialUI && component.materialUI.indexOf('/x') === 0 ? ( + + + Support in MUI X + + + ) : null} + {component.materialUI === 'Composable' ? ( + {'Composable'} + ) : null} + {component.materialUI == null ? 'No support' : null} + + + ))} + +
+ + ); +} diff --git a/docs/data/material/getting-started/supported-components/supported-components-pt.md b/docs/data/material/getting-started/supported-components/supported-components-pt.md index 96aaf066bb8ccb..14a3a7f6ef6538 100644 --- a/docs/data/material/getting-started/supported-components/supported-components-pt.md +++ b/docs/data/material/getting-started/supported-components/supported-components-pt.md @@ -6,47 +6,47 @@ Nós trabalhamos para seguir as orientações sempre que possível (aplicando se Se você deseja adicionar suporte a um componente ou recurso não destacado aqui, pesquise se já não existe no [Issues do GitHub](https://github.com/mui/material-ui/issues) ou crie um novo para discutir a abordagem antes de enviar um pull request. -- **[Painéis de Expansão](https://material.io/archive/guidelines/components/expansion-panels.html) ✓** (_Legado Material v1_) +- **[Painéis de Expansão](https://m1.material.io/components/expansion-panels.html) ✓** (_Legado Material v1_) - Barra de Aplicativos - - **[Superior](https://material.io/design/components/app-bars-top.html) ✓** - - **[Inferior](https://material.io/design/components/app-bars-bottom.html) ✓** -- **[Banners](https://material.io/design/components/banners.html)** ([Pode ser composto](https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df)) -- **[Navegação inferior](https://material.io/design/components/bottom-navigation.html) ✓** -- **[Botões](https://material.io/design/components/buttons.html) ✓** - - **[Botões de texto & contidos (Antigamente flat & raised)](https://material.io/design/components/buttons.html) ✓** - - **[Toggle buttons](https://material.io/design/components/buttons.html#buttons-toggle-buttons) ~** ([Lab](/material-ui/about-the-lab/)) - - **[Icon toggle buttons](https://material.io/design/components/buttons.html#toggle-button) ✓** (Custom Checkbox) -- **[Botões: Botão de ação flutuante](https://material.io/design/components/buttons-floating-action-button.html) ✓** + - **[Superior](https://m2.material.io/components/app-bars-top) ✓** + - **[Inferior](https://m2.material.io/components/app-bars-bottom) ✓** +- **[Banners](https://m2.material.io/components/banners)** ([Pode ser composto](https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df)) +- **[Navegação inferior](https://m2.material.io/components/bottom-navigation) ✓** +- **[Botões](https://m2.material.io/components/buttons) ✓** + - **[Botões de texto & contidos (Antigamente flat & raised)](https://m2.material.io/components/buttons) ✓** + - **[Toggle buttons](https://m2.material.io/components/buttons#buttons-toggle-buttons) ~** ([Lab](/material-ui/about-the-lab/)) + - **[Icon toggle buttons](https://m2.material.io/components/buttons#toggle-button) ✓** (Custom Checkbox) +- **[Botões: Botão de ação flutuante](https://m2.material.io/components/buttons-floating-action-button) ✓** - Transições: - - **[Speed dial](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions) ~** ([Lab](/material-ui/about-the-lab/)) - - [Menu](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions) - - [Morph](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions) - - [Tela cheia](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions) - - **[BAF estendido](https://material.io/design/components/buttons-floating-action-button.html#extended-fab) ✓** + - **[Speed dial](https://m2.material.io/components/buttons-floating-action-button#types-of-transitions) ~** ([Lab](/material-ui/about-the-lab/)) + - [Menu](https://m2.material.io/components/buttons-floating-action-button#types-of-transitions) + - [Morph](https://m2.material.io/components/buttons-floating-action-button#types-of-transitions) + - [Tela cheia](https://m2.material.io/components/buttons-floating-action-button#types-of-transitions) + - **[BAF estendido](https://m2.material.io/components/buttons-floating-action-button#extended-fab) ✓** - Acesso rápido -- **[Cartões](https://material.io/design/components/cards.html) ✓** -- **[Chips](https://material.io/design/components/chips.html) ✓** - - **[Input](https://material.io/design/components/chips.html#input-chips) ✓** - - [Choice](https://material.io/design/components/chips.html#choice-chips) - - [Filter](https://material.io/design/components/chips.html#filter-chips) - - [Action](https://material.io/design/components/chips.html#action-chips) -- **[Tabelas de dados](https://material.io/design/components/data-tables.html) ✓** +- **[Cartões](https://m2.material.io/components/cards) ✓** +- **[Chips](https://m2.material.io/components/chips) ✓** + - **[Input](https://m2.material.io/components/chips#input-chips) ✓** + - [Choice](https://m2.material.io/components/chips#choice-chips) + - [Filter](https://m2.material.io/components/chips#filter-chips) + - [Action](https://m2.material.io/components/chips#action-chips) +- **[Tabelas de dados](https://m2.material.io/components/data-tables) ✓** - **Ordenável ✓** - **Selecionável ✓** - **Paginação ✓** -- **[Diálogos](https://material.io/design/components/dialogs.html) ✓** - - **[Diálogo de alerta](https://material.io/design/components/dialogs.html#alert-dialog) ✓** - - **[Diálogos simples](https://material.io/design/components/dialogs.html#simple-dialog) ✓** (Pode ser composto com Dialog e a List.) - - **[Diálogos de confirmação](https://material.io/design/components/dialogs.html#confirmation-dialog) ✓** - - **[Diálogos em tela cheia](https://material.io/design/components/dialogs.html#full-screen-dialog) ✓** -- **[Divisores](https://material.io/design/components/dividers.html) ✓** - - **[Full bleed](https://material.io/design/components/dividers.html#types) ✓** - - **[Inset](https://material.io/design/components/dividers.html#types) ✓** - - **[Middle](https://material.io/design/components/dividers.html#types) ✓** - - **[Subheader](https://material.io/design/components/dividers.html#types) ✓** -- **\***\*[Listas de Imagem](https://material.io/design/components/image-lists.html) ✓** (também conhecido como Grade Lista)****\*\******* -- **[Listas](https://material.io/design/components/lists.html) ✓** - - [Tipos:](https://material.io/design/components/lists.html#types) +- **[Diálogos](https://m2.material.io/components/dialogs) ✓** + - **[Diálogo de alerta](https://m2.material.io/components/dialogs#alert-dialog) ✓** + - **[Diálogos simples](https://m2.material.io/components/dialogs#simple-dialog) ✓** (Pode ser composto com Dialog e a List.) + - **[Diálogos de confirmação](https://m2.material.io/components/dialogs#confirmation-dialog) ✓** + - **[Diálogos em tela cheia](https://m2.material.io/components/dialogs#full-screen-dialog) ✓** +- **[Divisores](https://m2.material.io/components/dividers) ✓** + - **[Full bleed](https://m2.material.io/components/dividers#types) ✓** + - **[Inset](https://m2.material.io/components/dividers#types) ✓** + - **[Middle](https://m2.material.io/components/dividers#types) ✓** + - **[Subheader](https://m2.material.io/components/dividers#types) ✓** +- **\***\*[Listas de Imagem](https://m2.material.io/design/components/image-lists.html) ✓** (também conhecido como Grade Lista)****\*\******* +- **[Listas](https://m2.material.io/components/lists) ✓** + - [Tipos:](https://m2.material.io/components/lists#types) - **Linha única ✓** - **Duas linhas ✓** - Três linhas @@ -58,51 +58,51 @@ Se você deseja adicionar suporte a um componente ou recurso não destacado aqui - **Expandir/recolher ✓** (AKA Nested) - **Interruptor ✓** - Reorder -- **[Menus](https://material.io/design/components/menus.html) ✓** - - **[Dropdown menu](https://material.io/design/components/menus.html#dropdown-menu) ✓** (Pode ser composto) - - [Cascade](https://material.io/design/components/menus.html#dropdown-menu) - - [Menus suspensos expostos](https://material.io/design/components/menus.html#exposed-dropdown-menu) +- **[Menus](https://m2.material.io/components/menus) ✓** + - **[Dropdown menu](https://m2.material.io/components/menus#dropdown-menu) ✓** (Pode ser composto) + - [Cascade](https://m2.material.io/components/menus#dropdown-menu) + - [Menus suspensos expostos](https://m2.material.io/components/menus#exposed-dropdown-menu) - **Text field dropdown menu ✓** (Select) - Menu suspenso editável - **Contextual ✓** -- **[Indicadores de progresso](https://material.io/design/components/progress-indicators.html) ✓** - - **[Linear](https://material.io/design/components/progress-indicators.html#linear-progress-indicators) ✓** - - **[Circular](https://material.io/design/components/progress-indicators.html#circular-progress-indicators) ✓** +- **[Indicadores de progresso](https://m2.material.io/components/progress-indicators) ✓** + - **[Linear](https://m2.material.io/components/progress-indicators#linear-progress-indicators) ✓** + - **[Circular](https://m2.material.io/components/progress-indicators#circular-progress-indicators) ✓** - **[Loading](https://material.io/archive/guidelines/components/progress-activity.html) ✓** (_Legado Material v1_) -- **[Controles de seleção](https://material.io/design/components/selection-controls.html) ✓** - - **[Caixa de seleção](https://material.io/design/components/selection-controls.html#checkboxes) ✓** - - **[Botões de opção](https://material.io/design/components/selection-controls.html#radio-buttons) ✓** - - **[Interruptor](https://material.io/design/components/selection-controls.html#switches) ✓** -- **[Sliders](https://material.io/design/components/sliders.html) ✓** - - **[Contínuo](https://material.io/design/components/sliders.html#continuous-slider) ✓** - - **[Discrete](https://material.io/design/components/sliders.html#discrete-slider) ✓** -- **[Snackbars](https://material.io/design/components/snackbars.html) ✓** (_Legado Material v1_) -- **[Subheaders](https://material.io/archive/guidelines/components/subheaders.html) ✓** (_Legacy Material v1_) - - **[Lista](https://material.io/archive/guidelines/components/subheaders.html#subheaders-list-subheaders) ✓** - - **[Grade](https://material.io/archive/guidelines/components/subheaders.html#subheaders-list-subheaders) ✓** - - [Menu](https://material.io/archive/guidelines/components/subheaders.html#subheaders-list-subheaders) -- **[Steppers](https://material.io/archive/guidelines/components/steppers.html) ✓** (_Legacy Material v1_) - - **[Horizontal](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steppers) ✓** - - **[Vertical](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steppers) ✓** - - **[Etapas mobile](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) ✓** -- **[Abas](https://material.io/design/components/tabs.html) ✓** - - **[Abas fixas](https://material.io/design/components/tabs.html#fixed-tabs) ✓** - - **[Abas roláveis](https://material.io/design/components/tabs.html#scrollable-tabs) ✓** -- **[Campos de texto](https://material.io/design/components/text-fields.html) ✓** - - **[Standard](https://material.io/archive/guidelines/components/text-fields.html) ✓** (Legado Material v1) - - **[Preenchido](https://material.io/design/components/text-fields.html#filled-text-field) ✓** - - **[Contorno](https://material.io/design/components/text-fields.html#outlined-text-field) ✓** - - [Tipos](https://material.io/design/components/text-fields.html#input-types): +- **[Controles de seleção](https://m2.material.io/design/components/selection-controls.html) ✓** + - **[Caixa de seleção](https://m2.material.io/components/checkboxes) ✓** + - **[Botões de opção](https://m2.material.io/components/radio-buttons) ✓** + - **[Interruptor](https://m2.material.io/design/components/selection-controls.html#switches) ✓** +- **[Sliders](https://m2.material.io/design/components/sliders.html) ✓** + - **[Contínuo](https://m2.material.io/design/components/sliders.html#continuous-slider) ✓** + - **[Discrete](https://m2.material.io/design/components/sliders.html#discrete-slider) ✓** +- **[Snackbars](https://m2.material.io/components/snackbars) ✓** (_Legado Material v1_) +- **[Subheaders](https://m1.material.io/components/subheaders.html) ✓** (_Legacy Material v1_) + - **[Lista](https://m1.material.io/components/subheaders.html#subheaders-list-subheaders) ✓** + - **[Grade](https://m1.material.io/components/subheaders.html#subheaders-list-subheaders) ✓** + - [Menu](https://m1.material.io/components/subheaders.html#subheaders-list-subheaders) +- **[Steppers](https://m1.material.io/components/steppers.html) ✓** (_Legacy Material v1_) + - **[Horizontal](https://m1.material.io/components/steppers.html#steppers-types-of-steppers) ✓** + - **[Vertical](https://m1.material.io/components/steppers.html#steppers-types-of-steppers) ✓** + - **[Etapas mobile](https://m1.material.io/components/steppers.html#steppers-types-of-steps) ✓** +- **[Abas](https://m2.material.io/design/components/tabs.html) ✓** + - **[Abas fixas](https://m2.material.io/design/components/tabs.html#fixed-tabs) ✓** + - **[Abas roláveis](https://m2.material.io/design/components/tabs.html#scrollable-tabs) ✓** +- **[Campos de texto](https://m2.material.io/components/text-fields) ✓** + - **[Standard](https://m1.material.io/components/text-fields.html) ✓** (Legado Material v1) + - **[Preenchido](https://m2.material.io/components/text-fields#filled-text-field) ✓** + - **[Contorno](https://m2.material.io/components/text-fields#outlined-text-field) ✓** + - [Tipos](https://m2.material.io/components/text-fields#input-types): - **Linha única ✓** - **Multilinha ✓** - Área de texto - **✓ Largura total** - - [Elementos assistivos:](https://material.io/design/components/text-fields.html#anatomy) + - [Elementos assistivos:](https://m2.material.io/components/text-fields#anatomy) - **Texto auxiliar ✓** - **Mensagem de erro ✓** - **Ícones ✓** - Contador de caracteres - **[Toolbars](https://material.io/archive/guidelines/components/toolbars.html) ✓** (Legado Material v1) -- **[Dicas](https://material.io/design/components/tooltips.html) ✓** +- **[Dicas](https://m2.material.io/design/components/tooltips.html) ✓** - **Desktop ✓** - **Mobile ✓** diff --git a/docs/data/material/getting-started/supported-components/supported-components-zh.md b/docs/data/material/getting-started/supported-components/supported-components-zh.md index 24ddd213f93a27..42c6af5905cddd 100644 --- a/docs/data/material/getting-started/supported-components/supported-components-zh.md +++ b/docs/data/material/getting-started/supported-components/supported-components-zh.md @@ -6,47 +6,47 @@ 如果您希望加对一个组件或一个未高亮显示的功能加以支持, 请搜索相关的 [GitHub 问题 ](https://github.com/mui/material-ui/issues)，或创建一个新的问题来讨论该方法，然后再提交 pull request。 -- **[Expansion Panels](https://material.io/archive/guidelines/components/expansion-panels.html) ✓** (_旧 Material v1_) +- **[Expansion Panels](https://m1.material.io/components/expansion-panels.html) ✓** (_旧 Material v1_) - App bars（应用栏） - - **[Top](https://material.io/design/components/app-bars-top.html) ✓** - - **[Bottom](https://material.io/design/components/app-bars-bottom.html) ✓** -- **[横幅(Banners)](https://material.io/design/components/banners.html)** ([可组装](https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df)) -- **[Bottom navigation（底部导航栏）](https://material.io/design/components/bottom-navigation.html) ✓** -- **[Buttons（按钮）](https://material.io/design/components/buttons.html) ✓** - - **[Text & contained buttons（原为 flat & raised）](https://material.io/design/components/buttons.html) ✓** - - **[Toggle buttons](https://material.io/design/components/buttons.html#buttons-toggle-buttons) ~** ([Lab](/material-ui/about-the-lab/)) - - **[Icon toggle buttons](https://material.io/design/components/buttons.html#toggle-button) ✓** (自定义 Checkbox) -- **[Buttons: Floating Action Button（按钮：浮动操作按钮）](https://material.io/design/components/buttons-floating-action-button.html) ✓** + - **[Top](https://m2.material.io/components/app-bars-top) ✓** + - **[Bottom](https://m2.material.io/components/app-bars-bottom) ✓** +- **[横幅(Banners)](https://m2.material.io/components/banners)** ([可组装](https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df)) +- **[Bottom navigation（底部导航栏）](https://m2.material.io/components/bottom-navigation) ✓** +- **[Buttons（按钮）](https://m2.material.io/components/buttons) ✓** + - **[Text & contained buttons（原为 flat & raised）](https://m2.material.io/components/buttons) ✓** + - **[Toggle buttons](https://m2.material.io/components/buttons#buttons-toggle-buttons) ~** ([Lab](/material-ui/about-the-lab/)) + - **[Icon toggle buttons](https://m2.material.io/components/buttons#toggle-button) ✓** (自定义 Checkbox) +- **[Buttons: Floating Action Button（按钮：浮动操作按钮）](https://m2.material.io/components/buttons-floating-action-button) ✓** - Transitions（过渡动画）： - - **[Speed dial](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions) ~** ([Lab](/material-ui/about-the-lab/)) - - [Menu](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions) - - [变形（Morph）](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions) - - [全屏（Full screen）](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions) - - **[Extended FAB（扩展的浮动操作按钮）](https://material.io/design/components/buttons-floating-action-button.html#extended-fab) ✓** + - **[Speed dial](https://m2.material.io/components/buttons-floating-action-button#types-of-transitions) ~** ([Lab](/material-ui/about-the-lab/)) + - [Menu](https://m2.material.io/components/buttons-floating-action-button#types-of-transitions) + - [变形（Morph）](https://m2.material.io/components/buttons-floating-action-button#types-of-transitions) + - [全屏（Full screen）](https://m2.material.io/components/buttons-floating-action-button#types-of-transitions) + - **[Extended FAB（扩展的浮动操作按钮）](https://m2.material.io/components/buttons-floating-action-button#extended-fab) ✓** - Speed dial（快速拨号） -- **[Cards（卡片）](https://material.io/design/components/cards.html) ✓** -- **[Chips（纸片）](https://material.io/design/components/chips.html) ✓** - - **[Input（输入）](https://material.io/design/components/chips.html#input-chips) ✓** - - [Choice（选择项）](https://material.io/design/components/chips.html#choice-chips) - - [Filter（筛选）](https://material.io/design/components/chips.html#filter-chips) - - [Action（操作）](https://material.io/design/components/chips.html#action-chips) -- **[Data tables（数据表格）](https://material.io/design/components/data-tables.html) ✓** +- **[Cards（卡片）](https://m2.material.io/components/cards) ✓** +- **[Chips（纸片）](https://m2.material.io/components/chips) ✓** + - **[Input（输入）](https://m2.material.io/components/chips#input-chips) ✓** + - [Choice（选择项）](https://m2.material.io/components/chips#choice-chips) + - [Filter（筛选）](https://m2.material.io/components/chips#filter-chips) + - [Action（操作）](https://m2.material.io/components/chips#action-chips) +- **[Data tables（数据表格）](https://m2.material.io/components/data-tables) ✓** - **Sortable（可排序的）✓** - **Selectable（可选择的）✓** - **Pagination（分页） ✓** -- **[Dialogs（对话框）](https://material.io/design/components/dialogs.html) ✓** - - **[Alert dialog（警告对话框）](https://material.io/design/components/dialogs.html#alert-dialog) ✓** - - **[Simple dialogs](https://material.io/design/components/dialogs.html#simple-dialog) ✓** （可以用 Dialog 和 List 组成。） - - **[Confirmation dialogs（确认对话框）](https://material.io/design/components/dialogs.html#confirmation-dialog) ✓** - - **[Full screen dialogs（全屏对话框）](https://material.io/design/components/dialogs.html#full-screen-dialog) ✓** -- **[Dividers（分隔线）](https://material.io/design/components/dividers.html) ✓** - - **[Full bleed（等屏宽分隔线）](https://material.io/design/components/dividers.html#types) ✓** - - **[Inset（内凹分隔线）](https://material.io/design/components/dividers.html#types) ✓** - - **[Middle（中段分隔线）](https://material.io/design/components/dividers.html#types) ✓** - - **[Subheader（副标题分隔线）](https://material.io/design/components/dividers.html#types) ✓** -- **\***\*[Image lists](https://material.io/design/components/image-lists.html) ✓** (又名 Grid Lists)****\*\******* -- **[Lists（列表）](https://material.io/design/components/lists.html) ✓** - - [类型:](https://material.io/design/components/lists.html#types) +- **[Dialogs（对话框）](https://m2.material.io/components/dialogs) ✓** + - **[Alert dialog（警告对话框）](https://m2.material.io/components/dialogs#alert-dialog) ✓** + - **[Simple dialogs](https://m2.material.io/components/dialogs#simple-dialog) ✓** （可以用 Dialog 和 List 组成。） + - **[Confirmation dialogs（确认对话框）](https://m2.material.io/components/dialogs#confirmation-dialog) ✓** + - **[Full screen dialogs（全屏对话框）](https://m2.material.io/components/dialogs#full-screen-dialog) ✓** +- **[Dividers（分隔线）](https://m2.material.io/components/dividers) ✓** + - **[Full bleed（等屏宽分隔线）](https://m2.material.io/components/dividers#types) ✓** + - **[Inset（内凹分隔线）](https://m2.material.io/components/dividers#types) ✓** + - **[Middle（中段分隔线）](https://m2.material.io/components/dividers#types) ✓** + - **[Subheader（副标题分隔线）](https://m2.material.io/components/dividers#types) ✓** +- **\***\*[Image lists](https://m2.material.io/design/components/image-lists.html) ✓** (又名 Grid Lists)****\*\******* +- **[Lists（列表）](https://m2.material.io/components/lists) ✓** + - [类型:](https://m2.material.io/components/lists#types) - **Single line （单行）✓** - **Two line（两行）✓** - Three line（三行） @@ -58,51 +58,51 @@ - **Expand/collapse ✓** (又名 Nested) - **Switch（开关）✓** - Reorder（重新排序） -- **[Menus（菜单）](https://material.io/design/components/menus.html) ✓** - - ** [下拉菜单](https://material.io/design/components/menus.html#dropdown-menu) ✓ ** （可以组成） - - [Cascade（级联菜单）](https://material.io/design/components/menus.html#dropdown-menu) - - [Exposed dropdown menus（公开的下拉菜单）](https://material.io/design/components/menus.html#exposed-dropdown-menu) +- **[Menus（菜单）](https://m2.material.io/components/menus) ✓** + - ** [下拉菜单](https://m2.material.io/components/menus#dropdown-menu) ✓ ** （可以组成） + - [Cascade（级联菜单）](https://m2.material.io/components/menus#dropdown-menu) + - [Exposed dropdown menus（公开的下拉菜单）](https://m2.material.io/components/menus#exposed-dropdown-menu) - **Text field dropdown menu（文本框下拉菜单）** ✓（Select 选择框） - Editable dropdown menu（可编辑的下拉菜单） - **Contextual（上下文相关的）✓** -- **[Progress indicators（进度条指示）](https://material.io/design/components/progress-indicators.html) ✓** - - **[Linear（线性进度条）](https://material.io/design/components/progress-indicators.html#linear-progress-indicators) ✓** - - **[Circular（环状进度条）](https://material.io/design/components/progress-indicators.html#circular-progress-indicators) ✓** +- **[Progress indicators（进度条指示）](https://m2.material.io/components/progress-indicators) ✓** + - **[Linear（线性进度条）](https://m2.material.io/components/progress-indicators#linear-progress-indicators) ✓** + - **[Circular（环状进度条）](https://m2.material.io/components/progress-indicators#circular-progress-indicators) ✓** - **[Loading](https://material.io/archive/guidelines/components/progress-activity.html) ✓** (_旧 Material v1_) -- **[Selection controls（选择控件）](https://material.io/design/components/selection-controls.html) ✓** - - **[Checkbox（单选按钮）](https://material.io/design/components/selection-controls.html#checkboxes) ✓** - - **[Radio button（单选按钮）](https://material.io/design/components/selection-controls.html#radio-buttons) ✓** - - **[Switch（切换开关）](https://material.io/design/components/selection-controls.html#switches) ✓** -- **[Sliders（滑块控件）](https://material.io/design/components/sliders.html) ✓** - - **[Continuous（连续滑块）](https://material.io/design/components/sliders.html#continuous-slider) ✓** - - **[Discrete（间续滑块）](https://material.io/design/components/sliders.html#discrete-slider) ✓** -- **[Snackbars](https://material.io/design/components/snackbars.html) ✓** (_旧 Material v1_) -- **[Subheaders](https://material.io/archive/guidelines/components/subheaders.html) ✓** (_旧 Material v1_) - - **[Lists（列表副标题）](https://material.io/archive/guidelines/components/subheaders.html#subheaders-list-subheaders) ✓** - - **[ Grid（网格副标题）](https://material.io/archive/guidelines/components/subheaders.html#subheaders-list-subheaders) ✓** - - [Menu](https://material.io/archive/guidelines/components/subheaders.html#subheaders-list-subheaders) -- **[Steppers](https://material.io/archive/guidelines/components/steppers.html) ✓** (_旧 Material v1_) - - **[Horizontal（横向的步骤条）](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steppers) ✓** - - **[Vertical（垂直的步骤条）](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steppers) ✓** - - **[Mobile steps（移动设备上的步骤条）](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) ✓** -- **[Tabs（选项卡）](https://material.io/design/components/tabs.html) ✓** - - **[Fixed tabs（固定的选项卡）](https://material.io/design/components/tabs.html#fixed-tabs) ✓** - - **[Scrollable tabs（可滚动的选项卡）](https://material.io/design/components/tabs.html#scrollable-tabs) ✓** -- **[Text fields（文本框）](https://material.io/design/components/text-fields.html) ✓** - - **[Standard](https://material.io/archive/guidelines/components/text-fields.html) ✓** (旧 Material v1) - - **[Filled（填充的文本框）](https://material.io/design/components/text-fields.html#filled-text-field) ✓** - - **[Outline（描边的文本框）](https://material.io/design/components/text-fields.html#outlined-text-field) ✓** - - [类型](https://material.io/design/components/text-fields.html#input-types): +- **[Selection controls（选择控件）](https://m2.material.io/design/components/selection-controls.html) ✓** + - **[Checkbox（单选按钮）](https://m2.material.io/components/checkboxes) ✓** + - **[Radio button（单选按钮）](https://m2.material.io/components/radio-buttons) ✓** + - **[Switch（切换开关）](https://m2.material.io/design/components/selection-controls.html#switches) ✓** +- **[Sliders（滑块控件）](https://m2.material.io/design/components/sliders.html) ✓** + - **[Continuous（连续滑块）](https://m2.material.io/design/components/sliders.html#continuous-slider) ✓** + - **[Discrete（间续滑块）](https://m2.material.io/design/components/sliders.html#discrete-slider) ✓** +- **[Snackbars](https://m2.material.io/components/snackbars) ✓** (_旧 Material v1_) +- **[Subheaders](https://m1.material.io/components/subheaders.html) ✓** (_旧 Material v1_) + - **[Lists（列表副标题）](https://m1.material.io/components/subheaders.html#subheaders-list-subheaders) ✓** + - **[ Grid（网格副标题）](https://m1.material.io/components/subheaders.html#subheaders-list-subheaders) ✓** + - [Menu](https://m1.material.io/components/subheaders.html#subheaders-list-subheaders) +- **[Steppers](https://m1.material.io/components/steppers.html) ✓** (_旧 Material v1_) + - **[Horizontal（横向的步骤条）](https://m1.material.io/components/steppers.html#steppers-types-of-steppers) ✓** + - **[Vertical（垂直的步骤条）](https://m1.material.io/components/steppers.html#steppers-types-of-steppers) ✓** + - **[Mobile steps（移动设备上的步骤条）](https://m1.material.io/components/steppers.html#steppers-types-of-steps) ✓** +- **[Tabs（选项卡）](https://m2.material.io/design/components/tabs.html) ✓** + - **[Fixed tabs（固定的选项卡）](https://m2.material.io/design/components/tabs.html#fixed-tabs) ✓** + - **[Scrollable tabs（可滚动的选项卡）](https://m2.material.io/design/components/tabs.html#scrollable-tabs) ✓** +- **[Text fields（文本框）](https://m2.material.io/components/text-fields) ✓** + - **[Standard](https://m1.material.io/components/text-fields.html) ✓** (旧 Material v1) + - **[Filled（填充的文本框）](https://m2.material.io/components/text-fields#filled-text-field) ✓** + - **[Outline（描边的文本框）](https://m2.material.io/components/text-fields#outlined-text-field) ✓** + - [类型](https://m2.material.io/components/text-fields#input-types): - **Single-line（单行文本框）✓** - **Multi-line（多行文本框）✓** - Text-area（文本区域） - **Full-width（全宽文本框）✓** - - [Assistive elements（辅助的元素）：](https://material.io/design/components/text-fields.html#anatomy) + - [Assistive elements（辅助的元素）：](https://m2.material.io/components/text-fields#anatomy) - **Helper text（帮助文本）✓** - **Error message（错误消息）✓** - **Icons（图标）✓** - 字符计数器（Character counter） - **[Toolbars](https://material.io/archive/guidelines/components/toolbars.html) ✓** (旧 Material v1) -- **[Tooltips（工具提示）](https://material.io/design/components/tooltips.html) ✓** +- **[Tooltips（工具提示）](https://m2.material.io/design/components/tooltips.html) ✓** - **Desktop（桌面 ）✓** - **移动设备（Mobile）✓** diff --git a/docs/data/material/getting-started/supported-components/supported-components.md b/docs/data/material/getting-started/supported-components/supported-components.md index 1d67c086dcad5e..37d1ba7b170fdc 100644 --- a/docs/data/material/getting-started/supported-components/supported-components.md +++ b/docs/data/material/getting-started/supported-components/supported-components.md @@ -1,8 +1,8 @@ # Supported components -

The following is a list of Material Design components & features. Those currently supported by MUI are highlighted ✓.

+

The following is a list of Material Design components & features. Those currently supported by Material UI are highlighted ✓.

-While we strive to follow the guidelines where practical (applying +While we strive to follow the Material Design guidelines where practical (applying common sense where guidelines contradict - a more common occurrence than one might expect), we do not expect to support every component, nor every feature of every component, but rather to provide the building blocks to @@ -12,103 +12,4 @@ If you wish to add support for a component or feature not highlighted here, please search for the relevant [GitHub Issue](https://github.com/mui/material-ui/issues), or create a new one to discuss the approach before submitting a pull request. -- **[Accordion](https://material.io/archive/guidelines/components/expansion-panels.html) ✓** (_Legacy Material v1_) -- App bars - - **[Top](https://material.io/design/components/app-bars-top.html) ✓** - - **[Bottom](https://material.io/design/components/app-bars-bottom.html) ✓** -- **[Banners](https://material.io/design/components/banners.html)** ([Can be composed](https://medium.com/material-ui/introducing-material-ui-design-system-93e921beb8df)) -- **[Bottom navigation](https://material.io/design/components/bottom-navigation.html) ✓** -- **[Buttons](https://material.io/design/components/buttons.html) ✓** - - **[Text & contained buttons (formerly flat & raised)](https://material.io/design/components/buttons.html) ✓** - - **[Toggle buttons](https://material.io/design/components/buttons.html#buttons-toggle-buttons) ~** ([Lab](/material-ui/about-the-lab/)) - - **[Icon toggle buttons](https://material.io/design/components/buttons.html#toggle-button) ✓** (Custom Checkbox) -- **[Buttons: Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html) ✓** - - Transitions: - - **[Speed dial](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions) ~** ([Lab](/material-ui/about-the-lab/)) - - [Menu](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions) - - [Morph](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions) - - [Full screen](https://material.io/design/components/buttons-floating-action-button.html#types-of-transitions) - - **[Extended FAB](https://material.io/design/components/buttons-floating-action-button.html#extended-fab) ✓** - - Speed dial -- **[Cards](https://material.io/design/components/cards.html) ✓** -- **[Chips](https://material.io/design/components/chips.html) ✓** - - **[Input](https://material.io/design/components/chips.html#input-chips) ✓** - - [Choice](https://material.io/design/components/chips.html#choice-chips) - - [Filter](https://material.io/design/components/chips.html#filter-chips) - - [Action](https://material.io/design/components/chips.html#action-chips) -- **[Data tables](https://material.io/design/components/data-tables.html) ✓** - - **Sortable ✓** - - **Selectable ✓** - - **Pagination ✓** -- **[Dialogs](https://material.io/design/components/dialogs.html) ✓** - - **[Alert dialog](https://material.io/design/components/dialogs.html#alert-dialog) ✓** - - **[Simple dialogs](https://material.io/design/components/dialogs.html#simple-dialog) ✓** (Can be composed with Dialog and List.) - - **[Confirmation dialogs](https://material.io/design/components/dialogs.html#confirmation-dialog) ✓** - - **[Full screen dialogs](https://material.io/design/components/dialogs.html#full-screen-dialog) ✓** -- **[Dividers](https://material.io/design/components/dividers.html) ✓** - - **[Full bleed](https://material.io/design/components/dividers.html#types) ✓** - - **[Inset](https://material.io/design/components/dividers.html#types) ✓** - - **[Middle](https://material.io/design/components/dividers.html#types) ✓** - - **[Subheader](https://material.io/design/components/dividers.html#types) ✓** -- **[Image lists](https://material.io/components/image-lists) ✓** -- **[Lists](https://material.io/design/components/lists.html) ✓** - - [Types:](https://material.io/design/components/lists.html#types) - - **Single line ✓** - - **Two line ✓** - - Three line - - **Avatar ✓** - - **Icon ✓** - - Thumbnail - - **Controls ✓** - - **Checkbox ✓** - - **Expand/collapse ✓** (AKA Nested) - - **Switch ✓** - - Reorder -- **[Menus](https://material.io/design/components/menus.html) ✓** - - **[Dropdown menu](https://material.io/design/components/menus.html#dropdown-menu) ✓** (Can be composed) - - [Cascade](https://material.io/design/components/menus.html#dropdown-menu) - - [Exposed dropdown menus](https://material.io/design/components/menus.html#exposed-dropdown-menu) - - **Text field dropdown menu ✓** (Select) - - Editable dropdown menu - - **Contextual ✓** -- **[Progress indicators](https://material.io/design/components/progress-indicators.html) ✓** - - **[Linear](https://material.io/design/components/progress-indicators.html#linear-progress-indicators) ✓** - - **[Circular](https://material.io/design/components/progress-indicators.html#circular-progress-indicators) ✓** - - **[Loading](https://material.io/archive/guidelines/components/progress-activity.html) ✓** (_Legacy Material v1_) -- **[Selection controls](https://material.io/design/components/selection-controls.html) ✓** - - **[Checkbox](https://material.io/design/components/selection-controls.html#checkboxes) ✓** - - **[Radio button](https://material.io/design/components/selection-controls.html#radio-buttons) ✓** - - **[Switch](https://material.io/design/components/selection-controls.html#switches) ✓** -- **[Sliders](https://material.io/design/components/sliders.html) ✓** - - **[Continuous](https://material.io/design/components/sliders.html#continuous-slider) ✓** - - **[Discrete](https://material.io/design/components/sliders.html#discrete-slider) ✓** -- **[Snackbars](https://material.io/design/components/snackbars.html) ✓** (_Legacy Material v1_) -- **[Subheaders](https://material.io/archive/guidelines/components/subheaders.html) ✓** (_Legacy Material v1_) - - **[List](https://material.io/archive/guidelines/components/subheaders.html#subheaders-list-subheaders) ✓** - - **[Grid](https://material.io/archive/guidelines/components/subheaders.html#subheaders-list-subheaders) ✓** - - [Menu](https://material.io/archive/guidelines/components/subheaders.html#subheaders-list-subheaders) -- **[Steppers](https://material.io/archive/guidelines/components/steppers.html) ✓** (_Legacy Material v1_) - - **[Horizontal](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steppers) ✓** - - **[Vertical](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steppers) ✓** - - **[Mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) ✓** -- **[Tabs](https://material.io/design/components/tabs.html) ✓** - - **[Fixed tabs](https://material.io/design/components/tabs.html#fixed-tabs) ✓** - - **[Scrollable tabs](https://material.io/design/components/tabs.html#scrollable-tabs) ✓** -- **[Text fields](https://material.io/design/components/text-fields.html) ✓** - - **[Standard](https://material.io/archive/guidelines/components/text-fields.html) ✓** (Legacy Material v1) - - **[Filled](https://material.io/design/components/text-fields.html#filled-text-field) ✓** - - **[Outline](https://material.io/design/components/text-fields.html#outlined-text-field) ✓** - - [Types](https://material.io/design/components/text-fields.html#input-types): - - **Single-line ✓** - - **Multi-line ✓** - - Text-area - - **Full-width ✓** - - [Assistive elements:](https://material.io/design/components/text-fields.html#anatomy) - - **Helper text ✓** - - **Error message ✓** - - **Icons ✓** - - Character counter -- **[Toolbars](https://material.io/archive/guidelines/components/toolbars.html) ✓** (Legacy Material v1) -- **[Tooltips](https://material.io/design/components/tooltips.html) ✓** -- **Desktop ✓** -- **Mobile ✓** +{{"demo": "MaterialUIComponents.js", "hideToolbar": true, "bg": true}} diff --git a/docs/data/material/guides/responsive-ui/responsive-ui-pt.md b/docs/data/material/guides/responsive-ui/responsive-ui-pt.md index 6e9771d89b356b..e3e2566b8f1c18 100644 --- a/docs/data/material/guides/responsive-ui/responsive-ui-pt.md +++ b/docs/data/material/guides/responsive-ui/responsive-ui-pt.md @@ -2,7 +2,7 @@

Os leiautes de Material Design incentivam a consistência entre plataformas, ambientes e tamanhos de tela usando elementos uniformes e espaçamento.

-[Leiautes responsivos](https://material.io/design/layout/responsive-layout-grid.html) em Material Design adaptam-se a qualquer tamanho de tela possível. Fornecemos os seguintes modos para tornar a interface do usuário responsiva: +[Leiautes responsivos](https://m2.material.io/design/layout/responsive-layout-grid.html) em Material Design adaptam-se a qualquer tamanho de tela possível. Fornecemos os seguintes modos para tornar a interface do usuário responsiva: - [Grid](/material-ui/react-grid/): The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. - [Container](/material-ui/react-container/): The container centers your content horizontally. É o elemento de leiaute mais básico. diff --git a/docs/data/material/guides/responsive-ui/responsive-ui-zh.md b/docs/data/material/guides/responsive-ui/responsive-ui-zh.md index 57dc15e1fda83a..0edc9ff1c8dc5d 100644 --- a/docs/data/material/guides/responsive-ui/responsive-ui-zh.md +++ b/docs/data/material/guides/responsive-ui/responsive-ui-zh.md @@ -2,7 +2,7 @@

Material Design 布局鼓励通过使用统一的元素和间距来实现跨平台、跨环境、不同屏幕尺寸下的一致性。

-Material Design 中的 [响应式布局](https://material.io/design/layout/responsive-layout-grid.html) 可适配任何可能的屏幕尺寸。 我们提供以下工具以实现响应式 UI： +Material Design 中的 [响应式布局](https://m2.material.io/design/layout/responsive-layout-grid.html) 可适配任何可能的屏幕尺寸。 我们提供以下工具以实现响应式 UI： - [Grid](/material-ui/react-grid/): The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. - [Container](/material-ui/react-container/): The container centers your content horizontally. 这是最基本的布局元素。 diff --git a/docs/data/material/guides/responsive-ui/responsive-ui.md b/docs/data/material/guides/responsive-ui/responsive-ui.md index 782bde585b4fe9..728c8705013d7b 100644 --- a/docs/data/material/guides/responsive-ui/responsive-ui.md +++ b/docs/data/material/guides/responsive-ui/responsive-ui.md @@ -2,7 +2,7 @@

Material Design layouts encourage consistency across platforms, environments, and screen sizes by using uniform elements and spacing.

-[Responsive layouts](https://material.io/design/layout/responsive-layout-grid.html) in Material Design adapt to any possible screen size. +[Responsive layouts](https://m2.material.io/design/layout/responsive-layout-grid.html) in Material Design adapt to any possible screen size. We provide the following helpers to make the UI responsive: - [Grid](/material-ui/react-grid/): The Material Design responsive layout grid adapts to screen size and orientation, ensuring consistency across layouts. diff --git a/docs/data/material/migration/migration-v4/v5-component-changes-pt.md b/docs/data/material/migration/migration-v4/v5-component-changes-pt.md index e9d3adf6d4c2bc..2031d9df0e8adf 100644 --- a/docs/data/material/migration/migration-v4/v5-component-changes-pt.md +++ b/docs/data/material/migration/migration-v4/v5-component-changes-pt.md @@ -40,7 +40,7 @@ Remove z-index when position static and relative. This avoids the creation of a ### Replace color prop for dark mode -The `color` prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the [Material Design guidelines](https://material.io/design/color/dark-theme.html). Use `enableColorOnDark` to restore the behavior of v4. +The `color` prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the [Material Design guidelines](https://m2.material.io/design/color/dark-theme.html). Use `enableColorOnDark` to restore the behavior of v4. ```jsx @@ -1334,7 +1334,7 @@ The `ValueLabelComponent` and `ThumbComponent` props are now part of the `compon ### Refactor CSS -Rework the CSS to match the latest [Material Design guidelines](https://material.io/components/sliders) and make custom styles more intuitive. [See documentation](/material-ui/react-slider/). +Rework the CSS to match the latest [Material Design guidelines](https://m2.material.io/components/sliders) and make custom styles more intuitive. [See documentation](/material-ui/react-slider/). @@ -1599,7 +1599,7 @@ The API that controls the scroll buttons has been split into two props. ### Update default minWidth and maxWidth -Default minimum and maximum widths have been changed to match the [Material Design specifications](https://material.io/components/tabs#specs): +Default minimum and maximum widths have been changed to match the [Material Design specifications](https://m2.material.io/components/tabs#specs): - `minWidth` was changed from 72px to 90px. - `maxWidth` was changed from 264px to 360px. diff --git a/docs/data/material/migration/migration-v4/v5-component-changes-zh.md b/docs/data/material/migration/migration-v4/v5-component-changes-zh.md index e9d3adf6d4c2bc..2031d9df0e8adf 100644 --- a/docs/data/material/migration/migration-v4/v5-component-changes-zh.md +++ b/docs/data/material/migration/migration-v4/v5-component-changes-zh.md @@ -40,7 +40,7 @@ Remove z-index when position static and relative. This avoids the creation of a ### Replace color prop for dark mode -The `color` prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the [Material Design guidelines](https://material.io/design/color/dark-theme.html). Use `enableColorOnDark` to restore the behavior of v4. +The `color` prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the [Material Design guidelines](https://m2.material.io/design/color/dark-theme.html). Use `enableColorOnDark` to restore the behavior of v4. ```jsx @@ -1334,7 +1334,7 @@ The `ValueLabelComponent` and `ThumbComponent` props are now part of the `compon ### Refactor CSS -Rework the CSS to match the latest [Material Design guidelines](https://material.io/components/sliders) and make custom styles more intuitive. [See documentation](/material-ui/react-slider/). +Rework the CSS to match the latest [Material Design guidelines](https://m2.material.io/components/sliders) and make custom styles more intuitive. [See documentation](/material-ui/react-slider/). @@ -1599,7 +1599,7 @@ The API that controls the scroll buttons has been split into two props. ### Update default minWidth and maxWidth -Default minimum and maximum widths have been changed to match the [Material Design specifications](https://material.io/components/tabs#specs): +Default minimum and maximum widths have been changed to match the [Material Design specifications](https://m2.material.io/components/tabs#specs): - `minWidth` was changed from 72px to 90px. - `maxWidth` was changed from 264px to 360px. diff --git a/docs/data/material/migration/migration-v4/v5-component-changes.md b/docs/data/material/migration/migration-v4/v5-component-changes.md index d0117e1dd50d2d..f6d87b193d70d1 100644 --- a/docs/data/material/migration/migration-v4/v5-component-changes.md +++ b/docs/data/material/migration/migration-v4/v5-component-changes.md @@ -41,7 +41,7 @@ Remove z-index when position static and relative. This avoids the creation of a ### Replace color prop for dark mode -The `color` prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the [Material Design guidelines](https://material.io/design/color/dark-theme.html). Use `enableColorOnDark` to restore the behavior of v4. +The `color` prop has no longer any effect in dark mode. The app bar uses the background color required by the elevation to follow the [Material Design guidelines](https://m2.material.io/design/color/dark-theme.html). Use `enableColorOnDark` to restore the behavior of v4. ```jsx @@ -1355,7 +1355,7 @@ The `ValueLabelComponent` and `ThumbComponent` props are now part of the `compon ### Refactor CSS -Rework the CSS to match the latest [Material Design guidelines](https://material.io/components/sliders) and make custom styles more intuitive. +Rework the CSS to match the latest [Material Design guidelines](https://m2.material.io/components/sliders) and make custom styles more intuitive. [See documentation](/material-ui/react-slider/). @@ -1622,7 +1622,7 @@ The API that controls the scroll buttons has been split into two props. ### Update default minWidth and maxWidth -Default minimum and maximum widths have been changed to match the [Material Design specifications](https://material.io/components/tabs#specs): +Default minimum and maximum widths have been changed to match the [Material Design specifications](https://m2.material.io/components/tabs#specs): - `minWidth` was changed from 72px to 90px. - `maxWidth` was changed from 264px to 360px. diff --git a/docs/data/material/pages.ts b/docs/data/material/pages.ts index 5ee1290259d163..fb2949004a6fd2 100644 --- a/docs/data/material/pages.ts +++ b/docs/data/material/pages.ts @@ -48,8 +48,8 @@ const pages: MuiPage[] = [ { pathname: '/material-ui/react-slider' }, { pathname: '/material-ui/react-switch' }, { pathname: '/material-ui/react-text-field', title: 'Text Field' }, - { pathname: '/material-ui/react-transfer-list' }, - { pathname: '/material-ui/react-toggle-button' }, + { pathname: '/material-ui/react-transfer-list', title: 'Transfer List' }, + { pathname: '/material-ui/react-toggle-button', title: 'Toggle Button' }, ], }, { @@ -85,7 +85,7 @@ const pages: MuiPage[] = [ subheader: 'surfaces', children: [ { pathname: '/material-ui/react-accordion' }, - { pathname: '/material-ui/react-app-bar' }, + { pathname: '/material-ui/react-app-bar', title: 'App Bar' }, { pathname: '/material-ui/react-card' }, { pathname: '/material-ui/react-paper' }, ], @@ -94,13 +94,13 @@ const pages: MuiPage[] = [ pathname: '/material-ui/components/navigation', subheader: 'navigation', children: [ - { pathname: '/material-ui/react-bottom-navigation' }, + { pathname: '/material-ui/react-bottom-navigation', title: 'Button Navigation' }, { pathname: '/material-ui/react-breadcrumbs' }, { pathname: '/material-ui/react-drawer' }, { pathname: '/material-ui/react-link' }, { pathname: '/material-ui/react-menu' }, { pathname: '/material-ui/react-pagination' }, - { pathname: '/material-ui/react-speed-dial' }, + { pathname: '/material-ui/react-speed-dial', title: 'Speed Dial' }, { pathname: '/material-ui/react-stepper' }, { pathname: '/material-ui/react-tabs' }, ], @@ -114,7 +114,7 @@ const pages: MuiPage[] = [ { pathname: '/material-ui/react-grid' }, { pathname: '/material-ui/react-grid2', title: 'Grid v2', newFeature: true }, { pathname: '/material-ui/react-stack' }, - { pathname: '/material-ui/react-image-list' }, + { pathname: '/material-ui/react-image-list', title: 'Image List' }, { pathname: '/material-ui/react-hidden' }, ], }, @@ -122,14 +122,14 @@ const pages: MuiPage[] = [ pathname: '/material-ui/components/utils', subheader: 'utils', children: [ - { pathname: '/material-ui/react-click-away-listener', title: 'Click-away listener' }, + { pathname: '/material-ui/react-click-away-listener', title: 'Click-Away Listener' }, { pathname: '/material-ui/react-css-baseline', title: 'CSS Baseline' }, { pathname: '/material-ui/react-modal' }, { pathname: '/material-ui/react-no-ssr', title: 'No SSR' }, { pathname: '/material-ui/react-popover' }, { pathname: '/material-ui/react-popper' }, { pathname: '/material-ui/react-portal' }, - { pathname: '/material-ui/react-textarea-autosize' }, + { pathname: '/material-ui/react-textarea-autosize', title: 'Textarea Autosize' }, { pathname: '/material-ui/transitions' }, { pathname: '/material-ui/react-use-media-query', title: 'useMediaQuery' }, ], @@ -138,8 +138,8 @@ const pages: MuiPage[] = [ pathname: '/mui-x', // the pathname does not matter here because the links to MUI X are outbound. subheader: 'MUI X', children: [ - { pathname: '/x/react-data-grid', title: 'Data grid' }, - { pathname: '/x/react-date-pickers/getting-started', title: 'Date & Time pickers' }, + { pathname: '/x/react-data-grid', title: 'Data Grid' }, + { pathname: '/x/react-date-pickers/getting-started', title: 'Date & Time Pickers' }, ], }, { diff --git a/docs/data/system/components/grid/grid-pt.md b/docs/data/system/components/grid/grid-pt.md index 1691f99b3f94c6..42124a8a82f9f0 100644 --- a/docs/data/system/components/grid/grid-pt.md +++ b/docs/data/system/components/grid/grid-pt.md @@ -65,7 +65,7 @@ The `rowSpacing` and `columnSpacing` props allow for specifying the row and colu ## Responsive values -You can switch the props' value based on the active breakpoint. For instance, we can implement the [recommended](https://material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design. +You can switch the props' value based on the active breakpoint. For instance, we can implement the [recommended](https://m2.material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design. {{"demo": "ResponsiveGrid.js", "bg": true}} diff --git a/docs/data/system/components/grid/grid-zh.md b/docs/data/system/components/grid/grid-zh.md index 1691f99b3f94c6..42124a8a82f9f0 100644 --- a/docs/data/system/components/grid/grid-zh.md +++ b/docs/data/system/components/grid/grid-zh.md @@ -65,7 +65,7 @@ The `rowSpacing` and `columnSpacing` props allow for specifying the row and colu ## Responsive values -You can switch the props' value based on the active breakpoint. For instance, we can implement the [recommended](https://material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design. +You can switch the props' value based on the active breakpoint. For instance, we can implement the [recommended](https://m2.material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design. {{"demo": "ResponsiveGrid.js", "bg": true}} diff --git a/docs/data/system/components/grid/grid.md b/docs/data/system/components/grid/grid.md index 8cc21f2603dcb8..6eb4ed9bf95d4e 100644 --- a/docs/data/system/components/grid/grid.md +++ b/docs/data/system/components/grid/grid.md @@ -69,7 +69,7 @@ It's similar to the `row-gap` and `column-gap` properties of [CSS Grid](/system/ ## Responsive values You can switch the props' value based on the active breakpoint. -For instance, we can implement the [recommended](https://material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design. +For instance, we can implement the [recommended](https://m2.material.io/design/layout/responsive-layout-grid.html) responsive layout grid of Material Design. {{"demo": "ResponsiveGrid.js", "bg": true}} diff --git a/docs/packages/markdown/parseMarkdown.js b/docs/packages/markdown/parseMarkdown.js index 63094b71c813bc..1fb2e8558f4a97 100644 --- a/docs/packages/markdown/parseMarkdown.js +++ b/docs/packages/markdown/parseMarkdown.js @@ -153,7 +153,7 @@ function renderInline(markdown) { } const noSEOadvantage = [ - 'https://material.io/', + 'https://m2.material.io/', 'https://getbootstrap.com/', 'https://materialdesignicons.com/', 'https://www.w3.org/', diff --git a/docs/pages/base/api/focus-trap.json b/docs/pages/base/api/focus-trap.json index c18d7ec6f78d16..15b34f7040272a 100644 --- a/docs/pages/base/api/focus-trap.json +++ b/docs/pages/base/api/focus-trap.json @@ -16,6 +16,6 @@ "spread": false, "filename": "/packages/mui-base/src/FocusTrap/FocusTrap.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/base/api/textarea-autosize.json b/docs/pages/base/api/textarea-autosize.json index 73ac007fbcdf22..f775a92e61519e 100644 --- a/docs/pages/base/api/textarea-autosize.json +++ b/docs/pages/base/api/textarea-autosize.json @@ -12,6 +12,6 @@ "forwardsRefTo": "HTMLTextAreaElement", "filename": "/packages/mui-base/src/TextareaAutosize/TextareaAutosize.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/blog/2020-developer-survey-results.md b/docs/pages/blog/2020-developer-survey-results.md index 369f2bec20c9d5..f663d3cce31c78 100644 --- a/docs/pages/blog/2020-developer-survey-results.md +++ b/docs/pages/blog/2020-developer-survey-results.md @@ -199,7 +199,7 @@ Decreasing pain: Growing pains: - ∞: Forms is a new item. It seems that we should at least work more closely with react-hook-form, formik, and react-final-form. -- ∞: Charts is a new item. Material Design even has a page dedicated to [date visualization](https://material.io/design/communication/data-visualization.html). +- ∞: Charts is a new item. Material Design even has a page dedicated to [date visualization](https://m2.material.io/design/communication/data-visualization.html). - x5: Custom themes. - x5: Simpler customization. We have improved customizability this year by introducing global class names and reducing the CSS specificity of some selectors. However, it seems that we are now tapping into a new audience. We need to do better. - x1.5: Animations. diff --git a/docs/pages/blog/2020-introducing-sketch.md b/docs/pages/blog/2020-introducing-sketch.md index 7d5608865692fa..ae089d55410d2b 100644 --- a/docs/pages/blog/2020-introducing-sketch.md +++ b/docs/pages/blog/2020-introducing-sketch.md @@ -29,7 +29,7 @@ For instance, there is a [Stack Overflow question](https://stackoverflow.com/que For a long time, we have ignored the problem. We were recommending users to try alternatives out. However, we realized that it wasn't a great answer. There were no good solutions out there: - **Sketch** has [some symbols](https://i.stack.imgur.com/vEEAA.png) for Material Design. Unfortunately, they cover <30% of the components available in MUI, use an outdated version of the specification, and focus on mobile (leaving desktop behind). -- **Material Design** had a [Sketch plugin](https://material.io/resources/theme-editor/). +- **Material Design** had a [Sketch plugin](https://m2.material.io/resources/theme-editor/). Unfortunately, it was recently retired, was supporting fewer components than MUI, and didn't use the same wording/structure as MUI that made it harder to move from design to implementation. - Anything else is paid. diff --git a/docs/pages/blog/material-ui-v4-is-out.md b/docs/pages/blog/material-ui-v4-is-out.md index fd8e2a12d1a035..2eacf7bd0f8490 100644 --- a/docs/pages/blog/material-ui-v4-is-out.md +++ b/docs/pages/blog/material-ui-v4-is-out.md @@ -33,7 +33,7 @@ This release is influenced by two major factors. First, following the Developer ### Customization -The Material Design team at Google has made the customization of their design system framework a core feature: [Material Theming](https://material.io/design/material-theming/overview.html). It's an important dimension of the library for us. Since the release of v1, we have been improving the component customization demos, release after release. We demonstrate a wide range of different designs: +The Material Design team at Google has made the customization of their design system framework a core feature: [Material Theming](https://m2.material.io/design/material-theming/overview.html). It's an important dimension of the library for us. Since the release of v1, we have been improving the component customization demos, release after release. We demonstrate a wide range of different designs: ![Demo1](/static/blog/material-ui-v4-is-out/demo1.png) diff --git a/docs/pages/material-ui/api/app-bar.json b/docs/pages/material-ui/api/app-bar.json index 61bb077819403c..a4a0e01301dad5 100644 --- a/docs/pages/material-ui/api/app-bar.json +++ b/docs/pages/material-ui/api/app-bar.json @@ -46,6 +46,6 @@ "forwardsRefTo": "HTMLElement", "filename": "/packages/mui-material/src/AppBar/AppBar.js", "inheritance": { "component": "Paper", "pathname": "/material-ui/api/paper/" }, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/bottom-navigation-action.json b/docs/pages/material-ui/api/bottom-navigation-action.json index b28ec28c7a800a..c71b3ed688336b 100644 --- a/docs/pages/material-ui/api/bottom-navigation-action.json +++ b/docs/pages/material-ui/api/bottom-navigation-action.json @@ -23,6 +23,6 @@ "forwardsRefTo": "HTMLButtonElement", "filename": "/packages/mui-material/src/BottomNavigationAction/BottomNavigationAction.js", "inheritance": { "component": "ButtonBase", "pathname": "/material-ui/api/button-base/" }, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/bottom-navigation.json b/docs/pages/material-ui/api/bottom-navigation.json index 5f2379e761c678..bcd227c7df08eb 100644 --- a/docs/pages/material-ui/api/bottom-navigation.json +++ b/docs/pages/material-ui/api/bottom-navigation.json @@ -19,6 +19,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-material/src/BottomNavigation/BottomNavigation.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/checkbox.json b/docs/pages/material-ui/api/checkbox.json index 587ac43cb476a6..4494ffa485d98a 100644 --- a/docs/pages/material-ui/api/checkbox.json +++ b/docs/pages/material-ui/api/checkbox.json @@ -46,6 +46,6 @@ "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-material/src/Checkbox/Checkbox.js", "inheritance": { "component": "ButtonBase", "pathname": "/material-ui/api/button-base/" }, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/form-control-label.json b/docs/pages/material-ui/api/form-control-label.json index 6d994e5e053447..3991b1d8254c15 100644 --- a/docs/pages/material-ui/api/form-control-label.json +++ b/docs/pages/material-ui/api/form-control-label.json @@ -45,6 +45,6 @@ "forwardsRefTo": "HTMLLabelElement", "filename": "/packages/mui-material/src/FormControlLabel/FormControlLabel.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/form-control.json b/docs/pages/material-ui/api/form-control.json index 84f71b3e61f037..99d314869ad9fe 100644 --- a/docs/pages/material-ui/api/form-control.json +++ b/docs/pages/material-ui/api/form-control.json @@ -54,6 +54,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-material/src/FormControl/FormControl.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/form-label.json b/docs/pages/material-ui/api/form-label.json index 5f1ddf15618514..98e07341eb7475 100644 --- a/docs/pages/material-ui/api/form-label.json +++ b/docs/pages/material-ui/api/form-label.json @@ -45,6 +45,6 @@ "forwardsRefTo": "HTMLLabelElement", "filename": "/packages/mui-material/src/FormLabel/FormLabel.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/image-list-item-bar.json b/docs/pages/material-ui/api/image-list-item-bar.json index 042923ea7ecb79..5263bf9af72c4b 100644 --- a/docs/pages/material-ui/api/image-list-item-bar.json +++ b/docs/pages/material-ui/api/image-list-item-bar.json @@ -45,6 +45,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-material/src/ImageListItemBar/ImageListItemBar.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/image-list-item.json b/docs/pages/material-ui/api/image-list-item.json index 179fc9474e09ea..7f46143e09c9eb 100644 --- a/docs/pages/material-ui/api/image-list-item.json +++ b/docs/pages/material-ui/api/image-list-item.json @@ -22,6 +22,6 @@ "forwardsRefTo": "HTMLLIElement", "filename": "/packages/mui-material/src/ImageListItem/ImageListItem.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/image-list.json b/docs/pages/material-ui/api/image-list.json index 89168dd2c23616..1b58ed6bdcc8fd 100644 --- a/docs/pages/material-ui/api/image-list.json +++ b/docs/pages/material-ui/api/image-list.json @@ -33,6 +33,6 @@ "forwardsRefTo": "HTMLUListElement", "filename": "/packages/mui-material/src/ImageList/ImageList.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/list-item.json b/docs/pages/material-ui/api/list-item.json index 935d6bb0db64a3..6d74959ea2c50c 100644 --- a/docs/pages/material-ui/api/list-item.json +++ b/docs/pages/material-ui/api/list-item.json @@ -80,6 +80,6 @@ "forwardsRefTo": "HTMLLIElement", "filename": "/packages/mui-material/src/ListItem/ListItem.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/list.json b/docs/pages/material-ui/api/list.json index 689e5f89e498db..4a20714dd18aeb 100644 --- a/docs/pages/material-ui/api/list.json +++ b/docs/pages/material-ui/api/list.json @@ -23,6 +23,6 @@ "forwardsRefTo": "HTMLUListElement", "filename": "/packages/mui-material/src/List/List.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/menu.json b/docs/pages/material-ui/api/menu.json index 08469442b89bb3..9eb48a581fa40b 100644 --- a/docs/pages/material-ui/api/menu.json +++ b/docs/pages/material-ui/api/menu.json @@ -34,6 +34,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-material/src/Menu/Menu.js", "inheritance": { "component": "Popover", "pathname": "/material-ui/api/popover/" }, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/radio-group.json b/docs/pages/material-ui/api/radio-group.json index 027c99ba050b88..1f06add39ad3b4 100644 --- a/docs/pages/material-ui/api/radio-group.json +++ b/docs/pages/material-ui/api/radio-group.json @@ -12,6 +12,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-material/src/RadioGroup/RadioGroup.js", "inheritance": { "component": "FormGroup", "pathname": "/material-ui/api/form-group/" }, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/radio.json b/docs/pages/material-ui/api/radio.json index 0ef61a8f086006..235f889cf1cd7b 100644 --- a/docs/pages/material-ui/api/radio.json +++ b/docs/pages/material-ui/api/radio.json @@ -44,6 +44,6 @@ "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-material/src/Radio/Radio.js", "inheritance": { "component": "ButtonBase", "pathname": "/material-ui/api/button-base/" }, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/speed-dial-action.json b/docs/pages/material-ui/api/speed-dial-action.json index 797646ab848c5d..4b4009f9951ef7 100644 --- a/docs/pages/material-ui/api/speed-dial-action.json +++ b/docs/pages/material-ui/api/speed-dial-action.json @@ -41,6 +41,6 @@ "forwardsRefTo": "HTMLButtonElement", "filename": "/packages/mui-material/src/SpeedDialAction/SpeedDialAction.js", "inheritance": { "component": "Tooltip", "pathname": "/material-ui/api/tooltip/" }, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/speed-dial-icon.json b/docs/pages/material-ui/api/speed-dial-icon.json index 8bec272eea34cd..33588214f41ed8 100644 --- a/docs/pages/material-ui/api/speed-dial-icon.json +++ b/docs/pages/material-ui/api/speed-dial-icon.json @@ -20,6 +20,6 @@ "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-material/src/SpeedDialIcon/SpeedDialIcon.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/speed-dial.json b/docs/pages/material-ui/api/speed-dial.json index 0958537a782447..14255424269e46 100644 --- a/docs/pages/material-ui/api/speed-dial.json +++ b/docs/pages/material-ui/api/speed-dial.json @@ -52,6 +52,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-material/src/SpeedDial/SpeedDial.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/switch.json b/docs/pages/material-ui/api/switch.json index 8287dbb05ad963..ee47143778c0cd 100644 --- a/docs/pages/material-ui/api/switch.json +++ b/docs/pages/material-ui/api/switch.json @@ -65,6 +65,6 @@ "forwardsRefTo": "HTMLSpanElement", "filename": "/packages/mui-material/src/Switch/Switch.js", "inheritance": { "component": "IconButton", "pathname": "/material-ui/api/icon-button/" }, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/toggle-button-group.json b/docs/pages/material-ui/api/toggle-button-group.json index 6323cd0b43f816..c87635a7e5aee3 100644 --- a/docs/pages/material-ui/api/toggle-button-group.json +++ b/docs/pages/material-ui/api/toggle-button-group.json @@ -42,6 +42,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-material/src/ToggleButtonGroup/ToggleButtonGroup.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/toggle-button.json b/docs/pages/material-ui/api/toggle-button.json index 32c7512d2195c1..8edf34a3056f40 100644 --- a/docs/pages/material-ui/api/toggle-button.json +++ b/docs/pages/material-ui/api/toggle-button.json @@ -51,6 +51,6 @@ "forwardsRefTo": "HTMLButtonElement", "filename": "/packages/mui-material/src/ToggleButton/ToggleButton.js", "inheritance": { "component": "ButtonBase", "pathname": "/material-ui/api/button-base/" }, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/pages/material-ui/api/toolbar.json b/docs/pages/material-ui/api/toolbar.json index edd62c8a7cc59e..12cb597c03f338 100644 --- a/docs/pages/material-ui/api/toolbar.json +++ b/docs/pages/material-ui/api/toolbar.json @@ -28,6 +28,6 @@ "forwardsRefTo": "HTMLDivElement", "filename": "/packages/mui-material/src/Toolbar/Toolbar.js", "inheritance": null, - "demos": "", + "demos": "", "cssComponent": false } diff --git a/docs/src/pages/versions/LatestVersions.js b/docs/src/pages/versions/LatestVersions.js index 6b29577d4b0fe8..b68d733319ed7f 100644 --- a/docs/src/pages/versions/LatestVersions.js +++ b/docs/src/pages/versions/LatestVersions.js @@ -19,7 +19,6 @@ function LatestVersions() { @@ -29,7 +28,6 @@ function LatestVersions() { Source code @@ -43,7 +41,6 @@ function LatestVersions() { @@ -53,7 +50,6 @@ function LatestVersions() { Source code diff --git a/docs/src/pages/versions/ReleasedVersions.js b/docs/src/pages/versions/ReleasedVersions.js index 2d2d3e09c79dc6..337800f09dbe15 100644 --- a/docs/src/pages/versions/ReleasedVersions.js +++ b/docs/src/pages/versions/ReleasedVersions.js @@ -26,12 +26,7 @@ function ReleasedVersions() { - + Documentation @@ -40,7 +35,6 @@ function ReleasedVersions() { doc.version.indexOf('pre-release') === -1 ? ( diff --git a/docs/translations/translations.json b/docs/translations/translations.json index 68b8fe653edb1a..5c9a3c9332de24 100644 --- a/docs/translations/translations.json +++ b/docs/translations/translations.json @@ -209,14 +209,14 @@ "/base/react-table-pagination": "Table pagination", "/base/react-tabs": "Tabs", "utils": "Utils", - "/base/react-click-away-listener": "Click-away listener", + "/base/react-click-away-listener": "Click-Away Listener", "/base/react-focus-trap": "Focus Trap", "/base/react-form-control": "Form control", "/base/react-modal": "Modal", "/base/react-no-ssr": "No SSR", "/base/react-popper": "Popper", "/base/react-portal": "Portal", - "/base/react-textarea-autosize": "Textarea autosize", + "/base/react-textarea-autosize": "Textarea Autosize", "/base/guides": "How To Guides", "/base/guides/working-with-tailwind-css": "Working with Tailwind CSS", "/material-ui/getting-started": "Getting started", @@ -243,8 +243,8 @@ "/material-ui/react-slider": "Slider", "/material-ui/react-switch": "Switch", "/material-ui/react-text-field": "Text Field", - "/material-ui/react-transfer-list": "Transfer list", - "/material-ui/react-toggle-button": "Toggle button", + "/material-ui/react-transfer-list": "Transfer List", + "/material-ui/react-toggle-button": "Toggle Button", "/material-ui/react-avatar": "Avatar", "/material-ui/react-badge": "Badge", "/material-ui/react-chip": "Chip", @@ -263,16 +263,16 @@ "/material-ui/react-snackbar": "Snackbar", "surfaces": "Surfaces", "/material-ui/react-accordion": "Accordion", - "/material-ui/react-app-bar": "App bar", + "/material-ui/react-app-bar": "App Bar", "/material-ui/react-card": "Card", "/material-ui/react-paper": "Paper", - "/material-ui/react-bottom-navigation": "Bottom navigation", + "/material-ui/react-bottom-navigation": "Button Navigation", "/material-ui/react-breadcrumbs": "Breadcrumbs", "/material-ui/react-drawer": "Drawer", "/material-ui/react-link": "Link", "/material-ui/react-menu": "Menu", "/material-ui/react-pagination": "Pagination", - "/material-ui/react-speed-dial": "Speed dial", + "/material-ui/react-speed-dial": "Speed Dial", "/material-ui/react-stepper": "Stepper", "/material-ui/react-tabs": "Tabs", "layout": "Layout", @@ -281,16 +281,16 @@ "/material-ui/react-grid": "Grid", "/material-ui/react-grid2": "Grid v2", "/material-ui/react-stack": "Stack", - "/material-ui/react-image-list": "Image list", + "/material-ui/react-image-list": "Image List", "/material-ui/react-hidden": "Hidden", - "/material-ui/react-click-away-listener": "Click-away listener", + "/material-ui/react-click-away-listener": "Click-Away Listener", "/material-ui/react-css-baseline": "CSS Baseline", "/material-ui/react-modal": "Modal", "/material-ui/react-no-ssr": "No SSR", "/material-ui/react-popover": "Popover", "/material-ui/react-popper": "Popper", "/material-ui/react-portal": "Portal", - "/material-ui/react-textarea-autosize": "Textarea autosize", + "/material-ui/react-textarea-autosize": "Textarea Autosize", "/material-ui/transitions": "Transitions", "/material-ui/react-use-media-query": "useMediaQuery", "MUI X": "MUI X", diff --git a/packages/mui-base/src/FocusTrap/FocusTrap.d.ts b/packages/mui-base/src/FocusTrap/FocusTrap.d.ts index 6ec2bab5e93702..55cc5d7d88bfb6 100644 --- a/packages/mui-base/src/FocusTrap/FocusTrap.d.ts +++ b/packages/mui-base/src/FocusTrap/FocusTrap.d.ts @@ -56,7 +56,7 @@ export interface FocusTrapProps { * * Demos: * - * - [Focus trap](https://mui.com/base/react-focus-trap/) + * - [Focus Trap](https://mui.com/base/react-focus-trap/) * * API: * diff --git a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.d.ts b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.d.ts index 722707255aba1a..70f2f048af38a2 100644 --- a/packages/mui-base/src/TextareaAutosize/TextareaAutosize.d.ts +++ b/packages/mui-base/src/TextareaAutosize/TextareaAutosize.d.ts @@ -18,7 +18,7 @@ export interface TextareaAutosizeProps * * Demos: * - * - [Textarea autosize](https://mui.com/base/react-textarea-autosize/) + * - [Textarea Autosize](https://mui.com/base/react-textarea-autosize/) * - [Textarea Autosize](https://mui.com/material-ui/react-textarea-autosize/) * * API: diff --git a/packages/mui-material/src/AppBar/AppBar.d.ts b/packages/mui-material/src/AppBar/AppBar.d.ts index a24b1d6f6d0641..2d0388405baca2 100644 --- a/packages/mui-material/src/AppBar/AppBar.d.ts +++ b/packages/mui-material/src/AppBar/AppBar.d.ts @@ -46,7 +46,7 @@ export interface AppBarTypeMap

{ * * Demos: * - * - [App bar](https://mui.com/material-ui/react-app-bar/) + * - [App Bar](https://mui.com/material-ui/react-app-bar/) * * API: * diff --git a/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts b/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts index d27fd8d18c1e29..8e8b724458ca40 100644 --- a/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts +++ b/packages/mui-material/src/BottomNavigation/BottomNavigation.d.ts @@ -42,7 +42,7 @@ export interface BottomNavigationTypeMap

* Demos: * * - [Checkbox](https://mui.com/material-ui/react-checkbox/) - * - [Radio button](https://mui.com/material-ui/react-radio-button/) + * - [Radio Group](https://mui.com/material-ui/react-radio-button/) * - [Switch](https://mui.com/material-ui/react-switch/) * - [Text Field](https://mui.com/material-ui/react-text-field/) * diff --git a/packages/mui-material/src/FormControlLabel/FormControlLabel.d.ts b/packages/mui-material/src/FormControlLabel/FormControlLabel.d.ts index bc4fb55b2f92ca..e4e5774d5e3717 100644 --- a/packages/mui-material/src/FormControlLabel/FormControlLabel.d.ts +++ b/packages/mui-material/src/FormControlLabel/FormControlLabel.d.ts @@ -76,7 +76,7 @@ export interface FormControlLabelProps * Demos: * * - [Checkbox](https://mui.com/material-ui/react-checkbox/) - * - [Radio button](https://mui.com/material-ui/react-radio-button/) + * - [Radio Group](https://mui.com/material-ui/react-radio-button/) * - [Switch](https://mui.com/material-ui/react-switch/) * * API: diff --git a/packages/mui-material/src/FormLabel/FormLabel.d.ts b/packages/mui-material/src/FormLabel/FormLabel.d.ts index c4171159a14735..1b52e961599bf3 100644 --- a/packages/mui-material/src/FormLabel/FormLabel.d.ts +++ b/packages/mui-material/src/FormLabel/FormLabel.d.ts @@ -60,7 +60,7 @@ export interface FormLabelTypeMap

* Demos: * * - [Checkbox](https://mui.com/material-ui/react-checkbox/) - * - [Radio button](https://mui.com/material-ui/react-radio-button/) + * - [Radio Group](https://mui.com/material-ui/react-radio-button/) * - [Switch](https://mui.com/material-ui/react-switch/) * * API: diff --git a/packages/mui-material/src/ImageList/ImageList.d.ts b/packages/mui-material/src/ImageList/ImageList.d.ts index 277433e45b49ee..6b3b1b302f1b18 100644 --- a/packages/mui-material/src/ImageList/ImageList.d.ts +++ b/packages/mui-material/src/ImageList/ImageList.d.ts @@ -51,7 +51,7 @@ export interface ImageListTypeMap

{ * * Demos: * - * - [Image list](https://mui.com/material-ui/react-image-list/) + * - [Image List](https://mui.com/material-ui/react-image-list/) * * API: * diff --git a/packages/mui-material/src/ImageListItem/ImageListItem.d.ts b/packages/mui-material/src/ImageListItem/ImageListItem.d.ts index 2538f261b84ebb..6fbdc4296cfbb4 100644 --- a/packages/mui-material/src/ImageListItem/ImageListItem.d.ts +++ b/packages/mui-material/src/ImageListItem/ImageListItem.d.ts @@ -35,7 +35,7 @@ export interface ImageListItemTypeMap

= OverridableComponent { * Demos: * * - [Lists](https://mui.com/material-ui/react-list/) - * - [Transfer list](https://mui.com/material-ui/react-transfer-list/) + * - [Transfer List](https://mui.com/material-ui/react-transfer-list/) * * API: * diff --git a/packages/mui-material/src/Menu/Menu.d.ts b/packages/mui-material/src/Menu/Menu.d.ts index 832d60640a8ec1..c0f243b12353fc 100644 --- a/packages/mui-material/src/Menu/Menu.d.ts +++ b/packages/mui-material/src/Menu/Menu.d.ts @@ -83,7 +83,7 @@ export interface MenuProps extends StandardProps { * * Demos: * - * - [App bar](https://mui.com/material-ui/react-app-bar/) + * - [App Bar](https://mui.com/material-ui/react-app-bar/) * - [Menu](https://mui.com/material-ui/react-menu/) * * API: diff --git a/packages/mui-material/src/MenuItem/MenuItem.js b/packages/mui-material/src/MenuItem/MenuItem.js index c2e9d7c47ad9fe..82a54d493354fc 100644 --- a/packages/mui-material/src/MenuItem/MenuItem.js +++ b/packages/mui-material/src/MenuItem/MenuItem.js @@ -135,7 +135,7 @@ const MenuItemRoot = styled(ButtonBase, { }, }), ...(ownerState.dense && { - minHeight: 32, // https://material.io/components/menus#specs > Dense + minHeight: 32, // https://m2.material.io/components/menus#specs > Dense paddingTop: 4, paddingBottom: 4, ...theme.typography.body2, diff --git a/packages/mui-material/src/Radio/Radio.d.ts b/packages/mui-material/src/Radio/Radio.d.ts index 305f1a5300f268..241631572c4c1f 100644 --- a/packages/mui-material/src/Radio/Radio.d.ts +++ b/packages/mui-material/src/Radio/Radio.d.ts @@ -55,7 +55,7 @@ export interface RadioProps * * Demos: * - * - [Radio button](https://mui.com/material-ui/react-radio-button/) + * - [Radio Group](https://mui.com/material-ui/react-radio-button/) * * API: * diff --git a/packages/mui-material/src/RadioGroup/RadioGroup.d.ts b/packages/mui-material/src/RadioGroup/RadioGroup.d.ts index eb4eec21d0fc8b..7e82b72243c1b5 100644 --- a/packages/mui-material/src/RadioGroup/RadioGroup.d.ts +++ b/packages/mui-material/src/RadioGroup/RadioGroup.d.ts @@ -31,7 +31,7 @@ export type RadioGroupClassKey = keyof NonNullable; * * Demos: * - * - [Radio button](https://mui.com/material-ui/react-radio-button/) + * - [Radio Group](https://mui.com/material-ui/react-radio-button/) * * API: * diff --git a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts index 58fdecca277d87..4d6e16b7b2f148 100644 --- a/packages/mui-material/src/SpeedDial/SpeedDial.d.ts +++ b/packages/mui-material/src/SpeedDial/SpeedDial.d.ts @@ -96,7 +96,7 @@ export interface SpeedDialProps * * Demos: * - * - [Speed dial](https://mui.com/material-ui/react-speed-dial/) + * - [Speed Dial](https://mui.com/material-ui/react-speed-dial/) * * API: * diff --git a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts index 0d2151a3aac6f4..1a63ac305015fb 100644 --- a/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts +++ b/packages/mui-material/src/SpeedDialAction/SpeedDialAction.d.ts @@ -53,7 +53,7 @@ export interface SpeedDialActionProps extends StandardProps { * * Demos: * - * - [App bar](https://mui.com/material-ui/react-app-bar/) + * - [App Bar](https://mui.com/material-ui/react-app-bar/) * * API: * diff --git a/packages/mui-material/src/styles/createTransitions.js b/packages/mui-material/src/styles/createTransitions.js index 7cdfdf14790d5c..c76c25d0217477 100644 --- a/packages/mui-material/src/styles/createTransitions.js +++ b/packages/mui-material/src/styles/createTransitions.js @@ -12,7 +12,7 @@ export const easing = { sharp: 'cubic-bezier(0.4, 0, 0.6, 1)', }; -// Follow https://material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations +// Follow https://m2.material.io/guidelines/motion/duration-easing.html#duration-easing-common-durations // to learn when use what timing export const duration = { shortest: 150, diff --git a/packages/mui-material/src/styles/createTypography.js b/packages/mui-material/src/styles/createTypography.js index f344a6134d3024..ca52ce80c25179 100644 --- a/packages/mui-material/src/styles/createTypography.js +++ b/packages/mui-material/src/styles/createTypography.js @@ -10,8 +10,8 @@ const caseAllCaps = { const defaultFontFamily = '"Roboto", "Helvetica", "Arial", sans-serif'; /** - * @see @link{https://material.io/design/typography/the-type-system.html} - * @see @link{https://material.io/design/typography/understanding-typography.html} + * @see @link{https://m2.material.io/design/typography/the-type-system.html} + * @see @link{https://m2.material.io/design/typography/understanding-typography.html} */ export default function createTypography(palette, typography) { const { diff --git a/packages/mui-system/src/createTheme/createSpacing.ts b/packages/mui-system/src/createTheme/createSpacing.ts index 0a7e75d888b19d..ef7944467d0838 100644 --- a/packages/mui-system/src/createTheme/createSpacing.ts +++ b/packages/mui-system/src/createTheme/createSpacing.ts @@ -34,7 +34,7 @@ export default function createSpacing(spacingInput: SpacingOptions = 8): Spacing // Material Design layouts are visually balanced. Most measurements align to an 8dp grid, which aligns both spacing and the overall layout. // Smaller components, such as icons, can align to a 4dp grid. - // https://material.io/design/layout/understanding-layout.html#usage + // https://m2.material.io/design/layout/understanding-layout.html const transform = createUnarySpacing({ spacing: spacingInput, }); diff --git a/test/regressions/index.js b/test/regressions/index.js index 49322eb8e5e137..1a7485bf360ed9 100644 --- a/test/regressions/index.js +++ b/test/regressions/index.js @@ -141,6 +141,7 @@ const blacklist = [ 'docs-getting-started-templates-sign-in-side/SignInSide.png', // Flaky 'docs-getting-started-templates', // No public components 'docs-getting-started-usage/Usage.png', // No public components + 'docs-getting-started-supported-components/MaterialUIComponents.png', // No public components 'docs-landing', // Mostly images, redundant 'docs-production-error', // No components, page for DX 'docs-styles-advanced', // Redudant