O autocomplete é uma entrada de texto normal aprimorada por um painel de opções sugeridas.
+O autocompletar é uma entrada de texto normal aprimorada por um painel de opções sugeridas.
O Material-UI não fornece nenhuma API de alto nível para resolver esse problema. Recomendamos utilizarem soluções que a comunidade React construiu. diff --git a/docs/src/pages/components/autocomplete/autocomplete-zh.md b/docs/src/pages/components/autocomplete/autocomplete-zh.md index 69abadf01fbd91..3f6f7e25819bb0 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-zh.md +++ b/docs/src/pages/components/autocomplete/autocomplete-zh.md @@ -33,4 +33,4 @@ Material-UI不提供任何高级 API 来解决此问题。我们鼓励大家参 在下面的示例中, 我们演示了如何使用 [react-autosuggest](https://github.com/moroshko/react-autosuggest)。 它还使用 [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight)完成了高亮的逻辑。 -emo": "pages/components/autocomplete/IntegrationAutosuggest.js"}} \ No newline at end of file +{{"demo": "pages/components/autocomplete/IntegrationAutosuggest.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/breakpoints/breakpoints-pt.md b/docs/src/pages/components/breakpoints/breakpoints-pt.md index 9c072babd2e0e0..b7010d1cb0f20d 100644 --- a/docs/src/pages/components/breakpoints/breakpoints-pt.md +++ b/docs/src/pages/components/breakpoints/breakpoints-pt.md @@ -1,4 +1,4 @@ -# Pontos de quebra (Breakpoints) +# Pontos de quebraAPI que permite o uso de pontos de quebra em uma ampla variedade de contextos.
diff --git a/docs/src/pages/components/buttons/buttons-pt.md b/docs/src/pages/components/buttons/buttons-pt.md index f8d6b1ce874c34..1cbe211f4e9be9 100644 --- a/docs/src/pages/components/buttons/buttons-pt.md +++ b/docs/src/pages/components/buttons/buttons-pt.md @@ -50,9 +50,9 @@ O componente ButtonGroup pode ser usado para agrupar os botões delineados (o pa {{"demo": "pages/components/buttons/GroupedButtons.js"}} -## Split Button +## Botão Dividido -ButtonGroup can also be used to create a split button. The dropdown can change the button action (as in this example), or be use to immediately trigger a related action. +O ButtonGroup também pode ser usado para criar um botão dividido. A lista suspensa pode alterar a ação do botão (como neste exemplo) ou ser usada para acionar imediatamente a ação relacionada. {{"demo": "pages/components/buttons/SplitButton.js"}} @@ -86,7 +86,7 @@ Botões extravagantes ou menores? Use a propriedade `size`. {{"demo": "pages/components/buttons/IconLabelButtons.js"}} -## Botões de Icone +## Botões de Ícone Botões de ícones são comumente encontrados em barras de aplicativos e barras de ferramentas. diff --git a/docs/src/pages/components/buttons/buttons-zh.md b/docs/src/pages/components/buttons/buttons-zh.md index 810595b73de44b..fe650c8138526d 100644 --- a/docs/src/pages/components/buttons/buttons-zh.md +++ b/docs/src/pages/components/buttons/buttons-zh.md @@ -52,7 +52,7 @@ ButtonGroup组件可用于对描边按钮(默认) 或者实心按钮进行分组 ## 分割按钮 -ButtonGroup can also be used to create a split button. The dropdown can change the button action (as in this example), or be use to immediately trigger a related action. +按钮组也可用于构建分割按钮. 在分割按钮中, 下拉框既可以改变主按钮的行为(如本例所示), 又或是立刻触发相应的动作. {{"demo": "pages/components/buttons/SplitButton.js"}} diff --git a/docs/src/pages/components/checkboxes/checkboxes-ru.md b/docs/src/pages/components/checkboxes/checkboxes-ru.md index d97987af9f7503..cb3eedf27ee3d8 100644 --- a/docs/src/pages/components/checkboxes/checkboxes-ru.md +++ b/docs/src/pages/components/checkboxes/checkboxes-ru.md @@ -5,9 +5,9 @@ components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel # Чекбоксы -Checkboxes allow the user to select one or more items from a set.
+Чекбоксы позволяют выбрать один или несколько элементов из набора.
-[Checkboxes](https://material.io/design/components/selection-controls.html#checkboxes) can be used to turn an option on or off. +[Чекбоксы](https://material.io/design/components/selection-controls.html#checkboxes) могут быть использованы для включения или выключения различных опций. Если у вас есть несколько опций, отображаемых в списке, вы можете сохранить пространство, используя чекбоксы вместо переключателей. Если у вас есть только один вариант, лучше не использовать чекбокс, вместо него используйте переключатель включения / выключения. diff --git a/docs/src/pages/components/click-away-listener/click-away-listener-zh.md b/docs/src/pages/components/click-away-listener/click-away-listener-zh.md index c3c4276d181cad..84bf3d05462cc2 100644 --- a/docs/src/pages/components/click-away-listener/click-away-listener-zh.md +++ b/docs/src/pages/components/click-away-listener/click-away-listener-zh.md @@ -1,5 +1,5 @@ --- -title: Detect click outside React component +title: 检测React组件外部的单击 components: ClickAwayListener --- diff --git a/docs/src/pages/components/css-baseline/css-baseline-de.md b/docs/src/pages/components/css-baseline/css-baseline-de.md index adfb3bbeb3fe0e..215d4ebd4a558b 100644 --- a/docs/src/pages/components/css-baseline/css-baseline-de.md +++ b/docs/src/pages/components/css-baseline/css-baseline-de.md @@ -39,5 +39,7 @@ Die Elemente `` und `` werden aktualisiert, um bessere seitenweite S ### Typografie -- Das Antialiasing von Schriftarten ist aktiviert, um die Roboto-Schrift besser anzuzeigen. -- Für das ``-Element wird keine Basisschriftgröße deklariert, es wird jedoch von 16px ausgegangen (Standardeinstellung des Browsers). Sie können mehr über die Auswirkungen lernen von den sich ändernden `` Standard - Schriftgröße auf [der Theme Dokumentation](/customization/typography/#typography-html-font-size) Seite. \ No newline at end of file +- Für das ``-Element wird keine Basisschriftgröße deklariert, es wird jedoch von 16px ausgegangen (Standardeinstellung des Browsers). Sie können mehr über die Auswirkungen lernen von den sich ändernden `` Standard - Schriftgröße auf [der Theme Dokumentation](/customization/typography/#typography-html-font-size) Seite. +- Set the `theme.typography.body2` style on the `` element. +- Set the font-weight to "bolder" for the `` and `` elements. Bolder is one font weight heavier than the parent element (among the available weights of the font). +- Das Antialiasing von Schriftarten ist aktiviert, um die Roboto-Schrift besser anzuzeigen. \ No newline at end of file diff --git a/docs/src/pages/components/css-baseline/css-baseline-es.md b/docs/src/pages/components/css-baseline/css-baseline-es.md index db2649bececf4d..3e5d1054da61fb 100644 --- a/docs/src/pages/components/css-baseline/css-baseline-es.md +++ b/docs/src/pages/components/css-baseline/css-baseline-es.md @@ -39,5 +39,7 @@ Los elementos `` y `` son actualizados para proveer mejores valores ### Tipografía -- El antialiasing de fuentes está habilitado para una mejor visualización de la fuente Roboto. -- No se declara ningún tamaño de fuente de base en el elemento ``, pero se asume 16px (el valor predeterminado del navegador). Puedes aprender más acerca de las implicaciones de cambiar el tamaño de fuente predeterminado de ``, en la página [de documentación del tema](/customization/typography/#typography-html-font-size). \ No newline at end of file +- No se declara ningún tamaño de fuente de base en el elemento ``, pero se asume 16px (el valor predeterminado del navegador). Puedes aprender más acerca de las implicaciones de cambiar el tamaño de fuente predeterminado de ``, en la página [de documentación del tema](/customization/typography/#typography-html-font-size). +- Set the `theme.typography.body2` style on the `` element. +- Set the font-weight to "bolder" for the `` and `` elements. Bolder is one font weight heavier than the parent element (among the available weights of the font). +- El antialiasing de fuentes está habilitado para una mejor visualización de la fuente Roboto. \ No newline at end of file diff --git a/docs/src/pages/components/css-baseline/css-baseline-fr.md b/docs/src/pages/components/css-baseline/css-baseline-fr.md index b5682c1785f341..238d1bb997cdac 100644 --- a/docs/src/pages/components/css-baseline/css-baseline-fr.md +++ b/docs/src/pages/components/css-baseline/css-baseline-fr.md @@ -39,5 +39,7 @@ Les éléments `` et `` sont mis à jour pour fournir de meilleurs p ### Typographie -- L'anticrénelage des polices est activé pour un meilleur affichage de la police Roboto. -- Aucune taille de police de base n’est déclarée sur le ``, mais 16px est utilisée (valeur par défaut du navigateur). Vous pouvez en apprendre davantage sur les implications de l' évolution du `` taille de la police par défaut dans [la documentation abordant les thèmes](/customization/typography/#typography-html-font-size) page. \ No newline at end of file +- Aucune taille de police de base n’est déclarée sur le ``, mais 16px est utilisée (valeur par défaut du navigateur). Vous pouvez en apprendre davantage sur les implications de l' évolution du `` taille de la police par défaut dans [la documentation abordant les thèmes](/customization/typography/#typography-html-font-size) page. +- Set the `theme.typography.body2` style on the `` element. +- Set the font-weight to "bolder" for the `` and `` elements. Bolder is one font weight heavier than the parent element (among the available weights of the font). +- L'anticrénelage des polices est activé pour un meilleur affichage de la police Roboto. \ No newline at end of file diff --git a/docs/src/pages/components/css-baseline/css-baseline-ja.md b/docs/src/pages/components/css-baseline/css-baseline-ja.md index c9c94c90798463..f4a32516aacbf2 100644 --- a/docs/src/pages/components/css-baseline/css-baseline-ja.md +++ b/docs/src/pages/components/css-baseline/css-baseline-ja.md @@ -39,5 +39,7 @@ The `` and `` elements are updated to provide better page-wide defau ### タイポグラフィ -- Font antialiasing is enabled for better display of the Roboto font. -- No base font-size is declared on the ``, but 16px is assumed (the browser default). You can learn more about the implications of changing the `` default font size in [the theme documentation](/customization/typography/#typography-html-font-size) page. \ No newline at end of file +- No base font-size is declared on the ``, but 16px is assumed (the browser default). You can learn more about the implications of changing the `` default font size in [the theme documentation](/customization/typography/#typography-html-font-size) page. +- Set the `theme.typography.body2` style on the `` element. +- Set the font-weight to "bolder" for the `` and `` elements. Bolder is one font weight heavier than the parent element (among the available weights of the font). +- Font antialiasing is enabled for better display of the Roboto font. \ No newline at end of file diff --git a/docs/src/pages/components/css-baseline/css-baseline-pt.md b/docs/src/pages/components/css-baseline/css-baseline-pt.md index d815c2f8c9d43d..a6e89182d21992 100644 --- a/docs/src/pages/components/css-baseline/css-baseline-pt.md +++ b/docs/src/pages/components/css-baseline/css-baseline-pt.md @@ -39,5 +39,7 @@ Os elementos `` e `` são atualizados para fornecer melhores padrõe ### Tipografia -- O antialiasing de fonte é habilitado para melhorar a exibição da fonte Roboto. -- Nenhum tamanho de fonte base é declarado no ``, mas 16px é assumido (o padrão do navegador). Você pode aprender mais sobre as implicações da mudança do padrão de tamanho de fonte do `` na página de [documentação de tema](/customization/typography/#typography-html-font-size). \ No newline at end of file +- Nenhum tamanho de fonte base é declarado no ``, mas 16px é assumido (o padrão do navegador). Você pode aprender mais sobre as implicações da mudança do padrão de tamanho de fonte do `` na página de [documentação de tema](/customization/typography/#typography-html-font-size). +- Set the `theme.typography.body2` style on the `` element. +- Set the font-weight to "bolder" for the `` and `` elements. Bolder is one font weight heavier than the parent element (among the available weights of the font). +- O antialiasing de fonte é habilitado para melhorar a exibição da fonte Roboto. \ No newline at end of file diff --git a/docs/src/pages/components/css-baseline/css-baseline-ru.md b/docs/src/pages/components/css-baseline/css-baseline-ru.md index efd2cad678ec3f..e193548215e398 100644 --- a/docs/src/pages/components/css-baseline/css-baseline-ru.md +++ b/docs/src/pages/components/css-baseline/css-baseline-ru.md @@ -39,5 +39,7 @@ The `` and `` elements are updated to provide better page-wide defau ### Оформление текста -- Font antialiasing is enabled for better display of the Roboto font. -- No base font-size is declared on the ``, but 16px is assumed (the browser default). You can learn more about the implications of changing the `` default font size in [the theme documentation](/customization/typography/#typography-html-font-size) page. \ No newline at end of file +- No base font-size is declared on the ``, but 16px is assumed (the browser default). You can learn more about the implications of changing the `` default font size in [the theme documentation](/customization/typography/#typography-html-font-size) page. +- Set the `theme.typography.body2` style on the `` element. +- Set the font-weight to "bolder" for the `` and `` elements. Bolder is one font weight heavier than the parent element (among the available weights of the font). +- Font antialiasing is enabled for better display of the Roboto font. \ No newline at end of file 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 f7fa73b1d71383..4fce72fcd43401 100644 --- a/docs/src/pages/components/css-baseline/css-baseline-zh.md +++ b/docs/src/pages/components/css-baseline/css-baseline-zh.md @@ -39,5 +39,7 @@ export default MyApp; ### Typography（文字排版） -- 字体抗锯齿功能可以更好地显示Roboto字体 -- 没有声明基础font-size在``上，但是假定是16px (浏览器的默认设置)。 您可以了解更多有关更改 `` 默认字体大小的含义 [主题文档](/customization/typography/#typography-html-font-size) 页。 \ No newline at end of file +- 没有声明基础font-size在``上，但是假定是16px (浏览器的默认设置)。 您可以了解更多有关更改 `` 默认字体大小的含义 [主题文档](/customization/typography/#typography-html-font-size) 页。 +- Set the `theme.typography.body2` style on the `` element. +- Set the font-weight to "bolder" for the `` and `` elements. Bolder is one font weight heavier than the parent element (among the available weights of the font). +- 字体抗锯齿功能可以更好地显示Roboto字体 \ No newline at end of file diff --git a/docs/src/pages/components/dialogs/dialogs-de.md b/docs/src/pages/components/dialogs/dialogs-de.md index ce720a493ff5ea..0f6c5b86c4f44e 100644 --- a/docs/src/pages/components/dialogs/dialogs-de.md +++ b/docs/src/pages/components/dialogs/dialogs-de.md @@ -72,7 +72,18 @@ Sie können die maximale Breite eines Dialogs festlegen, indem Sie die `maxWidth ## Responsive Vollbild -Sie können einen Dialog im Vollbild responsive machen, indem Sie `withMobileDialog` verwenden. Standardmäßig wird `withMobileDialog()(Dialog)` gesetzt, wenn die [Bildschirmgröße](/customization/breakpoints/) *kleiner gleich* `sm` ist. Sie können Ihre eigene Bruchstelle z. B. `xs` auswählen, indem Sie das Argument `breakpoint` `withMobileDialog({breakpoint: 'xs'}) (Dialog)` sezten. +You may make a dialog responsively full screen using [`useMediaQuery`](/components/use-media-query/#usemediaquery). + +```jsx +import useMediaQuery from '@material-ui/core/useMediaQuery'; + +function MyComponent() { + const theme = useTheme(); + const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); + + return +} +``` {{"demo": "pages/components/dialogs/ResponsiveDialog.js"}} diff --git a/docs/src/pages/components/dialogs/dialogs-es.md b/docs/src/pages/components/dialogs/dialogs-es.md index 148319d6be6ec8..a0ae6cba70fc24 100644 --- a/docs/src/pages/components/dialogs/dialogs-es.md +++ b/docs/src/pages/components/dialogs/dialogs-es.md @@ -72,7 +72,18 @@ Puede establecer un ancho máximo de diálogo utilizando el enumerable `maxWidth ## Pantalla completa responsiva -You may make a dialog responsively full screen using `withMobileDialog`. By default, `withMobileDialog()(Dialog)` responsively full screens *at or below* the `sm` [screen size](/customization/breakpoints/). Puede elegir su propio punto de quiebre por ejemplo `xs` pasando el argumento `breakpoint`, de la siguiente forma: `withMobileDialog({breakpoint: 'xs'})(Dialog)`. +You may make a dialog responsively full screen using [`useMediaQuery`](/components/use-media-query/#usemediaquery). + +```jsx +import useMediaQuery from '@material-ui/core/useMediaQuery'; + +function MyComponent() { + const theme = useTheme(); + const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); + + return +} +``` {{"demo": "pages/components/dialogs/ResponsiveDialog.js"}} diff --git a/docs/src/pages/components/dialogs/dialogs-fr.md b/docs/src/pages/components/dialogs/dialogs-fr.md index 7250703e7dcb8c..197025967920d9 100644 --- a/docs/src/pages/components/dialogs/dialogs-fr.md +++ b/docs/src/pages/components/dialogs/dialogs-fr.md @@ -72,7 +72,18 @@ Vous pouvez définir une largeur maximale dans la boîte de dialogue à l’aide ## Responsive full-screen -You may make a dialog responsively full screen using `withMobileDialog`. By default, `withMobileDialog()(Dialog)` responsively full screens *at or below* the `sm` [screen size](/customization/breakpoints/). You can choose your own breakpoint for example `xs` by passing the `breakpoint` argument: `withMobileDialog({breakpoint: 'xs'})(Dialog)`. +You may make a dialog responsively full screen using [`useMediaQuery`](/components/use-media-query/#usemediaquery). + +```jsx +import useMediaQuery from '@material-ui/core/useMediaQuery'; + +function MyComponent() { + const theme = useTheme(); + const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); + + return +} +``` {{"demo": "pages/components/dialogs/ResponsiveDialog.js"}} diff --git a/docs/src/pages/components/dialogs/dialogs-ja.md b/docs/src/pages/components/dialogs/dialogs-ja.md index cca3a02a3be88c..d32cc1439dd637 100644 --- a/docs/src/pages/components/dialogs/dialogs-ja.md +++ b/docs/src/pages/components/dialogs/dialogs-ja.md @@ -54,7 +54,7 @@ Form dialogs allow users to fill out form fields within a dialog. For example, i ## Customized dialogs -Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). +コンポーネントのカスタマイズ例をいくつか示します。あなたはこれについてもっと詳しく知ることができます [上書きドキュメントのページ](/customization/components/)。 The dialog has a close button added to aide usability. @@ -72,7 +72,18 @@ You can set a dialog maximum width by using the `maxWidth` enumerable in combina ## Responsive full-screen -You may make a dialog responsively full screen using `withMobileDialog`. By default, `withMobileDialog()(Dialog)` responsively full screens *at or below* the `sm` [screen size](/customization/breakpoints/). You can choose your own breakpoint for example `xs` by passing the `breakpoint` argument: `withMobileDialog({breakpoint: 'xs'})(Dialog)`. +You may make a dialog responsively full screen using [`useMediaQuery`](/components/use-media-query/#usemediaquery). + +```jsx +import useMediaQuery from '@material-ui/core/useMediaQuery'; + +function MyComponent() { + const theme = useTheme(); + const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); + + return +} +``` {{"demo": "pages/components/dialogs/ResponsiveDialog.js"}} diff --git a/docs/src/pages/components/dialogs/dialogs-pt.md b/docs/src/pages/components/dialogs/dialogs-pt.md index d3a1a548e1c459..283dea1c33caf6 100644 --- a/docs/src/pages/components/dialogs/dialogs-pt.md +++ b/docs/src/pages/components/dialogs/dialogs-pt.md @@ -72,7 +72,18 @@ Você pode definir uma largura máxima usando um enumerador na propriedade `maxW ## Tela cheia responsiva -Você pode fazer uma caixa de diálogo responsiva em tela cheia usando a propriedade `withMobileDialog`. Por padrão, `withMobileDialog()(Dialog)` responsivamente enche a tela *em ou abaixo* do ponto de interrupção (breakpoint) de [tamanhos de tela](/customization/breakpoints/) `sm`. Você pode escolher seu próprio ponto de interrupção, por exemplo, `xs` passando o `argumento` do ponto de interrupção: `withMobileDialog ({breakpoint: 'xs'}) (Dialog)`. +You may make a dialog responsively full screen using [`useMediaQuery`](/components/use-media-query/#usemediaquery). + +```jsx +import useMediaQuery from '@material-ui/core/useMediaQuery'; + +function MyComponent() { + const theme = useTheme(); + const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); + + return +} +``` {{"demo": "pages/components/dialogs/ResponsiveDialog.js"}} diff --git a/docs/src/pages/components/dialogs/dialogs-ru.md b/docs/src/pages/components/dialogs/dialogs-ru.md index 351c19d8600e47..3bae693adaa01e 100644 --- a/docs/src/pages/components/dialogs/dialogs-ru.md +++ b/docs/src/pages/components/dialogs/dialogs-ru.md @@ -72,7 +72,18 @@ The dialog has a close button added to aide usability. ## Отзывчивый полноэкранный режим -You may make a dialog responsively full screen using `withMobileDialog`. By default, `withMobileDialog()(Dialog)` responsively full screens *at or below* the `sm` [screen size](/customization/breakpoints/). Вы можете выбрать собственную точку остановки, например `xs`, передав аргумент `breakpoint`: `withMobileDialog({breakpoint: 'xs'})(Dialog)`. +You may make a dialog responsively full screen using [`useMediaQuery`](/components/use-media-query/#usemediaquery). + +```jsx +import useMediaQuery from '@material-ui/core/useMediaQuery'; + +function MyComponent() { + const theme = useTheme(); + const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); + + return +} +``` {{"demo": "pages/components/dialogs/ResponsiveDialog.js"}} diff --git a/docs/src/pages/components/dialogs/dialogs-zh.md b/docs/src/pages/components/dialogs/dialogs-zh.md index e4f0680ebf61da..623826c84f4dd7 100644 --- a/docs/src/pages/components/dialogs/dialogs-zh.md +++ b/docs/src/pages/components/dialogs/dialogs-zh.md @@ -72,7 +72,18 @@ components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions ## 响应式全屏 -您可以使用 `withMobileDialog` 显示响应式的全屏对话框。 默认情况下, `withMobileDialog() (Dialog)` 在 [屏幕大小](/customization/breakpoints/)*小于等于* `sm`时响应式全屏。 通过传递 `breakpoint`参数，您可以自主选择全屏切换点，比如使用`xs`：`withMobileDialog({breakpoint: 'xs'})(Dialog)`。 +You may make a dialog responsively full screen using [`useMediaQuery`](/components/use-media-query/#usemediaquery). + +```jsx +import useMediaQuery from '@material-ui/core/useMediaQuery'; + +function MyComponent() { + const theme = useTheme(); + const fullScreen = useMediaQuery(theme.breakpoints.down('sm')); + + return +} +``` {{"demo": "pages/components/dialogs/ResponsiveDialog.js"}} diff --git a/docs/src/pages/components/grid-list/grid-list-pt.md b/docs/src/pages/components/grid-list/grid-list-pt.md index e1dd3536e4dd48..e644ec3df41de4 100644 --- a/docs/src/pages/components/grid-list/grid-list-pt.md +++ b/docs/src/pages/components/grid-list/grid-list-pt.md @@ -3,7 +3,7 @@ title: Componente React para Lista de Grade components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton --- -# Lista de grade +# Lista de GradeAs listas de grade exibem uma coleção de imagens em uma grade de forma organizada.
diff --git a/docs/src/pages/components/hidden/hidden-fr.md b/docs/src/pages/components/hidden/hidden-fr.md index c6f6240a84f539..5ca4ec9cfaec3a 100644 --- a/docs/src/pages/components/hidden/hidden-fr.md +++ b/docs/src/pages/components/hidden/hidden-fr.md @@ -5,9 +5,9 @@ components: Hidden # Hidden -Quickly and responsively toggle the visibility value of components and more with our hidden utilities.
+Changer rapidement et de manière réactive la valeur de visibilité des composants et bien plus encore grâce à nos utilitaires cachés.
-All elements are visible unless **they are explicitly hidden**. To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with our [`Grid`](/components/grid/) component. +Tous les éléments sont visibles à moins **qu'ils soient explicitement cachés**. Pour faciliter l'intégration avec [ les points d'arrêt responsive](/customization/breakpoints/) de Material-UI, ce composant peut être utilisé pour cacher n'importe quel contenu, ou vous pouvez l'utiliser en conjonction avec notre composant [`Grid`](/components/grid/). ## Comment ça marche diff --git a/docs/src/pages/components/icons/icons-de.md b/docs/src/pages/components/icons/icons-de.md index 745f33eb9604f8..698d9aa843a835 100644 --- a/docs/src/pages/components/icons/icons-de.md +++ b/docs/src/pages/components/icons/icons-de.md @@ -72,7 +72,7 @@ Auf der Suche nach noch mehr SVG-Icons? Es gibt eine Menge Projekte, aber [https ## Schriftarten-Icons -Die `Symbol-` Komponente zeigt ein Symbol aus einer beliebigen Symbolschriftart an, die Ligaturen unterstützt. Voraussetzung ist, dass Sie eine, beispielsweise die [Material Icon-Schriftart](http://google.github.io/material-design-icons/#icon-font-for-the-web) in Ihr Projekt einfügen, beispielsweise über Google Web Fonts: +Die `Symbol-` Komponente zeigt ein Symbol aus einer beliebigen Symbolschriftart an, die Ligaturen unterstützt. Voraussetzung ist, dass Sie eine, beispielsweise die [Material Icon-Schriftart](https://google.github.io/material-design-icons/#icon-font-for-the-web) in Ihr Projekt einfügen, beispielsweise über Google Web Fonts: ```html diff --git a/docs/src/pages/components/icons/icons-es.md b/docs/src/pages/components/icons/icons-es.md index 3e6295b0823f00..6f27ffc85ec53a 100644 --- a/docs/src/pages/components/icons/icons-es.md +++ b/docs/src/pages/components/icons/icons-es.md @@ -72,7 +72,7 @@ Nota: Importar exports nombrados de este modo dará lugar a que el código para ## Iconos de fuente -El componente `Icon` mostrará iconos de cualquier fuente compatible con ligaduras. Como requisito previo, se debe incluir una, como la [fuente de iconos Material](http://google.github.io/material-design-icons/#icon-font-for-the-web) en el proyecto, por ejemplo, vía Google Web Fonts: +El componente `Icon` mostrará iconos de cualquier fuente compatible con ligaduras. Como requisito previo, se debe incluir una, como la [fuente de iconos Material](https://google.github.io/material-design-icons/#icon-font-for-the-web) en el proyecto, por ejemplo, vía Google Web Fonts: ```html diff --git a/docs/src/pages/components/icons/icons-fr.md b/docs/src/pages/components/icons/icons-fr.md index 5cca5685dcf1ad..29dc827d53d537 100644 --- a/docs/src/pages/components/icons/icons-fr.md +++ b/docs/src/pages/components/icons/icons-fr.md @@ -72,7 +72,7 @@ Vous recherchez encore plus d'icônes SVG? Il existe de nombreux projets, mais [ ## Polices d'icônes -Le composant `Icon` affichera une icône à partir de toute police d’icône prenant en charge les ligatures. Avant de commencer, vous devez en inclure une, telle que la police [Material icon](http://google.github.io/material-design-icons/#icon-font-for-the-web) dans votre projet, par exemple via Google Web Fonts: +Le composant `Icon` affichera une icône à partir de toute police d’icône prenant en charge les ligatures. Avant de commencer, vous devez en inclure une, telle que la police [Material icon](https://google.github.io/material-design-icons/#icon-font-for-the-web) dans votre projet, par exemple via Google Web Fonts: ```html diff --git a/docs/src/pages/components/icons/icons-ja.md b/docs/src/pages/components/icons/icons-ja.md index c8ea3740d0bdcf..891e2af43bac41 100644 --- a/docs/src/pages/components/icons/icons-ja.md +++ b/docs/src/pages/components/icons/icons-ja.md @@ -72,7 +72,7 @@ import { AccessAlarm, ThreeDRotation } from '@material-ui/icons'; ## Font Icons -`Icon` コンポーネントは、合字をサポートする任意のアイコンフォントのアイコンを表示できます。 前提条件として、たとえば、Google Web Fontsを介して、 [Material icon font](http://google.github.io/material-design-icons/#icon-font-for-the-web) プロジェクトをプロジェクトに含める必要があります。 +`Icon` コンポーネントは、合字をサポートする任意のアイコンフォントのアイコンを表示できます。 前提条件として、たとえば、Google Web Fontsを介して、 [Material icon font](https://google.github.io/material-design-icons/#icon-font-for-the-web) プロジェクトをプロジェクトに含める必要があります。 ```html diff --git a/docs/src/pages/components/icons/icons-pt.md b/docs/src/pages/components/icons/icons-pt.md index 4ba9170754c269..5636e7a3f27ae5 100644 --- a/docs/src/pages/components/icons/icons-pt.md +++ b/docs/src/pages/components/icons/icons-pt.md @@ -72,7 +72,7 @@ Procurando ainda mais SVG ícones? Há muitos projetos por aí, mas [https://mat ## Ícones -O componente `Icon` exibirá um ícone de qualquer fonte de ícone que suporte ligadura tipográfica (ligatures). Como pré-requisito, você deve incluir a fonte [Material icon](http://google.github.io/material-design-icons/#icon-font-for-the-web) no seu projeto, por exemplo, via Google Web Fonts: +O componente `Icon` exibirá um ícone de qualquer fonte de ícone que suporte ligadura tipográfica (ligatures). Como pré-requisito, você deve incluir a fonte [Material icon](https://google.github.io/material-design-icons/#icon-font-for-the-web) no seu projeto, por exemplo, via Google Web Fonts: ```html diff --git a/docs/src/pages/components/icons/icons-ru.md b/docs/src/pages/components/icons/icons-ru.md index 7833d07e11a48a..767975ea8c3ca5 100644 --- a/docs/src/pages/components/icons/icons-ru.md +++ b/docs/src/pages/components/icons/icons-ru.md @@ -72,7 +72,7 @@ import { AccessAlarm, ThreeDRotation } from '@material-ui/icons'; ## Иконочный шрифт -Компонент `Icon` отображает иконку из любого иконочного шрифта с поддержкой лигатур. Предварительно необходимо включить в проект шрифт, такой как [Material icon font](http://google.github.io/material-design-icons/#icon-font-for-the-web), с помощью, например, Google Web Fonts: +Компонент `Icon` отображает иконку из любого иконочного шрифта с поддержкой лигатур. Предварительно необходимо включить в проект шрифт, такой как [Material icon font](https://google.github.io/material-design-icons/#icon-font-for-the-web), с помощью, например, Google Web Fonts: ```html diff --git a/docs/src/pages/components/icons/icons-zh.md b/docs/src/pages/components/icons/icons-zh.md index cdb52246500288..ad799e6c157a0a 100644 --- a/docs/src/pages/components/icons/icons-zh.md +++ b/docs/src/pages/components/icons/icons-zh.md @@ -72,7 +72,7 @@ import { AccessAlarm, ThreeDRotation } from '@material-ui/icons'; ## 字体图标 -对于支持连字的任何图标字体，`Icon` 组件能够将其显示为一个图标。 作为先决条件，您必须在项目中包括一个 [Material icon font](http://google.github.io/material-design-icons/#icon-font-for-the-web)，举例来说，您可以由 Google Web Fonts 引入： +对于支持连字的任何图标字体，`Icon` 组件能够将其显示为一个图标。 作为先决条件，您必须在项目中包括一个 [Material icon font](https://google.github.io/material-design-icons/#icon-font-for-the-web)，举例来说，您可以由 Google Web Fonts 引入： ```html diff --git a/docs/src/pages/components/links/links-es.md b/docs/src/pages/components/links/links-es.md index 696b8fc751d9da..290bffce50fd22 100644 --- a/docs/src/pages/components/links/links-es.md +++ b/docs/src/pages/components/links/links-es.md @@ -4,9 +4,9 @@ components: Link # Enlaces -The Link component allows you to easily customize anchor elements with your theme colors and typography styles.
+El componente Link permite personalizar fácilmente el elemento de enlace con los colores de su Theme y estilos de tipografía.
-## Simple links +## Enlaces simples The Link component is built on top of the [Typography](/api/typography/) component. You can leverage its properties. diff --git a/docs/src/pages/components/menus/menus-ja.md b/docs/src/pages/components/menus/menus-ja.md index 192faacfe7058e..c926763a34c21c 100644 --- a/docs/src/pages/components/menus/menus-ja.md +++ b/docs/src/pages/components/menus/menus-ja.md @@ -47,7 +47,7 @@ If the height of a menu prevents all menu items from being displayed, the menu c {{"demo": "pages/components/menus/LongMenu.js"}} -## Limitations +## 制限 There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: diff --git a/docs/src/pages/components/modal/modal-de.md b/docs/src/pages/components/modal/modal-de.md index 3c69d4a12ac9a2..4a3ffb80ed6fb4 100644 --- a/docs/src/pages/components/modal/modal-de.md +++ b/docs/src/pages/components/modal/modal-de.md @@ -60,7 +60,7 @@ Das Erstellen von React-Elementen ist jedoch ebenfalls mit Kosten verbunden. Bet ``` -Wir erstellen viele React-Elemente, die niemals gemounted werden. Das ist verschwenderisch +We create a lot of React elements that will never be mounted. It's wasteful ```jsx模态框组件可以用来快速创建对话框、弹出窗口，灯箱等任何你所需的组件。
-The component renders its `children` node in front of a backdrop component. The `Modal` offers important features: +该组件在背景组件之上渲染其children节点, 并提供如下重要功能: - - @@ -68,11 +68,11 @@ We create a lot of React elements that will never be mounted. It's wastefulSeletores fornecem uma maneira simples de selecionar um único valor de um conjunto pré-determinado.
- Em dispositivos móveis, seletores são melhores aplicados quando mostrados em diálogos de confirmação. -- Para exibição in-line, como em um formulário, considere usar controles compactos, como botões suspensos segmentados. +- Para exibição em linha, como em um formulário, considere usar controles compactos, como botões suspensos segmentados. ## Seletores nativos diff --git a/docs/src/pages/components/portal/portal-de.md b/docs/src/pages/components/portal/portal-de.md index f79186ff995e19..7325c858b78b28 100644 --- a/docs/src/pages/components/portal/portal-de.md +++ b/docs/src/pages/components/portal/portal-de.md @@ -7,6 +7,8 @@ components: PortalDie Portalkomponente rendert ihre untergeordneten Elemente in eine neue "Unterstruktur" außerhalb der aktuellen Komponentenhierarchie.
+- + Die untergeordneten Elemente der Portalkomponente werden an den angegebenen `Container` angehängt. Die Komponente wird intern von den Komponenten [`Modal`](/components/modal/) und [`Popper`](/components/popper/) benutzt. Auf dem Server wird der Inhalt nicht gerendert. Sie müssen auf die Hydratation des Klienten warten, um die Subkomponenten zu sehen. diff --git a/docs/src/pages/components/portal/portal-es.md b/docs/src/pages/components/portal/portal-es.md index 1a409b04516be4..997c3ceda89df6 100644 --- a/docs/src/pages/components/portal/portal-es.md +++ b/docs/src/pages/components/portal/portal-es.md @@ -7,6 +7,8 @@ components: PortalEl componente del portal hace que sus hijos se conviertan en un nuevo "subtree" fuera de la jerarquía actual de componentes.
+- + The children of the portal component will be appended to the `container` specified. The component is used internally by the [`Modal`](/components/modal/) and [`Popper`](/components/popper/) components. On the server, the content won't be rendered. You have to wait for the client side hydratation to see the children. diff --git a/docs/src/pages/components/portal/portal-fr.md b/docs/src/pages/components/portal/portal-fr.md index 322a8162fc9cda..c88a397a68c65e 100644 --- a/docs/src/pages/components/portal/portal-fr.md +++ b/docs/src/pages/components/portal/portal-fr.md @@ -7,6 +7,8 @@ components: PortalLe composant de portail convertit ses enfants en un nouveau "sous-arbre" en dehors de la hiérarchie de composants actuelle.
+- + Les enfants du composant Portal seront ajoutés au `container` fournit. The component is used internally by the [`Modal`](/components/modal/) and [`Popper`](/components/popper/) components. Sur le serveur, le contenu ne sera pas rendu. You have to wait for the client side hydratation to see the children. diff --git a/docs/src/pages/components/portal/portal-ja.md b/docs/src/pages/components/portal/portal-ja.md index 86c48383e9951e..38fc6db71b447b 100644 --- a/docs/src/pages/components/portal/portal-ja.md +++ b/docs/src/pages/components/portal/portal-ja.md @@ -7,6 +7,8 @@ components: PortalThe portal component renders its children into a new "subtree" outside of current component hierarchy.
+- + The children of the portal component will be appended to the `container` specified. The component is used internally by the [`Modal`](/components/modal/) and [`Popper`](/components/popper/) components. On the server, the content won't be rendered. You have to wait for the client side hydratation to see the children. diff --git a/docs/src/pages/components/portal/portal-pt.md b/docs/src/pages/components/portal/portal-pt.md index 3099403568c580..2c065b770ad624 100644 --- a/docs/src/pages/components/portal/portal-pt.md +++ b/docs/src/pages/components/portal/portal-pt.md @@ -7,6 +7,8 @@ components: PortalO componente portal renderiza seu filho em uma nova sub-árvore fora da hierarquia do componente atual.
+- + O filho do componente portal será adicionado ao `container` especificado. O componente é usado internamente pelos componentes [`Modal`](/components/modal/) e [`Popper`](/components/popper/). No servidor, o conteúdo não será renderizado. Você deve esperar pelo lado do cliente fazer o `hydration` para ver o filho. diff --git a/docs/src/pages/components/portal/portal-ru.md b/docs/src/pages/components/portal/portal-ru.md index fb55b17a51d819..b21edf2a3d8bdf 100644 --- a/docs/src/pages/components/portal/portal-ru.md +++ b/docs/src/pages/components/portal/portal-ru.md @@ -7,6 +7,8 @@ components: PortalКомпонент Portal отображает свои дочерние элементы в новом «поддереве» вне текущей иерархии компонентов.
+- + Дочерние элементы портала будут добавлены внутрь элемента, указанного в свойстве `container`. The component is used internally by the [`Modal`](/components/modal/) and [`Popper`](/components/popper/) components. На сервере содержимое портала не отрисовывается. You have to wait for the client side hydratation to see the children. diff --git a/docs/src/pages/components/portal/portal-zh.md b/docs/src/pages/components/portal/portal-zh.md index 9189a70a762e62..d8f411352ccfc6 100644 --- a/docs/src/pages/components/portal/portal-zh.md +++ b/docs/src/pages/components/portal/portal-zh.md @@ -7,6 +7,8 @@ components: PortalPortal 组件将其子节点渲染到当前组件层次结构之外的新 "子树" 中。
+- + Portal 组件的子节点将被添加到指定的 `容器` 中。 The component is used internally by the [`Modal`](/components/modal/) and [`Popper`](/components/popper/) components. 在服务端，内容不会被渲染。 You have to wait for the client side hydratation to see the children. diff --git a/docs/src/pages/components/progress/progress-de.md b/docs/src/pages/components/progress/progress-de.md index 1776a87b879bcb..1dbeba69222045 100644 --- a/docs/src/pages/components/progress/progress-de.md +++ b/docs/src/pages/components/progress/progress-de.md @@ -5,7 +5,7 @@ components: CircularProgress, LinearProgress # Fortschritt (Progress) -Fortschrittsanzeigen geben eine unbestimmte Wartezeit oder die Länge eines Prozesses an.
+Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. The animation works with CSS, not JavaScript.
[Fortschrittsanzeigen](https://material.io/design/components/progress-indicators.html) informieren Benutzer über den Status laufender Prozesse, z. B. Laden einer App, Senden eines Formulars oder Speichern von Updates. Sie kommunizieren den Status der App und zeigen verfügbare Aktionen an, beispielsweise, ob Benutzer vom aktuellen Bildschirm weg navigieren können. diff --git a/docs/src/pages/components/progress/progress-es.md b/docs/src/pages/components/progress/progress-es.md index a110538d4411ed..f6252a8cd18ecb 100644 --- a/docs/src/pages/components/progress/progress-es.md +++ b/docs/src/pages/components/progress/progress-es.md @@ -5,7 +5,7 @@ components: CircularProgress, LinearProgress # Progreso -Los indicadores de progreso expresan un tiempo de espera indeterminado o despliegan la duración de un proceso.
+Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. The animation works with CSS, not JavaScript.
Los [indicadores de progreso](https://material.io/design/components/progress-indicators.html) informan a los usuarios acerca del estado de procesos activos, tales como cargar una aplicación, enviar un formulario o guardar actualizaciones. Comunican el estado de una aplicación e indican acciones disponibles, como si los usuarios pueden navegar fuera de la pantalla actual. diff --git a/docs/src/pages/components/progress/progress-fr.md b/docs/src/pages/components/progress/progress-fr.md index 053a450e1645c1..d37cec355c934e 100644 --- a/docs/src/pages/components/progress/progress-fr.md +++ b/docs/src/pages/components/progress/progress-fr.md @@ -5,7 +5,7 @@ components: CircularProgress, LinearProgress # Barres de progression -Les indicateurs de progression expriment un temps d'attente non spécifié ou affichent la durée d'un processus.
+Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. The animation works with CSS, not JavaScript.
[Progress indicators](https://material.io/design/components/progress-indicators.html) inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen. diff --git a/docs/src/pages/components/progress/progress-ja.md b/docs/src/pages/components/progress/progress-ja.md index 08dbe46658e857..0d9c5c2c6eb06e 100644 --- a/docs/src/pages/components/progress/progress-ja.md +++ b/docs/src/pages/components/progress/progress-ja.md @@ -5,7 +5,7 @@ components: CircularProgress, LinearProgress # Progress -Progress indicators express an unspecified wait time or display the length of a process.
+Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. The animation works with CSS, not JavaScript.
[Progress indicators](https://material.io/design/components/progress-indicators.html) inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen. @@ -93,7 +93,7 @@ There are [3 important limits](https://www.nngroup.com/articles/response-times-3 {{"demo": "pages/components/progress/DelayingAppearance.js"}} -## Limitations +## 制限 Under heavy load, you might lose the stroke dash animation or see random CircularProgress ring widths. You should run processor intensive operations in a web worker or by batch in order not to block the main rendering thread. diff --git a/docs/src/pages/components/progress/progress-pt.md b/docs/src/pages/components/progress/progress-pt.md index 95ece132c0dc65..0ccaf60967d234 100644 --- a/docs/src/pages/components/progress/progress-pt.md +++ b/docs/src/pages/components/progress/progress-pt.md @@ -5,7 +5,7 @@ components: CircularProgress, LinearProgress # Progresso -Os indicadores de progresso expressam um tempo de espera não especificado ou exibem a duração de um processo.
+Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. The animation works with CSS, not JavaScript.
[Indicadores de progresso](https://material.io/design/components/progress-indicators.html) informam aos usuários sobre o estado de processos em progresso, como o carregamento de um aplicativo, envio de um formulário, ou atualizações. Eles comunicam o estado do aplicativo e indicam ações disponíveis, tal como, se o usuário pode sair da página atual. diff --git a/docs/src/pages/components/progress/progress-ru.md b/docs/src/pages/components/progress/progress-ru.md index 6c1f03d7991073..3e80f4dac4f4b8 100644 --- a/docs/src/pages/components/progress/progress-ru.md +++ b/docs/src/pages/components/progress/progress-ru.md @@ -5,7 +5,7 @@ components: CircularProgress, LinearProgress # Прогресс -Индикаторы прогресса указывают на неопределенное время ожидания или отображают продолжительность процесса.
+Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. The animation works with CSS, not JavaScript.
[Индикаторы прогресса](https://material.io/design/components/progress-indicators.html) информируют пользователей о состоянии текущих процессов, таких как загрузка приложения, отправка формы или сохранение обновлений. Они сообщают о состоянии приложения и указывают возможные действия, например, могут ли пользователи уходить с текущего экрана. diff --git a/docs/src/pages/components/progress/progress-zh.md b/docs/src/pages/components/progress/progress-zh.md index b567753c45de18..4491eb13c401d9 100644 --- a/docs/src/pages/components/progress/progress-zh.md +++ b/docs/src/pages/components/progress/progress-zh.md @@ -5,7 +5,7 @@ components: CircularProgress, LinearProgress # Progress（进度条） -Progress indicators（进度指示器）能够表示一个不明确的等待时间，或者能显示处理过程的时间长短。
+Progress indicators commonly known as spinners, express an unspecified wait time or display the length of a process. The animation works with CSS, not JavaScript.
[进度指示器](https://material.io/design/components/progress-indicators.html)能够将当前处理过程的状态通知用户，例如加载一个应用，提交一个表单或保存一些更新。 它们与应用程序状态进行通信并指示可用的操作，例如用户是否可从当前页面离开。 diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-ja.md b/docs/src/pages/components/radio-buttons/radio-buttons-ja.md index 6fc2f77d294a80..3007c86c719e74 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-ja.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-ja.md @@ -1,5 +1,5 @@ --- -title: Radio buttons React component +title: Radio buttons コンポーネント components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel --- diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-pt.md b/docs/src/pages/components/radio-buttons/radio-buttons-pt.md index 76f8aae9c39c85..64929c355c8f5a 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-pt.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-pt.md @@ -3,7 +3,7 @@ title: Componente React para Botões de Opção components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel --- -# Botões de Opção +# Botões de opçãoBotões de opção permitem o usuário selecionar uma das opções de um conjunto.
diff --git a/docs/src/pages/components/selects/selects-ja.md b/docs/src/pages/components/selects/selects-ja.md index 52dd900d4246ab..ff045f8b5035e9 100644 --- a/docs/src/pages/components/selects/selects-ja.md +++ b/docs/src/pages/components/selects/selects-ja.md @@ -47,4 +47,4 @@ While it's discouraged by the Material Design specification, you can use a selec ## Text Fields -The `TextField` wrapper component is a complete form control including a label, input and help text. You can find an example with the select mode [in this section](/components/text-fields/#textfield). \ No newline at end of file +`TextField` ラッパーコンポーネントは、ラベル、入力、およびヘルプテキストを含む完全なフォームコントロールです。 You can find an example with the select mode [in this section](/components/text-fields/#textfield). \ No newline at end of file diff --git a/docs/src/pages/components/slider/slider-de.md b/docs/src/pages/components/slider/slider-de.md index 96c0ca01270d55..f96ff8dfa10d2d 100644 --- a/docs/src/pages/components/slider/slider-de.md +++ b/docs/src/pages/components/slider/slider-de.md @@ -9,42 +9,46 @@ components: Slider [Schieberegler](https://material.io/design/components/sliders.html) spiegeln einen Wertebereich entlang einer Leiste wider, aus dem Benutzer einen einzelnen Wert auswählen können. Sie sind ideal zum Anpassen von Einstellungen wie Lautstärke, Helligkeit oder Anwenden von Bildfiltern. -Schieberegler können an beiden Enden der Leiste Symbole enthalten, die einen Wertebereich widerspiegeln. +- -#### Sofortige Auswirkungen +## Kontinuierliche Schieberegler -Mit Schiebereglern vorgenommene Änderungen sind sofort wirksam, sodass ein Benutzer Anpassungen vornehmen kann, bis er seine Präferenz findet. Sie sollten nicht mit Einstellungen gepaart werden, bei denen die Rückmeldungen von Benutzern nur geringfügig verzögert werden. +Continuous sliders allow users to select a value along a subjective range. -#### Aktueller Zustand +{{"demo": "pages/components/slider/ContinuousSlider.js"}} -Schieberegler zeigen den aktuellen Status der Einstellungen an, die sie steuern. +## Discrete sliders -## Einfacher Schieberegler +Discrete sliders can be adjusted to a specific value by referencing its value indicator. By order of demos: -{{"demo": "pages/components/slider/SimpleSlider.js"}} +1. You can generate a mark for each step with `marks={true}`. +2. You can have custom marks by providing a rich array to the `marks` prop. +3. You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. +4. You can force the thumb label to be always visible with `valueLabelDisplay="on"`. -## Schieberegler mit Stufen +{{"demo": "pages/components/slider/DiscreteSlider.js"}} -{{"demo": "pages/components/slider/StepSlider.js"}} +## Range sliders -## Deaktivierter Schieberegler +{{"demo": "pages/components/slider/RangeSlider.js"}} -{{"demo": "pages/components/slider/DisabledSlider.js"}} +## Benutzerdefinierte Auswahl -## Vertikaler Schieberegler +Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). -{{"demo": "pages/components/slider/VerticalSlider.js"}} +{{"demo": "pages/components/slider/CustomizedSlider.js"}} -## Benutzerdefinierte Auswahl +## With input field -Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/). +{{"demo": "pages/components/slider/InputSlider.js"}} -{{"demo": "pages/components/slider/CustomizedSlider.js"}} +## Vertical sliders -## Benutzerdefinierter Anzeigepunkte +{{"demo": "pages/components/slider/VerticalSlider.js"}} -{{"demo": "pages/components/slider/CustomIconSlider.js"}} +## Barrierefreiheit -## Benutzerdefinierte Wertreduzierer +The component handles most of the work necessary to make it accessible. However, you need to make sure that: -{{"demo": "pages/components/slider/CustomValueReducerSlider.js"}} \ No newline at end of file +- The slider, as a whole, has a label (`aria-label` or `aria-labelledby` prop). +- Each thumb has a user-friendly name for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop. \ No newline at end of file diff --git a/docs/src/pages/components/slider/slider-es.md b/docs/src/pages/components/slider/slider-es.md index 3165509c9c4051..81837587247183 100644 --- a/docs/src/pages/components/slider/slider-es.md +++ b/docs/src/pages/components/slider/slider-es.md @@ -9,42 +9,46 @@ components: Slider [Sliders](https://material.io/design/components/sliders.html) reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters. -Sliders can have icons on both ends of the bar that reflect a range of values. +- -#### Immediate effects +## Continuous sliders -Changes made with sliders are immediate, allowing a user to make slider adjustments until finding their preference. They shouldn’t be paired with settings that have even minor delays in providing user feedback. +Continuous sliders allow users to select a value along a subjective range. -#### Current state +{{"demo": "pages/components/slider/ContinuousSlider.js"}} -Sliders reflect the current state of the settings they control. +## Discrete sliders -## Simple slider +Discrete sliders can be adjusted to a specific value by referencing its value indicator. By order of demos: -{{"demo": "pages/components/slider/SimpleSlider.js"}} +1. You can generate a mark for each step with `marks={true}`. +2. You can have custom marks by providing a rich array to the `marks` prop. +3. You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. +4. You can force the thumb label to be always visible with `valueLabelDisplay="on"`. -## Slider with steps +{{"demo": "pages/components/slider/DiscreteSlider.js"}} -{{"demo": "pages/components/slider/StepSlider.js"}} +## Range sliders -## Disabled slider +{{"demo": "pages/components/slider/RangeSlider.js"}} -{{"demo": "pages/components/slider/DisabledSlider.js"}} +## Customized sliders -## Vertical slider +Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). -{{"demo": "pages/components/slider/VerticalSlider.js"}} +{{"demo": "pages/components/slider/CustomizedSlider.js"}} -## Customized sliders +## With input field -Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). +{{"demo": "pages/components/slider/InputSlider.js"}} -{{"demo": "pages/components/slider/CustomizedSlider.js"}} +## Vertical sliders -## Custom thumb +{{"demo": "pages/components/slider/VerticalSlider.js"}} -{{"demo": "pages/components/slider/CustomIconSlider.js"}} +## Accesibilidad -## Custom value reducer +The component handles most of the work necessary to make it accessible. However, you need to make sure that: -{{"demo": "pages/components/slider/CustomValueReducerSlider.js"}} \ No newline at end of file +- The slider, as a whole, has a label (`aria-label` or `aria-labelledby` prop). +- Each thumb has a user-friendly name for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop. \ No newline at end of file diff --git a/docs/src/pages/components/slider/slider-fr.md b/docs/src/pages/components/slider/slider-fr.md index 8aad059877c97c..4ba4db4f3fd9c8 100644 --- a/docs/src/pages/components/slider/slider-fr.md +++ b/docs/src/pages/components/slider/slider-fr.md @@ -9,42 +9,46 @@ components: Slider [Les curseurs](https://material.io/design/components/sliders.html) reflètent une plage de valeurs sur une barre, à partir de laquelle les utilisateurs peuvent sélectionner une seule valeur. Ils sont idéaux pour ajuster des paramètres tels que le volume, la luminosité ou l'application de filtres d'images. -Les curseurs peuvent avoir des icônes sur les deux extrémités de la barre, qui correspondent à une plage de valeurs. +- -#### Effets immédiats +## Continuous sliders -Les modifications apportées avec les curseurs sont immédiates, ce qui permet à l’utilisateur de faire des ajustements jusqu’à ce qu’il trouve sa préférence. They shouldn’t be paired with settings that have even minor delays in providing user feedback. +Continuous sliders allow users to select a value along a subjective range. -#### Current state +{{"demo": "pages/components/slider/ContinuousSlider.js"}} -Sliders reflect the current state of the settings they control. +## Discrete sliders -## Slider simple +Discrete sliders can be adjusted to a specific value by referencing its value indicator. By order of demos: -{{"demo": "pages/components/slider/SimpleSlider.js"}} +1. You can generate a mark for each step with `marks={true}`. +2. You can have custom marks by providing a rich array to the `marks` prop. +3. You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. +4. You can force the thumb label to be always visible with `valueLabelDisplay="on"`. -## Curseur avec étapes +{{"demo": "pages/components/slider/DiscreteSlider.js"}} -{{"demo": "pages/components/slider/StepSlider.js"}} +## Range sliders -## Curseur désactivé +{{"demo": "pages/components/slider/RangeSlider.js"}} -{{"demo": "pages/components/slider/DisabledSlider.js"}} +## Curseurs personnalisés -## Curseur vertical +Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). -{{"demo": "pages/components/slider/VerticalSlider.js"}} +{{"demo": "pages/components/slider/CustomizedSlider.js"}} -## Curseurs personnalisés +## With input field -Voici un exemple de personnalisation du composant. Vous pouvez en apprendre plus à ce sujet sur la [page de documentation de personnalisation](/customization/components/). +{{"demo": "pages/components/slider/InputSlider.js"}} -{{"demo": "pages/components/slider/CustomizedSlider.js"}} +## Vertical sliders -## Custom thumb +{{"demo": "pages/components/slider/VerticalSlider.js"}} -{{"demo": "pages/components/slider/CustomIconSlider.js"}} +## Accessibilité -## Custom value reducer +The component handles most of the work necessary to make it accessible. However, you need to make sure that: -{{"demo": "pages/components/slider/CustomValueReducerSlider.js"}} \ No newline at end of file +- The slider, as a whole, has a label (`aria-label` or `aria-labelledby` prop). +- Each thumb has a user-friendly name for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop. \ No newline at end of file diff --git a/docs/src/pages/components/slider/slider-ja.md b/docs/src/pages/components/slider/slider-ja.md index 3165509c9c4051..7c6863e0991b59 100644 --- a/docs/src/pages/components/slider/slider-ja.md +++ b/docs/src/pages/components/slider/slider-ja.md @@ -9,42 +9,46 @@ components: Slider [Sliders](https://material.io/design/components/sliders.html) reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters. -Sliders can have icons on both ends of the bar that reflect a range of values. +- -#### Immediate effects +## Continuous sliders -Changes made with sliders are immediate, allowing a user to make slider adjustments until finding their preference. They shouldn’t be paired with settings that have even minor delays in providing user feedback. +Continuous sliders allow users to select a value along a subjective range. -#### Current state +{{"demo": "pages/components/slider/ContinuousSlider.js"}} -Sliders reflect the current state of the settings they control. +## Discrete sliders -## Simple slider +Discrete sliders can be adjusted to a specific value by referencing its value indicator. By order of demos: -{{"demo": "pages/components/slider/SimpleSlider.js"}} +1. You can generate a mark for each step with `marks={true}`. +2. You can have custom marks by providing a rich array to the `marks` prop. +3. You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. +4. You can force the thumb label to be always visible with `valueLabelDisplay="on"`. -## Slider with steps +{{"demo": "pages/components/slider/DiscreteSlider.js"}} -{{"demo": "pages/components/slider/StepSlider.js"}} +## Range sliders -## Disabled slider +{{"demo": "pages/components/slider/RangeSlider.js"}} -{{"demo": "pages/components/slider/DisabledSlider.js"}} +## Customized sliders -## Vertical slider +Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). -{{"demo": "pages/components/slider/VerticalSlider.js"}} +{{"demo": "pages/components/slider/CustomizedSlider.js"}} -## Customized sliders +## With input field -Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). +{{"demo": "pages/components/slider/InputSlider.js"}} -{{"demo": "pages/components/slider/CustomizedSlider.js"}} +## Vertical sliders -## Custom thumb +{{"demo": "pages/components/slider/VerticalSlider.js"}} -{{"demo": "pages/components/slider/CustomIconSlider.js"}} +## アクセシビリティ -## Custom value reducer +The component handles most of the work necessary to make it accessible. However, you need to make sure that: -{{"demo": "pages/components/slider/CustomValueReducerSlider.js"}} \ No newline at end of file +- The slider, as a whole, has a label (`aria-label` or `aria-labelledby` prop). +- Each thumb has a user-friendly name for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop. \ No newline at end of file diff --git a/docs/src/pages/components/slider/slider-pt.md b/docs/src/pages/components/slider/slider-pt.md index 5ecb225701081e..b2e3254d0386d7 100644 --- a/docs/src/pages/components/slider/slider-pt.md +++ b/docs/src/pages/components/slider/slider-pt.md @@ -9,42 +9,46 @@ components: Slider [Sliders](https://material.io/design/components/sliders.html) refletem um intervalo de valores ao longo de uma barra, a partir do qual os usuários podem selecionar um único valor. Eles são ideais para ajustar configurações como volume, brilho ou aplicação de filtros de imagem. -Sliders podem ter ícones em ambos os extremos da barra para descrever de forma visual o intervalo de valores. +- -#### Efeitos imediatos +## Continuous sliders -As alterações feitas com sliders são imediatas, permitindo que o usuário faça ajustes no slider até encontrar sua preferência. Eles não devem ser utilizados em conjunto com configurações que têm pequenos atrasos no fornecimento de feedback ao usuário. +Continuous sliders allow users to select a value along a subjective range. -#### Estado atual +{{"demo": "pages/components/slider/ContinuousSlider.js"}} -Os sliders refletem o estado atual das configurações que eles controlam. +## Discrete sliders -## Slider simples +Discrete sliders can be adjusted to a specific value by referencing its value indicator. By order of demos: -{{"demo": "pages/components/slider/SimpleSlider.js"}} +1. You can generate a mark for each step with `marks={true}`. +2. You can have custom marks by providing a rich array to the `marks` prop. +3. You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. +4. You can force the thumb label to be always visible with `valueLabelDisplay="on"`. -## Slider com passos +{{"demo": "pages/components/slider/DiscreteSlider.js"}} -{{"demo": "pages/components/slider/StepSlider.js"}} +## Range sliders -## Slider desabilitado +{{"demo": "pages/components/slider/RangeSlider.js"}} -{{"demo": "pages/components/slider/DisabledSlider.js"}} +## Sliders customizados -## Slider vertical +Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). -{{"demo": "pages/components/slider/VerticalSlider.js"}} +{{"demo": "pages/components/slider/CustomizedSlider.js"}} -## Sliders customizados +## With input field -Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescrita](/customization/components/). +{{"demo": "pages/components/slider/InputSlider.js"}} -{{"demo": "pages/components/slider/CustomizedSlider.js"}} +## Vertical sliders -## Slider com miniatura customizada +{{"demo": "pages/components/slider/VerticalSlider.js"}} -{{"demo": "pages/components/slider/CustomIconSlider.js"}} +## Acessibilidade -## Valor do reducer personalizado +The component handles most of the work necessary to make it accessible. However, you need to make sure that: -{{"demo": "pages/components/slider/CustomValueReducerSlider.js"}} \ No newline at end of file +- The slider, as a whole, has a label (`aria-label` or `aria-labelledby` prop). +- Each thumb has a user-friendly name for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop. \ No newline at end of file diff --git a/docs/src/pages/components/slider/slider-ru.md b/docs/src/pages/components/slider/slider-ru.md index c1850234e35ed7..e17ec66d02337f 100644 --- a/docs/src/pages/components/slider/slider-ru.md +++ b/docs/src/pages/components/slider/slider-ru.md @@ -9,42 +9,46 @@ components: Slider [Sliders](https://material.io/design/components/sliders.html) reflect a range of values along a bar, from which users may select a single value. They are ideal for adjusting settings such as volume, brightness, or applying image filters. -Sliders can have icons on both ends of the bar that reflect a range of values. +- -#### Immediate effects +## Continuous sliders -Changes made with sliders are immediate, allowing a user to make slider adjustments until finding their preference. They shouldn’t be paired with settings that have even minor delays in providing user feedback. +Continuous sliders allow users to select a value along a subjective range. -#### Current state +{{"demo": "pages/components/slider/ContinuousSlider.js"}} -Sliders reflect the current state of the settings they control. +## Discrete sliders -## Simple slider +Discrete sliders can be adjusted to a specific value by referencing its value indicator. By order of demos: -{{"demo": "pages/components/slider/SimpleSlider.js"}} +1. You can generate a mark for each step with `marks={true}`. +2. You can have custom marks by providing a rich array to the `marks` prop. +3. You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. +4. You can force the thumb label to be always visible with `valueLabelDisplay="on"`. -## Slider with steps +{{"demo": "pages/components/slider/DiscreteSlider.js"}} -{{"demo": "pages/components/slider/StepSlider.js"}} +## Range sliders -## Disabled slider +{{"demo": "pages/components/slider/RangeSlider.js"}} -{{"demo": "pages/components/slider/DisabledSlider.js"}} +## Customized sliders -## Vertical slider +Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). -{{"demo": "pages/components/slider/VerticalSlider.js"}} +{{"demo": "pages/components/slider/CustomizedSlider.js"}} -## Customized sliders +## With input field -Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). +{{"demo": "pages/components/slider/InputSlider.js"}} -{{"demo": "pages/components/slider/CustomizedSlider.js"}} +## Vertical sliders -## Custom thumb +{{"demo": "pages/components/slider/VerticalSlider.js"}} -{{"demo": "pages/components/slider/CustomIconSlider.js"}} +## Доступность -## Пользовательский reducer значения +The component handles most of the work necessary to make it accessible. However, you need to make sure that: -{{"demo": "pages/components/slider/CustomValueReducerSlider.js"}} \ No newline at end of file +- The slider, as a whole, has a label (`aria-label` or `aria-labelledby` prop). +- Each thumb has a user-friendly name for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop. \ No newline at end of file diff --git a/docs/src/pages/components/slider/slider-zh.md b/docs/src/pages/components/slider/slider-zh.md index e340eb4d854895..3dd6af8db6ba02 100644 --- a/docs/src/pages/components/slider/slider-zh.md +++ b/docs/src/pages/components/slider/slider-zh.md @@ -9,42 +9,46 @@ components: Slider [滑块](https://material.io/design/components/sliders.html) 反映了条形图上的一系列值，用户可以从中选择单个值。 它们非常适合调整音量，亮度或应用图像滤镜等设置。 -滑块可以在条形图的两端具有反映一系列值的图标。 +- -#### 即时效果 +## Continuous sliders -使用滑块进行的更改是即时的，允许用户进行滑块调整，直到找到他们的偏好。 它们不应与在提供用户反馈方面有轻微延迟的设置配对。 +Continuous sliders allow users to select a value along a subjective range. -#### 当前状态 +{{"demo": "pages/components/slider/ContinuousSlider.js"}} -滑块反映了它们控制的设置的当前状态。 +## Discrete sliders -## 简单的滑块 +Discrete sliders can be adjusted to a specific value by referencing its value indicator. By order of demos: -{{"demo": "pages/components/slider/SimpleSlider.js"}} +1. You can generate a mark for each step with `marks={true}`. +2. You can have custom marks by providing a rich array to the `marks` prop. +3. You can restrict the selectable values to those provided with the `marks` prop with `step={null}`. +4. You can force the thumb label to be always visible with `valueLabelDisplay="on"`. -## 滑块与步骤 +{{"demo": "pages/components/slider/DiscreteSlider.js"}} -{{"demo": "pages/components/slider/StepSlider.js"}} +## Range sliders -## 禁用滑块 +{{"demo": "pages/components/slider/RangeSlider.js"}} -{{"demo": "pages/components/slider/DisabledSlider.js"}} +## Customized sliders -## 垂直滑块 +Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). -{{"demo": "pages/components/slider/VerticalSlider.js"}} +{{"demo": "pages/components/slider/CustomizedSlider.js"}} -## Customized sliders +## With input field -以下是自定义组件的一个示例。您可以在[重写文档页面](/customization/components/)中了解有关此内容的更多信息。 +{{"demo": "pages/components/slider/InputSlider.js"}} -{{"demo": "pages/components/slider/CustomizedSlider.js"}} +## Vertical sliders -## Custom thumb +{{"demo": "pages/components/slider/VerticalSlider.js"}} -{{"demo": "pages/components/slider/CustomIconSlider.js"}} +## 无障碍功能 -## 定制减价机 +The component handles most of the work necessary to make it accessible. However, you need to make sure that: -{{"demo": "pages/components/slider/CustomValueReducerSlider.js"}} \ No newline at end of file +- The slider, as a whole, has a label (`aria-label` or `aria-labelledby` prop). +- Each thumb has a user-friendly name for its current value. This is not required if the value matches the semantics of the label. You can change the name with the `getAriaValueText` or `aria-valuetext` prop. \ No newline at end of file diff --git a/docs/src/pages/components/switches/switches-pt.md b/docs/src/pages/components/switches/switches-pt.md index a36e22ee3780d8..5f4ea6ca43b0f7 100644 --- a/docs/src/pages/components/switches/switches-pt.md +++ b/docs/src/pages/components/switches/switches-pt.md @@ -3,7 +3,7 @@ title: Componente React para Interruptores components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel --- -# Interruptores (Switches) +# InterruptoresInterruptores alternam o estado de uma única configuração ligado ou desligado.
diff --git a/docs/src/pages/components/tables/tables-ja.md b/docs/src/pages/components/tables/tables-ja.md index bd575485fade8d..a3f4a5cbc5c909 100644 --- a/docs/src/pages/components/tables/tables-ja.md +++ b/docs/src/pages/components/tables/tables-ja.md @@ -7,23 +7,23 @@ components: Table, TableBody, TableCell, TableFooter, TableHead, TablePaginationデータテーブルにはデータセットが表示されます。完全にカスタマイズすることができます。
-[Data tables](https://material.io/design/components/data-tables.html) display information in a way that’s easy to scan, so that users can look for patterns and insights. They can be embedded in primary content, such as cards. +[Data tables](https://material.io/design/components/data-tables.html) は情報を見やすく表示する方法です。 Cardなどの他のプライマリーコンテンツを埋め込むことができます。 -Data tables can include: +Data tables では次のものを含めることができます: -- A corresponding visualization -- Navigation -- Tools to query and manipulate data +- 対応の可視化 +- ナビゲーション +- データを照会および操作するためのツール -When including tools, they should be placed directly above or below the table. +ツールを含めるときは、ツールをテーブルの真上、アタは真下に配置します。 ## Structure -A data table contains a header row at the top that lists column names, followed by rows for data. +Data tableの上部には、列名をリストするヘッダー行があり、その後にデータ用の行が続きます。 -Checkboxes should accompany each row if the user needs to select or manipulate data. +ユーザーがデータを選択または操作する必要がある場合は、チェックボックスを各行に付ける必要があります。 -For accessibility, the first column is set to be a `Text fields let users enter and edit text.
+Text fieldを使用すると、ユーザーはテキストを入力および編集できます。
-[Text fields](https://material.io/design/components/text-fields.html) allow users to enter text into a UI. They typically appear in forms and dialogs. +[Text field](https://material.io/design/components/text-fields.html) 、ユーザーはUIにテキストを入力できます。それらは通常フォームやダイアログに現れます。 ## TextField -The `TextField` wrapper component is a complete form control including a label, input and help text. +`TextField` ラッパーコンポーネントは、ラベル、入力、およびヘルプテキストを含む完全なフォームコントロールです。 {{"demo": "pages/components/text-fields/TextFields.js"}} -> **Note:** This version of the text field is no longer documented in the Material Design documentation. +> **注：** このバージョンのテキストフィールドは、Material Designのドキュメントには記載されていません。 ## Outlined -`TextField` supports outlined styling. +`TextField` はアウトラインスタイルをサポートします。 {{"demo": "pages/components/text-fields/OutlinedTextFields.js"}} ## Filled -`TextField` supports filled styling. +`TextField` はアウトラインスタイルをサポートします。 {{"demo": "pages/components/text-fields/FilledTextFields.js"}} ## コンポーネント -`TextField` is composed of smaller components ( [`FormControl`](/api/form-control/), [`Input`](/api/input/), [`FilledInput`](/api/filled-input/), [`InputLabel`](/api/input-label/), [`OutlinedInput`](/api/outlined-input/), and [`FormHelperText`](/api/form-helper-text/) ) that you can leverage directly to significantly customize your form inputs. +`TextField ` は小さなコンポーネントから構成されています。（ [`FormControl`](/api/form-control/)、 [`Input`](/api/input/)、 [`FilledInput`](/api/filled-input/)、 [`InputLabel`](/api/input-label/)、 [`OutlinedInput`](/api/outlined-input/)、 や [`FormHelperText`](/api/form-helper-text/)など ）また、フォーム入力を大幅にカスタマイズするために直接活用できます。 -You might also have noticed that some native HTML input properties are missing from the `TextField` component. This is on purpose. The component takes care of the most used properties, then it's up to the user to use the underlying component shown in the following demo. Still, you can use `inputProps` (and `InputProps`, `InputLabelProps` properties) if you want to avoid some boilerplate. +いくつかのネイティブHTML入力プロパティが `TextField` コンポーネントにないことに気づいたかもしれません。 これは故意です。 コンポーネントは最も使用されているプロパティの面倒を見ます、そしてそれは以下のデモで示される基本的なコンポーネントを使うことはユーザー次第です。 それでも、あなたは使用することができます `inputProps` （及び `InputProps`、 `InputLabelProps` あなたには、いくつかの決まり文句を避けたい場合はプロパティ）。 {{"demo": "pages/components/text-fields/ComposedTextField.js"}} @@ -43,23 +43,23 @@ You might also have noticed that some native HTML input properties are missing f ## Customized inputs -コンポーネントのカスタマイズ例をいくつか示します。あなたはこれについてもっと詳しく知ることができます [上書きドキュメントのページ](/customization/components/)。 +コンポーネントのカスタマイズ例をいくつか示します。あなたはこれについてもっと詳しく知ることができます [オーバライドドキュメントのページ](/customization/components/)。 {{"demo": "pages/components/text-fields/CustomizedInputs.js"}} -Customization does not stop at CSS, you can use composition to build custom components and give your app a unique feel. Below is an example using the [`InputBase`](/api/input-base/) component, inspired by Google Maps. +カスタマイズはCSSにとどまりません。コンポジションを使用してカスタムコンポーネントを作成し、アプリに独特の雰囲気を与えることができます。 以下は、Googleマップに触発された [`InputBase`](/api/input-base/) コンポーネントを使用した例です。 {{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} ## Input Adornments -`Input` allows the provision of `InputAdornment`. These can be used to add a prefix, a suffix or an action to an input. For instance, you can use an icon button to hide or reveal the password. +`Input` は `InputAdornment `提供を許可します。 これらは、入力に接頭辞、接尾辞、またはアクションを追加するために使用できます。 たとえば、アイコンボタンを使用してパスワードを表示または非表示にすることができます。 {{"demo": "pages/components/text-fields/InputAdornments.js"}} -### With icon +### アイコン付き -Icons can be specified as prepended or appended. +アイコンは、先頭または末尾として指定できます。 {{"demo": "pages/components/text-fields/InputWithIcon.js"}} @@ -73,13 +73,13 @@ Icons can be specified as prepended or appended. ## レイアウト -`TextField`, `FormControl` allow the specification of `margin` to alter the vertical spacing of inputs. Using `none` (default) will not apply margins to the `FormControl`, whereas `dense` and `normal` will as well as alter other styles to meet the specification. +` TextField `、` FormControl `を使用すると、` margin `を指定して入力の縦方向の間隔を変更できます。 `none`（デフォルト）を使用すると`FormControl`に余白は適用されませんが、 `dense`と `normal`は他のスタイルを仕様に合わせて変更します。 {{"demo": "pages/components/text-fields/TextFieldMargins.js"}} -## Limitations +## 制限 -The input label "shrink" state isn't always correct. The input label is supposed to shrink as soon as the input is displaying something. In some circumstances, we can't determine the "shrink" state (number input, datetime input, Stripe input). You might notice an overlap. +入力ラベルの「shrink」状態は必ずしも正しくありません。 入力が何かを表示しているとすぐに入力ラベルは縮小するはずです。 状況によっては、「shrink」状態（数値入力、日時入力、ストライプ入力）を判別できません。 重複があるかもしれません。  diff --git a/docs/src/pages/components/transfer-list/transfer-list-pt.md b/docs/src/pages/components/transfer-list/transfer-list-pt.md index 89af95dabc18ac..04bdc6f42ab7ca 100644 --- a/docs/src/pages/components/transfer-list/transfer-list-pt.md +++ b/docs/src/pages/components/transfer-list/transfer-list-pt.md @@ -3,7 +3,7 @@ title: Componente React para Transferência de Lista components: List, ListItem, Checkbox, Switch --- -# Transferência de lista +# Transferência de ListaUm transferência de lista (ou "shuttle") permite ao usuário mover um ou mais itens da lista entre as listas.
diff --git a/docs/src/pages/components/typography/typography-de.md b/docs/src/pages/components/typography/typography-de.md index 8afad4ee26ef90..097e25f1e097f6 100644 --- a/docs/src/pages/components/typography/typography-de.md +++ b/docs/src/pages/components/typography/typography-de.md @@ -17,7 +17,7 @@ Die *Roboto* Schriftart wird **nicht** automatisch durch Material UI geladen wer Unten ist ein Beispiel für ein Link-Markup zum Laden der Roboto-Schriftart von einem CDN dargestellt: ```html - + ``` ## Mit npm installieren @@ -34,7 +34,7 @@ import 'typeface-roboto'; Weitere Informationen finden Sie im [Schriftprojekt](https://github.com/KyleAMathews/typefaces/tree/master/packages/roboto). -⚠️ Seien Sie vorsichtig, wenn Sie diesen Ansatz verwenden. Stellen Sie sicher, dass Ihr Bundler nicht alle Schriftvarianten läd (100/300/400/500/700/900, kursiv / normal, SVG / woff). Durch das Einbetten aller Schriftdateien kann die Größe Ihres Bundles erheblich erhöht werden. Die Standard-Typografiekonfiguration für Material-UI basiert nur auf den Schriftstärken 300, 400 und 500. +⚠️ Seien Sie vorsichtig, wenn Sie diesen Ansatz verwenden. Stellen Sie sicher, dass Ihr Bundler nicht alle Schriftvarianten läd (100/300/400/500/700/900, kursiv / normal, SVG / woff). Durch das Einbetten aller Schriftdateien kann die Größe Ihres Bundles erheblich erhöht werden. Material-UI default typography configuration only relies on 300, 400, 500, and 700 font weights. ## Komponente diff --git a/docs/src/pages/components/typography/typography-es.md b/docs/src/pages/components/typography/typography-es.md index 90a521b291834e..77dd0474bf1700 100644 --- a/docs/src/pages/components/typography/typography-es.md +++ b/docs/src/pages/components/typography/typography-es.md @@ -17,7 +17,7 @@ The *Roboto* font will **not** be automatically loaded by Material-UI. The devel Shown below is a sample link markup used to load the Roboto font from a CDN: ```html - + ``` ## Install with npm @@ -34,7 +34,7 @@ import 'typeface-roboto'; For more info check out the [typeface](https://github.com/KyleAMathews/typefaces/tree/master/packages/roboto) project. -⚠️ Be careful when using this approach. Make sure your bundler doesn't eager load all the font variations (100/300/400/500/700/900, italic/regular, SVG/woff). Inlining all the font files can significantly increase the size of your bundle. Material-UI default typography configuration only relies on 300, 400 and 500 font weights. +⚠️ Be careful when using this approach. Make sure your bundler doesn't eager load all the font variations (100/300/400/500/700/900, italic/regular, SVG/woff). Inlining all the font files can significantly increase the size of your bundle. Material-UI default typography configuration only relies on 300, 400, 500, and 700 font weights. ## Component diff --git a/docs/src/pages/components/typography/typography-fr.md b/docs/src/pages/components/typography/typography-fr.md index a32181fbdccd26..5fd65e705dc8eb 100644 --- a/docs/src/pages/components/typography/typography-fr.md +++ b/docs/src/pages/components/typography/typography-fr.md @@ -17,7 +17,7 @@ The *Roboto* font will **not** be automatically loaded by Material-UI. The devel Shown below is a sample link markup used to load the Roboto font from a CDN: ```html - + ``` ## Install with npm @@ -34,7 +34,7 @@ import 'typeface-roboto'; For more info check out the [typeface](https://github.com/KyleAMathews/typefaces/tree/master/packages/roboto) project. -⚠️ Be careful when using this approach. Make sure your bundler doesn't eager load all the font variations (100/300/400/500/700/900, italic/regular, SVG/woff). Inlining all the font files can significantly increase the size of your bundle. Material-UI default typography configuration only relies on 300, 400 and 500 font weights. +⚠️ Be careful when using this approach. Make sure your bundler doesn't eager load all the font variations (100/300/400/500/700/900, italic/regular, SVG/woff). Inlining all the font files can significantly increase the size of your bundle. Material-UI default typography configuration only relies on 300, 400, 500, and 700 font weights. ## Component diff --git a/docs/src/pages/components/typography/typography-ja.md b/docs/src/pages/components/typography/typography-ja.md index c061688e31c3e8..24a006646a2ac1 100644 --- a/docs/src/pages/components/typography/typography-ja.md +++ b/docs/src/pages/components/typography/typography-ja.md @@ -17,7 +17,7 @@ The *Roboto* font will **not** be automatically loaded by Material-UI. The devel Shown below is a sample link markup used to load the Roboto font from a CDN: ```html - + ``` ## Install with npm @@ -34,13 +34,13 @@ import 'typeface-roboto'; For more info check out the [typeface](https://github.com/KyleAMathews/typefaces/tree/master/packages/roboto) project. -⚠️ Be careful when using this approach. Make sure your bundler doesn't eager load all the font variations (100/300/400/500/700/900, italic/regular, SVG/woff). Inlining all the font files can significantly increase the size of your bundle. Material-UI default typography configuration only relies on 300, 400 and 500 font weights. +⚠️ Be careful when using this approach. Make sure your bundler doesn't eager load all the font variations (100/300/400/500/700/900, italic/regular, SVG/woff). Inlining all the font files can significantly increase the size of your bundle. Material-UI default typography configuration only relies on 300, 400, 500, and 700 font weights. ## Component {{"demo": "pages/components/typography/Types.js"}} -## Theme +## テーマ In some situations you might not be able to use the `Typography` component. Hopefully, you might be able to take advantage of the [`typography`](/customization/default-theme/?expend-path=$.typography) keys of the theme. diff --git a/docs/src/pages/components/typography/typography-pt.md b/docs/src/pages/components/typography/typography-pt.md index c0e44864d9b73b..983674a007bd1f 100644 --- a/docs/src/pages/components/typography/typography-pt.md +++ b/docs/src/pages/components/typography/typography-pt.md @@ -17,7 +17,7 @@ A fonte *Roboto* **não** será carregada automaticamente pelo Material-UI. O de Temos abaixo um exemplo de markup de link usado para carregar a fonte Roboto de um CDN: ```html - + ``` ## Instalar via npm @@ -34,7 +34,7 @@ import 'typeface-roboto'; Para mais informações confira o projeto [typeface](https://github.com/KyleAMathews/typefaces/tree/master/packages/roboto). -⚠️ 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). Colocar todos os arquivos de fonte inline pode aumentar o tamanho do seu bundle significativamente. A configuração de tipografia padrão da Material-UI depende apenas dos font weights 300, 400 e 500. +⚠️ 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). Colocar todos os arquivos de fonte em linha pode aumentar o tamanho do seu pacote significativamente. Material-UI default typography configuration only relies on 300, 400, 500, and 700 font weights. ## Componente diff --git a/docs/src/pages/components/typography/typography-ru.md b/docs/src/pages/components/typography/typography-ru.md index 1edea7c29c2bc3..f117a05e2b39d1 100644 --- a/docs/src/pages/components/typography/typography-ru.md +++ b/docs/src/pages/components/typography/typography-ru.md @@ -17,7 +17,7 @@ The *Roboto* font will **not** be automatically loaded by Material-UI. The devel Shown below is a sample link markup used to load the Roboto font from a CDN: ```html - + ``` ## Install with npm @@ -34,7 +34,7 @@ import 'typeface-roboto'; For more info check out the [typeface](https://github.com/KyleAMathews/typefaces/tree/master/packages/roboto) project. -⚠️ Be careful when using this approach. Make sure your bundler doesn't eager load all the font variations (100/300/400/500/700/900, italic/regular, SVG/woff). Inlining all the font files can significantly increase the size of your bundle. Material-UI default typography configuration only relies on 300, 400 and 500 font weights. +⚠️ Be careful when using this approach. Make sure your bundler doesn't eager load all the font variations (100/300/400/500/700/900, italic/regular, SVG/woff). Inlining all the font files can significantly increase the size of your bundle. Material-UI default typography configuration only relies on 300, 400, 500, and 700 font weights. ## Component diff --git a/docs/src/pages/components/typography/typography-zh.md b/docs/src/pages/components/typography/typography-zh.md index f1b99ea13e6e1b..c2905a8a09329a 100644 --- a/docs/src/pages/components/typography/typography-zh.md +++ b/docs/src/pages/components/typography/typography-zh.md @@ -17,7 +17,7 @@ components: Typography Shown below is a sample link markup used to load the Roboto font from a CDN: ```html - + ``` ## 通过 npm 安装 @@ -34,7 +34,7 @@ import 'typeface-roboto'; 有关详细信息, 请查看 [typeface](https://github.com/KyleAMathews/typefaces/tree/master/packages/roboto) 项目。 -⚠️使用这种方法时要小心。 确保您的包不急于加载所有字体变体 (100/300/400/500/700/900, 斜体/常规, SVG/woff)。 内联所有字体文件可以显着增加捆绑包的大小。 Material-UI默认排版配置仅依赖于300,400和500字体权重。 +⚠️使用这种方法时要小心。 确保您的包不急于加载所有字体变体 (100/300/400/500/700/900, 斜体/常规, SVG/woff)。 内联所有字体文件可以显着增加捆绑包的大小。 Material-UI default typography configuration only relies on 300, 400, 500, and 700 font weights. ## 组件 diff --git a/docs/src/pages/components/use-media-query/use-media-query-de.md b/docs/src/pages/components/use-media-query/use-media-query-de.md index 8ece3ff0e2bd9d..4b0fab59bb915e 100644 --- a/docs/src/pages/components/use-media-query/use-media-query-de.md +++ b/docs/src/pages/components/use-media-query/use-media-query-de.md @@ -55,13 +55,19 @@ Auf dem Server ist eine Implementierung von [matchMedia](https://developer.mozil Die Komponente höherer Ordnung `withWidth()` fügt die Bildschirmbreite der Seite ein. Sie können dasselbe Verhalten mit einem `useWidth` Hook reproduzieren: ```jsx +/** + * Be careful using this hook. It only works because the number of + * breakpoints in theme is static. It will break once you change the number of + * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level + */ function useWidth() { const theme = useTheme(); const keys = [...theme.breakpoints.keys].reverse(); - const queries = useMediaQuery(keys.map(key => theme.breakpoints.only(key))); return ( - queries.reduce((output, matches, index) => { - return !output && matches ? keys[index] : output; + keys.reduce((output, key) => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const matches = useMediaQuery(theme.breakpoints.only(key)); + return !output && matches ? key : output; }, null) || 'xs' ); } diff --git a/docs/src/pages/components/use-media-query/use-media-query-es.md b/docs/src/pages/components/use-media-query/use-media-query-es.md index 499d791ca7e1be..8f80f4fbafaffa 100644 --- a/docs/src/pages/components/use-media-query/use-media-query-es.md +++ b/docs/src/pages/components/use-media-query/use-media-query-es.md @@ -55,13 +55,19 @@ An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/A The `withWidth()` higher-order component injects the screen width of the page. You can reproduce the same behavior with a `useWidth` hook: ```jsx +/** + * Be careful using this hook. It only works because the number of + * breakpoints in theme is static. It will break once you change the number of + * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level + */ function useWidth() { const theme = useTheme(); const keys = [...theme.breakpoints.keys].reverse(); - const queries = useMediaQuery(keys.map(key => theme.breakpoints.only(key))); return ( - queries.reduce((output, matches, index) => { - return !output && matches ? keys[index] : output; + keys.reduce((output, key) => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const matches = useMediaQuery(theme.breakpoints.only(key)); + return !output && matches ? key : output; }, null) || 'xs' ); } @@ -73,7 +79,7 @@ function useWidth() { ### `useMediaQuery(query, [options]) => matches` -#### Arguments +#### Argumentos 1. `query` (*String*): A string representing the media query to handle. 2. `options` (*Object* [optional]): @@ -81,7 +87,7 @@ function useWidth() { - `options.noSsr` (*Boolean* [optional]): Defaults to `false`. In order to perform the server-side rendering reconciliation, it needs to render twice. A first time with nothing and a second time with the children. This double pass rendering cycle comes with a drawback. It's slower. You can set this flag to `true` if you are **not doing server-side rendering**. - `options.ssrMatchMedia` (*Function* [optional]) You might want to use an heuristic to approximate the screen of the client browser. For instance, you could be using the user-agent or the client-hint https://caniuse.com/#search=client%20hint. You can provide a global ponyfill using [`custom properties`](/customization/globals/#default-props) on the theme. Check the [server-side rendering example](#server-side-rendering). -#### Returns +#### Devuelve `matches`: Matches is `true` if the document currently matches the media query and `false` when it does not. diff --git a/docs/src/pages/components/use-media-query/use-media-query-fr.md b/docs/src/pages/components/use-media-query/use-media-query-fr.md index a286b964a55451..86ebfacbb9ec7e 100644 --- a/docs/src/pages/components/use-media-query/use-media-query-fr.md +++ b/docs/src/pages/components/use-media-query/use-media-query-fr.md @@ -55,13 +55,19 @@ An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/A The `withWidth()` higher-order component injects the screen width of the page. You can reproduce the same behavior with a `useWidth` hook: ```jsx +/** + * Be careful using this hook. It only works because the number of + * breakpoints in theme is static. It will break once you change the number of + * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level + */ function useWidth() { const theme = useTheme(); const keys = [...theme.breakpoints.keys].reverse(); - const queries = useMediaQuery(keys.map(key => theme.breakpoints.only(key))); return ( - queries.reduce((output, matches, index) => { - return !output && matches ? keys[index] : output; + keys.reduce((output, key) => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const matches = useMediaQuery(theme.breakpoints.only(key)); + return !output && matches ? key : output; }, null) || 'xs' ); } diff --git a/docs/src/pages/components/use-media-query/use-media-query-ja.md b/docs/src/pages/components/use-media-query/use-media-query-ja.md index 8163f8a3436eb8..5db61ed6f04e01 100644 --- a/docs/src/pages/components/use-media-query/use-media-query-ja.md +++ b/docs/src/pages/components/use-media-query/use-media-query-ja.md @@ -55,13 +55,19 @@ An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/A The `withWidth()` higher-order component injects the screen width of the page. You can reproduce the same behavior with a `useWidth` hook: ```jsx +/** + * Be careful using this hook. It only works because the number of + * breakpoints in theme is static. It will break once you change the number of + * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level + */ function useWidth() { const theme = useTheme(); const keys = [...theme.breakpoints.keys].reverse(); - const queries = useMediaQuery(keys.map(key => theme.breakpoints.only(key))); return ( - queries.reduce((output, matches, index) => { - return !output && matches ? keys[index] : output; + keys.reduce((output, key) => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const matches = useMediaQuery(theme.breakpoints.only(key)); + return !output && matches ? key : output; }, null) || 'xs' ); } diff --git a/docs/src/pages/components/use-media-query/use-media-query-pt.md b/docs/src/pages/components/use-media-query/use-media-query-pt.md index 54df47678996ec..e94642afbecf02 100644 --- a/docs/src/pages/components/use-media-query/use-media-query-pt.md +++ b/docs/src/pages/components/use-media-query/use-media-query-pt.md @@ -55,13 +55,19 @@ Uma implementação do [matchMedia](https://developer.mozilla.org/en-US/docs/Web O componente de ordem superior `withWidth()` injeta a largura da tela da página. Você pode reproduzir o mesmo comportamento com o hook `useWidth`: ```jsx +/** + * Be careful using this hook. It only works because the number of + * breakpoints in theme is static. It will break once you change the number of + * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level + */ function useWidth() { const theme = useTheme(); const keys = [...theme.breakpoints.keys].reverse(); - const queries = useMediaQuery(keys.map(key => theme.breakpoints.only(key))); return ( - queries.reduce((output, matches, index) => { - return !output && matches ? keys[index] : output; + keys.reduce((output, key) => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const matches = useMediaQuery(theme.breakpoints.only(key)); + return !output && matches ? key : output; }, null) || 'xs' ); } diff --git a/docs/src/pages/components/use-media-query/use-media-query-ru.md b/docs/src/pages/components/use-media-query/use-media-query-ru.md index 73036da7ddb07f..5da14cfe53ae29 100644 --- a/docs/src/pages/components/use-media-query/use-media-query-ru.md +++ b/docs/src/pages/components/use-media-query/use-media-query-ru.md @@ -55,13 +55,19 @@ An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/A The `withWidth()` higher-order component injects the screen width of the page. You can reproduce the same behavior with a `useWidth` hook: ```jsx +/** + * Be careful using this hook. It only works because the number of + * breakpoints in theme is static. It will break once you change the number of + * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level + */ function useWidth() { const theme = useTheme(); const keys = [...theme.breakpoints.keys].reverse(); - const queries = useMediaQuery(keys.map(key => theme.breakpoints.only(key))); return ( - queries.reduce((output, matches, index) => { - return !output && matches ? keys[index] : output; + keys.reduce((output, key) => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const matches = useMediaQuery(theme.breakpoints.only(key)); + return !output && matches ? key : output; }, null) || 'xs' ); } diff --git a/docs/src/pages/components/use-media-query/use-media-query-zh.md b/docs/src/pages/components/use-media-query/use-media-query-zh.md index bd8a179137a0d9..ae0c6c7865c1a5 100644 --- a/docs/src/pages/components/use-media-query/use-media-query-zh.md +++ b/docs/src/pages/components/use-media-query/use-media-query-zh.md @@ -38,30 +38,36 @@ function MyComponent() { {{"demo": "pages/components/use-media-query/ThemeHelper.js"}} -## Using JavaScript syntax +## 使用JavaScript语法 -[json2mq](https://github.com/akiran/json2mq) is used to generate media query string from a JavaScript object. +[json2mq](https://github.com/akiran/json2mq) 用于将JavaScript对象转换生成媒体查询字符串。 {{"demo": "pages/components/use-media-query/JavaScriptMedia.js", "defaultCodeOpen": true}} ## 服务器端呈现 -An implementation of [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) is required on the server, we recommend using [css-mediaquery](https://github.com/ericf/css-mediaquery). We also encourage the usage of the `useMediaQueryTheme` version of the hook that fetches properties from the theme. This way, you can provide a `ssrMatchMedia` option once for all your React tree. +服务器上需要实现 [matchMedia](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia) ，我们建议使用 [css-mediaquery](https://github.com/ericf/css-mediaquery)。 我们还鼓励使用从主题中获取属性的 `useMediaQueryTheme` 版本的钩子。 这样，您可以提供一次 `ssrMatchMedia` 选项，所有的React树都适用。 {{"demo": "pages/components/use-media-query/ServerSide.js"}} -## Migrating from `withWidth()` +## 迁徙自 `withWidth()` -`withWidth()` 高阶组件注入页面的屏幕宽度。 You can reproduce the same behavior with a `useWidth` hook: +`withWidth()` 高阶组件注入页面的屏幕宽度。 您可以对 `useWidth` 钩子重用相同的操作： ```jsx +/** + * Be careful using this hook. It only works because the number of + * breakpoints in theme is static. It will break once you change the number of + * breakpoints. See https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level + */ function useWidth() { const theme = useTheme(); const keys = [...theme.breakpoints.keys].reverse(); - const queries = useMediaQuery(keys.map(key => theme.breakpoints.only(key))); return ( - queries.reduce((output, matches, index) => { - return !output && matches ? keys[index] : output; + keys.reduce((output, key) => { + // eslint-disable-next-line react-hooks/rules-of-hooks + const matches = useMediaQuery(theme.breakpoints.only(key)); + return !output && matches ? key : output; }, null) || 'xs' ); } @@ -83,7 +89,7 @@ function useWidth() { #### 返回结果 -`matches`: Matches is `true` if the document currently matches the media query and `false` when it does not. +` matches `：如果文档当前能够匹配这个媒体查询，Matches 是 `true` ，否则为 `false` 。 #### 例子 diff --git a/docs/src/pages/customization/breakpoints/breakpoints-pt.md b/docs/src/pages/customization/breakpoints/breakpoints-pt.md index 0ef32d1434f3fe..341ab3ee215a3a 100644 --- a/docs/src/pages/customization/breakpoints/breakpoints-pt.md +++ b/docs/src/pages/customization/breakpoints/breakpoints-pt.md @@ -1,4 +1,4 @@ -# Pontos de quebra (Breakpoints) +# Pontos de quebraAPI que permite o uso de pontos de quebra em uma ampla variedade de contextos.
diff --git a/docs/src/pages/customization/components/components-pt.md b/docs/src/pages/customization/components/components-pt.md index bb9f8ed8b533af..9770a2ab654c45 100644 --- a/docs/src/pages/customization/components/components-pt.md +++ b/docs/src/pages/customization/components/components-pt.md @@ -1,8 +1,8 @@ -# Customizing components +# Customizando componentes -You can easily customize the appearance of a Material-UI component.
+Você pode customizar facilmente a aparência de um componente do Material-UI.
-As components can be used in different contexts, the are several approaches to this. Going from the narrowest use-case to the broadest, these are: +Como os componentes podem ser usados em diferentes contextos, existem várias abordagens para isso. Indo da abordagem mais estrita a mais abrangente, são elas: 1. [Variação específica para uma situação única](#1-specific-variation-for-a-one-time-situation) 2. [Variação dinâmica para uma situação única](#2-dynamic-variation-for-a-one-time-situation) @@ -14,7 +14,7 @@ As components can be used in different contexts, the are several approaches to t Pode ser necessário alterar o estilo de um componente em alguma implementação específica, para a qual você tem as seguintes soluções disponíveis: -### Overriding styles with class names +### Sobrescrevendo estilos com nomes de classe A primeira maneira de sobrescrever o estilo de um componente é usar **nomes de classe**. Cada componente provê uma propriedade `className` no qual é sempre aplicada ao elemento raiz. @@ -22,7 +22,7 @@ Este exemplo usa o [`withStyles()`](/styles/basics/#higher-order-component-api) {{"demo": "pages/customization/components/ClassNames.js"}} -### Overriding styles with classes +### Sobrescrevendo estilos com classes Quando a propriedade `className` não é suficiente, e você precisa acessar elementos mais profundos, você pode tirar proveito da propriedade do tipo objeto `classes`, com ela podemos customizar todo o CSS injetado pelo Material-UI para um determinado componente. A lista de classes para cada componente está documentada na seção **API do componente**. Por exemplo, você pode dar uma olhada na [API CSS do botão](/api/button/#css). Como alternativa, você pode usar as [ferramentas de desenvolvimento do navegador](#using-the-dev-tools). @@ -71,15 +71,15 @@ const StyledButton = withStyles({ ### Pseudo-classes -The components special states, like *hover*, *focus*, *disabled* and *selected*, are styled with a higher CSS specificity. [Especificidade é um peso](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) que é aplicado a uma determinada declaração CSS. +Os estados especiais dos componentes, como *hover*, *focus*, *disabled* e *selected*, são estilizados com uma especificidade CSS mais alta. [Especificidade é um peso](https://developer.mozilla.org/en-US/docs/Web/CSS/Specificity) que é aplicado a uma determinada declaração CSS. -In order to override the components special states, **you need to increase specificity**. Aqui está um exemplo com o estado *disable* e o componente botão está usando uma **pseudo-class** (`:disabled`): +Para sobrescrever os estados especiais dos componentes, **você precisa aumentar a especificidade**. Aqui está um exemplo com o estado *disable* e o componente botão usando uma **pseudo-class** (`:disabled`): ```css .Button { color: black; } -.Button:disabled { /* We increase the specificity */ +.Button:disabled { /* Aumentamos a especificidade */ color: white; } ``` @@ -88,13 +88,13 @@ In order to override the components special states, **you need to increase speci ` 的底部以确保组件始终正确渲染。 +此示例使用[` withStyles() `](/styles/basics/#higher-order-component-api)高阶组件将自定义样式注入DOM，并通过它的` classes `属性将class名称传递给 `ClassNames` 组件。 您可以选择[任何其他的样式解决方案](/guides/interoperability/)或甚至简单的CSS创建的样式，但一定要 考虑[ CSS注入顺序](/styles/advanced/#css-injection-order) ，当通过Material-UI将CSS注入DOM对组件进行样式化， 这些CSS将具有最高的优先级，因为``被注入到`