Progress indicators（进度指示器）通常称为微调器 (spinners) 。它能够表示一个不明确的等待时间，或者显示处理过程的时间长短。 动画使用 CSS 实现，而不是 JavaScript。
+Progress indicators（进度指示器）也称为微调器 (spinners) ，它表示了一个不明确的等待时间，或者显示处理过程的时间长短。 动画效果通过 CSS 实现，而不是 JavaScript。
[进度指示器](https://material.io/design/components/progress-indicators.html)能够将当前处理过程的状态通知用户，例如加载一个应用，提交一个表单或保存一些更新。 它们与应用程序状态进行通信并指示可用的操作，例如用户是否可从当前页面离开。 @@ -99,6 +99,6 @@ function Progress(props) {  -当它不可用时，您可以利用 `disableShrink` 属性来缓解这个问题。 查看 [这个问题](https://github.com/mui-org/material-ui/issues/10327). +当这个方法不可行的时候，您可以利用 `disableShrink` 属性来缓解这个问题。 请查看 [这个问题](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-zh.md b/docs/src/pages/components/radio-buttons/radio-buttons-zh.md index a95be0b17bac9f..63d2ff042fa0ed 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-zh.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-zh.md @@ -27,7 +27,7 @@ components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel ## 标签放置 -你可以用 `FormControlLabel` 组件的 `labelPlacement` prop 来改变标签的位置。 +你可以用 `FormControlLabel` 组件的 `labelPlacement` 属性来改变标签的位置。 {{"demo": "pages/components/radio-buttons/FormControlLabelPlacement.js"}} diff --git a/docs/src/pages/components/skeleton/skeleton-pt.md b/docs/src/pages/components/skeleton/skeleton-pt.md index cd02a2aa8914ad..c770e20594934d 100644 --- a/docs/src/pages/components/skeleton/skeleton-pt.md +++ b/docs/src/pages/components/skeleton/skeleton-pt.md @@ -31,11 +31,11 @@ Por padrão, o skeleton pulsa, mas você pode mudar a animação para uma onda o {{"demo": "pages/components/skeleton/Animations.js"}} -### Pulsate example +### Exemplo com efeito de pulsação {{"demo": "pages/components/skeleton/YouTube.js", "defaultCodeOpen": false}} -### Wave example +### Exemplo com efeito de ondas {{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}} @@ -65,6 +65,6 @@ loading ## Acessibilidade -Skeleton screens provide an alternative to the traditional spinner methods. Rather than showing an abstract widget, skeleton screens create anticipation of what is to come and reduce cognitive load. +Telas com Skeleton fornecem uma alternativa aos métodos tradicionais de feedback. Em vez de mostrar um resumo abstrato na tela, telas com skeleton criam uma expectativa do que está por vir, reduzindo a sensação cognitiva do processo de carregamento. -The background color of the skeleton uses the least amount of luminance to be visible in good conditions (good ambient light, good screen, no visual impairments). \ No newline at end of file +A cor de fundo do skeleton usa uma quantidade menor de luminância para ser visível em boas condições (boa luz ambiente, boa tela, sem deficiência visual). \ No newline at end of file diff --git a/docs/src/pages/components/skeleton/skeleton-zh.md b/docs/src/pages/components/skeleton/skeleton-zh.md index e7fc6ef00d1488..a1f17e5f23c531 100644 --- a/docs/src/pages/components/skeleton/skeleton-zh.md +++ b/docs/src/pages/components/skeleton/skeleton-zh.md @@ -1,5 +1,5 @@ --- -title: 骨架屏 React 组件 +title: React Skeleton 骨架屏组件 components: Skeleton --- @@ -31,11 +31,11 @@ components: Skeleton {{"demo": "pages/components/skeleton/Animations.js"}} -### Pulsate example +### 脉动动画例子 {{"demo": "pages/components/skeleton/YouTube.js", "defaultCodeOpen": false}} -### Wave example +### 波浪动画例子 {{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}} @@ -65,6 +65,6 @@ loading ## 可访问性 -Skeleton screens provide an alternative to the traditional spinner methods. Rather than showing an abstract widget, skeleton screens create anticipation of what is to come and reduce cognitive load. +骨架屏提供了一个可替代传统 进度条(spinner) 的解决方案。 骨架屏不是一个抽象的小部件，而是提供一个对未来事件的预期，来减少人们的认知负荷。 -The background color of the skeleton uses the least amount of luminance to be visible in good conditions (good ambient light, good screen, no visual impairments). \ No newline at end of file +骨架屏使用的背景色是在良好条件下可见的最小亮度（良好的环境光、良好的屏幕、无视觉障碍）。 \ No newline at end of file diff --git a/docs/src/pages/components/snackbars/snackbars-zh.md b/docs/src/pages/components/snackbars/snackbars-zh.md index 96c76a8b9648e3..04e3be223af82e 100644 --- a/docs/src/pages/components/snackbars/snackbars-zh.md +++ b/docs/src/pages/components/snackbars/snackbars-zh.md @@ -5,11 +5,11 @@ components: Snackbar, SnackbarContent # Snackbar 消息条 -Snackbars 提供了关于应用流程的简短信息。 该组件也被称为 toast。
+消息条组件提供了关于应用流程的简短信息。 该组件也被称为 toast。
-[消息条](https://material.io/design/components/snackbars.html) 将应用程序已执行或即将执行的进程通知用户。 它们会从屏幕底部短暂地出现。 它们不应中断用户体验，也不要求任何用户的操作来关闭。 +[消息条](https://material.io/design/components/snackbars.html)将应用程序已执行或即将执行的进程通知用户。 它们会从屏幕底部短暂地出现。 它们不应中断用户体验，也不要求任何用户的操作来关闭。 -Snackbars 包含一行直接与所执行操作相关的文本。 它们可能包含一些文本操作，但没有图标。 您可以使用它们来显示通知。 +消息条包含了一行直接与所执行操作相关的文本。 它们可能包含一些文本操作，但并不会展示图标。 您也可以用他们展示通知。 #### 频率 @@ -29,7 +29,7 @@ Snackbars 包含一行直接与所执行操作相关的文本。 它们可能包 ## 定位的消息条 -在宽大的布局中，如果消息条始终放在屏幕底部的同一位置，那么可以左对齐或中间对齐，但在某些情况下，消息条的位置可能需要更加灵活。 你可以通过指定 `anchorOrigin` prop 来控制消息条的位置。 +在宽大的布局中，如果消息条始终放在屏幕底部的同一位置，那么可以左对齐或中间对齐，但在某些情况下，消息条的位置可能需要更加灵活。 通过指定 `anchorOrigin` 的属性，您可以控制消息条的位置。 {{"demo": "pages/components/snackbars/PositionedSnackbar.js"}} @@ -47,7 +47,7 @@ Snackbars 包含一行直接与所执行操作相关的文本。 它们可能包 {{"demo": "pages/components/snackbars/ConsecutiveSnackbars.js"}} -### Snackbars（消息条）和 FABs（悬浮按钮） +### 消息条（Snackbars）和悬浮按钮（FABs） 消息条应当显示在悬浮按钮的上方（这是在移动设备上）。 @@ -55,7 +55,7 @@ Snackbars 包含一行直接与所执行操作相关的文本。 它们可能包 ### 更改过渡动画 -[Grow](/components/transitions/#grow)是默认的过渡动画但你可以使用不同的过渡动画。 +[Grow](/components/transitions/#grow) 是默认的过渡动画，但你可以使用不同的过渡动画。 {{"demo": "pages/components/snackbars/TransitionsSnackbar.js"}} @@ -73,12 +73,12 @@ Snackbars 包含一行直接与所执行操作相关的文本。 它们可能包   -以下例子演示了如何使用 [notistack](https://github.com/iamhosseindhv/notistack)。 notistack 有一个 **imperative API** 可以轻松地显示一串消息条，且无需处理其打开/关闭状态。 它还可以让你把它们 **堆叠** 在一起（尽管 Material Design 规范不鼓励这样做）。 +以下例子演示了如何使用 [notistack](https://github.com/iamhosseindhv/notistack)。 notistack 有一个 **imperative API** 可以轻松地显示一串消息条，且无需处理其打开/关闭状态。 您也可以把它们 **堆叠** 在一起（尽管 Material Design 规范不鼓励这样做）。 {{"demo": "pages/components/snackbars/IntegrationNotistack.js", "defaultCodeOpen": false}} -## 可及性 +## 无障碍设计 (WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert) -- 默认情况下，消息条不会自动隐藏。 但是，如果您决定使用 `autoHideDuration` prop，建议给用户 [足够的时间](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) 来响应。 \ No newline at end of file +- 默认情况下，消息条不会自动隐藏。 但是，如果您决定使用 `autoHideDuration` 属性，我们建议给用户提供 [足够的时间](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) 来响应。 \ No newline at end of file diff --git a/docs/src/pages/components/steppers/steppers-zh.md b/docs/src/pages/components/steppers/steppers-zh.md index e27035c34ca47e..ec399f7e9916fb 100644 --- a/docs/src/pages/components/steppers/steppers-zh.md +++ b/docs/src/pages/components/steppers/steppers-zh.md @@ -3,34 +3,34 @@ title: React Stepper 步骤条组件 components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIcon, StepLabel, Stepper --- -# Stepper 步进器 +# Stepper 步骤条组件 -步进器通过数字编号表示进度。 使用步进器可以提供类似于安装向导的用户流。
+步骤条组件通过数字的步骤来表示进度。 它提供了一个类似于安装向导的用户流。
-[步骤条](https://material.io/archive/guidelines/components/steppers.html) 通过一系列逻辑和编号的步骤来显示当前操作的进度。 它们也可用于导航。 在保存一个步骤后，步骤条可能会显示短暂的反馈信息。 +[步骤条](https://material.io/archive/guidelines/components/steppers.html)通过一系列逻辑和编号的步骤来显示当前操作的进度。 它们也可用于导航。 在保存一个步骤后，步骤条可能会显示短暂的反馈信息。 -- **节点类型**：可编辑节点，不可编辑节点，移动节点，非强制节点 -- **步进器类型**：横向步进器，竖向步进器，线性步进器，非线性步进器 +- **步骤的类型**：可编辑的，不可编辑的，移动端的，可选择的 +- **步骤条的类型**：横向的，竖向的，线性的，非线性的 -> **注意：**步进器不再出现在 [Material Design 指南](https://material.io/) 中, 但 Material-UI 会继续支持步进器。 +> **请注意：**步骤条不再出现在 [Material Design 指南](https://material.io/)中, 但 Material-UI 会继续支持此组件。 -## 横向步进器 +## 横向的步骤条 ### 线性的步骤条 -您可以在 `activeStep` 属性中传入一个初始值为0的当前步骤值来控制 `步骤条`。 您也可以借助 `orientation` 属性来设置 `步骤条` 的方向。 +您可以在 `activeStep` 属性中传入一个初始值为0的当前步骤值来控制`步骤条`。 您也可以借助 `orientation` 属性来设置 `步骤条` 的方向。 这个例子把`optional` 属性放在第二个 `步骤` 的组件上，它展示了如何使用一个可选的步骤条。 请注意，您可以自行选择管理跳过一个可选的步骤。 一旦决定将一个特定步骤设置为可选的，您就必须配置这个属性 `completed={false}` 以表示即使激活的步骤索引超出了可选的步骤，步骤条并没有完成。 {{"demo": "pages/components/steppers/HorizontalLinearStepper.js", "bg": true}} -### 线性步骤条 - 备选标签 +### 线性步骤条 — 备选的标签 -您可以将标签放置在节点图标之下。请在 `Stepper` 组件中设置 `alternativeLabel` 这一属性。 +您可以将标签置于步骤的图标之下，通过设置 `Stepper` 组件的 `alternativeLabel` 属性可以实现。 {{"demo": "pages/components/steppers/HorizontalLinearAlternativeLabelStepper.js", "bg": true}} -### 定制步进器 +### 定制的步骤器 以下是自定义组件的一个示例。 您可以在[样式重写文档页](/customization/components/)中了解有关此内容的更多信息。 @@ -46,23 +46,23 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco {{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js", "bg": true}} -### 非线性步骤条 - 备选标签 +### 非线性的步骤条 — 备选的标签 -您可以将标签放置在节点图标之下。请在 `Stepper` 组件中设置 `alternativeLabel` 这一属性。 +您可以将标签置于步骤的图标之下，通过设置 `Stepper` 组件的 `alternativeLabel` 属性可以实现。 {{"demo": "pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js", "bg": true}} -### 非线性步骤条 - 错误步骤 +### 非线性的步骤条 — 错误的步骤 {{"demo": "pages/components/steppers/HorizontalNonLinearStepperWithError.js", "bg": true}} -## 垂直步骤条 +## 垂直的步骤条 {{"demo": "pages/components/steppers/VerticalLinearStepper.js", "bg": true}} -## 移动设备上的步进器 +## 移动设备上的步骤条 -该组件实现了适用于移动设备的紧凑型步进器。 有关其详情, 请参阅 [移动步骤](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps)。 +该组件实现了适用于移动设备上的紧凑型步骤条。 有关这方面的详细介绍，请参阅 [移动设备上的步骤条](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps)。 ### 文本 @@ -78,7 +78,7 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco ### 点状 -当步骤的数字不是特别明显时使用点状标记。 +当步骤数并不是很多的时候，用点标记。 {{"demo": "pages/components/steppers/DotsMobileStepper.js", "bg": true}} diff --git a/docs/src/pages/components/switches/switches-pt.md b/docs/src/pages/components/switches/switches-pt.md index 2550d85d997154..5038cfa45b9720 100644 --- a/docs/src/pages/components/switches/switches-pt.md +++ b/docs/src/pages/components/switches/switches-pt.md @@ -39,7 +39,7 @@ Gosta de interruptores menores? Use a propriedade `size`. {{"demo": "pages/components/switches/SwitchesSize.js"}} -## Label placement +## Posicionamento do rótulo Você pode alterar o posicionamento do rótulo: diff --git a/docs/src/pages/components/tabs/tabs-aa.md b/docs/src/pages/components/tabs/tabs-aa.md index 37c777180ea8a9..deaa73ba83e475 100644 --- a/docs/src/pages/components/tabs/tabs-aa.md +++ b/docs/src/pages/components/tabs/tabs-aa.md @@ -1,6 +1,6 @@ --- title: crwdns92116:0crwdne92116:0 -components: crwdns131786:0crwdne131786:0 +components: crwdns133260:0crwdne133260:0 --- # crwdns92120:0crwdne92120:0 @@ -104,10 +104,14 @@ crwdns132504:0crwdne132504:0 crwdns132506:0crwdne132506:0 crwdns132510:0crwdne132510:0 crwdns132512:0crwdne132512:0 crwdns132514:0crwdne132514:0 -#### crwdns132516:0crwdne132516:0 +#### crwdns133262:0crwdne133262:0 crwdns132518:0crwdne132518:0 crwdns132520:0crwdne132520:0 +```jsx +crwdns133264:0crwdne133264:0 +``` + crwdns132522:0crwdne132522:0 ## crwdns132524:0crwdne132524:0 diff --git a/docs/src/pages/components/tabs/tabs-de.md b/docs/src/pages/components/tabs/tabs-de.md index d661a942cd83a2..8c3eedc9011127 100644 --- a/docs/src/pages/components/tabs/tabs-de.md +++ b/docs/src/pages/components/tabs/tabs-de.md @@ -1,6 +1,6 @@ --- title: Tabs React-Komponente -components: Tabs, Tab, TabScrollButton +components: Tabs, Tab, TabScrollButton, TabContext, TabList, TabPanel --- # Tabs @@ -104,10 +104,17 @@ An example for the current implementation can be found in the demos on this page The components implement keyboard navigation using the "manual activation" behavior. If you want to switch to the "selection automatically follows focus" behavior you have pass `selectionFollowsFocus` to the `Tabs` component. The WAI-ARIA authoring practices have a detailed guide on [how to decide when to make selection automatically follow focus](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus). -#### `selectionFollowsFocus` Demo +#### Demo The following two demos only differ in their keyboard navigation behavior. Focus a tab and navigate with arrow keys to notice the difference. +```jsx +/* Tabs where selection follows focus */ +Toggle Buttons 可用于对相关选项进行分组。
-为了强调组合之间的关联，每一组 [Toggle buttons](https://material.io/components/buttons#toggle-button) 应该共享一个容器。 当给定 ToggleButtonGroup（切换按钮） 的 `value` prop 时，那么 `ToggleButtonGroup` 就可以控制其子按钮的选择状态。 +为了强调组合之间的关联，每一组 [Toggle buttons](https://material.io/components/buttons#toggle-button) 应该共享一个容器。 当给定 ToggleButtonGroup（切换按钮） 的 `value` 属性时，那么 `ToggleButtonGroup` 就可以控制其子按钮的选择状态。 ## 单选 diff --git a/docs/src/pages/components/typography/typography-pt.md b/docs/src/pages/components/typography/typography-pt.md index 67bb7ef6b93e44..dc0e3c0a6a484b 100644 --- a/docs/src/pages/components/typography/typography-pt.md +++ b/docs/src/pages/components/typography/typography-pt.md @@ -6,11 +6,11 @@ components: TypographyUse a tipografia para apresentar seu design e conteúdo da forma mais clara e eficiente possível.
-O uso de diferentes tamanhos e estilos de uma só vez pode estragar qualquer layout. Uma [escala tipográfica](https://material.io/design/typography/#type-scale) tem um conjunto limitado de tamanhos de tipo que funcionam bem em conjunto com a grade de layout. +O uso de diferentes tamanhos e estilos de uma só vez pode estragar qualquer leiaute. Uma [escala tipográfica](https://material.io/design/typography/#type-scale) tem um conjunto limitado de tipos de tamanhos que funcionam bem em conjunto com o leiaute de grade. ## Geral -A fonte *Roboto* **não** será carregada automaticamente pelo Material-UI. O desenvolvedor é responsável por carregar todas as fontes usadas em sua aplicação. A fonte Roboto possui algumas maneiras fáceis de começar. Para configuração mais avançadas, dê uma olhada na [seção de personalização de temas](/customization/typography/). +A fonte *Roboto* **não** será carregada automaticamente pelo Material-UI. O desenvolvedor é responsável por carregar todas as fontes usadas em sua aplicação. A fonte Roboto possui algumas maneiras fáceis de ser carregada. Para uma abordagem mais avançada, dê uma olhada na [seção de customização de temas](/customization/typography/). ## CDN da fonte Roboto @@ -32,9 +32,9 @@ Então, você pode importá-la no seu ponto de entrada (entry-point). import 'fontsource-roboto'; ``` -For more info check out [Fontsource](https://github.com/DecliningLotus/fontsource/blob/master/packages/roboto/README.md). +Para maiores informações, confira em [Fontsource](https://github.com/DecliningLotus/fontsource/blob/master/packages/roboto/README.md). -⚠️ Tome cuidado ao usar essa abordagem. Certifique-se de que seu bundler não carregue ansiosamente todas as variações da fonte (100/300/400/500/700/900, itálico/regular, SVG/woff). Fontsource can be configured to load specific subsets, weights and styles. Colocar todos os arquivos de fonte em linha pode aumentar o tamanho do seu pacote significativamente. A configuração de tipografia padrão do Material-UI depende apenas dos pesos de fonte de 300, 400, 500 e 700. +⚠️ Tome cuidado ao usar essa abordagem. Certifique-se de que seu bundler não carregue ansiosamente todas as variações da fonte (100/300/400/500/700/900, itálico/regular, SVG/woff). Fontsource pode ser configurado para carregar subconjuntos, pesos e estilos específicos. Colocar todos os arquivos de fonte em linha pode aumentar o tamanho do seu pacote significativamente. A configuração de tipografia padrão do Material-UI depende apenas dos pesos de fonte de 300, 400, 500 e 700. ## Componente diff --git a/docs/src/pages/components/typography/typography-zh.md b/docs/src/pages/components/typography/typography-zh.md index c3d5d151f72627..d63e9cd30b4616 100644 --- a/docs/src/pages/components/typography/typography-zh.md +++ b/docs/src/pages/components/typography/typography-zh.md @@ -1,5 +1,5 @@ --- -components: 文字排版 +components: Typography --- # Typography 文字铸排 @@ -32,9 +32,9 @@ Material-UI **不会**自动加载 *Roboto* 字体。 开发人员需要自行 import 'fontsource-roboto'; ``` -For more info check out [Fontsource](https://github.com/DecliningLotus/fontsource/blob/master/packages/roboto/README.md). +有关更多信息请查看 [Fontsource](https://github.com/DecliningLotus/fontsource/blob/master/packages/roboto/README.md)。 -⚠️使用这种方法时要格外小心。 确保您的包不会一次性加载所有字体的变体 (100/300/400/500/700/900，italic/regular，SVG/woff)。 Fontsource can be configured to load specific subsets, weights and styles. 当内联所有字体文件的时候，捆绑包的大小会显著增加。 Material-UI 默认的排版配置仅依赖于300，400和500的字重。 +⚠️使用这种方法时要格外小心。 确保您的包不会一次性加载所有字体的变体 (100/300/400/500/700/900，italic/regular，SVG/woff)。 Fontsource 可以配置为加载特定的 子集(subsets)、字体粗细(weights) 和 样式(styles)。 当内联所有字体文件的时候，捆绑包的大小会显著增加。 Material-UI 默认的排版配置仅依赖于300，400和500的字重。 ## 组件 diff --git a/docs/src/pages/customization/breakpoints/breakpoints-aa.md b/docs/src/pages/customization/breakpoints/breakpoints-aa.md index df8075d10f8780..14fbd2380897c5 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-aa.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-aa.md @@ -81,8 +81,14 @@ crwdns132160:0crwdne132160:0 crwdns132162:0crwdne132162:0 -```tsx -crwdns132164:0crwdne132164:0 +```js +crwdns133266:0crwdne133266:0 +``` + +crwdns133268:0crwdne133268:0 + +```ts +crwdns133270:0crwdne133270:0 ``` ## crwdns132166:0crwdne132166:0 @@ -95,14 +101,14 @@ crwdns132164:0crwdne132164:0 #### crwdns92930:0crwdne92930:0 -crwdns132168:0crwdne132168:0 +crwdns133272:0crwdne133272:0 #### crwdns92934:0crwdne92934:0 ```js -crwdns132170:0{ +crwdns133274:0{ backgroundColor: 'red', - }crwdne132170:0 + }crwdne133274:0 ``` ### `crwdns92938:0crwdne92938:0` @@ -113,14 +119,14 @@ crwdns132170:0{ #### crwdns92944:0crwdne92944:0 -crwdns132172:0crwdne132172:0 +crwdns133276:0crwdne133276:0 #### crwdns92948:0crwdne92948:0 ```js -crwdns132174:0{ +crwdns133278:0{ backgroundColor: 'red', - }crwdne132174:0 + }crwdne133278:0 ``` ### `crwdns92952:0crwdne92952:0` @@ -131,14 +137,14 @@ crwdns132174:0{ #### crwdns92958:0crwdne92958:0 -crwdns132176:0crwdne132176:0 +crwdns133280:0crwdne133280:0 #### crwdns92962:0crwdne92962:0 ```js -crwdns132178:0{ +crwdns133282:0{ backgroundColor: 'red', - }crwdne132178:0 + }crwdne133282:0 ``` ### `crwdns92966:0crwdne92966:0` @@ -150,25 +156,25 @@ crwdns132178:0{ #### crwdns92974:0crwdne92974:0 -crwdns132180:0crwdne132180:0 +crwdns133284:0crwdne133284:0 #### crwdns92978:0crwdne92978:0 ```js -crwdns132182:0{ +crwdns133286:0{ backgroundColor: 'red', - }crwdne132182:0 + }crwdne133286:0 ``` ### `crwdns92982:0[options]crwdne92982:0` -crwdns132184:0crwdne132184:0 crwdns132186:0crwdne132186:0 crwdns132188:0crwdne132188:0 crwdns132190:0crwdne132190:0 +crwdns133288:0crwdne133288:0 crwdns133290:0crwdne133290:0 crwdns133292:0crwdne133292:0 crwdns133294:0crwdne133294:0 ```ts -crwdns132192:0crwdne132192:0 +crwdns133296:0crwdne133296:0 ``` -crwdns132194:0crwdne132194:0 +crwdns133298:0crwdne133298:0 - crwdns132196:0crwdne132196:0 crwdns132198:0crwdne132198:0 @@ -180,22 +186,22 @@ crwdns132194:0crwdne132194:0 - crwdns93020:0[optional]crwdne93020:0 crwdns93022:0crwdne93022:0 crwdns93024:0crwdne93024:0 crwdns93026:0%20hicrwdne93026:0 crwdns93028:0crwdne93028:0 ```js -crwdns132200:0crwdne132200:0 - crwdns132202:0crwdne132202:0 +crwdns133300:0crwdne133300:0 + crwdns133302:0crwdne133302:0 ``` - crwdns132204:0[optional]crwdne132204:0 crwdns132206:0crwdne132206:0 #### crwdns93038:0crwdne93038:0 -crwdns132208:0crwdne132208:0 +crwdns133304:0crwdne133304:0 #### crwdns93042:0crwdne93042:0 ```jsx -crwdns132210:0{ isWidthUp }crwdne132210:0 +crwdns133306:0{ isWidthUp }crwdne133306:0 ``` ## crwdns132212:0crwdne132212:0 -crwdns132214:0crwdne132214:0 \ No newline at end of file +crwdns133308:0crwdne133308:0 \ No newline at end of file diff --git a/docs/src/pages/customization/breakpoints/breakpoints-de.md b/docs/src/pages/customization/breakpoints/breakpoints-de.md index 94b7c63eb8a9d8..475122cbaac97e 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-de.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-de.md @@ -109,7 +109,7 @@ const theme = createMuiTheme({ Feel free to have as few or as many breakpoints as you want, naming them in whatever way you'd prefer for your project. -```tsx +```js const theme = createMuiTheme({ breakpoints: { values: { @@ -119,11 +119,13 @@ const theme = createMuiTheme({ }, }, }); +``` -declare module "@material-ui/core/styles/createBreakpoints" -{ - interface BreakpointOverrides - { +If you are using TypeScript, you would also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values. + +```ts +declare module "@material-ui/core/styles/createBreakpoints" { + interface BreakpointOverrides { xs: false; // removes the `xs` breakpoint sm: false; md: false; diff --git a/docs/src/pages/customization/breakpoints/breakpoints-es.md b/docs/src/pages/customization/breakpoints/breakpoints-es.md index 9db0c9aee74de2..4f0b1903370634 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-es.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-es.md @@ -109,7 +109,7 @@ const theme = createMuiTheme({ Feel free to have as few or as many breakpoints as you want, naming them in whatever way you'd prefer for your project. -```tsx +```js const theme = createMuiTheme({ breakpoints: { values: { @@ -119,11 +119,13 @@ const theme = createMuiTheme({ }, }, }); +``` -declare module "@material-ui/core/styles/createBreakpoints" -{ - interface BreakpointOverrides - { +If you are using TypeScript, you would also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values. + +```ts +declare module "@material-ui/core/styles/createBreakpoints" { + interface BreakpointOverrides { xs: false; // removes the `xs` breakpoint sm: false; md: false; diff --git a/docs/src/pages/customization/breakpoints/breakpoints-fr.md b/docs/src/pages/customization/breakpoints/breakpoints-fr.md index 88f8a3ef2d87af..dcf27c317d0fd4 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-fr.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-fr.md @@ -109,7 +109,7 @@ const theme = createMuiTheme({ Feel free to have as few or as many breakpoints as you want, naming them in whatever way you'd prefer for your project. -```tsx +```js const theme = createMuiTheme({ breakpoints: { values: { @@ -119,11 +119,13 @@ const theme = createMuiTheme({ }, }, }); +``` -declare module "@material-ui/core/styles/createBreakpoints" -{ - interface BreakpointOverrides - { +If you are using TypeScript, you would also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values. + +```ts +declare module "@material-ui/core/styles/createBreakpoints" { + interface BreakpointOverrides { xs: false; // removes the `xs` breakpoint sm: false; md: false; diff --git a/docs/src/pages/customization/breakpoints/breakpoints-ja.md b/docs/src/pages/customization/breakpoints/breakpoints-ja.md index 3550febc4b518e..c720d3ca444b26 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-ja.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-ja.md @@ -109,7 +109,7 @@ const theme = createMuiTheme({ Feel free to have as few or as many breakpoints as you want, naming them in whatever way you'd prefer for your project. -```tsx +```js const theme = createMuiTheme({ breakpoints: { values: { @@ -119,11 +119,13 @@ const theme = createMuiTheme({ }, }, }); +``` -declare module "@material-ui/core/styles/createBreakpoints" -{ - interface BreakpointOverrides - { +If you are using TypeScript, you would also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values. + +```ts +declare module "@material-ui/core/styles/createBreakpoints" { + interface BreakpointOverrides { xs: false; // removes the `xs` breakpoint sm: false; md: false; diff --git a/docs/src/pages/customization/breakpoints/breakpoints-pt.md b/docs/src/pages/customization/breakpoints/breakpoints-pt.md index e3ca757ae355e3..2a34f04760987b 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-pt.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-pt.md @@ -109,7 +109,7 @@ const theme = createMuiTheme({ Sinta-se à vontade para ter quantos pontos de quebra você quiser, nomeando-os da maneira que preferir para o seu projeto. -```tsx +```js const theme = createMuiTheme({ breakpoints: { values: { @@ -119,17 +119,19 @@ const theme = createMuiTheme({ }, }, }); +``` -declare module "@material-ui/core/styles/createBreakpoints" -{ - interface BreakpointOverrides - { - xs: false; // remove o ponto de quebra `xs` +If you are using TypeScript, you would also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values. + +```ts +declare module "@material-ui/core/styles/createBreakpoints" { + interface BreakpointOverrides { + xs: false; // removes the `xs` breakpoint sm: false; md: false; lg: false; xl: false; - tablet: true; // adiciona o ponto de quebra `tablet` + tablet: true; // adds the `tablet` breakpoint laptop: true; desktop: true; } diff --git a/docs/src/pages/customization/breakpoints/breakpoints-ru.md b/docs/src/pages/customization/breakpoints/breakpoints-ru.md index 1fc4c4a81551c3..059047de68810c 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-ru.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-ru.md @@ -109,7 +109,7 @@ const theme = createMuiTheme({ Feel free to have as few or as many breakpoints as you want, naming them in whatever way you'd prefer for your project. -```tsx +```js const theme = createMuiTheme({ breakpoints: { values: { @@ -119,11 +119,13 @@ const theme = createMuiTheme({ }, }, }); +``` -declare module "@material-ui/core/styles/createBreakpoints" -{ - interface BreakpointOverrides - { +If you are using TypeScript, you would also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values. + +```ts +declare module "@material-ui/core/styles/createBreakpoints" { + interface BreakpointOverrides { xs: false; // removes the `xs` breakpoint sm: false; md: false; diff --git a/docs/src/pages/customization/breakpoints/breakpoints-zh.md b/docs/src/pages/customization/breakpoints/breakpoints-zh.md index fee2f558329a67..2863bd516b9281 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-zh.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-zh.md @@ -109,7 +109,7 @@ const theme = createMuiTheme({ Feel free to have as few or as many breakpoints as you want, naming them in whatever way you'd prefer for your project. -```tsx +```js const theme = createMuiTheme({ breakpoints: { values: { @@ -119,11 +119,13 @@ const theme = createMuiTheme({ }, }, }); +``` -declare module "@material-ui/core/styles/createBreakpoints" -{ - interface BreakpointOverrides - { +If you are using TypeScript, you would also need to use [module augmentation](/guides/typescript/#customization-of-theme) for the theme to accept the above values. + +```ts +declare module "@material-ui/core/styles/createBreakpoints" { + interface BreakpointOverrides { xs: false; // removes the `xs` breakpoint sm: false; md: false; diff --git a/docs/src/pages/customization/color/color-aa.md b/docs/src/pages/customization/color/color-aa.md index f9fabee728aea4..c9402cef1f716b 100644 --- a/docs/src/pages/customization/color/color-aa.md +++ b/docs/src/pages/customization/color/color-aa.md @@ -4,72 +4,72 @@ crwdns93052:0crwdne93052:0 -## crwdns93054:0crwdne93054:0 +## crwdns133310:0crwdne133310:0 -### crwdns93056:0crwdne93056:0 +### crwdns133312:0crwdne133312:0 -#### crwdns93058:0crwdne93058:0 +crwdns133314:0crwdne133314:0 crwdns133316:0crwdne133316:0 -crwdns93060:0crwdne93060:0 crwdns93062:0crwdne93062:0 crwdns93064:0crwdne93064:0 - -#### crwdns93066:0crwdne93066:0 - -crwdns93068:0crwdne93068:0 crwdns93070:0crwdne93070:0 crwdns93072:0crwdne93072:0 - -### crwdns93074:0crwdne93074:0 + +
+
+
+
-Die Material Design-Farbpalette umfasst Primär- und Akzentfarben, die zur Illustration oder zur Entwicklung Ihrer Markenfarben verwendet werden können. Sie wurden entwickelt, um harmonisch miteinander zu arbeiten.
-Sie können sich beispielsweise auf komplementäre Primär- und Akzentfarben beziehen (z. B. 'red 500' & 'purple A200'):
+Die Ausgabe kann in die `createMuiTheme()` Funktion eingegeben werden:
```js
-import purple from '@material-ui/core/colors/purple';
-import red from '@material-ui/core/colors/red';
-
-const primary = red[500]; // #F44336
-const accent = purple['A200']; // #E040FB
-const accent = purple.A200; // #E040FB (alternative Methode)
-```
-
-### Farbpalette
-
-Wenn ein *Ton* (rot, pink usw.) und eine *Schattierung* (500, 600 usw.) gegeben sind, können Sie die Farbe folgendermaßen importieren:
-
-```jsx
-import HUE from '@material-ui/core/colors/HUE';
+import { createMuiTheme } from '@material-ui/core/styles';
-const color = HUE[SHADE];
+const theme = createMuiTheme({
+ palette: {
+ primary: {
+ light: '#757ce8',
+ main: '#3f50b5',
+ dark: '#002884',
+ contrastText: '#fff',
+ },
+ secondary: {
+ light: '#ff7961',
+ main: '#f44336',
+ dark: '#ba000d',
+ contrastText: '#000',
+ },
+ },
+});
```
-{{"demo": "pages/customization/color/Color.js", "hideToolbar": true, "bg": "inline"}}
-
-## Farbwerkzeug
+### Spielwiese
-Um ein [ material.io/design/color ](https://material.io/design/color/) Farbschema mittels der Material-UI Dokumentation zu testen, wählen Sie die Farben mittels der Palette und der Regler weiter unten aus. Alternativ können Sie Hex-Werte in die Felder Primärer und Sekundärer Text eingeben.
+To test a [material.io/design/color](https://material.io/design/color/) color scheme with the Material-UI documentation, simply select colors using the palette and sliders below. Alternativ können Sie Hex-Werte in die Felder Primärer und Sekundärer Text eingeben.
{{"demo": "pages/customization/color/ColorTool.js", "hideToolbar": true, "bg": true}}
@@ -57,7 +54,9 @@ import purple from '@material-ui/core/colors/purple';
const theme = createMuiTheme({
palette: {
- primary: purple,
+ primary: {
+ main: purple[500],
+ },
secondary: {
main: '#f44336',
},
@@ -69,39 +68,42 @@ Nur die `Haupttöne` müssen bereitgestellt werden (es sei denn, Sie möchten `l
Wenn Sie die standardmäßigen primären und / oder sekundären Farbtöne verwenden, wird durch das Bereitstellen von dem Farbobjekt die entsprechenden Farbtöne der Materialfarbe für main, light und dark von `createMuiTheme()` berechnet.
-### Offizielles Farbwerkzeug
+### Werkzeuge von der Community
-Das Material Design Team hat auch ein tolles Tool zur Palettenkonfiguration entwickelt: [material.io/tools/color](https://material.io/tools/color/). Auf diese Weise können Sie eine Farbpalette für Ihre Benutzeroberfläche erstellen und die Zugänglichkeit einer beliebigen Farbkombination messen.
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
+- [Material palette generator](https://material.io/inline-tools/color/): Mit dem Material-Palettengenerator können Sie eine Palette für jede von Ihnen eingegebene Farbe erstellen.
-
-
-
+## 2014 Material Design color palettes
-Die Ausgabe kann in die `createMuiTheme()` Funktion eingegeben werden:
+These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use the palette generation tool.
+
+### Wichtige Begriffe
+
+- **Palette**: A palette is a collection of colors, i.e. hues and their shades. Die Material-UI stellt alle Farben aus den Richtlinien für Material Design zur Verfügung. [ Diese Farbpalette ](#color-palette) wurde mit Farben gestaltet, die harmonisch zusammenarbeiten.
+- **Hue" & "Shade**: A single color within the palette is made up of a hue such as "red", and shade, such as "500". "Rot 50" ist der hellste Rotton (*Pink!*), während "Rot 900" am dunkelsten ist. Darüber hinaus enthalten die meisten Farbtöne Akzentfarben, denen ein `A` vorangestellt ist.
+
+### Farbpalette
+
+Wenn ein *Ton* (rot, pink usw.) und eine *Schattierung* (500, 600 usw.) gegeben sind, können Sie die Farbe folgendermaßen importieren:
```jsx
-import { createMuiTheme } from '@material-ui/core/styles';
+import HUE from '@material-ui/core/colors/HUE';
-const theme = createMuiTheme({
- palette: {
- primary: {
- light: '#757ce8',
- main: '#3f50b5',
- dark: '#002884',
- contrastText: '#fff',
- },
- secondary: {
- light: '#ff7961',
- main: '#f44336',
- dark: '#ba000d',
- contrastText: '#000',
- },
- },
-});
+const color = HUE[SHADE];
```
-### Werkzeuge von der Community
+{{"demo": "pages/customization/color/Color.js", "hideToolbar": true, "bg": "inline"}}
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
-- [Material palette generator](https://material.io/inline-tools/color/): Mit dem Material-Palettengenerator können Sie eine Palette für jede von Ihnen eingegebene Farbe erstellen.
\ No newline at end of file
+### Beispiele
+
+For instance, you can refer to complementary primary and accent colors, "red 500" and "purple A200" like so:
+
+```js
+import purple from '@material-ui/core/colors/purple';
+import red from '@material-ui/core/colors/red';
+
+const primary = red[500]; // #f44336
+const accent = purple['A200']; // #e040fb
+const accent = purple.A200; // #e040fb (alternative method)
+```
\ No newline at end of file
diff --git a/docs/src/pages/customization/color/color-es.md b/docs/src/pages/customization/color/color-es.md
index e2712cd74a537b..0be0b1ee42c33d 100644
--- a/docs/src/pages/customization/color/color-es.md
+++ b/docs/src/pages/customization/color/color-es.md
@@ -4,48 +4,45 @@
El [sistema de color](https://material.io/design/color/) Material Design se puede utilizar para crear un tema de color que refleje su marca o estilo.
-## Sistema de color
+## Picking colors
-### Términos importantes
-
-#### "Pallette" (Paleta)
-
-Una paleta es una colección de colores, es decir, su matiz (color) y sus tonos. Material-UI proporciona todos los colores incluidos en las pautas de Material Design. [Esta paleta de colores](#color-palette) ha sido diseñada con colores que funcionan en armonía unos con otros.
-
-#### "Hue" & "Shade" (Matiz y tono)
+### Herramienta oficial de color
-Un solo color dentro de la paleta está formado por un matiz como el "rojo" y un tono, como "500". "rojo 50" es el tono más claro de rojo (*¡rosa!*), mientras que "rojo 900" es el más oscuro. Además, la mayoría de los matices vienen con tonos de "acento", prefijados con una `A`.
+The Material Design team has also built an awesome palette configuration tool: [material.io/resources/color/](https://material.io/resources/color/). This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.
-### Ejemplos
+
+
+
+
+
-La paleta de colores de Material Design consta de colores primarios y de acento que se pueden usar para ilustrar o desarrollar los colores de su marca. Han sido diseñados para trabajar en armonía unos con otros.
-Por ejemplo, puede referirse a colores primarios y de acento complementarios (por ejemplo, 'rojo 500' & 'púrpura A200'), así:
+The output can be fed into `createMuiTheme()` function:
```js
-import purple from '@material-ui/core/colors/purple';
-import red from '@material-ui/core/colors/red';
-
-const primary = red[500]; // #F44336
-const accent = purple['A200']; // #E040FB
-const accent = purple.A200; // #E040FB (método alternativo)
-```
-
-### Paleta de colores
-
-Dado un *HUE (matiz)* (rojo, rosa, etc.) y una *SHADE (tono)* (500, 600, etc.) se puede importar el color así:
-
-```jsx
-import HUE from '@material-ui/core/colors/HUE';
+import { createMuiTheme } from '@material-ui/core/styles';
-const color = HUE[SHADE];
+const theme = createMuiTheme({
+ palette: {
+ primary: {
+ light: '#757ce8',
+ main: '#3f50b5',
+ dark: '#002884',
+ contrastText: '#fff',
+ },
+ secondary: {
+ light: '#ff7961',
+ main: '#f44336',
+ dark: '#ba000d',
+ contrastText: '#000',
+ },
+ },
+});
```
-{{"demo": "pages/customization/color/Color.js", "hideToolbar": true, "bg": "inline"}}
-
-## Herramienta de color
+### Campo de pruebas
-Para probar un esquema de color [material.io/design/color](https://material.io/design/color/) con la documentación de Material-UI, simplemente se pueden seleccionar los colores usando la paleta y los sliders de abajo. Como alternativa, se pueden escribir valores hexadecimales en los campos de text Primary (color primario) y Secondary (color secundario).
+To test a [material.io/design/color](https://material.io/design/color/) color scheme with the Material-UI documentation, simply select colors using the palette and sliders below. Como alternativa, se pueden escribir valores hexadecimales en los campos de text Primary (color primario) y Secondary (color secundario).
{{"demo": "pages/customization/color/ColorTool.js", "hideToolbar": true, "bg": true}}
@@ -57,7 +54,9 @@ import purple from '@material-ui/core/colors/purple';
const theme = createMuiTheme({
palette: {
- primary: purple,
+ primary: {
+ main: purple[500],
+ },
secondary: {
main: '#f44336',
},
@@ -69,39 +68,42 @@ Only the `main` shades need be provided (unless you wish to further customize `l
If you are using the default primary and / or secondary shades then by providing the color object, `createMuiTheme()` will use the appropriate shades from the material color for main, light and dark.
-### Herramienta oficial de color
+### Herramientas de la comunidad
-El equipo de Material Design ha creado una increíble herramienta para configurar la paleta [material.io/tools/color](https://material.io/tools/color/). This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
+- [Material palette generator](https://material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
-
-
-
+## 2014 Material Design color palettes
-The output can be fed into `createMuiTheme()` function:
+These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use the palette generation tool.
+
+### Términos importantes
+
+- **Palette**: A palette is a collection of colors, i.e. hues and their shades. Material-UI proporciona todos los colores incluidos en las pautas de Material Design. [Esta paleta de colores](#color-palette) ha sido diseñada con colores que funcionan en armonía unos con otros.
+- **Hue" & "Shade**: A single color within the palette is made up of a hue such as "red", and shade, such as "500". "rojo 50" es el tono más claro de rojo (*¡rosa!*), mientras que "rojo 900" es el más oscuro. Además, la mayoría de los matices vienen con tonos de "acento", prefijados con una `A`.
+
+### Paleta de colores
+
+Dado un *HUE (matiz)* (rojo, rosa, etc.) y una *SHADE (tono)* (500, 600, etc.) se puede importar el color así:
```jsx
-import { createMuiTheme } from '@material-ui/core/styles';
+import HUE from '@material-ui/core/colors/HUE';
-const theme = createMuiTheme({
- palette: {
- primary: {
- light: '#757ce8',
- main: '#3f50b5',
- dark: '#002884',
- contrastText: '#fff',
- },
- secondary: {
- light: '#ff7961',
- main: '#f44336',
- dark: '#ba000d',
- contrastText: '#000',
- },
- },
-});
+const color = HUE[SHADE];
```
-### Herramientas de la comunidad
+{{"demo": "pages/customization/color/Color.js", "hideToolbar": true, "bg": "inline"}}
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
-- [Material palette generator](https://material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
\ No newline at end of file
+### Ejemplos
+
+For instance, you can refer to complementary primary and accent colors, "red 500" and "purple A200" like so:
+
+```js
+import purple from '@material-ui/core/colors/purple';
+import red from '@material-ui/core/colors/red';
+
+const primary = red[500]; // #f44336
+const accent = purple['A200']; // #e040fb
+const accent = purple.A200; // #e040fb (alternative method)
+```
\ No newline at end of file
diff --git a/docs/src/pages/customization/color/color-fr.md b/docs/src/pages/customization/color/color-fr.md
index e1e4ec47e52192..17a35f7b465b12 100644
--- a/docs/src/pages/customization/color/color-fr.md
+++ b/docs/src/pages/customization/color/color-fr.md
@@ -4,46 +4,43 @@
The Material Design [color system](https://material.io/design/color/) can be used to create a color theme that reflects your brand or style.
-## Color system
+## Picking colors
-### Important Terms
-
-#### "Palette"
-
-A palette is a collection of colors, i.e. hues and their shades. Material-UI provides all colors from the Material Design guidelines. [This color palette](#color-palette) has been designed with colors that work harmoniously with each other.
-
-#### "Hue" & "Shade"
+### Official color tool
-A single color within the palette is made up of a hue such as "red", and shade, such as "500". "red 50" is the lightest shade of red (*pink!*), while "red 900" is the darkest. In addition, most hues come with "accent" shades, prefixed with an `A`.
+The Material Design team has also built an awesome palette configuration tool: [material.io/resources/color/](https://material.io/resources/color/). This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.
-### Exemples
+
+
+
+
+
-The Material Design color palette comprises primary and accent colors that can be used for illustration or to develop your brand colors. They’ve been designed to work harmoniously with each other.
-For instance, you can refer to complementary primary and accent colors (for example 'red 500' & 'purple A200'), like so:
+The output can be fed into `createMuiTheme()` function:
```js
-import purple from '@material-ui/core/colors/purple';
-import red from '@material-ui/core/colors/red';
-
-const primary = red[500]; // #F44336
-const accent = purple['A200']; // #E040FB
-const accent = purple.A200; // #E040FB (alternative method)
-```
-
-### Color palette
-
-Given a *HUE* (red, pink, etc.) and a *SHADE* (500, 600, etc.) you can import the color like this:
-
-```jsx
-import HUE from '@material-ui/core/colors/HUE';
+import { createMuiTheme } from '@material-ui/core/styles';
-const color = HUE[SHADE];
+const theme = createMuiTheme({
+ palette: {
+ primary: {
+ light: '#757ce8',
+ main: '#3f50b5',
+ dark: '#002884',
+ contrastText: '#fff',
+ },
+ secondary: {
+ light: '#ff7961',
+ main: '#f44336',
+ dark: '#ba000d',
+ contrastText: '#000',
+ },
+ },
+});
```
-{{"demo": "pages/customization/color/Color.js", "hideToolbar": true, "bg": "inline"}}
-
-## Color tool
+### Playground
To test a [material.io/design/color](https://material.io/design/color/) color scheme with the Material-UI documentation, simply select colors using the palette and sliders below. Alternatively, you can enter hex values in the Primary and Secondary text fields.
@@ -57,7 +54,9 @@ import purple from '@material-ui/core/colors/purple';
const theme = createMuiTheme({
palette: {
- primary: purple,
+ primary: {
+ main: purple[500],
+ },
secondary: {
main: '#f44336',
},
@@ -69,39 +68,42 @@ Only the `main` shades need be provided (unless you wish to further customize `l
If you are using the default primary and / or secondary shades then by providing the color object, `createMuiTheme()` will use the appropriate shades from the material color for main, light and dark.
-### Official color tool
+### Tools by the community
-The Material Design team has also built an awesome palette configuration tool: [material.io/tools/color](https://material.io/tools/color/). This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
+- [Material palette generator](https://material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
-
-
-
+## 2014 Material Design color palettes
-The output can be fed into `createMuiTheme()` function:
+These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use the palette generation tool.
+
+### Important Terms
+
+- **Palette**: A palette is a collection of colors, i.e. hues and their shades. Material-UI provides all colors from the Material Design guidelines. [This color palette](#color-palette) has been designed with colors that work harmoniously with each other.
+- **Hue" & "Shade**: A single color within the palette is made up of a hue such as "red", and shade, such as "500". "red 50" is the lightest shade of red (*pink!*), while "red 900" is the darkest. In addition, most hues come with "accent" shades, prefixed with an `A`.
+
+### Color palette
+
+Given a *HUE* (red, pink, etc.) and a *SHADE* (500, 600, etc.) you can import the color like this:
```jsx
-import { createMuiTheme } from '@material-ui/core/styles';
+import HUE from '@material-ui/core/colors/HUE';
-const theme = createMuiTheme({
- palette: {
- primary: {
- light: '#757ce8',
- main: '#3f50b5',
- dark: '#002884',
- contrastText: '#fff',
- },
- secondary: {
- light: '#ff7961',
- main: '#f44336',
- dark: '#ba000d',
- contrastText: '#000',
- },
- },
-});
+const color = HUE[SHADE];
```
-### Tools by the community
+{{"demo": "pages/customization/color/Color.js", "hideToolbar": true, "bg": "inline"}}
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
-- [Material palette generator](https://material.io/inline-tools/color/): The Material palette generator can be used to generate a palette for any color you input.
\ No newline at end of file
+### Exemples
+
+For instance, you can refer to complementary primary and accent colors, "red 500" and "purple A200" like so:
+
+```js
+import purple from '@material-ui/core/colors/purple';
+import red from '@material-ui/core/colors/red';
+
+const primary = red[500]; // #f44336
+const accent = purple['A200']; // #e040fb
+const accent = purple.A200; // #e040fb (alternative method)
+```
\ No newline at end of file
diff --git a/docs/src/pages/customization/color/color-ja.md b/docs/src/pages/customization/color/color-ja.md
index 4440f376b25e86..176728b13e0830 100644
--- a/docs/src/pages/customization/color/color-ja.md
+++ b/docs/src/pages/customization/color/color-ja.md
@@ -4,48 +4,45 @@
Material Design[color system](https://material.io/design/color/)を使用すると、自分のブランドやスタイルを反映した色のテーマを作成できます。
-## カラーシステム (Color system)
+## Picking colors
-### 重要な用語
-
-#### "パレット"
-
-パレットは色のコレクション、つまり色相とその色合いです。 Material-UIは、Material Designガイドラインのすべてのカラーを提供します。 [このカラーパレット](#color-palette)は、互いに調和する色でデザインされています。
-
-#### "色相" & "シェード"
+### 公式カラーツール
-パレット内の単色は、「赤」などの色相と「500」などのシェードで構成されます。 "red 50" は赤(*pink!*) の最も明るいシェードで、"red 900"は最も暗いシェードです。 また、ほとんどの色相には、先頭に`A`を持つ「アクセント」シェードが使用されます。
+The Material Design team has also built an awesome palette configuration tool: [material.io/resources/color/](https://material.io/resources/color/). これにより、UIのカラーパレットを作成したり、任意のカラー組み合わせのアクセシビリティレベルを測定したりできます。
-### 例
+
+
+
+
+
-Material Design カラーパレットは、イラストやブランドカラーの作成に使用できる原色とアクセント色で構成されています。 それらは互いに調和するように設計されています。
-たとえば、次のように補足的な原色とアクセント色(例:'red 500'&'purple A200') を参照できます。
+出力は、`createMuiTheme()`関数に渡すことができます。
```js
-import purple from '@material-ui/core/colors/purple';
-import red from '@material-ui/core/colors/red';
-
-const primary = red[500]; // #F44336
-const accent = purple['A200']; // #E040FB
-const accent = purple.A200; // #E040FB (alternative method)
-```
-
-### カラー・パレット
-
-* HUEが与えられた場合* （赤、ピンクなど）および* SHADE * （500、600など）次のように色をインポートできます。
-
-```jsx
-import HUE from '@material-ui/core/colors/HUE';
+import { createMuiTheme } from '@material-ui/core/styles';
-const color = HUE[SHADE];
+const theme = createMuiTheme({
+ palette: {
+ primary: {
+ light: '#757ce8',
+ main: '#3f50b5',
+ dark: '#002884',
+ contrastText: '#fff',
+ },
+ secondary: {
+ light: '#ff7961',
+ main: '#f44336',
+ dark: '#ba000d',
+ contrastText: '#000',
+ },
+ },
+});
```
-{{"demo": "pages/customization/color/Color.js", "hideToolbar": true, "bg": "inline"}}
-
-## カラーツール
+### Playground
-[ material.io/design/colorをテストするには](https://material.io/design/color/) Material-UIのドキュメントの配色では、以下のパレットとスライダーを使用してカラーを選択するだけです。 または、プライマリおよびセカンダリテキストフィールドに16進値を入力できます。
+To test a [material.io/design/color](https://material.io/design/color/) color scheme with the Material-UI documentation, simply select colors using the palette and sliders below. または、プライマリおよびセカンダリテキストフィールドに16進値を入力できます。
{{"demo": "pages/customization/color/ColorTool.js", "hideToolbar": true, "bg": true}}
@@ -57,7 +54,9 @@ import purple from '@material-ui/core/colors/purple';
const theme = createMuiTheme({
palette: {
- primary: purple,
+ primary: {
+ main: purple[500],
+ },
secondary: {
main: '#f44336',
},
@@ -69,39 +68,42 @@ const theme = createMuiTheme({
デフォルトの一次または二次シェード、あるいはその両方を使用している場合にカラーオブジェクトを指定すると、`createMuiTheme()`はメイン、ライト、およびダークにマテリアルカラーからの適切なシェードを使用します。
-### 公式カラーツール
+### コミュニティによるツール
-Material Designチームは素晴らしいパレット設定ツール、[materialio/tools/color](https://material.io/tools/color/)も開発しました。 これにより、UIのカラーパレットを作成したり、任意のカラー組み合わせのアクセシビリティレベルを測定したりできます。
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
+- [マテリアルパレットジェネレータ](https://material.io/inline-tools/color/) : マテリアルパレットジェネレータを使用して、入力した任意のカラーのパレットを生成できます。
-
-
-
+## 2014 Material Design color palettes
-出力は、`createMuiTheme()`関数に渡すことができます。
+These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use the palette generation tool.
+
+### 重要な用語
+
+- **Palette**: A palette is a collection of colors, i.e. hues and their shades. Material-UIは、Material Designガイドラインのすべてのカラーを提供します。 [このカラーパレット](#color-palette)は、互いに調和する色でデザインされています。
+- **Hue" & "Shade**: A single color within the palette is made up of a hue such as "red", and shade, such as "500". "red 50" は赤(*pink!*) の最も明るいシェードで、"red 900"は最も暗いシェードです。 また、ほとんどの色相には、先頭に`A`を持つ「アクセント」シェードが使用されます。
+
+### カラー・パレット
+
+* HUEが与えられた場合* （赤、ピンクなど）および* SHADE * （500、600など）次のように色をインポートできます。
```jsx
-import { createMuiTheme } from '@material-ui/core/styles';
+import HUE from '@material-ui/core/colors/HUE';
-const theme = createMuiTheme({
- palette: {
- primary: {
- light: '#757ce8',
- main: '#3f50b5',
- dark: '#002884',
- contrastText: '#fff',
- },
- secondary: {
- light: '#ff7961',
- main: '#f44336',
- dark: '#ba000d',
- contrastText: '#000',
- },
- },
-});
+const color = HUE[SHADE];
```
-### コミュニティによるツール
+{{"demo": "pages/customization/color/Color.js", "hideToolbar": true, "bg": "inline"}}
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
-- [マテリアルパレットジェネレータ](https://material.io/inline-tools/color/) : マテリアルパレットジェネレータを使用して、入力した任意のカラーのパレットを生成できます。
\ No newline at end of file
+### 例
+
+For instance, you can refer to complementary primary and accent colors, "red 500" and "purple A200" like so:
+
+```js
+import purple from '@material-ui/core/colors/purple';
+import red from '@material-ui/core/colors/red';
+
+const primary = red[500]; // #f44336
+const accent = purple['A200']; // #e040fb
+const accent = purple.A200; // #e040fb (alternative method)
+```
\ No newline at end of file
diff --git a/docs/src/pages/customization/color/color-pt.md b/docs/src/pages/customization/color/color-pt.md
index 7ca681bbabcdb9..2f223ee79a511f 100644
--- a/docs/src/pages/customization/color/color-pt.md
+++ b/docs/src/pages/customization/color/color-pt.md
@@ -4,48 +4,45 @@
O [sistema de cores](https://material.io/design/color/) do Material Design pode ser usado para criar um tema que reflete sua marca ou estilo.
-## Sistema de cor
+## Picking colors
-### Termos importantes
-
-#### "Paleta de Cores"
-
-Uma paleta é uma coleção de cores, ou seja, matizes e seus tons. Material-UI fornece todas as cores das diretrizes do Material Design. [Esta paleta de cores](#color-palette) foi projetada com cores que funcionam harmoniosamente entre si.
-
-#### "Matiz" & "Tonalidade"
+### Ferramenta oficial de cores
-Uma única cor dentro da paleta é composta de uma matiz como "red" e tonalidade, como "500". "red 50" é o tom mais claro de vermelho (*rosa!*), enquanto "red 900" é o mais escuro. Além disso, a maioria dos matizes vem com tons de "destaque" (acentuação), prefixados com um `A`.
+The Material Design team has also built an awesome palette configuration tool: [material.io/resources/color/](https://material.io/resources/color/). Isso pode ajudar você a criar uma paleta de cores para sua UI, bem como medir o nível de acessibilidade de qualquer combinação de cores.
-### Exemplos
+
+
+
+
+
-A paleta de cores do Material Design inclui cores primárias e de destaque que podem ser usadas para ilustração ou para desenvolver as cores da sua marca. Elas foram projetados para trabalhar harmoniosamente umas com as outras.
-Por exemplo, você pode se referir a cores complementares primárias e de destaque (por exemplo, 'red 500' & 'purple A200'), da seguinte forma:
+A saída pode ser alimentada na função `createMuiTheme()`:
```js
-import purple from '@material-ui/core/colors/purple';
-import red from '@material-ui/core/colors/red';
-
-const primary = red[500]; // #F44336
-const accent = purple['A200']; // #E040FB
-const accent = purple.A200; // #E040FB (método alternativo)
-```
-
-### Paleta de cores
-
-Dado que *HUE* seja (red, pink, etc.) e *SHADE* (500, 600, etc.) você pode importar a cor assim:
-
-```jsx
-import HUE from '@material-ui/core/colors/HUE';
+import { createMuiTheme } from '@material-ui/core/styles';
-const color = HUE[SHADE];
+const theme = createMuiTheme({
+ palette: {
+ primary: {
+ light: '#757ce8',
+ main: '#3f50b5',
+ dark: '#002884',
+ contrastText: '#fff',
+ },
+ secondary: {
+ light: '#ff7961',
+ main: '#f44336',
+ dark: '#ba000d',
+ contrastText: '#000',
+ },
+ },
+});
```
-{{"demo": "pages/customization/color/Color.js", "hideToolbar": true, "bg": "inline"}}
-
-## Ferramenta de cor
+### Área de exemplos
-Para testar um esquema de cores do [material.io/design/color](https://material.io/design/color/) com a documentação do Material-UI, simplesmente selecione as cores usando a paleta e os controles deslizantes abaixo. Como alternativa, você pode inserir valores hexadecimais nos campos de texto Primário e Secundário.
+To test a [material.io/design/color](https://material.io/design/color/) color scheme with the Material-UI documentation, simply select colors using the palette and sliders below. Como alternativa, você pode inserir valores hexadecimais nos campos de texto Primário e Secundário.
{{"demo": "pages/customization/color/ColorTool.js", "hideToolbar": true, "bg": true}}
@@ -57,7 +54,9 @@ import purple from '@material-ui/core/colors/purple';
const theme = createMuiTheme({
palette: {
- primary: purple,
+ primary: {
+ main: purple[500],
+ },
secondary: {
main: '#f44336',
},
@@ -69,39 +68,42 @@ Apenas o tom `main` precisa ser fornecido (a menos que você deseje customizar a
Se você estiver usando os tons primário e / ou secundário por padrão, fornecendo o objeto de cor, `createMuiTheme()` usará tons apropriados da cor do material para `main`, `light` e `dark`.
-### Ferramenta oficial de cores
+### Ferramentas da comunidade
-A equipe do Material Design também criou uma ferramenta de configuração de paleta incrível: [material.io/tools/color](https://material.io/tools/color/). Isso pode ajudar você a criar uma paleta de cores para sua UI, bem como medir o nível de acessibilidade de qualquer combinação de cores.
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): É uma ferramenta online para criar temas de Material-UI por meio da ferramenta de cor do Material Design.
+- [material-ui-tema-editor](https://in-your-saas.github.io/material-ui-theme-editor/): Uma ferramenta para gerar temas para seus aplicativos de Material-UI, basta selecionar as cores e ter uma visualização ao vivo.
+- [Material palette generator](https://material.io/inline-tools/color/): O gerador de paleta do Material pode ser usado para gerar uma paleta para qualquer cor que você inserir.
-
-
-
+## 2014 Material Design color palettes
-A saída pode ser alimentada na função `createMuiTheme()`:
+These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use the palette generation tool.
+
+### Termos importantes
+
+- **Palette**: A palette is a collection of colors, i.e. hues and their shades. Material-UI fornece todas as cores das diretrizes do Material Design. [Esta paleta de cores](#color-palette) foi projetada com cores que funcionam harmoniosamente entre si.
+- **Hue" & "Shade**: A single color within the palette is made up of a hue such as "red", and shade, such as "500". "red 50" é o tom mais claro de vermelho (*rosa!*), enquanto "red 900" é o mais escuro. Além disso, a maioria dos matizes vem com tons de "destaque" (acentuação), prefixados com um `A`.
+
+### Paleta de cores
+
+Dado que *HUE* seja (red, pink, etc.) e *SHADE* (500, 600, etc.) você pode importar a cor assim:
```jsx
-import { createMuiTheme } from '@material-ui/core/styles';
+import HUE from '@material-ui/core/colors/HUE';
-const theme = createMuiTheme({
- palette: {
- primary: {
- light: '#757ce8',
- main: '#3f50b5',
- dark: '#002884',
- contrastText: '#fff',
- },
- secondary: {
- light: '#ff7961',
- main: '#f44336',
- dark: '#ba000d',
- contrastText: '#000',
- },
- },
-});
+const color = HUE[SHADE];
```
-### Ferramentas da comunidade
+{{"demo": "pages/customization/color/Color.js", "hideToolbar": true, "bg": "inline"}}
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): É uma ferramenta online para criar temas de Material-UI por meio da ferramenta de cor do Material Design.
-- [material-ui-tema-editor](https://in-your-saas.github.io/material-ui-theme-editor/): Uma ferramenta para gerar temas para seus aplicativos de Material-UI, basta selecionar as cores e ter uma visualização ao vivo.
-- [Material palette generator](https://material.io/inline-tools/color/): O gerador de paleta do Material pode ser usado para gerar uma paleta para qualquer cor que você inserir.
\ No newline at end of file
+### Exemplos
+
+For instance, you can refer to complementary primary and accent colors, "red 500" and "purple A200" like so:
+
+```js
+import purple from '@material-ui/core/colors/purple';
+import red from '@material-ui/core/colors/red';
+
+const primary = red[500]; // #f44336
+const accent = purple['A200']; // #e040fb
+const accent = purple.A200; // #e040fb (alternative method)
+```
\ No newline at end of file
diff --git a/docs/src/pages/customization/color/color-ru.md b/docs/src/pages/customization/color/color-ru.md
index a800c9b01a6247..d2fb6a9b5c8a93 100644
--- a/docs/src/pages/customization/color/color-ru.md
+++ b/docs/src/pages/customization/color/color-ru.md
@@ -4,48 +4,45 @@
[Система цветов](https://material.io/design/color/) Material Design может быть использована для создания цветовой темы, которая отражает ваш бренд или стиль.
-## Цветовая система
+## Picking colors
-### Важные термины
-
-#### "Палитра"
-
-Палитра - это набор цветов, то есть тонов и их оттенков. Материал-UI предоставляет все цвета из руководящих принципов Material Design. [This color palette](#color-palette) has been designed with colors that work harmoniously with each other.
-
-#### "Оттенок" и "Тень"
+### Официальный инструмент для работы с цветом
-Отдельно взятый цвет в палитре состоит из цветового тона, например «красный», и оттенка, например «500». «red 50» - самый светлый оттенок красного (* розовый! *), а «red 900» самый темный. Кроме того, большинство тонов имеют «акцентные» оттенки с префиксом `A`.
+The Material Design team has also built an awesome palette configuration tool: [material.io/resources/color/](https://material.io/resources/color/). This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.
-### Примеры
+
+
+
+
+
-Цветовая палитра Material Design включает в себя основные и акцентные цвета, которые можно использовать для иллюстрации или для разработки цвета вашего бренда. Они создавались таким образом, чтобы гармонировать друг с другом.
-Вы можете обратиться к дополнительным первичным и акцентным цветам (таким как «red 500» & «purple A200»), например:
+The output can be fed into `createMuiTheme()` function:
```js
-import purple from '@material-ui/core/colors/purple';
-import red from '@material-ui/core/colors/red';
-
-const primary = red[500]; // #F44336
-const accent = purple['A200']; // #E040FB
-const accent = purple.A200; // #E040FB (alternative method)
-```
-
-### Цветовая палитра
-
-Зная тон *HUE* (red, pink и т. д.) и оттенок *SHADE* (500, 600 и т. д.), можно импортировать цвет следующим образом:
-
-```jsx
-import HUE from '@material-ui/core/colors/HUE';
+import { createMuiTheme } from '@material-ui/core/styles';
-const color = HUE[SHADE];
+const theme = createMuiTheme({
+ palette: {
+ primary: {
+ light: '#757ce8',
+ main: '#3f50b5',
+ dark: '#002884',
+ contrastText: '#fff',
+ },
+ secondary: {
+ light: '#ff7961',
+ main: '#f44336',
+ dark: '#ba000d',
+ contrastText: '#000',
+ },
+ },
+});
```
-{{"demo": "pages/customization/color/Color.js", "hideToolbar": true, "bg": "inline"}}
-
-## Инструменты для работы с цветом
+### Песочница
-Используйте палитру и слайдеры, расположенные ниже, чтобы опробовать цветовую схему [material.io/design/color](https://material.io/design/color/) на документации Material-UI. Либо можете ввести шестнадцатеричные значения в текстовые поля Primary и Secondary.
+To test a [material.io/design/color](https://material.io/design/color/) color scheme with the Material-UI documentation, simply select colors using the palette and sliders below. Либо можете ввести шестнадцатеричные значения в текстовые поля Primary и Secondary.
{{"demo": "pages/customization/color/ColorTool.js", "hideToolbar": true, "bg": true}}
@@ -57,7 +54,9 @@ import purple from '@material-ui/core/colors/purple';
const theme = createMuiTheme({
palette: {
- primary: purple,
+ primary: {
+ main: purple[500],
+ },
secondary: {
main: '#f44336',
},
@@ -69,39 +68,42 @@ Only the `main` shades need be provided (unless you wish to further customize `l
If you are using the default primary and / or secondary shades then by providing the color object, `createMuiTheme()` will use the appropriate shades from the material color for main, light and dark.
-### Официальный инструмент для работы с цветом
+### Инструменты, созданные сообществом
-The Material Design team has also built an awesome palette configuration tool: [material.io/tools/color](https://material.io/tools/color/). This can help you create a color palette for your UI, as well as measure the accessibility level of any color combination.
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
+- [Material palette generator](https://material.io/inline-tools/color/): Этот инструмент можно использовать для создания палитры на основе любого выбранного цвета.
-
-
-
+## 2014 Material Design color palettes
-The output can be fed into `createMuiTheme()` function:
+These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use the palette generation tool.
+
+### Важные термины
+
+- **Palette**: A palette is a collection of colors, i.e. hues and their shades. Материал-UI предоставляет все цвета из руководящих принципов Material Design. [This color palette](#color-palette) has been designed with colors that work harmoniously with each other.
+- **Hue" & "Shade**: A single color within the palette is made up of a hue such as "red", and shade, such as "500". «red 50» - самый светлый оттенок красного (* розовый! *), а «red 900» самый темный. Кроме того, большинство тонов имеют «акцентные» оттенки с префиксом `A`.
+
+### Цветовая палитра
+
+Зная тон *HUE* (red, pink и т. д.) и оттенок *SHADE* (500, 600 и т. д.), можно импортировать цвет следующим образом:
```jsx
-import { createMuiTheme } from '@material-ui/core/styles';
+import HUE from '@material-ui/core/colors/HUE';
-const theme = createMuiTheme({
- palette: {
- primary: {
- light: '#757ce8',
- main: '#3f50b5',
- dark: '#002884',
- contrastText: '#fff',
- },
- secondary: {
- light: '#ff7961',
- main: '#f44336',
- dark: '#ba000d',
- contrastText: '#000',
- },
- },
-});
+const color = HUE[SHADE];
```
-### Инструменты, созданные сообществом
+{{"demo": "pages/customization/color/Color.js", "hideToolbar": true, "bg": "inline"}}
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): Is an online tool for creating Material-UI themes via Material Design Color Tool.
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/): A tool to generate themes for your Material-UI applications by just selecting the colors and having a live preview.
-- [Material palette generator](https://material.io/inline-tools/color/): Этот инструмент можно использовать для создания палитры на основе любого выбранного цвета.
\ No newline at end of file
+### Примеры
+
+For instance, you can refer to complementary primary and accent colors, "red 500" and "purple A200" like so:
+
+```js
+import purple from '@material-ui/core/colors/purple';
+import red from '@material-ui/core/colors/red';
+
+const primary = red[500]; // #f44336
+const accent = purple['A200']; // #e040fb
+const accent = purple.A200; // #e040fb (alternative method)
+```
\ No newline at end of file
diff --git a/docs/src/pages/customization/color/color-zh.md b/docs/src/pages/customization/color/color-zh.md
index a7f48cb3e5ca5f..4042ce9c3fe182 100644
--- a/docs/src/pages/customization/color/color-zh.md
+++ b/docs/src/pages/customization/color/color-zh.md
@@ -4,48 +4,45 @@
使用 Material Design 的[颜色系统](https://material.io/design/color/)，您可创建表现独特品牌或风格的颜色主题。
-## 颜色系统
+## Picking colors
-### 一些重要的术语
-
-#### "调色板（Palette）"
-
-一个调色板是颜色合集，譬如即色调和它们的阴影。 Material-UI 涵盖了 Material Design 指南中的所有颜色。 设计[此调色板](#color-palette)时，我们确保了各个颜色之间的协调。
+### 官方色彩工具
-#### “色彩”和“阴影”
+The Material Design team has also built an awesome palette configuration tool: [material.io/resources/color/](https://material.io/resources/color/). 它会帮助你为你的 UI 建立自己的色彩集合，同时也会帮助测量每个颜色组合的可访问性。
-调色板中的单色由一个诸如“红色”的色调，以及一个诸如“500”的阴影调和而成。 “red 50”是红色的最浅的一度 (* 粉红色! *)，而“red 900”是最暗的。 除此之外，大多数的色调都带有以 `A` 为前缀的强调（accent）色调。
-
-### 例子
+
+
+
+
+
-Material Design 调色板包括主要（primary）和强调（accent）颜色，它们可用于展示或开发您的品牌颜色。 它们彼此可以协调地呈现。
-例如，您可以参考互补主要颜色（complementary primary）和强调（accent）颜色（例如“red 500”和“purple A200”）：
+它的输出可以使用在` createMuiTheme() ` 函数：
```js
-import purple from '@material-ui/core/colors/purple';
-import red from '@material-ui/core/colors/red';
-
-const primary = red[500]; // #F44336
-const accent = purple['A200']; // #E040FB
-const accent = purple.A200; // #E040FB (替代方法)
-```
-
-### 调色板
-
-若给定了一种*色调*（如红色，粉红色等）以及一个*阴影* （500，600等），你可以这样导入颜色：
-
-```jsx
-import HUE from '@material-ui/core/colors/HUE';
+import { createMuiTheme } from '@material-ui/core/styles';
-const color = HUE[SHADE];
+const theme = createMuiTheme({
+ palette: {
+ primary: {
+ light: '#757ce8',
+ main: '#3f50b5',
+ dark: '#002884',
+ contrastText: '#fff',
+ },
+ secondary: {
+ light: '#ff7961',
+ main: '#f44336',
+ dark: '#ba000d',
+ contrastText: '#000',
+ },
+ },
+});
```
-{{"demo": "pages/customization/color/Color.js", "hideToolbar": true, "bg": "inline"}}
-
-## 颜色工具
+### 练习
-若想使用 Material-UI 文档来测试 [material.io/design/color](https://material.io/design/color/) 的颜色方案，你只需使用下面的调色板和滑块来选择颜色。 或者，您可以在 “Primary ”和 “Secondary” 两个文本框中输入 hex 色彩码。
+To test a [material.io/design/color](https://material.io/design/color/) color scheme with the Material-UI documentation, simply select colors using the palette and sliders below. 或者, 您可以在“Primary”和“Secondary”文本字段中输入十六进制值.
{{"demo": "pages/customization/color/ColorTool.js", "hideToolbar": true, "bg": true}}
@@ -57,7 +54,9 @@ import purple from '@material-ui/core/colors/purple';
const theme = createMuiTheme({
palette: {
- primary: purple,
+ primary: {
+ main: purple[500],
+ },
secondary: {
main: '#f44336',
},
@@ -67,41 +66,44 @@ const theme = createMuiTheme({
您只需提供 `主要的` 阴影（除非您希望进一步自定义 `light`，`dark` 或 `contrastText` 这几个属性）。在 [自定义主题](/customization/palette/) 章节提到了这样的原因是其他颜色会由 `createMuiTheme()` 自动计算。
-如果您使用的是默认的主色调和/或副色调，那么通过提供一个颜色对象，`createMuiTheme()` 则会从 material 颜色里提取的合适的阴影来构成主色，浅色和深色。
+如果你通过提供 color object 的方式 使用默认的主要阴影 和/或 次要阴影，`createMuiTheme()` 将会根据 主、亮和暗 三种 material 颜色选择合适的阴影。
-### 官方的色彩工具
+### 社区工具
-Material Design 团队还打造了一款超棒的调色板配置工具： [material.io/tools/color](https://material.io/tools/color/)。 它会为你的 UI 建立一个色彩的集合，同时也会评估不同颜色组合的可访问性。
+- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): 使用 Material Design 颜色工具来创建 Material-UI 主题的在线工具。
+- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/)：只需要选择颜色即可为你的 Material-UI 应用生成主题的工具，同时还支持在线预览。
+- [Material palette generator](https://material.io/inline-tools/color/)：它可用于通过您输入的任何颜色生成一系列的调色板。
-
-
-
+## 2014 Material Design color palettes
+
+These color palettes, originally created by Material Design in 2014, are comprised of colors designed to work together harmoniously, and can be used to develop your brand palette. To generate your own harmonious palettes, use the palette generation tool.
+
+### 一些重要的术语
+
+- **Palette**: A palette is a collection of colors, i.e. hues and their shades. Material-UI 提供Material Design 指南中的所有颜色. 设计[此调色板](#color-palette)时，我们确保了各个颜色之间的协调。
+- **Hue" & "Shade**: A single color within the palette is made up of a hue such as "red", and shade, such as "500". "rad 50" 是红色的最浅的阴影 (* 粉红色! *), 而 "red 900" 是最暗的。 此外, 大多数色调都带有强调色调, 以 ` A ` 为前缀。
+
+### 调色板
-` createMuiTheme() ` 函数可以使用此输出结果：
+若给定了一种*色调*（如红色，粉红色等）以及一个*阴影* （500，600等），你可以这样导入颜色：
```jsx
-import { createMuiTheme } from '@material-ui/core/styles';
+import HUE from '@material-ui/core/colors/HUE';
-const theme = createMuiTheme({
- palette: {
- primary: {
- light: '#757ce8',
- main: '#3f50b5',
- dark: '#002884',
- contrastText: '#fff',
- },
- secondary: {
- light: '#ff7961',
- main: '#f44336',
- dark: '#ba000d',
- contrastText: '#000',
- },
- },
-});
+const color = HUE[SHADE];
```
-### 社区提供的一些工具
+{{"demo": "pages/customization/color/Color.js", "hideToolbar": true, "bg": "inline"}}
-- [create-mui-theme](https://react-theming.github.io/create-mui-theme/): 使用 Material Design 颜色工具来创建 Material-UI 主题的在线工具。
-- [material-ui-theme-editor](https://in-your-saas.github.io/material-ui-theme-editor/)：只需要选择颜色即可为你的 Material-UI 应用生成主题的工具，同时还支持在线预览。
-- [Material palette generator](https://material.io/inline-tools/color/)：它可用于通过您输入的任何颜色生成一系列的调色板。
\ No newline at end of file
+### 例子
+
+For instance, you can refer to complementary primary and accent colors, "red 500" and "purple A200" like so:
+
+```js
+import purple from '@material-ui/core/colors/purple';
+import red from '@material-ui/core/colors/red';
+
+const primary = red[500]; // #f44336
+const accent = purple['A200']; // #e040fb
+const accent = purple.A200; // #e040fb (alternative method)
+```
\ No newline at end of file
diff --git a/docs/src/pages/customization/components/components-zh.md b/docs/src/pages/customization/components/components-zh.md
index 2c21efd648ec5c..5f7081cea0e1c5 100644
--- a/docs/src/pages/customization/components/components-zh.md
+++ b/docs/src/pages/customization/components/components-zh.md
@@ -22,7 +22,7 @@
{{"demo": "pages/customization/components/ClassNames.js"}}
-### 用类（classes）覆盖样式
+### 用类覆盖样式
当 `className` 属性不足够时，你需要访问更深层的元素，这时则可使用`classes` 对象属性，这样就能够自定义该组件中所有由 Material-UI 注入的 CSS。
@@ -77,9 +77,9 @@ const StyledButton = withStyles({
### CSS 伪类（Pseudo-classes）
-组件特殊状态，如* hover * ，* focus * ，* disabled *和* selected * ，具有更高的CSS特异性。 [特异性是一种重量](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)这适用于给定的CSS声明。
+组件会有一些特殊的状态，如 *hover* ，*focus* ，*disabled* 和 *selected* ，它们被一些更高的 CSS 特异性所装饰。 [特异性是一种加权](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity)，它适用于给定的 CSS 声明。
-为了覆盖组件的特殊状态，**需要提高特异性** 。 下面是一个示例，其中 *disabled* 状态，按钮组件使用 **伪类** （`disabled`）：
+为了覆盖组件的特殊状态，**你会需要提高特殊性** 。 下面是一个示例，它展示了 *disabled* 状态，以及一个使用**伪类**的按钮组件（`disabled`）：
```css
.Button {
@@ -94,7 +94,7 @@ const StyledButton = withStyles({