From 33add4f961d013bfabfe4326f620a07cf601c624 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 6 Jun 2020 19:19:16 +0200 Subject: [PATCH] [docs] Sync translations --- .../about-the-lab/about-the-lab-zh.md | 8 +- .../autocomplete/autocomplete-pt.md | 8 +- .../autocomplete/autocomplete-zh.md | 14 +- .../pages/components/buttons/buttons-pt.md | 8 +- .../pages/components/buttons/buttons-zh.md | 8 +- docs/src/pages/components/cards/cards-es.md | 6 +- .../components/checkboxes/checkboxes-pt.md | 2 +- .../components/container/container-es.md | 2 +- .../css-baseline/css-baseline-zh.md | 2 +- docs/src/pages/components/paper/paper-es.md | 2 +- .../pages/components/progress/progress-zh.md | 8 +- .../radio-buttons/radio-buttons-zh.md | 2 +- .../pages/components/skeleton/skeleton-pt.md | 8 +- .../pages/components/skeleton/skeleton-zh.md | 10 +- .../components/snackbars/snackbars-zh.md | 18 +-- .../pages/components/steppers/steppers-zh.md | 36 +++--- .../pages/components/switches/switches-pt.md | 2 +- docs/src/pages/components/tabs/tabs-aa.md | 8 +- docs/src/pages/components/tabs/tabs-de.md | 11 +- docs/src/pages/components/tabs/tabs-es.md | 11 +- docs/src/pages/components/tabs/tabs-fr.md | 11 +- docs/src/pages/components/tabs/tabs-ja.md | 11 +- docs/src/pages/components/tabs/tabs-pt.md | 11 +- docs/src/pages/components/tabs/tabs-ru.md | 11 +- docs/src/pages/components/tabs/tabs-zh.md | 31 +++-- .../toggle-button/toggle-button-zh.md | 2 +- .../components/typography/typography-pt.md | 8 +- .../components/typography/typography-zh.md | 6 +- .../breakpoints/breakpoints-aa.md | 50 +++---- .../breakpoints/breakpoints-de.md | 12 +- .../breakpoints/breakpoints-es.md | 12 +- .../breakpoints/breakpoints-fr.md | 12 +- .../breakpoints/breakpoints-ja.md | 12 +- .../breakpoints/breakpoints-pt.md | 16 ++- .../breakpoints/breakpoints-ru.md | 12 +- .../breakpoints/breakpoints-zh.md | 12 +- .../src/pages/customization/color/color-aa.md | 82 ++++++------ .../src/pages/customization/color/color-de.md | 120 ++++++++--------- .../src/pages/customization/color/color-es.md | 120 ++++++++--------- .../src/pages/customization/color/color-fr.md | 118 ++++++++--------- .../src/pages/customization/color/color-ja.md | 120 ++++++++--------- .../src/pages/customization/color/color-pt.md | 120 ++++++++--------- .../src/pages/customization/color/color-ru.md | 120 ++++++++--------- .../src/pages/customization/color/color-zh.md | 122 +++++++++--------- .../customization/components/components-zh.md | 60 ++++----- .../pages/customization/globals/globals-zh.md | 2 +- .../pages/customization/palette/palette-aa.md | 113 +++++++++------- .../pages/customization/palette/palette-de.md | 102 +++++++++++---- .../pages/customization/palette/palette-es.md | 102 +++++++++++---- .../pages/customization/palette/palette-fr.md | 102 +++++++++++---- .../pages/customization/palette/palette-ja.md | 102 +++++++++++---- .../pages/customization/palette/palette-pt.md | 102 +++++++++++---- .../pages/customization/palette/palette-ru.md | 102 +++++++++++---- .../pages/customization/palette/palette-zh.md | 102 +++++++++++---- .../pages/customization/theming/theming-aa.md | 7 +- .../pages/customization/theming/theming-de.md | 11 +- .../pages/customization/theming/theming-es.md | 11 +- .../pages/customization/theming/theming-fr.md | 11 +- .../pages/customization/theming/theming-ja.md | 11 +- .../pages/customization/theming/theming-pt.md | 11 +- .../pages/customization/theming/theming-ru.md | 11 +- .../pages/customization/theming/theming-zh.md | 57 ++++---- .../pages/customization/z-index/z-index-zh.md | 2 +- .../related-projects/related-projects-pt.md | 22 ++-- .../supported-platforms-aa.md | 6 +- .../supported-platforms-de.md | 6 +- .../supported-platforms-es.md | 6 +- .../supported-platforms-fr.md | 6 +- .../supported-platforms-ja.md | 6 +- .../supported-platforms-pt.md | 6 +- .../supported-platforms-ru.md | 6 +- .../supported-platforms-zh.md | 8 +- docs/src/pages/guides/api/api-pt.md | 18 +-- .../interoperability/interoperability-pt.md | 2 +- .../guides/localization/localization-zh.md | 2 +- .../guides/migration-v0x/migration-v0x-zh.md | 10 +- .../guides/migration-v3/migration-v3-zh.md | 6 +- .../pages/guides/typescript/typescript-aa.md | 68 +++++----- .../pages/guides/typescript/typescript-de.md | 6 +- .../pages/guides/typescript/typescript-es.md | 4 +- .../pages/guides/typescript/typescript-fr.md | 4 +- .../pages/guides/typescript/typescript-ja.md | 12 +- .../pages/guides/typescript/typescript-pt.md | 4 +- .../pages/guides/typescript/typescript-ru.md | 4 +- .../pages/guides/typescript/typescript-zh.md | 8 +- docs/src/pages/production-error/index-aa.md | 7 + docs/src/pages/production-error/index-de.md | 7 + docs/src/pages/production-error/index-es.md | 7 + docs/src/pages/production-error/index-fr.md | 7 + docs/src/pages/production-error/index-ja.md | 7 + docs/src/pages/production-error/index-pt.md | 7 + docs/src/pages/production-error/index-ru.md | 7 + docs/src/pages/production-error/index-zh.md | 7 + docs/src/pages/styles/advanced/advanced-zh.md | 2 +- docs/src/pages/system/basics/basics-zh.md | 2 +- docs/src/pages/system/display/display-zh.md | 34 ++--- docs/src/pages/versions/versions-zh.md | 26 ++-- docs/translations/translations-zh.json | 2 +- 98 files changed, 1637 insertions(+), 1051 deletions(-) create mode 100644 docs/src/pages/production-error/index-aa.md create mode 100644 docs/src/pages/production-error/index-de.md create mode 100644 docs/src/pages/production-error/index-es.md create mode 100644 docs/src/pages/production-error/index-fr.md create mode 100644 docs/src/pages/production-error/index-ja.md create mode 100644 docs/src/pages/production-error/index-pt.md create mode 100644 docs/src/pages/production-error/index-ru.md create mode 100644 docs/src/pages/production-error/index-zh.md diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-zh.md b/docs/src/pages/components/about-the-lab/about-the-lab-zh.md index 246e89956f5aca..d90dc7bfd14e05 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-zh.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-zh.md @@ -4,16 +4,16 @@ 核心库（core）和实验室（lab）最主要的差别在于对组件进行版本管理的方式。 拥有独立的实验室版本，我们就可以在必要的时候发布一些会影响原本代码的改动，并且核心库遵循 [slower-moving policy](https://material-ui.com/versions/#release-frequency) -程序员在使用和测试组件后向项目报漏洞，维护者就知道更多关于组件的缺点：如缺少功能，能不能访问的问题、漏洞，API设计等等的问题 一个组建被使用的时间越久，新问题被发现以及因此需要引入重大更改的可能性就越少。 +程序员在使用和测试组件后向项目报漏洞，维护者就知道更多关于组件的缺点：如缺少功能，能不能访问的问题、漏洞，API 设计等等的问题 一个组建被使用的时间越久，新问题被发现以及因此需要引入重大更改的可能性就越少。 那些准备放到核心库里的组件，需要考虑以下几点： * 它需要**被使用过** Material-UI 团队使用谷歌分析的数据去评估每个组件的使用情况。 如果一个实验室组件使用量太少，意味着它并不能全部正常工作，或者需求量比较小。 -* 它需要和核心组件的**代码质量**相似 作为核心代码的一部分，它不需要很完美，但是这个组件应该要很可靠，要另其他开发者可以依赖它 - * 每个组件需要**类型定义** 就目前来说，实验室组件不需要定义类型，但是当搬到核心代码之后就需要定义好类型了。 +* 它需要和核心组件的**代码质量**相似。 作为核心代码的一部分，它不需要很完美，但是这个组件应该要很可靠，要另其他开发者可以依赖它。 + * 每个组件需要**类型定义**。 就目前来说，实验室组件不需要定义类型，但是当搬到核心代码之后就需要定义好类型了。 * 需要一个好的**测试覆盖率**。 有一些实验室组件目前并没有进行综合的测试。 * 这个组建是否可以作为一个激励用户更新到最新版本的**杠杆**？ 一个社区的分裂程度越低越好。 -* 需要极少可能地在不久地将来就引入**重大更改**。 例如，如果它需要一个新的功能并因此将有可能引入重大更改，那么最好推迟将其纳入核心库。 +* 需要极少可能地在不久地将来就引入**破坏性变更**。 例如，如果它需要一个新的功能并因此将有可能引入重大更改，那么最好推迟将其纳入核心库。 ## 安装 diff --git a/docs/src/pages/components/autocomplete/autocomplete-pt.md b/docs/src/pages/components/autocomplete/autocomplete-pt.md index 7a5bc4402ee39e..bfe661b37e79cf 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-pt.md +++ b/docs/src/pages/components/autocomplete/autocomplete-pt.md @@ -136,15 +136,15 @@ Gosta mais de campos de texto menores? Use a propriedade `size`. {{"demo": "pages/components/autocomplete/Sizes.js"}} -## Customizations +## Customizações -### Custom input +### Input customizado -The `renderInput` prop allows you to customize the rendered input. The first argument of this render prop contains props that you need to forward. Pay specific attention to the `ref` and `inputProps` keys. +A propriedade `renderInput` permite que você customize o input renderizado. O primeiro argumento desta propriedade de render, contém propriedades que você precisa repassar. Preste atenção específicamente nas chaves `ref` e `inputProps`. {{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} -### GitHub's picker +### Seletor do GitHub Esta demonstração reproduz o rótulo de selecão do GitHub's: diff --git a/docs/src/pages/components/autocomplete/autocomplete-zh.md b/docs/src/pages/components/autocomplete/autocomplete-zh.md index 489c64e83d89a2..c92771960b78a8 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-zh.md +++ b/docs/src/pages/components/autocomplete/autocomplete-zh.md @@ -49,13 +49,13 @@ components: TextField, Popper, Autocomplete ### 搜索输入栏 -该 prop 是皆在涵盖带有搜索建议的 **输入栏** 的主要用例，例如 Google 搜索 或 react-autowhatever。 +该属性的主要使用方式是创建一个带有搜索建议的 **输入栏**，例如 Google 搜索 或 react-autowhatever。 {{"demo": "pages/components/autocomplete/FreeSolo.js"}} -### 可创建的 +### Creatable （可创造性） -如果您打算将此模式用于类似 [组合框](#combo-box) 的体验（选择控件元素的增强版），我们建议设置： +如果您打算将此模块用于类似 [组合框](#combo-box) 的体验（选择控件元素的增强版），我们建议设置： - `selectOnFocus` 帮助用户清除所选值。 - `clearOnBlur` 帮助用户输入一个新的值。 @@ -136,15 +136,15 @@ import useAutocomplete from '@material-ui/lab/useAutocomplete'; {{"demo": "pages/components/autocomplete/Sizes.js"}} -## Customizations +## 自定义设置 -### Custom input +### 自定义输入 -The `renderInput` prop allows you to customize the rendered input. The first argument of this render prop contains props that you need to forward. Pay specific attention to the `ref` and `inputProps` keys. +`renderInput` 属性允许你对输入内容进行自定义渲染 The first argument of this render prop contains props that you need to forward. 请特别注意 `ref` 和 `inputProps` 键(key)。 {{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} -### GitHub's picker +### GitHub 标签选择器 该演示再现了GitHub的标签选择器： diff --git a/docs/src/pages/components/buttons/buttons-pt.md b/docs/src/pages/components/buttons/buttons-pt.md index 41685cdb402139..dc67f986b18bd9 100644 --- a/docs/src/pages/components/buttons/buttons-pt.md +++ b/docs/src/pages/components/buttons/buttons-pt.md @@ -44,15 +44,15 @@ Botões delineados são uma alternativa de menor ênfase comparado com botões c {{"demo": "pages/components/buttons/OutlinedButtons.js"}} -## Handling clicks +## Manipulando cliques -All components accept an `onClick` handler that is applied to the root DOM element. +Todos os componentes aceitam um método manipulador `onClick` que é aplicado ao elemento DOM raiz. ```jsx - + ``` -Note that the documentation [avoids](/guides/api/#native-properties) mentioning native props (there are a lot) in the API section of the components. +Note que a documentação [evita](/guides/api/#native-properties) mencionar as propriedades nativas (existem várias) na seção de API dos componentes. ## Botão de Upload diff --git a/docs/src/pages/components/buttons/buttons-zh.md b/docs/src/pages/components/buttons/buttons-zh.md index 6e5fb477c7f013..e209cf2828958e 100644 --- a/docs/src/pages/components/buttons/buttons-zh.md +++ b/docs/src/pages/components/buttons/buttons-zh.md @@ -44,17 +44,17 @@ components: Button, IconButton, ButtonBase {{"demo": "pages/components/buttons/OutlinedButtons.js"}} -## Handling clicks +## Handling clicks 处理点击 -All components accept an `onClick` handler that is applied to the root DOM element. +所有组件都接受 `onClick` 处理程序，该处理程序被应用到 根(root) DOM 元素。 ```jsx ``` -Note that the documentation [avoids](/guides/api/#native-properties) mentioning native props (there are a lot) in the API section of the components. +请注意，文档里组件的 api 部分 [避免](/guides/api/#native-properties) 提到大量的 原生(native) 属性。 -## 一个上传按钮 +## Upload button 上传按钮 {{"demo": "pages/components/buttons/UploadButtons.js"}} diff --git a/docs/src/pages/components/cards/cards-es.md b/docs/src/pages/components/cards/cards-es.md index 704080632c7edd..8fce4869d9e1f2 100644 --- a/docs/src/pages/components/cards/cards-es.md +++ b/docs/src/pages/components/cards/cards-es.md @@ -9,7 +9,7 @@ components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedi Las [Tarjetas](https://material.io/design/components/cards.html) son superficies que muestran contenido y acciones sobre un tema particular. -They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy. +Deberían ser fáciles de visualizar sus acciones e información relevante. Los elementos como textos e imágenes deberían ubicarse de forma que indiquen jerarquía. ## Tarjeta simple @@ -17,9 +17,9 @@ Aunque las tarjetas pueden permitir múltiples acciones, controles de la interfa {{"demo": "pages/components/cards/SimpleCard.js", "bg": true}} -### Outlined Card +### Tarjeta con bordes -Set `variant="outlined"` to render an outlined card. +Usa `variant="outlined"` para mostrar una tarjeta con bordes. {{"demo": "pages/components/cards/OutlinedCard.js", "bg": true}} diff --git a/docs/src/pages/components/checkboxes/checkboxes-pt.md b/docs/src/pages/components/checkboxes/checkboxes-pt.md index bdb04237041cd4..25be7e1b92d132 100644 --- a/docs/src/pages/components/checkboxes/checkboxes-pt.md +++ b/docs/src/pages/components/checkboxes/checkboxes-pt.md @@ -27,7 +27,7 @@ O componente `Checkbox` pode ser fornecido com um rótulo graças ao componente {{"demo": "pages/components/checkboxes/CheckboxesGroup.js"}} -## Label placement +## Posicionamento do rótulo Você pode alterar o posicionamento do rótulo: diff --git a/docs/src/pages/components/container/container-es.md b/docs/src/pages/components/container/container-es.md index 274d5dccc39453..fe1c9a35753167 100644 --- a/docs/src/pages/components/container/container-es.md +++ b/docs/src/pages/components/container/container-es.md @@ -11,7 +11,7 @@ Si bien los contenedores pueden anidarse, la mayoria de los layouts no requieren ## Fluido -A fluid container width is bounded by the `maxWidth` property value. +El ancho de un contenedor fluido está ligado al valor de la propiedad `maxWidth`. {{"demo": "pages/components/container/SimpleContainer.js", "iframe": true, "defaultCodeOpen": false}} diff --git a/docs/src/pages/components/css-baseline/css-baseline-zh.md b/docs/src/pages/components/css-baseline/css-baseline-zh.md index b55bb4c59a6419..ccf4af617d36e0 100644 --- a/docs/src/pages/components/css-baseline/css-baseline-zh.md +++ b/docs/src/pages/components/css-baseline/css-baseline-zh.md @@ -58,7 +58,7 @@ export default function MyApp() { - 在 `` 元素里面，我们将 `box-sizing` 全局设置为 `border-box`。 这样一来，包括 `*:: before` 和 `*:: after` 的每个元素，都会被声明来继承这个属性，这样能够确保元素的声明宽度永远不会超过 padding 或者 border。 -### 文字排版 +### Typography - 在 `` 里面不会声明基础的 font-size，但是我们假设是 16px (浏览器的默认设置)。 您可以在[主题文档](/customization/typography/#typography-html-font-size) 页面中了解更多有关更改 `` 默认字体大小的影响 。 - 在 `theme.typography.body2` 元素上设置 `` 样式。 diff --git a/docs/src/pages/components/paper/paper-es.md b/docs/src/pages/components/paper/paper-es.md index d97b1875ac4743..eedd22b370870b 100644 --- a/docs/src/pages/components/paper/paper-es.md +++ b/docs/src/pages/components/paper/paper-es.md @@ -13,6 +13,6 @@ El fondo de una aplicación asemeja la textura plana, opaca de una hoja de papel ## Variants -If you need an outlined surface, use the `variant` prop. +Si necesitas una superficie con bordes, usa la propiedad `variant`. {{"demo": "pages/components/paper/Variants.js", "bg": "inline"}} \ No newline at end of file diff --git a/docs/src/pages/components/progress/progress-zh.md b/docs/src/pages/components/progress/progress-zh.md index 7e869a44355bc1..cd435f66aa50a9 100644 --- a/docs/src/pages/components/progress/progress-zh.md +++ b/docs/src/pages/components/progress/progress-zh.md @@ -1,11 +1,11 @@ --- -title: React Circular 进度环, React Linear progress 进度条组件 +title: React Circular progress（进度环组件），React Linear progress （进度条组件） components: CircularProgress, LinearProgress --- -# Progress 进度条 +# Progress 进度条组件 -

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) { ![高负载](/static/images/progress/heavy-load.gif) -当它不可用时，您可以利用 `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 包含一行直接与所执行操作相关的文本。 它们可能包 ![评星](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars) ![npm下载](https://img.shields.io/npm/dm/notistack.svg) -以下例子演示了如何使用 [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 */ + +/* Tabs where each tab needs to be selected manually */ + +``` + {{"demo": "pages/components/tabs/AccessibleTabs.js", "bg": true}} ## Experimental API diff --git a/docs/src/pages/components/tabs/tabs-es.md b/docs/src/pages/components/tabs/tabs-es.md index 87b2953c743d1f..7efbb8d7b1eeb8 100644 --- a/docs/src/pages/components/tabs/tabs-es.md +++ b/docs/src/pages/components/tabs/tabs-es.md @@ -1,6 +1,6 @@ --- title: Tabs React component -components: Tabs, Tab, TabScrollButton +components: Tabs, Tab, TabScrollButton, TabContext, TabList, TabPanel --- # Pestañas @@ -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 */ + +/* Tabs where each tab needs to be selected manually */ + +``` + {{"demo": "pages/components/tabs/AccessibleTabs.js", "bg": true}} ## Experimental API diff --git a/docs/src/pages/components/tabs/tabs-fr.md b/docs/src/pages/components/tabs/tabs-fr.md index ca80b8131f5055..dd18b168bfd7ae 100644 --- a/docs/src/pages/components/tabs/tabs-fr.md +++ b/docs/src/pages/components/tabs/tabs-fr.md @@ -1,6 +1,6 @@ --- title: Tabs React component -components: Tabs, Tab, TabScrollButton +components: Tabs, Tab, TabScrollButton, TabContext, TabList, TabPanel --- # Tabs (Onglets) @@ -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 +#### Démo 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 */ + +/* Tabs where each tab needs to be selected manually */ + +``` + {{"demo": "pages/components/tabs/AccessibleTabs.js", "bg": true}} ## Experimental API diff --git a/docs/src/pages/components/tabs/tabs-ja.md b/docs/src/pages/components/tabs/tabs-ja.md index 762a0556735240..36d7540b0ff532 100644 --- a/docs/src/pages/components/tabs/tabs-ja.md +++ b/docs/src/pages/components/tabs/tabs-ja.md @@ -1,6 +1,6 @@ --- title: Tabs React component -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 */ + +/* Tabs where each tab needs to be selected manually */ + +``` + {{"demo": "pages/components/tabs/AccessibleTabs.js", "bg": true}} ## Experimental API diff --git a/docs/src/pages/components/tabs/tabs-pt.md b/docs/src/pages/components/tabs/tabs-pt.md index 5bd67cc539a33f..6eea7de53ffbc1 100644 --- a/docs/src/pages/components/tabs/tabs-pt.md +++ b/docs/src/pages/components/tabs/tabs-pt.md @@ -1,6 +1,6 @@ --- title: Componente React para Abas -components: Tabs, Tab, TabScrollButton +components: Tabs, Tab, TabScrollButton, TabContext, TabList, TabPanel --- # Abas @@ -104,10 +104,17 @@ Um exemplo para a implementação atual pode ser encontrado nas demonstrações Os componentes implementam a navegação do teclado usando o comportamento de "ativação manual". Se você quiser mudar para o comportamento "seleção segue automaticamente o foco" você deve definir `selectionFollowsFocus` no componente `Tabs`. As práticas de autoria da WAI-ARIA têm um guia detalhado sobre [how to decide when to make selection automatically follow focus](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus). -#### Demonstração `selectionFollowsFocus` +#### Demonstração As duas demonstrações seguintes diferem apenas no seu comportamento de navegação por teclado. Foque em uma aba e navegue com as teclas de seta para notar a diferença. +```jsx +/* Tabs where selection follows focus */ + +/* Tabs where each tab needs to be selected manually */ + +``` + {{"demo": "pages/components/tabs/AccessibleTabs.js", "bg": true}} ## API experimental diff --git a/docs/src/pages/components/tabs/tabs-ru.md b/docs/src/pages/components/tabs/tabs-ru.md index bd076e7f8ab88d..5de07f949e5c50 100644 --- a/docs/src/pages/components/tabs/tabs-ru.md +++ b/docs/src/pages/components/tabs/tabs-ru.md @@ -1,6 +1,6 @@ --- title: Tabs React component -components: Tabs, Tab, TabScrollButton +components: Tabs, Tab, TabScrollButton, TabContext, TabList, TabPanel --- # Вкладки @@ -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 */ + +/* Tabs where each tab needs to be selected manually */ + +``` + {{"demo": "pages/components/tabs/AccessibleTabs.js", "bg": true}} ## Experimental API diff --git a/docs/src/pages/components/tabs/tabs-zh.md b/docs/src/pages/components/tabs/tabs-zh.md index eca0bde77cac13..1242c885d20673 100644 --- a/docs/src/pages/components/tabs/tabs-zh.md +++ b/docs/src/pages/components/tabs/tabs-zh.md @@ -1,6 +1,6 @@ --- title: React Tabs 选项卡组件 -components: Tabs, Tab, TabScrollButton +components: Tabs, Tab, TabScrollButton, TabContext, TabList, TabPanel --- # Tabs 选项卡 @@ -69,7 +69,7 @@ components: Tabs, Tab, TabScrollButton {{"demo": "pages/components/tabs/CustomizedTabs.js", "bg": true}} -🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/tabs/). +🎨如果你是在寻找灵感，你可以查看 [MUI Treasury's customization examples](https://mui-treasury.com/styles/tabs/)。 ## 垂直的选项卡 @@ -93,25 +93,32 @@ components: Tabs, Tab, TabScrollButton (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#tabpanel) -The following steps are needed in order to provide necessary information for assistive technologies: +需要采取以下步骤，以便为无障碍技术提供必要的信息： -1. Label `Tabs` via `aria-label` or `aria-labelledby`. -2. `Tab`s need to be connected to their corresponding `[role="tabpanel"]` by setting the correct `id`, `aria-controls` and `aria-labelledby`. +1. 在 `Tabs` 上应用 `aria-label` 或 `aria-labelledby` 标签。 +2. `Tab` 需要连接到其 相应的 `id`、`aria-controls` 和 `aria-labelledby` 中对应的 `[role="tabpanel"]`。 -An example for the current implementation can be found in the demos on this page. We've also published [an experimental API](#experimental-api) in `@material-ui/lab` that does not require extra work. +当前实现的例子可以在本页面的演示中找到。 我们还在 `@material-ui/lab` 中发布了不需要额外工作就能使用的 [实验性 API](#experimental-api) -### Keyboard navigation +### 键盘导航 -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). +该组件使用 “手动激活” 的行为来实现键盘导航。 如果你想切换到 “选择自动跟随焦点(selection automatically follows focus)”的行为，你必须将 `selectionFollowsFocus` 传递给 `Tabs` 组件。 WAI-ARIA 项目实践中有一个详细的指南 [如何决定什么时候选择自动跟随焦点](https://www.w3.org/TR/wai-aria-practices/#kbd_selection_follows_focus)。 -#### `selectionFollowsFocus` 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 */ + +/* Tabs where each tab needs to be selected manually */ + +``` {{"demo": "pages/components/tabs/AccessibleTabs.js", "bg": true}} -## Experimental API +## 实验性 API -`@material-ui/lab` offers utility components that inject props to implement accessible tabs following [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices/#tabpanel). +遵循 [WAI-ARIA 项目实践](https://www.w3.org/TR/wai-aria-practices/#tabpanel)，`@material-ui/lab` 提供了工具集组件，该组件通过注入属性的方式来实现具有可访问性(accessible) 功能的选项卡。 {{"demo": "pages/components/tabs/LabTabs.js", "bg": true}} \ 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 ed025ba108fb18..677f62b054f359 100644 --- a/docs/src/pages/components/toggle-button/toggle-button-zh.md +++ b/docs/src/pages/components/toggle-button/toggle-button-zh.md @@ -7,7 +7,7 @@ components: ToggleButton, ToggleButtonGroup

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: Typography

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

-O uso de diferentes tamanhos e estilos de uma só vez pode estragar qualquer 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 + + crwdns133322:0crwdne133322:0 + + + -crwdns93076:0crwdne93076:0 crwdns93078:0crwdne93078:0 -crwdns93080:0crwdne93080:0 +crwdns133324:0crwdne133324:0 ```js -crwdns93082:0[500]crwdne93082:0 +crwdns133326:0{ createMuiTheme }crwdne133326:0 ``` -### crwdns93084:0crwdne93084:0 +### crwdns133328:0crwdne133328:0 -crwdns93086:0crwdne93086:0 +crwdns133330:0crwdne133330:0 crwdns133332:0crwdne133332:0 -```jsx -crwdns93088:0[SHADE]crwdne93088:0 -``` +crwdns133334:0crwdne133334:0 -crwdns130888:0crwdne130888:0 +crwdns133336:0crwdne133336:0 -## crwdns93092:0crwdne93092:0 +```jsx +crwdns133338:0{ createMuiTheme }crwdnd133338:0[500]crwdnd133338:0{ + main: '#f44336', + }crwdne133338:0 +``` -crwdns93094:0crwdne93094:0 crwdns93096:0crwdne93096:0 +crwdns133340:0crwdne133340:0 -crwdns130890:0crwdne130890:0 +crwdns133342:0crwdne133342:0 -crwdns103436:0crwdne103436:0 +### crwdns133344:0crwdne133344:0 -```jsx -crwdns93102:0{ createMuiTheme }crwdnd93102:0{ - main: '#f44336', - }crwdne93102:0 -``` +- crwdns100876:0crwdne100876:0 +- crwdns100878:0crwdne100878:0 +- crwdns93130:0crwdne93130:0 -crwdns93104:0crwdne93104:0 +## crwdns133346:0crwdne133346:0 -crwdns93106:0crwdne93106:0 +crwdns133348:0crwdne133348:0 crwdns133350:0crwdne133350:0 -### crwdns93108:0crwdne93108:0 +### crwdns133352:0crwdne133352:0 -crwdns93110:0crwdne93110:0 crwdns93112:0crwdne93112:0 +- crwdns133354:0crwdne133354:0 crwdns133356:0crwdne133356:0 crwdns133358:0crwdne133358:0 +- crwdns133360:0crwdne133360:0 crwdns133362:0crwdne133362:0 crwdns133364:0crwdne133364:0 - - crwdns93118:0crwdne93118:0 - +### crwdns133366:0crwdne133366:0 -crwdns93120:0crwdne93120:0 +crwdns133368:0crwdne133368:0 ```jsx -crwdns93122:0{ createMuiTheme }crwdne93122:0 +crwdns133370:0[SHADE]crwdne133370:0 ``` -### crwdns93124:0crwdne93124:0 +crwdns133372:0crwdne133372:0 -- crwdns100876:0crwdne100876:0 -- crwdns100878:0crwdne100878:0 -- crwdns93130:0crwdne93130:0 \ No newline at end of file +### crwdns133374:0crwdne133374:0 + +crwdns133376:0crwdne133376:0 + +```js +crwdns133378:0[500]crwdne133378:0 +``` \ No newline at end of file diff --git a/docs/src/pages/customization/color/color-de.md b/docs/src/pages/customization/color/color-de.md index 65a55918514490..ffafde4e6e2174 100644 --- a/docs/src/pages/customization/color/color-de.md +++ b/docs/src/pages/customization/color/color-de.md @@ -4,48 +4,45 @@ Das Material Design [Farbsystem](https://material.io/design/color/) kann verwendet werden, um ein Farbschema zu erstellen, das Ihre Marke oder Ihren Stil widerspiegelt. -## Farbsystem +## Picking colors -### Wichtige Begriffe - -#### "Palette" - -Eine Palette ist eine Sammlung von Farben, d.h. Farbtönen und deren Nuancen. 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. - -#### "Farbton" & "Schatten" +### Offizielles Farbwerkzeug -Eine einzelne Farbe innerhalb der Palette besteht aus einem Farbton wie "Rot" und eine Schattierung wie "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. +The Material Design team has also built an awesome palette configuration tool: [material.io/resources/color/](https://material.io/resources/color/). Auf diese Weise können Sie eine Farbpalette für Ihre Benutzeroberfläche erstellen und die Zugänglichkeit einer beliebigen Farbkombination messen. -### Beispiele + + Offizielles Farbwerkzeug + + + -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. - - Offizielles Farbwerkzeug - +## 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 + + Herramienta oficial de color + + + -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. - - Herramienta oficial de 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. + +### 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 + + Official color tool + + + -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. - - Official color tool - +## 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 + + Ferramenta oficial de cores + + + -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. - - Ferramenta oficial de cores - +## 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({