diff --git a/docs/src/pages/components/grid/grid-zh.md b/docs/src/pages/components/grid/grid-zh.md
index d0263cb19f01f2..cecda5dd782ca0 100644
--- a/docs/src/pages/components/grid/grid-zh.md
+++ b/docs/src/pages/components/grid/grid-zh.md
@@ -31,7 +31,7 @@ components: Grid
## Fluid grids（流式格网）
-流式格网使用了可缩放和调整内容大小的列。 使用 breakpoints（断点)，您可以来确定流式格网的布局是否需要大量的更改。
+Fluid grids use columns that scale and resize content. A fluid grid’s layout can use breakpoints to determine if the layout needs to change dramatically.
### 基本栅格
@@ -45,7 +45,7 @@ components: Grid
{{"demo": "pages/components/grid/FullWidthGrid.js"}}
-交互式
+交互
下面是一个交互式的演示，您可让探索不同设置下的视觉结果：
@@ -53,7 +53,8 @@ components: Grid
自动布局
-自动布局使每个 item 公平地共享可用空间。这也意味着您可以设置一个item 的宽度，而其他元素将自动调整其大小。
+The Auto-layout makes the items equitably share the available space.
+That also means you can set the width of one item and the others will automatically resize around it.
{{"demo": "pages/components/grid/AutoGrid.js"}}
@@ -65,7 +66,7 @@ components: Grid
嵌套栅格
-container` 和 `item` 属性是两个独立的 booleans（布尔值），而它们可以结合使用。
+The container` and `item` properties are two independent booleans. They can be combined.
> 一个 flex **容器** 是通过将 `flex` 或 `inline-flex`的计算显示赋予给一个元素而生成的。 Flex 容器的流入子容器称为 flex **items**， 它们使用 flex 布局模型进行布局。
@@ -77,7 +78,10 @@ https://www.w3.org/TR/css-flexbox-1/#box-model
### 负边距
-当我们使用负边距来实现项目之间的间距的时候，会有一个限制。 如果负边距超出``元素，则会出现水平滚动。 有以下三种解决方法： 1。 不使用 spacing 的特性并且设置成默认的`spacing={0}` 2。 将填充应用于父级元素，并且将至少一半的间距值赋予子级元素：
+当我们使用负边距来实现项目之间的间距的时候，会有一个限制。 如果负边距超出``元素，则会出现水平滚动。 There are 3 available workarounds:
+
+1. 不使用 spacing 的特性并且设置成默认的`spacing={0}`
+2. 将填充应用于父级元素，并且至少将一半的间距值应用于子级元素：
```jsx
@@ -89,18 +93,18 @@ https://www.w3.org/TR/css-flexbox-1/#box-model
```
-1. 3。将父元素设置为 `overflow-x: hidden;`。
+3. 3。将父元素设置为 `overflow-x: hidden;`。
### white-space: nowrap;
-Flex 项目的初始设置为 `min-width: auto`。当子级使用 `white-space: nowrap;` 时会导致冲突。 您可能遇到以下问题:
+The initial setting on flex items is `min-width: auto`. It's causing a positioning conflict when the children is using `white-space: nowrap;`. You can experience the issue with:
```jsx
```
-为了使项目保持在容器内，您需要设置 `min-width: 0`。在实际操作中, 您可以设置 `zeroMinWidth` 属性:
+In order for the item to stay within the container you need to set `min-width: 0`. In practice, you can set the `zeroMinWidth` property:
```jsx
diff --git a/docs/src/pages/components/hidden/hidden-ja.md b/docs/src/pages/components/hidden/hidden-ja.md
index a6e7b0666be5af..59a04cdd302359 100644
--- a/docs/src/pages/components/hidden/hidden-ja.md
+++ b/docs/src/pages/components/hidden/hidden-ja.md
@@ -5,13 +5,13 @@ components: Hidden
# Hidden
-Quickly and responsively toggle the visibility value of components and more with our hidden utilities.
+非表示のユーティリティを使用して、コンポーネントの表示/非表示の値などをすばやくすばやく切り替えることができます。
-All elements are visible unless **they are explicitly hidden**. To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with our [`Grid`](/components/grid/) component.
+**明示的に非表示にしない限り**、すべての要素が表示されます。 Materialized UIの [responsive breakpoints](/customization/breakpoints/) との統合を容易にするには、次の手順に従います。 このコンポーネントを使用して任意のコンテンツを非表示にできます。 また、[`Grid`](/components/grid/)コンポーネントと組み合わせて使用することもできます。
## 仕組み
-Hidden works with a range of breakpoints e.g. `xsUp` or `mdDown`, or one or more breakpoints e.g. `only='sm'` or `only={['md', 'xl']}`. Ranges and individual breakpoints can be used simultaneously to achieve very customized behavior. The ranges are inclusive of the specified breakpoints.
+Hiddenは、`xsUp`または`mdDown` などのブレークポイントの範囲、 `{['sm','md','xl']}`などのブレークポイントで機能します。 範囲と個々のブレークポイントを同時に使用して、非常にカスタマイズされた動作を実現できます。 範囲には、指定したブレークポイントが含まれます。
```js
innerWidth |xs sm md lg xl
@@ -23,23 +23,23 @@ mdDown | hide | show
```
-## Implementations
+## 実装
### js
-By default, the `js` implementation is used, responsively hiding content based on using the [`withWidth()`](/customization/breakpoints/#withwidth) higher-order component that watches screen size. This has the benefit of not rendering any content at all unless the breakpoint is met.
+デフォルトでは、`js`実装が使用され、画面サイズを監視する [`withWidth()`](/customization/breakpoints/#withwidth)高次コンポーネントの使用に基づいて、応答的にコンテンツが非表示にされます これには、ブレークポイントに到達しない限りコンテンツをまったくレンダリングしないという利点があります。
### css
-If you are using server-side rendering, you can set `implementation="css"` if you don't want the browser to re-flow your content on the screen.
+サーバ側レンダリングを使用している場合、ブラウザで画面上のコンテンツを再フローしないようにするには、`implementation="css"`と設定します。
-## Breakpoint up
+## ブレイクポイント
-Using any breakpoint `up` property, the given *children* will be hidden *at or above* the breakpoint.
+ブレークポイントの `up`プロパティを使用すると、指定した*children*がブレークポイントの位置またはその上*at or above*になります。
{{"demo": "pages/components/hidden/BreakpointUp.js"}}
-## Breakpoint down
+## ブレイクポイント
Using any breakpoint `down` property, the given *children* will be hidden *at or below* the breakpoint.
diff --git a/docs/src/pages/components/hidden/hidden-zh.md b/docs/src/pages/components/hidden/hidden-zh.md
index 60e26c1517ee8f..f1ab5b87ac2497 100644
--- a/docs/src/pages/components/hidden/hidden-zh.md
+++ b/docs/src/pages/components/hidden/hidden-zh.md
@@ -1,17 +1,17 @@
---
-title: 隐藏的React组件
+title: React Hidden（隐藏）组件
components: Hidden
---
-# Hidden
+# Hidden（隐藏组件）
-使用我们的Hidden组件快速并响应式地切换元素的显隐。
+您可以使用我们的隐藏组件来实现快速并响应式地控制元素的显隐。
-除非**明确隐藏**，否则所有元素都可见。 To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with our [`Grid`](/components/grid/) component.
+除非**明确指定是隐藏的**，所有元素都是可见的。 为了简化与[响应式断点](/customization/breakpoints/)的集成， 此组件可用于隐藏任何内容，或者您可以将它与我们的[`栅格`](/components/grid/)组件结合使用。
## 它是如何工作的
-隐蔽工程与一系列断点例如 `xsUp` 或 `mdDown`，或一个或多个断点例如 `只= 'SM'` 或 `只= {[ 'MD'， 'XL']}`。 可以同时使用范围和单个断点来实现非常自定义的行为。 范围包括指定的断点。
+通常我们将隐藏组件和一系列 breakpoint（断点）放在一起使用。例如 `xsUp` 或 `mdDown`，或一个或多个断点，例如 `only='sm'` 或 `only={['md', 'xl']}`。 可以同时使用范围和单个断点来实现自定义的行为。 范围包括指定的断点。
```js
innerWidth |xs sm md lg xl
@@ -33,19 +33,19 @@ mdDown | hide | show
如果您正在使用服务器端呈现，则可以设置 `implementation="css"` 如果您不希望浏览器在屏幕上重新流动您的内容。
-## 断点
+## 断点 up
使用任何断点 `up` 属性，给定 *子节点* 将被隐藏 *或高于* 的断点。
{{"demo": "pages/components/hidden/BreakpointUp.js"}}
-## 断点下来
+## 断点 down
使用任何断点 `down` 属性，给定 *子节点* 将被隐藏 *或低于* 的断点。
{{"demo": "pages/components/hidden/BreakpointDown.js"}}
-## 仅限断点
+## 断点 only
利用断点 `only` 属性，给定 *孩子* 将被隐藏 *在* 指定的断点（多个）。
@@ -56,7 +56,7 @@ mdDown | hide | show
{{"demo": "pages/components/hidden/BreakpointOnly.js"}}
-## 与网格集成
+## 与 Grid 集成
在不同的响应断点处更改 `Grid` 是很常见的，并且在许多情况下，您希望隐藏其中一些元素。
diff --git a/docs/src/pages/components/icons/icons-de.md b/docs/src/pages/components/icons/icons-de.md
index 698d9aa843a835..920028e6ab0677 100644
--- a/docs/src/pages/components/icons/icons-de.md
+++ b/docs/src/pages/components/icons/icons-de.md
@@ -34,7 +34,7 @@ Sie können [material.io/tools/icons](https://material.io/tools/icons/?style=bas
- [`delete`](https://material.io/tools/icons/?icon=delete&style=baseline) ist unter `@material-ui/icons/Delete` bereitgestellt
- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) ist unter `@material-ui/icons/DeleteForever` bereitgestellt
-Hängen Sie bei *"themed"* Symbolen den Themenamen an den Symbolnamen an. Zum Beispiel
+For *"themed"* icons, append the theme name to the icon name. For instance with the
- Das umrahmte [`delete`](https://material.io/tools/icons/?icon=delete&style=outline) Symbol ist unter `@material-ui/icons/DeleteOutlined` bereitgestellt
- Das runde [`delete`](https://material.io/tools/icons/?icon=delete&style=rounded) Symbol ist unter `@material-ui/icons/DeleteRounded` bereitgestellt
@@ -78,7 +78,7 @@ Die `Symbol-` Komponente zeigt ein Symbol aus einer beliebigen Symbolschriftart
+
@@ -135,7 +138,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
### Dekorative Schrift-Symbole
-Wenn Ihre Icons rein dekorativ sind, sind Sie bereits fertig! Wir fügen das Attribut `aria-hidden=true`, damit Ihre Symbole richtig zugänglich sind (unsichtbar).
+If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
### Semantic Font Symbole
diff --git a/docs/src/pages/components/icons/icons-es.md b/docs/src/pages/components/icons/icons-es.md
index 6f27ffc85ec53a..fa96d5e33780f0 100644
--- a/docs/src/pages/components/icons/icons-es.md
+++ b/docs/src/pages/components/icons/icons-es.md
@@ -34,7 +34,7 @@ Se puede usar [material.io/tools/icons](https://material.io/tools/icons/?style=b
- [`delete`](https://material.io/tools/icons/?icon=delete&style=baseline) está disponible como `@material-ui/icons/Delete`
- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) está disponible como `@material-ui/icons/DeleteForever`
-Para iconos con *"tema"*, adjunta el nombre del tema al nombre del icono. Por ejemplo
+For *"themed"* icons, append the theme name to the icon name. For instance with the
- El icono [`delete`](https://material.io/tools/icons/?icon=delete&style=outline) Outlined (contorneado) está disponible como `@material-ui/icons/DeleteOutlined`
- El icono [`delete`](https://material.io/tools/icons/?icon=delete&style=rounded) Rounded (redondeado) está disponible como `@material-ui/icons/DeleteRounded`
@@ -78,7 +78,7 @@ El componente `Icon` mostrará iconos de cualquier fuente compatible con ligadur
+
@@ -135,7 +138,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
### Iconos de Fuente Decorativos
-Si los iconos necesitados son puramente decorativos, ¡ya está hecho! Agregamos el atributo `aria-hidden=true` para que los iconos sean debidamente accesibles (invisibles).
+If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
### Iconos de Fuente Semánticos
diff --git a/docs/src/pages/components/icons/icons-fr.md b/docs/src/pages/components/icons/icons-fr.md
index 29dc827d53d537..6e7c029268927e 100644
--- a/docs/src/pages/components/icons/icons-fr.md
+++ b/docs/src/pages/components/icons/icons-fr.md
@@ -34,7 +34,7 @@ Vous pouvez utiliser [material.io/tools/icons](https://material.io/tools/icons/?
- [`delete`](https://material.io/tools/icons/?icon=delete&style=baseline) est exposé en tant que `@material-ui/icons/Delete`
- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) est exposé en tant que `@material-ui/icons/DeleteForever`
-Pour des icônes* "à thème"*, ajoutez le nom du thème au nom de l'icône. Par exemple avec le
+For *"themed"* icons, append the theme name to the icon name. For instance with the
- L'icône avec contour [`Delete`](https://material.io/tools/icons/?icon=delete&style=outline) est exposée comme `@material-ui /icons/DeleteOutlined`
- L'icône Arrondi [`delete`](https://material.io/tools/icons/?icon=delete&style=rounded) est exposée sous la forme `@ material-ui/icons /DeleteRounded`
@@ -78,7 +78,7 @@ Le composant `Icon` affichera une icône à partir de toute police d’icône pr
+
@@ -135,7 +138,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
### Icônes de polices décoratives
-Si vos icônes sont purement décoratives, vous avez déjà terminé! Nous ajoutons l'attribut `aria-hidden = true` pour que vos icônes soient correctement accessibles (invisibles).
+If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
### Icônes de polices sémantiques
diff --git a/docs/src/pages/components/icons/icons-ja.md b/docs/src/pages/components/icons/icons-ja.md
index 891e2af43bac41..e0fc872fb3edea 100644
--- a/docs/src/pages/components/icons/icons-ja.md
+++ b/docs/src/pages/components/icons/icons-ja.md
@@ -34,7 +34,7 @@ Material-UIは、System iconsをレンダリングするための2つのコン
- [` delete `](https://material.io/tools/icons/?icon=delete&style=baseline) は `@material-ui/icons/Delete`として公開されています。
- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) は `@material-ui/icons/DeleteForever`として公開されます。
-*"themed"* アイコンの場合は、アイコン名にテーマ名を追加します。例えば
+For *"themed"* icons, append the theme name to the icon name. For instance with the
- Outlined [ ` delete ` ](https://material.io/tools/icons/?icon=delete&style=outline)アイコンは`@material-ui/icons/DeleteOutlined`
- The Rounded [`delete`](https://material.io/tools/icons/?icon=delete&style=rounded)アイコンは`@material-ui/icons/DeleteRounded`
@@ -78,7 +78,7 @@ import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';
+
@@ -135,7 +138,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
### Decorative Font Icons
-アイコンが純粋に装飾的であれば、すでにあります！ アイコンが適切にアクセスできるようにするために`aria-hidden=true`属性を追加しました。
+If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
### Semantic Font Icons
diff --git a/docs/src/pages/components/icons/icons-pt.md b/docs/src/pages/components/icons/icons-pt.md
index 5636e7a3f27ae5..93c0c07b223c25 100644
--- a/docs/src/pages/components/icons/icons-pt.md
+++ b/docs/src/pages/components/icons/icons-pt.md
@@ -34,7 +34,7 @@ Você pode usar [material.io/tools/icons](https://material.io/tools/icons/?style
- [`delete`](https://material.io/tools/icons/?icon=delete&style=baseline) é exposto como `@material-ui/icons/Delete`
- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) é exposto como `@material-ui/icons/DeleteForever`
-Para ícones baseados em tema (*"themed"*), acrescente o nome do tema ao nome do ícone. Por exemplo, com o
+Para ícones *"temáticos"*, acrescente o nome do tema ao nome do ícone. Por exemplo, com o
- O ícone [`delete`](https://material.io/tools/icons/?icon=delete&style=outline) delineado é exposto como `@material-ui/icons/DeleteOutlined`
- O ícone [`delete`](https://material.io/tools/icons/?icon=delete&style=rounded) arredondado é exposto como `@material-ui/icons/DeleteRounded`
@@ -78,7 +78,7 @@ O componente `Icon` exibirá um ícone de qualquer fonte de ícone que suporte l
+
@@ -135,7 +138,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
### Ícones de Fonte Decorativos
-Se seus ícone são puramente decorativos, você já terminou! Adicionamos o atributo `aria-hidden=true` para que seus ícones sejam devidamente acessíveis (invisíveis).
+Se seus ícones são puramente decorativos, você já terminou! Adicionamos o atributo `aria-hidden=true` para que seus ícones estejam adequadamente acessíveis (invisíveis).
### Ícones de Fonte Semânticos
diff --git a/docs/src/pages/components/icons/icons-ru.md b/docs/src/pages/components/icons/icons-ru.md
index 767975ea8c3ca5..88c3148f9a0e9d 100644
--- a/docs/src/pages/components/icons/icons-ru.md
+++ b/docs/src/pages/components/icons/icons-ru.md
@@ -34,7 +34,7 @@ Material-UI предоставляет два компонента для ото
- [`delete`](https://material.io/tools/icons/?icon=delete&style=baseline) представлена как `@material-ui/icons/Delete`
- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) представлена как `@material-ui/icons/DeleteForever`
-Для *"тематических"* иконок к названию иконки добавляется имя темы. Например
+For *"themed"* icons, append the theme name to the icon name. For instance with the
- Иконка [`delete`](https://material.io/tools/icons/?icon=delete&style=outline) в теме Outlined представлена как `@material-ui/icons/DeleteOutlined`
- Иконка [`delete`](https://material.io/tools/icons/?icon=delete&style=rounded) в теме Rounded представлена как `@material-ui/icons/DeleteRounded`
@@ -78,7 +78,7 @@ import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';
+
@@ -135,7 +138,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
### Декоративные шрифтовые иконки
-Если у вас чисто декоративные иконки, почти всё уже готово! Добавим атрибут `aria-hidden=true` для правильной настройки их доступности (невидимость).
+If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
### Семантические шрифтовые иконки
diff --git a/docs/src/pages/components/icons/icons-zh.md b/docs/src/pages/components/icons/icons-zh.md
index ad799e6c157a0a..fe5c559dbbdd89 100644
--- a/docs/src/pages/components/icons/icons-zh.md
+++ b/docs/src/pages/components/icons/icons-zh.md
@@ -34,7 +34,7 @@ Material-UI 提供了两个组件来渲染系统图标：`SvgIcon` 来渲染 SVG
- [`delete`](https://material.io/tools/icons/?icon=delete&style=baseline) 暴露为 `@material-ui/icons/Delete`
- [`delete forever`](https://material.io/tools/icons/?icon=delete_forever&style=baseline) 暴露为 `@material-ui/icons/DeleteForever`
-对于那些 *"被主题修饰过"* 的图标，您在图标名称后面加上主题名。 例如：
+对于*“主题化”*图标，是将主题名附加到图标名称后面。 For instance with the
- 描边的 [`delete`](https://material.io/tools/icons/?icon=delete&style=outline) 图标由 `@material-ui/icons/DeleteOutlined` 暴露
- 圆角的 [`delete`](https://material.io/tools/icons/?icon=delete&style=rounded) 图标由 `@material-ui/icons/DeleteRounded` 暴露
@@ -78,7 +78,7 @@ import { AccessAlarm, ThreeDRotation } from '@material-ui/icons';
+
@@ -135,7 +138,7 @@ import SvgIcon from '@material-ui/core/SvgIcon';
### 装饰形的字体图标
-如果您的图标纯粹是装饰性的，那么您已经完成了！ 我们添加 `aria-hidden=true` 属性，以便您的图标可以正常访问（不可见）。
+If your icons are purely decorative, you’re already done! We add the `aria-hidden=true` attribute so that your icons are properly accessible (invisible).
### 语义字体图标
diff --git a/docs/src/pages/components/links/links-ja.md b/docs/src/pages/components/links/links-ja.md
index 88191125b97e07..9cf9ad63297c1e 100644
--- a/docs/src/pages/components/links/links-ja.md
+++ b/docs/src/pages/components/links/links-ja.md
@@ -38,4 +38,4 @@ One common use case is to perform the navigation on the client only, without doi
{{"demo": "pages/components/links/LinkRouter.js", "defaultCodeOpen": true}}
-*Note: Creating the Link components is necessary to prevent unexpected unmounting. You can read more about it in our [component property guide](/guides/composition/#component-property).*
\ No newline at end of file
+*Note: Creating the Link components is necessary to prevent unexpected unmounting. 詳細については、コンポーネント・プロパティー・ガイド を参照してください。*
\ No newline at end of file
diff --git a/docs/src/pages/components/links/links-zh.md b/docs/src/pages/components/links/links-zh.md
index 9a30e67f9be4d4..a430e60a53bdcd 100644
--- a/docs/src/pages/components/links/links-zh.md
+++ b/docs/src/pages/components/links/links-zh.md
@@ -17,7 +17,7 @@ However, the Link component has different default properties than the Typography
- 当链接需要突出显示，使用 `color="primary"`
- `variant="inherit"` as the link will, most of the time, be used as a child of a Typography component.
-## 无障碍功能
+## 无障碍设计
- 当提供链接对应的内容时，避免使用泛泛的描述，比如“点击这里”或“跳转”之类的词语 相反的，请使用 [具体详细的描述](https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text)说明.
- For the best user experience, links should stand out from the text on the page.
diff --git a/docs/src/pages/components/lists/lists-de.md b/docs/src/pages/components/lists/lists-de.md
index bcde0ff59b54e6..bbf5d44bbd6ec3 100644
--- a/docs/src/pages/components/lists/lists-de.md
+++ b/docs/src/pages/components/lists/lists-de.md
@@ -59,7 +59,7 @@ Sie sollten die Ausrichtung der Listenelemente ändern, wenn Sie 3 Zeilen oder m
Eine Checkbox kann entweder eine primäre oder eine sekundäre Aktion sein.
-Die Checkbox ist die Hauptaktion und das Zustandskennzeichen für das Listenelement. Die Kommentarschaltfläche ist eine sekundäre Aktion und ein separates Ziel.
+The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target.
{{"demo": "pages/components/lists/CheckboxList.js"}}
diff --git a/docs/src/pages/components/lists/lists-es.md b/docs/src/pages/components/lists/lists-es.md
index 66a1c11866ce57..2a9f587e0466f9 100644
--- a/docs/src/pages/components/lists/lists-es.md
+++ b/docs/src/pages/components/lists/lists-es.md
@@ -59,7 +59,7 @@ Debería cambiar la alineación del list item cuando se muestran 3 o más línea
Un checkbox puede ser una acción primaria o una acción secundaria.
-El checkbox es la acción principal y el indicador de estado para el elemento de la lista. El botón de comentario es una acción secundaria y un objetivo separado.
+The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target.
{{"demo": "pages/components/lists/CheckboxList.js"}}
diff --git a/docs/src/pages/components/lists/lists-fr.md b/docs/src/pages/components/lists/lists-fr.md
index e69274a8824ea0..3f785789e81757 100644
--- a/docs/src/pages/components/lists/lists-fr.md
+++ b/docs/src/pages/components/lists/lists-fr.md
@@ -59,7 +59,7 @@ Vous devez modifier l'alignement des éléments de la liste lorsque vous affiche
Une case à cocher peut être une action principale ou secondaire.
-La case à cocher est l'action principale et l'indicateur d'état pour l'élément de liste. Le bouton de commentaire est une action secondaire et une cible distincte.
+The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target.
{{"demo": "pages/components/lists/CheckboxList.js"}}
diff --git a/docs/src/pages/components/lists/lists-ja.md b/docs/src/pages/components/lists/lists-ja.md
index 3135040e7443df..01441194bd4025 100644
--- a/docs/src/pages/components/lists/lists-ja.md
+++ b/docs/src/pages/components/lists/lists-ja.md
@@ -59,7 +59,7 @@ function ListItemLink(props) {
Checkboxは、主要なアクションまたは補助的なアクションのどちらかになります。
-Checkboxは、Listの項目の主要なアクションであり状態を表します。コメントボタンは補助的なアクションであり別のターゲットになります。
+The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target.
{{"demo": "pages/components/lists/CheckboxList.js"}}
diff --git a/docs/src/pages/components/lists/lists-pt.md b/docs/src/pages/components/lists/lists-pt.md
index f024a65ff03d1f..ba2482a79681e9 100644
--- a/docs/src/pages/components/lists/lists-pt.md
+++ b/docs/src/pages/components/lists/lists-pt.md
@@ -59,7 +59,7 @@ Você deve alterar o alinhamento do item da lista ao exibir 3 linhas ou mais, al
Uma caixa de seleção pode ser uma ação primária ou uma ação secundária.
-A caixa de seleção é a ação primária e o indicador de estado para o item da lista. O botão comentário é uma ação secundária separada.
+A caixa de seleção é a ação principal e o indicador de estado para o item da lista. O botão de comentário é uma ação secundária e um destino separado.
{{"demo": "pages/components/lists/CheckboxList.js"}}
diff --git a/docs/src/pages/components/lists/lists-ru.md b/docs/src/pages/components/lists/lists-ru.md
index 60675245edea84..e12e737e71914c 100644
--- a/docs/src/pages/components/lists/lists-ru.md
+++ b/docs/src/pages/components/lists/lists-ru.md
@@ -59,7 +59,7 @@ function ListItemLink(props) {
Checkbox может быть основным или второстепенным действием.
-В этом примере checkbox является основным действием и индикатором состояния для элемента списка. Кнопка комментария является второстепенным действием.
+The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target.
{{"demo": "pages/components/lists/CheckboxList.js"}}
diff --git a/docs/src/pages/components/lists/lists-zh.md b/docs/src/pages/components/lists/lists-zh.md
index c33d593d8487a4..75dde3fc0f0150 100644
--- a/docs/src/pages/components/lists/lists-zh.md
+++ b/docs/src/pages/components/lists/lists-zh.md
@@ -59,7 +59,7 @@ function ListItemLink(props) {
一个选择框既可以是主操作，又可以是辅助操作。
-该复选框是列表项的主要操作和状态指示器。 注释按钮是辅助操作和单独的目标。
+The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target.
{{"demo": "pages/components/lists/CheckboxList.js"}}
diff --git a/docs/src/pages/components/menus/menus-de.md b/docs/src/pages/components/menus/menus-de.md
index 017106bb358014..c8ecccabccffce 100644
--- a/docs/src/pages/components/menus/menus-de.md
+++ b/docs/src/pages/components/menus/menus-de.md
@@ -7,7 +7,7 @@ components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper
Menüs zeigen eine Liste von Auswahlmöglichkeiten auf temporären Oberflächen an.
-Ein [Menü](https://material.io/design/components/menus.html) zeigt eine Liste mit Auswahlmöglichkeiten auf einer temporären Oberfläche. Es wird angezeigt, wenn der Benutzer mit einer Schaltfläche, einer Aktion oder einem anderen Steuerelement interagieren.
+A [Menu](https://material.io/design/components/menus.html) displays a list of choices on a temporary surface. It appears when the user interacts with a button, or other control.
## Einfaches Menü
@@ -39,7 +39,7 @@ Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf de
{{"demo": "pages/components/menus/CustomizedMenus.js"}}
-Das `MenuItem` ist ein Wrapper um ein `ListItem` mit einigen zusätzlichen Stilen. Sie können dieselben Listenkompositionsfunktionen mit der `MenuItem` Komponente verwenden:
+The `MenuItem` is a wrapper around `ListItem` with some additional styles. You can use the same list composition features with the `MenuItem` component:
## Maximale-Höhe Menüs
diff --git a/docs/src/pages/components/menus/menus-es.md b/docs/src/pages/components/menus/menus-es.md
index 4d5ac798ddc39a..48ba87b1ff1e4d 100644
--- a/docs/src/pages/components/menus/menus-es.md
+++ b/docs/src/pages/components/menus/menus-es.md
@@ -39,7 +39,7 @@ Here is an example of customizing the component. You can learn more about this i
{{"demo": "pages/components/menus/CustomizedMenus.js"}}
-El `MenuItem` es una envoltura alrededor de `ListItem` con algunos estilos adicionales. Puedes usar las mismas características de composición con el componente `MenuItem`:
+The `MenuItem` is a wrapper around `ListItem` with some additional styles. You can use the same list composition features with the `MenuItem` component:
## Menús de altura máxima
diff --git a/docs/src/pages/components/menus/menus-fr.md b/docs/src/pages/components/menus/menus-fr.md
index 3e8eeba07cc8bd..892163a0d69353 100644
--- a/docs/src/pages/components/menus/menus-fr.md
+++ b/docs/src/pages/components/menus/menus-fr.md
@@ -7,11 +7,11 @@ components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper
Les menus affichent une liste de choix sur des surfaces temporaires.
-A [Menu](https://material.io/design/components/menus.html) displays a list of choices on a temporary surface. It appears when the user interacts with a button, or other control.
+Un [Menu](https://material.io/design/components/menus.html) affiche une liste de choix sur une surface temporaire. Il apparaît lorsque l'utilisateur interagit avec un bouton ou un autre contrôle.
## Menu simple
-Les menus simples s'ouvrent par défaut sur l'élément d'ancrage (cette option peut être modifiée via les propriétés). When close to a screen edge, simple menus vertically realign to make sure that all menu items are completely visible.
+Les menus simples s'ouvrent par défaut sur l'élément d'ancrage (cette option peut être modifiée via les propriétés). Lorsqu'ils sont près du bord de l'écran, les menus simples se réalignent verticalement afin que tous les éléments du menu soient visibles.
Le choix d'une option doit idéalement être validé immédiatement et fermer le menu.
@@ -39,7 +39,7 @@ Here is an example of customizing the component. You can learn more about this i
{{"demo": "pages/components/menus/CustomizedMenus.js"}}
-Le `MenuItem` est un wrapper autour de `ListItem` avec quelques styles supplémentaires. Vous pouvez utiliser les mêmes fonctionnalités de composition de liste avec le composant `MenuItem`:
+The `MenuItem` is a wrapper around `ListItem` with some additional styles. You can use the same list composition features with the `MenuItem` component:
## Hauteur maximale des menus
@@ -53,7 +53,7 @@ There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=3
{{"demo": "pages/components/menus/TypographyMenu.js"}}
-## Change transition
+## Changer la transition
Utilisez une transition différente.
diff --git a/docs/src/pages/components/menus/menus-ja.md b/docs/src/pages/components/menus/menus-ja.md
index 2d3f826e85a6be..a5c26b04aac4ec 100644
--- a/docs/src/pages/components/menus/menus-ja.md
+++ b/docs/src/pages/components/menus/menus-ja.md
@@ -35,7 +35,7 @@ The primary responsibility of the `MenuList` component is to handle the focus.
## Customized menus
-コンポーネントのカスタマイズ例をいくつか示します。あなたは[上書きドキュメントのページ](/customization/components/)でこれについてもっと詳しく知ることができます。
+コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/menus/CustomizedMenus.js"}}
@@ -61,7 +61,7 @@ Use a different transition.
## Complementary projects
-For more advanced use cases you might be able to take advantage of:
+より高度なユースケースのためにあなたは利用することができるかもしれません：
### PopupState helper
diff --git a/docs/src/pages/components/menus/menus-pt.md b/docs/src/pages/components/menus/menus-pt.md
index 18a1b0ef561670..d07bbd149f720f 100644
--- a/docs/src/pages/components/menus/menus-pt.md
+++ b/docs/src/pages/components/menus/menus-pt.md
@@ -7,7 +7,7 @@ components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper
Os menus exibem uma lista de opções em superfícies temporárias.
-Um [Menu](https://material.io/design/components/menus.html) exibe uma lista de opções em uma superfície temporária. Elas aparecem quando os usuários interagem com um botão, ou outro controle.
+O [Menu](https://material.io/design/components/menus.html) exibe uma lista de opções em uma superfície temporária. Aparece quando o usuário interage com um botão ou outro controle.
## Menu simples
@@ -36,11 +36,11 @@ A principal responsabilidade do componente `MenuList` é manipular o foco.
## Menus Customizados
-Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescrita](/customization/components/).
+Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
{{"demo": "pages/components/menus/CustomizedMenus.js"}}
-O `MenuItem` é um wrapper em torno do `ListItem` com alguns estilos adicionais. Você pode usar os mesmos recursod de composição de lista com o componente `MenuItem`:
+O `MenuItem` é um encapsulador em torno de `ListItem` com alguns estilos adicionais. Você pode usar os mesmos recursos de composição de lista com o componente `MenuItem`:
## Altura máxima dos menus
@@ -62,7 +62,7 @@ Use uma transição diferente.
## Projetos Complementares
-Para usos mais avançados, você pode tirar vantagem com:
+Para casos de uso mais avançados, você pode tirar proveito de:
### PopupState helper
diff --git a/docs/src/pages/components/menus/menus-ru.md b/docs/src/pages/components/menus/menus-ru.md
index 0603ce5ee11bc6..ccd4428e2bd1bc 100644
--- a/docs/src/pages/components/menus/menus-ru.md
+++ b/docs/src/pages/components/menus/menus-ru.md
@@ -39,7 +39,7 @@ Here is an example of customizing the component. You can learn more about this i
{{"demo": "pages/components/menus/CustomizedMenus.js"}}
-`MenuItem` является оберткой `ListItem` с некоторыми дополнительными стилями. С компонентом `MenuItem` можно использовать те же приемы композиции списка:
+The `MenuItem` is a wrapper around `ListItem` with some additional styles. You can use the same list composition features with the `MenuItem` component:
## Max height menus
diff --git a/docs/src/pages/components/menus/menus-zh.md b/docs/src/pages/components/menus/menus-zh.md
index 094fff0b478aae..6c67f2a542022e 100644
--- a/docs/src/pages/components/menus/menus-zh.md
+++ b/docs/src/pages/components/menus/menus-zh.md
@@ -7,7 +7,7 @@ components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper
菜单在临时出现的位置上展示一系列的选项列表。
-一个[菜单](https://material.io/design/components/menus.html)在临时的界面上列出了一系列的选项。当用户和按钮，或其他控件交互的时候，菜单会再次出现。
+A [Menu](https://material.io/design/components/menus.html) displays a list of choices on a temporary surface. It appears when the user interacts with a button, or other control.
## 简单菜单
@@ -35,11 +35,11 @@ components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper
## 自定义菜单
-以下是自定义组件的一个示例。您可以在[重写文档页面](/customization/components/)中了解有关此内容的更多信息。
+以下是自定义组件的一个示例。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/menus/CustomizedMenus.js"}}
-`MenuItem` 实际上是在 `ListItem` 之上增加了一些样式的封装。 因此你可以使用和 `MenuItem` 组件相同的列表组合特性：
+The `MenuItem` is a wrapper around `ListItem` with some additional styles. You can use the same list composition features with the `MenuItem` component:
## 限高菜单
diff --git a/docs/src/pages/components/modal/modal-de.md b/docs/src/pages/components/modal/modal-de.md
index a6adb2c3faf900..45c7e5614a3b3f 100644
--- a/docs/src/pages/components/modal/modal-de.md
+++ b/docs/src/pages/components/modal/modal-de.md
@@ -7,14 +7,14 @@ components: Modal
Die modale Komponente bietet eine solide Grundlage für das Erstellen von Dialogen, Popovers, Leuchtkästen oder anderen Elementen.
-Die Komponente rendert den Knoten `children` vor einer Hintergrundkomponente. Der `Modal` bietet wichtige Funktionen:
+Die Komponente rendered seine `Kinder` - Knoten vor einer Hintergrund - Komponente. The `Modal` offers important features:
--
--
--
+- 💄 Verwaltet modales Stacking, wenn eins zu einem Zeitpunkt nicht ausreicht.
+- 🔐 Erstellt einen Hintergrund zum Deaktivieren der Interaktion unter dem Modal.
+- 🔐 Es deaktiviert das Blättern des Seiteninhalts, während es geöffnet ist.
- ♿️ Der Fokus wird richtig verwaltet. Wechseln des Fokus zum modalen Inhalt und diesen halten belassen, bis der Modal geschlossen ist.
- ♿️ Fügt die entsprechenden ARIA-Rollen automatisch hinzu.
--
+- 📦 [5 kB gzipped](/size-snapshot).
> **Terminologieanmerkung**. Der Begriff "modal" bedeutet manchmal "Dialog", aber das ist eine Fehlbezeichnung. Ein modales Fenster beschreibt Teile einer Benutzeroberfläche. Ein Element wird als modal betrachtet, wenn es [die Interaktion mit dem Rest der Anwendung blockiert](https://en.wikipedia.org/wiki/Modal_window).
@@ -29,11 +29,13 @@ Wenn Sie ein modales Dialogfeld erstellen, möchten Sie wahrscheinlich die [Dial
{{"demo": "pages/components/modal/SimpleModal.js"}}
+Notice that you can disable the outline (often blue or gold) with the `outline: 0` CSS property.
+
## Performance
-Der Inhalt des Modals wird **lazily eingehangen** im DOM. Dadurch wird sichergestellt, dass viele geschlossene Modale in Ihrem React-Baum Ihre Seite nicht verlangsamen.
+The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modals in your React tree won't slow down your page.
-Das Erstellen von React-Elementen ist jedoch ebenfalls mit Kosten verbunden. Betrachten Sie den folgenden Fall:
+However, creating React elements has a cost too. Consider the following case:
```jsx
@@ -60,7 +62,7 @@ Das Erstellen von React-Elementen ist jedoch ebenfalls mit Kosten verbunden. Bet
```
-We create a lot of React elements that will never be mounted. It's wasteful
+We create a lot of React elements that will never be mounted. It's wasteful 🐢. You can **speed up** the rendering by moving the modal body into its own component.
```jsx
@@ -76,16 +78,22 @@ Auf diese Weise nutzen Sie [React Rendering Laziness Evaluation](https://overrea
```jsx
My Title
-
+
My Description
```
-- Mit den [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) können Sie den anfänglichen Fokus auf das relevanteste Element setzen, basierend auf Ihrem modalen Inhalt.
\ No newline at end of file
+- Mit den [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) können Sie den anfänglichen Fokus auf das relevanteste Element setzen, basierend auf Ihrem modalen Inhalt.
+
+## Server-side modal
+
+React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://reactjs.org/docs/portals.html) API on the server. In order to make it work, you need to disable this feature with the `disablePortal` prop:
+
+{{"demo": "pages/components/modal/ServerModal.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/modal/modal-es.md b/docs/src/pages/components/modal/modal-es.md
index 60f6321064ef0a..9a787bbb5f38a1 100644
--- a/docs/src/pages/components/modal/modal-es.md
+++ b/docs/src/pages/components/modal/modal-es.md
@@ -9,12 +9,12 @@ components: Modal
The component renders its `children` node in front of a backdrop component. The `Modal` offers important features:
--
--
--
+- 💄 Manages modal stacking when one-at-a-time just isn't enough.
+- 🔐 Creates a backdrop, for disabling interaction below the modal.
+- 🔐 It disables scrolling of the page content while open.
- ♿️ It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.
- ♿️ Adds the appropriate ARIA roles automatically.
--
+- 📦 [5 kB gzipped](/size-snapshot).
> **Terminology note**. The term "modal" is sometimes used to mean "dialog", but this is a misnomer. A Modal window describes parts of a UI. An element is considered modal if [it blocks interaction with the rest of the application](https://en.wikipedia.org/wiki/Modal_window).
@@ -29,9 +29,11 @@ If you are creating a modal dialog, you probably want to use the [Dialog](/compo
{{"demo": "pages/components/modal/SimpleModal.js"}}
+Notice that you can disable the outline (often blue or gold) with the `outline: 0` CSS property.
+
## Rendimiento
-The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modal in your React tree won't slow down your page.
+The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modals in your React tree won't slow down your page.
However, creating React elements has a cost too. Consider the following case:
@@ -60,7 +62,7 @@ However, creating React elements has a cost too. Consider the following case:
```
-We create a lot of React elements that will never be mounted. It's wasteful
+We create a lot of React elements that will never be mounted. It's wasteful 🐢. You can **speed up** the rendering by moving the modal body into its own component.
```jsx
@@ -76,16 +78,22 @@ This way, you take advantage of [React render laziness evaluation](https://overr
```jsx
My Title
-
+
My Description
```
-- The [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) can help you set the initial focus on the most relevant element, based on your modal content.
\ No newline at end of file
+- The [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) can help you set the initial focus on the most relevant element, based on your modal content.
+
+## Server-side modal
+
+React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://reactjs.org/docs/portals.html) API on the server. In order to make it work, you need to disable this feature with the `disablePortal` prop:
+
+{{"demo": "pages/components/modal/ServerModal.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/modal/modal-fr.md b/docs/src/pages/components/modal/modal-fr.md
index b68c51868082a4..8fe22e79d69e2f 100644
--- a/docs/src/pages/components/modal/modal-fr.md
+++ b/docs/src/pages/components/modal/modal-fr.md
@@ -7,14 +7,14 @@ components: Modal
Le composant modal fournit une base solide pour la création de boîtes de dialogue, de popovers, de lightboxes ou autres.
-The component renders its `children` node in front of a backdrop component. The `Modal` offers important features:
+Le composant affiche ses nœuds `children` devant un composant d'arrière-plan. The `Modal` offers important features:
--
--
--
+- 💄 Manages modal stacking when one-at-a-time just isn't enough.
+- 🔐 Creates a backdrop, for disabling interaction below the modal.
+- 🔐 It disables scrolling of the page content while open.
- ♿️ It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.
- ♿️ Adds the appropriate ARIA roles automatically.
--
+- 📦 [5 kB gzipped](/size-snapshot).
> **Note de terminologie**. Le terme "modal" est parfois utilisé pour signifier "dialogue", mais c'est un terme impropre. Une fenêtre modale décrit des parties d'une interface utilisateur. Un élément est considéré modal si [il bloque l'interaction avec le reste de l'application](https://en.wikipedia.org/wiki/Modal_window).
@@ -29,11 +29,13 @@ If you are creating a modal dialog, you probably want to use the [Dialog](/compo
{{"demo": "pages/components/modal/SimpleModal.js"}}
+Notice that you can disable the outline (often blue or gold) with the `outline: 0` CSS property.
+
## Performances
-The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modal in your React tree won't slow down your page.
+The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modals in your React tree won't slow down your page.
-Cependant, créer des éléments React a aussi un coût. Considérons le cas suivant:
+However, creating React elements has a cost too. Consider the following case:
```jsx
@@ -60,7 +62,7 @@ Cependant, créer des éléments React a aussi un coût. Considérons le cas sui
```
-We create a lot of React elements that will never be mounted. It's wasteful
+We create a lot of React elements that will never be mounted. It's wasteful 🐢. You can **speed up** the rendering by moving the modal body into its own component.
```jsx
@@ -76,16 +78,22 @@ This way, you take advantage of [React render laziness evaluation](https://overr
```jsx
My Title
-
+
My Description
```
-- The [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) can help you set the initial focus on the most relevant element, based on your modal content.
\ No newline at end of file
+- The [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) can help you set the initial focus on the most relevant element, based on your modal content.
+
+## Server-side modal
+
+React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://reactjs.org/docs/portals.html) API on the server. In order to make it work, you need to disable this feature with the `disablePortal` prop:
+
+{{"demo": "pages/components/modal/ServerModal.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/modal/modal-ja.md b/docs/src/pages/components/modal/modal-ja.md
index 4b3628d1d82ff2..8f496c5b460fe0 100644
--- a/docs/src/pages/components/modal/modal-ja.md
+++ b/docs/src/pages/components/modal/modal-ja.md
@@ -9,12 +9,12 @@ components: Modal
The component renders its `children` node in front of a backdrop component. The `Modal` offers important features:
--
--
--
+- 💄 Manages modal stacking when one-at-a-time just isn't enough.
+- 🔐 Creates a backdrop, for disabling interaction below the modal.
+- 🔐 It disables scrolling of the page content while open.
- ♿️ It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.
- ♿️ Adds the appropriate ARIA roles automatically.
--
+- [5 kB gzipped](/size-snapshot).
> **Terminology note**. The term "modal" is sometimes used to mean "dialog", but this is a misnomer. A Modal window describes parts of a UI. An element is considered modal if [it blocks interaction with the rest of the application](https://en.wikipedia.org/wiki/Modal_window).
@@ -29,9 +29,11 @@ If you are creating a modal dialog, you probably want to use the [Dialog](/compo
{{"demo": "pages/components/modal/SimpleModal.js"}}
-## Performance
+Notice that you can disable the outline (often blue or gold) with the `outline: 0` CSS property.
-The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modal in your React tree won't slow down your page.
+## パフォーマンス
+
+The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modals in your React tree won't slow down your page.
However, creating React elements has a cost too. Consider the following case:
@@ -60,7 +62,7 @@ However, creating React elements has a cost too. Consider the following case:
```
-We create a lot of React elements that will never be mounted. It's wasteful
+We create a lot of React elements that will never be mounted. It's wasteful 🐢. You can **speed up** the rendering by moving the modal body into its own component.
```jsx
@@ -76,16 +78,22 @@ This way, you take advantage of [React render laziness evaluation](https://overr
```jsx
My Title
-
+
My Description
```
-- The [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) can help you set the initial focus on the most relevant element, based on your modal content.
\ No newline at end of file
+- The [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) can help you set the initial focus on the most relevant element, based on your modal content.
+
+## Server-side modal
+
+React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://reactjs.org/docs/portals.html) API on the server. In order to make it work, you need to disable this feature with the `disablePortal` prop:
+
+{{"demo": "pages/components/modal/ServerModal.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/modal/modal-pt.md b/docs/src/pages/components/modal/modal-pt.md
index b9cc6a497bad87..ebf7ed38245a20 100644
--- a/docs/src/pages/components/modal/modal-pt.md
+++ b/docs/src/pages/components/modal/modal-pt.md
@@ -7,14 +7,14 @@ components: Modal
O componente modal fornece uma base sólida para criar diálogos, popovers, lightboxes ou qualquer outra coisa.
-O componente torna seus nós `children` na frente de um componente de plano de fundo. O `Modal` oferece recursos importantes:
+O componente renderiza o conteúdo de seu `children` sobre um componente backdrop. O `Modal` oferece recursos importantes:
--
--
--
+- 💄 Gerencia o empilhamento de chamadas um por vez não é suficiente.
+- 🔐 Cria um backdrop para desabilitar a interação abaixo do modal.
+- 🔐 Quando aberto, desabilita a rolagem da página.
- ♿️ Gerencia adequadamente o foco; movendo para o conteúdo modal, e mantendo-o lá até que o modal seja fechado.
- ♿️ Adiciona as funções ARIA apropriadas automaticamente.
--
+- 📦 [5 kB gzipped](/size-snapshot).
> **Nota sobre a terminologia**. O termo "modal" algumas vezes é usado com o sentido de "diálogo", mas isto é um equívoco. Uma janela Modal descreve partes de uma UI. Um elemento é considerado modal se [ele bloqueia interações com o resto da aplicação](https://en.wikipedia.org/wiki/Modal_window).
@@ -29,11 +29,13 @@ Se você está criando um diálogo Modal, você provavelmente quer usar o compon
{{"demo": "pages/components/modal/SimpleModal.js"}}
+Notice that you can disable the outline (often blue or gold) with the `outline: 0` CSS property.
+
## Performance
-O conteúdo dos modais são **montados lentamente** dentro do DOM. Isso garante que, mesmo tendo muitos modais fechados em sua árvore React, o carregamento da sua página não será afetado.
+O conteúdo do modal é **montado preguiçosamente** no DOM. Isso garante que ter muitos modais fechados na sua árvore React não atrapalha sua página.
-Porém, criar elementos React tem um preço também. Considere o caso a seguir:
+No entanto, a criação de elementos React também tem um custo. Considere o seguinte caso:
```jsx
@@ -60,7 +62,7 @@ Porém, criar elementos React tem um preço também. Considere o caso a seguir:
```
-Criamos muitos elementos React que nunca serão montados. É um desperdício 🐢. Você pode ** acelerar ** a renderização movendo o corpo do modal para seu próprio componente.
+Criamos muitos elementos React que nunca serão montados. É um desperdício 🐢. Você pode **acelerar** a renderização movendo o corpo do modal para seu próprio componente.
```jsx
@@ -76,16 +78,22 @@ Desta forma, você tem a vantagem do [React render laziness evaluation](https://
```jsx
- Meu título
+ My Title
-
- Minha descrição
+
+ My Description
```
-- O [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) pode ajudá-lo a definir o foco inicial no elemento mais relevante, com base no seu conteúdo modal.
\ No newline at end of file
+- O [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) pode ajudá-lo a definir o foco inicial no elemento mais relevante, com base no seu conteúdo modal.
+
+## Server-side modal
+
+React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://reactjs.org/docs/portals.html) API on the server. In order to make it work, you need to disable this feature with the `disablePortal` prop:
+
+{{"demo": "pages/components/modal/ServerModal.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/modal/modal-ru.md b/docs/src/pages/components/modal/modal-ru.md
index 51201ee9ce103d..44241a820eb5fd 100644
--- a/docs/src/pages/components/modal/modal-ru.md
+++ b/docs/src/pages/components/modal/modal-ru.md
@@ -9,12 +9,12 @@ components: Modal
The component renders its `children` node in front of a backdrop component. The `Modal` offers important features:
--
--
--
+- 💄 Manages modal stacking when one-at-a-time just isn't enough.
+- 🔐 Creates a backdrop, for disabling interaction below the modal.
+- 🔐 It disables scrolling of the page content while open.
- ♿️ It properly manages focus; moving to the modal content, and keeping it there until the modal is closed.
- ♿️ Adds the appropriate ARIA roles automatically.
--
+- 5 [1 кБ в сжатом виде](/size-snapshot).
> **примечание по терминологии**. Термин «modal» иногда используется для обозначения «dialog», но это неверно. Модальное окно описывает части UI. An element is considered modal if [it blocks interaction with the rest of the application](https://en.wikipedia.org/wiki/Modal_window).
@@ -29,9 +29,11 @@ If you are creating a modal dialog, you probably want to use the [Dialog](/compo
{{"demo": "pages/components/modal/SimpleModal.js"}}
+Notice that you can disable the outline (often blue or gold) with the `outline: 0` CSS property.
+
## Производительность
-The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modal in your React tree won't slow down your page.
+The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modals in your React tree won't slow down your page.
However, creating React elements has a cost too. Consider the following case:
@@ -60,7 +62,7 @@ However, creating React elements has a cost too. Consider the following case:
```
-We create a lot of React elements that will never be mounted. It's wasteful
+We create a lot of React elements that will never be mounted. It's wasteful 🐢. You can **speed up** the rendering by moving the modal body into its own component.
```jsx
@@ -76,16 +78,22 @@ We create a lot of React elements that will never be mounted. It's wasteful
```jsx
My Title
-
+
My Description
```
-- The [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) can help you set the initial focus on the most relevant element, based on your modal content.
\ No newline at end of file
+- The [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) can help you set the initial focus on the most relevant element, based on your modal content.
+
+## Server-side modal
+
+React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://reactjs.org/docs/portals.html) API on the server. In order to make it work, you need to disable this feature with the `disablePortal` prop:
+
+{{"demo": "pages/components/modal/ServerModal.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/modal/modal-zh.md b/docs/src/pages/components/modal/modal-zh.md
index 7d623a5dfdad72..ed47023fff2385 100644
--- a/docs/src/pages/components/modal/modal-zh.md
+++ b/docs/src/pages/components/modal/modal-zh.md
@@ -7,14 +7,14 @@ components: Modal
模态框组件可以用来快速创建对话框、弹出窗口，灯箱等任何你所需的组件。
-该组件在背景组件之上渲染其children节点, 并提供如下重要功能:
+组件会在背景组件前渲染其`children`节点。 The `Modal` offers important features:
--
--
--
+- 💄 Manages modal stacking when one-at-a-time just isn't enough.
+- 🔐 Creates a backdrop, for disabling interaction below the modal.
+- 🔐 It disables scrolling of the page content while open.
- ♿️它妥善管理焦点;移动到模态内容， 并保持它直到模态关闭。
- ♿️自动添加适当的ARIA角色。
--
+- 📦 [5 kB gzipped](/size-snapshot).
> **术语注释**。 “模态框”（Modal）这个词有时也被用来指代“对话框”，但是这种用法属于误用。 模态框的窗口可以描述用户界面的一部分。 如果一个元素[阻挡了用户与应用的其它部分的互动](https://en.wikipedia.org/wiki/Modal_window)，这个元素就是模态的。
@@ -29,11 +29,13 @@ components: Modal
{{"demo": "pages/components/modal/SimpleModal.js"}}
+Notice that you can disable the outline (often blue or gold) with the `outline: 0` CSS property.
+
## 性能
-模态框的内容是用 **延迟加载**的方式加载到DOM中的。 以此确保即使你的React树中有许多关闭的模态框， 你的页面速度也不会减慢。
+The content of the modal is **lazily mounted** into the DOM. It ensures that having many closed modals in your React tree won't slow down your page.
-然而， 创建一个React组件也会有成本。考虑一下以下的情况：
+However, creating React elements has a cost too. Consider the following case:
```jsx
@@ -60,7 +62,7 @@ components: Modal
```
-We create a lot of React elements that will never be mounted. It's wasteful
+We create a lot of React elements that will never be mounted. It's wasteful 🐢. You can **speed up** the rendering by moving the modal body into its own component.
```jsx
@@ -70,22 +72,28 @@ We create a lot of React elements that will never be mounted. It's wasteful
上面的代码利用了[React 懒加载](https://overreacted.io/react-as-a-ui-runtime/#lazy-evaluation)机制. 使得`TabComponent`的`render`方法只在模态框打开的时候才被执行.
-## 无障碍功能
+## 无障碍设计
- 记得用 `aria-labelledby="id..."` 属性来指向`Modal` 的标题. 另外, 你还可以使用 `aria-describedby="id..."` 属性来为 `Modal`增加描述.
```jsx
My Title
-
+
My Description
```
-- 这篇 [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) 里的方法可以根据你的模态窗口里的内容, 为最合适的元素设置初始焦点.
\ No newline at end of file
+- 这篇 [WAI-ARIA Authoring Practices 1.1](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) 里的方法可以根据你的模态窗口里的内容, 为最合适的元素设置初始焦点.
+
+## Server-side modal
+
+React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://reactjs.org/docs/portals.html) API on the server. In order to make it work, you need to disable this feature with the `disablePortal` prop:
+
+{{"demo": "pages/components/modal/ServerModal.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/no-ssr/no-ssr-de.md b/docs/src/pages/components/no-ssr/no-ssr-de.md
index 091f07e542f3ca..9447b75e30b4a8 100644
--- a/docs/src/pages/components/no-ssr/no-ssr-de.md
+++ b/docs/src/pages/components/no-ssr/no-ssr-de.md
@@ -21,7 +21,7 @@ Diese Komponente kann in verschiedenen Situationen nützlich sein:
## Rahmen Verzögerung
-Die Hauptaufgabe der NoSSR Komponente ist das **Verzögerte Rendern**. Wie in der vorherigen Demo veranschaulicht, können Sie damit das Rendern vom Server auf den Client verschieben.
+In it's core, the NoSsr component purpose is to **defer rendering**. As it's illustrated in the previous demo, you can use it to defer the rendering from the server to the client.
Sie können es aber auch verwenden, um das Rendern im Client selbst zu verschieben. Sie können **einen Frame** mit der `defer` Eigenschaft warten, um die Kinder zu erzeugen. React macht [2 commits](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) anstatt 1.
diff --git a/docs/src/pages/components/no-ssr/no-ssr-pt.md b/docs/src/pages/components/no-ssr/no-ssr-pt.md
index 205d45e1ca9583..10eb97249123b3 100644
--- a/docs/src/pages/components/no-ssr/no-ssr-pt.md
+++ b/docs/src/pages/components/no-ssr/no-ssr-pt.md
@@ -21,7 +21,7 @@ Esse componente pode ser útil em várias situações:
## Adiamento de quadros
-Em sua essência, o componente NoSsr tem a finalidade de **adiar a renderização**. Como é ilustrado na demonstração anterior, você pode usá-lo para adiar a renderização do servidor para o cliente.
+Em sua essência, o objetivo do componente NoSsr é **adiar a renderização**. Como está ilustrado na demonstração anterior, você pode usá-lo para adiar a renderização do servidor para o cliente.
Mas você também pode usá-lo para adiar a renderização dentro do próprio cliente. Você pode **aguardar um quadro de tela** com a propriedade `defer` para renderizar o children. React faz [2 commits](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) em vez de 1.
diff --git a/docs/src/pages/components/no-ssr/no-ssr-zh.md b/docs/src/pages/components/no-ssr/no-ssr-zh.md
index b40cdc5cd06c6c..d369c61cb4b6b1 100644
--- a/docs/src/pages/components/no-ssr/no-ssr-zh.md
+++ b/docs/src/pages/components/no-ssr/no-ssr-zh.md
@@ -3,7 +3,7 @@ title: 没有SSR React组件
components: NoSsr
---
-# 没有SSR
+# 没有 SSR
NoSsr故意从服务器端渲染（SSR）主题中删除组件。
@@ -21,7 +21,7 @@ components: NoSsr
## 帧推迟
-在它的核心，NoSsr组件的目的是 **延迟渲染**。 如上一个演示中所示，您可以使用它将渲染从服务器推迟到客户端。
+In it's core, the NoSsr component purpose is to **defer rendering**. As it's illustrated in the previous demo, you can use it to defer the rendering from the server to the client.
But you can also use it to defer the rendering within the client itself. You can **wait a screen frame** with the `defer` property to render the children. React does [2 commits](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) instead of 1.
diff --git a/docs/src/pages/components/pickers/pickers-de.md b/docs/src/pages/components/pickers/pickers-de.md
index da3cfe023932a3..ba42c7a9b10fae 100644
--- a/docs/src/pages/components/pickers/pickers-de.md
+++ b/docs/src/pages/components/pickers/pickers-de.md
@@ -1,22 +1,30 @@
---
-title: Date Picker, Time Picker React-Komponenten
+title: Date picker, Time picker React components
components: TextField
---
-# Date/Time inputs
+# Date/Time pickers
-Date/Time inputs (short: pickers) provide a simple way to select a single value from a pre-determined set.
+Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.
- Auf dem Handy sind Pcikers am besten für die Anzeige im Bestätigungsdialogfeld geeignet.
- Für die Inline-Anzeige, z. B. in einem Formular, sollten Sie kompakte Steuerelemente wie segmentierte Dropdown-Schaltflächen verwenden.
+## @material-ui/pickers
+
+ 
+
+[@material-ui/pickers](https://material-ui-pickers.dev/) provides date picker and time picker controls.
+
+{{"demo": "pages/components/pickers/MaterialUIPickers.js"}}
+
## Native Picker
-⚠️ Unterstützung von systemeigenen Eingabesteuerelementen durch Browser [ist nicht perfekt](https://caniuse.com/#feat=input-datetime). Sehen Sie sich die [ergänzenden Projekte](#complementary-projects) an, um weitere Lösungen zu erhalten.
+⚠️ Unterstützung von systemeigenen Eingabesteuerelementen durch Browser [ist nicht perfekt](https://caniuse.com/#feat=input-datetime). Have a look at [@material-ui/pickers](#material-ui-pickers) for a richer solution.
-### Datums-Auswahl
+### Datepickers
-Ein natives Datumsauswahlbeispiel mit `type="date"`.
+A native datepicker example with `type="date"`.
{{"demo": "pages/components/pickers/DatePickers.js"}}
@@ -30,16 +38,4 @@ Ein natives Datum & Zeitauswahlbeispiel mit `type="datetime-local"`.
Ein natives Datum Zeitauswahlbeispiel mit `type="time"`.
-{{"demo": "pages/components/pickers/TimePickers.js"}}
-
-## Ergänzende Projekte
-
-Für fortgeschrittenere Anwendungsfälle können Ihnen folgende Projekte helfen.
-
-### @material-ui/pickers
-
- 
-
-[@material-ui/pickers](https://material-ui-pickers.dev/) enthält Steuerelemente für Datum und Uhrzeit, die der Material Design-Spezifikation entsprechen.
-
-{{"demo": "pages/components/pickers/MaterialUIPickers.js"}}
\ No newline at end of file
+{{"demo": "pages/components/pickers/TimePickers.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/pickers/pickers-es.md b/docs/src/pages/components/pickers/pickers-es.md
index 04495a3a906388..057952b79e4c65 100644
--- a/docs/src/pages/components/pickers/pickers-es.md
+++ b/docs/src/pages/components/pickers/pickers-es.md
@@ -1,22 +1,30 @@
---
-title: Componentes React Selector de Fecha, Selector de Hora
+title: Date picker, Time picker React components
components: TextField
---
-# Date/Time inputs
+# Date/Time pickers
-Date/Time inputs (short: pickers) provide a simple way to select a single value from a pre-determined set.
+Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.
- En móvil, los selectores son los mas adecuados para despliegue en diálogos de confirmación.
- Para despliegue en línea, como en un formulario, considere usar controles compactos tales como los botones desplegables segmentados.
+## @material-ui/pickers
+
+ 
+
+[@material-ui/pickers](https://material-ui-pickers.dev/) provides date picker and time picker controls.
+
+{{"demo": "pages/components/pickers/MaterialUIPickers.js"}}
+
## Native pickers
-⚠️ Los controles de entrada nativos compatibles con los navegadores [no son perfectos](https://caniuse.com/#feat=input-datetime). Have a look at the [complementary projects](#complementary-projects) for a richer solution.
+⚠️ Los controles de entrada nativos compatibles con los navegadores [no son perfectos](https://caniuse.com/#feat=input-datetime). Have a look at [@material-ui/pickers](#material-ui-pickers) for a richer solution.
-### Selectores de fecha
+### Datepickers
-A native date picker example with `type="date"`.
+A native datepicker example with `type="date"`.
{{"demo": "pages/components/pickers/DatePickers.js"}}
@@ -30,16 +38,4 @@ Un ejemplo de selector de fecha y hora con `type="datetime-local"`.
Un ejemplo de un selector de hora nativo con `type="time"`.
-{{"demo": "pages/components/pickers/TimePickers.js"}}
-
-## Proyectos relacionados
-
-Para que puedas sacar ventaja de ellos en casos de uso más avanzados.
-
-### @material-ui/pickers
-
- 
-
-[@material-ui/pickers](https://material-ui-pickers.dev/) provides date and time controls that follow the Material Design spec.
-
-{{"demo": "pages/components/pickers/MaterialUIPickers.js"}}
\ No newline at end of file
+{{"demo": "pages/components/pickers/TimePickers.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/pickers/pickers-fr.md b/docs/src/pages/components/pickers/pickers-fr.md
index 9b36ad4afb484c..628222bcd54905 100644
--- a/docs/src/pages/components/pickers/pickers-fr.md
+++ b/docs/src/pages/components/pickers/pickers-fr.md
@@ -1,22 +1,30 @@
---
-title: Composant React pour les sélecteurs de date ou d'heure
+title: Date picker, Time picker React components
components: TextField
---
-# Date/Time inputs
+# Date/Time pickers
-Date/Time inputs (short: pickers) provide a simple way to select a single value from a pre-determined set.
+Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.
- Sur mobile, les sélecteurs conviennent mieux à l’affichage dans la boîte de dialogue de confirmation.
- Pour un affichage en ligne, par exemple sur un formulaire, envisagez d'utiliser des contrôles compacts tels que des boutons déroulants segmentés.
+## @material-ui/pickers
+
+ 
+
+[@material-ui/pickers](https://material-ui-pickers.dev/) provides date picker and time picker controls.
+
+{{"demo": "pages/components/pickers/MaterialUIPickers.js"}}
+
## Native pickers
-⚠️ La prise en charge des sélecteurs natifs par les navigateurs [n'est pas parfaite](https://caniuse.com/#feat=input-datetime). Have a look at the [complementary projects](#complementary-projects) for a richer solution.
+⚠️ La prise en charge des sélecteurs natifs par les navigateurs [n'est pas parfaite](https://caniuse.com/#feat=input-datetime). Have a look at [@material-ui/pickers](#material-ui-pickers) for a richer solution.
-### Sélecteurs de date
+### Datepickers
-A native date picker example with `type="date"`.
+A native datepicker example with `type="date"`.
{{"demo": "pages/components/pickers/DatePickers.js"}}
@@ -30,16 +38,4 @@ Exemple de sélecteur de date natif avec `type = "datetime-local"`.
Exemple de sélecteur de temps natif avec `type = "time"`.
-{{"demo": "pages/components/pickers/TimePickers.js"}}
-
-## Projets complémentaires
-
-Pour des cas d'utilisation plus avancés, vous pourrez peut-être tirer parti des avantages suivants.
-
-### @material-ui/pickers
-
- 
-
-[@material-ui/pickers](https://material-ui-pickers.dev/) provides date and time controls that follow the Material Design spec.
-
-{{"demo": "pages/components/pickers/MaterialUIPickers.js"}}
\ No newline at end of file
+{{"demo": "pages/components/pickers/TimePickers.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/pickers/pickers-ja.md b/docs/src/pages/components/pickers/pickers-ja.md
index e461a94a1d082a..ad3e1cd8249df1 100644
--- a/docs/src/pages/components/pickers/pickers-ja.md
+++ b/docs/src/pages/components/pickers/pickers-ja.md
@@ -1,22 +1,30 @@
---
-title: Date Picker, Time Picker React components
+title: Date picker, Time picker React components
components: TextField
---
-# Date/Time inputs
+# Date/Time pickers
-Date/Time inputs (short: pickers) provide a simple way to select a single value from a pre-determined set.
+Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.
- On mobile, pickers are best suited for display in confirmation dialog.
- For inline display, such as on a form, consider using compact controls such as segmented dropdown buttons.
+## @material-ui/pickers
+
+ 
+
+[@material-ui/pickers](https://material-ui-pickers.dev/) provides date picker and time picker controls.
+
+{{"demo": "pages/components/pickers/MaterialUIPickers.js"}}
+
## Native pickers
-⚠️ Native input controls support by browsers [isn't perfect](https://caniuse.com/#feat=input-datetime). Have a look at the [complementary projects](#complementary-projects) for a richer solution.
+⚠️ Native input controls support by browsers [isn't perfect](https://caniuse.com/#feat=input-datetime). Have a look at [@material-ui/pickers](#material-ui-pickers) for a richer solution.
-### Date pickers
+### Datepickers
-A native date picker example with `type="date"`.
+A native datepicker example with `type="date"`.
{{"demo": "pages/components/pickers/DatePickers.js"}}
@@ -30,16 +38,4 @@ A native date & time picker example with `type="datetime-local"`.
A native time picker example with `type="time"`.
-{{"demo": "pages/components/pickers/TimePickers.js"}}
-
-## Complementary projects
-
-For more advanced use cases you might be able to take advantage of.
-
-### @material-ui/pickers
-
- 
-
-[@material-ui/pickers](https://material-ui-pickers.dev/) provides date and time controls that follow the Material Design spec.
-
-{{"demo": "pages/components/pickers/MaterialUIPickers.js"}}
\ No newline at end of file
+{{"demo": "pages/components/pickers/TimePickers.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/pickers/pickers-pt.md b/docs/src/pages/components/pickers/pickers-pt.md
index 79c6ede836dba1..dc8bee62e42f75 100644
--- a/docs/src/pages/components/pickers/pickers-pt.md
+++ b/docs/src/pages/components/pickers/pickers-pt.md
@@ -1,22 +1,30 @@
---
-title: Componentes React para Seletor de Data e Seletor de Hora
+title: Date picker, Time picker React components
components: TextField
---
-# Entradas de data/hora
+# Date/Time pickers
-Entradas de data/hora (short: seletores) fornecem uma maneira simples de selecionar um único valor de um conjunto pré-determinado.
+Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.
- Em dispositivos móveis, seletores são melhores aplicados quando mostrados em diálogos de confirmação.
- Para exibição em linha, como em um formulário, considere usar controles compactos, como botões suspensos segmentados.
+## @material-ui/pickers
+
+ 
+
+[@material-ui/pickers](https://material-ui-pickers.dev/) provides date picker and time picker controls.
+
+{{"demo": "pages/components/pickers/MaterialUIPickers.js"}}
+
## Seletores nativos
-⚠️ O suporte dos navegadores aos controles de entrada nativos [não é perfeito](https://caniuse.com/#feat=input-datetime). Dê uma olhada nos [projetos complementares](#complementary-projects) para uma melhor solução.
+⚠️ O suporte dos navegadores aos controles de entrada nativos [não é perfeito](https://caniuse.com/#feat=input-datetime). Have a look at [@material-ui/pickers](#material-ui-pickers) for a richer solution.
-### Seletores de Data
+### Datepickers
-Um exemplo de seletor de data nativo com `type="date"`.
+A native datepicker example with `type="date"`.
{{"demo": "pages/components/pickers/DatePickers.js"}}
@@ -30,16 +38,4 @@ Um exemplo de seletor de data & hora nativo com `type="datetime-local"`.
Um exemplo de seletor de hora nativo com `type="time"`.
-{{"demo": "pages/components/pickers/TimePickers.js"}}
-
-## Projetos Complementares
-
-Para caso de usos mais avançados, você é capaz de aproveitar de.
-
-### @material-ui/pickers
-
- 
-
-[@material-ui/pickers](https://material-ui-pickers.dev/) fornece controles de data e hora que seguem as especificações do Material Design.
-
-{{"demo": "pages/components/pickers/MaterialUIPickers.js"}}
\ No newline at end of file
+{{"demo": "pages/components/pickers/TimePickers.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/pickers/pickers-ru.md b/docs/src/pages/components/pickers/pickers-ru.md
index cdd801754d2b56..3be10da7962fa5 100644
--- a/docs/src/pages/components/pickers/pickers-ru.md
+++ b/docs/src/pages/components/pickers/pickers-ru.md
@@ -1,22 +1,30 @@
---
-title: Date Picker, Time Picker React компоненты
+title: Date picker, Time picker React components
components: TextField
---
-# Date/Time inputs
+# Date/Time pickers
-Date/Time inputs (short: pickers) provide a simple way to select a single value from a pre-determined set.
+Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.
- На мобильном устройстве лучше всего отображать в модальном окне.
- Для инлайн-отображения, например в формах стоит рассмотреть возможность использования более компактных элементов управления, таких как сегментированные выпадающие кнопки.
+## @material-ui/pickers
+
+ 
+
+[@material-ui/pickers](https://material-ui-pickers.dev/) provides date picker and time picker controls.
+
+{{"demo": "pages/components/pickers/MaterialUIPickers.js"}}
+
## Native pickers
-⚠️ Поддержка нативных типов полей ввода [не идеальна](https://caniuse.com/#feat=input-datetime). Have a look at the [complementary projects](#complementary-projects) for a richer solution.
+⚠️ Поддержка нативных типов полей ввода [не идеальна](https://caniuse.com/#feat=input-datetime). Have a look at [@material-ui/pickers](#material-ui-pickers) for a richer solution.
-### Поля выбора даты
+### Datepickers
-A native date picker example with `type="date"`.
+A native datepicker example with `type="date"`.
{{"demo": "pages/components/pickers/DatePickers.js"}}
@@ -30,16 +38,4 @@ A native date picker example with `type="date"`.
Нативное поле выбора времени с помощью `type="time"`.
-{{"demo": "pages/components/pickers/TimePickers.js"}}
-
-## Дополнительные проекты
-
-Для более сложных вариантов использования вы можете воспользоваться.
-
-### @material-ui/pickers
-
- 
-
-[@material-ui/pickers](https://material-ui-pickers.dev/) provides date and time controls that follow the Material Design spec.
-
-{{"demo": "pages/components/pickers/MaterialUIPickers.js"}}
\ No newline at end of file
+{{"demo": "pages/components/pickers/TimePickers.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/pickers/pickers-zh.md b/docs/src/pages/components/pickers/pickers-zh.md
index 8a3a89767b3b8e..49dcb70a3c4a9c 100644
--- a/docs/src/pages/components/pickers/pickers-zh.md
+++ b/docs/src/pages/components/pickers/pickers-zh.md
@@ -1,45 +1,41 @@
---
-title: React Date Picker（日期选择器）和 Time Picker（时间选择器）组件
+title: Date picker, Time picker React components
components: TextField
---
-# Date/Time inputs
+# Date/Time pickers
-Date/Time inputs (short: pickers) provide a simple way to select a single value from a pre-determined set.
+Date pickers and Time pickers provide a simple way to select a single value from a pre-determined set.
- 在移动端，选择器最适合在确认对话框中展示。
- 对于内联显示（如在一个表单中），请考虑使用紧凑型控件，如分段下拉按钮。
+## @material-ui/pickers
+
+ 
+
+[@material-ui/pickers](https://material-ui-pickers.dev/) provides date picker and time picker controls.
+
+{{"demo": "pages/components/pickers/MaterialUIPickers.js"}}
+
## 原生的选择器
-⚠️ 浏览器原生输入控件[并不完美](https://caniuse.com/#feat=input-datetime)。 请参考[补充项目](#complementary-projects)来获得更丰富的解决方案。
+⚠️ 浏览器原生输入控件[并不完美](https://caniuse.com/#feat=input-datetime)。 Have a look at [@material-ui/pickers](#material-ui-pickers) for a richer solution.
-### Date pickers（日期选择器）
+### Datepickers
-这个例子通过 `type="time"` 而实现了原生的时间选择器。
+A native datepicker example with `type="date"`.
{{"demo": "pages/components/pickers/DatePickers.js"}}
### Date & Time pickers（日期和时间选择器）
-这个例子通过 `type="datetime-local"` 实现了原生的日期和时间选择器。
+一个原生的 `type="datetime-local"` 日期和时间选择器示例。
{{"demo": "pages/components/pickers/DateAndTimePickers.js"}}
### Time pickers（时间选择器）
-这个例子通过 `type="time"` 实现了原生的时间选择器。
-
-{{"demo": "pages/components/pickers/TimePickers.js"}}
-
-## 补充项目
-
-对于更高级的用例，您可以使用这些：
-
-### @material-ui/pickers
-
- 
-
-[@material-ui-pickers](https://material-ui-pickers.dev/) 提供遵循 Material Design 规范的日期和时间控件。
+一个原生的 `type="time"` 时间选择器示例 。
-{{"demo": "pages/components/pickers/MaterialUIPickers.js"}}
\ No newline at end of file
+{{"demo": "pages/components/pickers/TimePickers.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/popover/popover-fr.md b/docs/src/pages/components/popover/popover-fr.md
index 98179e2bd22118..5a1bb720e70b76 100644
--- a/docs/src/pages/components/popover/popover-fr.md
+++ b/docs/src/pages/components/popover/popover-fr.md
@@ -30,7 +30,7 @@ We demonstrate how to use the `Popover` component to implement a popover behavio
## Projets complémentaires
-Pour des cas d'utilisation plus avancés, vous pourrez peut-être tirer parti des projects suivants:
+Pour des cas d'utilisation plus avancés, vous pourrez peut-être tirer parti des avantages suivants:
### Assistant PopupState
diff --git a/docs/src/pages/components/popover/popover-ja.md b/docs/src/pages/components/popover/popover-ja.md
index d146928bcc366b..7d96ceacc82c8b 100644
--- a/docs/src/pages/components/popover/popover-ja.md
+++ b/docs/src/pages/components/popover/popover-ja.md
@@ -30,7 +30,7 @@ We demonstrate how to use the `Popover` component to implement a popover behavio
## Complementary projects
-For more advanced use cases you might be able to take advantage of:
+より高度なユースケースのためにあなたは利用することができるかもしれません：
### PopupState helper
diff --git a/docs/src/pages/components/popper/popper-de.md b/docs/src/pages/components/popper/popper-de.md
index 1822be27232629..505f8558798ece 100644
--- a/docs/src/pages/components/popper/popper-de.md
+++ b/docs/src/pages/components/popper/popper-de.md
@@ -5,15 +5,15 @@ components: Popper
# Popper
-Mit einem Popper können Inhalte übereinander angezeigt werden. Es ist eine Alternative zum React-Popper.
+A Popper can be used to display some content on top of another. It's an alternative to react-popper.
Einige wichtige Funktionen der `Popper` Komponente:
--
--
--
-- Das untergeordnete Element des Hauptteils des Dokuments ist ein [`Portal`](/components/portal/), um Probleme beim Rendern zu vermeiden. Sie können dieses Verhalten mit `disablePortal` deaktivieren.
-- Bildlauf wird nicht wie bei der Komponente [`Popover`](/components/popover/) blockiert. Die Platzierung des Popper wird mit dem verfügbaren Bereich im Ansichtsfenster aktualisiert.
+- 🕷 Popper relies on the 3rd party library ([Popper.js](https://github.com/FezVrasta/popper.js)) for perfect positioning.
+- 💄 It's an alternative API to react-popper. It aims for simplicity.
+- 📦 [10 kB gzipped](/size-snapshot) (7 kB from Popper.js).
+- The children is [`Portal`](/components/portal/) to the body of the document to avoid rendering problems. You can disable this behavior with `disablePortal`.
+- The scroll isn't blocked like with the [`Popover`](/components/popover/) component. The placement of the popper updates with the available area in the viewport.
- Durch Wegklicken wird die `Popper` Komponente ausgeblendet. Wenn Sie dieses Verhalten benötigen, können Sie den [`ClickAwayListener`](/components/click-away-listener/) verwenden - siehe das Beispiel im [Menü Dokumentation Abschnitt](/components/menus/#menulist-composition).
- Die `anchorEl` Komponente wird als Referenzobjekt übergeben, um eine neue Instanz von `Popper.js` zu erstellen.
diff --git a/docs/src/pages/components/popper/popper-es.md b/docs/src/pages/components/popper/popper-es.md
index 08a31f88d20328..265d83fab4810d 100644
--- a/docs/src/pages/components/popper/popper-es.md
+++ b/docs/src/pages/components/popper/popper-es.md
@@ -9,9 +9,9 @@ components: Popper
Some important features of the `Popper` component:
--
--
--
+- 🕷 Popper relies on the 3rd party library ([Popper.js](https://github.com/FezVrasta/popper.js)) for perfect positioning.
+- 💄 It's an alternative API to react-popper. It aims for simplicity.
+- 📦 [10 kB gzipped](/size-snapshot) (7 kB from Popper.js).
- The children is [`Portal`](/components/portal/) to the body of the document to avoid rendering problems. You can disable this behavior with `disablePortal`.
- The scroll isn't blocked like with the [`Popover`](/components/popover/) component. The placement of the popper updates with the available area in the viewport.
- Clicking away does not hide the `Popper` component. If you need this behavior, you can use [`ClickAwayListener`](/components/click-away-listener/) - see the example in the [menu documentation section](/components/menus/#menulist-composition).
diff --git a/docs/src/pages/components/popper/popper-fr.md b/docs/src/pages/components/popper/popper-fr.md
index ed858d1db1695e..0f29df1839dcbc 100644
--- a/docs/src/pages/components/popper/popper-fr.md
+++ b/docs/src/pages/components/popper/popper-fr.md
@@ -9,9 +9,9 @@ components: Popper
Some important features of the `Popper` component:
--
--
--
+- 🕷 Popper relies on the 3rd party library ([Popper.js](https://github.com/FezVrasta/popper.js)) for perfect positioning.
+- 💄 It's an alternative API to react-popper. It aims for simplicity.
+- 📦 [10 kB gzipped](/size-snapshot) (7 kB from Popper.js).
- The children is [`Portal`](/components/portal/) to the body of the document to avoid rendering problems. You can disable this behavior with `disablePortal`.
- The scroll isn't blocked like with the [`Popover`](/components/popover/) component. The placement of the popper updates with the available area in the viewport.
- Clicking away does not hide the `Popper` component. If you need this behavior, you can use [`ClickAwayListener`](/components/click-away-listener/) - see the example in the [menu documentation section](/components/menus/#menulist-composition).
@@ -49,7 +49,7 @@ Highlight part of the text to see the popper:
## Projets complémentaires
-Pour des cas d'utilisation plus avancés, vous pourrez peut-être tirer parti des projects suivants:
+Pour des cas d'utilisation plus avancés, vous pourrez peut-être tirer parti des avantages suivants:
### Assistant PopupState
diff --git a/docs/src/pages/components/popper/popper-ja.md b/docs/src/pages/components/popper/popper-ja.md
index 0f2d78fcb31998..857e06b43bf4d4 100644
--- a/docs/src/pages/components/popper/popper-ja.md
+++ b/docs/src/pages/components/popper/popper-ja.md
@@ -5,15 +5,15 @@ components: Popper
# Popper
-Popperはあるコンテンツを他のコンテンツの上に表示するために使用することができます。これはreact-popperに代わるものです。
+A Popper can be used to display some content on top of another. It's an alternative to react-popper.
`Popper` コンポーネントのいくつかの重要な機能：
--
--
--
-- レンダリングの問題を避けるために、子要素はドキュメントの本文に対して [`ポータル`](/components/portal/) です。 `disablePortal`で、この動作を無効にできます。
-- スクロールは [`Popover`](/components/popover/) コンポーネントのようにブロックされません。 ポッパーの配置が、ビューポートの使用可能領域に合わせて更新されます。
+- 🕷 Popper relies on the 3rd party library ([Popper.js](https://github.com/FezVrasta/popper.js)) for perfect positioning.
+- 💄 It's an alternative API to react-popper. It aims for simplicity.
+- 📦 [10 kB gzipped](/size-snapshot) (7 kB from Popper.js).
+- The children is [`Portal`](/components/portal/) to the body of the document to avoid rendering problems. You can disable this behavior with `disablePortal`.
+- The scroll isn't blocked like with the [`Popover`](/components/popover/) component. The placement of the popper updates with the available area in the viewport.
- クリックしても `Popper` コンポーネントは非表示になりません。 この動作が必要な場合は、 [`ClickAwayListener`](/components/click-away-listener/) 使用することができます - [メニュードキュメンテーションセクション](/components/menus/#menulist-composition)例を参照してください。
- `anchorEl` は、新しい `Popper.js` インスタンスを作成するための参照オブジェクトとして渡されます。
@@ -49,7 +49,7 @@ Highlight part of the text to see the popper:
## Complementary projects
-For more advanced use cases you might be able to take advantage of:
+より高度なユースケースのためにあなたは利用することができるかもしれません：
### PopupState helper
diff --git a/docs/src/pages/components/popper/popper-pt.md b/docs/src/pages/components/popper/popper-pt.md
index 7f6cb410df7d53..d0703ad1c56ea2 100644
--- a/docs/src/pages/components/popper/popper-pt.md
+++ b/docs/src/pages/components/popper/popper-pt.md
@@ -5,15 +5,15 @@ components: Popper
# Popper
-O Popper pode ser usado para exibir algum conteúdo em cima do outro. É uma alternativa ao react-popper.
+Um Popper pode ser usado para exibir algum conteúdo em cima do outro. É uma alternativa para react-popper.
Algumas características importantes do componente `Popper`:
--
--
--
-- O componente children para o corpo do documento é o [`Portal`](/components/portal/) para evitar problemas de renderização. Você pode desativar esse comportamento com `disablePortal`.
-- A rolagem não é bloqueada como no componente [`Popover`](/components/popover/). O posicionamento do popper é atualizado com a área disponível na janela de visualização (viewport).
+- 🕷 Popper é baseado na biblioteca de terceiros ([Popper.js](https://github.com/FezVrasta/popper.js)) para um posicionamento perfeito.
+- 💄 É uma API alternativa para react-popper. Visa a simplicidade.
+- 📦 [10 kB gzipped](/size-snapshot) (7 kB do Popper.js).
+- O elemento filho [`Portal`](/components/portal/) no corpo do documento, evita problemas de renderização. Você pode desativar esse comportamento com `disablePortal`.
+- O scroll não e bloqueado como ocorre com o componente [`Popover`](/components/popover/). O posicionamento do popper é atualizado com a área disponível no visor.
- Clicar fora não oculta o componente `Popper`. Se você precisar desse comportamento, você pode usar o componente [`ClickAwayListener`](/components/click-away-listener/) - veja o exemplo na [seção da documentação do menu](/components/menus/#menulist-composition).
- O `anchorEl` é passado como o objeto de referência para criar uma nova instância `Popper.js`.
@@ -49,7 +49,7 @@ Selecione parte do texto para ver o popper:
## Projetos Complementares
-Para usos mais avançados, você pode tirar vantagem com:
+Para casos de uso mais avançados, você pode tirar proveito de:
### PopupState helper
diff --git a/docs/src/pages/components/popper/popper-ru.md b/docs/src/pages/components/popper/popper-ru.md
index 415a7a3bebd219..d653363a082e79 100644
--- a/docs/src/pages/components/popper/popper-ru.md
+++ b/docs/src/pages/components/popper/popper-ru.md
@@ -9,9 +9,9 @@ components: Popper
Some important features of the `Popper` component:
--
--
--
+- 🕷 Popper relies on the 3rd party library ([Popper.js](https://github.com/FezVrasta/popper.js)) for perfect positioning.
+- 💄 It's an alternative API to react-popper. It aims for simplicity.
+- 📦 [10 kB gzipped](/size-snapshot) (7 kB from Popper.js).
- The children is [`Portal`](/components/portal/) to the body of the document to avoid rendering problems. You can disable this behavior with `disablePortal`.
- The scroll isn't blocked like with the [`Popover`](/components/popover/) component. The placement of the popper updates with the available area in the viewport.
- Clicking away does not hide the `Popper` component. If you need this behavior, you can use [`ClickAwayListener`](/components/click-away-listener/) - see the example in the [menu documentation section](/components/menus/#menulist-composition).
diff --git a/docs/src/pages/components/popper/popper-zh.md b/docs/src/pages/components/popper/popper-zh.md
index 1e1dd05ddcad84..fb83624a9247da 100644
--- a/docs/src/pages/components/popper/popper-zh.md
+++ b/docs/src/pages/components/popper/popper-zh.md
@@ -5,15 +5,15 @@ components: Popper
# 弹出提示 (Popper)
-Popper 可以用来在其他元素之上显示一些内容。它是 react-popper 的替代品。
+A Popper can be used to display some content on top of another. It's an alternative to react-popper.
`Popper` 组件的一些重要功能：
--
--
--
-- 子级元素是使用 [`Portal`](/components/portal/) 组件，以避免在文档中出现问题。 您可以使用 `disablePortal` 禁用此行为。
-- 和 [`Popver`](/components/popover/) 不同，滚动和单击不会被阻止。 Popper组件会随着可视窗口中的可使用区域更新其位置。
+- 🕷 Popper relies on the 3rd party library ([Popper.js](https://github.com/FezVrasta/popper.js)) for perfect positioning.
+- 💄 It's an alternative API to react-popper. It aims for simplicity.
+- 📦 [10 kB gzipped](/size-snapshot) (7 kB from Popper.js).
+- The children is [`Portal`](/components/portal/) to the body of the document to avoid rendering problems. You can disable this behavior with `disablePortal`.
+- The scroll isn't blocked like with the [`Popover`](/components/popover/) component. The placement of the popper updates with the available area in the viewport.
- Clicking away does not hide the `Popper` component. If you need this behavior, you can use [`ClickAwayListener`](/components/click-away-listener/) - see the example in the [menu documentation section](/components/menus/#menulist-composition).
- The `anchorEl` is passed as the reference object to create a new `Popper.js` instance.
diff --git a/docs/src/pages/components/portal/portal-de.md b/docs/src/pages/components/portal/portal-de.md
index f94e1d8f416e5b..caac4827e76941 100644
--- a/docs/src/pages/components/portal/portal-de.md
+++ b/docs/src/pages/components/portal/portal-de.md
@@ -7,7 +7,7 @@ components: Portal
Die Portalkomponente rendert ihre untergeordneten Elemente in eine neue "Unterstruktur" außerhalb der aktuellen Komponentenhierarchie.
--
+- 📦 [1.3 kB gzipped](/size-snapshot)
Die untergeordneten Elemente der Portalkomponente werden an den angegebenen `Container` angehängt.
diff --git a/docs/src/pages/components/portal/portal-es.md b/docs/src/pages/components/portal/portal-es.md
index e2e18a05b2ee6a..2945a002851917 100644
--- a/docs/src/pages/components/portal/portal-es.md
+++ b/docs/src/pages/components/portal/portal-es.md
@@ -7,7 +7,7 @@ components: Portal
El componente del portal hace que sus hijos se conviertan en un nuevo "subtree" fuera de la jerarquía actual de componentes.
--
+- 📦 [1.3 kB gzipped](/size-snapshot)
The children of the portal component will be appended to the `container` specified.
diff --git a/docs/src/pages/components/portal/portal-fr.md b/docs/src/pages/components/portal/portal-fr.md
index 42f8d313720ce9..257a1108d11166 100644
--- a/docs/src/pages/components/portal/portal-fr.md
+++ b/docs/src/pages/components/portal/portal-fr.md
@@ -7,7 +7,7 @@ components: Portal
Le composant de portail convertit ses enfants en un nouveau "sous-arbre" en dehors de la hiérarchie de composants actuelle.
--
+- 📦 [1.3 kB gzipped](/size-snapshot)
Les enfants du composant Portal seront ajoutés au `container` fournit.
diff --git a/docs/src/pages/components/portal/portal-ja.md b/docs/src/pages/components/portal/portal-ja.md
index 8430d81e505939..94f5e99e7085f8 100644
--- a/docs/src/pages/components/portal/portal-ja.md
+++ b/docs/src/pages/components/portal/portal-ja.md
@@ -7,7 +7,7 @@ components: Portal
The portal component renders its children into a new "subtree" outside of current component hierarchy.
--
+- 📦 [1.3 kB gzipped](/size-snapshot)
The children of the portal component will be appended to the `container` specified.
diff --git a/docs/src/pages/components/portal/portal-pt.md b/docs/src/pages/components/portal/portal-pt.md
index 6acf082e2260b1..b4da3d66d9b7f6 100644
--- a/docs/src/pages/components/portal/portal-pt.md
+++ b/docs/src/pages/components/portal/portal-pt.md
@@ -7,11 +7,11 @@ components: Portal
O componente portal renderiza seu filho em uma nova sub-árvore fora da hierarquia do componente atual.
--
+- 📦 [1.3 kB gzipped](/size-snapshot)
O filho do componente portal será adicionado ao `container` especificado.
-O componente é usado internamente pelos componentes [`Modal`](/components/modal/) e [`Popper`](/components/popper/). No servidor, o conteúdo não será renderizado. You have to wait for the client-side hydration to see the children.
+O componente é usado internamente pelos componentes [`Modal`](/components/modal/) e [`Popper`](/components/popper/). No servidor, o conteúdo não será renderizado. Você deve esperar pelo lado do cliente fazer a hidratação para ver o filho.
## Portal Simples
diff --git a/docs/src/pages/components/portal/portal-ru.md b/docs/src/pages/components/portal/portal-ru.md
index 1cd803654f3f18..d7314038f78cb0 100644
--- a/docs/src/pages/components/portal/portal-ru.md
+++ b/docs/src/pages/components/portal/portal-ru.md
@@ -7,7 +7,7 @@ components: Portal
Компонент Portal отображает свои дочерние элементы в новом «поддереве» вне текущей иерархии компонентов.
--
+- 📦 [1.3 kB gzipped](/size-snapshot)
Дочерние элементы портала будут добавлены внутрь элемента, указанного в свойстве `container`.
diff --git a/docs/src/pages/components/portal/portal-zh.md b/docs/src/pages/components/portal/portal-zh.md
index 560564469b090b..befbab879ed71c 100644
--- a/docs/src/pages/components/portal/portal-zh.md
+++ b/docs/src/pages/components/portal/portal-zh.md
@@ -7,7 +7,7 @@ components: Portal
Portal 组件将其子节点渲染到当前组件层次结构之外的新 "子树" 中。
--
+- 📦 [1.3 kB gzipped](/size-snapshot)
Portal 组件的子节点将被添加到指定的 `容器` 中。
diff --git a/docs/src/pages/components/progress/progress-de.md b/docs/src/pages/components/progress/progress-de.md
index 1dbeba69222045..76804b1333dc37 100644
--- a/docs/src/pages/components/progress/progress-de.md
+++ b/docs/src/pages/components/progress/progress-de.md
@@ -99,6 +99,6 @@ Bei starker Belastung verlieren Sie möglicherweise die Strich-Animation oder se
-Wenn dies nicht möglich ist, können Sie die `disableShrink` Eigenschaft nutzen, um das Problem zu verringern. Siehe [dieses Github issue](https://github.com/mui-org/material-ui/issues/10327).
+When it's not possible, you can leverage the `disableShrink` property to mitigate the issue. See [this issue](https://github.com/mui-org/material-ui/issues/10327).
{{"demo": "pages/components/progress/CircularUnderLoad.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/progress/progress-fr.md b/docs/src/pages/components/progress/progress-fr.md
index d37cec355c934e..07bb4324dd3130 100644
--- a/docs/src/pages/components/progress/progress-fr.md
+++ b/docs/src/pages/components/progress/progress-fr.md
@@ -5,21 +5,21 @@ components: CircularProgress, LinearProgress
# Barres de progression
-Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. The animation works with CSS, not JavaScript.
+Les indicateurs de progression, plus connus sous le nom de spinners, expriment un temps d'attente non spécifié ou affichent la durée d'un processus. L'animation fonctionne avec du CSS, pas de JavaScript.
-[Progress indicators](https://material.io/design/components/progress-indicators.html) inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen.
+Les [Indicateurs de progression](https://material.io/design/components/progress-indicators.html) informent les utilisateurs de l'état des processus en cours, tels que le chargement d'une application, la soumission d'un formulaire ou la progression des mises à jour. Ils communiquent l'état d'une application et indiquent les actions disponibles, par exemple si les utilisateurs peuvent quitter l'écran actuel.
-**Determinate** indicators display how long an operation will take.
+Les indicateurs **déterminés** indiquent la durée d'une opération.
-**Indeterminate** indicators visualize an unspecified wait time.
+Les indicateurs **indéterminés** indiquent un temps d'attente non spécifié.
-#### Progress as a group
+#### Barres de progression groupées
-When displaying progress for a sequence of processes, indicate overall progress rather than the progress of each activity.
+Lorsque vous affichez les progrès d'une séquence de processus, indiquez le progrès global plutôt que les progrès de chaque activité.
-## Circular
+## Progression circulaire
-[Circular progress](https://material.io/design/components/progress-indicators.html#circular-progress-indicators) support both determinate and indeterminate processes.
+Les [progrès circulaires](https://material.io/design/components/progress-indicators.html#circular-progress-indicators) prennent en charge les processus à la fois déterminés et indéterminés.
- **Determinate** circular indicators fill the invisible, circular track with color, as the indicator moves from 0 to 360 degrees.
- **Indeterminate** circular indicators grow and shrink in size while moving along the invisible track.
@@ -83,7 +83,7 @@ function Progress(props) {
## Customized progress bars
-Voici quelques exemples de personnalisation du composant. Vous pouvez en apprendre plus sur [la page de documentation de personnalisation](/customization/components/).
+Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
{{"demo": "pages/components/progress/CustomizedProgressBars.js"}}
diff --git a/docs/src/pages/components/progress/progress-ja.md b/docs/src/pages/components/progress/progress-ja.md
index 0d9c5c2c6eb06e..0aa111e50611e0 100644
--- a/docs/src/pages/components/progress/progress-ja.md
+++ b/docs/src/pages/components/progress/progress-ja.md
@@ -83,7 +83,7 @@ function Progress(props) {
## Customized progress bars
-コンポーネントのカスタマイズ例をいくつか示します。あなたはこれについてもっと詳しく知ることができます [上書きドキュメントのページ](/customization/components/)。
+Here are some examples of customizing the component. 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/progress/CustomizedProgressBars.js"}}
diff --git a/docs/src/pages/components/progress/progress-pt.md b/docs/src/pages/components/progress/progress-pt.md
index dfc80ebf9d2661..7c02aeb492c78a 100644
--- a/docs/src/pages/components/progress/progress-pt.md
+++ b/docs/src/pages/components/progress/progress-pt.md
@@ -83,7 +83,7 @@ function Progress(props) {
## Barra de progresso customizada
-Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescrita](/customization/components/).
+Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
{{"demo": "pages/components/progress/CustomizedProgressBars.js"}}
@@ -99,6 +99,6 @@ Quando o processamento é particularmente lento, você pode perder a animação
-Quando não for possível, você pode aproveitar a propriedade `disableShrink` para atenuar o problema. Veja [este issue](https://github.com/mui-org/material-ui/issues/10327).
+Quando não for possível, você pode utilizar a propriedade `disableShrink` para atenuar o problema. Veja [este problema](https://github.com/mui-org/material-ui/issues/10327).
{{"demo": "pages/components/progress/CircularUnderLoad.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/progress/progress-ru.md b/docs/src/pages/components/progress/progress-ru.md
index 3e80f4dac4f4b8..2f729776404e98 100644
--- a/docs/src/pages/components/progress/progress-ru.md
+++ b/docs/src/pages/components/progress/progress-ru.md
@@ -83,7 +83,7 @@ function Progress(props) {
## Customized progress bars
-Ниже приведены несколько примеров настройки компонента. Более подробно с этой темой можно ознакомиться на [странице документации по переопределению компонентов](/customization/components/).
+Ниже находятся примеры кастомизации компонента. You can learn more about this in the [overrides documentation page](/customization/components/).
{{"demo": "pages/components/progress/CustomizedProgressBars.js"}}
diff --git a/docs/src/pages/components/progress/progress-zh.md b/docs/src/pages/components/progress/progress-zh.md
index 4491eb13c401d9..1c4a22f7077f18 100644
--- a/docs/src/pages/components/progress/progress-zh.md
+++ b/docs/src/pages/components/progress/progress-zh.md
@@ -83,7 +83,7 @@ function Progress(props) {
## 自定义进度条
-以下是自定义组件的一些示例。您可以在[重写文档页面](/customization/components/)中了解有关此内容的更多信息。
+这是一些自定义样式开关的例子 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/progress/CustomizedProgressBars.js"}}
@@ -99,6 +99,6 @@ function Progress(props) {
-若这样不可行，您还可以借助 `disableShrink` 属性来缓解这个问题。详情请见[这个问题](https://github.com/mui-org/material-ui/issues/10327)。
+When it's not possible, you can leverage the `disableShrink` property to mitigate the issue. See [this issue](https://github.com/mui-org/material-ui/issues/10327).
{{"demo": "pages/components/progress/CircularUnderLoad.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-fr.md b/docs/src/pages/components/radio-buttons/radio-buttons-fr.md
index 24cb70a067b643..06e04c8f7aefe8 100644
--- a/docs/src/pages/components/radio-buttons/radio-buttons-fr.md
+++ b/docs/src/pages/components/radio-buttons/radio-buttons-fr.md
@@ -42,4 +42,4 @@ Lorsqu'un label ne peut pas être utilisé, il est nécessaire d'ajouter un attr
## Conseils
-- [Checkboxes vs. Cases d’option](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/)
\ No newline at end of file
+- [Checkboxes vs. Radio Buttons](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/)
\ No newline at end of file
diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-pt.md b/docs/src/pages/components/radio-buttons/radio-buttons-pt.md
index 633a3dc2763bbd..35267b4e374970 100644
--- a/docs/src/pages/components/radio-buttons/radio-buttons-pt.md
+++ b/docs/src/pages/components/radio-buttons/radio-buttons-pt.md
@@ -29,9 +29,9 @@ Você pode alterar o posicionamento do rótulo:
## Acessibilidade
-Todos os controles de formulário devem ter rótulos, e isso inclui os botões de opção, caixas de seleção e seletores. Na maioria dos casos, isso é feito usando `` ([FormControlLabel](/api/form-control-label/)).
+Todos os controles de formulário devem ter rótulos, e isso inclui os botões de opção, caixas de seleção e seletores. Na maioria dos casos, isso é feito usando o elemento `` ([FormControlLabel](/api/form-control-label/)).
-Quando uma label não pode ser usada, é necessário adicionar um atributo diretamente no componente de input. Nesse caso você pode aplicar um atributo adicional (e.g.`aria-label`,`aria-labelledby`, `title`) através do `inputProps`.
+Quando um rótulo não pode ser usado, é necessário adicionar um atributo diretamente no componente de entrada. Nesse caso você pode aplicar um atributo adicional (e.g.`aria-label`,`aria-labelledby`, `title`) através da propriedade `inputProps`.
```jsx
` 元素（[FormControlLabel](/api/form-control-label/)）实现的。
diff --git a/docs/src/pages/components/rating/rating-de.md b/docs/src/pages/components/rating/rating-de.md
index ce649493295e6c..ef62bdd25cdcfd 100644
--- a/docs/src/pages/components/rating/rating-de.md
+++ b/docs/src/pages/components/rating/rating-de.md
@@ -13,30 +13,30 @@ components: Rating
{{"demo": "pages/components/rating/SimpleRating.js"}}
-## Half ratings
-
-The rating can display any float number with the `value` prop. Use the `precision` prop to define the minimum increment value change allowed.
-
-{{"demo": "pages/components/rating/HalfRating.js"}}
-
## Customized ratings
Hier einige Beispiele zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/).
{{"demo": "pages/components/rating/CustomizedRatings.js"}}
-## Größen
-
-Fancy larger or smaller ratings? Use the `size` property.
-
-{{"demo": "pages/components/rating/RatingSize.js"}}
-
## Hover feedback
You can display a label on hover to help users pick the correct rating value. The first demo uses the `onChangeActive` prop while the last one uses the `IconContainerComponent` prop.
{{"demo": "pages/components/rating/HoverRating.js"}}
+## Half ratings
+
+The rating can display any float number with the `value` prop. Use the `precision` prop to define the minimum increment value change allowed.
+
+{{"demo": "pages/components/rating/HalfRating.js"}}
+
+## Größen
+
+Fancy larger or smaller ratings? Use the `size` prop.
+
+{{"demo": "pages/components/rating/RatingSize.js"}}
+
## Barrierefreiheit
Die Barrierefreiheit dieser Komponente setzt voraus:
diff --git a/docs/src/pages/components/rating/rating-es.md b/docs/src/pages/components/rating/rating-es.md
index 46f00a621d3532..596e2d0ec27224 100644
--- a/docs/src/pages/components/rating/rating-es.md
+++ b/docs/src/pages/components/rating/rating-es.md
@@ -13,30 +13,30 @@ components: Rating
{{"demo": "pages/components/rating/SimpleRating.js"}}
-## Half ratings
-
-The rating can display any float number with the `value` prop. Use the `precision` prop to define the minimum increment value change allowed.
-
-{{"demo": "pages/components/rating/HalfRating.js"}}
-
## Customized ratings
Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
{{"demo": "pages/components/rating/CustomizedRatings.js"}}
-## Tamaños
-
-Fancy larger or smaller ratings? Use the `size` property.
-
-{{"demo": "pages/components/rating/RatingSize.js"}}
-
## Hover feedback
You can display a label on hover to help users pick the correct rating value. The first demo uses the `onChangeActive` prop while the last one uses the `IconContainerComponent` prop.
{{"demo": "pages/components/rating/HoverRating.js"}}
+## Half ratings
+
+The rating can display any float number with the `value` prop. Use the `precision` prop to define the minimum increment value change allowed.
+
+{{"demo": "pages/components/rating/HalfRating.js"}}
+
+## Tamaños
+
+Fancy larger or smaller ratings? Use the `size` prop.
+
+{{"demo": "pages/components/rating/RatingSize.js"}}
+
## Accesibilidad
La accesibilidad de este componente se basa en:
diff --git a/docs/src/pages/components/rating/rating-fr.md b/docs/src/pages/components/rating/rating-fr.md
index 47e0446eaf5d99..88f2c01a07788a 100644
--- a/docs/src/pages/components/rating/rating-fr.md
+++ b/docs/src/pages/components/rating/rating-fr.md
@@ -13,30 +13,30 @@ components: Rating
{{"demo": "pages/components/rating/SimpleRating.js"}}
-## Half ratings
-
-The rating can display any float number with the `value` prop. Use the `precision` prop to define the minimum increment value change allowed.
-
-{{"demo": "pages/components/rating/HalfRating.js"}}
-
## Customized ratings
Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
{{"demo": "pages/components/rating/CustomizedRatings.js"}}
-## Tailles
-
-Fancy larger or smaller ratings? Use the `size` property.
-
-{{"demo": "pages/components/rating/RatingSize.js"}}
-
## Hover feedback
You can display a label on hover to help users pick the correct rating value. The first demo uses the `onChangeActive` prop while the last one uses the `IconContainerComponent` prop.
{{"demo": "pages/components/rating/HoverRating.js"}}
+## Half ratings
+
+The rating can display any float number with the `value` prop. Use the `precision` prop to define the minimum increment value change allowed.
+
+{{"demo": "pages/components/rating/HalfRating.js"}}
+
+## Tailles
+
+Fancy larger or smaller ratings? Use the `size` prop.
+
+{{"demo": "pages/components/rating/RatingSize.js"}}
+
## Accessibilité
L'accessibilité de ce composant repose sur les points suivants :
diff --git a/docs/src/pages/components/rating/rating-ja.md b/docs/src/pages/components/rating/rating-ja.md
index b71fbf6588e7ab..1ebc3d14c7c2bd 100644
--- a/docs/src/pages/components/rating/rating-ja.md
+++ b/docs/src/pages/components/rating/rating-ja.md
@@ -13,30 +13,30 @@ components: Rating
{{"demo": "pages/components/rating/SimpleRating.js"}}
-## Half ratings
-
-The rating can display any float number with the `value` prop. Use the `precision` prop to define the minimum increment value change allowed.
-
-{{"demo": "pages/components/rating/HalfRating.js"}}
-
## Customized ratings
Here are some examples of customizing the component. 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/rating/CustomizedRatings.js"}}
-## サイズ
-
-Fancy larger or smaller ratings? Use the `size` property.
-
-{{"demo": "pages/components/rating/RatingSize.js"}}
-
## Hover feedback
You can display a label on hover to help users pick the correct rating value. The first demo uses the `onChangeActive` prop while the last one uses the `IconContainerComponent` prop.
{{"demo": "pages/components/rating/HoverRating.js"}}
+## Half ratings
+
+The rating can display any float number with the `value` prop. Use the `precision` prop to define the minimum increment value change allowed.
+
+{{"demo": "pages/components/rating/HalfRating.js"}}
+
+## サイズ
+
+Fancy larger or smaller ratings? Use the `size` prop.
+
+{{"demo": "pages/components/rating/RatingSize.js"}}
+
## アクセシビリティ
このコンポーネントのアクセシビリティは、
diff --git a/docs/src/pages/components/rating/rating-pt.md b/docs/src/pages/components/rating/rating-pt.md
index 367f44a064aaed..cdecf59560f0b0 100644
--- a/docs/src/pages/components/rating/rating-pt.md
+++ b/docs/src/pages/components/rating/rating-pt.md
@@ -1,45 +1,45 @@
---
-title: Rating React component
+title: Componente React de avaliação
components: Rating
---
-# Rating
+# Avaliação
-Ratings provide insight regarding others’ opinions and experiences with a product. Users can also rate products they’ve purchased.
+As avaliações fornecem informações sobre opiniões e experiências de outros usuários com um produto. Os usuários também podem avaliar os produtos que compraram.
-- 📦 [20 kB gzipped](/size-snapshot) (but only 6 kB without @material-ui/styles).
+- 📦 [20 kB gzipped](/size-snapshot) (mas apenas 6 kB sem @material-ui/styles).
-## Simple ratings
+## Avaliações simples
{{"demo": "pages/components/rating/SimpleRating.js"}}
-## Half ratings
+## Avaliações customizadas
-The rating can display any float number with the `value` prop. Use the `precision` prop to define the minimum increment value change allowed.
+Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
-{{"demo": "pages/components/rating/HalfRating.js"}}
+{{"demo": "pages/components/rating/CustomizedRatings.js"}}
-## Customized ratings
+## Feedback ao passar mouse
-Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
+Você pode exibir um rótulo ao passar o mouse para ajudar os usuários a escolher o valor de avaliação correto. A primeira demo usa a propriedade `onChangeActive` enquanto o último usa a propriedade `IconContainerComponent`.
-{{"demo": "pages/components/rating/CustomizedRatings.js"}}
+{{"demo": "pages/components/rating/HoverRating.js"}}
-## Tamanhos
+## Meias avaliações
-Fancy larger or smaller ratings? Use the `size` property.
+A avaliação pode exibir qualquer número flutuante com a propriedade `value`. Use a propriedade `precision` para definir a alteração mínima do valor de incremento permitida.
-{{"demo": "pages/components/rating/RatingSize.js"}}
+{{"demo": "pages/components/rating/HalfRating.js"}}
-## Hover feedback
+## Tamanhos
-You can display a label on hover to help users pick the correct rating value. The first demo uses the `onChangeActive` prop while the last one uses the `IconContainerComponent` prop.
+Gosta de avaliações maiores ou menores? Use a propriedade `size`.
-{{"demo": "pages/components/rating/HoverRating.js"}}
+{{"demo": "pages/components/rating/RatingSize.js"}}
## Acessibilidade
A acessibilidade neste componente conta com:
-- A radio group is used with its fields visually hidden. It contains six radio buttons, one for each star and another for 0 stars, which is checked by default. Make sure you are providing a `name` prop that is unique to the parent form.
-- The labels for the radio buttons contain actual text (“1 Star”, “2 Stars”, …), make sure you provide a `getLabelText` prop when the page language is not English.
\ No newline at end of file
+- Um grupo de botões de opção é usado com seus campos visualmente ocultos. Ele contém seis botões de opção, um para cada estrela e outro para 0 estrelas, que é marcado por padrão. Certifique-se de que você está fornecendo uma propriedade `name`, que é exclusivo para o formulário principal.
+- Os rótulos dos botões de opção contêm o texto atualmente como ("1 Star", "2 Star", …). Certifique-se de fornecer uma propriedade `getLabelText` quando o idioma da página não for o inglês.
\ No newline at end of file
diff --git a/docs/src/pages/components/rating/rating-ru.md b/docs/src/pages/components/rating/rating-ru.md
index fb95ad5399e935..33e45d58268e28 100644
--- a/docs/src/pages/components/rating/rating-ru.md
+++ b/docs/src/pages/components/rating/rating-ru.md
@@ -13,30 +13,30 @@ components: Rating
{{"demo": "pages/components/rating/SimpleRating.js"}}
-## Half ratings
-
-The rating can display any float number with the `value` prop. Use the `precision` prop to define the minimum increment value change allowed.
-
-{{"demo": "pages/components/rating/HalfRating.js"}}
-
## Customized ratings
Ниже находятся примеры кастомизации компонента. You can learn more about this in the [overrides documentation page](/customization/components/).
{{"demo": "pages/components/rating/CustomizedRatings.js"}}
-## Размеры
-
-Fancy larger or smaller ratings? Use the `size` property.
-
-{{"demo": "pages/components/rating/RatingSize.js"}}
-
## Hover feedback
You can display a label on hover to help users pick the correct rating value. The first demo uses the `onChangeActive` prop while the last one uses the `IconContainerComponent` prop.
{{"demo": "pages/components/rating/HoverRating.js"}}
+## Half ratings
+
+The rating can display any float number with the `value` prop. Use the `precision` prop to define the minimum increment value change allowed.
+
+{{"demo": "pages/components/rating/HalfRating.js"}}
+
+## Размеры
+
+Fancy larger or smaller ratings? Use the `size` prop.
+
+{{"demo": "pages/components/rating/RatingSize.js"}}
+
## Доступность
Доступность этого компонента зависит от:
diff --git a/docs/src/pages/components/rating/rating-zh.md b/docs/src/pages/components/rating/rating-zh.md
index eefcd4c1632856..cbcaefaadb5330 100644
--- a/docs/src/pages/components/rating/rating-zh.md
+++ b/docs/src/pages/components/rating/rating-zh.md
@@ -13,30 +13,30 @@ components: Rating
{{"demo": "pages/components/rating/SimpleRating.js"}}
-## Half ratings
-
-The rating can display any float number with the `value` prop. Use the `precision` prop to define the minimum increment value change allowed.
-
-{{"demo": "pages/components/rating/HalfRating.js"}}
-
## Customized ratings
这是一些自定义样式开关的例子 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/rating/CustomizedRatings.js"}}
-## 尺寸
-
-Fancy larger or smaller ratings? Use the `size` property.
-
-{{"demo": "pages/components/rating/RatingSize.js"}}
-
## Hover feedback
You can display a label on hover to help users pick the correct rating value. The first demo uses the `onChangeActive` prop while the last one uses the `IconContainerComponent` prop.
{{"demo": "pages/components/rating/HoverRating.js"}}
+## Half ratings
+
+The rating can display any float number with the `value` prop. Use the `precision` prop to define the minimum increment value change allowed.
+
+{{"demo": "pages/components/rating/HalfRating.js"}}
+
+## 大小
+
+Fancy larger or smaller ratings? Use the `size` prop.
+
+{{"demo": "pages/components/rating/RatingSize.js"}}
+
## 可访问性
这个组件的可访问性依赖于：
diff --git a/docs/src/pages/components/selects/selects-de.md b/docs/src/pages/components/selects/selects-de.md
index b488257d1f3051..b5a5bcf29c7b50 100644
--- a/docs/src/pages/components/selects/selects-de.md
+++ b/docs/src/pages/components/selects/selects-de.md
@@ -29,9 +29,9 @@ Der erste Schritt besteht darin, die `InputBase` Komponente zu formatieren. Ansc
## Mehrfach Auswahl
-Die `Auswahl-` Komponente kann mehrere Auswahlmöglichkeiten verarbeiten. Es wird mit der `multiple` Eigenschaft aktiviert.
+The `Select` component can handle multiple selections. It's enabled with the `multiple` property.
-Wie bei der Einzelauswahl können Sie den neuen Wert abrufen, indem Sie auf `event.target.value` im `onChange` Callback zugreifen. Es ist immer ein Array.
+Like with the single selection, you can pull out the new value by accessing `event.target.value` in the `onChange` callback. It's always an array.
{{"demo": "pages/components/selects/MultipleSelect.js"}}
diff --git a/docs/src/pages/components/selects/selects-fr.md b/docs/src/pages/components/selects/selects-fr.md
index 3bbb7b922f0125..a876724a4898b5 100644
--- a/docs/src/pages/components/selects/selects-fr.md
+++ b/docs/src/pages/components/selects/selects-fr.md
@@ -21,7 +21,7 @@ As the user experience can be improved on mobile using the native select of the
## Customized selects
-Voici quelques exemples de personnalisation du composant. Vous pouvez en apprendre plus sur [la page de documentation de personnalisation](/customization/components/).
+Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
The first step is to style the `InputBase` component. Once it's styled, you can either use it directly as a text field or provide it to the select `input` property to have a `select` field.
diff --git a/docs/src/pages/components/selects/selects-ja.md b/docs/src/pages/components/selects/selects-ja.md
index ff045f8b5035e9..0a02886cecaa55 100644
--- a/docs/src/pages/components/selects/selects-ja.md
+++ b/docs/src/pages/components/selects/selects-ja.md
@@ -21,7 +21,7 @@ As the user experience can be improved on mobile using the native select of the
## Customized selects
-コンポーネントのカスタマイズ例をいくつか示します。あなたはこれについてもっと詳しく知ることができます [上書きドキュメントのページ](/customization/components/)。
+Here are some examples of customizing the component. 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
The first step is to style the `InputBase` component. Once it's styled, you can either use it directly as a text field or provide it to the select `input` property to have a `select` field.
diff --git a/docs/src/pages/components/selects/selects-pt.md b/docs/src/pages/components/selects/selects-pt.md
index c0a29b8298d966..db73f7e0ca9a9e 100644
--- a/docs/src/pages/components/selects/selects-pt.md
+++ b/docs/src/pages/components/selects/selects-pt.md
@@ -21,7 +21,7 @@ Como a experiência do usuário pode ser melhorada em dispositivos móveis usand
## Seleções Customizados
-Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescrita](/customization/components/).
+Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
O primeiro passo é modelar o componente `InputBase`. Uma vez estilizado, você pode usá-lo diretamente como um campo de texto ou fornecê-lo à propriedade `input` da seleção para ter um campo `select`.
@@ -29,9 +29,9 @@ O primeiro passo é modelar o componente `InputBase`. Uma vez estilizado, você
## Seleção Múltipla
-O componente `Select` pode lidar com várias seleções. Está ativado com a propriedade `multiple`.
+O componente `Select` pode lidar com várias seleções. É ativado com a propriedade `multiple`.
-Como na seleção única, você pode extrair o novo valor acessando `event.target.value` no retorno da chamada `onChange`. É sempre um array.
+Como na seleção única, você pode extrair o novo valor acessando `event.target.value` na chamada `onChange`. É sempre uma matriz.
{{"demo": "pages/components/selects/MultipleSelect.js"}}
diff --git a/docs/src/pages/components/selects/selects-ru.md b/docs/src/pages/components/selects/selects-ru.md
index 6904bbab5bf4c4..94be7d4671bfc4 100644
--- a/docs/src/pages/components/selects/selects-ru.md
+++ b/docs/src/pages/components/selects/selects-ru.md
@@ -21,7 +21,7 @@ As the user experience can be improved on mobile using the native select of the
## Customized selects
-Ниже приведены несколько примеров настройки компонента. Более подробно с этой темой можно ознакомиться на [странице документации по переопределению компонентов](/customization/components/).
+Ниже находятся примеры кастомизации компонента. You can learn more about this in the [overrides documentation page](/customization/components/).
The first step is to style the `InputBase` component. Once it's styled, you can either use it directly as a text field or provide it to the select `input` property to have a `select` field.
diff --git a/docs/src/pages/components/selects/selects-zh.md b/docs/src/pages/components/selects/selects-zh.md
index 5864cac3466496..7e95680aee0502 100644
--- a/docs/src/pages/components/selects/selects-zh.md
+++ b/docs/src/pages/components/selects/selects-zh.md
@@ -21,7 +21,7 @@ components: Select, NativeSelect
## 自定义选择器
-以下是自定义组件的一些示例。您可以在[重写文档页面](/customization/components/)中了解有关此内容的更多信息。
+这是一些自定义样式开关的例子 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
第一步是设置 `InputBase` 组件的样式。 一旦设置好样式，您就可以直接将其用作文本字段，也可以将其提供给 select 组件的 `input` 属性作为一个 `select` 字段。
@@ -29,9 +29,9 @@ components: Select, NativeSelect
## 多选
-`Select` 组件可以处理多个选项。这可以通过启用 `multiple` 属性来实现。
+The `Select` component can handle multiple selections. It's enabled with the `multiple` property.
-与单项选择一样，您可以通过访问 `onChange` 属性中的回调的 ` event.target.value ` 来提取一个新的值。并且它总是一个数组。
+Like with the single selection, you can pull out the new value by accessing `event.target.value` in the `onChange` callback. It's always an array.
{{"demo": "pages/components/selects/MultipleSelect.js"}}
diff --git a/docs/src/pages/components/skeleton/skeleton-de.md b/docs/src/pages/components/skeleton/skeleton-de.md
new file mode 100644
index 00000000000000..2d4c0383cfcae4
--- /dev/null
+++ b/docs/src/pages/components/skeleton/skeleton-de.md
@@ -0,0 +1,28 @@
+---
+title: Skeleton React component
+components: Skeleton
+---
+
+# Skeleton
+
+Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
+
+The data for your components might not be immediately available. You can increase the perceived performance for users by using skeletons. It feels like things are happening immediately, then the information is incrementally displayed on the screen (Cf. [Avoid The Spinner](https://www.lukew.com/ff/entry.asp?1797)).
+
+The component is designed to be used **directly in your components**. Zum Beispiel:
+
+```jsx
+{item ? (
+ Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
+
+The data for your components might not be immediately available. You can increase the perceived performance for users by using skeletons. It feels like things are happening immediately, then the information is incrementally displayed on the screen (Cf. [Avoid The Spinner](https://www.lukew.com/ff/entry.asp?1797)).
+
+The component is designed to be used **directly in your components**. For instance:
+
+```jsx
+{item ? (
+ Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
+
+The data for your components might not be immediately available. You can increase the perceived performance for users by using skeletons. It feels like things are happening immediately, then the information is incrementally displayed on the screen (Cf. [Avoid The Spinner](https://www.lukew.com/ff/entry.asp?1797)).
+
+The component is designed to be used **directly in your components**. Par exemple:
+
+```jsx
+{item ? (
+ Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
+
+The data for your components might not be immediately available. You can increase the perceived performance for users by using skeletons. It feels like things are happening immediately, then the information is incrementally displayed on the screen (Cf. [Avoid The Spinner](https://www.lukew.com/ff/entry.asp?1797)).
+
+The component is designed to be used **directly in your components**. For instance:
+
+```jsx
+{item ? (
+ Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
+
+The data for your components might not be immediately available. You can increase the perceived performance for users by using skeletons. It feels like things are happening immediately, then the information is incrementally displayed on the screen (Cf. [Avoid The Spinner](https://www.lukew.com/ff/entry.asp?1797)).
+
+The component is designed to be used **directly in your components**. Por exemplo:
+
+```jsx
+{item ? (
+ Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
+
+The data for your components might not be immediately available. You can increase the perceived performance for users by using skeletons. It feels like things are happening immediately, then the information is incrementally displayed on the screen (Cf. [Avoid The Spinner](https://www.lukew.com/ff/entry.asp?1797)).
+
+The component is designed to be used **directly in your components**. For instance:
+
+```jsx
+{item ? (
+ Display a placeholder preview of your content before the data gets loaded to reduce load-time frustration.
+
+The data for your components might not be immediately available. You can increase the perceived performance for users by using skeletons. It feels like things are happening immediately, then the information is incrementally displayed on the screen (Cf. [Avoid The Spinner](https://www.lukew.com/ff/entry.asp?1797)).
+
+The component is designed to be used **directly in your components**. 例如：
+
+```jsx
+{item ? (
+ Snackbars provide brief messages about app processes - typically at the bottom of the screen.
@@ -23,7 +23,7 @@ A basic snackbar that aims to reproduce Google Keep's snackbar behavior.
## Customized snackbars
-Voici quelques exemples de personnalisation du composant. Vous pouvez en apprendre plus sur [la page de documentation de personnalisation](/customization/components/).
+Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
{{"demo": "pages/components/snackbars/CustomizedSnackbars.js"}}
diff --git a/docs/src/pages/components/snackbars/snackbars-ja.md b/docs/src/pages/components/snackbars/snackbars-ja.md
index 8dd5e27e1b1cd3..da866fcacd9746 100644
--- a/docs/src/pages/components/snackbars/snackbars-ja.md
+++ b/docs/src/pages/components/snackbars/snackbars-ja.md
@@ -23,7 +23,7 @@ A basic snackbar that aims to reproduce Google Keep's snackbar behavior.
## Customized snackbars
-コンポーネントのカスタマイズ例をいくつか示します。あなたはこれについてもっと詳しく知ることができます [上書きドキュメントのページ](/customization/components/)。
+Here are some examples of customizing the component. 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/snackbars/CustomizedSnackbars.js"}}
@@ -67,7 +67,7 @@ You can change the direction of the [Slide](/components/transitions/#slide) tran
## Complementary projects
-For more advanced use cases you might be able to take advantage of:
+より高度なユースケースのためにあなたは利用することができるかもしれません：
### notistack
diff --git a/docs/src/pages/components/snackbars/snackbars-pt.md b/docs/src/pages/components/snackbars/snackbars-pt.md
index f48483249ed1b7..6217c7f7e36635 100644
--- a/docs/src/pages/components/snackbars/snackbars-pt.md
+++ b/docs/src/pages/components/snackbars/snackbars-pt.md
@@ -23,7 +23,7 @@ Um snackbar básico que tem como objetivo reproduzir o comportamento do Google K
## Snackbars personalizados
-Aqui estão alguns exemplos de personalização do componente. Você pode aprender mais sobre isso na [página de documentação de substituições](/customization/components/).
+Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
{{"demo": "pages/components/snackbars/CustomizedSnackbars.js"}}
@@ -67,7 +67,7 @@ Você pode alterar a direção da transição do [Slide](/components/transitions
## Projetos Complementares
-Para usos mais avançados, você pode tirar vantagem com:
+Para casos de uso mais avançados, você pode tirar proveito de:
### notistack
diff --git a/docs/src/pages/components/snackbars/snackbars-ru.md b/docs/src/pages/components/snackbars/snackbars-ru.md
index f30c00f153a8f4..3278bc21d67212 100644
--- a/docs/src/pages/components/snackbars/snackbars-ru.md
+++ b/docs/src/pages/components/snackbars/snackbars-ru.md
@@ -23,7 +23,7 @@ A basic snackbar that aims to reproduce Google Keep's snackbar behavior.
## Customized snackbars
-Ниже приведены несколько примеров настройки компонента. Более подробно с этой темой можно ознакомиться на [странице документации по переопределению компонентов](/customization/components/).
+Ниже находятся примеры кастомизации компонента. You can learn more about this in the [overrides documentation page](/customization/components/).
{{"demo": "pages/components/snackbars/CustomizedSnackbars.js"}}
diff --git a/docs/src/pages/components/snackbars/snackbars-zh.md b/docs/src/pages/components/snackbars/snackbars-zh.md
index 3da3b32da74258..9a971a38056c3e 100644
--- a/docs/src/pages/components/snackbars/snackbars-zh.md
+++ b/docs/src/pages/components/snackbars/snackbars-zh.md
@@ -9,7 +9,7 @@ components: Snackbar, SnackbarContent
[消息条](https://material.io/design/components/snackbars.html) 将应用程序已执行或即将执行的进程通知用户。 它们会从屏幕底部短暂地出现。 它们不应中断用户体验，也不要求任何用户的操作来关闭。
-消息条包含与执行的操作直接相关的单行文本。它们可能包含文本操作，但没有图标。您可以使用它们来显示通知的内容。
+Snackbars contain a single line of text directly related to the operation performed. They may contain a text action, but no icons. You can use them to display notifications.
#### 频率
@@ -23,7 +23,7 @@ components: Snackbar, SnackbarContent
## 自定义的消息条
-以下是自定义组件的一些示例。您可以在[重写文档页面](/customization/components/)中了解有关此内容的更多信息。
+这是一些自定义样式开关的例子 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/snackbars/CustomizedSnackbars.js"}}
@@ -55,7 +55,7 @@ components: Snackbar, SnackbarContent
### 更改过渡动画
-[Grow](/components/transitions/#grow)是默认的过渡动画但你可以使用不同的过渡动画。
+[Grow](/components/transitions/#grow) 是默认的过渡动画，但你可以选择使用不同的过渡动画。
{{"demo": "pages/components/snackbars/TransitionsSnackbar.js"}}
@@ -71,7 +71,7 @@ components: Snackbar, SnackbarContent
### notistack
- 
+ 
在下面的示例中, 我们演示如何使用 [notistack](https://github.com/iamhosseindhv/notistack)。 notistack 可以很容易地显示消息条（因此您不必处理它们的打开/关闭状态）。 它还使您能够将它们堆叠在彼此之上 (但规范不鼓励这样做)。
diff --git a/docs/src/pages/components/speed-dial/speed-dial-ja.md b/docs/src/pages/components/speed-dial/speed-dial-ja.md
index 971edb6750b6c3..ecc59832959074 100644
--- a/docs/src/pages/components/speed-dial/speed-dial-ja.md
+++ b/docs/src/pages/components/speed-dial/speed-dial-ja.md
@@ -3,7 +3,7 @@ title: Speed Dial React component
components: SpeedDial, SpeedDialAction, SpeedDialIcon
---
-# Speed Dial
+# 短縮ダイヤル
When pressed, a floating action button can display three to six related actions in the form of a speed dial.
diff --git a/docs/src/pages/components/steppers/steppers-de.md b/docs/src/pages/components/steppers/steppers-de.md
index e05e485afc18ad..d11bc13eea2854 100644
--- a/docs/src/pages/components/steppers/steppers-de.md
+++ b/docs/src/pages/components/steppers/steppers-de.md
@@ -5,27 +5,18 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco
# Stepper
-Stepper vermitteln den Fortschritt durch nummerierte Schritte. Es bietet einen assistentenartigen Workflow.
+Steppers convey progress through numbered steps. It provides a wizard-like workflow.
[Stepper](https://material.io/archive/guidelines/components/steppers.html) zeigen den Fortschritt durch eine Folge logischer und nummerierter Schritte an. Sie können auch zur Navigation verwendet werden. Steppers können eine vorübergehende Rückmeldung anzeigen, nachdem ein Schritt gespeichert wurde.
-**Arten von Steppers**
-
-- Editierbar
-- Nicht Editierbar
-- Mobil
-- Optional
-
-**Typen von Steppers**
-
-- Horizontal
-- Senkrecht
-- Linear
-- Nicht linear
+- **Types of Steps**: Editable, Non-editable, Mobile, Optional
+- **Types of Steppers**: Horizontal, Vertical, Linear, Non-linear
> **Note:** Steppers are no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support them.
-## Horizontal Linear
+## Horizontal Stepper
+
+### Linear
Der `Stepper` kann gesteuert werden, indem der aktuelle Schrittindex (auf Null basierend) als `activeStep` Eigenschaft übergeben wird. Die `Stepper-` Ausrichtung wird mithilfe der Eigenschaft `orientation` gesetzt.
@@ -33,7 +24,19 @@ Dieses Beispiel zeigt auch die Verwendung eines optionalen Schritt durch setzten
{{"demo": "pages/components/steppers/HorizontalLinearStepper.js"}}
-## Horizontal Nicht-Linear
+### Linear - Alternative Label
+
+Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
+
+{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
+
+### Anpasster Stepper
+
+Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/).
+
+{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
+
+### Nicht linear
Mit nichtlinearen Steppern können Benutzer an jedem Punkt einen mehrstufigen Fluss einsteigen.
@@ -43,17 +46,13 @@ Wir haben den `StepButton` hier verwendet, um anklickbare Schrittbeschriftungen
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
-## Horizontal Linear - Alternative Beschriftung
-
-Beschriftungen können unterhalb des Schrittsymbols platziert werden, indem Sie die Eigenschaft `alternativeLabel` für die Komponente `Stepper` festlegen.
+### Non Linear - Alternative Label
-{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
-
-## Horizontal Nicht-Linear - Alternative Beschriftung
+Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
{{"demo": "pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js"}}
-## Horizontal Nicht-Linear - Fehlerschritt
+### Non Linear - Error Step
{{"demo": "pages/components/steppers/HorizontalNonLinearStepperWithError.js"}}
@@ -61,37 +60,29 @@ Beschriftungen können unterhalb des Schrittsymbols platziert werden, indem Sie
{{"demo": "pages/components/steppers/VerticalLinearStepper.js"}}
-## Anpasster Stepper
-
-Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/).
-
-Diese Komponente verwendet ein benutzerdefiniertes `StepConnector` Element, das die Randfarbe basierend auf dem Status `active` und `completed` ändert.
-
-{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
-
## Mobile Stepper
Diese Komponente implementiert einen kompakten Stepper, der für ein mobiles Gerät geeignet ist. Siehe [Mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) zur Inspiration.
-### Mobile Stepper - Text
+### Text
-Dies ist im Wesentlichen eine Zurück / Nächste Schaltfläche, die richtig positioniert ist. Sie müssen die Textbeschreibung selbst implementieren. Nachfolgend finden Sie ein Beispiel.
+This is essentially a back/next button positioned correctly. You must implement the textual description yourself, however, an example is provided below for reference.
{{"demo": "pages/components/steppers/TextMobileStepper.js"}}
-### Mobile Stepper - Text mit Karusselleffekt
+### Text with Carousel effect
Diese Demo ist der vorherigen sehr ähnlich, der Unterschied besteht in der Verwendung von [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views), um den Übergang von Schritten zu realisieren.
{{"demo": "pages/components/steppers/SwipeableTextMobileStepper.js"}}
-### Mobile Stepper - Punkte
+### Dots
Verwenden Sie Punkte, wenn die Anzahl der Schritte nicht groß ist.
{{"demo": "pages/components/steppers/DotsMobileStepper.js"}}
-### Mobile Stepper - Fortschritt
+### Fortschritt (Progress)
Verwenden Sie eine Fortschrittsleiste, wenn viele Schritte vorhanden sind oder wenn Schritte eingefügt werden müssen (basierend auf den Antworten auf frühere Schritte).
diff --git a/docs/src/pages/components/steppers/steppers-es.md b/docs/src/pages/components/steppers/steppers-es.md
index aae65e9ca39f2d..be2d76beb3e894 100644
--- a/docs/src/pages/components/steppers/steppers-es.md
+++ b/docs/src/pages/components/steppers/steppers-es.md
@@ -9,23 +9,14 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco
[Steppers](https://material.io/archive/guidelines/components/steppers.html) display progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved.
-**Types of Steps**
-
-- Editable
-- Non-editable
-- Mobile
-- Optional
-
-**Types of Steppers**
-
-- Horizontal
-- Vertical
-- Lineal
-- Non-linear
+- **Types of Steps**: Editable, Non-editable, Mobile, Optional
+- **Types of Steppers**: Horizontal, Vertical, Linear, Non-linear
> **Note:** Steppers are no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support them.
-## Horizontal Linear
+## Horizontal Stepper
+
+### Lineal
The `Stepper` can be controlled by passing the current step index (zero-based) as the `activeStep` property. `Stepper` orientation is set using the `orientation` property.
@@ -33,7 +24,19 @@ This example also shows the use of an optional step by placing the `optional` pr
{{"demo": "pages/components/steppers/HorizontalLinearStepper.js"}}
-## Horizontal Non-linear
+### Linear - Alternative Label
+
+Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
+
+{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
+
+### Customized Stepper
+
+Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+
+{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
+
+### Non-linear
Non-linear steppers allow users to enter a multi-step flow at any point.
@@ -43,17 +46,13 @@ We've used the `StepButton` here to demonstrate clickable step labels as well as
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
-## Horizontal Linear - Alternative Label
-
-Labels can be placed below the step icon by setting the `alternativeLabel` property on the `Stepper` component.
+### Non Linear - Alternative Label
-{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
-
-## Horizontal Non Linear - Alternative Label
+Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
{{"demo": "pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js"}}
-## Horizontal Non Linear - Error Step
+### Non Linear - Error Step
{{"demo": "pages/components/steppers/HorizontalNonLinearStepperWithError.js"}}
@@ -61,37 +60,29 @@ Labels can be placed below the step icon by setting the `alternativeLabel` prope
{{"demo": "pages/components/steppers/VerticalLinearStepper.js"}}
-## Customized Stepper
-
-Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
-
-This component uses a customized `StepConnector` element that changes border color based on the `active` and `completed` state.
-
-{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
-
## Mobile Stepper
This component implements a compact stepper suitable for a mobile device. See [mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) for its inspiration.
-### Mobile Stepper - Text
+### Text
This is essentially a back/next button positioned correctly. You must implement the textual description yourself, however, an example is provided below for reference.
{{"demo": "pages/components/steppers/TextMobileStepper.js"}}
-### Mobile Stepper - Text with Carousel effect
+### Text with Carousel effect
This demo is very similar to the previous, the difference is the usage of [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) to make the transition of steps.
{{"demo": "pages/components/steppers/SwipeableTextMobileStepper.js"}}
-### Mobile Stepper - Dots
+### Dots
Use dots when the number of steps isn’t large.
{{"demo": "pages/components/steppers/DotsMobileStepper.js"}}
-### Mobile Stepper - Progress
+### Progreso
Use a progress bar when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps).
diff --git a/docs/src/pages/components/steppers/steppers-fr.md b/docs/src/pages/components/steppers/steppers-fr.md
index e6642d548aea73..7b3f3e2c71975a 100644
--- a/docs/src/pages/components/steppers/steppers-fr.md
+++ b/docs/src/pages/components/steppers/steppers-fr.md
@@ -9,23 +9,14 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco
[Steppers](https://material.io/archive/guidelines/components/steppers.html) display progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved.
-**Types of Steps**
-
-- Editable
-- Non-editable
-- Mobile
-- Optional
-
-**Types of Steppers**
-
-- Horizontal
-- Vertical
-- Linear
-- Non-linear
+- **Types of Steps**: Editable, Non-editable, Mobile, Optional
+- **Types of Steppers**: Horizontal, Vertical, Linear, Non-linear
> **Note:** Steppers are no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support them.
-## Horizontal Linear
+## Horizontal Stepper
+
+### Linear
The `Stepper` can be controlled by passing the current step index (zero-based) as the `activeStep` property. `Stepper` orientation is set using the `orientation` property.
@@ -33,7 +24,19 @@ This example also shows the use of an optional step by placing the `optional` pr
{{"demo": "pages/components/steppers/HorizontalLinearStepper.js"}}
-## Horizontal Non-linear
+### Linear - Alternative Label
+
+Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
+
+{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
+
+### Customized Stepper
+
+Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+
+{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
+
+### Non-linear
Non-linear steppers allow users to enter a multi-step flow at any point.
@@ -43,17 +46,13 @@ We've used the `StepButton` here to demonstrate clickable step labels as well as
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
-## Horizontal Linear - Alternative Label
-
-Labels can be placed below the step icon by setting the `alternativeLabel` property on the `Stepper` component.
-
-{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
+### Non Linear - Alternative Label
-## Horizontal Non Linear - Alternative Label
+Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
{{"demo": "pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js"}}
-## Horizontal Non Linear - Error Step
+### Non Linear - Error Step
{{"demo": "pages/components/steppers/HorizontalNonLinearStepperWithError.js"}}
@@ -61,37 +60,29 @@ Labels can be placed below the step icon by setting the `alternativeLabel` prope
{{"demo": "pages/components/steppers/VerticalLinearStepper.js"}}
-## Customized Stepper
-
-Voici un exemple de personnalisation du composant. Vous pouvez en apprendre plus à ce sujet sur la [page de documentation de personnalisation](/customization/components/).
-
-This component uses a customized `StepConnector` element that changes border color based on the `active` and `completed` state.
-
-{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
-
## Mobile Stepper
This component implements a compact stepper suitable for a mobile device. See [mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) for its inspiration.
-### Mobile Stepper - Text
+### Text
This is essentially a back/next button positioned correctly. You must implement the textual description yourself, however, an example is provided below for reference.
{{"demo": "pages/components/steppers/TextMobileStepper.js"}}
-### Mobile Stepper - Text with Carousel effect
+### Text with Carousel effect
This demo is very similar to the previous, the difference is the usage of [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) to make the transition of steps.
{{"demo": "pages/components/steppers/SwipeableTextMobileStepper.js"}}
-### Mobile Stepper - Dots
+### Dots
Use dots when the number of steps isn’t large.
{{"demo": "pages/components/steppers/DotsMobileStepper.js"}}
-### Mobile Stepper - Progress
+### Barres de progression
Use a progress bar when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps).
diff --git a/docs/src/pages/components/steppers/steppers-ja.md b/docs/src/pages/components/steppers/steppers-ja.md
index a9901d4518e90f..1a52e399404734 100644
--- a/docs/src/pages/components/steppers/steppers-ja.md
+++ b/docs/src/pages/components/steppers/steppers-ja.md
@@ -9,23 +9,14 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco
[Steppers](https://material.io/archive/guidelines/components/steppers.html) display progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved.
-**Types of Steps**
-
-- Editable
-- Non-editable
-- Mobile
-- Optional
-
-**Types of Steppers**
-
-- Horizontal
-- Vertical
-- Linear
-- Non-linear
+- **Types of Steps**: Editable, Non-editable, Mobile, Optional
+- **Types of Steppers**: Horizontal, Vertical, Linear, Non-linear
> **Note:** Steppers are no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support them.
-## Horizontal Linear
+## Horizontal Stepper
+
+### Linear
The `Stepper` can be controlled by passing the current step index (zero-based) as the `activeStep` property. `Stepper` orientation is set using the `orientation` property.
@@ -33,7 +24,19 @@ This example also shows the use of an optional step by placing the `optional` pr
{{"demo": "pages/components/steppers/HorizontalLinearStepper.js"}}
-## Horizontal Non-linear
+### Linear - Alternative Label
+
+Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
+
+{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
+
+### Customized Stepper
+
+コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
+
+{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
+
+### Non-linear
Non-linear steppers allow users to enter a multi-step flow at any point.
@@ -43,17 +46,13 @@ We've used the `StepButton` here to demonstrate clickable step labels as well as
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
-## Horizontal Linear - Alternative Label
-
-Labels can be placed below the step icon by setting the `alternativeLabel` property on the `Stepper` component.
-
-{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
+### Non Linear - Alternative Label
-## Horizontal Non Linear - Alternative Label
+Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
{{"demo": "pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js"}}
-## Horizontal Non Linear - Error Step
+### Non Linear - Error Step
{{"demo": "pages/components/steppers/HorizontalNonLinearStepperWithError.js"}}
@@ -61,37 +60,29 @@ Labels can be placed below the step icon by setting the `alternativeLabel` prope
{{"demo": "pages/components/steppers/VerticalLinearStepper.js"}}
-## Customized Stepper
-
-コンポーネントのカスタマイズ例をいくつか示します。あなたは[上書きドキュメントのページ](/customization/components/)でこれについてもっと詳しく知ることができます。
-
-This component uses a customized `StepConnector` element that changes border color based on the `active` and `completed` state.
-
-{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
-
## Mobile Stepper
This component implements a compact stepper suitable for a mobile device. See [mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) for its inspiration.
-### Mobile Stepper - Text
+### Text
This is essentially a back/next button positioned correctly. You must implement the textual description yourself, however, an example is provided below for reference.
{{"demo": "pages/components/steppers/TextMobileStepper.js"}}
-### Mobile Stepper - Text with Carousel effect
+### Text with Carousel effect
This demo is very similar to the previous, the difference is the usage of [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) to make the transition of steps.
{{"demo": "pages/components/steppers/SwipeableTextMobileStepper.js"}}
-### Mobile Stepper - Dots
+### Dots
Use dots when the number of steps isn’t large.
{{"demo": "pages/components/steppers/DotsMobileStepper.js"}}
-### Mobile Stepper - Progress
+### Progress
Use a progress bar when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps).
diff --git a/docs/src/pages/components/steppers/steppers-pt.md b/docs/src/pages/components/steppers/steppers-pt.md
index ea9efe75fa6695..0a00602cc32922 100644
--- a/docs/src/pages/components/steppers/steppers-pt.md
+++ b/docs/src/pages/components/steppers/steppers-pt.md
@@ -5,27 +5,18 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco
# Assistente
-Assistentes representam progresso através de etapas numeradas. Ele fornece um fluxo de trabalho de passo a passo.
+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. Elas também podem ser usadas para navegação. Assistentes podem exibir uma mensagem de feedback transiente depois que uma etapa é salva.
-**Tipos de etapa**
+- **Types of Steps**: Editable, Non-editable, Mobile, Optional
+- **Types of Steppers**: Horizontal, Vertical, Linear, Non-linear
-- Editável
-- Não editável
-- Mobile
-- Opcional
+> **Nota:** Os assistentes não estão mais documentados nas [diretrizes do Material Design](https://material.io/), mas o Material-UI continuará a suportá-los.
-**Tipos de assistentes**
+## Horizontal Stepper
-- Horizontal
-- Vertical
-- Linear
-- Não linear
-
-> **Note:** Steppers are no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support them.
-
-## Horizontal Linear
+### Linear
O assistente (`Stepper`) pode ser controlado passando o índice da etapa atual (baseado em zero) com a propriedade `activeStep`. A orientação do asisstente (`Stepper`) é definida usando a propriedade `orientation`.
@@ -33,7 +24,19 @@ Este exemplo também mostra o uso de uma etapa opcional, colocando a propriedade
{{"demo": "pages/components/steppers/HorizontalLinearStepper.js"}}
-## Horizontal não linear
+### Linear - Alternative Label
+
+Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
+
+{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
+
+### Assistente customizado
+
+Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
+
+{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
+
+### Não linear
Os assistentes não lineares permitem que os usuários insiram um fluxo de várias etapas a qualquer momento.
@@ -43,17 +46,13 @@ Nós usamos um `StepButton` aqui para demonstrar rótulos de etapa clicáveis, b
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
-## Horizontal Linear - Rótulo Alternativo
-
-Os rótulos podem ser colocados abaixo do ícone da etapa, definindo a propriedade `alternativeLabel` no componente `Stepper`.
+### Non Linear - Alternative Label
-{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
-
-## Horizontal Não Linear - Rótulo Alternativo
+Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
{{"demo": "pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js"}}
-## Horizontal não linear - Etapa com erro
+### Non Linear - Error Step
{{"demo": "pages/components/steppers/HorizontalNonLinearStepperWithError.js"}}
@@ -61,37 +60,29 @@ Os rótulos podem ser colocados abaixo do ícone da etapa, definindo a proprieda
{{"demo": "pages/components/steppers/VerticalLinearStepper.js"}}
-## Assistente customizado
-
-Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescrita](/customization/components/).
-
-Este componente usa um elemento `StepConnector` customizado que altera a cor da borda com base nos estados `active` e `completed`.
-
-{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
-
## Assistente Mobile
Este componente implementa um assistente compacto adequado para um dispositivo mobile. Veja [mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) para essa inspiração.
-### Assistente Mobile - Texto
+### Text
-Este é essencialmente um botão voltar/próximo posicionado corretamente. Você deve implementar a descrição textual por conta própria, no entanto, um exemplo é fornecido abaixo para referência.
+Este é essencialmente um botão de voltar/próximo posicionado corretamente. Você deve implementar a descrição textual por conta própria, no entanto, um exemplo é fornecido abaixo para referência.
{{"demo": "pages/components/steppers/TextMobileStepper.js"}}
-### Assistente Mobile - Texto com efeito Carrossel
+### Text with Carousel effect
Esta demonstração é muito similiar a anterior, a diferença é o uso de [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) para fazer a transição de etapas.
{{"demo": "pages/components/steppers/SwipeableTextMobileStepper.js"}}
-### Assistente Mobile - Pontos
+### Dots
Use pontos quando o número de etapas não for grande.
{{"demo": "pages/components/steppers/DotsMobileStepper.js"}}
-### Assistente Mobile - Progresso
+### Progresso
Use uma barra de progresso quando houver muitas etapas, ou se houver etapas que precisem ser inseridas durante o processo (com base nas respostas de etapas anteriores).
diff --git a/docs/src/pages/components/steppers/steppers-ru.md b/docs/src/pages/components/steppers/steppers-ru.md
index 6ef58a4eff3c7d..365a519ad2ce5d 100644
--- a/docs/src/pages/components/steppers/steppers-ru.md
+++ b/docs/src/pages/components/steppers/steppers-ru.md
@@ -9,23 +9,14 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco
[Steppers](https://material.io/archive/guidelines/components/steppers.html) display progress through a sequence of logical and numbered steps. They may also be used for navigation. Steppers may display a transient feedback message after a step is saved.
-**Types of Steps**
-
-- Editable
-- Non-editable
-- Mobile
-- Optional
-
-**Types of Steppers**
-
-- Horizontal
-- Vertical
-- Linear
-- Non-linear
+- **Types of Steps**: Editable, Non-editable, Mobile, Optional
+- **Types of Steppers**: Horizontal, Vertical, Linear, Non-linear
> **Note:** Steppers are no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support them.
-## Horizontal Linear
+## Horizontal Stepper
+
+### Linear
The `Stepper` can be controlled by passing the current step index (zero-based) as the `activeStep` property. `Stepper` orientation is set using the `orientation` property.
@@ -33,7 +24,19 @@ This example also shows the use of an optional step by placing the `optional` pr
{{"demo": "pages/components/steppers/HorizontalLinearStepper.js"}}
-## Horizontal Non-linear
+### Linear - Alternative Label
+
+Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
+
+{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
+
+### Customized Stepper
+
+Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
+
+{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
+
+### Non-linear
Non-linear steppers allow users to enter a multi-step flow at any point.
@@ -43,17 +46,13 @@ We've used the `StepButton` here to demonstrate clickable step labels as well as
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
-## Horizontal Linear - Alternative Label
-
-Labels can be placed below the step icon by setting the `alternativeLabel` property on the `Stepper` component.
+### Non Linear - Alternative Label
-{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
-
-## Horizontal Non Linear - Alternative Label
+Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
{{"demo": "pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js"}}
-## Horizontal Non Linear - Error Step
+### Non Linear - Error Step
{{"demo": "pages/components/steppers/HorizontalNonLinearStepperWithError.js"}}
@@ -61,37 +60,29 @@ Labels can be placed below the step icon by setting the `alternativeLabel` prope
{{"demo": "pages/components/steppers/VerticalLinearStepper.js"}}
-## Customized Stepper
-
-Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
-
-This component uses a customized `StepConnector` element that changes border color based on the `active` and `completed` state.
-
-{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
-
## Mobile Stepper
This component implements a compact stepper suitable for a mobile device. See [mobile steps](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps) for its inspiration.
-### Mobile Stepper - Text
+### Text
This is essentially a back/next button positioned correctly. You must implement the textual description yourself, however, an example is provided below for reference.
{{"demo": "pages/components/steppers/TextMobileStepper.js"}}
-### Mobile Stepper - Text with Carousel effect
+### Text with Carousel effect
This demo is very similar to the previous, the difference is the usage of [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) to make the transition of steps.
{{"demo": "pages/components/steppers/SwipeableTextMobileStepper.js"}}
-### Mobile Stepper - Dots
+### Dots
Use dots when the number of steps isn’t large.
{{"demo": "pages/components/steppers/DotsMobileStepper.js"}}
-### Mobile Stepper - Progress
+### Прогресс
Use a progress bar when there are many steps, or if there are steps that need to be inserted during the process (based on responses to earlier steps).
diff --git a/docs/src/pages/components/steppers/steppers-zh.md b/docs/src/pages/components/steppers/steppers-zh.md
index f9adc20f56a9b0..be6d41f71a5b1a 100644
--- a/docs/src/pages/components/steppers/steppers-zh.md
+++ b/docs/src/pages/components/steppers/steppers-zh.md
@@ -5,27 +5,18 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco
# Steppers（步骤条）
-步骤条通过编号的步骤来表示流程。它提供了类似向导的工作流程。
+步进器通过数字编号表示进度。 It provides a wizard-like workflow.
[步骤条](https://material.io/archive/guidelines/components/steppers.html) 通过一系列逻辑和编号的步骤来显示当前操作的进度。 它们也可用于导航。 在保存一个步骤后，步骤条可能会显示短暂的反馈信息。
-**步骤的类型**
-
-- 可编辑的
-- 不可编辑的
-- 移动端支持的
-- 可选的
-
-**步骤条的类型**
-
-- 水平的步骤条
-- 垂直的步骤条
-- 线性的步骤条
-- 非线性的步骤条
+- **Types of Steps**: Editable, Non-editable, Mobile, Optional
+- **Types of Steppers**: Horizontal, Vertical, Linear, Non-linear
> **Note:** Steppers are no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support them.
-## 水平的线性步骤条
+## Horizontal Stepper
+
+### 线性进度条
您可以在 `activeStep` 属性中传入一个初始值为0的当前步骤值来控制 `步骤条`。 您也可以借助 `orientation` 属性来设置 `步骤条 的方向。
@@ -33,7 +24,19 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco
{{"demo": "pages/components/steppers/HorizontalLinearStepper.js"}}
-## 水平的非线性步进器
+### Linear - Alternative Label
+
+Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
+
+{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
+
+### 定制步进器
+
+以下是自定义组件的一个示例。 您可以在[样式重写文档页](/customization/components/)中了解有关此内容的更多信息。
+
+{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
+
+### 非线性的步骤条
非线性步进器允许用户在任何点输入多步流程。
@@ -43,17 +46,13 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco
{{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js"}}
-## 水平线性 - 可替换标签
-
-通过在` Stepper `组件上设置` alternativeLabel `属性，可以将标签放置在步骤图标下方。
-
-{{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js"}}
+### Non Linear - Alternative Label
-## 水平非线性 - 可替换标签
+Labels can be placed below the step icon by setting the `alternativeLabel` prop on the `Stepper` component.
{{"demo": "pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js"}}
-## 水平非线性 - 错误步骤展示
+### Non Linear - Error Step
{{"demo": "pages/components/steppers/HorizontalNonLinearStepperWithError.js"}}
@@ -61,37 +60,29 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco
{{"demo": "pages/components/steppers/VerticalLinearStepper.js"}}
-## 定制步进器
-
-以下是自定义组件的一个示例。您可以在[重写文档页面](/customization/components/)中了解有关此内容的更多信息。
-
-此组件使用自定义的 `StepConnector` 元素, 它根据 `active` 更改边框颜色, 并 ` completed ` 状态。
-
-{{"demo": "pages/components/steppers/CustomizedSteppers.js"}}
-
## 移动设备上的步进器
该组件实现了适用于移动设备的紧凑型步进器。 有关其详情, 请参阅 [移动步骤](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps)。
-### 移动设备的步进器 - 文字
+### Text
-这本质上是被定位是一个后退/前进按钮。您必须自己实现文本描述，不过下面提供了一个示例供参考。
+This is essentially a back/next button positioned correctly. You must implement the textual description yourself, however, an example is provided below for reference.
{{"demo": "pages/components/steppers/TextMobileStepper.js"}}
-### 移动设备步进器 - 带轮播效果
+### Text with Carousel effect
这个实例与之前的非常相似，不同之处在于使用[ react-swipeable-views ](https://github.com/oliviertassinari/react-swipeable-views)以进行步骤转换。
{{"demo": "pages/components/steppers/SwipeableTextMobileStepper.js"}}
-### 移动设备的步进器 - 指示点
+### Dots
当步骤的数字不是特别明显时使用点状标记。
{{"demo": "pages/components/steppers/DotsMobileStepper.js"}}
-### 移动设备步进器 - 进度条
+### Progress（进度条）
当有许多步骤时，或者如果在此过程中需要插入步骤（基于对早期步骤的响应），请使用进度条。
diff --git a/docs/src/pages/components/switches/switches-ja.md b/docs/src/pages/components/switches/switches-ja.md
index 13eb1ba9d12a2b..5d9ac46be8a4f8 100644
--- a/docs/src/pages/components/switches/switches-ja.md
+++ b/docs/src/pages/components/switches/switches-ja.md
@@ -31,7 +31,7 @@ Here are some examples of customizing the component. 詳細については、 [
## サイズ
-Fancy smaller switches? Use the `size` property.
+Fancy smaller switches? `size`プロパティを使用します。
{{"demo": "pages/components/switches/SwitchesSize.js"}}
diff --git a/docs/src/pages/components/switches/switches-pt.md b/docs/src/pages/components/switches/switches-pt.md
index 49702d26f8c01e..889e5d443793f0 100644
--- a/docs/src/pages/components/switches/switches-pt.md
+++ b/docs/src/pages/components/switches/switches-pt.md
@@ -3,7 +3,7 @@ title: Componente React para Interruptores
components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel
---
-# Interruptores
+# Opções
Interruptores alternam o estado de uma única configuração ligado ou desligado.
@@ -31,7 +31,7 @@ Aqui esta um exemplo de customização do componente. Você pode aprender mais s
## Tamanhos
-Fancy smaller switches? Use the `size` property.
+Gosta de interruptores menores? Use a propriedade `size`.
{{"demo": "pages/components/switches/SwitchesSize.js"}}
@@ -49,7 +49,7 @@ Quando um rótulo não pode ser usado, é necessário adicionar um atributo dire
```jsx
Daten-Tabellen zeigen Listen von Daten an. Diese können vollständig benutzerdefiniert gestaltet werden.
+Data tables display sets of data. They can be fully customized.
[Daten-Tabellen](https://material.io/design/components/data-tables.html) zeigen Informationen an, sodass sie einfach zu lesen sind und Nutzern das Anzeigen von Mustern und Ansichten ermöglicht. Sie können wie Karten in den Primär-Inhalt eingebettet werden.
diff --git a/docs/src/pages/components/tables/tables-es.md b/docs/src/pages/components/tables/tables-es.md
index 91772b03c1d19e..e1fbe74b2fa51b 100644
--- a/docs/src/pages/components/tables/tables-es.md
+++ b/docs/src/pages/components/tables/tables-es.md
@@ -5,7 +5,7 @@ components: Table, TableBody, TableCell, TableFooter, TableHead, TablePagination
# Tablas
-Las tablas de datos muestran conjuntos de datos. Pueden ser totalmente personalizadas.
+Data tables display sets of data. They can be fully customized.
[Las tablas de datos](https://material.io/design/components/data-tables.html) muestran información de una manera que es fácil de ojear, de modo que los usuarios pueden buscar patrones e información. Se pueden integrar en contenido principal, tal como tarjetas.
diff --git a/docs/src/pages/components/tables/tables-fr.md b/docs/src/pages/components/tables/tables-fr.md
index 43dd296ca745cf..fb8bbdb92fe3ff 100644
--- a/docs/src/pages/components/tables/tables-fr.md
+++ b/docs/src/pages/components/tables/tables-fr.md
@@ -5,7 +5,7 @@ components: Table, TableBody, TableCell, TableFooter, TableHead, TablePagination
# Table (Tableaux)
-Les tableaux de données affichent des ensembles de données. Ils peuvent être entièrement personnalisés.
+Data tables display sets of data. They can be fully customized.
[Les tableaux de données](https://material.io/design/components/data-tables.html) affichent les informations de manière facile à analyser, afin que les utilisateurs puissent rechercher des modèles et des informations. Ils peuvent être intégrés au contenu principal, tel que les cartes.
@@ -47,7 +47,7 @@ La table a reçu une largeur fixe pour illustrer le défilement horizontal. Afin
## Tableaux Personnalisés
-Voici un exemple de personnalisation du composant. Vous pouvez en apprendre plus à ce sujet sur la [page de documentation à propos personnalisation](/customization/components/).
+Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
{{"demo": "pages/components/tables/CustomizedTable.js"}}
diff --git a/docs/src/pages/components/tables/tables-ja.md b/docs/src/pages/components/tables/tables-ja.md
index a3f4a5cbc5c909..983e4ac47aa1b3 100644
--- a/docs/src/pages/components/tables/tables-ja.md
+++ b/docs/src/pages/components/tables/tables-ja.md
@@ -5,7 +5,7 @@ components: Table, TableBody, TableCell, TableFooter, TableHead, TablePagination
# Tables
-データテーブルにはデータセットが表示されます。完全にカスタマイズすることができます。
+Data tables display sets of data. They can be fully customized.
[Data tables](https://material.io/design/components/data-tables.html) は情報を見やすく表示する方法です。 Cardなどの他のプライマリーコンテンツを埋め込むことができます。
@@ -47,7 +47,7 @@ Data tableの上部には、列名をリストするヘッダー行があり、
## Customized tables
-コンポーネントのカスタマイズ例をいくつか示します。あなたはこれについてもっと詳しく知ることができます [上書きドキュメントのページ](/customization/components/)。
+コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/tables/CustomizedTables.js"}}
@@ -65,7 +65,7 @@ Data tableの上部には、列名をリストするヘッダー行があり、
## Virtualized Table
-次の例では、 ` Table ` コンポーネントで [react-window](https://github.com/bvaughn/react-virtualized) を使用する方法を示します。 これは200行をレンダリングし、より多くを簡単に処理できます。 仮想化はパフォーマンスの問題に役立ちます。
+次の例では、 ` Table ` コンポーネントで [react-virtualized](https://github.com/bvaughn/react-virtualized) を使用する方法を示します。 これは200行をレンダリングし、より多くを簡単に処理できます。 仮想化はパフォーマンスの問題に役立ちます。
{{"demo": "pages/components/tables/ReactVirtualizedTable.js"}}
diff --git a/docs/src/pages/components/tables/tables-pt.md b/docs/src/pages/components/tables/tables-pt.md
index e26bbbbe26218a..1e6220a5ee707e 100644
--- a/docs/src/pages/components/tables/tables-pt.md
+++ b/docs/src/pages/components/tables/tables-pt.md
@@ -5,7 +5,7 @@ components: Table, TableBody, TableCell, TableFooter, TableHead, TablePagination
# Tabelas
-Tabelas de dados exibem um conjuntos de dados. Eles podem ser totalmente personalizados.
+Tabelas exibem conjuntos de dados. Eles podem ser totalmente customizadas.
[Tabelas de dados](https://material.io/design/components/data-tables.html) apresentam informações de uma forma fácil de verificar, de modo que os usuários podem procurar por padrões e percepções. Elas podem ser incorporadas no conteúdo principal, assim como Cartões.
@@ -47,7 +47,7 @@ A tabela recebeu uma largura fixa para demonstrar a rolagem horizontal. Para imp
## Tabelas Customizadas
-Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de substituições](/customization/components/).
+Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
{{"demo": "pages/components/tables/CustomizedTables.js"}}
diff --git a/docs/src/pages/components/tables/tables-ru.md b/docs/src/pages/components/tables/tables-ru.md
index 0339631dfdcd15..76167c886b4b71 100644
--- a/docs/src/pages/components/tables/tables-ru.md
+++ b/docs/src/pages/components/tables/tables-ru.md
@@ -5,7 +5,7 @@ components: Table, TableBody, TableCell, TableFooter, TableHead, TablePagination
# Таблицы
-Таблицы отображают массивы данных. Они могут быть полностью кастомизированны.
+Data tables display sets of data. They can be fully customized.
[Таблицы](https://material.io/design/components/data-tables.html) отображают информацию так, чтобы ее было легко воспринимать визуально. Так чтобы пользователи видели шаблоны отображения данных. Они могут быть встроены в основной контент, например в карточки.
diff --git a/docs/src/pages/components/tables/tables-zh.md b/docs/src/pages/components/tables/tables-zh.md
index a24ab2ece33da6..5a51c25af650e4 100644
--- a/docs/src/pages/components/tables/tables-zh.md
+++ b/docs/src/pages/components/tables/tables-zh.md
@@ -1,11 +1,11 @@
---
-title: React Table（表格）组件
+title: React 表格组件
components: Table, TableBody, TableCell, TableFooter, TableHead, TablePagination, TableRow, TableSortLabel
---
# Table（表格）
-Data tables（数据表格）用于展示一系列的数据集。表格可以完全自定义开发。
+Data tables display sets of data. They can be fully customized.
[数据表格](https://material.io/design/components/data-tables.html)以一种一目了然地方式显示信息，这便于用户寻找一些规律和深入的见解。 表格可以被内嵌在主要内容中，如 cards（卡片）。
@@ -47,7 +47,7 @@ components: Table, TableBody, TableCell, TableFooter, TableHead, TablePagination
## 自定义表格
-以下是自定义组件的一个示例。您可以在[重写文档页面](/customization/components/)中了解有关此内容的更多信息。
+以下是自定义组件的一个示例。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/tables/CustomizedTables.js"}}
@@ -75,7 +75,7 @@ components: Table, TableBody, TableCell, TableFooter, TableHead, TablePagination
### material-table
- 
+ 
[material-table](https://github.com/mbrn/material-table) 是一款 React 的简单且强大的数据库。它基于 Material-UI Table 并且添加了一些额外的功能。 它们支持了不同的用户案例（可编辑，筛选，分组，排序，选择，国际化，树形数据等等）。 您应该看一下。
diff --git a/docs/src/pages/components/tabs/tabs-de.md b/docs/src/pages/components/tabs/tabs-de.md
index ac8947cf688631..508722b2284784 100644
--- a/docs/src/pages/components/tabs/tabs-de.md
+++ b/docs/src/pages/components/tabs/tabs-de.md
@@ -17,7 +17,7 @@ Ein einfaches Beispiel ohne Verzierungen.
### Umwickelte Tabs
-Lange Tab-Beschriftungen werden automatisch umgebrochen. Sollte die Beschriftung für den Tab zu lang sein, läuft sie über und der Text ist nicht sichtbar.
+Long labels will automatically wrap on tabs. If the label is too long for the tab, it will overflow and the text will not be visible.
{{"demo": "pages/components/tabs/TabsWrappedLabel.js"}}
@@ -47,7 +47,7 @@ Die Eigenschaft `centered` sollte für kleinere Ansichten verwendet werden.
### Automatische Scroll-Tasten
-Die linken und rechten Bildlauftasten werden automatisch auf dem Desktop angezeigt und auf dem Handy ausgeblendet. (basierend auf der Breite des Ansichtsfensters)
+Left and right scroll buttons will automatically be presented on desktop and hidden on mobile. (based on viewport width)
{{"demo": "pages/components/tabs/ScrollableTabsButtonAuto.js"}}
@@ -59,7 +59,7 @@ Die linken und rechten Bildlauftasten werden unabhängig von der Breite des Ansi
### Scrolltasten verhindern
-Linke und rechte Bildlauftasten werden niemals angezeigt. Der gesamte Bildlauf muss durch Benutzeragenten-Bildlaufmechanismen (z. B. Wischen nach links / rechts, Shift-Mausrad usw.) eingeleitet werden
+Left and right scroll buttons will never be presented. All scrolling must be initiated through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.)
{{"demo": "pages/components/tabs/ScrollableTabsButtonPrevent.js"}}
@@ -69,11 +69,15 @@ Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf de
{{"demo": "pages/components/tabs/CustomizedTabs.js"}}
+👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/tabs).
+## Vertical tabs
+
+{{"demo": "pages/components/tabs/VerticalTabs.js"}}
## Nav-Tabs
-Standardmäßig verwenden Tabs ein `Button` -Element, aber Sie können Ihren eigenen benutzerdefinierten Tag oder eine Komponente zur Verfügung stellen. Hier ein Beispiel für die Implementierung der Tabnavigation:
+By default tabs use a `button` element, but you can provide your own custom tag or component. Here's an example of implementing tabbed navigation:
{{"demo": "pages/components/tabs/NavTabs.js"}}
diff --git a/docs/src/pages/components/tabs/tabs-es.md b/docs/src/pages/components/tabs/tabs-es.md
index 04e7a36a459b19..8b9d24e24cdd7f 100644
--- a/docs/src/pages/components/tabs/tabs-es.md
+++ b/docs/src/pages/components/tabs/tabs-es.md
@@ -69,7 +69,11 @@ Here is an example of customizing the component. You can learn more about this i
{{"demo": "pages/components/tabs/CustomizedTabs.js"}}
+👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/tabs).
+## Vertical tabs
+
+{{"demo": "pages/components/tabs/VerticalTabs.js"}}
## Nav Tabs
diff --git a/docs/src/pages/components/tabs/tabs-fr.md b/docs/src/pages/components/tabs/tabs-fr.md
index c4879a18cd7219..d75a24c34211db 100644
--- a/docs/src/pages/components/tabs/tabs-fr.md
+++ b/docs/src/pages/components/tabs/tabs-fr.md
@@ -69,7 +69,11 @@ Here is an example of customizing the component. You can learn more about this i
{{"demo": "pages/components/tabs/CustomizedTabs.js"}}
+👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/tabs).
+## Vertical tabs
+
+{{"demo": "pages/components/tabs/VerticalTabs.js"}}
## Nav Tabs
diff --git a/docs/src/pages/components/tabs/tabs-ja.md b/docs/src/pages/components/tabs/tabs-ja.md
index 64d34f9d5afae1..760f2608057577 100644
--- a/docs/src/pages/components/tabs/tabs-ja.md
+++ b/docs/src/pages/components/tabs/tabs-ja.md
@@ -65,11 +65,15 @@ Left and right scroll buttons will never be presented. All scrolling must be ini
## Customized tabs
-コンポーネントのカスタマイズ例をいくつか示します。あなたは[上書きドキュメントのページ](/customization/components/)でこれについてもっと詳しく知ることができます。
+コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/tabs/CustomizedTabs.js"}}
+👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/tabs).
+## Vertical tabs
+
+{{"demo": "pages/components/tabs/VerticalTabs.js"}}
## Nav Tabs
diff --git a/docs/src/pages/components/tabs/tabs-pt.md b/docs/src/pages/components/tabs/tabs-pt.md
index 11507870993de2..1af96463ac6c5c 100644
--- a/docs/src/pages/components/tabs/tabs-pt.md
+++ b/docs/src/pages/components/tabs/tabs-pt.md
@@ -15,9 +15,9 @@ Um exemplo simples sem frescuras.
{{"demo": "pages/components/tabs/SimpleTabs.js"}}
-### Etiquetas embrulhadas
+### Rótulos com quebras
-Os rótulos longos serão agrupados automaticamente nas guias. Se o marcador for muito longo para a guia, ele será excedido e o texto não ficará visível.
+Os rótulos longos serão quebrados automaticamente nas guias. Se o rótulo for muito longo para a guia, ele irá exceder e o texto não ficará visível.
{{"demo": "pages/components/tabs/TabsWrappedLabel.js"}}
@@ -47,7 +47,7 @@ A propriedade `centered` deve ser usada para views maiores.
### Botões de rolagem automáticos
-Botões de rolagem para esquerda e direita serão apresentados automaticamente em dispositivos desktop e ocultados em dispositivos mobile. (baseado na largura de exibição do dispositivo)
+Botões de rolagem para a esquerda e para a direita serão automaticamente apresentados em visualizações desktop e ocultos em móveis. (com base na largura da janela de visualização)
{{"demo": "pages/components/tabs/ScrollableTabsButtonAuto.js"}}
@@ -59,21 +59,25 @@ Botões de rolagem para esquerda e direita serão apresentados independente da l
### Impedir botões de rolagem
-Botões de rolagem para esquerda e direita nunca serão exibidos. Toda e qualquer rolagem será iniciada através dos mecanismos do navegador do dispositivo (exemplo: arrastar para direita ou esquerda, roda do mouse + shipt, etc.)
+Botões de rolagem para a esquerda e para a direita nunca serão apresentados. Toda rolagem deve ser iniciada por meio de mecanismos de rolagem do agente do usuário (por exemplo, deslizar para a esquerda/direita, rolar scroll do mouse, etc.)
{{"demo": "pages/components/tabs/ScrollableTabsButtonPrevent.js"}}
## Guias customizadas
-Aqui está um exemplo de personalização do componente. Você pode aprender mais sobre isso na [página de documentação de substituições](/customization/components/).
+Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
{{"demo": "pages/components/tabs/CustomizedTabs.js"}}
+👑 Se você está procurando inspiração, você pode verificar [os exemplos de customização de MUI Treasury](https://mui-treasury.com/components/tabs).
+## Guias verticais
+
+{{"demo": "pages/components/tabs/VerticalTabs.js"}}
## Guias de navegação
-Por padrão as guias usam um elemento `button`, mas você pode definir sua própria tag ou seu próprio componente. Aqui vai um exemplo de implementação de guia de navegação:
+Por padrão, as guias usam um elemento `button`, mas você pode fornecer sua própria tag personalizada ou componente. Veja um exemplo de implementação da navegação por guias:
{{"demo": "pages/components/tabs/NavTabs.js"}}
diff --git a/docs/src/pages/components/tabs/tabs-ru.md b/docs/src/pages/components/tabs/tabs-ru.md
index ad69bbaf0f7522..3cbb6faad51634 100644
--- a/docs/src/pages/components/tabs/tabs-ru.md
+++ b/docs/src/pages/components/tabs/tabs-ru.md
@@ -69,7 +69,11 @@ Here is an example of customizing the component. You can learn more about this i
{{"demo": "pages/components/tabs/CustomizedTabs.js"}}
+👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/tabs).
+## Vertical tabs
+
+{{"demo": "pages/components/tabs/VerticalTabs.js"}}
## Nav Tabs
diff --git a/docs/src/pages/components/tabs/tabs-zh.md b/docs/src/pages/components/tabs/tabs-zh.md
index ae657974d069e2..8b45f5a036a6da 100644
--- a/docs/src/pages/components/tabs/tabs-zh.md
+++ b/docs/src/pages/components/tabs/tabs-zh.md
@@ -11,13 +11,13 @@ components: Tabs, Tab
## 简单选项卡
-一个没有多余装饰的简单例子
+一个没有多余装饰的简单例子。
{{"demo": "pages/components/tabs/SimpleTabs.js"}}
### 包裹标签
-长标签将自动换行标签。 如果标签的标签太长，它将溢出并且文本将不可见。
+Long labels will automatically wrap on tabs. If the label is too long for the tab, it will overflow and the text will not be visible.
{{"demo": "pages/components/tabs/TabsWrappedLabel.js"}}
@@ -47,7 +47,7 @@ components: Tabs, Tab
### 自动滚动按钮
-左右滚动按钮将自动显示在桌面上并隐藏在移动设备上。（基于视口宽度）
+Left and right scroll buttons will automatically be presented on desktop and hidden on mobile. (based on viewport width)
{{"demo": "pages/components/tabs/ScrollableTabsButtonAuto.js"}}
@@ -59,21 +59,25 @@ components: Tabs, Tab
### 防止滚动按钮
-永远不会出现左右滚动按钮。 必须通过用户代理滚动机制（例如左/右滑动，移位 - 鼠标滚轮等）启动所有滚动
+Left and right scroll buttons will never be presented. All scrolling must be initiated through user agent scrolling mechanisms (e.g. left/right swipe, shift-mousewheel, etc.)
{{"demo": "pages/components/tabs/ScrollableTabsButtonPrevent.js"}}
## Customized tabs
-以下是自定义组件的一个示例。您可以在[重写文档页面](/customization/components/)中了解有关此内容的更多信息。
+以下是自定义组件的一个示例。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/tabs/CustomizedTabs.js"}}
+👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/tabs).
+## Vertical tabs
+
+{{"demo": "pages/components/tabs/VerticalTabs.js"}}
## 导航选项卡
-默认情况下，选项卡使用`button`元素，但您可以提供自己的自定义标记或组件。 以下是实现选项卡式导航的示例：
+By default tabs use a `button` element, but you can provide your own custom tag or component. Here's an example of implementing tabbed navigation:
{{"demo": "pages/components/tabs/NavTabs.js"}}
diff --git a/docs/src/pages/components/text-fields/text-fields-de.md b/docs/src/pages/components/text-fields/text-fields-de.md
index 119630e2fd45ee..93a158f65f8b7c 100644
--- a/docs/src/pages/components/text-fields/text-fields-de.md
+++ b/docs/src/pages/components/text-fields/text-fields-de.md
@@ -7,7 +7,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
Text Felder lassen Nutzer Text eingeben und bearbeiten.
-[Text Felder](https://material.io/design/components/text-fields.html) erlauben Nutzern, Text in eine Benutzeroberfläche einzugeben. Sie erscheinen typischerweise in Formen und Dialogen.
+[Text fields](https://material.io/design/components/text-fields.html) allow users to enter text into a UI. They typically appear in forms and dialogs.
## Textfeld
@@ -79,6 +79,8 @@ Symbole können vorangestellt oder angehängt werden.
## Einschränkungen
+### Shrink
+
Der Status des Eingabe-Labels "Verkleinern" ist nicht immer korrekt. Das Eingabeetikett soll schrumpfen, sobald die Eingabe etwas anzeigt. Unter bestimmten Umständen können wir den Status "Schrumpfen" nicht ermitteln (Zahleneingabe, Datumseingabe, Stripe-Eingabe). Möglicherweise stellen Sie eine Überlappung fest.
@@ -95,15 +97,19 @@ oder
Contagem
```
+### Floating label
+
+The floating label is absolutely positioned, it won't impact the layout of the page. You need to make sure that the input is larger than the label to display correctly.
+
## Integration with 3rd party input libraries
-You can use third-party libraries to format an input. You have to provide a custom implementation of the `
diff --git a/docs/src/pages/components/text-fields/text-fields-es.md b/docs/src/pages/components/text-fields/text-fields-es.md
index d2497491a2ed8d..454bd03cc54121 100644
--- a/docs/src/pages/components/text-fields/text-fields-es.md
+++ b/docs/src/pages/components/text-fields/text-fields-es.md
@@ -7,7 +7,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
Los campos de texto permiten a los usuarios ingresar y editar texto.
-Los [campos de texto](https://material.io/design/components/text-fields.html) permiten a los usuarios ingresar texto en la interfaz de usuario. Usualmente aparecen en formularios y diálogos.
+[Text fields](https://material.io/design/components/text-fields.html) allow users to enter text into a UI. They typically appear in forms and dialogs.
## TextField
@@ -79,6 +79,8 @@ Iconos se pueden poner en frente o detrás del campo de texto.
## Limitaciones
+### Shrink
+
El estado "shrink" de la etiqueta del campo de texto no está siempre correcto. La etiqueta debe achicarse al momento que el campo demuestra algun texto. En algunas circunstancias, no se puede determinar el estado "shrink" (campo de números, campo de fecha y hora, campo de Stripe). Tal vez veas una superposición.
@@ -95,15 +97,19 @@ o
Contagem
```
+### Floating label
+
+The floating label is absolutely positioned, it won't impact the layout of the page. You need to make sure that the input is larger than the label to display correctly.
+
## Integration with 3rd party input libraries
-You can use third-party libraries to format an input. You have to provide a custom implementation of the `
` element with the `inputComponent` property.
+Se pueden utilizar librerías externas para formatear un campo de texto. Para ello, hay que proporcionar una implementación personalizada del elemento `
` con el atributo `inputComponent`.
El siguiente demo utiliza las librerías [react-text-mask](https://github.com/text-mask/text-mask) y [react-number-format](https://github.com/s-yadav/react-number-format). The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037).
{{"demo": "pages/components/text-fields/FormattedInputs.js"}}
-The provided input component should handle the `inputRef` property. The property should be called with a value that implements the following interface:
+El componente del campo de texto proporcionado debe manejar el atributo `inputRef`. The property should be called with a value that implements the following interface:
```ts
interface InputElement {
@@ -139,7 +145,7 @@ function MyInputComponent(props) {
## Accesibilidad
-Para facilitar la accesibilidad, ** el campo debe estar vinculado a la etiqueta y al texto de ayuda**. Los nodos DOM subyacentes deben tener esta estructura.
+In order for the text field to be accessible, **the input should be linked to the label and the helper text**. The underlying DOM nodes should have this structure.
```jsx
@@ -162,7 +168,7 @@ Para facilitar la accesibilidad, ** el campo debe estar vinculado a la etiqueta
## Proyectos relacionados
-Para usos más avanzados tal vez puedas sacarle partido a:
+Para usos más avanzados tal vez puedas aprovercharte de:
- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) Un conjunto de componentes contenedor para facilitar el uso de Material-UI junto a Redux Form.
- [formik-material-ui](https://github.com/stackworx/formik-material-ui) Enlaces para utilizar Material-UI con formik.
diff --git a/docs/src/pages/components/text-fields/text-fields-fr.md b/docs/src/pages/components/text-fields/text-fields-fr.md
index bbf51babc90738..93ec166330c820 100644
--- a/docs/src/pages/components/text-fields/text-fields-fr.md
+++ b/docs/src/pages/components/text-fields/text-fields-fr.md
@@ -7,7 +7,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
Les champs de texte permettent aux utilisateurs d'entrer et de modifier du texte.
-[Les champs de texte](https://material.io/design/components/text-fields.html) permettent aux utilisateurs de saisir du texte dans une interface utilisateur. Ils apparaissent généralement dans des formulaires et des boîtes de dialogue.
+[Text fields](https://material.io/design/components/text-fields.html) allow users to enter text into a UI. They typically appear in forms and dialogs.
## TextField
@@ -43,7 +43,7 @@ Vous avez peut-être également remarqué que certaines propriétés d'entrée H
## Inputs personnalisées
-Voici quelques exemples de personnalisation du composant. Vous pouvez en apprendre plus sur [la page de documentation de personnalisation](/customization/components/).
+Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
{{"demo": "pages/components/text-fields/CustomizedInputs.js"}}
@@ -79,6 +79,8 @@ Les icônes peuvent être spécifiées comme prédéfinies ou ajoutées.
## Restrictions
+### Shrink
+
Le label "shrink" n'est pas toujours correct. Le label d'input est supposé se réduire dès que l'input affiche quelque chose. Dans certaines circonstances, nous ne pouvons pas déterminer l'état de "réduction" (entrée de numéro, entrée de date / heure, entrée de bande). Vous remarquerez peut-être un chevauchement.
@@ -95,15 +97,19 @@ ou
Contagem
```
+### Floating label
+
+The floating label is absolutely positioned, it won't impact the layout of the page. You need to make sure that the input is larger than the label to display correctly.
+
## Integration with 3rd party input libraries
-You can use third-party libraries to format an input. You have to provide a custom implementation of the `
` element with the `inputComponent` property.
+Vous pouvez utiliser des bibliothèques tierces pour formater un input. Vous devez fournir une implémentation personnalisée de l'élément `
` avec la propriété `inputComponent`.
La démo suivante utilise les bibliothèques [react-text-mask](https://github.com/text-mask/text-mask) et [react-number-format](https://github.com/s-yadav/react-number-format). The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037).
{{"demo": "pages/demos/text-fields/FormattedInputs.js"}}
-The provided input component should handle the `inputRef` property. The property should be called with a value that implements the following interface:
+Le composantinput fourni doit gérer la propriété `inputRef`. The property should be called with a value that implements the following interface:
```ts
interface InputElement {
@@ -139,7 +145,7 @@ function MyInputComponent(props) {
## Accessibilité
-Pour que le champ de texte soit accessible, **le champ de texte doit être lié au label et au texte d'assistance**. Les nœuds DOM sous-jacents doivent avoir cette structure.
+In order for the text field to be accessible, **the input should be linked to the label and the helper text**. The underlying DOM nodes should have this structure.
```jsx
diff --git a/docs/src/pages/components/text-fields/text-fields-ja.md b/docs/src/pages/components/text-fields/text-fields-ja.md
index fda9784d3d9ea8..c6b06a334806e4 100644
--- a/docs/src/pages/components/text-fields/text-fields-ja.md
+++ b/docs/src/pages/components/text-fields/text-fields-ja.md
@@ -7,7 +7,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
Text fieldを使用すると、ユーザーはテキストを入力および編集できます。
-[Text field](https://material.io/design/components/text-fields.html) 、ユーザーはUIにテキストを入力できます。それらは通常フォームやダイアログに現れます。
+[Text fields](https://material.io/design/components/text-fields.html) allow users to enter text into a UI. They typically appear in forms and dialogs.
## TextField
@@ -15,7 +15,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
{{"demo": "pages/components/text-fields/TextFields.js"}}
-> **Note:** This version of the text field is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it.
+> **Note:** ：このバージョンのテキストフィールドについては、[Material Design guidelines](https://material.io/)では説明されていませんが、Material-UIでは引き続きサポートされます。
## Outlined
@@ -43,7 +43,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
## Customized inputs
-コンポーネントのカスタマイズ例をいくつか示します。あなたはこれについてもっと詳しく知ることができます [オーバライドドキュメントのページ](/customization/components/)。
+Here are some examples of customizing the component. 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/text-fields/CustomizedInputs.js"}}
@@ -79,6 +79,8 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
## 制限
+### Shrink
+
入力ラベルの「shrink」状態は必ずしも正しくありません。 入力が何かを表示しているとすぐに入力ラベルは縮小するはずです。 状況によっては、「shrink」状態（数値入力、日時入力、ストライプ入力）を判別できません。 重複があるかもしれません。
@@ -95,13 +97,17 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
Contagem
```
-## Integration with 3rd party input libraries
+### Floating label
+
+The floating label is absolutely positioned, it won't impact the layout of the page. You need to make sure that the input is larger than the label to display correctly.
+
+## サードパーティの入力ライブラリとの統合
-You can use third-party libraries to format an input. You have to provide a custom implementation of the `
` element with the `inputComponent` property.
+サードパーティのライブラリを使って入力をフォーマットすることができます。 `inputComponent` プロパティを使用して、 `
` 要素のカスタム実装を提供する必要があります。
-The following demo uses the [react-text-mask](https://github.com/text-mask/text-mask) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries. The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037).
+次のデモでは、[react-text-mask](https://github.com/text-mask/text-mask) と[react-number-format](https://github.com/s-yadav/react-number-format)ライブラリを使用します。 The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037).
-{{"demo": "pages/components/text-fields/FormattedInputs.js"}}
+{{"demo":"pages/components/text-fields/FormattedInputs.js"}}
The provided input component should handle the `inputRef` property. The property should be called with a value that implements the following interface:
@@ -164,6 +170,6 @@ In order for the text field to be accessible, **the input should be linked to th
より高度なユースケースのためにあなたは利用することができるかもしれません：
-- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) A set of wrapper components to facilitate using Material UI with Redux Form.
+- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) Redux FormでMaterial UIを使用しやすくするラッパーコンポーネントのセット。
- [formik-material-ui](https://github.com/stackworx/formik-material-ui) Bindings for using Material-UI with formik.
- [final-form-material-ui](https://github.com/Deadly0/final-form-material-ui) A set of wrapper components to facilitate using Material UI with Final Form.
\ No newline at end of file
diff --git a/docs/src/pages/components/text-fields/text-fields-pt.md b/docs/src/pages/components/text-fields/text-fields-pt.md
index a94b89ead96b86..49c1704f713dd8 100644
--- a/docs/src/pages/components/text-fields/text-fields-pt.md
+++ b/docs/src/pages/components/text-fields/text-fields-pt.md
@@ -7,7 +7,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
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://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.
## TextField
@@ -15,7 +15,7 @@ O componente wrapper `TextField` é um controle de formulário completo, incluin
{{"demo": "pages/components/text-fields/TextFields.js"}}
-> **Note:** This version of the text field is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it.
+> **Nota:** Esta versão do campo de texto não está mais documentada nas [diretrizes do Material Design](https://material.io/), mas Material-UI continuará a suportá-la.
## Delineado
@@ -43,7 +43,7 @@ Você também pode ter notado que algumas propriedades de entrada nativas do HTM
## Inputs Costumizados
-Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na [página de documentação de substituições](/customization/components/).
+Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
{{"demo": "pages/components/text-fields/CustomizedInputs.js"}}
@@ -79,6 +79,8 @@ A customização não para no CSS, você pode usar composição para criar compo
## Limitações
+### Shrink
+
O label de entrada "shrink" nem sempre está correto. O input label deve encolher assim que o input estiver exibindo algo. Em algumas circunstâncias, não podemos determinar o estado de "srink" (input numérico, input datetime, input Stripe). Você pode notar uma sobreposição.
@@ -95,15 +97,19 @@ ou
Contagem
```
-## Integration with 3rd party input libraries
+### Floating label
+
+The floating label is absolutely positioned, it won't impact the layout of the page. You need to make sure that the input is larger than the label to display correctly.
+
+## Integração com bibliotecas de input de terceiros
-You can use third-party libraries to format an input. You have to provide a custom implementation of the `
` element with the `inputComponent` property.
+Você pode usar bibliotecas de terceiros para formatar uma entrada. Você precisa fornecer uma implementação personalizada do elemento `
` com a propriedade `inputComponent`.
-A seguinte demonstração usa as bibliotecas [react-text-mask](https://github.com/text-mask/text-mask) e [react-number-format](https://github.com/s-yadav/react-number-format). The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037).
+A seguinte demonstração usa as bibliotecas [react-text-mask](https://github.com/text-mask/text-mask) e [react-number-format](https://github.com/s-yadav/react-number-format). O mesmo conceito pode ser aplicado para, [p. ex. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037).
{{"demo": "pages/components/text-fields/FormattedInputs.js"}}
-The provided input component should handle the `inputRef` property. The property should be called with a value that implements the following interface:
+O componente de entrada fornecido deve manipular a propriedade `inputRef`. A propriedade deve ser chamada com um valor que implemente a seguinte interface:
```ts
interface InputElement {
@@ -113,33 +119,33 @@ interface InputElement {
```
```jsx
-function MyInputComponent(props) {
+function MeuInputComponente(props) {
const { component: Component, inputRef, ...other } = props;
- // implement `InputElement` interface
+ // implementa a interface `InputElement`
React.useImperativeHandle(inputRef, () => ({
focus: () => {
- // logic to focus the rendered component from 3rd party belongs here
+ // logica para focar o componente renderizado de terceiros entra aquito focus
},
- // hiding the value e.g. react-stripe-elements
+ // ocultando o valor p.ex. react-stripe-elements
}));
- // `Component` will be your `SomeThirdPartyComponent` from below
+ // O `Component` abaixo será seu `AlgumComponentDeTerceiro`
return
;
}
-// usage
+// uso
;
```
## Acessibilidade
-Para que o campo de texto seja acessível, **a entrada deve estar vinculada ao label e ao texto auxiliar**. Os nós DOM subjacentes devem ter essa estrutura.
+Para que o campo de texto seja acessível, **a entrada deve estar vinculada ao rótulo e ao texto auxiliar**. Os nós DOM subjacentes devem ter essa estrutura.
```jsx
@@ -162,7 +168,7 @@ Para que o campo de texto seja acessível, **a entrada deve estar vinculada ao l
## Projetos Complementares
-Para os usos mais avançados, você é capaz de aproveita:
+Para casos de uso mais avançados, você pode tirar proveito de:
- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) Um conjunto de componentes do wrapper para facilitar o uso do Material UI com Redux Form.
- [formik-material-ui](https://github.com/stackworx/formik-material-ui) Ligações para usar Mateiral-UI com formik.
diff --git a/docs/src/pages/components/text-fields/text-fields-ru.md b/docs/src/pages/components/text-fields/text-fields-ru.md
index 4f1fff65f059c9..f1ae3e113d487e 100644
--- a/docs/src/pages/components/text-fields/text-fields-ru.md
+++ b/docs/src/pages/components/text-fields/text-fields-ru.md
@@ -7,7 +7,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
Текстовые поля позволяют пользователям вводить и редактировать текст.
-[Текстовые поля](https://material.io/design/components/text-fields.html) позволяют пользователям вводить текст в интерфейсe. Они обычно появляются в формах и диалогах.
+[Text fields](https://material.io/design/components/text-fields.html) allow users to enter text into a UI. They typically appear in forms and dialogs.
## Текстовое поля
@@ -43,7 +43,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
## Кастомизированные поля ввода
-Ниже приведены несколько примеров настройки компонента. Более подробно с этой темой можно ознакомиться на [странице документации по переопределению компонентов](/customization/components/).
+Ниже находятся примеры кастомизации компонента. You can learn more about this in the [overrides documentation page](/customization/components/).
{{"demo": "pages/components/text-fields/CustomizedInputs.js"}}
@@ -79,6 +79,8 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
## Ограничения
+### Shrink
+
Состояние метки поля ввода (label) "shrink" не всегда корректно. Предполагается, что метка поля ввода уменьшается, как только в поле ввода что-нибудь отображается. В некоторых случаях мы не можем определить состояние "shrink" (числовое поле, поле даты, Stripe input). Вы могли заметить совпадения.
@@ -95,15 +97,19 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
Contagem
```
+### Floating label
+
+The floating label is absolutely positioned, it won't impact the layout of the page. You need to make sure that the input is larger than the label to display correctly.
+
## Integration with 3rd party input libraries
-You can use third-party libraries to format an input. You have to provide a custom implementation of the `
` element with the `inputComponent` property.
+Вы можете использовать сторонние библиотеки для форматирования ввода. Вы должны предоставить пользовательскую реализацию элемента `
` со свойством `inputComponent`.
В следующем примере используются библиотеки [response-text-mask](https://github.com/text-mask/text-mask) и [response-number-format](https://github.com/s-yadav/react-number-format). The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037).
{{"demo": "pages/components/text-fields/FormattedInputs.js"}}
-The provided input component should handle the `inputRef` property. The property should be called with a value that implements the following interface:
+Предоставленный компонент ввода должен обрабатывать свойство `inputRef`. The property should be called with a value that implements the following interface:
```ts
interface InputElement {
@@ -139,7 +145,7 @@ function MyInputComponent(props) {
## Доступность
-Для того, чтобы текстовое поле было доступно, **поле ввода должно быть связано с меткой и вспомогательным текстом**. Базовые узлы DOM должны иметь эту структуру.
+In order for the text field to be accessible, **the input should be linked to the label and the helper text**. The underlying DOM nodes should have this structure.
```jsx
@@ -162,7 +168,7 @@ function MyInputComponent(props) {
## Дополнительные проекты
-Для более сложных решений вы можете применить следующие пакеты:
+Для более сложных вариантов использования вы можете воспользоваться:
- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) Набор компонентов-оберток для облегчения работы с Material UI в связке с Redux Form.
- [formik-material-ui](https://github.com/stackworx/formik-material-ui) Привязки для использования Material-UI с formik.
diff --git a/docs/src/pages/components/text-fields/text-fields-zh.md b/docs/src/pages/components/text-fields/text-fields-zh.md
index 59c018d2efaf47..65d2346465b2e2 100644
--- a/docs/src/pages/components/text-fields/text-fields-zh.md
+++ b/docs/src/pages/components/text-fields/text-fields-zh.md
@@ -1,21 +1,21 @@
---
-title: React Text Field（文本框）组件
+title: 文本框 React 组件
components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, InputBase, InputLabel, OutlinedInput, TextField
---
-# Text Fields（文本框）
+# Text Fields
-
用户可以在文本框内输入或编辑文字。
+
用户可以在文本框内输入或编辑文字
-[文本框](https://material.io/design/components/text-fields.html)允许用户在界面中输入文本。通常我们会在表单或者对话框中使用它们。
+[Text fields](https://material.io/design/components/text-fields.html) allow users to enter text into a UI. They typically appear in forms and dialogs.
## TextField
-`TextField` wrapper 组件是一个完整的表单控件，包括标签，输入和帮助文本。
+` TextField `包装器组件是一个完整的表单控件，包括标签，输入和帮助文本。
{{"demo": "pages/components/text-fields/TextFields.js"}}
-> **Note:** This version of the text field is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it.
+> **注意：** 此版本的文本框将不再记录在 [Material Design 指南中](https://material.io/)，但 Material-UI 将继续支持它。
## Outlined（轮廓）
@@ -31,19 +31,19 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
## 组件
-`TextField` 是由以下较小的组件组成的 ( [`FormControl`](/api/form-control/), [`Input`](/api/input/), [`FilledInput`](/api/filled-input/), [`InputLabel`](/api/input-label/), [`OutlinedInput`](/api/outlined-input/), and [`FormHelperText`](/api/form-helper-text/) )， 你可以直接利用这一点来自定义你的表单输入.
+`TextField` 是由较小的组件组成的 ( [`FormControl`](/api/form-control/), [`Input`](/api/input/), [`FilledInput`](/api/filled-input/), [`InputLabel`](/api/input-label/), [`OutlinedInput`](/api/outlined-input/), and [`FormHelperText`](/api/form-helper-text/) ) 你可以利用这一点来自定义你的表单输入.
-您可能注意到了， 和原生的 HTML input 组件相比，`TextField` 组件缺缺失了一些属性。 这是故意而为之的。 该组件只负责处理最常用的一些属性，如果有其他需求，用户可以自行使用下面 Demo 中演示的基础组件。 但是同时, 为了避免过于模版化，您仍然可以使用 `inputProps` (和 `inputProps`, `InputLabelProps` 属性) 来控制原生组件的属性。
+您可能注意到了， 和原生的 HTML input 组件相比，`TextField` 组件缺缺失了一些属性。 这是故意为之的， 该组件只负责处理最常用的一些属性，如果有需求，需要由用户自己使用下面 Demo 中演示的基础组件。 但是同时, 为了避免过于模版化，您仍然可以使用 `inputProps` (和 `inputProps`, `InputLabelProps` 属性) 来控制原生组件的属性。
{{"demo": "pages/components/text-fields/ComposedTextField.js"}}
-## Inputs（输入）
+## 输入
{{"demo": "pages/components/text-fields/Inputs.js"}}
## 自定义输入
-以下是自定义组件的一些示例。您可以在[重写文档页面](/customization/components/)中了解有关此内容的更多信息。
+这是一些自定义样式开关的例子 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/text-fields/CustomizedInputs.js"}}
@@ -67,7 +67,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
{{"demo": "pages/components/text-fields/FilledInputAdornments.js"}}
-### 修饰输入框的轮廓
+### 修饰轮廓
{{"demo": "pages/components/text-fields/OutlinedInputAdornments.js"}}
@@ -79,6 +79,8 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
## 局限性
+### Shrink
+
输入标签 "shrink" 状态并不总是正确的。 输入标签应在输入显示内容时立即缩小。 在某些情况下, 我们无法确定 "shrink" 状态 (数字输入、日期时间输入、条带输入)。 您可能会注意到重叠的现象。
@@ -92,18 +94,22 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp
或者
```jsx
-
计数
+
Count
```
-## Integration with 3rd party input libraries
+### Floating label
+
+The floating label is absolutely positioned, it won't impact the layout of the page. You need to make sure that the input is larger than the label to display correctly.
+
+## 与第三方 input 库的整合
-您可以使用第三方库来格式化输入.您必须使用` inputComponent `属性提供`
` 元素的自定义实现.
+您可以使用第三方库格式化输入。 您必须提供一个带有 `inputComponent` 属性的 `
` 元素的自定义实现。
-下面的演示使用 [react-text-mask](https://github.com/text-mask/text-mask)和 [react-number-format](https://github.com/s-yadav/react-number-format) 库。 The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037).
+下面的演示使用 [react-text-mask](https://github.com/text-mask/text-mask)和 [react-number-format](https://github.com/s-yadav/react-number-format) 库。 同样的概念可以适用于 [这个例子：react-stripe-element](https://github.com/mui-org/material-ui/issues/16037)。
{{"demo": "pages/components/text-fields/FormattedInputs.js"}}
-The provided input component should handle the `inputRef` property. The property should be called with a value that implements the following interface:
+提供的输入组件应该处理 `inputRef` 属性。 The property should be called with a value that implements the following interface:
```ts
interface InputElement {
@@ -116,19 +122,19 @@ interface InputElement {
function MyInputComponent(props) {
const { component: Component, inputRef, ...other } = props;
- // implement `InputElement` interface
+ // 实现 `InputElement` 界面
React.useImperativeHandle(inputRef, () => ({
focus: () => {
- // logic to focus the rendered component from 3rd party belongs here
+ // 在这里加上来自第三方渲染的组件的逻辑
},
- // hiding the value e.g. react-stripe-elements
+ // 隐藏值 例如：react-stripe-elements
}));
- // `Component` will be your `SomeThirdPartyComponent` from below
+ // `Component` 将会来自以下的 `SomeThirdPartyComponent`
return
;
}
-// usage
+// 使用
;
```
-## 可及性
+## 无障碍设计
-为了使文本字段可访问， **输入要链接到标签和辅助文本**。底层DOM节点应具有此结构。
+In order for the text field to be accessible, **the input should be linked to the label and the helper text**. The underlying DOM nodes should have this structure.
```jsx
@@ -162,7 +168,7 @@ function MyInputComponent(props) {
## 补充项目
-对于更高级的用例，您可以使用：
+对于更高级的用例，您可以利用：
- [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui)：一组用于更加方便地与 Redux Form 配搭来使用 Material UI 的封装组件。
- [formik-material-ui](https://github.com/stackworx/formik-material-ui)：用 formil 来绑定 Material-UI。
diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-de.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-de.md
index 30face5ca5429a..bba0c752e6e3e1 100644
--- a/docs/src/pages/components/textarea-autosize/textarea-autosize-de.md
+++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-de.md
@@ -7,7 +7,7 @@ components: TextareaAutosize
A textarea component for React which grows with content.
-- 📦 [2.3 kB gzipped](/size-snapshot)
+- 📦 [2.1 kB gzipped](/size-snapshot)
## Empty
diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-es.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-es.md
index 30face5ca5429a..bba0c752e6e3e1 100644
--- a/docs/src/pages/components/textarea-autosize/textarea-autosize-es.md
+++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-es.md
@@ -7,7 +7,7 @@ components: TextareaAutosize
A textarea component for React which grows with content.
-- 📦 [2.3 kB gzipped](/size-snapshot)
+- 📦 [2.1 kB gzipped](/size-snapshot)
## Empty
diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-fr.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-fr.md
index 30face5ca5429a..bba0c752e6e3e1 100644
--- a/docs/src/pages/components/textarea-autosize/textarea-autosize-fr.md
+++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-fr.md
@@ -7,7 +7,7 @@ components: TextareaAutosize
A textarea component for React which grows with content.
-- 📦 [2.3 kB gzipped](/size-snapshot)
+- 📦 [2.1 kB gzipped](/size-snapshot)
## Empty
diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-ja.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-ja.md
index 30face5ca5429a..bba0c752e6e3e1 100644
--- a/docs/src/pages/components/textarea-autosize/textarea-autosize-ja.md
+++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-ja.md
@@ -7,7 +7,7 @@ components: TextareaAutosize
A textarea component for React which grows with content.
-- 📦 [2.3 kB gzipped](/size-snapshot)
+- 📦 [2.1 kB gzipped](/size-snapshot)
## Empty
diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-pt.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-pt.md
index 57b0804c25fde7..68698fb99c5a04 100644
--- a/docs/src/pages/components/textarea-autosize/textarea-autosize-pt.md
+++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-pt.md
@@ -7,7 +7,7 @@ components: TextareaAutosize
Um componente de texto para React que se ajusta conforme o conteúdo.
-- 📦 [2.3 kB gzipped](/size-snapshot)
+- 📦 [2.1 kB gzipped](/size-snapshot)
## Vazio
diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-ru.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-ru.md
index 30face5ca5429a..bba0c752e6e3e1 100644
--- a/docs/src/pages/components/textarea-autosize/textarea-autosize-ru.md
+++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-ru.md
@@ -7,7 +7,7 @@ components: TextareaAutosize
A textarea component for React which grows with content.
-- 📦 [2.3 kB gzipped](/size-snapshot)
+- 📦 [2.1 kB gzipped](/size-snapshot)
## Empty
diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-zh.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-zh.md
index 30face5ca5429a..bba0c752e6e3e1 100644
--- a/docs/src/pages/components/textarea-autosize/textarea-autosize-zh.md
+++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-zh.md
@@ -7,7 +7,7 @@ components: TextareaAutosize
A textarea component for React which grows with content.
-- 📦 [2.3 kB gzipped](/size-snapshot)
+- 📦 [2.1 kB gzipped](/size-snapshot)
## Empty
diff --git a/docs/src/pages/components/toggle-button/toggle-button-de.md b/docs/src/pages/components/toggle-button/toggle-button-de.md
index 59b018a1809af7..5a7d181813453c 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-de.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-de.md
@@ -15,6 +15,6 @@ Die `ToggleButtonGroup` wird die Auswahl von den untergeordneten Schaltern steue
## Größen
-Lust auf größere oder kleinere Schaltflächen? Verwenden Sie die Eigenschaft `size`.
+Fancy larger or smaller buttons? Use the `size` property.
{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/toggle-button/toggle-button-es.md b/docs/src/pages/components/toggle-button/toggle-button-es.md
index 7b614219c54de4..c6d3f3b5af2d1b 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-es.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-es.md
@@ -15,6 +15,6 @@ The `ToggleButtonGroup` will control the selected of its child buttons when give
## Tamaños
-¿Te gustan botones más grandes o más pequeños? Usa el atributo `size`.
+Fancy larger or smaller buttons? Use the `size` property.
{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/toggle-button/toggle-button-fr.md b/docs/src/pages/components/toggle-button/toggle-button-fr.md
index b836d845bb94e1..5ec6bf8896f61f 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-fr.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-fr.md
@@ -15,6 +15,6 @@ The `ToggleButtonGroup` will control the selected of its child buttons when give
## Tailles
-Envie de boutons plus grands ou plus petits? Utilisez la propriété `size`.
+Fancy larger or smaller buttons? Use the `size` property.
{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/toggle-button/toggle-button-ja.md b/docs/src/pages/components/toggle-button/toggle-button-ja.md
index 6f4fcc21180152..69e462deb72b00 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-ja.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-ja.md
@@ -15,6 +15,6 @@ The `ToggleButtonGroup` will control the selected of its child buttons when give
## サイズ
-大きくても小さくてもいいですか？ `size` プロパティで設定してください。
+大きなボタンと小さなボタンがありますか? `size`プロパティを使用します。
{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/toggle-button/toggle-button-pt.md b/docs/src/pages/components/toggle-button/toggle-button-pt.md
index a9368100e6cf15..5e248f78d26068 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-pt.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-pt.md
@@ -15,6 +15,6 @@ O `ToggleButtonGroup` controlará o selecionado de seus botões filhos quando re
## Tamanhos
-Botões extravagantes ou menores? Use a propriedade `size`.
+Gosta de botões maiores ou menores? Use a propriedade `size`.
{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/toggle-button/toggle-button-ru.md b/docs/src/pages/components/toggle-button/toggle-button-ru.md
index 84494fde3ad135..915587f0fa52b7 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-ru.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-ru.md
@@ -15,6 +15,6 @@ The `ToggleButtonGroup` will control the selected of its child buttons when give
## Размеры
-Хотите изменить размеры? Используйте параметр `size`.
+Fancy larger or smaller buttons? Use the `size` property.
{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/toggle-button/toggle-button-zh.md b/docs/src/pages/components/toggle-button/toggle-button-zh.md
index fedd4a63d978b3..53aef3c9cd765d 100644
--- a/docs/src/pages/components/toggle-button/toggle-button-zh.md
+++ b/docs/src/pages/components/toggle-button/toggle-button-zh.md
@@ -15,6 +15,6 @@ components: ToggleButton, ToggleButtonGroup
## 尺寸
-您喜欢更大一点或更小一点的按钮？使用 `size` 属性可以实现大小的控制。
+Fancy larger or smaller buttons? Use the `size` property.
{{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/tooltips/tooltips-de.md b/docs/src/pages/components/tooltips/tooltips-de.md
index 914d7095f4aeb8..e1a28c5787b44a 100644
--- a/docs/src/pages/components/tooltips/tooltips-de.md
+++ b/docs/src/pages/components/tooltips/tooltips-de.md
@@ -15,7 +15,7 @@ Wenn aktiviert, zeigen [Tooltips](https://material.io/design/components/tooltips
## Positionierte Tooltips
-Der `Tooltip` hat 12 mögliche **Platzierungen**. Sie haben keine Richtungspfeile; Stattdessen verlassen sie sich auf Bewegungen, die von der Quelle ausgehen, um die Richtung zu vermitteln.
+The `Tooltip` has 12 **placements** choice. They don’t have directional arrows; instead, they rely on motion emanating from the source to convey direction.
{{"demo": "pages/components/tooltips/PositionedTooltips.js"}}
@@ -27,7 +27,7 @@ Hier einige Beispiele zum Anpassen der Komponente. Mehr dazu erfahren Sie auf de
## Benutzerdefiniertes untergeordnetes Element
-Der Tooltip muss DOM-Ereignis-Listener auf das untergeordnete Element anwenden. Wenn das untergeordnete Element ein benutzerdefiniertes React-Element ist, müssen Sie sicherstellen, dass es seine Eigenschaften auf das zugrunde liegende DOM-Element weitergibt.
+The tooltip needs to apply DOM event listeners to its child element. If the child is a custom React element, you need to make sure that it spreads its properties to the underlying DOM element.
```jsx
function MyComponent(props) {
@@ -64,7 +64,7 @@ Der `Tooltip` umhüllt standardmäßig lange Texte, um diese lesbar zu machen.
## Interaktiv
-Ein Tooltip kann interaktiv sein. Er wird nicht geschlossen, wenn sich der Benutzer über dem Tooltip befindet, bevor die `leaveDelay` abgelaufen ist.
+A tooltip can be interactive. It won't close when the user hovers over the tooltip before the `leaveDelay` is expired.
{{"demo": "pages/components/tooltips/InteractiveTooltips.js"}}
@@ -84,6 +84,6 @@ Verwenden Sie einen anderen Übergang.
Der Tooltip wird normalerweise sofort angezeigt, wenn sich die Maus des Benutzers über dem Element befindet und sofort ausgeblendet wird, wenn die Maus des Benutzers verlassen wird. Eine Verzögerung beim Anzeigen oder Ausblenden des Tooltips kann über die Eigenschaften `enterDelay` und `leaveDelay` hinzugefügt werden, wie in der Demo zum kontrollierten Tooltip oben gezeigt.
-Bei mobilen Geräten wird der Tooltip angezeigt, wenn der Benutzer das Element lange gedrückt hält und versteckt sich nach einer Verzögerung von 1500 ms. Sie können diese Funktion mit der `disableTouchListener` Eigenschaft deaktivieren.
+On mobile, the tooltip is displayed when the user longpresses the element and hides after a delay of 1500ms. You can disable this feature with the `disableTouchListener` property.
{{"demo": "pages/components/tooltips/DelayTooltips.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/tooltips/tooltips-fr.md b/docs/src/pages/components/tooltips/tooltips-fr.md
index 579b606395ea8d..f7d93d2960f82f 100644
--- a/docs/src/pages/components/tooltips/tooltips-fr.md
+++ b/docs/src/pages/components/tooltips/tooltips-fr.md
@@ -15,19 +15,19 @@ Lorsqu'elles sont activées, [Info-bulles](https://material.io/design/components
## Info-bulles positionnées
-La `Tooltip` comporte 12 **placements** choix. Ils n'ont pas de flèches directionnelles; au lieu de cela, ils comptent sur le mouvement émanant de la source pour indiquer la direction.
+The `Tooltip` has 12 **placements** choice. They don’t have directional arrows; instead, they rely on motion emanating from the source to convey direction.
{{"demo": "pages/components/tooltips/PositionedTooltips.js"}}
## Customized tooltips
-Voici quelques exemples de personnalisation du composant. Vous pouvez en apprendre plus sur [la page de documentation de personnalisation](/customization/components/).
+Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/).
{{"demo": "pages/components/tooltips/CustomizedTooltips.js"}}
## Élément enfant personnalisé
-L'info-bulle doit appliquer les écouteurs d'événement DOM à son élément enfant. Si l'enfant est un élément React personnalisé, vous devez vous assurer qu'il étend ses propriétés à l'élément DOM sous-jacent.
+The tooltip needs to apply DOM event listeners to its child element. If the child is a custom React element, you need to make sure that it spreads its properties to the underlying DOM element.
```jsx
function MyComponent(props) {
@@ -64,7 +64,7 @@ Le `Tooltip` enveloppements long texte par défaut pour le rendre lisible.
## Interactive
-Une info-bulle peut être interactive. Il ne se fermera pas lorsque l'utilisateur survolera l'info-bulle avant l'expiration du congé `congé`.
+A tooltip can be interactive. It won't close when the user hovers over the tooltip before the `leaveDelay` is expired.
{{"demo": "pages/components/tooltips/InteractiveTooltips.js"}}
@@ -84,6 +84,6 @@ Utilisez une transition différente.
L'info-bulle est normalement affichée immédiatement lorsque la souris de l'utilisateur survole l'élément, et se cache immédiatement lorsque la souris de l'utilisateur quitte la souris. Un retard dans l'affichage ou le masquage de l'info-bulle peut être ajouté via les propriétés suivantes `enterDelay` et `leaveDelay`, comme indiqué dans la démo Infobulles contrôlées ci-dessus.
-Sur le mobile, l'info-bulle s'affiche lorsque l'utilisateur appuie longuement sur l'élément et se cache après un délai de 1500 ms. Vous pouvez désactiver cette fonctionnalité avec la propriété `disableTouchListener`.
+On mobile, the tooltip is displayed when the user longpresses the element and hides after a delay of 1500ms. You can disable this feature with the `disableTouchListener` property.
{{"demo": "pages/components/tooltips/DelayTooltips.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/tooltips/tooltips-ja.md b/docs/src/pages/components/tooltips/tooltips-ja.md
index 20df53b1579199..bfc2c42a4fe61a 100644
--- a/docs/src/pages/components/tooltips/tooltips-ja.md
+++ b/docs/src/pages/components/tooltips/tooltips-ja.md
@@ -3,11 +3,11 @@ title: Tooltip React component
components: Tooltip
---
-# Tooltips
+# Tooltip
-
Tooltips display informative text when users hover over, focus on, or tap an element.
+
ユーザーが要素上にマウスを移動したり、要素をフォーカスしたり、タップしたりすると、ツールチップにわかりやすいテキストが表示されます。
-When activated, [Tooltips](https://material.io/design/components/tooltips.html) display a text label identifying an element, such as a description of its function.
+[Tooltips](https://material.io/design/components/tooltips.html)をアクティブにすると、機能の説明など、要素を識別するテキストラベルが表示されます。
## Simple Tooltips
@@ -21,7 +21,7 @@ The `Tooltip` has 12 **placements** choice. They don’t have directional arrows
## Customized tooltips
-コンポーネントのカスタマイズ例をいくつか示します。あなたはこれについてもっと詳しく知ることができます [上書きドキュメントのページ](/customization/components/)。
+Here are some examples of customizing the component. 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。
{{"demo": "pages/components/tooltips/CustomizedTooltips.js"}}
@@ -42,23 +42,23 @@ function MyComponent(props) {
```
-You can find a similar concept in the [wrapping components](/guides/composition/#wrapping-components) guide.
+同様の概念は、[wrapping components](/guides/composition/#wrapping-components)ガイドにも記載されています。
## Triggers
-You can define the types of events that cause a tooltip to show.
+ツールチップを表示するイベントのタイプを定義できます。
{{"demo": "pages/components/tooltips/TriggersTooltips.js"}}
## Controlled Tooltips
-You can use the `open`, `onOpen` and `onClose` properties to control the behavior of the tooltip.
+`open`, `onOpen` and `onClose` の各プロパティを使用して、ツールチップの動作を制御できます。
{{"demo": "pages/components/tooltips/ControlledTooltips.js"}}
## Variable Width
-The `Tooltip` wraps long text by default to make it readable.
+既定では、`Tooltip`は長いテキストを折り返して読みやすくします。
{{"demo": "pages/components/tooltips/VariableWidth.js"}}
diff --git a/docs/src/pages/components/tooltips/tooltips-pt.md b/docs/src/pages/components/tooltips/tooltips-pt.md
index 61d2092e3ec97a..4f7e6c1a833984 100644
--- a/docs/src/pages/components/tooltips/tooltips-pt.md
+++ b/docs/src/pages/components/tooltips/tooltips-pt.md
@@ -15,19 +15,19 @@ Quando ativada, [dicas](https://material.io/design/components/tooltips.html) exi
## Posicionamento de dicas
-A dica (`Tooltip`) tem 12 **locais de posicionamento** para escolha. Elas não têm setas direcionais; em vez disso, elas dependem do movimento sobre a fonte para se exibirem na posição configurada.
+O `Tooltip` tem 12 **posicionamentos** para ser escolhido. Eles não têm setas direcionais; em vez disso, eles dependem do movimento que emana da fonte para transmitir direção.
{{"demo": "pages/components/tooltips/PositionedTooltips.js"}}
## Dicas customizadas
-Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescrita](/customization/components/).
+Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/).
{{"demo": "pages/components/tooltips/CustomizedTooltips.js"}}
## Elemento filho customizado
-A dica precisa aplicar eventos DOM do tipo "listeners" para seu elemento filho. Se o filho for um elemento React customizado, você precisa garantir que ele estenda suas propriedades para o elemento DOM subjacente.
+A dica precisa aplicar ouvintes de evento DOM ao seu elemento filho. Se o filho for um elemento React personalizado, você precisará garantir que ele estenda suas propriedades para o elemento DOM subjacente.
```jsx
function MyComponent (props) {
@@ -64,7 +64,7 @@ A dica (`Tooltip`) quebra o texto longo por padrão para torná-lo legível.
## Interativa
-Uma dia pode ser interativa. Ela não será fechada quando o usuário passar por cima da dica antes que `leaveDelay` expire.
+Uma dica pode ser interativa. Ela não será fechada quando o usuário passar por cima da dica antes que `leaveDelay` expire.
{{"demo": "pages/components/tooltips/InteractiveTooltips.js"}}
@@ -84,6 +84,6 @@ Use uma transição diferente.
A dica normalmente é mostrada imediatamente quando o mouse do usuário passa sobre o elemento e se oculta imediatamente quando o mouse do usuário sai. Um atraso na exibição ou ocultação da dica pode ser adicionado por meio das propriedades `enterDelay` e `leaveDelay`, conforme mostrado na demonstração de dicas controladas acima.
-Em mobile, a dica é exibida quando o usuário pressiona longamente o elemento e oculta após um atraso de 1500 ms. Você pode desativar esse recurso com a propriedade `disableTouchListener`.
+No celular, a dica é exibida quando o usuário pressiona longamente o elemento e oculta após um atraso de 1500 ms. Você pode desativar esse recurso com a propriedade `disableTouchListener`.
{{"demo": "pages/components/tooltips/DelayTooltips.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/tooltips/tooltips-ru.md b/docs/src/pages/components/tooltips/tooltips-ru.md
index af81c38f884317..7194b97cc56140 100644
--- a/docs/src/pages/components/tooltips/tooltips-ru.md
+++ b/docs/src/pages/components/tooltips/tooltips-ru.md
@@ -21,7 +21,7 @@ The `Tooltip` has 12 **placements** choice. They don’t have directional arrows
## Настраиваемые подсказки
-Ниже приведены несколько примеров настройки компонента. Более подробно с этой темой можно ознакомиться на [странице документации по переопределению компонентов](/customization/components/).
+Ниже находятся примеры кастомизации компонента. You can learn more about this in the [overrides documentation page](/customization/components/).
{{"demo": "pages/components/tooltips/CustomizedTooltips.js"}}
@@ -84,6 +84,6 @@ By default disabled elements like `
` do not trigger user interactions so
Всплывающая подсказка обычно отображается сразу же, как пользователь наводит курсор на элемент, и сразу же скрывается, когда курсор уходит с элемента. Задержку в отображении или скрытии всплывающей подсказки можно добавить через свойства `enterDelay` и `leaveDelay`, как показано выше в демонстрационной версии «Контролируемые подсказки».
-На мобильном телефоне всплывающая подсказка отображается, когда пользователь нажимает на элемент и скрывается после задержки в 1500 мс Вы можете отключить эту функцию с помощью свойства `disableTouchListener`.
+On mobile, the tooltip is displayed when the user longpresses the element and hides after a delay of 1500ms. You can disable this feature with the `disableTouchListener` property.
{{"demo": "pages/components/tooltips/DelayTooltips.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/tooltips/tooltips-zh.md b/docs/src/pages/components/tooltips/tooltips-zh.md
index f21b7a8f09a082..b4f776a66b933d 100644
--- a/docs/src/pages/components/tooltips/tooltips-zh.md
+++ b/docs/src/pages/components/tooltips/tooltips-zh.md
@@ -15,19 +15,19 @@ components: Tooltip
## 文字提示的定位
-`文字提示` 有 12 个 **位置** 可供选择。 它们没有方向箭头；相反的，它们依靠从源头发出的运动来传达自己的方向。
+The `Tooltip` has 12 **placements** choice. They don’t have directional arrows; instead, they rely on motion emanating from the source to convey direction.
{{"demo": "pages/components/tooltips/PositionedTooltips.js"}}
## Customized tooltips
-以下是自定义组件的一些示例。您可以在[重写文档页面](/customization/components/)中了解有关此内容的更多信息。
+这是一些自定义样式开关的例子 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。
{{"demo": "pages/components/tooltips/CustomizedTooltips.js"}}
## 自定义子元素
-工具提示需要将DOM事件侦听器应用于其子元素。 如果子项是自定义的React元素，则需要确保它将其属性传播到基础DOM元素。
+The tooltip needs to apply DOM event listeners to its child element. If the child is a custom React element, you need to make sure that it spreads its properties to the underlying DOM element.
```jsx
function MyComponent(props) {
@@ -64,7 +64,7 @@ function MyComponent(props) {
## 交互式
-文字提示可以是交互式的。当用户在 `leaveDelay` 过期之前将鼠标悬停在工具提示上时, 它不会关闭。
+A tooltip can be interactive. It won't close when the user hovers over the tooltip before the `leaveDelay` is expired.
{{"demo": "pages/components/tooltips/InteractiveTooltips.js"}}
@@ -84,6 +84,6 @@ function MyComponent(props) {
当用户的鼠标悬浮在该元素时工具提示会立即显示，并且当用户鼠标离开时立即隐藏。 可以通过` enterDelay `和` leaveDelay `属性来控制显示及隐藏文字提示的延迟，如上面的控制文字提示演示中所示。
-在移动设备上，当用户长按元素并在延迟1500ms后，将显示文字提示。 您可以使用`disableTouchListener`属性禁用此功能。
+On mobile, the tooltip is displayed when the user longpresses the element and hides after a delay of 1500ms. You can disable this feature with the `disableTouchListener` property.
{{"demo": "pages/components/tooltips/DelayTooltips.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/transfer-list/transfer-list-ja.md b/docs/src/pages/components/transfer-list/transfer-list-ja.md
index 4333c74b38765d..8dc05f83c9dd90 100644
--- a/docs/src/pages/components/transfer-list/transfer-list-ja.md
+++ b/docs/src/pages/components/transfer-list/transfer-list-ja.md
@@ -3,7 +3,7 @@ title: Transfer List React component
components: List, ListItem, Checkbox, Switch
---
-# Transfer List
+# 転送リスト
A transfer list (or "shuttle") enables the user to move one or more list items between lists.
diff --git a/docs/src/pages/components/transitions/transitions-de.md b/docs/src/pages/components/transitions/transitions-de.md
index d86818dc1ccde9..c90bb5f19d4400 100644
--- a/docs/src/pages/components/transitions/transitions-de.md
+++ b/docs/src/pages/components/transitions/transitions-de.md
@@ -33,7 +33,7 @@ export default Main() {
## Collapse
-Klappt senkrecht vom oberen Rand des Kind-Elementes ausgehend auf. Das ` collapsedHeight` Property kann benutzt werden, um die minimale Höhe festzulegen, wenn nicht ausgeklappt.
+Expand vertically from the top of the child element. The `collapsedHeight` property can be used to set the minimum height when not expanded.
{{"demo": "pages/components/transitions/SimpleCollapse.js"}}
@@ -53,7 +53,7 @@ Das zweite Beispiel zeigt, wie Sie die `transform-origin` ändern können und be
## Slide
-Gleitet vom Bildschirmrand ein. Die Eigenschaft `direction` steuert, von welchem Bildschirmrand der Übergang beginnt.
+Slide in from the edge of the screen. The `direction` property controls which edge of the screen the transition starts from.
Die `mountOnEnter` -Eigenschaft der Transition-Komponente verhindert, dass die untergeordnete Komponente gezeigt wird, bis `in` gleich `true` ist. Dadurch wird verhindert, dass die relativ positionierte Komponente von der Off-Screen-Position in die Ansicht gescrollt wird. In ähnlicher Weise entfernt die `unmountOnExit` -Eigenschaft die Komponente aus dem DOM, nachdem der Übergang vom Bildschirm beendet wurde.
diff --git a/docs/src/pages/components/transitions/transitions-pt.md b/docs/src/pages/components/transitions/transitions-pt.md
index ad0f6c98ba9499..5344409cc44cdf 100644
--- a/docs/src/pages/components/transitions/transitions-pt.md
+++ b/docs/src/pages/components/transitions/transitions-pt.md
@@ -53,7 +53,7 @@ O segundo exemplo demonstra como alterar `transform-origin` e condicionalmente a
## Slide
-Slide (Deslize) a partir da borda da tela. A propriedade `direction` controla em qual borda da tela a transição começa.
+Deslize a partir da borda da tela. A propriedade `direction` controla em qual borda da tela a transição começa.
A propriedade de transição do componente `mountOnEnter` impede que o componente filho seja montado até que `in` seja `true`. Isso evita que o componente relativamente posicionado role para a visão a partir da posição fora da tela. Da mesma forma, a propriedade `unmountOnExit` remove o componente do DOM após a transição ter sido exibida (`in` = `false`).
diff --git a/docs/src/pages/components/transitions/transitions-zh.md b/docs/src/pages/components/transitions/transitions-zh.md
index c0ca61fca6c7b8..755ed671ca091f 100644
--- a/docs/src/pages/components/transitions/transitions-zh.md
+++ b/docs/src/pages/components/transitions/transitions-zh.md
@@ -33,7 +33,7 @@ export default Main() {
## Collapse（折叠）
-从子元素的顶部垂直展开。 而`collapsedHeight` 属性可用于设置未展开时的最小高度。
+Expand vertically from the top of the child element. The `collapsedHeight` property can be used to set the minimum height when not expanded.
{{"demo": "pages/components/transitions/SimpleCollapse.js"}}
@@ -53,7 +53,7 @@ export default Main() {
## Slide（滑动）
-从屏幕的边缘滑入。`direction` 属性控制了动画开始时，元素过渡的方向。
+Slide in from the edge of the screen. The `direction` property controls which edge of the screen the transition starts from.
过渡(Transition) 组件的 `mountOnEnter` 属性保证了只有 `in` 是`true`时，子组件才会被渲染。 这可以保证相对上定位好的组件不会从屏幕外面的位置滚动到视图中。 同样的， 在组件从屏幕中过渡完后，`unmountOnExit` 属性将次组件从 DOM 中移除。
diff --git a/docs/src/pages/components/tree-view/tree-view-de.md b/docs/src/pages/components/tree-view/tree-view-de.md
new file mode 100644
index 00000000000000..9f9c9a82a551af
--- /dev/null
+++ b/docs/src/pages/components/tree-view/tree-view-de.md
@@ -0,0 +1,16 @@
+---
+title: Tree View React component
+components: TreeView, TreeItem
+---
+
+# Tree View
+
+A tree view widget presents a hierarchical list.
+
+Tree views can be used to represent a file system navigator displaying folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both.
+
+{{"demo": "pages/components/tree-view/FileSystemNavigator.js"}}
+
+## Customized tree view
+
+{{"demo": "pages/components/tree-view/CustomizedTreeView.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/tree-view/tree-view-es.md b/docs/src/pages/components/tree-view/tree-view-es.md
new file mode 100644
index 00000000000000..9f9c9a82a551af
--- /dev/null
+++ b/docs/src/pages/components/tree-view/tree-view-es.md
@@ -0,0 +1,16 @@
+---
+title: Tree View React component
+components: TreeView, TreeItem
+---
+
+# Tree View
+
+A tree view widget presents a hierarchical list.
+
+Tree views can be used to represent a file system navigator displaying folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both.
+
+{{"demo": "pages/components/tree-view/FileSystemNavigator.js"}}
+
+## Customized tree view
+
+{{"demo": "pages/components/tree-view/CustomizedTreeView.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/tree-view/tree-view-fr.md b/docs/src/pages/components/tree-view/tree-view-fr.md
new file mode 100644
index 00000000000000..9f9c9a82a551af
--- /dev/null
+++ b/docs/src/pages/components/tree-view/tree-view-fr.md
@@ -0,0 +1,16 @@
+---
+title: Tree View React component
+components: TreeView, TreeItem
+---
+
+# Tree View
+
+A tree view widget presents a hierarchical list.
+
+Tree views can be used to represent a file system navigator displaying folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both.
+
+{{"demo": "pages/components/tree-view/FileSystemNavigator.js"}}
+
+## Customized tree view
+
+{{"demo": "pages/components/tree-view/CustomizedTreeView.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/tree-view/tree-view-ja.md b/docs/src/pages/components/tree-view/tree-view-ja.md
new file mode 100644
index 00000000000000..9f9c9a82a551af
--- /dev/null
+++ b/docs/src/pages/components/tree-view/tree-view-ja.md
@@ -0,0 +1,16 @@
+---
+title: Tree View React component
+components: TreeView, TreeItem
+---
+
+# Tree View
+
+A tree view widget presents a hierarchical list.
+
+Tree views can be used to represent a file system navigator displaying folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both.
+
+{{"demo": "pages/components/tree-view/FileSystemNavigator.js"}}
+
+## Customized tree view
+
+{{"demo": "pages/components/tree-view/CustomizedTreeView.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/tree-view/tree-view-pt.md b/docs/src/pages/components/tree-view/tree-view-pt.md
new file mode 100644
index 00000000000000..e9acb15cb39d9f
--- /dev/null
+++ b/docs/src/pages/components/tree-view/tree-view-pt.md
@@ -0,0 +1,16 @@
+---
+title: Componente React de Visualização em Árvore
+components: TreeView, TreeItem
+---
+
+# Visualização em árvore
+
+Um modo de exibição de árvore widget apresenta uma lista hierárquica.
+
+As visualizações em árvore podem ser usadas para representar um navegador do sistema de arquivos que exibe pastas e arquivos, um item que representa uma pasta pode ser expandido para revelar o conteúdo da pasta, que pode ser arquivos, pastas ou ambos.
+
+{{"demo": "pages/components/tree-view/FileSystemNavigator.js"}}
+
+## Customized tree view
+
+{{"demo": "pages/components/tree-view/CustomizedTreeView.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/tree-view/tree-view-ru.md b/docs/src/pages/components/tree-view/tree-view-ru.md
new file mode 100644
index 00000000000000..9f9c9a82a551af
--- /dev/null
+++ b/docs/src/pages/components/tree-view/tree-view-ru.md
@@ -0,0 +1,16 @@
+---
+title: Tree View React component
+components: TreeView, TreeItem
+---
+
+# Tree View
+
+A tree view widget presents a hierarchical list.
+
+Tree views can be used to represent a file system navigator displaying folders and files, an item representing a folder can be expanded to reveal the contents of the folder, which may be files, folders, or both.
+
+{{"demo": "pages/components/tree-view/FileSystemNavigator.js"}}
+
+## Customized tree view
+
+{{"demo": "pages/components/tree-view/CustomizedTreeView.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/tree-view/tree-view-zh.md b/docs/src/pages/components/tree-view/tree-view-zh.md
new file mode 100644
index 00000000000000..388f2b69dfade7
--- /dev/null
+++ b/docs/src/pages/components/tree-view/tree-view-zh.md
@@ -0,0 +1,16 @@
+---
+title: 树视图组件
+components: 树视图，树节点
+---
+
+# 树视图
+
+用树视图，展现出层级关系。
+
+树视图可用来代表文件系统，显示文件夹和文件。每一层可以用来代表文件夹的层次，以显示文件夹的内容。这些层次中的每一层，可以是文件，也可以文件夹。
+
+{{"demo": "pages/components/tree-view/FileSystemNavigator.js"}}
+
+## Customized tree view
+
+{{"demo": "pages/components/tree-view/CustomizedTreeView.js"}}
\ No newline at end of file
diff --git a/docs/src/pages/components/typography/typography-de.md b/docs/src/pages/components/typography/typography-de.md
index a1356b32ef1805..13911cffd39867 100644
--- a/docs/src/pages/components/typography/typography-de.md
+++ b/docs/src/pages/components/typography/typography-de.md
@@ -1,8 +1,8 @@
---
-components: Typografie
+components: Typography
---
-# Typografie
+# Typography
Verwenden Sie die Typografie, um Ihr Design und Ihren Inhalt so klar und effizient wie möglich darzustellen.
@@ -53,9 +53,9 @@ Die Komponente Typografie verwendet die Eigenschaft `variantMapping` um eine UI-
- You can change the underlying element for a one time occasion with the `component` property:
```jsx
-{/ * Wir haben bereits eine h1 auf der Seite, wir wollen diese nicht kopieren. * /}
+{/* We already have an h1 in the page, let's not duplicate it. */}
- h1. Überschrift
+ h1. Heading
```
diff --git a/docs/src/pages/components/typography/typography-es.md b/docs/src/pages/components/typography/typography-es.md
index e8d002bcf5efee..c8062ba5e0af11 100644
--- a/docs/src/pages/components/typography/typography-es.md
+++ b/docs/src/pages/components/typography/typography-es.md
@@ -1,8 +1,8 @@
---
-components: Tipografía
+components: Typography
---
-# Tipografía
+# Typography
Use typography to present your design and content as clearly and efficiently as possible.
diff --git a/docs/src/pages/components/typography/typography-pt.md b/docs/src/pages/components/typography/typography-pt.md
index 4953775f20aec6..9a6927cb678a6f 100644
--- a/docs/src/pages/components/typography/typography-pt.md
+++ b/docs/src/pages/components/typography/typography-pt.md
@@ -50,12 +50,12 @@ Em algumas situações, talvez você não consiga usar o componente `Tipografia`
O componente de Tipografia (Typography) usa a propriedade `variantMapping` para associar a variação da UI com um elemento semântico. É importante ressaltar que o estilo de uma tipografia é independente do elemento semântico por baixo dela.
-- You can change the underlying element for a one time occasion with the `component` property:
+- Você pode alterar o elemento subjacente para uma ocasião única com a propriedade `component`:
```jsx
-{/* Já temos um h1 na página, não vamos duplicá-lo. */}
+{/ * Já temos um h1 na página, não vamos duplicá-lo. */}
- h1. Título (Heading)
+ h1. Título
```
diff --git a/docs/src/pages/components/typography/typography-ru.md b/docs/src/pages/components/typography/typography-ru.md
index c543d26f5373e3..ae6e11ae5fd08d 100644
--- a/docs/src/pages/components/typography/typography-ru.md
+++ b/docs/src/pages/components/typography/typography-ru.md
@@ -1,8 +1,8 @@
---
-components: Оформление текста
+components: Typography
---
-# Оформление текста
+# Typography
Use typography to present your design and content as clearly and efficiently as possible.
diff --git a/docs/src/pages/components/typography/typography-zh.md b/docs/src/pages/components/typography/typography-zh.md
index 4ab8ff33bf889c..15c2f073a8a58f 100644
--- a/docs/src/pages/components/typography/typography-zh.md
+++ b/docs/src/pages/components/typography/typography-zh.md
@@ -53,7 +53,7 @@ Typography组件使用 `variantMapping` 属性将某一种UI变体与某一种
- You can change the underlying element for a one time occasion with the `component` property:
```jsx
-{/* 在这个页面里，我们已经有了一个h1标签；所以避免重复*/}
+{/* We already have an h1 in the page, let's not duplicate it. */}
h1. Heading
diff --git a/docs/src/pages/components/use-media-query/use-media-query-de.md b/docs/src/pages/components/use-media-query/use-media-query-de.md
index 9644c8b623a21b..c4154403f9bf49 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-de.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-de.md
@@ -105,13 +105,13 @@ Die Komponente höherer Ordnung `withWidth()` fügt die Bildschirmbreite der Sei
### `useMediaQuery(query, [options]) => matches`
-#### Argumente
+#### Parameter
1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
-2. `Optionen` (*Object* [optional]):
- - ` options.defaultMatches ` (*Boolean* [optional]): Da `window.matchMedia()` auf dem Server nicht verfügbar ist, wird ein Standard Match zurückgegeben. Der Standardwert ist `false`.
- - `options.noSsr ` (*Boolean* [optional]): Standardeinstellung ist `false`. Um den serverseitigen Renderingabgleich durchzuführen, muss er zweimal gerendert werden. Ein erstes Mal mit nichts und ein zweites Mal mit den Kind-Elementen. Dieser Zyklus mit zwei Durchgängen ist mit einem Nachteil verbunden. Es ist langsamer. Sie können diese Flag auf `true` setzten, wenn Sie **nicht serverseitig** rendern.
- - `options.ssrMatchMedia` (*Function* [optional]) Vielleicht möchten Sie eine Heuristik verwenden, um annähernd den Bildschirm des Client - Browser zu bestimmen. Sie könnten beispielsweise den Benutzeragenten oder den Client-Hinweis https://caniuse.com/#search=client%20hint verwenden. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Lesen Sie hier mehr dazu: [serverseitige Rendering Beispiel](#server-side-rendering).
+2. `options` (*Object* [optional]):
+ - ` options.defaultMatches ` (*Boolean* [optional]): Da `window.matchMedia()` auf dem Server nicht verfügbar ist, wird ein Standard Match zurückgegeben. Der Standardwert ist `false`.
+ - `options.noSsr ` (*Boolean* [optional]): Standardeinstellung ist `false`. Um den serverseitigen Renderingabgleich durchzuführen, muss er zweimal gerendert werden. Ein erstes Mal mit nichts und ein zweites Mal mit den Kind-Elementen. Dieser Zyklus mit zwei Durchgängen ist mit einem Nachteil verbunden. Es ist langsamer. Sie können diese Flag auf `true` setzten, wenn Sie **nicht serverseitig** rendern.
+ - `options.ssrMatchMedia` (*Function* [optional]) Vielleicht möchten Sie eine Heuristik verwenden, um annähernd den Bildschirm des Client - Browser zu bestimmen. Sie könnten beispielsweise den Benutzeragenten oder den Client-Hinweis https://caniuse.com/#search=client%20hint verwenden. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Lesen Sie hier mehr dazu: [serverseitige Rendering Beispiel](#server-side-rendering).
#### Rückgabewerte
diff --git a/docs/src/pages/components/use-media-query/use-media-query-es.md b/docs/src/pages/components/use-media-query/use-media-query-es.md
index 9bc72c3a19c767..4adcf0bdbfae2a 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-es.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-es.md
@@ -109,9 +109,9 @@ The `withWidth()` higher-order component injects the screen width of the page. Y
1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
2. `options` (*Object* [optional]):
- - `options.defaultMatches` (*Boolean* [optional]): As `window.matchMedia()` is unavailable on the server, we return a default matches during the first mount. The default value is `false`.
- - `options.noSsr` (*Boolean* [optional]): Defaults to `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to `true` if you are **not doing server-side rendering**.
- - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
+ - `options.defaultMatches` (*Boolean* [optional]): As `window.matchMedia()` is unavailable on the server, we return a default matches during the first mount. The default value is `false`.
+ - `options.noSsr` (*Boolean* [optional]): Defaults to `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to `true` if you are **not doing server-side rendering**.
+ - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
#### Devuelve
diff --git a/docs/src/pages/components/use-media-query/use-media-query-fr.md b/docs/src/pages/components/use-media-query/use-media-query-fr.md
index 8b4911621c37ef..29faac4987c2be 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-fr.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-fr.md
@@ -109,9 +109,9 @@ The `withWidth()` higher-order component injects the screen width of the page. Y
1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
2. `options` (*Object* [optional]):
- - `options.defaultMatches` (*Boolean* [optional]): As `window.matchMedia()` is unavailable on the server, we return a default matches during the first mount. The default value is `false`.
- - `options.noSsr` (*Boolean* [optional]): Valeur par défaut `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to `true` if you are **not doing server-side rendering**.
- - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
+ - `options.defaultMatches` (*Boolean* [optional]): As `window.matchMedia()` is unavailable on the server, we return a default matches during the first mount. The default value is `false`.
+ - `options.noSsr` (*Boolean* [optional]): Valeur par défaut `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to `true` if you are **not doing server-side rendering**.
+ - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
#### Valeur de retour
diff --git a/docs/src/pages/components/use-media-query/use-media-query-ja.md b/docs/src/pages/components/use-media-query/use-media-query-ja.md
index 948317bff8614f..7b12a7f606f5e6 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-ja.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-ja.md
@@ -108,10 +108,10 @@ The `withWidth()` higher-order component injects the screen width of the page. Y
#### 引数
1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
-2. `options` (*Object* [optional]):
- - `options.defaultMatches` (*Boolean* [optional]): As `window.matchMedia()` is unavailable on the server, we return a default matches during the first mount. The default value is `false`.
- - `options.noSsr` (*ブール値* [任意]): デフォルト値 `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to `true` if you are **not doing server-side rendering**.
- - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
+2. `オプション` (*オプジェクト* [任意]):
+ - `options.defaultMatches` (*Boolean* [optional]): As `window.matchMedia()` is unavailable on the server, we return a default matches during the first mount. The default value is `false`.
+ - `options.noSsr` (*ブール値* [任意]): デフォルト値 `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to `true` if you are **not doing server-side rendering**.
+ - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
#### 戻り値
diff --git a/docs/src/pages/components/use-media-query/use-media-query-pt.md b/docs/src/pages/components/use-media-query/use-media-query-pt.md
index 95123048453392..9bb21de02aff09 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-pt.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-pt.md
@@ -11,7 +11,7 @@ Algumas das principais características:
- ⚛️ Tem uma API React idiomática.
- 🚀 Com desempenho, ele observa o documento para detectar quando suas consultas de mídia mudam, em vez de pesquisar os valores periodicamente.
- 📦 [1 kB gzipped](/size-snapshot).
-- 🤖 It supports server-side rendering.
+- 🤖 Ele suporta a renderização do lado do servidor.
## Consulta de mídia simples
@@ -37,7 +37,7 @@ function MyComponent() {
{{"demo": "pages/components/use-media-query/ThemeHelper.js"}}
-Alternatively, you can use a callback function, accepting the theme as a first argument:
+Como alternativa, você pode usar uma função de retorno de chamada, aceitando o tema como um primeiro argumento:
```jsx
import useMediaQuery from '@material-ui/core/useMediaQuery';
@@ -49,33 +49,33 @@ function MyComponent() {
}
```
-⚠️ There is **no default** theme support, you have to inject it in a parent theme provider.
+⚠️ Não há **nenhum suporte de tema padrão**, você precisa injetá-lo em um provedor de temas.
## Usando a sintaxe JavaScript
-You can use [json2mq](https://github.com/akiran/json2mq) to generate media query string from a JavaScript object.
+Você pode usar [json2mq](https://github.com/akiran/json2mq) para gerar uma string de consulta de mídia a partir de um objeto JavaScript.
{{"demo": "pages/components/use-media-query/JavaScriptMedia.js", "defaultCodeOpen": true}}
## Renderização no servidor (Server-Side Rendering)
-An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is required on the server. We recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it.
+Uma implementação de [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) é necessária no servidor. Recomendamos usar [css-mediaquery](https://github.com/ericf/css-mediaquery) para emulá-lo.
{{"demo": "pages/components/use-media-query/ServerSide.js"}}
-⚠️ Server-side rendering and client-side media queries are fundamentally at odds. Be aware of the tradeoff. The support can only be partial.
+⚠️ Renderização do lado servidor e consultas de mídia do lado cliente são fundamentalmente conflitantes. Esteja ciente da troca. O suporte só pode ser parcial.
-Try relying on client-side CSS media queries first. For instance, you could use:
+Tente confiar em consultas de mídia CSS do lado do cliente primeiro. Por exemplo, você poderia usar:
- [``](/system/display/#hiding-elements)
- [``](/components/hidden/#css)
-- or [`themes.breakpoints.up(x)`](/customization/breakpoints/#css-media-queries)
+- ou [`themes.breakpoints.up(x)`](/customization/breakpoints/#css-media-queries)
## Testando
-Similar to the server-side case, you need an implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) in your test environment.
+Semelhante ao caso do lado do servidor, você precisa de uma implementação de [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) em seu ambiente de teste.
-For instance, [jsdom doesn't support it yet](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). You should polyfill it. We recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery) to emulate it.
+Por exemplo, [jsdom não suporta ainda](https://github.com/jsdom/jsdom/blob/master/test/web-platform-tests/to-upstream/html/browsers/the-window-object/window-properties-dont-upstream.html). Você deve usar um polyfill para isso. Recomendamos usar [css-mediaquery](https://github.com/ericf/css-mediaquery) para emulá-lo.
```js
import mediaQuery from 'css-mediaquery';
@@ -88,7 +88,7 @@ function createMatchMedia(width) {
});
}
-describe('MyTests', () => {
+describe('MeusTestes', () => {
beforeAll(() => {
window.matchMedia = createMatchMedia(window.innerWidth);
});
@@ -107,11 +107,11 @@ O componente de ordem superior `withWidth()` injeta a largura da tela da página
#### Argumentos
-1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
+1. `query` (*String* | *Function*): Uma string representando a consulta de mídia a ser manipulada ou uma função de retorno de chamada aceitando o tema (no contexto) que retorna uma string.
2. `options` (*Object* [opcional]):
- - `options.defaultMatches` (*Boolean* [opcional]): Como `window.matchMedia()` não esta disponível no servidor, retornamos uma correspondência padrão durante a primeira montagem. O valor padrão é `false`.
- - `options.noSsr` (*Boolean* [opcional]): Padrão é `false`. Para realizar a reconciliação de renderização do lado do servidor, ele precisa renderizar duas vezes. Uma primeira vez sem nada e uma segunda vez com os filhos. Este ciclo de renderização de dupla passagem tem uma desvantagem. É mais lento. Você pode definir esse sinalizador para `true` se você **não estiver fazendo a renderização do lado do servidor**.
- - `options.ssrMatchMedia` (*Function* [opcional]) Você pode querer usar uma heurística para aproximar a tela no navegador do cliente. Por exemplo, você poderia estar usando o user-agent ou o client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Verifique o exemplo de renderização do lado do servidor [](#server-side-rendering).
+ - `options.defaultMatches` (*Boolean* [opcional]): Como `window.matchMedia()` não esta disponível no servidor, retornamos uma correspondência padrão durante a primeira montagem. O valor padrão é `false`.
+ - `options.noSsr` (*Boolean* [opcional]): Padrão é `false`. Para realizar a reconciliação de renderização do lado do servidor, ele precisa renderizar duas vezes. Uma primeira vez sem nada e uma segunda vez com os filhos. Este ciclo de renderização de dupla passagem tem uma desvantagem. É mais lento. Você pode definir esse sinalizador para `true` se você **não estiver fazendo a renderização do lado do servidor**.
+ - `options.ssrMatchMedia` (*Function* [opcional]) Você pode querer usar uma heurística para aproximar a tela no navegador do cliente. Por exemplo, você poderia estar usando o user-agent ou o client-hint https://caniuse.com/#search=client%20hint. Você pode fornecer um global ponyfill usando [`propriedades customizadas`](/customization/globals/#default-props) no tema. Verifique o exemplo de renderização do lado do servidor [](#server-side-rendering).
#### Retornos
diff --git a/docs/src/pages/components/use-media-query/use-media-query-ru.md b/docs/src/pages/components/use-media-query/use-media-query-ru.md
index 939304ed64f4cb..549b6612545a80 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-ru.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-ru.md
@@ -109,9 +109,9 @@ The `withWidth()` higher-order component injects the screen width of the page. Y
1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
2. `options` (*Object* [optional]):
- - `options.defaultMatches` (*Boolean* [optional]): As `window.matchMedia()` is unavailable on the server, we return a default matches during the first mount. The default value is `false`.
- - `options.noSsr` (*Boolean* [optional]): Defaults to `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to `true` if you are **not doing server-side rendering**.
- - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
+ - `options.defaultMatches` (*Boolean* [optional]): As `window.matchMedia()` is unavailable on the server, we return a default matches during the first mount. The default value is `false`.
+ - `options.noSsr` (*Boolean* [optional]): Defaults to `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to `true` if you are **not doing server-side rendering**.
+ - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering).
#### Возвращает
diff --git a/docs/src/pages/components/use-media-query/use-media-query-zh.md b/docs/src/pages/components/use-media-query/use-media-query-zh.md
index a9c2597e00a98f..d316a4730a01d3 100644
--- a/docs/src/pages/components/use-media-query/use-media-query-zh.md
+++ b/docs/src/pages/components/use-media-query/use-media-query-zh.md
@@ -4,9 +4,9 @@ title: React中的媒体查询用于响应式设计
# useMediaQuery
-这是React的CSS媒体查询钩子。 它侦听与CSS媒体查询的匹配。 它允许根据查询是否匹配来呈现组件。
+这是React的CSS媒体查询钩子。 它监控着与 CSS 媒体查询的匹配结果。 它允许根据查询是否匹配来呈现组件。
-一些重要特点：
+以下是这个库的一些特点：
- ⚛️它有一个惯用的React API。
- 🚀它具有高性能，它会观察文档以检测其媒体查询何时发生更改，而不是定期轮询值。
@@ -108,16 +108,16 @@ describe('MyTests', () => {
#### 参数
1. `query` (*String* | *Function*): A string representing the media query to handle or a callback function accepting the theme (in the context) that returns a string.
-2. `选项` (*Object* [optional]):
- - `options.defaultMatches` （*布尔值* [optional]）： 作为 `window.matchMedia()` 在服务器上不可用， 我们在第一次安装时返回默认匹配。 默认值为 `false`。
- - `options.noSsr` (*Boolean* [可选的]): 默认值为`false`。 为了执行服务器端呈现协调，它需要呈现两次。 第一次没有任何东西，第二次与孩子们在一起。 这种双遍渲染周期有一个缺点。 它慢了。 您可以将此标志设置为 `真` ，如果你是 **没有做服务器端渲染**。
- - `options.ssrMatchMedia` （*功能* [optional]）您可能希望使用启发式来近似 客户端浏览器的屏幕。 例如，您可以使用用户代理或客户端提示https://caniuse.com/#search=client%20hint。 You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. 检查 [服务器端呈现示例](#server-side-rendering)。
+2. `options` (*Object* [optional]):
+ - `options.defaultMatches` （*布尔值* [optional]）： 作为 `window.matchMedia()` 在服务器上不可用， 我们在第一次安装时返回默认匹配。 默认值为 `false`。
+ - `options.noSsr` (*Boolean* [optional]): 默认值为`false`。 为了执行服务器端呈现协调，它需要呈现两次。 第一次没有任何东西，第二次与孩子们在一起。 这种双遍渲染周期有一个缺点。 它慢了。 您可以将此标志设置为 `真` ，如果你是 **没有做服务器端渲染**。
+ - `options.ssrMatchMedia` （*功能* [optional]）您可能希望使用启发式来近似 客户端浏览器的屏幕。 例如，您可以使用用户代理或客户端提示https://caniuse.com/#search=client%20hint。 You can provide a global ponyfill using [`custom props`](/customization/globals/#default-props) on the theme. 检查 [服务器端呈现示例](#server-side-rendering)。
#### 返回结果
` matches `：如果文档当前能够匹配这个媒体查询，Matches 是 `true` ，否则为 `false` 。
-#### 例子
+#### 示例
```jsx
import React from 'react';
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-de.md b/docs/src/pages/customization/breakpoints/breakpoints-de.md
index fa44cd191086fa..069378d7a5f200 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-de.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-de.md
@@ -85,7 +85,7 @@ In der folgenden Demo ändern wir das gerenderte DOM-Element (* em*, u ,
### `theme.breakpoints.up(key) => media query`
-#### Argumente
+#### Parameter
1. `key` (*String* | *Number*): Ein Haltepunkteschlüssel (`xs`, `sm`, etc.) oder eine Bildschirmbreite in pixel.
@@ -201,10 +201,10 @@ Einige Implementierungsdetails, die interessant sein könnten:
#### Argumente
-1. `Optionen` (*Object* [optional]):
- - `options.withTheme ` (*Boolean* [optional]): Standardeinstellung ist `false`. Übergeben Sie das `Theme` Objekt als Eigenschaft an die Komponente.
- - `options.noSSR ` (*Boolean* [optional]): Standardeinstellung ist `false`. Um den serverseitigen Renderingabgleich durchzuführen, muss er zweimal gerendert werden. Ein erstes Mal mit nichts und ein zweites Mal mit den Kind-Elementen. Dieser Zyklus mit zwei Durchgängen ist mit einem Nachteil verbunden. Die Benutzeroberfläche blinkt möglicherweise. Sie können dieses Flag auf ` true` setzen, wenn Sie kein serverseitiges Rendering durchführen.
- - ` options.initialWidth ` (*Breakpoint* [optional]): Da ` window.innerWidth ` auf dem Server nicht verfügbar ist, wird eine leere Komponente während der ersten Mounts standardmäßig gerendert. Vielleicht mögen Sie eine Heuristik verwenden, um annähernd die Bildschirmbreite des Client-Browsers zu bestimmen. Sie könnten beispielsweise den Benutzeragenten oder die Client-Hinweise verwenden. Mit https://caniuse.com/#search=client%20hint, können wir die anfängliche Breite global festlegen, indem Sie die [`benutzerdefinierten Eigenschaften`](/customization/globals/#default-props) zum Theme verwenden. Um die Anfangsbreite festzulegen, müssen wir eine benutzerdefinierte Eigenschaft mit dieser Form übergeben:
+1. `options` (*Object* [optional]):
+ - `options.withTheme ` (*Boolean* [optional]): Standardeinstellung ist `false`. Übergeben Sie das `Theme` Objekt als Eigenschaft an die Komponente.
+ - `options.noSSR ` (*Boolean* [optional]): Standardeinstellung ist `false`. Um den serverseitigen Renderingabgleich durchzuführen, muss er zweimal gerendert werden. Ein erstes Mal mit nichts und ein zweites Mal mit den Kind-Elementen. Dieser Zyklus mit zwei Durchgängen ist mit einem Nachteil verbunden. Die Benutzeroberfläche blinkt möglicherweise. Sie können dieses Flag auf ` true` setzen, wenn Sie kein serverseitiges Rendering durchführen.
+ - ` options.initialWidth ` (*Breakpoint* [optional]): Da ` window.innerWidth ` auf dem Server nicht verfügbar ist, wird eine leere Komponente während der ersten Mounts standardmäßig gerendert. Vielleicht mögen Sie eine Heuristik verwenden, um annähernd die Bildschirmbreite des Client-Browsers zu bestimmen. Sie könnten beispielsweise den Benutzeragenten oder die Client-Hinweise verwenden. Mit https://caniuse.com/#search=client%20hint, können wir die anfängliche Breite global festlegen, indem Sie die [`benutzerdefinierten Eigenschaften`](/customization/globals/#default-props) zum Theme verwenden. Um die Anfangsbreite festzulegen, müssen wir eine benutzerdefinierte Eigenschaft mit dieser Form übergeben:
```js
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-es.md b/docs/src/pages/customization/breakpoints/breakpoints-es.md
index c05560c1574bbc..20a5d87534f66c 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-es.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-es.md
@@ -202,9 +202,9 @@ Some implementation details that might be interesting to being aware of:
#### Argumentos
1. `options` (*Object* [optional]):
- - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property.
- - `options.noSSR` (*Boolean* [optional]): Defaults to `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. The UI might blink. You can set this flag to `true` if you are not doing server-side rendering.
- - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape:
+ - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property.
+ - `options.noSSR` (*Boolean* [optional]): Defaults to `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. The UI might blink. You can set this flag to `true` if you are not doing server-side rendering.
+ - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape:
```js
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-fr.md b/docs/src/pages/customization/breakpoints/breakpoints-fr.md
index d60962db2192ed..bc8d1487b6f15d 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-fr.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-fr.md
@@ -202,9 +202,9 @@ Some implementation details that might be interesting to being aware of:
#### Paramètres
1. `options` (*Object* [optional]):
- - `options.withTheme` (*Boolean* [optional]): Valeur par défaut `false`. Provide the `theme` object to the component as a property.
- - `options.noSSR` (*Boolean* [optional]): Valeur par défaut `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. The UI might blink. You can set this flag to `true` if you are not doing server-side rendering.
- - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape:
+ - `options.withTheme` (*Boolean* [optional]): Valeur par défaut `false`. Provide the `theme` object to the component as a property.
+ - `options.noSSR` (*Boolean* [optional]): Valeur par défaut `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. The UI might blink. You can set this flag to `true` if you are not doing server-side rendering.
+ - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape:
```js
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-ja.md b/docs/src/pages/customization/breakpoints/breakpoints-ja.md
index 557fc535f9675d..27b3ce4da00efe 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-ja.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-ja.md
@@ -201,10 +201,10 @@ Some implementation details that might be interesting to being aware of:
#### 引数
-1. `options` (*Object* [optional]):
- - `options.withTheme` (*ブール値* [任意]): デフォルト値 `false`. Provide the `theme` object to the component as a property.
- - `options.noSSR` (*ブール値* [任意]): デフォルト値 `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. The UI might blink. You can set this flag to `true` if you are not doing server-side rendering.
- - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape:
+1. `オプション` (*オプジェクト* [任意]):
+ - `options.withTheme` (*ブール値* [任意]): デフォルト値 `false`. Provide the `theme` object to the component as a property.
+ - `options.noSSR` (*ブール値* [任意]): デフォルト値 `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. The UI might blink. You can set this flag to `true` if you are not doing server-side rendering.
+ - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape:
```js
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-pt.md b/docs/src/pages/customization/breakpoints/breakpoints-pt.md
index 431f6f6fb720d8..9ae7aaf692bdcd 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-pt.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-pt.md
@@ -99,8 +99,8 @@ Na demonstração a seguir, alteramos o elemento DOM renderizado (*em*, u
const styles = theme => ({
root: {
backgroundColor: 'blue',
- // Match [md, ∞[
- // [960px, ∞[
+ // Corresponde [md, ∞[
+ // [960px, ∞[
[theme.breakpoints.up('md')]: {
backgroundColor: 'red',
},
@@ -124,9 +124,9 @@ const styles = theme => ({
const styles = theme => ({
root: {
backgroundColor: 'blue',
- // Match [0, md + 1[
- // [0, lg[
- // [0, 1280px[
+ // Corresponde [0, md + 1[
+ // [0, lg[
+ // [0, 1280px[
[theme.breakpoints.down('md')]: {
backgroundColor: 'red',
},
@@ -150,9 +150,9 @@ const styles = theme => ({
const styles = theme => ({
root: {
backgroundColor: 'blue',
- // Match [md, md + 1[
- // [md, lg[
- // [960px, 1280px[
+ // Corresponde [md, md + 1[
+ // [md, lg[
+ // [960px, 1280px[
[theme.breakpoints.only('md')]: {
backgroundColor: 'red',
},
@@ -177,9 +177,9 @@ const styles = theme => ({
const styles = theme => ({
root: {
backgroundColor: 'blue',
- // Match [sm, md + 1[
- // [sm, lg[
- // [600px, 1280px[
+ // Corresponde [sm, md + 1[
+ // [sm, lg[
+ // [600px, 1280px[
[theme.breakpoints.between('sm', 'md')]: {
backgroundColor: 'red',
},
@@ -201,10 +201,10 @@ Alguns detalhes de implementação que podem ser interessantes para estar ciente
#### Argumentos
-1. `options` (*Object* [optional]):
- - `options.withTheme` (*Boolean* [opcional]): Padrão `false`. Fornecer o objeto `theme` para o componente como uma propriedade.
- - `options.noSSR` (*Boolean* [opcional]): Padrão `false`. Para realizar a reconciliação de renderização do lado do servidor, ele precisa renderizar duas vezes. Uma primeira vez sem nada e uma segunda vez com os filhos. Este ciclo de renderização de dupla passagem tem uma desvantagem. A interface do usuário pode piscar. Você pode definir esse sinalizador para `true` se você não estiver fazendo a renderização do lado do servidor.
- - `options.initialWidth` (*Breakpoint* [opcional]): Como `window.innerWidth` não esta disponível no servidor, retornamos uma correspondência padrão durante a primeira montagem. Você pode querer usar uma heurística para aproximar a largura da tela no navegador do cliente. Por exemplo, você poderia estar usando o user-agent ou o client-hint. https://caniuse.com/#search=client%20hint, também podemos definir a largura inicial globalmente usando [`propriedades customizadas`](/customization/globals/#default-props) no tema. Para definir o initialWidth, precisamos passar uma propriedade customizada com esta forma:
+1. `options` (*Object* [opcional]):
+ - `options.withTheme` (*Boolean* [opcional]): Padrão `false`. Fornecer o objeto `theme` para o componente como uma propriedade.
+ - `options.noSSR` (*Boolean* [opcional]): Padrão `false`. Para realizar a reconciliação de renderização do lado do servidor, ele precisa renderizar duas vezes. Uma primeira vez sem nada e uma segunda vez com os filhos. Este ciclo de renderização de dupla passagem tem uma desvantagem. A interface do usuário pode piscar. Você pode definir esse sinalizador para `true` se você não estiver fazendo a renderização do lado do servidor.
+ - `options.initialWidth` (*Breakpoint* [opcional]): Como `window.innerWidth` não esta disponível no servidor, retornamos uma correspondência padrão durante a primeira montagem. Você pode querer usar uma heurística para aproximar a largura da tela no navegador do cliente. Por exemplo, você poderia estar usando o user-agent ou o client-hint. https://caniuse.com/#search=client%20hint, também podemos definir a largura inicial globalmente usando [`propriedades customizadas`](/customization/globals/#default-props) no tema. Para definir o initialWidth, precisamos passar uma propriedade customizada com esta forma:
```js
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-ru.md b/docs/src/pages/customization/breakpoints/breakpoints-ru.md
index 12b80290f2b8db..683be879ffd7d8 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-ru.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-ru.md
@@ -202,9 +202,9 @@ type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
#### Аргументы
1. `options` (*Object* [optional]):
- - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property.
- - `options.noSSR` (*Boolean* [optional]): Defaults to `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. The UI might blink. You can set this flag to `true` if you are not doing server-side rendering.
- - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape:
+ - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property.
+ - `options.noSSR` (*Boolean* [optional]): Defaults to `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. The UI might blink. You can set this flag to `true` if you are not doing server-side rendering.
+ - `options.initialWidth` (*Breakpoint* [optional]): As `window.innerWidth` is unavailable on the server, we default to rendering an empty component during the first mount. You might want to use an heuristic to approximate the screen width of the client browser screen width. For instance, you could be using the user-agent or the client-hints. https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. In order to set the initialWidth we need to pass a custom property with this shape:
```js
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/breakpoints/breakpoints-zh.md b/docs/src/pages/customization/breakpoints/breakpoints-zh.md
index 54f4961d27be5c..b7beca9ff1979c 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints-zh.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints-zh.md
@@ -93,7 +93,7 @@ export default withWidth()(MyComponent);
`media query` ：准备与JSS一起使用的媒体查询字符串。
-#### 例子
+#### 示例
```js
const styles = theme => ({
@@ -202,9 +202,9 @@ type Breakpoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
#### 参数
1. `options` (*Object* [optional]):
- - ` options.withTheme ` (*Boolean* [optional]): 默认值为 `false`。 将 ` theme ` 对象作为属性提供给组件。
- - `options.noSSR` (*Boolean* [可选的]): 默认值为`false`。 为了执行服务器端呈现协调，它需要呈现两次。 第一次没有任何东西，第二次与孩子们在一起。 这种双遍渲染周期有一个缺点。 用户界面可能会闪烁。 如果不进行服务器端渲染，可以将此标志设置为 `true`。
- - `options.initialWidth` （*Breakpoint* [可选的]）： 为`window.innerWidth`在服务器上不可用， 我们默认在第一次安装期间呈现空组件。 您可能希望使用启发式来近似 客户端浏览器屏幕宽度的屏幕宽度。 例如，您可以使用用户代理或客户端提示。 https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. 为了设置initialWidth，我们需要传递一个具有以下形状的自定义属性：
+ - ` options.withTheme ` (*Boolean* [optional]): 默认值为 `false`。 将 ` theme ` 对象作为属性提供给组件。
+ - `options.noSSR` (*Boolean* [可选的]): 默认值为`false`。 为了执行服务器端呈现协调，它需要呈现两次。 第一次没有任何东西，第二次与孩子们在一起。 这种双遍渲染周期有一个缺点。 用户界面可能会闪烁。 如果不进行服务器端渲染，可以将此标志设置为 `true`。
+ - `options.initialWidth` （*Breakpoint* [可选的]）： 为`window.innerWidth`在服务器上不可用， 我们默认在第一次安装期间呈现空组件。 您可能希望使用启发式来近似 客户端浏览器屏幕宽度的屏幕宽度。 例如，您可以使用用户代理或客户端提示。 https://caniuse.com/#search=client%20hint, we also can set the initial width globally using [`custom properties`](/customization/globals/#default-props) on the theme. 为了设置initialWidth，我们需要传递一个具有以下形状的自定义属性：
```js
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/color/color-de.md b/docs/src/pages/customization/color/color-de.md
index 9581247708e1a3..8083876daf5e5d 100644
--- a/docs/src/pages/customization/color/color-de.md
+++ b/docs/src/pages/customization/color/color-de.md
@@ -49,7 +49,7 @@ Um ein [ material.io/design/color ](https://material.io/design/color/) Farbschem
{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true}}
-Die im Farbmuster angezeigte Ausgabe kann direkt in eine [`createMuiTheme()`](/customization/themes/#createmuitheme-options-theme) Funktion (zur Verwendung mit [` MuiThemeProvider`](/customization/themes/#theme-provider)) eingefügt werden:
+Die im Farbmuster angezeigte Ausgabe kann direkt in eine [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) Funktion (zur Verwendung mit [` MuiThemeProvider`](/customization/theming/#theme-provider)) eingefügt werden:
```jsx
import { createMuiTheme } from '@material-ui/core/styles';
diff --git a/docs/src/pages/customization/color/color-es.md b/docs/src/pages/customization/color/color-es.md
index d133af75115a60..c4bd815f416c5f 100644
--- a/docs/src/pages/customization/color/color-es.md
+++ b/docs/src/pages/customization/color/color-es.md
@@ -49,7 +49,7 @@ Para probar un esquema de color [material.io/design/color](https://material.io/d
{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true}}
-La salida conseguida en la muestra de color se puede pegar directamente en la función [`createMuiTheme()`](/customization/themes/#createmuitheme-options-theme) (para ser utilizada con [`MuiThemeProvider`](/customization/themes/#theme-provider)):
+La salida conseguida en la muestra de color se puede pegar directamente en la función [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) (para ser utilizada con [`MuiThemeProvider`](/customization/theming/#theme-provider)):
```jsx
import { createMuiTheme } from '@material-ui/core/styles';
diff --git a/docs/src/pages/customization/color/color-fr.md b/docs/src/pages/customization/color/color-fr.md
index a05fae73cdfaad..6ac16f10382662 100644
--- a/docs/src/pages/customization/color/color-fr.md
+++ b/docs/src/pages/customization/color/color-fr.md
@@ -49,7 +49,7 @@ To test a [material.io/design/color](https://material.io/design/color/) color sc
{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true}}
-The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/themes/#createmuitheme-options-theme) function (to be used with [`MuiThemeProvider`](/customization/themes/#theme-provider)):
+The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`MuiThemeProvider`](/customization/theming/#theme-provider)):
```jsx
import { createMuiTheme } from '@material-ui/core/styles';
diff --git a/docs/src/pages/customization/color/color-ja.md b/docs/src/pages/customization/color/color-ja.md
index c640a081f61904..3efb515b53477f 100644
--- a/docs/src/pages/customization/color/color-ja.md
+++ b/docs/src/pages/customization/color/color-ja.md
@@ -49,7 +49,7 @@ To test a [material.io/design/color](https://material.io/design/color/) color sc
{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true}}
-The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/themes/#createmuitheme-options-theme) function (to be used with [`MuiThemeProvider`](/customization/themes/#theme-provider)):
+The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`MuiThemeProvider`](/customization/theming/#theme-provider)):
```jsx
import { createMuiTheme } from '@material-ui/core/styles';
diff --git a/docs/src/pages/customization/color/color-pt.md b/docs/src/pages/customization/color/color-pt.md
index 4bde2aa21c757a..85c0835a240964 100644
--- a/docs/src/pages/customization/color/color-pt.md
+++ b/docs/src/pages/customization/color/color-pt.md
@@ -49,7 +49,7 @@ Para testar um esquema de cores do [material.io/design/color](https://material.i
{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true}}
-A saída exibida na amostra de cores pode ser colada diretamente em uma função [`createMuiTheme()`](/customization/themes/#createmuitheme-options-theme) (para ser usada com [`MuiThemeProvider`](/customization/themes/#theme-provider)):
+A saída exibida na amostra de cores pode ser colada diretamente em uma função [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) (para ser usada com [`MuiThemeProvider`](/customization/theming/#theme-provider)):
```jsx
import { createMuiTheme } from '@material-ui/core/styles';
diff --git a/docs/src/pages/customization/color/color-ru.md b/docs/src/pages/customization/color/color-ru.md
index 5e3befc970e16b..d749b4bcb85737 100644
--- a/docs/src/pages/customization/color/color-ru.md
+++ b/docs/src/pages/customization/color/color-ru.md
@@ -49,7 +49,7 @@ const color = HUE[SHADE];
{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true}}
-The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/themes/#createmuitheme-options-theme) function (to be used with [`MuiThemeProvider`](/customization/themes/#theme-provider)):
+The output shown in the color sample can be pasted directly into a [`createMuiTheme()`](/customization/theming/#createmuitheme-options-theme) function (to be used with [`MuiThemeProvider`](/customization/theming/#theme-provider)):
```jsx
import { createMuiTheme } from '@material-ui/core/styles';
diff --git a/docs/src/pages/customization/color/color-zh.md b/docs/src/pages/customization/color/color-zh.md
index 85fd4b0af85a36..5cbd018786147f 100644
--- a/docs/src/pages/customization/color/color-zh.md
+++ b/docs/src/pages/customization/color/color-zh.md
@@ -14,13 +14,13 @@ Material Design [颜色系统](https://material.io/design/color/) 可用于创
#### “色彩”和“阴影”
-调色板中的单一颜色由色相如 "red" 和阴影如 "500"组成。 "rad 50" 是红色的最浅的阴影 (* 粉红色! *), 而 "red 900" 是最暗的。 此外, 大多数色调都带有强调色调, 以 ` A ` 为前缀。
+调色板中的单一颜色由色相如 "red" 和阴影如 "500"组成。 “red 50”是最浅的红色（*粉红色*），而red 900”是最暗的。 此外, 大多数色调都带有强调色调, 以 ` A ` 为前缀。
### 例子
Material Design调色板包括主要和强调颜色, 可用于插图或开发您的品牌颜色. 他们被设计成彼此和谐地工作.
-例如, 您可以参考互补的主要和强调颜色 (例如 "red 500" & "purple A200"), 如下所示:
+例如，可以参考互补初级和强调色（例如"red 500" & "purple A200”），如下所示：
```js
import purple from '@material-ui/core/colors/purple';
@@ -49,7 +49,7 @@ const color = HUE[SHADE];
{{"demo": "pages/customization/color/ColorTool.js", "hideHeader": true}}
-颜色样本中显示的输出可以直接粘贴到[` createMuiTheme()`](/customization/themes/#createmuitheme-options-theme)函数中与([` MuiThemeProvider`](/customization/themes/#theme-provider)一起使用);
+颜色样本中显示的输出可以直接粘贴到[` createMuiTheme()`](/customization/theming/#createmuitheme-options-theme)函数中与([` MuiThemeProvider`](/customization/theming/#theme-provider)一起使用);
```jsx
import { createMuiTheme } from '@material-ui/core/styles';
@@ -67,7 +67,7 @@ const theme = createMuiTheme({
只需要提供 `main` 阴影（除非您希望进一步自定义 `light` `dark` 或 `contrastText`），因为其他颜色将由 `createMuiTheme()`计算，如 [主题定制中所述](/customization/palette/) 节。
-如果你通过提供 color object 的方式 使用默认的主要阴影 和/或 次要阴影，`createMuiTheme()` 将会根据 主、亮和暗 三种 material 颜色选择合适的阴影。
+如果您使用默认的主色调和/或次要色调，则通过提供颜色对象， `createMuiTheme()` 将使用材质颜色中适当的阴影，主色，浅色和深色。
### 官方色彩工具
@@ -77,7 +77,7 @@ Material Design 团队提供了一款令人赞叹的调色板配置工具：[mat
You can easily customize the appearance of a Material-UI component.
+Usted puede personalizar fácilmente la apariencia de un Material-componente de interfaz de usuario.
As components can be used in different contexts, there are several approaches to this. Going from the narrowest use-case to the broadest, these are:
@@ -24,7 +24,9 @@ This example uses the [`withStyles()`](/styles/basics/#higher-order-component-ap
### Overriding styles with classes
-When the `className` property isn't enough, and you need to access deeper elements, you can take advantage of the `classes` object property to customize all the CSS injected by Material-UI for a given component. La lista de clases para cada componente se documenta en la sección **API de Component**. Por ejemplo, puedes echar un vistazo a la [API CSS de Button](/api/button/#css). Como alternativa, puedes utilizar las [herramientas de desarrollo del navegador](#using-the-dev-tools).
+When the `className` property isn't enough, and you need to access deeper elements, you can take advantage of the `classes` object property to customize all the CSS injected by Material-UI for a given component.
+
+The list of classes for each component is documented in the component API page, you should refer to the **CSS section** and **rule name column**. Por ejemplo, puedes echar un vistazo a la [API CSS de Button](/api/button/#css). Como alternativa, puedes utilizar las [herramientas de desarrollo del navegador](#using-the-dev-tools).
This example also uses `withStyles()` (see above), but here, `ClassesNesting` is using `Button`'s `classes` prop to provide an object that maps the **names of classes to override** (style rules) to the **CSS class names to apply** (values). The component's existing classes will continue to be injected, so it is only necessary to provide the specific styles you wish to add or override.
@@ -32,6 +34,10 @@ Notice that in addition to the button styling, the button label's capitalization
{{"demo": "pages/customization/components/ClassesNesting.js"}}
+### Overriding styles with global class names
+
+[Follow this section](/styles/advanced/#with-material-ui-core).
+
### Usando las herramientas de dev
Las herramientas de desarrollo del navegador pueden ahorrarte mucho tiempo. Material-UI's class names [follow a simple pattern](/styles/advanced/#class-names) in development mode: `Mui[component name]-[style rule name]-[UUID]`.
@@ -122,6 +128,7 @@ Instead of providing values to the `classes` prop API, you can rely on [the glob
| expanded | Mui-expanded |
| selected | Mui-selected |
+
```css
.MenuItem {
color: black;
@@ -228,7 +235,7 @@ The demos of this section covers how to the change the button's font size.
### Theme variables
-You can adjusting the [theme configuration variables](/customization/themes/#theme-configuration-variables).
+You can adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables).
```jsx
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/components/components-fr.md b/docs/src/pages/customization/components/components-fr.md
index 957917554a5e87..8cde6e3c89a830 100644
--- a/docs/src/pages/customization/components/components-fr.md
+++ b/docs/src/pages/customization/components/components-fr.md
@@ -24,7 +24,9 @@ This example uses the [`withStyles()`](/styles/basics/#higher-order-component-ap
### Overriding styles with classes
-When the `className` property isn't enough, and you need to access deeper elements, you can take advantage of the `classes` object property to customize all the CSS injected by Material-UI for a given component. The list of classes for each component is documented in the **Component API** section. For instance, you can have a look at the [Button CSS API](/api/button/#css). Alternatively, you can use the [browser dev tools](#using-the-dev-tools).
+When the `className` property isn't enough, and you need to access deeper elements, you can take advantage of the `classes` object property to customize all the CSS injected by Material-UI for a given component.
+
+The list of classes for each component is documented in the component API page, you should refer to the **CSS section** and **rule name column**. For instance, you can have a look at the [Button CSS API](/api/button/#css). Alternatively, you can use the [browser dev tools](#using-the-dev-tools).
This example also uses `withStyles()` (see above), but here, `ClassesNesting` is using `Button`'s `classes` prop to provide an object that maps the **names of classes to override** (style rules) to the **CSS class names to apply** (values). The component's existing classes will continue to be injected, so it is only necessary to provide the specific styles you wish to add or override.
@@ -32,6 +34,10 @@ Notice that in addition to the button styling, the button label's capitalization
{{"demo": "pages/customization/components/ClassesNesting.js"}}
+### Overriding styles with global class names
+
+[Follow this section](/styles/advanced/#with-material-ui-core).
+
### Utiliser les outils de développement
The browser dev tools can save you a lot of time. Material-UI's class names [follow a simple pattern](/styles/advanced/#class-names) in development mode: `Mui[component name]-[style rule name]-[UUID]`.
@@ -122,6 +128,7 @@ Instead of providing values to the `classes` prop API, you can rely on [the glob
| expanded | Mui-expanded |
| selected | Mui-selected |
+
```css
.MenuItem {
color: black;
@@ -228,7 +235,7 @@ The demos of this section covers how to the change the button's font size.
### Theme variables
-You can adjusting the [theme configuration variables](/customization/themes/#theme-configuration-variables).
+You can adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables).
```jsx
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/components/components-ja.md b/docs/src/pages/customization/components/components-ja.md
index 0e0a032999d811..f3cbf24594a89c 100644
--- a/docs/src/pages/customization/components/components-ja.md
+++ b/docs/src/pages/customization/components/components-ja.md
@@ -24,7 +24,9 @@ This example uses the [`withStyles()`](/styles/basics/#higher-order-component-ap
### Overriding styles with classes
-When the `className` property isn't enough, and you need to access deeper elements, you can take advantage of the `classes` object property to customize all the CSS injected by Material-UI for a given component. The list of classes for each component is documented in the **Component API** section. For instance, you can have a look at the [Button CSS API](/api/button/#css). Alternatively, you can use the [browser dev tools](#using-the-dev-tools).
+When the `className` property isn't enough, and you need to access deeper elements, you can take advantage of the `classes` object property to customize all the CSS injected by Material-UI for a given component.
+
+The list of classes for each component is documented in the component API page, you should refer to the **CSS section** and **rule name column**. For instance, you can have a look at the [Button CSS API](/api/button/#css). Alternatively, you can use the [browser dev tools](#using-the-dev-tools).
This example also uses `withStyles()` (see above), but here, `ClassesNesting` is using `Button`'s `classes` prop to provide an object that maps the **names of classes to override** (style rules) to the **CSS class names to apply** (values). The component's existing classes will continue to be injected, so it is only necessary to provide the specific styles you wish to add or override.
@@ -32,6 +34,10 @@ Notice that in addition to the button styling, the button label's capitalization
{{"demo": "pages/customization/components/ClassesNesting.js"}}
+### Overriding styles with global class names
+
+[Follow this section](/styles/advanced/#with-material-ui-core).
+
### Using the dev tools
The browser dev tools can save you a lot of time. Material-UI's class names [follow a simple pattern](/styles/advanced/#class-names) in development mode: `Mui[component name]-[style rule name]-[UUID]`.
@@ -122,6 +128,7 @@ Instead of providing values to the `classes` prop API, you can rely on [the glob
| expanded | Mui-expanded |
| selected | Mui-selected |
+
```css
.MenuItem {
color: black;
@@ -228,7 +235,7 @@ The demos of this section covers how to the change the button's font size.
### テーマ変数
-You can adjusting the [theme configuration variables](/customization/themes/#theme-configuration-variables).
+You can adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables).
```jsx
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/components/components-pt.md b/docs/src/pages/customization/components/components-pt.md
index 734541c54a83d3..a3789ef79523d4 100644
--- a/docs/src/pages/customization/components/components-pt.md
+++ b/docs/src/pages/customization/components/components-pt.md
@@ -24,7 +24,9 @@ Este exemplo usa o [`withStyles()`](/styles/basics/#higher-order-component-api)
### Sobrescrevendo estilos com classes
-Quando a propriedade `className` não é suficiente, e você precisa acessar elementos mais profundos, você pode tirar proveito da propriedade do tipo objeto `classes`, com ela podemos customizar todo o CSS injetado pelo Material-UI para um determinado componente. A lista de classes para cada componente está documentada na seção **API do componente**. Por exemplo, você pode dar uma olhada na [API CSS do botão](/api/button/#css). Como alternativa, você pode usar as [ferramentas de desenvolvimento do navegador](#using-the-dev-tools).
+Quando a propriedade `className` não é suficiente, e você precisa acessar elementos mais profundos, você pode tirar proveito da propriedade do tipo objeto `classes`, com ela podemos customizar todo o CSS injetado pelo Material-UI para um determinado componente.
+
+A lista de classes para cada componente está documentada na página da API do componente, você deve consultar a coluna **seção CSS** e **coluna rule name**. Por exemplo, você pode dar uma olhada na [API CSS do botão](/api/button/#css). Como alternativa, você pode usar as [ferramentas de desenvolvimento do navegador](#using-the-dev-tools).
Este exemplo também usa `withStyles()` (como acima), mas aqui, `ClassesNesting` está usando a propriedade `classes` do `Botão` para fornecer um objeto que mapeia os **nomes das classes para sobrescrever** (regras de estilo) para **os nomes de classes CSS a serem aplicados** (valores). As classes existentes do componente continuarão a ser injetadas, portanto, é necessário apenas fornecer os estilos específicos que você deseja adicionar ou sobrescrever.
@@ -32,6 +34,10 @@ Observe que, além do estilo do botão, a capitalização do rótulo do botão f
{{"demo": "pages/customization/components/ClassesNesting.js"}}
+### Sobrescrevendo estilos por nomes de classes globais
+
+[Siga esta seção](/styles/advanced/#with-material-ui-core).
+
### Usando as ferramentas de desenvolvimento
As ferramentas de desenvolvimento do navegador podem poupar muito tempo. Os nomes das classes do Material-UI's [seguem um padrão simples](/styles/advanced/#class-names) no modo de desenvolvimento: `Mui[component name]-[style rule name]-[UUID]`.
@@ -73,7 +79,7 @@ const StyledButton = withStyles({
Os estados especiais dos componentes, como *hover*, *focus*, *disabled* e *selected*, são estilizados com uma especificidade CSS mais alta. [Especificidade é um peso](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) que é aplicado a uma determinada declaração CSS.
-Para sobrescrever os estados especiais dos componentes, **você precisa aumentar a especificidade**. Aqui está um exemplo com o estado *disable* e o componente botão usando uma **pseudo-class** (`:disabled`):
+Para sobrescrever os estados especiais dos componentes, **você precisa aumentar a especificidade**. Aqui está um exemplo com o estado *disable* e o componente botão está usando uma **pseudo-class** (`:disabled`):
```css
.Button {
@@ -122,6 +128,7 @@ Em vez de fornecer valores para a propriedade `classes` da API, você pode utili
| expanded | Mui-expanded |
| selected | Mui-selected |
+
```css
.MenuItem {
color: black;
@@ -164,8 +171,8 @@ compila para:
```
@@ -174,13 +181,13 @@ compila para:
### Sobrescrevendo com estilos em linha
-A segunda maneira de sobrescrever o estilo de um componente é usar a abordagem de estilo **em linha**. Cada componente fornece uma propriedade `style`. Essas propriedades são sempre aplicadas ao elemento raiz.
+A segunda maneira de sobrescrever o estilo de um componente é usar a abordagem de estilo **inline**. Cada componente fornece uma propriedade `style`. Essas propriedades são sempre aplicadas ao elemento raiz.
-Você não precisa se preocupar com a especificidade do CSS, pois o estilo em linha tem precedência sobre o CSS regular.
+Você não precisa se preocupar com a especificidade do CSS, pois o estilo inline tem precedência sobre o CSS regular.
{{"demo": "pages/customization/components/InlineStyle.js"}}
-[Quando devo usar o estilo em linha vs classes?](/getting-started/faq/#when-should-i-use-inline-style-vs-classes)
+[Quando devo usar o estilo inline vs classes?](/getting-started/faq/#when-should-i-use-inline-style-vs-classes)
## 2. Variação dinâmica para uma situação única
@@ -228,7 +235,7 @@ As demonstrações desta seção abordam como alterar o tamanho da fonte do bot
### Variáveis de tema
-Você pode ajustar [as variáveis de configuração do tema](/customization/themes/#theme-configuration-variables).
+You can adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables).
```jsx
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/components/components-ru.md b/docs/src/pages/customization/components/components-ru.md
index a00578ec7d1a82..6a8cd9b746b462 100644
--- a/docs/src/pages/customization/components/components-ru.md
+++ b/docs/src/pages/customization/components/components-ru.md
@@ -24,7 +24,9 @@ As components can be used in different contexts, there are several approaches to
### Overriding styles with classes
-Когда ` className ` свойства недостаточно, и вам нужен доступ ко вложенным элементам, вы можете воспользоваться свойством объекта `classes` для настройки всех CSS, внедренных через Material-UI для данного компонента. Список классов для каждого компонента описан в разделе **Компонент API**. Для примера можете взглянуть на [Button CSS API](/api/button/#css). Кроме того, вы можете воспользоваться [встроенными в браузер инструментами разработчика](#using-the-dev-tools).
+Когда ` className ` свойства недостаточно, и вам нужен доступ ко вложенным элементам, вы можете воспользоваться свойством объекта `classes` для настройки всех CSS, внедренных через Material-UI для данного компонента.
+
+The list of classes for each component is documented in the component API page, you should refer to the **CSS section** and **rule name column**. Для примера можете взглянуть на [Button CSS API](/api/button/#css). Кроме того, вы можете воспользоваться [встроенными в браузер инструментами разработчика](#using-the-dev-tools).
В этом примере также используется ` withStyles() ` (см. выше), но теперь ` ClassesNesting ` присваивает свойству `classes` компонета `Button` обьект сопоставляющий **имена переопределяемых классов** (стилевые правила) с **именам использумых классов CSS ** (значениями). Существующие классы компонента будут по прежнему внедряться, поэтому необходимо указать только те стили, которые вы хотите добавить или переопределить.
@@ -32,6 +34,10 @@ As components can be used in different contexts, there are several approaches to
{{"demo": "pages/customization/components/ClassesNesting.js"}}
+### Overriding styles with global class names
+
+[Follow this section](/styles/advanced/#with-material-ui-core).
+
### Использование инструментов разработчика
Инструменты разработчика браузера могут сэкономить вам много времени. В режиме разработки имена классов Material-UI [следуют простому шаблону](/styles/advanced/#class-names): ` Mui[имя компонента]-[имя стилевого правила]-[UUID]`.
@@ -122,6 +128,7 @@ Instead of providing values to the `classes` prop API, you can rely on [the glob
| expanded | Mui-expanded |
| selected | Mui-selected |
+
```css
.MenuItem {
color: black;
@@ -228,7 +235,7 @@ The demos of this section covers how to the change the button's font size.
### Настраиваемые параметры темы
-You can adjusting the [theme configuration variables](/customization/themes/#theme-configuration-variables).
+You can adjust the [theme configuration variables](/customization/theming/#theme-configuration-variables).
```jsx
const theme = createMuiTheme({
diff --git a/docs/src/pages/customization/components/components-zh.md b/docs/src/pages/customization/components/components-zh.md
index f76a5980a3089b..f74e2b949980a5 100644
--- a/docs/src/pages/customization/components/components-zh.md
+++ b/docs/src/pages/customization/components/components-zh.md
@@ -24,14 +24,20 @@
### 用类覆盖样式
-当` className时`属性不够用，你需要访问更深层的元素，你可以利用`classes` 对象属性，来自定义该组件中所有由Material-UI注入的CSS。 每个组件的classes列表记录在**组件API**部分。 例如，您可以查看[ Button CSS API ](/api/button/#css) 。 或者，您可以使用[浏览器中的 devtools](#using-the-dev-tools) 。
+当` className时`属性不够用，你需要访问更深层的元素，你可以利用`classes` 对象属性，来自定义该组件中所有由Material-UI注入的CSS。
-这个例子也使用了 `withStyles()` (见上文)，但在这里， `ClassesNesting` 使用 `Button` 的 `classes` 属性来接收一个对象，该对象将 **要被覆盖的classes** (样式规则) 映射到 **对应的CSS属性名称** (值)。 组件的现有类将继续被注入，因此只需要提供你想要添加或覆盖的特定样式。
+The list of classes for each component is documented in the component API page, you should refer to the **CSS section** and **rule name column**. 例如，您可以查看[ Button CSS API ](/api/button/#css) 。 或者，您可以使用[浏览器中的 devtools](#using-the-dev-tools) 。
+
+这个例子也使用了 `withStyles()` （见上文），但在这里， `ClassesNesting` 使用 `Button` 的 `classes` 属性来接收一个对象，该对象将 **要覆盖的classes子项名** （样式规则）映射到 **对应的CSS属性名称** （值）。 组件的现有类将继续被注入，因此只需要提供你想要添加或覆盖的特定样式。
请注意，除按钮样式外，按钮标签的大小写也已更改：
{{"demo": "pages/customization/components/ClassesNesting.js"}}
+### Overriding styles with global class names
+
+[Follow this section](/styles/advanced/#with-material-ui-core).
+
### 使用开发工具
使用浏览器中的devtools可以为您节省大量时间。 在开发环境中：Material-UI的class名称[遵循一个简单的模式](/styles/advanced/#class-names)： ` Mui [组件名称] - [样式规则名称] -[UUID]` 。
@@ -46,9 +52,9 @@
Use the theme.spacing() helper to create consistent spacing between the elements of your UI.
diff --git a/docs/src/pages/customization/theming/theming-de.md b/docs/src/pages/customization/theming/theming-de.md
index b8df6d45c4efbc..f249e7b35049b8 100644
--- a/docs/src/pages/customization/theming/theming-de.md
+++ b/docs/src/pages/customization/theming/theming-de.md
@@ -19,7 +19,7 @@ Wenn Sie das Design anpassen möchten, müssen Sie die `ThemeProvider` Komponent
Das Ändern der Konfigurationsvariablen für das Theme ist der effektivste Weg, um die Material-UI an Ihre Bedürfnisse anzupassen. Die folgenden Abschnitte behandeln die wichtigsten Theme-Variablen:
- [Palette](/customization/palette/)
-- [Typografie](/customization/typography/)
+- [Typography](/customization/typography/)
- [Abstände](/customization/spacing/)
- [Haltepunkte](/customization/breakpoints/)
- [z-index](/customization/z-index/)
@@ -31,7 +31,7 @@ Sie können den [Standard-Themenbereich](/customization/default-theme/) auscheck
Wenn Sie das Material-UI-Theme mit unserer [Styling-Lösung](/styles/basics/) oder einer [beliebige andere](/guides/interoperability/#themeprovider) verwenden, kann praktisch sein, dem Theme weitere Variablen hinzuzufügen, damit Sie sie überall verwenden können. Zum Beispiel:
-{{"demo": "pages/customization/themes/CustomStyles.js"}}
+{{"demo": "pages/customization/theming/CustomStyles.js"}}
## Zugriff auf das Theme in einer Komponente
@@ -41,11 +41,11 @@ Sie können auf die Themenvariablen in Ihren React-Komponenten [zugreifen](/styl
Sie können mehrere Themenanbieter [verschachteln](/styles/advanced/#theme-nesting).
-{{"demo": "pages/customization/themes/ThemeNesting.js"}}
+{{"demo": "pages/customization/theming/ThemeNesting.js"}}
Das innere Theme ** überschreibt** das äußere Theme. Sie können das äußere Theme erweitern, indem Sie eine Funktion bereitstellen:
-{{"demo": "pages/customization/themes/ThemeNestingExtend.js"}}
+{{"demo": "pages/customization/theming/ThemeNestingExtend.js"}}
### Ein Hinweis zur Leistung
@@ -60,7 +60,7 @@ Die Auswirkungen der Verschachtelung der `ThemeProviders` Komponente auf die Per
Generieren Sie eine Themenbasis von den gegebenen Optionen.
-#### Argumente
+#### Parameter
1. `options` (*Object*): Nimmt ein unvollständiges Themeobjekt auf und fügt die fehlenden Teile hinzu.
@@ -111,4 +111,4 @@ import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
let theme = createMuiTheme();
theme = responsiveFontSizes(theme);
-```
+```
\ No newline at end of file
diff --git a/docs/src/pages/customization/theming/theming-es.md b/docs/src/pages/customization/theming/theming-es.md
index 78fdf40bf7d336..8e846741f024c1 100644
--- a/docs/src/pages/customization/theming/theming-es.md
+++ b/docs/src/pages/customization/theming/theming-es.md
@@ -19,7 +19,7 @@ If you wish to customize the theme, you need to use the `ThemeProvider` componen
Changing the theme configuration variables is the most effective way to match Material-UI to your needs. The following sections cover the most important theme variables:
- [Paleta](/customization/palette/)
-- [Tipografía](/customization/typography/)
+- [Typography](/customization/typography/)
- [Espaciado](/customization/spacing/)
- [Puntos de interrupción](/customization/breakpoints/)
- [z-index](/customization/z-index/)
@@ -31,7 +31,7 @@ You can check out the [default theme section](/customization/default-theme/) to
When using Material-UI's theme with our [styling solution](/styles/basics/) or [any others](/guides/interoperability/#themeprovider). It can be convenient to add additional variables to the theme so you can use them everywhere. For instance:
-{{"demo": "pages/customization/themes/CustomStyles.js"}}
+{{"demo": "pages/customization/theming/CustomStyles.js"}}
## Accessing the theme in a component
@@ -41,11 +41,11 @@ You [can access](/styles/advanced/#accessing-the-theme-in-a-component) the theme
[You can nest](/styles/advanced/#theme-nesting) multiple theme providers.
-{{"demo": "pages/customization/themes/ThemeNesting.js"}}
+{{"demo": "pages/customization/theming/ThemeNesting.js"}}
The inner theme will **override** the outer theme. You can extend the outer theme by providing a function:
-{{"demo": "pages/customization/themes/ThemeNestingExtend.js"}}
+{{"demo": "pages/customization/theming/ThemeNestingExtend.js"}}
### A note on performance
@@ -111,4 +111,4 @@ import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
let theme = createMuiTheme();
theme = responsiveFontSizes(theme);
-```
+```
\ No newline at end of file
diff --git a/docs/src/pages/customization/theming/theming-fr.md b/docs/src/pages/customization/theming/theming-fr.md
index abe93f90ad9941..602867b420e8de 100644
--- a/docs/src/pages/customization/theming/theming-fr.md
+++ b/docs/src/pages/customization/theming/theming-fr.md
@@ -16,7 +16,7 @@ If you wish to customize the theme, you need to use the `ThemeProvider` componen
## Theme configuration variables
-Changing the theme configuration variables is the most effective way to match Material-UI to your needs. The following sections cover the most important theme variables:
+Changer la configuration du thème est la manière la plus efficace d'accorder Material-UI à vos préférences. Les sections suivantes couvrent les principales variables des thèmes:
- [Palette](/customization/palette/)
- [Typography](/customization/typography/)
@@ -25,29 +25,29 @@ Changing the theme configuration variables is the most effective way to match Ma
- [z-index](/customization/z-index/)
- [Variables globales](/customization/globals/)
-You can check out the [default theme section](/customization/default-theme/) to view the default theme in full.
+Vous pouvez consulter la section [thème par défaut](/customization/default-theme/) pour afficher le thème par défaut dans son intégralité.
-### Custom variables
+### Variables personnalisées
-When using Material-UI's theme with our [styling solution](/styles/basics/) or [any others](/guides/interoperability/#themeprovider). It can be convenient to add additional variables to the theme so you can use them everywhere. For instance:
+Lorsque vous utilisez le thème Material-UI avec notre [solution de style](/styles/basics/) ou [n'importe quel autre](/guides/interoperability/#themeprovider). Il peut être pratique d'ajouter des variables supplémentaires au thème afin que vous puissiez les utiliser partout. Par exemple:
-{{"demo": "pages/customization/themes/CustomStyles.js"}}
+{{"demo": "pages/customization/theming/CustomStyles.js"}}
-## Accessing the theme in a component
+## Accéder au thème dans un composant
-You [can access](/styles/advanced/#accessing-the-theme-in-a-component) the theme variables inside your React components.
+Vous [pouvez accéder](/styles/advanced/#accessing-the-theme-in-a-component) aux variables de thème dans vos composants React.
-## Nesting the theme
+## Saisir le thème
-[You can nest](/styles/advanced/#theme-nesting) multiple theme providers.
+[Vous pouvez imbriquer](/styles/advanced/#theme-nesting) plusieurs fournisseurs de thème.
-{{"demo": "pages/customization/themes/ThemeNesting.js"}}
+{{"demo": "pages/customization/theming/ThemeNesting.js"}}
-The inner theme will **override** the outer theme. You can extend the outer theme by providing a function:
+Le thème intérieur **remplacera** le thème extérieur. Vous pouvez étendre le thème externe en fournissant une fonction :
-{{"demo": "pages/customization/themes/ThemeNestingExtend.js"}}
+{{"demo": "pages/customization/theming/ThemeNestingExtend.js"}}
-### A note on performance
+### Une note sur les performances
The performance implications of nesting the `ThemeProvider` component are linked to JSS's work behind the scenes. The main point to understand is that the injected CSS is cached with the following tuple `(styles, theme)`.
@@ -111,4 +111,4 @@ import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
let theme = createMuiTheme();
theme = responsiveFontSizes(theme);
-```
+```
\ No newline at end of file
diff --git a/docs/src/pages/customization/theming/theming-ja.md b/docs/src/pages/customization/theming/theming-ja.md
index cee4b399fa3598..ed6de1948f87a3 100644
--- a/docs/src/pages/customization/theming/theming-ja.md
+++ b/docs/src/pages/customization/theming/theming-ja.md
@@ -31,7 +31,7 @@ You can check out the [default theme section](/customization/default-theme/) to
When using Material-UI's theme with our [styling solution](/styles/basics/) or [any others](/guides/interoperability/#themeprovider). It can be convenient to add additional variables to the theme so you can use them everywhere. For instance:
-{{"demo": "pages/customization/themes/CustomStyles.js"}}
+{{"demo": "pages/customization/theming/CustomStyles.js"}}
## Accessing the theme in a component
@@ -41,11 +41,11 @@ You [can access](/styles/advanced/#accessing-the-theme-in-a-component) the theme
[You can nest](/styles/advanced/#theme-nesting) multiple theme providers.
-{{"demo": "pages/customization/themes/ThemeNesting.js"}}
+{{"demo": "pages/customization/theming/ThemeNesting.js"}}
The inner theme will **override** the outer theme. You can extend the outer theme by providing a function:
-{{"demo": "pages/customization/themes/ThemeNestingExtend.js"}}
+{{"demo": "pages/customization/theming/ThemeNestingExtend.js"}}
### A note on performance
@@ -111,4 +111,4 @@ import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
let theme = createMuiTheme();
theme = responsiveFontSizes(theme);
-```
+```
\ No newline at end of file
diff --git a/docs/src/pages/customization/theming/theming-pt.md b/docs/src/pages/customization/theming/theming-pt.md
index 9e14b2cb607814..135d0571e8674f 100644
--- a/docs/src/pages/customization/theming/theming-pt.md
+++ b/docs/src/pages/customization/theming/theming-pt.md
@@ -1,4 +1,4 @@
-# Theming
+# Temas
Personalize Material-UI com seu tema. Você pode mudar as cores, a tipografia e muito mais.
@@ -19,7 +19,7 @@ O `ThemeProvider` depende do recurso de contexto do React para passar o tema par
Alterar as variáveis de configuração do tema é a maneira mais eficaz de combinar o Material-UI às suas necessidades. As seções a seguir abordam as variáveis mais importantes do tema:
- [Paleta de Cores](/customization/palette/)
-- [Tipografia](/customization/typography/)
+- [Typography](/customization/typography/)
- [Espaçamento](/customization/spacing/)
- [Pontos de quebra](/customization/breakpoints/)
- [z-index](/customization/z-index/)
@@ -31,7 +31,7 @@ Você pode conferir a [seção de tema padrão](/customization/default-theme/) p
Quando usando o tema do Material-UI com nossa [solução de estilo](/styles/basics/) ou [quaisquer outras](/guides/interoperability/#themeprovider), surgem algumas necessidades de customização. Pode ser conveniente adicionar variáveis adicionais ao tema para que você possa usá-las em todos os lugares. Por exemplo:
-{{"demo": "pages/customization/themes/CustomStyles.js"}}
+{{"demo": "pages/customization/theming/CustomStyles.js"}}
## Acessando o tema em um componente
@@ -41,11 +41,11 @@ Você [pode acessar](/styles/advanced/#accessing-the-theme-in-a-component) as va
[Você pode aninhar](/styles/advanced/#theme-nesting) vários provedores de tema.
-{{"demo": "pages/customization/themes/ThemeNesting.js"}}
+{{"demo": "pages/customization/theming/ThemeNesting.js"}}
O tema interno **sobrescreverá** o tema exterior. Você pode estender o tema externo fornecendo uma função:
-{{"demo": "pages/customization/themes/ThemeNestingExtend.js"}}
+{{"demo": "pages/customization/theming/ThemeNestingExtend.js"}}
### Uma nota sobre desempenho
@@ -111,4 +111,4 @@ import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
let theme = createMuiTheme();
theme = responsiveFontSizes(theme);
-```
+```
\ No newline at end of file
diff --git a/docs/src/pages/customization/theming/theming-ru.md b/docs/src/pages/customization/theming/theming-ru.md
index 70cb76cd805099..996f9523bfd2be 100644
--- a/docs/src/pages/customization/theming/theming-ru.md
+++ b/docs/src/pages/customization/theming/theming-ru.md
@@ -19,7 +19,7 @@ If you wish to customize the theme, you need to use the `ThemeProvider` componen
Changing the theme configuration variables is the most effective way to match Material-UI to your needs. The following sections cover the most important theme variables:
- [Палитра](/customization/palette/)
-- [Оформление текста](/customization/typography/)
+- [Typography](/customization/typography/)
- [Интервал](/customization/spacing/)
- [Точки останова](/customization/breakpoints/)
- [z-index](/customization/z-index/)
@@ -31,7 +31,7 @@ You can check out the [default theme section](/customization/default-theme/) to
When using Material-UI's theme with our [styling solution](/styles/basics/) or [any others](/guides/interoperability/#themeprovider). It can be convenient to add additional variables to the theme so you can use them everywhere. For instance:
-{{"demo": "pages/customization/themes/CustomStyles.js"}}
+{{"demo": "pages/customization/theming/CustomStyles.js"}}
## Accessing the theme in a component
@@ -41,11 +41,11 @@ You [can access](/styles/advanced/#accessing-the-theme-in-a-component) the theme
[You can nest](/styles/advanced/#theme-nesting) multiple theme providers.
-{{"demo": "pages/customization/themes/ThemeNesting.js"}}
+{{"demo": "pages/customization/theming/ThemeNesting.js"}}
The inner theme will **override** the outer theme. You can extend the outer theme by providing a function:
-{{"demo": "pages/customization/themes/ThemeNestingExtend.js"}}
+{{"demo": "pages/customization/theming/ThemeNestingExtend.js"}}
### A note on performance
@@ -111,4 +111,4 @@ import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
let theme = createMuiTheme();
theme = responsiveFontSizes(theme);
-```
+```
\ No newline at end of file
diff --git a/docs/src/pages/customization/theming/theming-zh.md b/docs/src/pages/customization/theming/theming-zh.md
new file mode 100644
index 00000000000000..1111d0231cdeb2
--- /dev/null
+++ b/docs/src/pages/customization/theming/theming-zh.md
@@ -0,0 +1,114 @@
+# 主题
+
+定制自己的 Material-UI 主题， 您可以更改颜色，排版等等。
+
+主题可以指定组件的配色、平面的明暗、阴影的深浅、墨水元素适当的不透明度等。
+
+样式可让您为应用程序应用一致的音调。它可以让你 **自定义所有的设计方面** 项目，以满足您的企业或品牌的特定需求。
+
+为了提高应用程序之间的一致性，可以选择明暗样式类型。 默认情况下，组件使用浅色样式类型。
+
+## ThemeProvider
+
+如果你想要自定义样式，则需要使用 `MuiThemeProvider` 组件才能将样式注入到你的应用中。 但是，这是可选的，因为 Material-UI 组件带有默认主题。
+
+`MuiThemeProvider` 依赖于React的Context上下文将样式传递给组件， 因此您需要确保 `MuiThemeProvider` 是您想要自定义的组件的父级元素。 您可以在 [API 章节](/styles/api/#themeprovider) 中了解有关此内容的更多信息 。
+
+## 主题配置变量
+
+更改主题配置变量是将Material-UI与您的需求相匹配的最有效方法。 以下列出了一些重要的样式变量：
+
+- [Palette（调色）](/customization/palette/)
+- [Typography](/customization/typography/)
+- [Spacing（间距）](/customization/spacing/)
+- [断点](/customization/breakpoints/)
+- [z-index](/customization/z-index/)
+- [全局变量](/customization/globals/)
+
+您可以查看[默认样式部分](/customization/default-theme/)完整查看默认样式。
+
+### 自定义变量
+
+当您使用 Material-UI 的主题通过我们的[造型解决方案](/styles/basics/)或[任何其他](/guides/interoperability/#themeprovider)的时候。 可以方便地向样式添加其他变量，以便您可以在任何地方使用它们。 例如：
+
+{{"demo": "pages/customization/theming/CustomStyles.js"}}
+
+## 访问组件中的主题
+
+You [can access](/styles/advanced/#accessing-the-theme-in-a-component) the theme variables inside your React components.
+
+## 嵌套主题
+
+[您可以嵌套](/styles/advanced/#theme-nesting)多个主题提供者。
+
+{{"demo": "pages/customization/theming/ThemeNesting.js"}}
+
+内部主题将 **覆盖** 外部主题。 您可以通过提供一个函数来扩展外部主题：
+
+{{"demo": "pages/customization/theming/ThemeNestingExtend.js"}}
+
+### 关于性能
+
+The performance implications of nesting the `ThemeProvider` component are linked to JSS's work behind the scenes. The main point to understand is that the injected CSS is cached with the following tuple `(styles, theme)`.
+
+- `theme`: 每次渲染时，如果你提供了一个新的主题，一个新的CSS对象将会被生成并注入。 不管是为了更统一的UI风格还是性能，都应该尽量不要每次生成新的主题 object。
+- `styles`: 样式 object 越大，需要的运算越多。
+
+## API
+
+### `createMuiTheme(options) => theme`
+
+根据接收的选项生成样式。
+
+#### 参数
+
+1. `options` （*Object*）：采用不完整的主题对象并添加缺少的部分。
+
+#### 返回结果
+
+`theme` （*Object*）：一个完整的，随时可用的主题对象。
+
+#### 示例
+
+```js
+import { createMuiTheme } from '@material-ui/core/styles';
+import purple from '@material-ui/core/colors/purple';
+import green from '@material-ui/core/colors/green';
+
+const theme = createMuiTheme({
+ palette: {
+ primary: purple,
+ secondary: green,
+ },
+ status: {
+ danger: 'orange',
+ },
+});
+```
+
+### `responsiveFontSizes(theme, options) => theme`
+
+Generate responsive typography settings based on the options received.
+
+#### 参数
+
+1. `theme` (*Object*): The theme object to enhance.
+2. `options` (*Object* [optional]):
+
+- `breakpoints` (*Array* [optional]): Default to `['sm', 'md', 'lg']`. Array of [breakpoints](/customization/breakpoints/) (identifiers).
+- `disableAlign` (*Boolean* [optional]): Default to `false`. Whether font sizes change slightly so line heights are preserved and align to Material Design's 4px line height grid. This requires a unitless line height in the theme's styles.
+- `factor` (*Number* [optional]): Default to `2`. This value determines the strength of font size resizing. The higher the value, the less difference there is between font sizes on small screens. The lower the value, the bigger font sizes for small screens. 该值必须大于1。
+- `variants` (*Array* [optional]): Default to all. The typography variants to handle.
+
+#### 返回结果
+
+`theme` (*Object*): The new theme with a responsive typography.
+
+#### 例子
+
+```js
+import { createMuiTheme, responsiveFontSizes } from '@material-ui/core/styles';
+
+let theme = createMuiTheme();
+theme = responsiveFontSizes(theme);
+```
\ No newline at end of file
diff --git a/docs/src/pages/customization/typography/typography-de.md b/docs/src/pages/customization/typography/typography-de.md
index 76564f031a6893..1df0b23c5e233a 100644
--- a/docs/src/pages/customization/typography/typography-de.md
+++ b/docs/src/pages/customization/typography/typography-de.md
@@ -1,4 +1,4 @@
-# Typografie
+# Typography
Das Theme bietet eine Anzahl von Schriftgrößen, die gut zusammen mit dem Layoutraster funktionieren.
@@ -142,7 +142,7 @@ theme.typography.h1 = {
};
```
-Um dieses Setup zu automatisieren, können Sie die Funktion [`responsiveFontSizes()`](/customization/themes/#responsivefontsizes-theme-options-theme) Helfer verwenden, um die Schriftgrößen der Typografie im Design ansprechend zu gestalten.
+Um dieses Setup zu automatisieren, können Sie die Funktion [`responsiveFontSizes()`](/customization/theming/#responsivefontsizes-theme-options-theme) Helfer verwenden, um die Schriftgrößen der Typografie im Design ansprechend zu gestalten.
{{"demo": "pages/customization/typography/ResponsiveFontSizesChart.js", "hideHeader": true}}
diff --git a/docs/src/pages/customization/typography/typography-es.md b/docs/src/pages/customization/typography/typography-es.md
index 87d5ab22017130..5227f497e37265 100644
--- a/docs/src/pages/customization/typography/typography-es.md
+++ b/docs/src/pages/customization/typography/typography-es.md
@@ -1,4 +1,4 @@
-# Tipografía
+# Typography
The theme provides a set of type sizes that work well together, and also with the layout grid.
@@ -142,7 +142,7 @@ theme.typography.h1 = {
};
```
-To automate this setup, you can use the [`responsiveFontSizes()`](/customization/themes/#responsivefontsizes-theme-options-theme) helper to make Typography font sizes in the theme responsive.
+To automate this setup, you can use the [`responsiveFontSizes()`](/customization/theming/#responsivefontsizes-theme-options-theme) helper to make Typography font sizes in the theme responsive.
{{"demo": "pages/customization/typography/ResponsiveFontSizesChart.js", "hideHeader": true}}
diff --git a/docs/src/pages/customization/typography/typography-fr.md b/docs/src/pages/customization/typography/typography-fr.md
index 4551de7ac8b9b1..5227f497e37265 100644
--- a/docs/src/pages/customization/typography/typography-fr.md
+++ b/docs/src/pages/customization/typography/typography-fr.md
@@ -142,7 +142,7 @@ theme.typography.h1 = {
};
```
-To automate this setup, you can use the [`responsiveFontSizes()`](/customization/themes/#responsivefontsizes-theme-options-theme) helper to make Typography font sizes in the theme responsive.
+To automate this setup, you can use the [`responsiveFontSizes()`](/customization/theming/#responsivefontsizes-theme-options-theme) helper to make Typography font sizes in the theme responsive.
{{"demo": "pages/customization/typography/ResponsiveFontSizesChart.js", "hideHeader": true}}
diff --git a/docs/src/pages/customization/typography/typography-ja.md b/docs/src/pages/customization/typography/typography-ja.md
index e0b3fa029d5b19..68a7067388ded9 100644
--- a/docs/src/pages/customization/typography/typography-ja.md
+++ b/docs/src/pages/customization/typography/typography-ja.md
@@ -142,7 +142,7 @@ theme.typography.h1 = {
};
```
-To automate this setup, you can use the [`responsiveFontSizes()`](/customization/themes/#responsivefontsizes-theme-options-theme) helper to make Typography font sizes in the theme responsive.
+To automate this setup, you can use the [`responsiveFontSizes()`](/customization/theming/#responsivefontsizes-theme-options-theme) helper to make Typography font sizes in the theme responsive.
{{"demo": "pages/customization/typography/ResponsiveFontSizesChart.js", "hideHeader": true}}
diff --git a/docs/src/pages/customization/typography/typography-pt.md b/docs/src/pages/customization/typography/typography-pt.md
index 83cd70a3c4881b..e2f5ae0232c853 100644
--- a/docs/src/pages/customization/typography/typography-pt.md
+++ b/docs/src/pages/customization/typography/typography-pt.md
@@ -1,8 +1,8 @@
-# Tipografia
+# Typography
O tema fornece um conjunto de tamanhos de tipos que funcionam bem juntos e também com a grade de leiaute.
-The following example demonstrates how to change the [default values](/customization/default-theme/?expend-path=$.typography) of the typography in the theme. You can learn more about how to use the [Typography component](/components/typography/) by checking out the dedicated page.
+O exemplo a seguir demonstra como alterar o [valores padrão](/customization/default-theme/?expend-path=$.typography) da tipografia no tema. Você pode aprender mais sobre como usar o [componente de tipografia](/components/typography/), verificando a página dedicada.
{{"demo": "pages/customization/typography/TypographyTheme.js"}}
@@ -142,7 +142,7 @@ theme.typography.h1 = {
};
```
-Para automatizar estas configurações, você pode usar a função auxiliar [`responsiveFontSizes()`](/customization/themes/#responsivefontsizes-theme-options-theme), para fazer a tipografia de tamanhos da fonte no tema responsivo.
+Para automatizar estas configurações, você pode usar a função auxiliar [`responsiveFontSizes()`](/customization/theming/#responsivefontsizes-theme-options-theme), para fazer a tipografia de tamanhos da fonte no tema responsivo.
{{"demo": "pages/customization/typography/ResponsiveFontSizesChart.js", "hideHeader": true}}
diff --git a/docs/src/pages/customization/typography/typography-ru.md b/docs/src/pages/customization/typography/typography-ru.md
index 95d065c4e2fff2..49840614333a82 100644
--- a/docs/src/pages/customization/typography/typography-ru.md
+++ b/docs/src/pages/customization/typography/typography-ru.md
@@ -1,4 +1,4 @@
-# Оформление текста
+# Typography
The theme provides a set of type sizes that work well together, and also with the layout grid.
@@ -142,7 +142,7 @@ theme.typography.h1 = {
};
```
-To automate this setup, you can use the [`responsiveFontSizes()`](/customization/themes/#responsivefontsizes-theme-options-theme) helper to make Typography font sizes in the theme responsive.
+To automate this setup, you can use the [`responsiveFontSizes()`](/customization/theming/#responsivefontsizes-theme-options-theme) helper to make Typography font sizes in the theme responsive.
{{"demo": "pages/customization/typography/ResponsiveFontSizesChart.js", "hideHeader": true}}
diff --git a/docs/src/pages/customization/typography/typography-zh.md b/docs/src/pages/customization/typography/typography-zh.md
index da378b76837f28..c618044f441c71 100644
--- a/docs/src/pages/customization/typography/typography-zh.md
+++ b/docs/src/pages/customization/typography/typography-zh.md
@@ -1,4 +1,4 @@
-# 排版
+# 活版印刷
The theme provides a set of type sizes that work well together, and also with the layout grid.
@@ -142,7 +142,7 @@ theme.typography.h1 = {
};
```
-To automate this setup, you can use the [`responsiveFontSizes()`](/customization/themes/#responsivefontsizes-theme-options-theme) helper to make Typography font sizes in the theme responsive.
+To automate this setup, you can use the [`responsiveFontSizes()`](/customization/theming/#responsivefontsizes-theme-options-theme) helper to make Typography font sizes in the theme responsive.
{{"demo": "pages/customization/typography/ResponsiveFontSizesChart.js", "hideHeader": true}}
diff --git a/docs/src/pages/discover-more/changelog/changelog-ja.md b/docs/src/pages/discover-more/changelog/changelog-ja.md
index 3d0988f1b43acc..4cd3a0bb3591f9 100644
--- a/docs/src/pages/discover-more/changelog/changelog-ja.md
+++ b/docs/src/pages/discover-more/changelog/changelog-ja.md
@@ -1,4 +1,4 @@
-# Changelog
+# 変更履歴
Material-UI strictly follows Semantic Versioning 2.0.0.
diff --git a/docs/src/pages/discover-more/community/community-ja.md b/docs/src/pages/discover-more/community/community-ja.md
index 9d641440c614e2..f956c811841a2b 100644
--- a/docs/src/pages/discover-more/community/community-ja.md
+++ b/docs/src/pages/discover-more/community/community-ja.md
@@ -1,4 +1,4 @@
-# Community
+# コミュニティ
If you want to stay up to date on the development of Material-UI or to reach out to the community, you can follow those resources.
diff --git a/docs/src/pages/discover-more/community/community-ru.md b/docs/src/pages/discover-more/community/community-ru.md
index b53501af3a6065..6511707123d035 100644
--- a/docs/src/pages/discover-more/community/community-ru.md
+++ b/docs/src/pages/discover-more/community/community-ru.md
@@ -1,4 +1,4 @@
-# Community
+# Сообщество
If you want to stay up to date on the development of Material-UI or to reach out to the community, you can follow those resources.
diff --git a/docs/src/pages/discover-more/languages/languages-ja.md b/docs/src/pages/discover-more/languages/languages-ja.md
index ed437022d528bf..c2487d9846cb4c 100644
--- a/docs/src/pages/discover-more/languages/languages-ja.md
+++ b/docs/src/pages/discover-more/languages/languages-ja.md
@@ -1,4 +1,4 @@
-# Languages
+# 言語
The Material-UI documentation is available in the following languages.
diff --git a/docs/src/pages/discover-more/showcase/showcase-ja.md b/docs/src/pages/discover-more/showcase/showcase-ja.md
index 528d7c5935540f..e5ce790fbdd287 100644
--- a/docs/src/pages/discover-more/showcase/showcase-ja.md
+++ b/docs/src/pages/discover-more/showcase/showcase-ja.md
@@ -1,4 +1,4 @@
-# Showcase
+# 事例
The following is a list of some of the public apps using Material-UI.
diff --git a/docs/src/pages/discover-more/vision/vision-es.md b/docs/src/pages/discover-more/vision/vision-es.md
index b532683889b968..617700cc86caaf 100644
--- a/docs/src/pages/discover-more/vision/vision-es.md
+++ b/docs/src/pages/discover-more/vision/vision-es.md
@@ -2,7 +2,7 @@
Our vision is to provide an elegant React implementation of the Material Design guidelines that can be customized to fully match your brand.
-The Material Design guidelines are an incredible starting point, but they do not provide guidance on all aspects or needs of an application. In addition to the guidelines-specific implementation, we want Material-UI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines.
+Las pautas de Material Design son un excelente punto de partida, pero no brindan dirección sobre todos los aspectos o necesidades de una aplicación. In addition to the guidelines-specific implementation, we want Material-UI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines.
Therefore, Material-UI will be not only be an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. This generalized use doesn't imply any other design methodology. It also means we will have components or combinations that are simply not addressed in the design guidelines.
diff --git a/docs/src/pages/discover-more/vision/vision-ja.md b/docs/src/pages/discover-more/vision/vision-ja.md
index b532683889b968..dc5e1650c632bf 100644
--- a/docs/src/pages/discover-more/vision/vision-ja.md
+++ b/docs/src/pages/discover-more/vision/vision-ja.md
@@ -2,7 +2,7 @@
Our vision is to provide an elegant React implementation of the Material Design guidelines that can be customized to fully match your brand.
-The Material Design guidelines are an incredible starting point, but they do not provide guidance on all aspects or needs of an application. In addition to the guidelines-specific implementation, we want Material-UI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines.
+Material Designのガイドラインは信じられない出発点ですが、アプリケーションのすべての側面やニーズに関するガイダンスを提供するわけではありません。 In addition to the guidelines-specific implementation, we want Material-UI to become whatever is generally useful for application development, all in the spirit of the Material Design guidelines.
Therefore, Material-UI will be not only be an implementation of the Material Design guidelines, but a general use UI library of components that are needed by many. This generalized use doesn't imply any other design methodology. It also means we will have components or combinations that are simply not addressed in the design guidelines.
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-de.md b/docs/src/pages/getting-started/example-projects/example-projects-de.md
index 3513fb025c377f..501f885613a0a3 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-de.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-de.md
@@ -20,17 +20,24 @@ Der Quellcode für diese Dokumentationsseite ist auch im Repository enthalten. D
Suchen Sie nach einem fortgeschritteneren Beispielprojekt?
-If you want to start with a more complete and real world example, you could take a look at our [free themes](https://themes.material-ui.com/) or:
-
+If you want to start with a more complete and real world example, you could take a look at our [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
+
+- [React Most Wanted](https://github.com/TarikHuber/react-most-wanted), which includes:
+
+ - Erstellt mit [Create React App](https://facebook.github.io/create-react-app/)
+ - Custom Create React App script to start a new project with just a single CLI command
+ - Build for Firebase including Authentication using the official Firebase Web Auth UI
+ - Routing with React Router including error handling (404) and lazy loading
+ - All PWA features included (SW, Notifications, deffered installation prompt and more)
+ - Optimized and scalable performance (all ~100 points on Lighthouse)
- [React + Material-UI + Firebase](https://github.com/Phoqe/react-material-ui-firebase):
-
+
- Mit Create React App gebootet, funktioniert das gleiche Tool sofort
- Aufbauend auf Firebase mit Authentifizierung von Anfang an
- Robustes Routing mit React Router inklusive Fehlerbehandlung (404)
- Umfassender mobiler Support mit [react-swipeable-views](https://react-swipeable-views.com) für Tabs
-
- [Material Sense](https://github.com/alexanmtz/material-sense), welches beeinhaltet:
-
+
- Diagramme mit recharts
- React Router mit einem Navigationsbeispiel
- Ein Docker-Container mit einem Nginx-Server für den Produktionsaufbau
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-es.md b/docs/src/pages/getting-started/example-projects/example-projects-es.md
index de19fed2ccaac7..48f71f010134fd 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-es.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-es.md
@@ -20,17 +20,24 @@ El código fuente de esta documentación también está incluido en el repositor
¿Buscas un proyecto de ejemplo más avanzado?
-If you want to start with a more complete and real world example, you could take a look at our [free themes](https://themes.material-ui.com/) or:
-
+If you want to start with a more complete and real world example, you could take a look at our [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
+
+- [React Most Wanted](https://github.com/TarikHuber/react-most-wanted), which includes:
+
+ - Creado con [Create React App](https://facebook.github.io/create-react-app/)
+ - Custom Create React App script to start a new project with just a single CLI command
+ - Build for Firebase including Authentication using the official Firebase Web Auth UI
+ - Routing with React Router including error handling (404) and lazy loading
+ - All PWA features included (SW, Notifications, deffered installation prompt and more)
+ - Optimized and scalable performance (all ~100 points on Lighthouse)
- [React + Material-UI + Firebase](https://github.com/Phoqe/react-material-ui-firebase):
-
+
- Bootstrapped with Create React App, the same tooling works out of the box
- Built on top of Firebase with authentication working from the start
- Robust routing with React Router including error handling (404)
- Extensive mobile support with [react-swipeable-views](https://react-swipeable-views.com) for tabs
-
- [Material Sense](https://github.com/alexanmtz/material-sense), which includes:
-
+
- Graph using recharts
- React Router incluido con un ejemplo de navegación
- Un contenedor de docker con servidor Nginx para compilado de producción
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-fr.md b/docs/src/pages/getting-started/example-projects/example-projects-fr.md
index 17898ecdb65a2f..d2a0439938a134 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-fr.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-fr.md
@@ -20,17 +20,24 @@ Le code source de ce site de documentation est également disponible sur GitHub.
Vous recherchez un exemple de projet plus avancé ?
-If you want to start with a more complete and real world example, you could take a look at our [free themes](https://themes.material-ui.com/) or:
-
+If you want to start with a more complete and real world example, you could take a look at our [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
+
+- [React Most Wanted](https://github.com/TarikHuber/react-most-wanted), which includes:
+
+ - Created with [Create React App](https://facebook.github.io/create-react-app/)
+ - Custom Create React App script to start a new project with just a single CLI command
+ - Build for Firebase including Authentication using the official Firebase Web Auth UI
+ - Routing with React Router including error handling (404) and lazy loading
+ - All PWA features included (SW, Notifications, deffered installation prompt and more)
+ - Optimized and scalable performance (all ~100 points on Lighthouse)
- [React + Material-UI + Firebase](https://github.com/Phoqe/react-material-ui-firebase):
-
+
- Bootstrapped with Create React App, the same tooling works out of the box
- Built on top of Firebase with authentication working from the start
- Robust routing with React Router including error handling (404)
- Extensive mobile support with [react-swipeable-views](https://react-swipeable-views.com) for tabs
-
- [Material Sense](https://github.com/alexanmtz/material-sense), which includes:
-
+
- Graph using recharts
- React Router included with a navigation example
- A docker container with an Nginx server for production build
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-ja.md b/docs/src/pages/getting-started/example-projects/example-projects-ja.md
index 87206e922efaa2..6b96f9ec4cb1c4 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-ja.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-ja.md
@@ -20,17 +20,24 @@ Create React AppはReactを学ぶのに良いプロジェクトです。 どの
更に高度なサンプルプロジェクトをお探しですか？
-もしあなたがより完璧な、実際に使う例から始めたいなら、[free themes](https://themes.material-ui.com/)や、以下を参考にしてください。
-
+If you want to start with a more complete and real world example, you could take a look at our [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
+
+- [React Most Wanted](https://github.com/TarikHuber/react-most-wanted), which includes:
+
+ - [Create React App](https://facebook.github.io/create-react-app/)による生成
+ - Custom Create React App script to start a new project with just a single CLI command
+ - Build for Firebase including Authentication using the official Firebase Web Auth UI
+ - Routing with React Router including error handling (404) and lazy loading
+ - All PWA features included (SW, Notifications, deffered installation prompt and more)
+ - Optimized and scalable performance (all ~100 points on Lighthouse)
- [React + Material-UI + Firebase](https://github.com/Phoqe/react-material-ui-firebase):
-
+
- Bootstrapped with Create React App, the same tooling works out of the box
- 最初から認証機能の付いたFirebase上に構築されます
- Robust routing with React Router including error handling (404)
- Extensive mobile support with [react-swipeable-views](https://react-swipeable-views.com) for tabs
-
- [Material Sense](https://github.com/alexanmtz/material-sense), which includes:
-
+
- rechartsを用いたグラフ
- ナビゲーションのサンプルに含まれるReact Router
- プロダクションビルド用のNginxサーバ含むdockerコンテナ
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-pt.md b/docs/src/pages/getting-started/example-projects/example-projects-pt.md
index 79c3b5d7e6905c..29656b6312278f 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-pt.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-pt.md
@@ -20,17 +20,24 @@ O código-fonte deste site de documentação também está incluído no reposit
Procurando por um projeto de exemplo mais avançado?
-Se você quer começar com um exemplo mais completo e do mundo real, você pode dar uma olhada nos nossos [temas gratuitos](https://themes.material-ui.com/) ou:
-
+If you want to start with a more complete and real world example, you could take a look at our [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
+
+- [React Most Wanted](https://github.com/TarikHuber/react-most-wanted), which includes:
+
+ - Criado com o [Create React App](https://facebook.github.io/create-react-app/)
+ - Custom Create React App script to start a new project with just a single CLI command
+ - Build for Firebase including Authentication using the official Firebase Web Auth UI
+ - Routing with React Router including error handling (404) and lazy loading
+ - All PWA features included (SW, Notifications, deffered installation prompt and more)
+ - Optimized and scalable performance (all ~100 points on Lighthouse)
- [React + Material-UI + Firebase](https://github.com/Phoqe/react-material-ui-firebase):
-
+
- Bootstrapped com Create React App, porém, também funcionará em seus boilerplates
- Criado sobre o Firebase com autenticação funcionando desde o início
- Encaminhamento robusto com o React Router, incluindo tratamento de erros (404)
- Suporte mobile extensível com [react-swipeable-views](https://react-swipeable-views.com) para as guias
-
- [Material Sense](https://github.com/alexanmtz/material-sense), que inclui:
-
+
- Gráfico usando recharts
- React Router incluído com um exemplo de navegação
- Um contêiner docker com um servidor Nginx para compilação de produção
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-ru.md b/docs/src/pages/getting-started/example-projects/example-projects-ru.md
index 68e69acd84fd2b..7ad0541b9083f0 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-ru.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-ru.md
@@ -20,17 +20,24 @@ Create React App - отличный проект для изучения React.
Ищете более продвинутый пример проекта?
-If you want to start with a more complete and real world example, you could take a look at our [free themes](https://themes.material-ui.com/) or:
-
+If you want to start with a more complete and real world example, you could take a look at our [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
+
+- [React Most Wanted](https://github.com/TarikHuber/react-most-wanted), which includes:
+
+ - Created with [Create React App](https://facebook.github.io/create-react-app/)
+ - Custom Create React App script to start a new project with just a single CLI command
+ - Build for Firebase including Authentication using the official Firebase Web Auth UI
+ - Routing with React Router including error handling (404) and lazy loading
+ - All PWA features included (SW, Notifications, deffered installation prompt and more)
+ - Optimized and scalable performance (all ~100 points on Lighthouse)
- [React + Material-UI + Firebase](https://github.com/Phoqe/react-material-ui-firebase):
-
+
- Bootstrapped with Create React App, the same tooling works out of the box
- Built on top of Firebase with authentication working from the start
- Robust routing with React Router including error handling (404)
- Extensive mobile support with [react-swipeable-views](https://react-swipeable-views.com) for tabs
-
- [Material Sense](https://github.com/alexanmtz/material-sense), which includes:
-
+
- Graph using recharts
- React Router включен с примером навигации
- A docker container with an Nginx server for production build
diff --git a/docs/src/pages/getting-started/example-projects/example-projects-zh.md b/docs/src/pages/getting-started/example-projects/example-projects-zh.md
index 75f27536704752..a8e59848497770 100644
--- a/docs/src/pages/getting-started/example-projects/example-projects-zh.md
+++ b/docs/src/pages/getting-started/example-projects/example-projects-zh.md
@@ -20,17 +20,24 @@ Create React App 是一个很棒的学习 React 的项目。 请看一下这些[
你在寻找更高级的示范例项目吗？
-如果你想体验一下更加完整的真实案例，可以尝试一下我们的[免费主题](https://themes.material-ui.com/)，或者以下几个例子：
-
+If you want to start with a more complete and real world example, you could take a look at our [free templates](/getting-started/templates/) or [premium themes & templates](https://themes.material-ui.com/) or:
+
+- [React Most Wanted](https://github.com/TarikHuber/react-most-wanted), which includes:
+
+ - 使用 [Create React App](https://facebook.github.io/create-react-app/) 创建
+ - Custom Create React App script to start a new project with just a single CLI command
+ - Build for Firebase including Authentication using the official Firebase Web Auth UI
+ - Routing with React Router including error handling (404) and lazy loading
+ - All PWA features included (SW, Notifications, deffered installation prompt and more)
+ - Optimized and scalable performance (all ~100 points on Lighthouse)
- [React + Material-UI + Firebase](https://github.com/Phoqe/react-material-ui-firebase)
-
+
- 使用Create React App创建，开箱即用
- 以Firebase为基准构建，内置身份验证模块
- Robust routing with React Router including error handling (404)
- Extensive mobile support with [react-swipeable-views](https://react-swipeable-views.com) for tabs
-
- [Material Sense](https://github.com/alexanmtz/material-sense), which includes:
-
+
- 使用 recharts 的图表
- 在导航示例中涵盖了 React Router
- 一个具有用于生产环境创造的 Nginx 服务器的 Docker container(Docker 容器)。
diff --git a/docs/src/pages/getting-started/faq/faq-de.md b/docs/src/pages/getting-started/faq/faq-de.md
index 56d426fd556c19..f59ee13bfd4e1d 100644
--- a/docs/src/pages/getting-started/faq/faq-de.md
+++ b/docs/src/pages/getting-started/faq/faq-de.md
@@ -33,10 +33,10 @@ import { createMuiTheme } from '@material-ui/core';
const theme = createMuiTheme({
props: {
- // Name of the component ⚛️
+ // Name der Komponente ⚛️
MuiButtonBase: {
- // The properties to apply
- disableRipple: true, // No more ripple, on the whole application
+ // Die Eigenschaften, die angewandt werden soll
+ disableRipple: true, // Keine Welleneffekte für die ganze App 💣!
},
},
});
@@ -93,12 +93,7 @@ const theme = createMuiTheme({
## Muss ich JSS verwenden, um meine App zu stylen?
-Es wird empfohlen:
-
-- Es wird eingebaut geliefert, so dass keine zusätzlichen Paketgrößen anfallen.
-- Es ist schnell & speichereffizient.
-- Es verfügt über eine saubere, konsistente API.
-- Es unterstützt eine Reihe von erweiterten Funktionen, entweder nativ oder durch Plugins.
+No, it's not required. But this dependenency comes built in, so carries no additional bundle size overhead.
Vielleicht fügen Sie jedoch einer App einige Material-UI-Komponenten hinzu, die bereits eine andere Styling-Lösung verwendet, oder Sie sind bereits mit einer anderen API vertraut und wollen keine neue lernen? In diesem Fall gehen Sie zum [Zusammenführen von Style Libraries](/guides/interoperability/) Abschnitt in dem wir zeigen, wie einfach es ist, Material-UI-Komponenten mit alternativen Stilbibliotheken umzustrukturieren.
@@ -294,7 +289,7 @@ function handleRender(req, res) {
## Warum unterscheiden sich die Farben, die ich sehe, von denen, die ich hier sehe?
-Die Dokumentationssite verwendet ein benutzerdefiniertes Theme. Daher unterscheidet sich die Farbpalette vom Standarddesign der Material-UI. Siehe [diese Seite](/customization/themes/), um Informationen zum Anpassen von Motiven zu erhalten.
+Die Dokumentationssite verwendet ein benutzerdefiniertes Theme. Daher unterscheidet sich die Farbpalette vom Standarddesign der Material-UI. Siehe [diese Seite](/customization/theming/), um Informationen zum Anpassen von Motiven zu erhalten.
## Material-UI ist großartig. Wie kann ich das Projekt unterstützen?
diff --git a/docs/src/pages/getting-started/faq/faq-es.md b/docs/src/pages/getting-started/faq/faq-es.md
index ab6d16dbb2a6b8..7f8162677f289a 100644
--- a/docs/src/pages/getting-started/faq/faq-es.md
+++ b/docs/src/pages/getting-started/faq/faq-es.md
@@ -36,7 +36,7 @@ const theme = createMuiTheme({
// Name of the component ⚛️
MuiButtonBase: {
// The properties to apply
- disableRipple: true, // No more ripple, on the whole application
+ disableRipple: true, // No more ripple, on the whole application 💣!
},
},
});
@@ -93,12 +93,7 @@ const theme = createMuiTheme({
## Do I have to use JSS to style my app?
-It's recommended:
-
-- It comes built in, so carries no additional bundle size overhead.
-- It's fast & memory efficient.
-- It has a clean, consistent API.
-- It supports a number of advanced features, either natively, or through plugins.
+No, it's not required. But this dependenency comes built in, so carries no additional bundle size overhead.
However perhaps you're adding some Material-UI components to an app that already uses another styling solution, or are already familiar with a different API, and don't want to learn a new one? In that case, head over to the [Style Library Interoperability](/guides/interoperability/) section, where we show how simple it is to restyle Material-UI components with alternative style libraries.
@@ -294,7 +289,7 @@ function handleRender(req, res) {
## Why are the colors I am seeing different from what I see here?
-The documentation site is using a custom theme. Hence, the color palette is different from the default theme that Material-UI ships. Please refer to [this page](/customization/themes/) to learn about theme customization.
+The documentation site is using a custom theme. Hence, the color palette is different from the default theme that Material-UI ships. Please refer to [this page](/customization/theming/) to learn about theme customization.
## Material-UI is awesome. How can I support the project?
diff --git a/docs/src/pages/getting-started/faq/faq-fr.md b/docs/src/pages/getting-started/faq/faq-fr.md
index 5c6b9dd91f82ac..bec0d1d5aeec72 100644
--- a/docs/src/pages/getting-started/faq/faq-fr.md
+++ b/docs/src/pages/getting-started/faq/faq-fr.md
@@ -36,7 +36,7 @@ const theme = createMuiTheme({
// Name of the component ⚛️
MuiButtonBase: {
// The properties to apply
- disableRipple: true, // No more ripple, on the whole application
+ disableRipple: true, // No more ripple, on the whole application 💣!
},
},
});
@@ -93,12 +93,7 @@ const theme = createMuiTheme({
## Do I have to use JSS to style my app?
-It's recommended:
-
-- It comes built in, so carries no additional bundle size overhead.
-- It's fast & memory efficient.
-- It has a clean, consistent API.
-- It supports a number of advanced features, either natively, or through plugins.
+No, it's not required. But this dependenency comes built in, so carries no additional bundle size overhead.
However perhaps you're adding some Material-UI components to an app that already uses another styling solution, or are already familiar with a different API, and don't want to learn a new one? In that case, head over to the [Style Library Interoperability](/guides/interoperability/) section, where we show how simple it is to restyle Material-UI components with alternative style libraries.
@@ -253,7 +248,7 @@ There is a class name mismatch between the client and the server. It might work
#### Action to Take
-The class names value relies on the concept of [class name generator](/styles/advanced/#class-names). The whole page needs to be rendered with **a single generator**. This generator needs to behave identically on the server and on the client. For instance:
+The class names value relies on the concept of [class name generator](/styles/advanced/#class-names). The whole page needs to be rendered with **a single generator**. This generator needs to behave identically on the server and on the client. Par exemple:
- You need to provide a new class name generator for each request. But you shouldn't share a `createGenerateClassName()` between different requests:
@@ -294,7 +289,7 @@ function handleRender(req, res) {
## Why are the colors I am seeing different from what I see here?
-The documentation site is using a custom theme. Hence, the color palette is different from the default theme that Material-UI ships. Please refer to [this page](/customization/themes/) to learn about theme customization.
+The documentation site is using a custom theme. Hence, the color palette is different from the default theme that Material-UI ships. Please refer to [this page](/customization/theming/) to learn about theme customization.
## Material-UI is awesome. How can I support the project?
diff --git a/docs/src/pages/getting-started/faq/faq-ja.md b/docs/src/pages/getting-started/faq/faq-ja.md
index 13df99dd10f5b4..8f55a9e300eb97 100644
--- a/docs/src/pages/getting-started/faq/faq-ja.md
+++ b/docs/src/pages/getting-started/faq/faq-ja.md
@@ -36,7 +36,7 @@ const theme = createMuiTheme({
// Name of the component ⚛️
MuiButtonBase: {
// The properties to apply
- disableRipple: true, // No more ripple, on the whole application
+ disableRipple: true, // No more ripple, on the whole application 💣!
},
},
});
@@ -93,12 +93,7 @@ const theme = createMuiTheme({
## アプリのスタイルを設定するにはJSSを使用する必要がありますか？
-It's recommended:
-
-- ビルトインのため、追加のbundleサイズのオーバーヘッドはありません
-- 速い & メモリ効率が良い
-- 明瞭で一貫性のあるAPI
-- ネイティブでもプラグインでも、多くの高度な機能をサポートします。
+No, it's not required. But this dependenency comes built in, so carries no additional bundle size overhead.
しかし、おそらくすでに別のスタイルライブラリを使用してアプリケーションにいくつかのMaterial-UIコンポーネントを追加している、 またはすでに別のAPIを使用している場合には、新しいものを学びたくはないでしょう？ その場合は、[スタイルライブラリの相互運用](/guides/interoperability/)セクションで、Material-UIコンポーネントを別のスタイルのライブラリでスタイル変更することがいかに簡単であるかを示します。
@@ -294,7 +289,7 @@ function handleRender(req, res) {
## 私が見ている色とこのサイトで見ている色が違うのはなぜですか？
-ドキュメントサイトはカスタムテーマを使用しています。 したがって、カラーパレットがあるMaterial-UIが提供しているデフォルトのテーマは異なります。 テーマのカスタマイズについて学ぶには、この[ページ](/customization/themes/)を参照してください。
+ドキュメントサイトはカスタムテーマを使用しています。 したがって、カラーパレットがあるMaterial-UIが提供しているデフォルトのテーマは異なります。 テーマのカスタマイズについて学ぶには、この[ページ](/customization/theming/)を参照してください。
## Material-UIは最高です。 プロジェクトを支援するにはどのようにできますか？
diff --git a/docs/src/pages/getting-started/faq/faq-pt.md b/docs/src/pages/getting-started/faq/faq-pt.md
index d0fb960b980a0d..c5939a352ea784 100644
--- a/docs/src/pages/getting-started/faq/faq-pt.md
+++ b/docs/src/pages/getting-started/faq/faq-pt.md
@@ -36,7 +36,7 @@ const theme = createMuiTheme({
// Nome do componente ⚛️
MuiButtonBase: {
// As propriedades para aplicar
- disableRipple: true, // Sem efeito cascata, em toda aplicação
+ disableRipple: true, // Sem efeito cascata, em toda aplicação 💣!
},
},
});
@@ -93,12 +93,7 @@ const theme = createMuiTheme({
## Preciso usar o JSS para estilizar minha aplicação?
-É recomendado:
-
-- Ele vem embutido, portanto, não causa sobrecarga adicional no tamanho do pacote.
-- É rápido & tem um controle de memória eficiente.
-- Possui uma API limpa e consistente.
-- Ele suporta vários recursos avançados, seja nativamente ou por meio de plug-ins.
+Não, não é obrigatório. Mas essa dependência vem embutida, portanto, não sobrecarrega o tamanho do pacote.
No entanto, talvez você esteja adicionando os componentes Material-UI para uma aplicação que já usa outra solução de estilos, ou já esta familiarizado com uma API diferente, e não quer aprender uma nova? Nesse caso, dirija-se à seção de [interoperabilidade da biblioteca de estilos](/guides/interoperability/), onde mostramos como é simples reestilizar os componentes do Material-UI com bibliotecas de estilos alternativas.
@@ -294,7 +289,7 @@ function handleRender(req, res) {
## Por que as cores que estou vendo são diferentes do que vejo aqui?
-O site de documentação está usando um tema customizado. Assim, a paleta de cores é diferente do tema padrão que é fornecido pelo Material-UI. Por favor, consulte [esta página](/customization/themes/) para aprender sobre customização de temas.
+O site de documentação está usando um tema customizado. Assim, a paleta de cores é diferente do tema padrão que é fornecido pelo Material-UI. Por favor, consulte [esta página](/customization/theming/) para aprender sobre customização de temas.
## Material-UI é incrível. Como posso apoiar o projeto?
diff --git a/docs/src/pages/getting-started/faq/faq-ru.md b/docs/src/pages/getting-started/faq/faq-ru.md
index 6f560807e91ffb..bf46472e6082d3 100644
--- a/docs/src/pages/getting-started/faq/faq-ru.md
+++ b/docs/src/pages/getting-started/faq/faq-ru.md
@@ -36,7 +36,7 @@ const theme = createMuiTheme({
// Name of the component ⚛️
MuiButtonBase: {
// The properties to apply
- disableRipple: true, // No more ripple, on the whole application
+ disableRipple: true, // No more ripple, on the whole application 💣!
},
},
});
@@ -93,12 +93,7 @@ const theme = createMuiTheme({
## Должен ли я использовать JSS для стилизации своего приложения?
-It's recommended:
-
-- It comes built in, so carries no additional bundle size overhead.
-- It's fast & memory efficient.
-- It has a clean, consistent API.
-- It supports a number of advanced features, either natively, or through plugins.
+No, it's not required. But this dependenency comes built in, so carries no additional bundle size overhead.
However perhaps you're adding some Material-UI components to an app that already uses another styling solution, or are already familiar with a different API, and don't want to learn a new one? In that case, head over to the [Style Library Interoperability](/guides/interoperability/) section, where we show how simple it is to restyle Material-UI components with alternative style libraries.
@@ -294,7 +289,7 @@ function handleRender(req, res) {
## Why are the colors I am seeing different from what I see here?
-The documentation site is using a custom theme. Hence, the color palette is different from the default theme that Material-UI ships. Please refer to [this page](/customization/themes/) to learn about theme customization.
+The documentation site is using a custom theme. Hence, the color palette is different from the default theme that Material-UI ships. Please refer to [this page](/customization/theming/) to learn about theme customization.
## Material-UI is awesome. How can I support the project?
diff --git a/docs/src/pages/getting-started/faq/faq-zh.md b/docs/src/pages/getting-started/faq/faq-zh.md
index 65f4adcadd52b6..20070001bd3d84 100644
--- a/docs/src/pages/getting-started/faq/faq-zh.md
+++ b/docs/src/pages/getting-started/faq/faq-zh.md
@@ -36,7 +36,7 @@ const theme = createMuiTheme({
// Name of the component ⚛️
MuiButtonBase: {
// The properties to apply
- disableRipple: true, // No more ripple, on the whole application
+ disableRipple: true, // No more ripple, on the whole application 💣!
},
},
});
@@ -93,12 +93,7 @@ const theme = createMuiTheme({
## 是否必须使用 JSS 给我的 app 添加样式？
-It's recommended:
-
-- JSS 是已经内置的插件，所以它不会产生额外的应用包体尺寸。
-- 它速度很快 & 内存占用率更低。
-- 它的 API干净并且前后一致。
-- 它支持大量的进阶功能，可以通过自身和 插件实现。
+No, it's not required. But this dependenency comes built in, so carries no additional bundle size overhead.
然而，您可能已经在你的应用程序上添加了一些使用其他样式的Material-UI组件，或者已经熟悉了一个完全不同的API而不想学习新的？ 在这种情况下，请转到[Style Library Interoperability（样式库互用）](/guides/interoperability/) 部分，在哪里你可以找到我们提供的用其他样式库来替换 Material-UI 组件样式的简单方法。
@@ -294,7 +289,7 @@ function handleRender(req, res) {
## 为什么我的应用程序看到的颜色和文档里的颜色大相径庭？
-文档网站使用了一个自定义的主题。 因此，调色板和 Material-UI 传播的默认的主题是截然不同的。 请参考[这页](/customization/themes/) 来了解自定义主题。
+文档网站使用了一个自定义的主题。 因此，调色板和 Material-UI 传播的默认的主题是截然不同的。 请参考[这页](/customization/theming/) 来了解自定义主题。
## Material-UI 很棒。 我该如何支持该项目？
diff --git a/docs/src/pages/getting-started/installation/installation-de.md b/docs/src/pages/getting-started/installation/installation-de.md
index e721e7137cf9ab..7e3a318712110d 100644
--- a/docs/src/pages/getting-started/installation/installation-de.md
+++ b/docs/src/pages/getting-started/installation/installation-de.md
@@ -23,7 +23,7 @@ Beachten Sie, dass [react](https://www.npmjs.com/package/react) >= 16.8.0 und [r
Material-UI wurde mit Blick auf die [Roboto](https://fonts.google.com/specimen/Roboto)-Schrift designed. Bitte folgen Sie daher [diesen Anweisungen](/components/typography/#general). Zum Beispiel über Google Web Fonts:
```html
-A selection of basic react templates to help you get started building your app. Our collection contains react dashboard, admin, and more.
+
+The templates can be combined with one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples) to form a complete starter.
+
+Abschnitte jedes Layouts sind entweder durch Kommentare oder die Verwendung separater Dateien eindeutig definiert. Dadurch wird das Extrahieren von Teilen einer Seite (z. B. "Heldeneinheit" oder Fußzeilen) für die Wiederverwendung in anderen Seiten vereinfacht. Für mehrteilige Beispiele, beschreibt eine Tabelle in der README im verknüpften Quellcode der Zweck jeder Datei.
+
+{{"demo": "pages/getting-started/templates/Templates.js", "hideHeader": true}}
+
+Wenn Sie während Sie die Beispiele verwenden Änderungen oder Verbesserungen vornehmen, die die Entwickler Erfahrung verbessern könnte, oder Sie mögen ein weiteres Beispiel dazu beitragen, denken Sie doch über einen [ Pull-Request auf GitHub](https://github.com/mui-org/material-ui/pulls) nach.
+
+So far we have demos for dashboard, sign in page, sign up page, blog page, checkout flow, album page, pricing page, and sticky footer page.
+
+## Premium-Themes
+
+Looking for something more? You can find complete templates & themes in our premium themes section .
+
+Una selección de plantillas de reacción básicas para ayudarlo a comenzar a crear su aplicación. Nuestra colección contiene panel de control en React, administración y más.
+
+Las plantillas pueden combinarse con una de las [aplicaciones de ejemplo](https://github.com/mui-org/material-ui/tree/master/examples) para formar un proyecto de inicio completo.
+
+Las secciones de cada diseño están claramente definidas, ya sea por comentarios o por el uso de archivos separados, simplificando la extracción de partes de una página (como una "unidad de héroe" o un pie de página, por ejemplo) para reutilizar en otras páginas. Para ver ejemplos multi-partes, una tabla en el README en la ubicación del código fuente describe el propósito de cada archivo.
+
+{{"demo": "pages/getting-started/templates/Templates.js", "hideHeader": true}}
+
+Si al usar estos ejemplos realizas cambios o mejoras que podrían mejorar la experiencia del desarrollador, o deseas contribuir con un ejemplo adicional, considera crear una pull request [en GitHub](https://github.com/mui-org/material-ui/pulls).
+
+Hasta ahora tenemos demostraciones para el panel de control, página de inicio de sesión, página de registro, página de blog, flujo de pago, página de álbum, página de precios y la el pie de página adhesivo.
+
+## Temas Premium
+
+¿Buscas más? Puedes encontrar plantillas y temas completos en nuestra sección de temas premium .
+
+A selection of basic react templates to help you get started building your app. Our collection contains react dashboard, admin, and more.
+
+The templates can be combined with one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples) to form a complete starter.
+
+Les sections de chaque mise en page sont clairement définies, soit par des commentaires, soit par l’utilisation de fichiers séparés ce qui facilite l’extraction de parties d’une page (telle qu'une "unité héros" ou un pied de page, par exemple) pour une utilisation ultérieure. Pour les exemples multi-parties, une table dans le README à l'emplacement du code source lié décrit le but de chaque fichier.
+
+{{"demo": "pages/getting-started/templates/Templates.js", "hideHeader": true}}
+
+If while using these examples you make changes or enhancements that could improve the developer experience, or you would like to contribute an additional example, please consider creating a [pull request on GitHub](https://github.com/mui-org/material-ui/pulls).
+
+So far we have demos for dashboard, sign in page, sign up page, blog page, checkout flow, album page, pricing page, and sticky footer page.
+
+## Thèmes premium
+
+Looking for something more? You can find complete templates & themes in our premium themes section .
+
+A selection of basic react templates to help you get started building your app. Our collection contains react dashboard, admin, and more.
+
+The templates can be combined with one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples) to form a complete starter.
+
+Sections of each layout are clearly defined either by comments or use of separate files, making it simple to extract parts of a page (such as a "hero unit", or footer, for example) for reuse in other pages. For multi-part examples, a table in the README at the linked source code location describes the purpose of each file.
+
+{{"demo": "pages/getting-started/templates/Templates.js", "hideHeader": true}}
+
+If while using these examples you make changes or enhancements that could improve the developer experience, or you would like to contribute an additional example, please consider creating a [pull request on GitHub](https://github.com/mui-org/material-ui/pulls).
+
+So far we have demos for dashboard, sign in page, sign up page, blog page, checkout flow, album page, pricing page, and sticky footer page.
+
+## プレミアムテーマ
+
+Looking for something more? You can find complete templates & themes in our premium themes section .
+
+Uma seleção básica de modelos react para ajudar a você começar a criar o seu aplicativo. Nossa coleção contém painel de controle, administrativo e muito mais.
+
+Esses modelos podem ser combinados com uma das [aplicações de exemplo](https://github.com/mui-org/material-ui/tree/master/examples) para gerar um projeto inicial completo.
+
+Seções de cada leiaute são claramente definidas por comentários ou uso de arquivos separados, tornando simples extrair partes de uma página (como uma "hero unit" ou rodapé, por exemplo) para reutilização em outras páginas. Para exemplos de várias partes, uma tabela no README no local do código-fonte vinculado descreve a finalidade de cada arquivo.
+
+{{"demo": "pages/getting-started/templates/Templates.js", "hideHeader": true}}
+
+Se, ao usar estes exemplos você faz mudanças ou melhorias que poderiam melhorar a experiência do desenvolvedor, ou você gostaria de contribuir com um exemplo adicional, por favor considere a criação de um [pull request no GitHub](https://github.com/mui-org/material-ui/pulls).
+
+Até agora, temos demonstrações para um painel, página de login, página de inscrição, página de blog, fluxo de check-out, página de álbum, página de preços e uma página de rodapé.
+
+## Temas Premium
+
+Procurando por algo mais? Você pode encontrar modelos completos & temas em nossa seção de temas premium .
+
+A selection of basic react templates to help you get started building your app. Our collection contains react dashboard, admin, and more.
+
+The templates can be combined with one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples) to form a complete starter.
+
+Разделы каждого макета четко определяются либо комментариями, либо использованием отдельных файлов, упрощая извлечение частей страницы (например, «героя» или нижнего колонтитула) для повторного использования на других страницах. For multi-part examples, a table in the README at the linked source code location describes the purpose of each file.
+
+{{"demo": "pages/getting-started/templates/Templates.js", "hideHeader": true}}
+
+If while using these examples you make changes or enhancements that could improve the developer experience, or you would like to contribute an additional example, please consider creating a [pull request on GitHub](https://github.com/mui-org/material-ui/pulls).
+
+So far we have demos for dashboard, sign in page, sign up page, blog page, checkout flow, album page, pricing page, and sticky footer page.
+
+## Премиум темы
+
+Looking for something more? You can find complete templates & themes in our premium themes section .
+
+A selection of basic react templates to help you get started building your app. Our collection contains react dashboard, admin, and more.
+
+The templates can be combined with one of the [example applications](https://github.com/mui-org/material-ui/tree/master/examples) to form a complete starter.
+
+Sections of each layout are clearly defined either by comments or use of separate files, making it simple to extract parts of a page (such as a "hero unit", or footer, for example) for reuse in other pages. For multi-part examples, a table in the README at the linked source code location describes the purpose of each file.
+
+{{"demo": "pages/getting-started/templates/Templates.js", "hideHeader": true}}
+
+If while using these examples you make changes or enhancements that could improve the developer experience, or you would like to contribute an additional example, please consider creating a [pull request on GitHub](https://github.com/mui-org/material-ui/pulls).
+
+So far we have demos for dashboard, sign in page, sign up page, blog page, checkout flow, album page, pricing page, and sticky footer page.
+
+## 高级版主题
+
+Looking for something more? You can find complete templates & themes in our premium themes section .
+
+
-
+
\ No newline at end of file
diff --git a/docs/src/pages/getting-started/usage/usage-zh.md b/docs/src/pages/getting-started/usage/usage-zh.md
index bae0a5da181268..cd9d05d6922274 100644
--- a/docs/src/pages/getting-started/usage/usage-zh.md
+++ b/docs/src/pages/getting-started/usage/usage-zh.md
@@ -58,5 +58,5 @@ Material-UI 提供了可选的 [CssBaseline](/components/css-baseline/) 组件
现在您已经了解了基本设置，现在是时候了解更多关于：
- 如何提供 [Material Design字体和排版](/components/typography/)。
-- 如何利用 [主题解决方案](/customization/themes/)。
+- 如何利用 [主题解决方案](/customization/theming/)。
- 如何 [覆盖](/customization/components/) 组件的呈现和观感。
\ No newline at end of file
diff --git a/docs/src/pages/guides/api/api-de.md b/docs/src/pages/guides/api/api-de.md
index 31f1ff14d0db6d..6bac3f88d74bcc 100644
--- a/docs/src/pages/guides/api/api-de.md
+++ b/docs/src/pages/guides/api/api-de.md
@@ -101,13 +101,13 @@ Es gibt zwei Möglichkeiten, die API für die Variationen einer Komponente zu en
```tsx
type Props = {
- variant: 'text' | 'contained' | 'fab';
+ variant: 'text' | 'contained' | 'fab';
}
```
Diese API ist ausführlicher: ``, ``, ``.
- Es verhindert jedoch, dass eine ungültige Kombination verwendet wird, begrenzt die Anzahl der offengelegten Eigenschaften, und kann neue Werte in Zukunft leicht unterstützen.
+ However it prevents an invalid combination from being used, bounds the number of properties exposed, and can easily support new values in the future.
Die Komponenten der Material-UI verwenden eine Kombination der beiden Ansätze gemäß den folgenden Regeln:
diff --git a/docs/src/pages/guides/api/api-es.md b/docs/src/pages/guides/api/api-es.md
index 4b35f49234d04f..8b6868ce12db55 100644
--- a/docs/src/pages/guides/api/api-es.md
+++ b/docs/src/pages/guides/api/api-es.md
@@ -101,7 +101,7 @@ There are two options to design the API for the variations of a component: with
```tsx
type Props = {
- variant: 'text' | 'contained' | 'fab';
+ variant: 'text' | 'contained' | 'fab';
}
```
diff --git a/docs/src/pages/guides/api/api-fr.md b/docs/src/pages/guides/api/api-fr.md
index d7eedd8c0073ed..b71ccad99b4b21 100644
--- a/docs/src/pages/guides/api/api-fr.md
+++ b/docs/src/pages/guides/api/api-fr.md
@@ -101,7 +101,7 @@ There are two options to design the API for the variations of a component: with
```tsx
type Props = {
- variant: 'text' | 'contained' | 'fab';
+ variant: 'text' | 'contained' | 'fab';
}
```
diff --git a/docs/src/pages/guides/api/api-ja.md b/docs/src/pages/guides/api/api-ja.md
index 5bffcdc27ae819..0ddafbd43a069c 100644
--- a/docs/src/pages/guides/api/api-ja.md
+++ b/docs/src/pages/guides/api/api-ja.md
@@ -1,4 +1,4 @@
-# API Design Approach
+# APIの設計アプローチ
Nós aprendemos bastante como o Material-UI é usado e o refatoramento da v1 permitiu-nos repensar completamente o componente de API.
@@ -8,7 +8,7 @@
As Sebastian Markbage [pointed out](https://2014.jsconf.eu/speakers/sebastian-markbage-minimal-api-surface-area-learning-patterns-instead-of-frameworks.html), no abstraction is superior to wrong abstractions. We are providing low-level components to maximize composition capabilities.
-## Composition
+## 従属関係
You may have noticed some inconsistency in the API regarding composing components. To provide some transparency, we have been using the following rules when designing the API:
@@ -101,7 +101,7 @@ There are two options to design the API for the variations of a component: with
```tsx
type Props = {
- variant: 'text' | 'contained' | 'fab';
+ variant: 'text' | 'contained' | 'fab';
}
```
diff --git a/docs/src/pages/guides/api/api-pt.md b/docs/src/pages/guides/api/api-pt.md
index fa47b04e04e85c..0a1fb16acfe2c4 100644
--- a/docs/src/pages/guides/api/api-pt.md
+++ b/docs/src/pages/guides/api/api-pt.md
@@ -101,7 +101,7 @@ Existem duas opções para projetar a API para as variações de um componente:
```tsx
type Props = {
- variant: 'text' | 'contained' | 'fab';
+ variant: 'text' | 'contained' | 'fab';
}
```
diff --git a/docs/src/pages/guides/api/api-ru.md b/docs/src/pages/guides/api/api-ru.md
index d93d840d0148c6..11505cc540eaa7 100644
--- a/docs/src/pages/guides/api/api-ru.md
+++ b/docs/src/pages/guides/api/api-ru.md
@@ -101,7 +101,7 @@ There are two options to design the API for the variations of a component: with
```tsx
type Props = {
- variant: 'text' | 'contained' | 'fab';
+ variant: 'text' | 'contained' | 'fab';
}
```
diff --git a/docs/src/pages/guides/api/api-zh.md b/docs/src/pages/guides/api/api-zh.md
index acf0acad0424ec..94f3460242e808 100644
--- a/docs/src/pages/guides/api/api-zh.md
+++ b/docs/src/pages/guides/api/api-zh.md
@@ -101,13 +101,13 @@ const styles = {
```tsx
type Props = {
- variant: 'text' | 'contained' | 'fab';
+ variant: 'text' | 'contained' | 'fab';
}
```
这个API更详细： ``,``,``。
- 但是它可以防止使用无效组合， 限制暴露的属性数量， 并且可以在将来轻松支持新的价值观。
+ However it prevents an invalid combination from being used, bounds the number of properties exposed, and can easily support new values in the future.
Material-UI组件根据以下规则使用两种方法的组合：
diff --git a/docs/src/pages/guides/composition/composition-de.md b/docs/src/pages/guides/composition/composition-de.md
index 1615c6431f058d..2225f14c5be4a8 100644
--- a/docs/src/pages/guides/composition/composition-de.md
+++ b/docs/src/pages/guides/composition/composition-de.md
@@ -70,23 +70,26 @@ Die Lösung ist einfach: ** vermeiden von Inline-Funktionen und stattdessen übe
```jsx
import { Link as RouterLink } from 'react-router-dom';
-class ListItemLink extends React.Component {
- renderLink = React.forwardRef((itemProps, ref) => (
- // with react-router-dom@^5.0.0 use `ref` instead of `innerRef`
-
-
- {icon && {icon} }
-
-
- );
- }
+function ListItemLink(props) {
+ const { icon, primary, to } = props;
+
+ const renderLink = React.useMemo(
+ () =>
+ React.forwardRef((itemProps, ref) => (
+ // with react-router-dom@^5.0.0 use `ref` instead of `innerRef`
+
+
+ {icon}
+
+
+ );
}
```
diff --git a/docs/src/pages/guides/composition/composition-es.md b/docs/src/pages/guides/composition/composition-es.md
index 73786ca44d1699..159f8dffea75bd 100644
--- a/docs/src/pages/guides/composition/composition-es.md
+++ b/docs/src/pages/guides/composition/composition-es.md
@@ -70,23 +70,26 @@ The solution is simple: **avoid inline functions and pass a static component to
```jsx
import { Link as RouterLink } from 'react-router-dom';
-class ListItemLink extends React.Component {
- renderLink = React.forwardRef((itemProps, ref) => (
- // with react-router-dom@^5.0.0 use `ref` instead of `innerRef`
-
-
- {icon && {icon} }
-
-
- );
- }
+function ListItemLink(props) {
+ const { icon, primary, to } = props;
+
+ const renderLink = React.useMemo(
+ () =>
+ React.forwardRef((itemProps, ref) => (
+ // with react-router-dom@^5.0.0 use `ref` instead of `innerRef`
+
+
+ {icon}
+
+
+ );
}
```
diff --git a/docs/src/pages/guides/composition/composition-fr.md b/docs/src/pages/guides/composition/composition-fr.md
index 6bf64a47753bea..8c82c029bff538 100644
--- a/docs/src/pages/guides/composition/composition-fr.md
+++ b/docs/src/pages/guides/composition/composition-fr.md
@@ -70,23 +70,26 @@ The solution is simple: **avoid inline functions and pass a static component to
```jsx
import { Link as RouterLink } from 'react-router-dom';
-class ListItemLink extends React.Component {
- renderLink = React.forwardRef((itemProps, ref) => (
- // with react-router-dom@^5.0.0 use `ref` instead of `innerRef`
-
-
- {icon && {icon} }
-
-
- );
- }
+function ListItemLink(props) {
+ const { icon, primary, to } = props;
+
+ const renderLink = React.useMemo(
+ () =>
+ React.forwardRef((itemProps, ref) => (
+ // with react-router-dom@^5.0.0 use `ref` instead of `innerRef`
+
+
+ {icon}
+
+
+ );
}
```
diff --git a/docs/src/pages/guides/composition/composition-ja.md b/docs/src/pages/guides/composition/composition-ja.md
index 1a8122bf5de9ab..cbc5a99e3ba42a 100644
--- a/docs/src/pages/guides/composition/composition-ja.md
+++ b/docs/src/pages/guides/composition/composition-ja.md
@@ -70,23 +70,26 @@ The solution is simple: **avoid inline functions and pass a static component to
```jsx
import { Link as RouterLink } from 'react-router-dom';
-class ListItemLink extends React.Component {
- renderLink = React.forwardRef((itemProps, ref) => (
- // with react-router-dom@^5.0.0 use `ref` instead of `innerRef`
-
-
- {icon && {icon} }
-
-
- );
- }
+function ListItemLink(props) {
+ const { icon, primary, to } = props;
+
+ const renderLink = React.useMemo(
+ () =>
+ React.forwardRef((itemProps, ref) => (
+ // with react-router-dom@^5.0.0 use `ref` instead of `innerRef`
+
+
+ {icon}
+
+
+ );
}
```
diff --git a/docs/src/pages/guides/composition/composition-pt.md b/docs/src/pages/guides/composition/composition-pt.md
index a5ca22c403d953..ccbc60504ed1e2 100644
--- a/docs/src/pages/guides/composition/composition-pt.md
+++ b/docs/src/pages/guides/composition/composition-pt.md
@@ -70,23 +70,26 @@ A solução é simples: **evite funções em linha e passe um componente estáti
```jsx
import { Link as RouterLink } from 'react-router-dom';
-class ListItemLink extends React.Component {
- renderLink = React.forwardRef((itemProps, ref) => (
- // com react-router-dom@^5.0.0 use `ref` ao invés de `innerRef`
-
-
- {icon && {icon} }
-
-
- );
- }
+function ListItemLink(props) {
+ const { icon, primary, to } = props;
+
+ const renderLink = React.useMemo(
+ () =>
+ React.forwardRef((itemProps, ref) => (
+ // com react-router-dom@^5.0.0 use `ref` ao invés de `innerRef`
+
+
+ {icon}
+
+
+ );
}
```
diff --git a/docs/src/pages/guides/composition/composition-ru.md b/docs/src/pages/guides/composition/composition-ru.md
index 9f09250ea5f886..51e3f2d56ee285 100644
--- a/docs/src/pages/guides/composition/composition-ru.md
+++ b/docs/src/pages/guides/composition/composition-ru.md
@@ -69,23 +69,26 @@ const ListItemLink = ({ icon, primary, secondary, to }) => (
```jsx
import { Link as RouterLink } from 'react-router-dom';
-class ListItemLink extends React.Component {
- renderLink = React.forwardRef((itemProps, ref) => (
- // with react-router-dom@^5.0.0 use `ref` instead of `innerRef`
-
-
- {icon && {icon} }
-
-
- );
- }
+function ListItemLink(props) {
+ const { icon, primary, to } = props;
+
+ const renderLink = React.useMemo(
+ () =>
+ React.forwardRef((itemProps, ref) => (
+ // with react-router-dom@^5.0.0 use `ref` instead of `innerRef`
+
+
+ {icon}
+
+
+ );
}
```
diff --git a/docs/src/pages/guides/composition/composition-zh.md b/docs/src/pages/guides/composition/composition-zh.md
index beac1418700660..665c9cdca0b2be 100644
--- a/docs/src/pages/guides/composition/composition-zh.md
+++ b/docs/src/pages/guides/composition/composition-zh.md
@@ -70,23 +70,26 @@ const ListItemLink = ({ icon, primary, secondary, to }) => (
```jsx
import { Link as RouterLink } from 'react-router-dom';
-class ListItemLink extends React.Component {
- renderLink = React.forwardRef((itemProps, ref) => (
- // 在 react-router-dom@^5.0.0 中用 `ref` 代替 `innerRef`
-
-
- {icon && {icon} }
-
-
- );
- }
+function ListItemLink(props) {
+ const { icon, primary, to } = props;
+
+ const renderLink = React.useMemo(
+ () =>
+ React.forwardRef((itemProps, ref) => (
+ // with react-router-dom@^5.0.0 use `ref` instead of `innerRef`
+
+
+ {icon}
+
+
+ );
}
```
diff --git a/docs/src/pages/guides/interoperability/interoperability-pt.md b/docs/src/pages/guides/interoperability/interoperability-pt.md
index 707f2d1e4b24ba..e38da4961e6548 100644
--- a/docs/src/pages/guides/interoperability/interoperability-pt.md
+++ b/docs/src/pages/guides/interoperability/interoperability-pt.md
@@ -7,7 +7,7 @@ Este guia tem como objetivo documentar as alternativas mais populares, mas você
- [CSS puro](#plain-css)
- [CSS global](#global-css)
- [Styled Components](#global-css)
-- [Módulos CSS](#styled-components)
+- [CSS Modules](#styled-components)
- [Emotion](#css-modules)
- [React JSS](#react-jss)
- [Glamor](#glamor)
@@ -50,7 +50,7 @@ export default function PlainCssButton() {
**Nota:** O JSS injeta seus estilos na parte inferior do ``. Se você não quiser marcar atributos de estilo com **!important**, você precisa alterar [a ordem de injeção do CSS](/styles/advanced/#css-injection-order), como na demonstração.
-## CSS global
+## Global CSS
Fornecer explicitamente os nomes das classes ao componente é um esforço excessivo? [Você pode segmentar os nomes de classe gerados por Material-UI](/styles/advanced/#with-material-ui-core).
diff --git a/docs/src/pages/guides/interoperability/interoperability-zh.md b/docs/src/pages/guides/interoperability/interoperability-zh.md
index 2b545a77325420..18d4e28fe63f7b 100644
--- a/docs/src/pages/guides/interoperability/interoperability-zh.md
+++ b/docs/src/pages/guides/interoperability/interoperability-zh.md
@@ -50,7 +50,7 @@ export default function PlainCssButton() {
**请注意：** JSS 在 `` 底部注入其样式表。 如果您不想使用 **!important** 来标记样式属性，您则需要更改 [CSS 的注入顺序](/styles/advanced/#css-injection-order)，如上所示。
-## 全局 CSS
+## 全局CSS
明确向提组件提供类名是不是太大费周章了？ [您可以定位到由 Material-UI 生成的类名](/styles/advanced/#with-material-ui-core)。
@@ -85,11 +85,11 @@ export default function GlobalCssButton() {
[](https://codesandbox.io/s/9yxopv4vmp)
-**请注意：** JSS 在 `` 底部注入其样式表。 如果您不想使用 **!important** 来标记样式属性，您则需要更改 [CSS 的注入顺序](/styles/advanced/#css-injection-order)，如上所示。
+**请注意：** JSS 在 `` 底部注入其样式表。 如果您不想使用 **!important**标记样式属性，则需要更改 [CSS注入顺序](/styles/advanced/#css-injection-order)，如演示中所示。
## Styled Components
- 
+ 
`styled()` 方法适用于我们所有的组件。
@@ -240,7 +240,7 @@ const StyledMenu = styled(({ className, ...props }) => (
## CSS Modules
-
+
鉴于它全权依赖于大家使用的打包方案，我们很难得知[此种样式方案](https://github.com/css-modules/css-modules)的市场占有率。
@@ -282,7 +282,7 @@ export default function CssModulesButton() {
## Emotion
- 
+ 
### `css` 属性
@@ -328,7 +328,7 @@ export default function EmotionButton() {
## React JSS
- 
+ 
Material-UI 的样式方案与 [react-jss](https://github.com/cssinjs/react-jss) 共享了许多代码块。 为了解决我们独特的需求，我们继续开发并且克隆了项目，但是我们仍致力于合并那些从 Material-UI 返回到 react-jss 的变动和修复。
@@ -370,7 +370,7 @@ export default injectSheet(styles)(ReactJssButton);
## Glamor
- 
+ 
使用 Glamour 应用样式的一个好的办法是利用 **css()** 函数，然后使用 **classnames** 将它们打包为字符串：
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-de.md b/docs/src/pages/guides/migration-v0x/migration-v0x-de.md
index 93c8f0e2e64f4e..6ca620844c4cb2 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-de.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-de.md
@@ -13,7 +13,7 @@ Gute Frage! Die Antwort ist nein. Die Kernkonzepte haben sich nicht geändert. S
Die Material-UI wurde vor [4 Jahren gestartet](https://github.com/mui-org/material-ui/commit/28b768913b75752ecf9b6bb32766e27c241dbc46). Das Ökosystem hat sich seitdem stark verändert, wir haben auch viel gelernt. [@nathanmarks](https://github.com/nathanmarks/) begann eine ehrgeizige Aufgabe, Material-UI **von Grund auf ** neu zu erstellen unter Ausnutzung seines Wissen seit langem bestehende Probleme zu lösen. Um einige der wichtigsten Änderungen zu nennen:
- Neue Styling-Lösung mit CSS-in-JS (bessere[ Anpassungsmöglichkeiten](/customization/components/), bessere Leistung)
-- Neues [Theming](/customization/themes/) (Schachteln, selbsttragend usw.)
+- Neues Theming (Schachteln, selbsttragend usw.)
- Schnelle Dokumentation dank [Next.js](https://github.com/zeit/next.js)
- Viel bessere [Testabdeckung](/guides/testing/) (99%+, läuft auf allen gängigen Browsern, [visuelle Regressionstests](https://www.argos-ci.com/mui-org/material-ui))
- Vollständige [serverseitiges Rendern](/guides/server-rendering/) Unterstützung
@@ -24,71 +24,70 @@ Die Material-UI wurde vor [4 Jahren gestartet](https://github.com/mui-org/materi
1. Beginnen Sie mit der Installation der v1.x-Version von Material-UI neben der v0.x-Version.
Mit yarn:
-
- ```sh
- yarn add material-ui
- yarn add @material-ui/core
- ```
-
- Oder mit npm:
-
- ```sh
- npm install material-ui
- npm install @material-ui/core
- ```
-
- dann
-
- ```js
- import FlatButton from 'material-ui/FlatButton'; // v0.x
- import Button from '@material-ui/core/Button'; // v1.x
- ```
-
-2. Führen Sie den [Migrationshelfer](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) auf Ihrem Projekt aus.
-3. Der `MuiThemeProvider` ist für v1.x optional. Wenn Sie jedoch ein benutzerdefiniertes Design haben, können Sie die Versionen v0.x und v1.x der Komponente gleichzeitig verwenden:
-
- ```jsx
- import React from 'react';
- import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
- import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
- import getMuiTheme from 'material-ui/styles/getMuiTheme';
-
- const theme = createMuiTheme({
- /* Theme für v1.x */
- });
- const themeV0 = getMuiTheme({
- /* Theme fürv0.x */
- });
-
- function App() {
+```sh
+ yarn add material-ui
+ yarn add @material-ui/core
+ ```
+
+ Or with npm:
+ ```sh
+ npm install material-ui
+ npm install @material-ui/core
+ ```
+
+ then
+
+ ```js
+ import FlatButton from 'material-ui/FlatButton'; // v0.x
+ import Button from '@material-ui/core/Button'; // v1.x
+ ```
+
+2. Run [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) on your project.
+3. `MuiThemeProvider` is optional for v1.x., but if you have a custom theme, you are free to use v0.x and v1.x versions of the component at the same time, like this:
+
+ ```jsx
+ import React from 'react';
+ import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
+ import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
+ import getMuiTheme from 'material-ui/styles/getMuiTheme';
+
+ const theme = createMuiTheme({
+ /* theme for v1.x */
+ });
+ const themeV0 = getMuiTheme({
+ /* theme for v0.x */
+ });
+
+ function App() {
return (
- {/*Komponenten*/}
+ {/*Components*/}
);
- }
-
- export default App;
- ```
+ }
+
+ export default App;
+ ```
4. Danach können Sie jeweils eine Komponenteninstanz migrieren.
-## Komponenten
+## Components
-### Autovervollständigung
+### Autocomplete
-Die Material-UI bietet keine übergeordnete API zur Lösung dieses Problems an. Dafür müssen Sie die Lösungen zu erkunden, die [die React-Community entwickelt hat](/components/autocomplete/).
+Material-UI doesn't provide a high-level API for solving this problem.
+You're encouraged you to explore [the solutions the React community has built](/components/autocomplete/).
-In Zukunft werden wir versuchen, eine einfache Komponente bereitzustellen, um die einfachen Anwendungsfälle zu lösen: [#9997](https://github.com/mui-org/material-ui/issues/9997).
+In the future, we will look into providing a simple component to solve the simple use cases: [#9997](https://github.com/mui-org/material-ui/issues/9997).
-### Svg-Symbol
+### Svg Icon
-Führen Sie den [Migrationshelfer](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) auf Ihrem Projekt aus.
+Run [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) on your project.
-Dadurch werden folgende Änderungen wie die folgende angewendet:
+This will apply a change such as the following:
```diff
-import AddIcon from 'material-ui/svg-icons/Add';
@@ -188,4 +187,4 @@ Erhöhter Button-Aktualisierungspfad:
### Fortsetzung folgt…
-Haben Sie Ihre App erfolgreich migriert und möchten der Community helfen? Bitte hilf uns! Wir haben ein offenes Problem, um den Migrationsleitfaden [#7195](https://github.com/mui-org/material-ui/issues/7195) abzuschließen. Any pull request is welcomed
\ No newline at end of file
+Haben Sie Ihre App erfolgreich migriert und möchten der Community helfen? Bitte hilf uns! Wir haben ein offenes Problem, um den Migrationsleitfaden [#7195](https://github.com/mui-org/material-ui/issues/7195) abzuschließen. Jede Pull-Anfrage wird begrüßt 😊.
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-es.md b/docs/src/pages/guides/migration-v0x/migration-v0x-es.md
index 5efa3558bf5ea4..f7aa653f090063 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-es.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-es.md
@@ -13,7 +13,7 @@ I’m glad you asked! The answer is no. The core concepts haven’t changed. You
Material-UI was started [4 years ago](https://github.com/mui-org/material-ui/commit/28b768913b75752ecf9b6bb32766e27c241dbc46). The ecosystem has evolved a lot since then, we have also learned a lot. [@nathanmarks](https://github.com/nathanmarks/) started an ambitious task, rebuilding Material-UI from the **ground-up** taking advantage of this knowledge to address long-standing issues. To name some of the major changes:
- New styling solution using CSS-in-JS (better [customization](/customization/components/) power, better performance)
-- New [theme handling](/customization/themes/) (nesting, self-supporting, etc.)
+- New theme handling (nesting, self-supporting, etc.)
- Blazing fast documentation thanks to [Next.js](https://github.com/zeit/next.js)
- Way better [test coverage](/guides/testing/) (99%+, run on all the major browsers, [visual regression tests](https://www.argos-ci.com/mui-org/material-ui))
- Full [server-side rendering](/guides/server-rendering/) support
@@ -24,44 +24,42 @@ Material-UI was started [4 years ago](https://github.com/mui-org/material-ui/com
1. Start by installing the v1.x version of Material-UI along side the v0.x version.
With yarn:
-
- ```sh
- yarn add material-ui
- yarn add @material-ui/core
- ```
-
- Or with npm:
-
- ```sh
- npm install material-ui
- npm install @material-ui/core
- ```
-
- then
-
- ```js
- import FlatButton from 'material-ui/FlatButton'; // v0.x
- import Button from '@material-ui/core/Button'; // v1.x
- ```
-2. Run [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) on your project.
+```sh
+ yarn add material-ui
+ yarn add @material-ui/core
+ ```
+
+ Or with npm:
+ ```sh
+ npm install material-ui
+ npm install @material-ui/core
+ ```
+
+ then
+
+ ```js
+ import FlatButton from 'material-ui/FlatButton'; // v0.x
+ import Button from '@material-ui/core/Button'; // v1.x
+ ```
+2. Run [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) on your project.
3. `MuiThemeProvider` is optional for v1.x., but if you have a custom theme, you are free to use v0.x and v1.x versions of the component at the same time, like this:
-
- ```jsx
- import React from 'react';
- import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
- import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
- import getMuiTheme from 'material-ui/styles/getMuiTheme';
-
- const theme = createMuiTheme({
+
+ ```jsx
+ import React from 'react';
+ import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
+ import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
+ import getMuiTheme from 'material-ui/styles/getMuiTheme';
+
+ const theme = createMuiTheme({
/* theme for v1.x */
- });
- const themeV0 = getMuiTheme({
+ });
+ const themeV0 = getMuiTheme({
/* theme for v0.x */
- });
-
- function App() {
+ });
+
+ function App() {
return (
@@ -69,18 +67,19 @@ Material-UI was started [4 years ago](https://github.com/mui-org/material-ui/com
);
- }
-
- export default App;
- ```
+ }
+
+ export default App;
+ ```
4. After that, you are free to migrate one component instance at the time.
-## Componentes
+## Components
-### Autocompletado
+### Autocomplete
-Material-UI doesn't provide a high-level API for solving this problem. You're encouraged you to explore [the solutions the React community has built](/components/autocomplete/).
+Material-UI doesn't provide a high-level API for solving this problem.
+You're encouraged you to explore [the solutions the React community has built](/components/autocomplete/).
In the future, we will look into providing a simple component to solve the simple use cases: [#9997](https://github.com/mui-org/material-ui/issues/9997).
@@ -188,4 +187,4 @@ RaisedButton upgrade path:
### To be continued…
-Have you successfully migrated your app, and wish to help the community? Please help us! We have an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed
\ No newline at end of file
+Have you successfully migrated your app, and wish to help the community? Please help us! We have an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-fr.md b/docs/src/pages/guides/migration-v0x/migration-v0x-fr.md
index 615347ef84562a..7cbf9d17b038c0 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-fr.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-fr.md
@@ -13,7 +13,7 @@ Je suis content que vous ayez demandé! La réponse est non. Les concepts de bas
Material-UI was started [4 years ago](https://github.com/mui-org/material-ui/commit/28b768913b75752ecf9b6bb32766e27c241dbc46). The ecosystem has evolved a lot since then, we have also learned a lot. [@nathanmarks](https://github.com/nathanmarks/) started an ambitious task, rebuilding Material-UI from the **ground-up** taking advantage of this knowledge to address long-standing issues. To name some of the major changes:
- New styling solution using CSS-in-JS (better [customization](/customization/components/) power, better performance)
-- New [theme handling](/customization/themes/) (nesting, self-supporting, etc.)
+- New theme handling (nesting, self-supporting, etc.)
- Blazing fast documentation thanks to [Next.js](https://github.com/zeit/next.js)
- Way better [test coverage](/guides/testing/) (99%+, run on all the major browsers, [visual regression tests](https://www.argos-ci.com/mui-org/material-ui))
- Full [server-side rendering](/guides/server-rendering/) support
@@ -24,44 +24,42 @@ Material-UI was started [4 years ago](https://github.com/mui-org/material-ui/com
1. Start by installing the v1.x version of Material-UI along side the v0.x version.
With yarn:
-
- ```sh
- yarn add material-ui
- yarn add @material-ui/core
- ```
-
- Or with npm:
-
- ```sh
- npm install material-ui
- npm install @material-ui/core
- ```
-
- then
-
- ```js
- import FlatButton from 'material-ui/FlatButton'; // v0.x
- import Button from '@material-ui/core/Button'; // v1.x
- ```
-2. Run [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) on your project.
+```sh
+ yarn add material-ui
+ yarn add @material-ui/core
+ ```
+
+ Or with npm:
+ ```sh
+ npm install material-ui
+ npm install @material-ui/core
+ ```
+
+ then
+
+ ```js
+ import FlatButton from 'material-ui/FlatButton'; // v0.x
+ import Button from '@material-ui/core/Button'; // v1.x
+ ```
+2. Run [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) on your project.
3. `MuiThemeProvider` is optional for v1.x., but if you have a custom theme, you are free to use v0.x and v1.x versions of the component at the same time, like this:
-
- ```jsx
- import React from 'react';
- import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
- import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
- import getMuiTheme from 'material-ui/styles/getMuiTheme';
-
- const theme = createMuiTheme({
+
+ ```jsx
+ import React from 'react';
+ import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
+ import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
+ import getMuiTheme from 'material-ui/styles/getMuiTheme';
+
+ const theme = createMuiTheme({
/* theme for v1.x */
- });
- const themeV0 = getMuiTheme({
+ });
+ const themeV0 = getMuiTheme({
/* theme for v0.x */
- });
-
- function App() {
+ });
+
+ function App() {
return (
@@ -69,18 +67,19 @@ Material-UI was started [4 years ago](https://github.com/mui-org/material-ui/com
);
- }
-
- export default App;
- ```
+ }
+
+ export default App;
+ ```
4. After that, you are free to migrate one component instance at the time.
-## Composants
+## Components
-### Auto-complétion
+### Autocomplete
-Material-UI doesn't provide a high-level API for solving this problem. You're encouraged you to explore [the solutions the React community has built](/components/autocomplete/).
+Material-UI doesn't provide a high-level API for solving this problem.
+You're encouraged you to explore [the solutions the React community has built](/components/autocomplete/).
In the future, we will look into providing a simple component to solve the simple use cases: [#9997](https://github.com/mui-org/material-ui/issues/9997).
@@ -188,4 +187,4 @@ RaisedButton upgrade path:
### To be continued…
-Have you successfully migrated your app, and wish to help the community? Please help us! We have an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed
\ No newline at end of file
+Have you successfully migrated your app, and wish to help the community? Please help us! We have an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-ja.md b/docs/src/pages/guides/migration-v0x/migration-v0x-ja.md
index 0ec47f704b10e0..f7aa653f090063 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-ja.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-ja.md
@@ -13,7 +13,7 @@ I’m glad you asked! The answer is no. The core concepts haven’t changed. You
Material-UI was started [4 years ago](https://github.com/mui-org/material-ui/commit/28b768913b75752ecf9b6bb32766e27c241dbc46). The ecosystem has evolved a lot since then, we have also learned a lot. [@nathanmarks](https://github.com/nathanmarks/) started an ambitious task, rebuilding Material-UI from the **ground-up** taking advantage of this knowledge to address long-standing issues. To name some of the major changes:
- New styling solution using CSS-in-JS (better [customization](/customization/components/) power, better performance)
-- New [theme handling](/customization/themes/) (nesting, self-supporting, etc.)
+- New theme handling (nesting, self-supporting, etc.)
- Blazing fast documentation thanks to [Next.js](https://github.com/zeit/next.js)
- Way better [test coverage](/guides/testing/) (99%+, run on all the major browsers, [visual regression tests](https://www.argos-ci.com/mui-org/material-ui))
- Full [server-side rendering](/guides/server-rendering/) support
@@ -24,44 +24,42 @@ Material-UI was started [4 years ago](https://github.com/mui-org/material-ui/com
1. Start by installing the v1.x version of Material-UI along side the v0.x version.
With yarn:
-
- ```sh
- yarn add material-ui
- yarn add @material-ui/core
- ```
-
- Or with npm:
-
- ```sh
- npm install material-ui
- npm install @material-ui/core
- ```
-
- then
-
- ```js
- import FlatButton from 'material-ui/FlatButton'; // v0.x
- import Button from '@material-ui/core/Button'; // v1.x
- ```
-2. Run [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) on your project.
+```sh
+ yarn add material-ui
+ yarn add @material-ui/core
+ ```
+
+ Or with npm:
+ ```sh
+ npm install material-ui
+ npm install @material-ui/core
+ ```
+
+ then
+
+ ```js
+ import FlatButton from 'material-ui/FlatButton'; // v0.x
+ import Button from '@material-ui/core/Button'; // v1.x
+ ```
+2. Run [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) on your project.
3. `MuiThemeProvider` is optional for v1.x., but if you have a custom theme, you are free to use v0.x and v1.x versions of the component at the same time, like this:
-
- ```jsx
- import React from 'react';
- import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
- import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
- import getMuiTheme from 'material-ui/styles/getMuiTheme';
-
- const theme = createMuiTheme({
+
+ ```jsx
+ import React from 'react';
+ import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
+ import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
+ import getMuiTheme from 'material-ui/styles/getMuiTheme';
+
+ const theme = createMuiTheme({
/* theme for v1.x */
- });
- const themeV0 = getMuiTheme({
+ });
+ const themeV0 = getMuiTheme({
/* theme for v0.x */
- });
-
- function App() {
+ });
+
+ function App() {
return (
@@ -69,18 +67,19 @@ Material-UI was started [4 years ago](https://github.com/mui-org/material-ui/com
);
- }
-
- export default App;
- ```
+ }
+
+ export default App;
+ ```
4. After that, you are free to migrate one component instance at the time.
-## コンポーネント
+## Components
### Autocomplete
-Material-UI doesn't provide a high-level API for solving this problem. You're encouraged you to explore [the solutions the React community has built](/components/autocomplete/).
+Material-UI doesn't provide a high-level API for solving this problem.
+You're encouraged you to explore [the solutions the React community has built](/components/autocomplete/).
In the future, we will look into providing a simple component to solve the simple use cases: [#9997](https://github.com/mui-org/material-ui/issues/9997).
@@ -188,4 +187,4 @@ RaisedButton upgrade path:
### To be continued…
-Have you successfully migrated your app, and wish to help the community? Please help us! We have an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed
\ No newline at end of file
+Have you successfully migrated your app, and wish to help the community? Please help us! We have an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-pt.md b/docs/src/pages/guides/migration-v0x/migration-v0x-pt.md
index 3d0b14cb39352f..1fa1f6a0ec3a9e 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-pt.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-pt.md
@@ -13,7 +13,7 @@ Estou feliz que você tenha perguntado! A resposta é não. Os principais concei
Material-UI foi iniciado [4 anos atrás](https://github.com/mui-org/material-ui/commit/28b768913b75752ecf9b6bb32766e27c241dbc46). O ecossistema evoluiu muito desde então, também aprendemos muito. [@nathanmarks](https://github.com/nathanmarks/) iniciou uma tarefa ambiciosa, reconstruindo o Material-UI do **zero**, aproveitando esse conhecimento para resolver problemas de longa data. Para citar algumas das principais mudanças:
- Nova solução de estilo usando CSS-in-JS (melhor poder de [customização](/customization/components/), melhor desempenho)
-- Novo [tratamento de tema](/customization/themes/) (aninhamento, auto-suporte, etc.)
+- Novo tratamento de tema (aninhamento, auto-suporte, etc.)
- Documentação rápida e brilhante graças a [Next.js](https://github.com/zeit/next.js)
- Melhor [cobertura de teste](/guides/testing/) (99%+, executado em todos os principais navegadores, [testes de regressão visual](https://www.argos-ci.com/mui-org/material-ui))
- Suporte completo [a renderização do lado do servidor](/guides/server-rendering/)
@@ -24,44 +24,42 @@ Material-UI foi iniciado [4 anos atrás](https://github.com/mui-org/material-ui/
1. Comece instalando a versão v1.x do Material-UI ao lado da versão v0.x.
utilizando o yarn:
-
- ```sh
- yarn add material-ui
- yarn add @material-ui/core
- ```
-
- ou utilizando o npm:
-
- ```sh
- npm install material-ui
- npm install @material-ui/core
- ```
-
- então
-
- ```js
- import FlatButton from 'material-ui/FlatButton'; // v0.x
- import Button from '@material-ui/core/Button'; // v1.x
- ```
-2. Execute [o auxiliar de migração](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) em seu projeto.
+```sh
+ yarn add material-ui
+ yarn add @material-ui/core
+ ```
-3. `MuiThemeProvider` é opcional para v1.x., mas se você tiver um tema customizado, estará livre para usar as versões v0.x e v1.x do componente ao mesmo tempo, desta forma:
-
- ```jsx
- import React from 'react';
- import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
- import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
- import getMuiTheme from 'material-ui/styles/getMuiTheme';
-
- const theme = createMuiTheme({
- /* theme for v1.x */
- });
- const themeV0 = getMuiTheme({
- /* theme for v0.x */
- });
-
- function App() {
+ Ou utilizando npm:
+ ```sh
+ npm install material-ui
+ npm install @material-ui/core
+ ```
+
+ então
+
+ ```js
+ import FlatButton from 'material-ui/FlatButton'; // v0.x
+ import Button from '@material-ui/core/Button'; // v1.x
+ ```
+
+2. Execute [o auxiliar de migração](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) em seu projeto.
+3. `MuiThemeProvider` é opcional para v1.x., mas se você tem um tema customizado, você é livre para usar as versões v0.x e v1.x do componente, ao mesmo tempo, como neste exemplo:
+
+ ```jsx
+ import React from 'react';
+ import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
+ import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
+ import getMuiTheme from 'material-ui/styles/getMuiTheme';
+
+ const theme = createMuiTheme({
+ /* tema para v1.x */
+ });
+ const themeV0 = getMuiTheme({
+ /* tema para v0.x */
+ });
+
+ function App() {
return (
@@ -69,26 +67,27 @@ Material-UI foi iniciado [4 anos atrás](https://github.com/mui-org/material-ui/
);
- }
-
- export default App;
- ```
+ }
+
+ export default App;
+ ```
4. Depois disso, você está livre para migrar uma instância de componente por vez.
## Componentes
-### Autocomplete (Autocompletar)
+### Autocompletar
-Material-UI, não fornece uma API de alto nível para resolver este problema. Recomendamos você a explorar [as soluções que a comunidade React construiu](/components/autocomplete/).
+Material-UI, não fornece uma API de alto nível para resolver este problema.
+Recomendamos que você explore [as soluções que a comunidade construiu](/components/autocomplete/).
-No futuro, vamos procurar fornecer um componente simples para resolver os casos de uso simples: [#9997](https://github.com/mui-org/material-ui/issues/9997).
+No futuro, procuraremos fornecer um componente para resolver as formas de uso mais simples: [#9997](https://github.com/mui-org/material-ui/issues/9997).
-### Ícone Svg
+### Svg Icon
Execute [o auxiliar de migração](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) em seu projeto.
-Isso aplicará uma alteração como a seguinte:
+Isto irá aplicar a seguinte mudança:
```diff
-import AddIcon from 'material-ui/svg-icons/Add';
@@ -188,4 +187,4 @@ Caminho de atualização do RaisedButton:
### Continua…
-Você migrou sua aplicação com sucesso e deseja ajudar a comunidade? Por favor nos ajude! Temos um problema em aberto para concluir este guia de migração [#7195](https://github.com/mui-org/material-ui/issues/7195). Qualquer pull request é bem-vindo
\ No newline at end of file
+Você migrou sua aplicação com sucesso e deseja ajudar a comunidade? Por favor nos ajude! Temos um problema em aberto para concluir este guia de migração [#7195](https://github.com/mui-org/material-ui/issues/7195). Qualquer pull request é bem-vindo 😊.
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-ru.md b/docs/src/pages/guides/migration-v0x/migration-v0x-ru.md
index 8dbd78ea0cda83..4e5ed3de6d4e71 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-ru.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-ru.md
@@ -1,6 +1,6 @@
# Migration From v0.x to v1
-Yeah, v1 has been released! Take advantage of 2 years worth of effort.
+Да! Релиз v1 состоялся! Take advantage of 2 years worth of effort.
## FAQ
@@ -13,7 +13,7 @@ I’m glad you asked! The answer is no. The core concepts haven’t changed. You
Material-UI was started [4 years ago](https://github.com/mui-org/material-ui/commit/28b768913b75752ecf9b6bb32766e27c241dbc46). The ecosystem has evolved a lot since then, we have also learned a lot. [@nathanmarks](https://github.com/nathanmarks/) started an ambitious task, rebuilding Material-UI from the **ground-up** taking advantage of this knowledge to address long-standing issues. To name some of the major changes:
- New styling solution using CSS-in-JS (better [customization](/customization/components/) power, better performance)
-- New [theme handling](/customization/themes/) (nesting, self-supporting, etc.)
+- New theme handling (nesting, self-supporting, etc.)
- Blazing fast documentation thanks to [Next.js](https://github.com/zeit/next.js)
- Way better [test coverage](/guides/testing/) (99%+, run on all the major browsers, [visual regression tests](https://www.argos-ci.com/mui-org/material-ui))
- Full [server-side rendering](/guides/server-rendering/) support
@@ -24,44 +24,42 @@ Material-UI was started [4 years ago](https://github.com/mui-org/material-ui/com
1. Start by installing the v1.x version of Material-UI along side the v0.x version.
With yarn:
-
- ```sh
- yarn add material-ui
- yarn add @material-ui/core
- ```
-
- Or with npm:
-
- ```sh
- npm install material-ui
- npm install @material-ui/core
- ```
-
- then
-
- ```js
- import FlatButton from 'material-ui/FlatButton'; // v0.x
- import Button from '@material-ui/core/Button'; // v1.x
- ```
-2. Run [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) on your project.
+```sh
+ yarn add material-ui
+ yarn add @material-ui/core
+ ```
+
+ Or with npm:
+ ```sh
+ npm install material-ui
+ npm install @material-ui/core
+ ```
+
+ then
+
+ ```js
+ import FlatButton from 'material-ui/FlatButton'; // v0.x
+ import Button from '@material-ui/core/Button'; // v1.x
+ ```
+2. Run [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) on your project.
3. `MuiThemeProvider` is optional for v1.x., but if you have a custom theme, you are free to use v0.x and v1.x versions of the component at the same time, like this:
-
- ```jsx
- import React from 'react';
- import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
- import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
- import getMuiTheme from 'material-ui/styles/getMuiTheme';
-
- const theme = createMuiTheme({
+
+ ```jsx
+ import React from 'react';
+ import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
+ import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
+ import getMuiTheme from 'material-ui/styles/getMuiTheme';
+
+ const theme = createMuiTheme({
/* theme for v1.x */
- });
- const themeV0 = getMuiTheme({
+ });
+ const themeV0 = getMuiTheme({
/* theme for v0.x */
- });
-
- function App() {
+ });
+
+ function App() {
return (
@@ -69,18 +67,19 @@ Material-UI was started [4 years ago](https://github.com/mui-org/material-ui/com
);
- }
-
- export default App;
- ```
+ }
+
+ export default App;
+ ```
4. After that, you are free to migrate one component instance at the time.
-## Компоненты
+## Components
-### Автодополнение
+### Autocomplete
-Material-UI doesn't provide a high-level API for solving this problem. You're encouraged you to explore [the solutions the React community has built](/components/autocomplete/).
+Material-UI doesn't provide a high-level API for solving this problem.
+You're encouraged you to explore [the solutions the React community has built](/components/autocomplete/).
In the future, we will look into providing a simple component to solve the simple use cases: [#9997](https://github.com/mui-org/material-ui/issues/9997).
@@ -188,4 +187,4 @@ RaisedButton upgrade path:
### To be continued…
-Have you successfully migrated your app, and wish to help the community? Please help us! We have an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed
\ No newline at end of file
+Have you successfully migrated your app, and wish to help the community? Please help us! We have an open issue in order to finish this migration guide [#7195](https://github.com/mui-org/material-ui/issues/7195). Any pull request is welcomed 😊.
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v0x/migration-v0x-zh.md b/docs/src/pages/guides/migration-v0x/migration-v0x-zh.md
index 94db4550444be1..6b189dc926d02f 100644
--- a/docs/src/pages/guides/migration-v0x/migration-v0x-zh.md
+++ b/docs/src/pages/guides/migration-v0x/migration-v0x-zh.md
@@ -13,7 +13,7 @@
Material-UI 这个项目是从[4年前](https://github.com/mui-org/material-ui/commit/28b768913b75752ecf9b6bb32766e27c241dbc46)开始的。 在此期间，整个个生态系统发展了很多，我们也学到了很多东西。 [@nathanmarks](https://github.com/nathanmarks/) 启动了一项雄心勃勃的任务，将 Material-UI **重新启动**，并利用我们学到的知识，来解决一些长期存在的问题。 譬如这些主要的变化：
- 我们采用 CSS-in-JS 这个新的样式方案（更好的[自定义](/customization/components/)的能力和整体性能）
-- 新的 [主题处理](/customization/themes/) （有嵌套，自主支撑等。）
+- 新的 主题处理 （有嵌套，自主支撑等。）
- 感谢 [Next.js](https://github.com/zeit/next.js) 超快地创建文档
- 更容易检测 [测试覆盖率](/guides/testing/) （99％以上，在所有主流浏览器上运行， [视觉回归测试](https://www.argos-ci.com/mui-org/material-ui)）
- 完全[服务器端渲染](/guides/server-rendering/)支持
@@ -24,44 +24,42 @@ Material-UI 这个项目是从[4年前](https://github.com/mui-org/material-ui/c
1. 首先，和v0.x版本一起，安装v1.x版本的 Material-UI。
用 yarn：
-
- ```sh
- yarn add material-ui
- yarn add @material-ui/core
- ```
-
- 或者用 npm：
-
- ```sh
- npm install material-ui
- npm install @material-ui/core
- ```
-
- 然后
-
- ```js
- import FlatButton from 'material-ui/FlatButton'; // v0.x
- import Button from '@material-ui/core/Button'; // v1.x
- ```
-
-2. 在您的项目上运行 [迁移帮助程序](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod)。
-3. `MuiThemeProvider` 对于v1.x.版本是可选的，但如果您有自定义主题，则可以同时使用该组件的v0.x和v1.x版本，如下所示：
-
- ```jsx
- import React from 'react';
- import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
- import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
- import getMuiTheme from 'material-ui/styles/getMuiTheme';
-
- const theme = createMuiTheme({
- /* v1.x版本的主题 */
- });
- const themeV0 = getMuiTheme({
- /* v0.x 版本的主题*/
- });
-
- function App() {
+```sh
+ yarn add material-ui
+ yarn add @material-ui/core
+ ```
+
+ Or with npm:
+ ```sh
+ npm install material-ui
+ npm install @material-ui/core
+ ```
+
+ then
+
+ ```js
+ import FlatButton from 'material-ui/FlatButton'; // v0.x
+ import Button from '@material-ui/core/Button'; // v1.x
+ ```
+
+2. Run [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) on your project.
+3。 `MuiThemeProvider` is optional for v1.x., but if you have a custom theme, you are free to use v0.x and v1.x versions of the component at the same time, like this:
+
+ ```jsx
+ import React from 'react';
+ import { MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles'; // v1.x
+ import { MuiThemeProvider as V0MuiThemeProvider} from 'material-ui';
+ import getMuiTheme from 'material-ui/styles/getMuiTheme';
+
+ const theme = createMuiTheme({
+ /* theme for v1.x */
+ });
+ const themeV0 = getMuiTheme({
+ /* theme for v0.x */
+ });
+
+ function App() {
return (
@@ -69,26 +67,27 @@ Material-UI 这个项目是从[4年前](https://github.com/mui-org/material-ui/c
);
- }
-
- export default App;
- ```
+ }
+
+ export default App;
+ ```
4. 之后，您可以自由地一次迁移一个组件实例。
-## 组件
+## Components
-### Autocomplete（自动补全）
+### Autocomplete
-Material-UI 不提供用于解决此问题的高级 API。 我们鼓励您去探索 [React 社区提供的解决方案](/components/autocomplete/) 。
+Material-UI doesn't provide a high-level API for solving this problem.
+You're encouraged you to explore [the solutions the React community has built](/components/autocomplete/).
-在未来，我们将研究提供一个简单的组件来解决简单的用例： [＃9997](https://github.com/mui-org/material-ui/issues/9997)。
+In the future, we will look into providing a simple component to solve the simple use cases: [#9997](https://github.com/mui-org/material-ui/issues/9997).
-### Svg Icon（Svg图标）
+### Svg Icon
-在您的项目上运行 [迁移帮助程序](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod)。
+Run [the migration helper](https://github.com/mui-org/material-ui/tree/master/packages/material-ui-codemod) on your project.
-这将应用如下更改：
+This will apply a change such as the following:
```diff
-import AddIcon from 'material-ui/svg-icons/Add';
@@ -188,4 +187,4 @@ Material-UI 不提供用于解决此问题的高级 API。 我们鼓励您去探
### 未完待续...
-您是否已成功迁移您的应用，并助社区一臂之力？ 请帮助我们！ 我们有一个未解决的问题，以完成此迁移指南 [＃7195](https://github.com/mui-org/material-ui/issues/7195)。 我们欢迎任何 pull request。
\ No newline at end of file
+您是否已成功迁移您的应用，并助社区一臂之力？ 请帮助我们！ 我们有一个未解决的问题，以完成此迁移指南 [＃7195](https://github.com/mui-org/material-ui/issues/7195)。 Any pull request is welcomed 😊.
\ No newline at end of file
diff --git a/docs/src/pages/guides/migration-v3/migration-v3-de.md b/docs/src/pages/guides/migration-v3/migration-v3-de.md
index 7a9301a11ad8bd..fcccb7a6f47e6d 100644
--- a/docs/src/pages/guides/migration-v3/migration-v3-de.md
+++ b/docs/src/pages/guides/migration-v3/migration-v3-de.md
@@ -202,7 +202,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [ButtonBase] The component passed to the `component` prop needs to be able to hold a ref. The [composition guide](/guides/composition/#caveat-with-refs) explains the migration strategy.
- This also applies to `BottomNavigationAction`, `Button`, `CardActionArea`, `Checkbox`, `ExpansionPanelSummary`, `Fab`, `IconButton`, `MenuItem`, `Radio`, `StepButton`, `Tab`, `TableSortLabel` as well as `ListItem` if the `button` prop is true.
+ This also applies to `BottomNavigationAction`, `Button`, `CardActionArea`, `Checkbox`, `ExpansionPanelSummary`, `Fab`, `IconButton`, `MenuItem`, `Radio`, `StepButton`, `Tab`, `TableSortLabel` as well as `ListItem` if the `button` prop is true.
### Card
@@ -242,7 +242,6 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- The `ListItemAvatar` component is required when using an avatar.
- The `ListItemIcon` component is required when using a left checkbox.
- The `edge` property should be set on the icon buttons.
-
- [ListItem] Increase the CSS specificity of the `disabled` and `focusVisible` style rules.
### Menu
@@ -253,7 +252,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
- [Modal] The child needs to be able to hold a ref. The [composition guide](/guides/composition/#caveat-with-refs) explains the migration strategy.
- This also applies to `Dialog` and `Popover`.
+ This also applies to `Dialog` and `Popover`.
- [Modal] Remove the classes customization API for the Modal component (-74% bundle size reduction when used standalone).
@@ -268,7 +267,7 @@ This change is explained in more detail in our [TypeScript guide](/guides/typesc
+
@@ -381,7 +380,7 @@ function MySelect({ children }) {
- [Typography] 将默认的字体从 `body2` 换成 `body1`。 默认为16px的字体大小比默认为14px好。 Bootstrap，material.io，甚至我们的文档都将16px作为默认字体大小。 像 Ant Design 一样使用14px是可以理解的，因为中国的用户使用了不同的字母表。 我们建议使用12px作为日语的默认字体大小。
- [Typography] 移除了铸排变体的默认颜色。 大多数情况下，字体颜色应该是继承而来的。 这是网站的默认行为。
-- [Typography] 遵循 #13028的逻辑，将 `color="default"` 重命名为 `color="initial"`。 The usage of *default* should be avoided, it lacks semantic.
+- [Typography] Rename `color="default"` to `color="initial"` following the logic of [this thread](https://github.com/mui-org/material-ui/issues/13028). 您不应该再使用 *default*，它缺少明确的语义。
### Node
@@ -393,13 +392,13 @@ function MySelect({ children }) {
```diff
const {
- Button,
- TextField,
+ Button,
+ TextField,
-} = window['material-ui'];
+} = MaterialUI;
```
- 它与其他 React 的项目保持一致：
+ 它与其他 React 的项目保持一致：
- material-ui => MaterialUI
- react-dom => ReactDOM
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-de.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-de.md
index a77ed34a7e322e..ac58d85c21bcb1 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-de.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-de.md
@@ -4,17 +4,17 @@
## Paketgröße zählt
-Die Paketgröße von Material-UI wird sehr ernst genommen. Bei jedem Commit werden für jedes Paket und für kritische Teile dieser Pakete Größen-Snapshots erstellt ([siehe letzten Snapshot](/size-snapshot)). Wir können, kombiniert mit [dangerJS](https://danger.systems/js/), [detaillierte Änderungen der Bündelgröße](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) bei jedem Pull Request prüfen.
+Die Paketgröße von Material-UI wird sehr ernst genommen. We take size snapshots on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Wir können, kombiniert mit [dangerJS](https://danger.systems/js/), [detaillierte Änderungen der Bündelgröße](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) bei jedem Pull Request prüfen.
## Wie kann ich die Paketgröße reduzieren?
-Der Einfachheit halber stellt Material-UI seine vollständige API auf der oberste Ebene des `material-ui` Imports zur Verfügung. Wenn Sie ES6 Module und einen Bundler verwenden, der Tree-Shaking unterstützt ([`webpack` >= 2.x ](https://webpack.js.org/guides/tree-shaking/), [ ` parcel` mit zusätzlicher Konfiguration](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)), können Sie sicher benannte Importe verwenden und nur einen minimalen Satz von Material-UI-Komponenten in Ihrem Bundles erwarten:
+Der Einfachheit halber stellt Material-UI seine vollständige API auf der oberste Ebene des `material-ui` Imports zur Verfügung. If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and expect only a minimal set of Material-UI components in your bundle:
```js
import { Button, TextField } from '@material-ui/core';
```
-Beachten Sie, dass das Tree-Shacking eine Optimierung darstellt, die normalerweise nicht in der Entwicklungsumgebung angewendet wird. Bundles in der Entwicklungsumgebung werden die gesamte Bibliothek enthalten, was zu langsamen Startzeiten führen kann. Dies macht sich insbesondere dann bemerkbar, wenn Sie aus `@material-ui/icons` importieren. Die Startzeiten können ungefähr 6-mal langsamer sein als ohne benannte Importe von der API der obersten Ebene.
+⚠️ Beachten Sie, dass das Tree-Shacking eine Optimierung darstellt, die normalerweise nicht in der Entwicklungsumgebung angewendet wird. Development bundles will contain the full library which can lead to **slower startup times**. Dies macht sich insbesondere dann bemerkbar, wenn Sie aus `@material-ui/icons` importieren. Die Startzeiten können ungefähr 6-mal langsamer sein als ohne benannte Importe von der API der obersten Ebene.
If this is an issue for you, you have various options:
@@ -29,61 +29,97 @@ import { Button, TextField } from '@material-ui/core';
verwende:
```js
+// 🚀 Fast
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```
+This is the option we document in **all** the demos because it requires no configuration. We encourage it for library authors extending our components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
+
Beim direkten Importieren auf diese Weise werden die Exporte in [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js) nicht verwendet. Diese Datei kann trotzdem als praktische Referenz für die öffentlichen Module dienen.
Be aware that we only support first and second level imports. Alles drunter wird als privat betrachtet und kann zu einer Duplizierung des Moduls in Ihrem Bundle führen.
```js
-// OK
+// ✅ OK
import { Add as AddIcon } from '@material-ui/icons';
import { Tabs } from '@material-ui/core';
-// ^^^^ 1. oder Top-Level
+// ^^^^ 1st or top-level
-// OK
+// ✅ OK
import AddIcon from '@material-ui/icons/Add';
import Tabs from '@material-ui/core/Tabs';
-// ^^^^ 2. Level
+// ^^^^ 2nd level
-// NICHT OK
+// ❌ NOT OK
import TabIndicator from '@material-ui/core/Tabs/TabIndicator';
-// ^^^^^^^^^^^^ 3. Level
+// ^^^^^^^^^^^^ 3rd level
```
### Option 2
-**Wichtiger Hinweis**: Dies wird nur für `@material-ui/icons` unterstützt. Wir empfehlen diesen Ansatz, wenn Sie Ihren Entwicklungsbuild häufig neu starten.
+This option provides the best DX and UX. However, you need to apply the following steps correctly.
-Eine weitere Option ist benannte Import zu benutzen, aber immer noch kurze Startzeiten zu erhalten, indem Sie `babel` Plugins benutzen.
+#### 1. Configure Babel
Wählen Sie eines der folgenden Plugins:
-- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) mit folgender Konfiguration:
- js
- [
- 'babel-plugin-import',
- {
- libraryName: '@material-ui/icons',
- libraryDirectory: 'esm', // order falls dein Bundler keine ES Module unterstützt
- camel2DashComponentName: false,
- },
- ];
-
-- [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-import) hat eine andere Api als `babel-plugin-import` aber macht das gleiche.
- js
- [
- 'transform-imports',
- {
- '@material-ui/icons': {
- transform: '@material-ui/icons/esm/${member}',
- / Für Bundler, die keine ES-Module unterstützen, verwenden Sie:
- // transform: '@material-ui/icons/${member}',
- },
- },
- ];
+- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) with the following configuration:
+
+```js
+ plugins: [
+ [
+ 'babel-plugin-import',
+ {
+ libraryName: '@material-ui/core',
+ libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
+ camel2DashComponentName: false,
+ },
+ 'core',
+ ],
+ [
+ 'babel-plugin-import',
+ {
+ libraryName: '@material-ui/icons',
+ libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
+ camel2DashComponentName: false,
+ },
+ 'icons',
+ ],
+ ],
+ ```
+- [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports) with the following configuration:
+
+ ```js
+ plugins: [
+ 'babel-plugin-transform-imports',
+ {
+ '@material-ui/core': {
+ transform: '@material-ui/core/esm/${member}',
+ // for bundlers not supporting ES modules use:
+ // transform: '@material-ui/core/${member}',
+ preventFullImport: true,
+ },
+ '@material-ui/icons': {
+ transform: '@material-ui/icons/esm/${member}',
+ // for bundlers not supporting ES modules use:
+ // transform: '@material-ui/icons/${member}',
+ preventFullImport: true,
+ },
+ },
+ ],
+ ```
+
+#### 2. Convert all your imports
+
+Finally, you can convert your exisiting codebase to this option with our [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
+It will perform the following diffs:
+
+```diff
+-import Button from '@material-ui/core/Button';
+-import TextField from '@material-ui/core/TextField';
++import { Button, TextField } from '@material-ui/core';
+```
## ECMAScript
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-es.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-es.md
index 2fbfb9497ec2de..061d52e2f69285 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-es.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-es.md
@@ -4,17 +4,17 @@
## Bundle size matters
-The bundle size of Material-UI is taken very seriously. We take size snapshots on every commit for every package and critical parts of those packages ([view latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
+The bundle size of Material-UI is taken very seriously. We take size snapshots on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
## How to reduce the bundle size?
-For convenience, Material-UI exposes its full API on the top-level `material-ui` import. If you're using ES 6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and expect only a minimal set of Material-UI components in your bundle:
+For convenience, Material-UI exposes its full API on the top-level `material-ui` import. If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and expect only a minimal set of Material-UI components in your bundle:
```js
import { Button, TextField } from '@material-ui/core';
```
-Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to slower startup times. This is especially noticeable if you import from `@material-ui/icons`. Startup times can be approximately 6x slower than without named imports from the top-level API.
+⚠️ Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to **slower startup times**. This is especially noticeable if you import from `@material-ui/icons`. Startup times can be approximately 6x slower than without named imports from the top-level API.
If this is an issue for you, you have various options:
@@ -29,61 +29,97 @@ import { Button, TextField } from '@material-ui/core';
use:
```js
+// 🚀 Fast
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```
+This is the option we document in **all** the demos because it requires no configuration. We encourage it for library authors extending our components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
+
While importing directly in this manner doesn't use the exports in [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js), this file can serve as a handy reference as to which modules are public.
Be aware that we only support first and second level imports. Anything below is considered private and can cause module duplication in your bundle.
```js
-// OK
+// ✅ OK
import { Add as AddIcon } from '@material-ui/icons';
import { Tabs } from '@material-ui/core';
// ^^^^ 1st or top-level
-// OK
+// ✅ OK
import AddIcon from '@material-ui/icons/Add';
import Tabs from '@material-ui/core/Tabs';
// ^^^^ 2nd level
-// NOT OK
+// ❌ NOT OK
import TabIndicator from '@material-ui/core/Tabs/TabIndicator';
// ^^^^^^^^^^^^ 3rd level
```
### Option 2
-**Important note**: This is only supported for `@material-ui/icons`. We recommend this approach if you often restart your development build.
+This option provides the best DX and UX. However, you need to apply the following steps correctly.
-Another option is to keep using named imports, but still have shorter start up times by using `babel` plugins.
+#### 1. Configure Babel
Pick one of the following plugins:
-- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) with the following configuration:
- js
- [
- 'babel-plugin-import',
- {
- libraryName: '@material-ui/icons',
- libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
- camel2DashComponentName: false,
- },
- ];
-
-- [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-import) has a different api than `babel-plugin-import` but does same thing.
- js
- [
- 'transform-imports',
- {
- '@material-ui/icons': {
- transform: '@material-ui/icons/esm/${member}',
- // for bundlers not supporting ES modules use:
- // transform: '@material-ui/icons/${member}',
- },
- },
- ];
+- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) with the following configuration:
+
+```js
+ plugins: [
+ [
+ 'babel-plugin-import',
+ {
+ libraryName: '@material-ui/core',
+ libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
+ camel2DashComponentName: false,
+ },
+ 'core',
+ ],
+ [
+ 'babel-plugin-import',
+ {
+ libraryName: '@material-ui/icons',
+ libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
+ camel2DashComponentName: false,
+ },
+ 'icons',
+ ],
+ ],
+ ```
+- [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports) with the following configuration:
+
+ ```js
+ plugins: [
+ 'babel-plugin-transform-imports',
+ {
+ '@material-ui/core': {
+ transform: '@material-ui/core/esm/${member}',
+ // for bundlers not supporting ES modules use:
+ // transform: '@material-ui/core/${member}',
+ preventFullImport: true,
+ },
+ '@material-ui/icons': {
+ transform: '@material-ui/icons/esm/${member}',
+ // for bundlers not supporting ES modules use:
+ // transform: '@material-ui/icons/${member}',
+ preventFullImport: true,
+ },
+ },
+ ],
+ ```
+
+#### 2. Convert all your imports
+
+Finally, you can convert your exisiting codebase to this option with our [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
+It will perform the following diffs:
+
+```diff
+-import Button from '@material-ui/core/Button';
+-import TextField from '@material-ui/core/TextField';
++import { Button, TextField } from '@material-ui/core';
+```
## ECMAScript
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-fr.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-fr.md
index e1843341f1ed82..fc34b453f327ee 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-fr.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-fr.md
@@ -4,17 +4,17 @@
## La taille du bundle compte
-The bundle size of Material-UI is taken very seriously. We take size snapshots on every commit for every package and critical parts of those packages ([view latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
+The bundle size of Material-UI is taken very seriously. We take size snapshots on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
## Comment réduire la taille du bundle?
-For convenience, Material-UI exposes its full API on the top-level `material-ui` import. If you're using ES 6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and expect only a minimal set of Material-UI components in your bundle:
+For convenience, Material-UI exposes its full API on the top-level `material-ui` import. If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and expect only a minimal set of Material-UI components in your bundle:
```js
import { Button, TextField } from '@material-ui/core';
```
-Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to slower startup times. This is especially noticeable if you import from `@material-ui/icons`. Startup times can be approximately 6x slower than without named imports from the top-level API.
+⚠️ Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to **slower startup times**. This is especially noticeable if you import from `@material-ui/icons`. Startup times can be approximately 6x slower than without named imports from the top-level API.
If this is an issue for you, you have various options:
@@ -29,61 +29,97 @@ import { Button, TextField } from '@material-ui/core';
use:
```js
+// 🚀 Fast
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```
+This is the option we document in **all** the demos because it requires no configuration. We encourage it for library authors extending our components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
+
While importing directly in this manner doesn't use the exports in [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js), this file can serve as a handy reference as to which modules are public.
Be aware that we only support first and second level imports. Anything below is considered private and can cause module duplication in your bundle.
```js
-// OK
+// ✅ OK
import { Add as AddIcon } from '@material-ui/icons';
import { Tabs } from '@material-ui/core';
// ^^^^ 1st or top-level
-// OK
+// ✅ OK
import AddIcon from '@material-ui/icons/Add';
import Tabs from '@material-ui/core/Tabs';
// ^^^^ 2nd level
-// NOT OK
+// ❌ NOT OK
import TabIndicator from '@material-ui/core/Tabs/TabIndicator';
// ^^^^^^^^^^^^ 3rd level
```
### Option 2
-**Important note**: This is only supported for `@material-ui/icons`. We recommend this approach if you often restart your development build.
+This option provides the best DX and UX. However, you need to apply the following steps correctly.
-Another option is to keep using named imports, but still have shorter start up times by using `babel` plugins.
+#### 1. Configure Babel
Pick one of the following plugins:
-- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) with the following configuration:
- js
- [
- 'babel-plugin-import',
- {
- libraryName: '@material-ui/icons',
- libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
- camel2DashComponentName: false,
- },
- ];
-
-- [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-import) has a different api than `babel-plugin-import` but does same thing.
- js
- [
- 'transform-imports',
- {
- '@material-ui/icons': {
- transform: '@material-ui/icons/esm/${member}',
- // for bundlers not supporting ES modules use:
- // transform: '@material-ui/icons/${member}',
- },
- },
- ];
+- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) with the following configuration:
+
+```js
+ plugins: [
+ [
+ 'babel-plugin-import',
+ {
+ libraryName: '@material-ui/core',
+ libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
+ camel2DashComponentName: false,
+ },
+ 'core',
+ ],
+ [
+ 'babel-plugin-import',
+ {
+ libraryName: '@material-ui/icons',
+ libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
+ camel2DashComponentName: false,
+ },
+ 'icons',
+ ],
+ ],
+ ```
+- [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports) with the following configuration:
+
+ ```js
+ plugins: [
+ 'babel-plugin-transform-imports',
+ {
+ '@material-ui/core': {
+ transform: '@material-ui/core/esm/${member}',
+ // for bundlers not supporting ES modules use:
+ // transform: '@material-ui/core/${member}',
+ preventFullImport: true,
+ },
+ '@material-ui/icons': {
+ transform: '@material-ui/icons/esm/${member}',
+ // for bundlers not supporting ES modules use:
+ // transform: '@material-ui/icons/${member}',
+ preventFullImport: true,
+ },
+ },
+ ],
+ ```
+
+#### 2. Convert all your imports
+
+Finally, you can convert your exisiting codebase to this option with our [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
+It will perform the following diffs:
+
+```diff
+-import Button from '@material-ui/core/Button';
+-import TextField from '@material-ui/core/TextField';
++import { Button, TextField } from '@material-ui/core';
+```
## ECMAScript
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ja.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ja.md
index 5eebc1410c8524..640d6b86a637cc 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ja.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ja.md
@@ -4,17 +4,17 @@
## Bundle size matters
-The bundle size of Material-UI is taken very seriously. We take size snapshots on every commit for every package and critical parts of those packages ([view latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
+The bundle size of Material-UI is taken very seriously. We take size snapshots on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
## How to reduce the bundle size?
-For convenience, Material-UI exposes its full API on the top-level `material-ui` import. If you're using ES 6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and expect only a minimal set of Material-UI components in your bundle:
+For convenience, Material-UI exposes its full API on the top-level `material-ui` import. If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and expect only a minimal set of Material-UI components in your bundle:
```js
import { Button, TextField } from '@material-ui/core';
```
-Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to slower startup times. This is especially noticeable if you import from `@material-ui/icons`. Startup times can be approximately 6x slower than without named imports from the top-level API.
+⚠️ Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to **slower startup times**. This is especially noticeable if you import from `@material-ui/icons`. Startup times can be approximately 6x slower than without named imports from the top-level API.
If this is an issue for you, you have various options:
@@ -29,61 +29,97 @@ import { Button, TextField } from '@material-ui/core';
use:
```js
+// 🚀 Fast
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```
+This is the option we document in **all** the demos because it requires no configuration. We encourage it for library authors extending our components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
+
While importing directly in this manner doesn't use the exports in [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js), this file can serve as a handy reference as to which modules are public.
Be aware that we only support first and second level imports. Anything below is considered private and can cause module duplication in your bundle.
```js
-// OK
+// ✅ OK
import { Add as AddIcon } from '@material-ui/icons';
import { Tabs } from '@material-ui/core';
// ^^^^ 1st or top-level
-// OK
+// ✅ OK
import AddIcon from '@material-ui/icons/Add';
import Tabs from '@material-ui/core/Tabs';
// ^^^^ 2nd level
-// NOT OK
+// ❌ NOT OK
import TabIndicator from '@material-ui/core/Tabs/TabIndicator';
// ^^^^^^^^^^^^ 3rd level
```
### Option 2
-**Important note**: This is only supported for `@material-ui/icons`. We recommend this approach if you often restart your development build.
+This option provides the best DX and UX. However, you need to apply the following steps correctly.
-Another option is to keep using named imports, but still have shorter start up times by using `babel` plugins.
+#### 1. Configure Babel
Pick one of the following plugins:
-- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) with the following configuration:
- js
- [
- 'babel-plugin-import',
- {
- libraryName: '@material-ui/icons',
- libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
- camel2DashComponentName: false,
- },
- ];
-
-- [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-import) has a different api than `babel-plugin-import` but does same thing.
- js
- [
- 'transform-imports',
- {
- '@material-ui/icons': {
- transform: '@material-ui/icons/esm/${member}',
- // for bundlers not supporting ES modules use:
- // transform: '@material-ui/icons/${member}',
- },
- },
- ];
+- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) with the following configuration:
+
+```js
+ plugins: [
+ [
+ 'babel-plugin-import',
+ {
+ libraryName: '@material-ui/core',
+ libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
+ camel2DashComponentName: false,
+ },
+ 'core',
+ ],
+ [
+ 'babel-plugin-import',
+ {
+ libraryName: '@material-ui/icons',
+ libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
+ camel2DashComponentName: false,
+ },
+ 'icons',
+ ],
+ ],
+ ```
+- [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports) with the following configuration:
+
+ ```js
+ plugins: [
+ 'babel-plugin-transform-imports',
+ {
+ '@material-ui/core': {
+ transform: '@material-ui/core/esm/${member}',
+ // for bundlers not supporting ES modules use:
+ // transform: '@material-ui/core/${member}',
+ preventFullImport: true,
+ },
+ '@material-ui/icons': {
+ transform: '@material-ui/icons/esm/${member}',
+ // for bundlers not supporting ES modules use:
+ // transform: '@material-ui/icons/${member}',
+ preventFullImport: true,
+ },
+ },
+ ],
+ ```
+
+#### 2. Convert all your imports
+
+Finally, you can convert your exisiting codebase to this option with our [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
+It will perform the following diffs:
+
+```diff
+-import Button from '@material-ui/core/Button';
+-import TextField from '@material-ui/core/TextField';
++import { Button, TextField } from '@material-ui/core';
+```
## ECMAScript
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md
index d4442da9f100bd..32b94916d477e3 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-pt.md
@@ -4,17 +4,17 @@
## Tamanho do pacote importa
-O tamanho do pacote de Material-UI é levado muito a sério. Tiramos snapshots de tamanho em cada commit, para cada pacote e partes críticas desses pacotes ([veja o último snapshot](/size-snapshot)). Combinado com [dangerJS](https://danger.systems/js/) podemos inspecionar [alterações detalhadas no tamanho do pacote](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) em cada solicitação de Pull Request.
+O tamanho do pacote de Material-UI é levado muito a sério. We take size snapshots on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combinado com [dangerJS](https://danger.systems/js/) podemos inspecionar [alterações detalhadas no tamanho do pacote](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) em cada solicitação de Pull Request.
## Como reduzir o tamanho do pacote?
-Por conveniência, o Material-UI expõe sua API completa em nível superior na importação de `material-ui`. Se você estiver usando módulos ES 6 e um empacotador que suporte [tree-shaking](https://pt.stackoverflow.com/a/317844) ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` com a opção](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)), você pode seguramente usar importações nomeadas e ter apenas um conjunto mínimo de componentes do Material-UI em seu pacote:
+Por conveniência, o Material-UI expõe sua API completa em nível superior na importação de `material-ui`. If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and expect only a minimal set of Material-UI components in your bundle:
```js
import { Button, TextField } from '@material-ui/core';
```
-Esteja ciente que tree-shaking é uma otimização, que geralmente é aplicada somente aos pacotes de produção. Pacotes de desenvolvimento irá conter a biblioteca completa, que pode levar tempos de inicialização mais lentos. Isso é especialmente perceptível se você importar de `@material-ui/icons`. Os tempos de inicialização podem ser aproximadamente 6 vezes mais lentos do que sem utilizar importações nomeadas da API de nível superior.
+⚠️ Esteja ciente que tree-shaking é uma otimização, que geralmente é aplicada somente aos pacotes de produção. Development bundles will contain the full library which can lead to **slower startup times**. Isso é especialmente perceptível se você importar de `@material-ui/icons`. Os tempos de inicialização podem ser aproximadamente 6 vezes mais lentos do que sem utilizar importações nomeadas da API de nível superior.
Se isso é um problema para você, você tem várias opções:
@@ -29,61 +29,97 @@ import { Button, TextField } from '@material-ui/core';
use:
```js
+// 🚀 Fast
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```
+This is the option we document in **all** the demos because it requires no configuration. We encourage it for library authors extending our components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
+
Ao importar diretamente dessa maneira, não utiliza as exportações em [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js), esse arquivo pode servir como uma referência útil para quais módulos são públicos.
Esteja ciente de que apenas damos suporte para as importações de primeiro e segundo nível. Qualquer coisa abaixo do segundo nível, é considerada privada e pode causar duplicação de módulo no seu pacote.
```js
-// OK
+// ✅ OK
import { Add as AddIcon } from '@material-ui/icons';
import { Tabs } from '@material-ui/core';
-// ^^^^ 1º ou nível superior
+// ^^^^ 1st or top-level
-// OK
+// ✅ OK
import AddIcon from '@material-ui/icons/Add';
import Tabs from '@material-ui/core/Tabs';
-// ^^^^ 2º nível
+// ^^^^ 2nd level
-// NÃO OK
+// ❌ NOT OK
import TabIndicator from '@material-ui/core/Tabs/TabIndicator';
-// ^^^^^^^^^^^^ 3º nível
+// ^^^^^^^^^^^^ 3rd level
```
### Opção 2
-**Nota importante**: Isso é suportado apenas por `@material-ui/icons`. Recomendamos essa abordagem se você frequentemente reiniciar sua compilação de desenvolvimento.
+This option provides the best DX and UX. However, you need to apply the following steps correctly.
-Outra opção é continuar usando importações nomeadas, podemos então melhorar o tempo de inicialização usando plugins `babel`.
+#### 1. Configure Babel
Escolha um dos seguintes plugins:
-- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) com a seguinte configuração:
- js
- [
- 'babel-plugin-import',
- {
- libraryName: '@material-ui/icons',
- libraryDirectory: 'esm', // ou '' se o seu empacotador não suportar módulos ES
- camel2DashComponentName: false,
- },
- ];
-
-- [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-import) tem uma api diferente de `babel-plugin-import`, mas faz a mesma coisa.
- js
- [
- 'transform-imports',
- {
- '@material-ui/icons': {
- transform: '@material-ui/icons/esm/${member}',
- // para empacotador que não suporta módulos ES:
- // transform: '@material-ui/icons/${member}',
- },
- },
- ];
+- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) com a seguinte configuração:
+
+```js
+ plugins: [
+ [
+ 'babel-plugin-import',
+ {
+ libraryName: '@material-ui/core',
+ libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
+ camel2DashComponentName: false,
+ },
+ 'core',
+ ],
+ [
+ 'babel-plugin-import',
+ {
+ libraryName: '@material-ui/icons',
+ libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
+ camel2DashComponentName: false,
+ },
+ 'icons',
+ ],
+ ],
+ ```
+- [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports) with the following configuration:
+
+ ```js
+ plugins: [
+ 'babel-plugin-transform-imports',
+ {
+ '@material-ui/core': {
+ transform: '@material-ui/core/esm/${member}',
+ // for bundlers not supporting ES modules use:
+ // transform: '@material-ui/core/${member}',
+ preventFullImport: true,
+ },
+ '@material-ui/icons': {
+ transform: '@material-ui/icons/esm/${member}',
+ // for bundlers not supporting ES modules use:
+ // transform: '@material-ui/icons/${member}',
+ preventFullImport: true,
+ },
+ },
+ ],
+ ```
+
+#### 2. Convert all your imports
+
+Finally, you can convert your exisiting codebase to this option with our [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
+It will perform the following diffs:
+
+```diff
+-import Button from '@material-ui/core/Button';
+-import TextField from '@material-ui/core/TextField';
++import { Button, TextField } from '@material-ui/core';
+```
## ECMAScript
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ru.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ru.md
index 5e1bda3c62441c..11e6d2d4507049 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ru.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ru.md
@@ -4,17 +4,17 @@
## Bundle size matters
-Размер пакета Material-UI достаточно внушителен. We take size snapshots on every commit for every package and critical parts of those packages ([view latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
+Размер пакета Material-UI достаточно внушителен. We take size snapshots on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). Combined with [dangerJS](https://danger.systems/js/) we can inspect [detailed bundle size changes](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) on every Pull Request.
## How to reduce the bundle size?
-For convenience, Material-UI exposes its full API on the top-level `material-ui` import. If you're using ES 6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and expect only a minimal set of Material-UI components in your bundle:
+For convenience, Material-UI exposes its full API on the top-level `material-ui` import. If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and expect only a minimal set of Material-UI components in your bundle:
```js
import { Button, TextField } from '@material-ui/core';
```
-Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to slower startup times. This is especially noticeable if you import from `@material-ui/icons`. Startup times can be approximately 6x slower than without named imports from the top-level API.
+⚠️ Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to **slower startup times**. This is especially noticeable if you import from `@material-ui/icons`. Startup times can be approximately 6x slower than without named imports from the top-level API.
If this is an issue for you, you have various options:
@@ -29,61 +29,97 @@ import { Button, TextField } from '@material-ui/core';
use:
```js
+// 🚀 Fast
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```
+This is the option we document in **all** the demos because it requires no configuration. We encourage it for library authors extending our components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
+
While importing directly in this manner doesn't use the exports in [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js), this file can serve as a handy reference as to which modules are public.
Be aware that we only support first and second level imports. Anything below is considered private and can cause module duplication in your bundle.
```js
-// OK
+// ✅ OK
import { Add as AddIcon } from '@material-ui/icons';
import { Tabs } from '@material-ui/core';
// ^^^^ 1st or top-level
-// OK
+// ✅ OK
import AddIcon from '@material-ui/icons/Add';
import Tabs from '@material-ui/core/Tabs';
// ^^^^ 2nd level
-// NOT OK
+// ❌ NOT OK
import TabIndicator from '@material-ui/core/Tabs/TabIndicator';
// ^^^^^^^^^^^^ 3rd level
```
### Option 2
-**Important note**: This is only supported for `@material-ui/icons`. We recommend this approach if you often restart your development build.
+This option provides the best DX and UX. However, you need to apply the following steps correctly.
-Another option is to keep using named imports, but still have shorter start up times by using `babel` plugins.
+#### 1. Configure Babel
Pick one of the following plugins:
-- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) with the following configuration:
- js
- [
- 'babel-plugin-import',
- {
- libraryName: '@material-ui/icons',
- libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
- camel2DashComponentName: false,
- },
- ];
-
-- [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-import) has a different api than `babel-plugin-import` but does same thing.
- js
- [
- 'transform-imports',
- {
- '@material-ui/icons': {
- transform: '@material-ui/icons/esm/${member}',
- // for bundlers not supporting ES modules use:
- // transform: '@material-ui/icons/${member}',
- },
- },
- ];
+- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) with the following configuration:
+
+```js
+ plugins: [
+ [
+ 'babel-plugin-import',
+ {
+ libraryName: '@material-ui/core',
+ libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
+ camel2DashComponentName: false,
+ },
+ 'core',
+ ],
+ [
+ 'babel-plugin-import',
+ {
+ libraryName: '@material-ui/icons',
+ libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
+ camel2DashComponentName: false,
+ },
+ 'icons',
+ ],
+ ],
+ ```
+- [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports) with the following configuration:
+
+ ```js
+ plugins: [
+ 'babel-plugin-transform-imports',
+ {
+ '@material-ui/core': {
+ transform: '@material-ui/core/esm/${member}',
+ // for bundlers not supporting ES modules use:
+ // transform: '@material-ui/core/${member}',
+ preventFullImport: true,
+ },
+ '@material-ui/icons': {
+ transform: '@material-ui/icons/esm/${member}',
+ // for bundlers not supporting ES modules use:
+ // transform: '@material-ui/icons/${member}',
+ preventFullImport: true,
+ },
+ },
+ ],
+ ```
+
+#### 2. Convert all your imports
+
+Finally, you can convert your exisiting codebase to this option with our [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
+It will perform the following diffs:
+
+```diff
+-import Button from '@material-ui/core/Button';
+-import TextField from '@material-ui/core/TextField';
++import { Button, TextField } from '@material-ui/core';
+```
## ECMAScript
diff --git a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md
index 2782c72294d8b4..38f48dc08b87db 100644
--- a/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md
+++ b/docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-zh.md
@@ -1,22 +1,22 @@
-# 最小化打包文件大小
+# Minimizing Bundle Size（最小化打包文件大小）
了解有关可用于减少打包文件大小的工具的详细信息。
## 打包文件的大小是很重要的
-Material-UI 的打包文件大小至关重要。 每次当我们有一个新的提交时，我们会为每个包以及那些包的至关重要的部分拍个快照（[查看最新的快照](/size-snapshot)）。 结合 [dangerJS](https://danger.systems/js/) 一起，我们可以在每个 Pull Request 中都可以查看[详细的打包文件的大小变化](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) 。
+Material-UI 的打包文件大小至关重要。 We take size snapshots on every commit for every package and critical parts of those packages ([view the latest snapshot](/size-snapshot)). 结合 [dangerJS](https://danger.systems/js/) 一起，我们可以在每个 Pull Request 中都可以查看[详细的打包文件的大小变化](https://github.com/mui-org/material-ui/pull/14638#issuecomment-466658459) 。
## 如何减少打包文件的体积？
-为方便起见，Material-UI 在顶级 `material-ui` 的 import 上暴露其完整 API。 如果您正在使用 ES 6 的模块，以及一个支持 tree-shaking 的 bundle（ 要求 [`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/)，[带有 flag 的 `parcel 打包`](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) ，那么您则可以安全的使用命名导入，并且在您的 bundle 文件里面，预期会产生一个的最小配置的 Material-UI 组件。
+为方便起见，Material-UI 在顶级 `material-ui` 的 import 上暴露其完整 API。 If you're using ES6 modules and a bundler that supports tree-shaking ([`webpack` >= 2.x](https://webpack.js.org/guides/tree-shaking/), [`parcel` with a flag](https://en.parceljs.org/cli.html#enable-experimental-scope-hoisting/tree-shaking-support)) you can safely use named imports and expect only a minimal set of Material-UI components in your bundle:
```js
import { Button, TextField } from '@material-ui/core';
```
-请注意 tree-shaking 通常只运用于生产环境的打包优化。 开发环境的打包则涵盖了完整的库，因此加载时间会比较慢。 在当您导入 `@material-ui/icons` 的时候，这个情况特别显著。 加载时间会大约比那些从顶层 API 的命名导入方式慢六倍。
+⚠️ Be aware that tree-shaking is an optimization that is usually only applied to production bundles. Development bundles will contain the full library which can lead to **slower startup times**. 在当您导入 `@material-ui/icons` 的时候，这个情况特别显著。 加载时间会大约比那些从顶层 API 的命名导入方式慢六倍。
-If this is an issue for you, you have various options:
+如果您觉得这样不妥，您还有以下几个选择：
### 选项1
@@ -29,66 +29,102 @@ import { Button, TextField } from '@material-ui/core';
可以使用：
```js
+// 🚀 Fast
import Button from '@material-ui/core/Button';
import TextField from '@material-ui/core/TextField';
```
+This is the option we document in **all** the demos because it requires no configuration. We encourage it for library authors extending our components. Head to [Option 2](#option-2) for the approach that yields the best DX and UX.
+
尽管这样直接导入并不会使用 [`@material-ui/core/index.js`](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/index.js) 中的导出模式，但是对于那些公开的模块来说，此文件仍可以作为一个方便的参考。
-Be aware that we only support first and second level imports. 以下的这些例子是私有的，它们会给你的打包文件带来重复的模块。
+请注意，我们只支持第一级和第二级的导入。 以下的这些例子是私有的，它们会给你的打包文件带来重复的模块。
```js
-// 可以
+// ✅ OK
import { Add as AddIcon } from '@material-ui/icons';
import { Tabs } from '@material-ui/core';
-// ^^^^ 第一级或者顶层
+// ^^^^ 1st or top-level
-// 可以
+// ✅ OK
import AddIcon from '@material-ui/icons/Add';
import Tabs from '@material-ui/core/Tabs';
-// ^^^^ 第二级
+// ^^^^ 2nd level
-// 不可以
+// ❌ NOT OK
import TabIndicator from '@material-ui/core/Tabs/TabIndicator';
-// ^^^^^^^^^^^^ 第三极
+// ^^^^^^^^^^^^ 3rd level
```
### 选项2
-**重要提示**：此方法只支持 `@material-ui/icons`。 若您经常重新启动您的开发构建，我们推荐你使用此方法。
+This option provides the best DX and UX. However, you need to apply the following steps correctly.
-另一个选项则是继续使用命名导入，但是通过 `babel` 的插件，仍然可以缩短启动时间。
+#### 1。 Configure Babel
请在以下插件中选择一个：
-- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) 基于以下配置：
- js
- [
- 'babel-plugin-import',
- {
- libraryName: '@material-ui/icons',
- libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
- camel2DashComponentName: false,
- },
- ];
-
-- [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-import) 和 ` babel-plugin-import `的 api 是异曲同工的。
- js
- [
- 'transform-imports',
- {
- '@material-ui/icons': {
- transform: '@material-ui/icons/esm/${member}',
- // for bundlers not supporting ES modules use:
- // transform: '@material-ui/icons/${member}',
- },
- },
- ];
+- [babel-plugin-import](https://github.com/ant-design/babel-plugin-import) with the following configuration:
+
+```js
+ plugins: [
+ [
+ 'babel-plugin-import',
+ {
+ libraryName: '@material-ui/core',
+ libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
+ camel2DashComponentName: false,
+ },
+ 'core',
+ ],
+ [
+ 'babel-plugin-import',
+ {
+ libraryName: '@material-ui/icons',
+ libraryDirectory: 'esm', // or '' if your bundler does not support ES modules
+ camel2DashComponentName: false,
+ },
+ 'icons',
+ ],
+ ],
+ ```
+- [babel-plugin-transform-imports](https://www.npmjs.com/package/babel-plugin-transform-imports) with the following configuration:
+
+ ```js
+ plugins: [
+ 'babel-plugin-transform-imports',
+ {
+ '@material-ui/core': {
+ transform: '@material-ui/core/esm/${member}',
+ // for bundlers not supporting ES modules use:
+ // transform: '@material-ui/core/${member}',
+ preventFullImport: true,
+ },
+ '@material-ui/icons': {
+ transform: '@material-ui/icons/esm/${member}',
+ // for bundlers not supporting ES modules use:
+ // transform: '@material-ui/icons/${member}',
+ preventFullImport: true,
+ },
+ },
+ ],
+ ```
+
+#### 2. Convert all your imports
+
+Finally, you can convert your exisiting codebase to this option with our [top-level-imports](https://github.com/mui-org/material-ui/blob/master/packages/material-ui-codemod/README.md#top-level-imports) codemod.
+It will perform the following diffs:
+
+```diff
+-import Button from '@material-ui/core/Button';
+-import TextField from '@material-ui/core/TextField';
++import { Button, TextField } from '@material-ui/core';
+```
## ECMAScript
考虑到一些[支持的平台](/getting-started/supported-platforms/)，在 npm 上发布的包是和 [Babel](https://github.com/babel/babel) 一起被**编译**的。
-我们同时也发布了这些组件的第二种版本。 您可以在< [`/es` folder](https://unpkg.com/@material-ui/core/es/)下找到此版本 。 所有非官方的语义都被编译成[ECMA-262 的标准](https://www.ecma-international.org/publications/standards/Ecma-262.htm)，仅此而已。 这样一来，针对不同的浏览器，您可以编译出不同的打包文件。 一些旧的浏览器需编译一些 JavaScript 的功能，这样会增加打包文件的大小。 ES2015 运行的时候的功能中不包含垫片。 IE11+ 和一些长青浏览器会支持所有必要的功能。 如果您需要支持其他浏览器，请考虑使用 [`@ babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill)。
+我们同时也发布了这些组件的第二种版本。 您可以在 [`/es` 文件夹](https://unpkg.com/@material-ui/core/es/)下找到此版本。 所有非官方的语义都被编译成[ECMA-262 的标准](https://www.ecma-international.org/publications/standards/Ecma-262.htm)，仅此而已。 这样一来，针对不同的浏览器，您可以编译出不同的打包文件。 一些旧的浏览器需编译一些 JavaScript 的功能，这样会增加打包文件的大小。 ES2015 运行的时候的功能中不包含垫片。 IE11+ 和一些长青浏览器会支持所有必要的功能。 如果您需要支持其他浏览器，请考虑使用 [`@ babel/polyfill`](https://www.npmjs.com/package/@babel/polyfill)。
⚠️为了使得用户打包文件中的重复代码最小化，我们**强烈阻止**库的作者使用`/es` 文件夹。
\ No newline at end of file
diff --git a/docs/src/pages/guides/responsive-ui/responsive-ui-zh.md b/docs/src/pages/guides/responsive-ui/responsive-ui-zh.md
index 9df43b23c7d605..b173ba23964938 100644
--- a/docs/src/pages/guides/responsive-ui/responsive-ui-zh.md
+++ b/docs/src/pages/guides/responsive-ui/responsive-ui-zh.md
@@ -1,4 +1,4 @@
-# 响应式 UI
+# 响应式UI
Material Design 布局鼓励通过使用统一的元素和间距来实现跨平台、跨环境、不同屏幕尺寸下的一致性。
diff --git a/docs/src/pages/guides/right-to-left/right-to-left-ja.md b/docs/src/pages/guides/right-to-left/right-to-left-ja.md
index df33510e56215b..7485b20c0283fe 100644
--- a/docs/src/pages/guides/right-to-left/right-to-left-ja.md
+++ b/docs/src/pages/guides/right-to-left/right-to-left-ja.md
@@ -1,4 +1,4 @@
-# Right-to-left
+# 右から左
To change the direction of Material-UI components you must follow the following steps. UIs for languages that are read from right-to-left (RTL), such as Arabic and Hebrew, should be mirrored.
@@ -12,7 +12,7 @@ Make sure the `dir` attribute is set on the body, otherwise native components wi
```
-### 2. Theme
+### 2. テーマ
Set the direction in your custom theme:
diff --git a/docs/src/pages/guides/testing/testing-de.md b/docs/src/pages/guides/testing/testing-de.md
index a18b7477109733..67e7db4ed22c3e 100644
--- a/docs/src/pages/guides/testing/testing-de.md
+++ b/docs/src/pages/guides/testing/testing-de.md
@@ -38,11 +38,11 @@ Die `createRender()` Funktion ist dafür ideal. Dies ist nur ein Alias für die
Generieren Sie eine erweiterte Mount-Funktion mit dem erforderlichen Kontext. Bitte beachten Sie die [Enzyme API-Dokumentation](https://airbnb.io/enzyme/docs/api/mount.html) für weitere Informationen zur `mount` Funktion.
-#### Argumente
+#### Parameter
-1. `Optionen` (*Object* [optional])
- - `options.mount` (*Function* [optional]): Die Mount-Funktion, die verbessert werden soll, verwendet **standardmäßig Enzym**.
- - Die anderen Schlüssel werden an das Optionsargument von `enzyme.mount()` weitergeleitet.
+1. `options` (*Object* [optional])
+ - `options.mount` (*Function* [optional]): Die Mount-Funktion, die verbessert werden soll, verwendet **standardmäßig Enzym**.
+ - Die anderen Schlüssel werden an das Optionsargument von `enzyme.mount()` weitergeleitet.
#### Rückgabewerte
@@ -85,11 +85,11 @@ Generieren Sie eine erweiterte Shallow-Funktion mit dem erforderlichen Kontext.
#### Argumente
-1. `Optionen` (*Object* [optional])
- - `options.shallow` (*Function* [optional]): Die Shallow-Funktion, die verbessert werden soll, verwendet **standardmäßig Enzym**.
- - `options.untilSelector` (*String* [optional]): Rendert rekursiv die Kinder flach, so lange, bis sie den bereitgestellten Selektor finden können. Es ist hilfreich, Komponenten höherer Ordnung aufzuschlüsseln.
- - `options.dive` (*Boolean* [optional]): Rendert funktional flach das erste nicht-DOM-Child des aktuellen Wrappers und gibt einen Wrapper zurück.
- - Die anderen Schlüssel werden an das Optionsargument von `enzyme.shallow()` weitergeleitet.
+1. `options` (*Object* [optional])
+ - `options.shallow` (*Function* [optional]): Die Shallow-Funktion, die verbessert werden soll, verwendet **standardmäßig Enzym**.
+ - `options.untilSelector` (*String* [optional]): Rendert rekursiv die Kinder flach, so lange, bis sie den bereitgestellten Selektor finden können. Es ist hilfreich, Komponenten höherer Ordnung aufzuschlüsseln.
+ - `options.dive` (*Boolean* [optional]): Rendert funktional flach das erste nicht-DOM-Child des aktuellen Wrappers und gibt einen Wrapper zurück.
+ - Die anderen Schlüssel werden an das Optionsargument von `enzyme.shallow()` weitergeleitet.
#### Rückgabewerte
@@ -119,9 +119,9 @@ Generieren Sie eine Render-zu-String-Funktion mit dem erforderlichen Kontext. Bi
#### Argumente
-1. `Optionen` (*Object* [optional])
- - `options.render` (*Function* [optional]): Die Renderfunktion, die verbessert werden soll, verwendet **standardmäßig Enzym**.
- - Die anderen Schlüssel werden an das Optionsargument von `enzyme.render()` weitergeleitet.
+1. `options` (*Object* [optional])
+ - `options.render` (*Function* [optional]): Die Renderfunktion, die verbessert werden soll, verwendet **standardmäßig Enzym**.
+ - Die anderen Schlüssel werden an das Optionsargument von `enzyme.render()` weitergeleitet.
#### Rückgabewerte
diff --git a/docs/src/pages/guides/testing/testing-es.md b/docs/src/pages/guides/testing/testing-es.md
index a241bfe34d6e92..e1bfaf4627cb93 100644
--- a/docs/src/pages/guides/testing/testing-es.md
+++ b/docs/src/pages/guides/testing/testing-es.md
@@ -41,8 +41,8 @@ Generate an enhanced mount function with the needed context. Please refer to the
#### Argumentos
1. `options` (*Object* [optional])
- - `options.mount` (*Function* [optional]): The mount function to enhance, it uses **enzyme by default**.
- - The other keys are forwarded to the options argument of `enzyme.mount()`.
+ - `options.mount` (*Function* [optional]): The mount function to enhance, it uses **enzyme by default**.
+ - The other keys are forwarded to the options argument of `enzyme.mount()`.
#### Devuelve
@@ -86,10 +86,10 @@ Generate an enhanced shallow function with the needed context. Please refer to t
#### Argumentos
1. `options` (*Object* [optional])
- - `options.shallow` (*Function* [optional]): The shallow function to enhance, it uses **enzyme by default**.
- - `options.untilSelector` (*String* [optional]): Recursively shallow renders the children until it can find the provided selector. It's useful to drill down higher-order components.
- - `options.dive` (*Boolean* [optional]): Shallow function renders the one non-DOM child of the current wrapper, and returns a wrapper around the result.
- - The other keys are forwarded to the options argument of `enzyme.shallow()`.
+ - `options.shallow` (*Function* [optional]): The shallow function to enhance, it uses **enzyme by default**.
+ - `options.untilSelector` (*String* [optional]): Recursively shallow renders the children until it can find the provided selector. It's useful to drill down higher-order components.
+ - `options.dive` (*Boolean* [optional]): Shallow function renders the one non-DOM child of the current wrapper, and returns a wrapper around the result.
+ - The other keys are forwarded to the options argument of `enzyme.shallow()`.
#### Devuelve
@@ -120,8 +120,8 @@ Generate a render to string function with the needed context. Please refer to th
#### Argumentos
1. `options` (*Object* [optional])
- - `options.render` (*Function* [optional]): The render function to enhance, it uses **enzyme by default**.
- - The other keys are forwarded to the options argument of `enzyme.render()`.
+ - `options.render` (*Function* [optional]): The render function to enhance, it uses **enzyme by default**.
+ - The other keys are forwarded to the options argument of `enzyme.render()`.
#### Devuelve
diff --git a/docs/src/pages/guides/testing/testing-fr.md b/docs/src/pages/guides/testing/testing-fr.md
index fa739649cb3027..b75e0b18f60c9c 100644
--- a/docs/src/pages/guides/testing/testing-fr.md
+++ b/docs/src/pages/guides/testing/testing-fr.md
@@ -41,8 +41,8 @@ Generate an enhanced mount function with the needed context. Please refer to the
#### Paramètres
1. `options` (*Object* [optional])
- - `options.mount` (*Function* [optional]): The mount function to enhance, it uses **enzyme by default**.
- - The other keys are forwarded to the options argument of `enzyme.mount()`.
+ - `options.mount` (*Function* [optional]): The mount function to enhance, it uses **enzyme by default**.
+ - The other keys are forwarded to the options argument of `enzyme.mount()`.
#### Valeur de retour
@@ -86,10 +86,10 @@ Generate an enhanced shallow function with the needed context. Please refer to t
#### Paramètres
1. `options` (*Object* [optional])
- - `options.shallow` (*Function* [optional]): The shallow function to enhance, it uses **enzyme by default**.
- - `options.untilSelector` (*String* [optional]): Recursively shallow renders the children until it can find the provided selector. It's useful to drill down higher-order components.
- - `options.dive` (*Boolean* [optional]): Shallow function renders the one non-DOM child of the current wrapper, and returns a wrapper around the result.
- - The other keys are forwarded to the options argument of `enzyme.shallow()`.
+ - `options.shallow` (*Function* [optional]): The shallow function to enhance, it uses **enzyme by default**.
+ - `options.untilSelector` (*String* [optional]): Recursively shallow renders the children until it can find the provided selector. It's useful to drill down higher-order components.
+ - `options.dive` (*Boolean* [optional]): Shallow function renders the one non-DOM child of the current wrapper, and returns a wrapper around the result.
+ - The other keys are forwarded to the options argument of `enzyme.shallow()`.
#### Valeur de retour
@@ -120,8 +120,8 @@ Generate a render to string function with the needed context. Please refer to th
#### Paramètres
1. `options` (*Object* [optional])
- - `options.render` (*Function* [optional]): The render function to enhance, it uses **enzyme by default**.
- - The other keys are forwarded to the options argument of `enzyme.render()`.
+ - `options.render` (*Function* [optional]): The render function to enhance, it uses **enzyme by default**.
+ - The other keys are forwarded to the options argument of `enzyme.render()`.
#### Valeur de retour
diff --git a/docs/src/pages/guides/testing/testing-ja.md b/docs/src/pages/guides/testing/testing-ja.md
index 038193a0f734fd..b591bb764164e6 100644
--- a/docs/src/pages/guides/testing/testing-ja.md
+++ b/docs/src/pages/guides/testing/testing-ja.md
@@ -40,9 +40,9 @@ Generate an enhanced mount function with the needed context. Please refer to the
#### 引数
-1. `options` (*Object* [optional])
- - `options.mount` (*Function* [optional]): The mount function to enhance, it uses **enzyme by default**.
- - The other keys are forwarded to the options argument of `enzyme.mount()`.
+1. `オプション` (*オプジェクト* [任意])
+ - `options.mount` (*Function* [optional]): The mount function to enhance, it uses **enzyme by default**.
+ - The other keys are forwarded to the options argument of `enzyme.mount()`.
#### 戻り値
@@ -85,11 +85,11 @@ Generate an enhanced shallow function with the needed context. Please refer to t
#### 引数
-1. `options` (*Object* [optional])
- - `options.shallow` (*Function* [optional]): The shallow function to enhance, it uses **enzyme by default**.
- - `options.untilSelector` (*String* [optional]): Recursively shallow renders the children until it can find the provided selector. It's useful to drill down higher-order components.
- - `options.dive` (*Boolean* [optional]): Shallow function renders the one non-DOM child of the current wrapper, and returns a wrapper around the result.
- - The other keys are forwarded to the options argument of `enzyme.shallow()`.
+1. `オプション` (*オプジェクト* [任意])
+ - `options.shallow` (*Function* [optional]): The shallow function to enhance, it uses **enzyme by default**.
+ - `options.untilSelector` (*String* [optional]): Recursively shallow renders the children until it can find the provided selector. It's useful to drill down higher-order components.
+ - `options.dive` (*Boolean* [optional]): Shallow function renders the one non-DOM child of the current wrapper, and returns a wrapper around the result.
+ - The other keys are forwarded to the options argument of `enzyme.shallow()`.
#### 戻り値
@@ -119,9 +119,9 @@ Generate a render to string function with the needed context. Please refer to th
#### 引数
-1. `options` (*Object* [optional])
- - `options.render` (*Function* [optional]): The render function to enhance, it uses **enzyme by default**.
- - The other keys are forwarded to the options argument of `enzyme.render()`.
+1. `オプション` (*オプジェクト* [任意])
+ - `options.render` (*Function* [optional]): The render function to enhance, it uses **enzyme by default**.
+ - The other keys are forwarded to the options argument of `enzyme.render()`.
#### 戻り値
diff --git a/docs/src/pages/guides/testing/testing-pt.md b/docs/src/pages/guides/testing/testing-pt.md
index 2a6105665f4f50..f233d05c94f55e 100644
--- a/docs/src/pages/guides/testing/testing-pt.md
+++ b/docs/src/pages/guides/testing/testing-pt.md
@@ -41,8 +41,8 @@ Gere uma função de montagem aprimorada com o contexto necessário. Por favor,
#### Argumentos
1. `options` (*Object* [opcional])
- - `options.mount` (*Function* [opcional]): A função de montagem para melhorar, usa **enzyme por padrão**.
- - As outras chaves são encaminhadas para o argumento de opções de `enzyme.mount()`.
+ - `options.mount` (*Function* [opcional]): A função de montagem para melhorar, usa **enzyme por padrão**.
+ - As outras chaves são encaminhadas para o argumento de opções de `enzyme.mount()`.
#### Retornos
@@ -86,10 +86,10 @@ Gere uma função superficial aprimorada com o contexto necessário. Por favor,
#### Argumentos
1. `options` (*Object* [opcional])
- - `options.shallow` (*Function* [opcional]): A função superficial para melhorar, usa **enzyme por padrão**.
- - `options.untilSelector` (*String* [opcional]): Recursivamente, renderiza superficialmente o componente children até encontrar o seletor fornecido. É útil para detalhar os componentes de ordem mais alta.
- - `options.dive` (*Boolean* [opcional]): A função superficial renderiza o filho não-DOM do wrapper atual e retorna um wrapper em torno do resultado.
- - As outras chaves são encaminhadas para o argumento de opções de `enzyme.shallow()`.
+ - `options.shallow` (*Function* [opcional]): A função superficial para melhorar, usa **enzyme por padrão**.
+ - `options.untilSelector` (*String* [opcional]): Recursivamente, renderiza superficialmente o componente children até encontrar o seletor fornecido. É útil para detalhar os componentes de ordem mais alta.
+ - `options.dive` (*Boolean* [opcional]): A função superficial renderiza o filho não-DOM do wrapper atual e retorna um wrapper em torno do resultado.
+ - As outras chaves são encaminhadas para o argumento de opções de `enzyme.shallow()`.
#### Retornos
@@ -120,8 +120,8 @@ Gere uma função de render para string com o contexto necessário. Por favor, c
#### Argumentos
1. `options` (*Object* [opcional])
- - `options.render` (*Function* [opcional]): A função de renderização para melhorar, usa **enzyme por padrão**.
- - As outras chaves são encaminhadas para o argumento de opções de `enzyme.render()`.
+ - `options.render` (*Function* [opcional]): A função de renderização para melhorar, usa **enzyme por padrão**.
+ - As outras chaves são encaminhadas para o argumento de opções de `enzyme.render()`.
#### Retornos
diff --git a/docs/src/pages/guides/testing/testing-ru.md b/docs/src/pages/guides/testing/testing-ru.md
index 89cb6ab4321339..b00c2fcebf4a4a 100644
--- a/docs/src/pages/guides/testing/testing-ru.md
+++ b/docs/src/pages/guides/testing/testing-ru.md
@@ -41,8 +41,8 @@ Generate an enhanced mount function with the needed context. Please refer to the
#### Аргументы
1. `options` (*Object* [optional])
- - `options.mount` (*Function* [optional]): The mount function to enhance, it uses **enzyme by default**.
- - The other keys are forwarded to the options argument of `enzyme.mount()`.
+ - `options.mount` (*Function* [optional]): The mount function to enhance, it uses **enzyme by default**.
+ - The other keys are forwarded to the options argument of `enzyme.mount()`.
#### Возвращает
@@ -86,10 +86,10 @@ Generate an enhanced shallow function with the needed context. Please refer to t
#### Аргументы
1. `options` (*Object* [optional])
- - `options.shallow` (*Function* [optional]): The shallow function to enhance, it uses **enzyme by default**.
- - `options.untilSelector` (*String* [optional]): Recursively shallow renders the children until it can find the provided selector. It's useful to drill down higher-order components.
- - `options.dive` (*Boolean* [optional]): Shallow function renders the one non-DOM child of the current wrapper, and returns a wrapper around the result.
- - The other keys are forwarded to the options argument of `enzyme.shallow()`.
+ - `options.shallow` (*Function* [optional]): The shallow function to enhance, it uses **enzyme by default**.
+ - `options.untilSelector` (*String* [optional]): Recursively shallow renders the children until it can find the provided selector. It's useful to drill down higher-order components.
+ - `options.dive` (*Boolean* [optional]): Shallow function renders the one non-DOM child of the current wrapper, and returns a wrapper around the result.
+ - The other keys are forwarded to the options argument of `enzyme.shallow()`.
#### Возвращает
@@ -120,8 +120,8 @@ Generate a render to string function with the needed context. Please refer to th
#### Аргументы
1. `options` (*Object* [optional])
- - `options.render` (*Function* [optional]): The render function to enhance, it uses **enzyme by default**.
- - The other keys are forwarded to the options argument of `enzyme.render()`.
+ - `options.render` (*Function* [optional]): The render function to enhance, it uses **enzyme by default**.
+ - The other keys are forwarded to the options argument of `enzyme.render()`.
#### Возвращает
diff --git a/docs/src/pages/guides/testing/testing-zh.md b/docs/src/pages/guides/testing/testing-zh.md
index 88204445e61120..ade520eedec143 100644
--- a/docs/src/pages/guides/testing/testing-zh.md
+++ b/docs/src/pages/guides/testing/testing-zh.md
@@ -12,19 +12,19 @@
## 用户空间
-在用户空间编写测试会如何呢？ Material-UI 的样式基础架构使用构建在 [enzyme](https://github.com/airbnb/enzyme) 的一些辅助函数之上来，这样一来整个流程会更简便，而这正是我们正在开源的。 若你愿意，你可以对它们加之利用。 We use almost exclusively full DOM rendering APIs. We encourage you to do the same especially if your components rely on custom themes. Tests using shallow rendering APIs become more brittle with the amount of provider components they require.
+在用户空间编写测试会如何呢？ Material-UI 的样式基础架构使用构建在 [enzyme](https://github.com/airbnb/enzyme) 的一些辅助函数之上来，这样一来整个流程会更简便，而这正是我们正在开源的。 若你愿意，你可以对它们加之利用。 我们几乎只使用完整的 DOM 渲染 API。 尤其若您的组件依赖于自定义主题，我们建议您执行相同的操作。 那些使用浅层渲染 API 的测试会变得更脆弱，因为他们需要一定量的 provider 组件。
### 完整的 DOM 渲染
当你有组件可能会与 DOM API 产生交互，或者当为了完整测试组件而要求完整的生命周期时，用例会更趋向使用完整的 DOM 渲染（例如，`componentDidMount` 等等。）。
-为这种情况提供了 `createMount()` 函数。 除了封装 enzyme 的 API，它还提供了一个 `cleanUp` 函数。
+针对这种情况，我们提供了 `createMount()` 函数。 除了封装 enzyme 的 API，它还提供了一个 `cleanUp` 函数。
### Shallow rendering（浅层渲染）
当把测试的组件当做一个小的单元时，浅层渲染起到了很好的约束作用。 这样也确保了你的测试不会间接地断言子组件的行为。 浅层渲染的目的是单独测试组件。 也就是说子元素的具体实现，如上下文信息，不会被泄漏。
-`createShallow()` 函数可用于此情况。 除了包装酶API，它提供 `dive`untilSelector`直到选择` 选项。
+`createShallow()` 函数可用于此情况。 除了包装酶API，它还提供了 `dive` 和 `untilSelector` 这两个选项。
### 渲染为字符串
@@ -41,8 +41,8 @@
#### 参数
1. `options` (*Object* [optional])
- - `options.mount` (*Function* [optional])：用 mount 函数来增强，它**默认使用 enzyme **。
- - 其他的键则被转发到 `enzyme.mount()` 的 options 参数当中。
+ - `options.mount` (*Function* [optional])：用 mount 函数来增强，它**默认使用 enzyme **。
+ - 其他的键则被转发到 `enzyme.mount()` 的 options 参数当中。
#### 返回结果
@@ -73,7 +73,7 @@ describe('
// 'jss2 my-label'
Nested
@@ -440,8 +440,8 @@ const className = `${productionPrefix}-${identifier}`;
Die generierten Klassennamen der `@material-ui/core` Komponenten verhalten sich anders. Wenn die folgenden Bedingungen erfüllt sind, sind die Klassennamen **deterministisch**:
- Es wird nur ein Themeanbieter verwendet (**Keine Verschachtelung von Themes**)
-- Das Stylesheet hat einen Namen, der mit `Mui` beginnt. (Alle Material-UI-Komponenten)
-- Das `disableGlobal` Option des [Klassennamensgenerators ](/styles/api/#creategenerateclassname-options-class-name-generator) ist `false`. (Der Standard)
+- The style sheet has a name that starts with `Mui` (all Material-UI components).
+- The `disableGlobal` option of the [class name generator](/styles/api/#creategenerateclassname-options-class-name-generator) is `false` (the default).
Diese Bedingungen werden bei den häufigsten Anwendungsfällen von `@material-ui/core` erfüllt. Zum Beispiel dieses Stylesheet:
@@ -486,7 +486,7 @@ const StyledTextField = styled(TextField)`
}
.MuiOutlinedInput-root {
fieldset {
- border-color: red; 🔴
+ border-color: red; 💔
}
&:hover fieldset {
border-color: yellow; 💛
diff --git a/docs/src/pages/styles/advanced/advanced-es.md b/docs/src/pages/styles/advanced/advanced-es.md
index 2d1dbb8e821eb7..2fcb3099ec7597 100644
--- a/docs/src/pages/styles/advanced/advanced-es.md
+++ b/docs/src/pages/styles/advanced/advanced-es.md
@@ -118,7 +118,7 @@ This is the simplest case. the wrapped component accepts a `classes` prop, it si
const Nested = withStyles({
root: {}, // a style rule
label: {}, // a nested style rule
-})({ classes }) => (
+})(({ classes }) => (
// 'jss2 my-label'
Nested
@@ -440,8 +440,8 @@ const className = `${productionPrefix}-${identifier}`;
The generated class names of the `@material-ui/core` components behave differently. When the following conditions are met, the class names are **deterministic**:
- Only one theme provider is used (**No theme nesting**)
-- The style sheet has a name that starts with `Mui`. (All Material-UI components)
-- The `disableGlobal` option of the [class name generator](/styles/api/#creategenerateclassname-options-class-name-generator) is `false`. (The default)
+- The style sheet has a name that starts with `Mui` (all Material-UI components).
+- The `disableGlobal` option of the [class name generator](/styles/api/#creategenerateclassname-options-class-name-generator) is `false` (the default).
These conditions are met with the most common use cases of `@material-ui/core`. For instance, this style sheet:
@@ -486,7 +486,7 @@ const StyledTextField = styled(TextField)`
}
.MuiOutlinedInput-root {
fieldset {
- border-color: red; 🔴
+ border-color: red; 💔
}
&:hover fieldset {
border-color: yellow; 💛
diff --git a/docs/src/pages/styles/advanced/advanced-fr.md b/docs/src/pages/styles/advanced/advanced-fr.md
index 2a9b40da16dba1..dc78493b570aa6 100644
--- a/docs/src/pages/styles/advanced/advanced-fr.md
+++ b/docs/src/pages/styles/advanced/advanced-fr.md
@@ -24,7 +24,7 @@ function Theming() {
{{"demo": "pages/styles/advanced/Theming.js"}}
-### Accessing the theme in a component
+### Accéder au thème dans un composant
You might need to access the theme variables inside your React components.
@@ -57,7 +57,7 @@ const DeepChild = withTheme(DeepChildRaw);
### Theme nesting
-You can nest multiple theme providers. This can be really useful when dealing with different areas of your application that have distinct appearance from each other.
+Vous pouvez imbriquer plusieurs fournisseurs de thème. This can be really useful when dealing with different areas of your application that have distinct appearance from each other.
```jsx
@@ -70,7 +70,7 @@ You can nest multiple theme providers. This can be really useful when dealing wi
{{"demo": "pages/styles/advanced/ThemeNesting.js"}}
-The inner theme will **override** the outer theme. You can extend the outer theme by providing a function:
+Le thème intérieur **remplacera** le thème extérieur. Vous pouvez étendre le thème externe en fournissant une fonction :
```jsx
@@ -118,7 +118,7 @@ This is the simplest case. the wrapped component accepts a `classes` prop, it si
const Nested = withStyles({
root: {}, // a style rule
label: {}, // a nested style rule
-})({ classes }) => (
+})(({ classes }) => (
// 'jss2 my-label'
Nested
@@ -440,8 +440,8 @@ const className = `${productionPrefix}-${identifier}`;
The generated class names of the `@material-ui/core` components behave differently. When the following conditions are met, the class names are **deterministic**:
- Only one theme provider is used (**No theme nesting**)
-- The style sheet has a name that starts with `Mui`. (All Material-UI components)
-- The `disableGlobal` option of the [class name generator](/styles/api/#creategenerateclassname-options-class-name-generator) is `false`. (The default)
+- The style sheet has a name that starts with `Mui` (all Material-UI components).
+- The `disableGlobal` option of the [class name generator](/styles/api/#creategenerateclassname-options-class-name-generator) is `false` (the default).
These conditions are met with the most common use cases of `@material-ui/core`. For instance, this style sheet:
@@ -486,7 +486,7 @@ const StyledTextField = styled(TextField)`
}
.MuiOutlinedInput-root {
fieldset {
- border-color: red; 🔴
+ border-color: red; 💔
}
&:hover fieldset {
border-color: yellow; 💛
diff --git a/docs/src/pages/styles/advanced/advanced-ja.md b/docs/src/pages/styles/advanced/advanced-ja.md
index 2be94db2107263..42fabc36cf1f81 100644
--- a/docs/src/pages/styles/advanced/advanced-ja.md
+++ b/docs/src/pages/styles/advanced/advanced-ja.md
@@ -118,7 +118,7 @@ This is the simplest case. the wrapped component accepts a `classes` prop, it si
const Nested = withStyles({
root: {}, // a style rule
label: {}, // a nested style rule
-})({ classes }) => (
+})(({ classes }) => (
// 'jss2 my-label'
Nested
@@ -440,8 +440,8 @@ const className = `${productionPrefix}-${identifier}`;
The generated class names of the `@material-ui/core` components behave differently. When the following conditions are met, the class names are **deterministic**:
- Only one theme provider is used (**No theme nesting**)
-- The style sheet has a name that starts with `Mui`. (All Material-UI components)
-- The `disableGlobal` option of the [class name generator](/styles/api/#creategenerateclassname-options-class-name-generator) is `false`. (The default)
+- The style sheet has a name that starts with `Mui` (all Material-UI components).
+- The `disableGlobal` option of the [class name generator](/styles/api/#creategenerateclassname-options-class-name-generator) is `false` (the default).
These conditions are met with the most common use cases of `@material-ui/core`. For instance, this style sheet:
@@ -486,7 +486,7 @@ const StyledTextField = styled(TextField)`
}
.MuiOutlinedInput-root {
fieldset {
- border-color: red; 🔴
+ border-color: red; 💔
}
&:hover fieldset {
border-color: yellow; 💛
diff --git a/docs/src/pages/styles/advanced/advanced-pt.md b/docs/src/pages/styles/advanced/advanced-pt.md
index e9486d565083ca..44b1e514cf14eb 100644
--- a/docs/src/pages/styles/advanced/advanced-pt.md
+++ b/docs/src/pages/styles/advanced/advanced-pt.md
@@ -116,9 +116,9 @@ Este é o caso mais simples. O componente encapsulado aceita a propriedade `clas
```jsx
const Nested = withStyles({
- root: {}, // uma regra de estilo
- label: {}, // uma regra de estilo aninhada
-})({ classes }) => (
+ root: {}, // a style rule
+ label: {}, // a nested style rule
+})(({ classes }) => (
// 'jss2 my-label'
Nested
@@ -256,14 +256,14 @@ const useStyles = makeStyles({
});
export default function MyComponent() {
- // Order doesn't matter
+ // Ordem não importa
const classes = useStyles();
const classesBase = useStylesBase();
- // Order doesn't matter
+ // Ordem não importa
const className = clsx(classes.root, classesBase.root)
- // color: red 🔴 wins.
+ // color: red 🔴 vence.
return
;
}
```
@@ -440,8 +440,8 @@ const className = `${productionPrefix}-${identifier}`;
Os nomes de classe gerados dos componentes `@material-ui/core ` se comportam de maneira diferente. Quando as seguintes condições são atendidas, os nomes das classes são **determinísticos**:
- Apenas um provedor de tema é usado (**Sem aninhamento de tema **)
-- A folha de estilo tem um nome que começa com `Mui`. (Todos os componentes do Material-UI)
-- A opção `disableGlobal` do [gerador de nome de classe](/styles/api/#creategenerateclassname-options-class-name-generator) é `false`. (O padrão)
+- A folha de estilo tem um nome que começa com `Mui` (todos os componentes de Material-UI).
+- A opção `disableGlobal` do [gerador de nome de clasee](/styles/api/#creategenerateclassname-options-class-name-generator) é `false` (o padrão).
Essas condições são atendidas com a forma de uso mais comum de `@material-ui/core`. Por exemplo, esta folha de estilo:
@@ -486,7 +486,7 @@ const StyledTextField = styled(TextField)`
}
.MuiOutlinedInput-root {
fieldset {
- border-color: red; 🔴
+ border-color: red; 💔
}
&:hover fieldset {
border-color: yellow; 💛
@@ -563,7 +563,7 @@ Se você estiver usando renderização do lado do servidor(Server-Side Rendering
/>
```
-Então, você deve passar este nonce para o JSS para que ele possa adicioná-lo às tags `
- 
- 
- 
+ 
