From e89e8ff3426eaaffdd74baa00a6fb8afd2cd9b02 Mon Sep 17 00:00:00 2001 From: Matthew Brookes Date: Tue, 12 Nov 2019 22:22:49 +0000 Subject: [PATCH] [docs] Update the translations --- docs/src/modules/components/backers-aa.md | 12 +- docs/src/modules/components/backers-de.md | 12 +- docs/src/modules/components/backers-es.md | 12 +- docs/src/modules/components/backers-fr.md | 12 +- docs/src/modules/components/backers-ja.md | 12 +- docs/src/modules/components/backers-pt.md | 12 +- docs/src/modules/components/backers-ru.md | 12 +- docs/src/modules/components/backers-zh.md | 12 +- .../pages/components/app-bar/app-bar-pt.md | 16 +- .../autocomplete/autocomplete-aa.md | 158 ++++++++++++++++ .../autocomplete/autocomplete-de.md | 168 ++++++++++++++++++ .../autocomplete/autocomplete-es.md | 168 ++++++++++++++++++ .../autocomplete/autocomplete-fr.md | 168 ++++++++++++++++++ .../autocomplete/autocomplete-ja.md | 168 ++++++++++++++++++ .../autocomplete/autocomplete-pt.md | 168 ++++++++++++++++++ .../autocomplete/autocomplete-ru.md | 168 ++++++++++++++++++ .../autocomplete/autocomplete-zh.md | 168 ++++++++++++++++++ .../pages/components/avatars/avatars-aa.md | 8 +- .../pages/components/avatars/avatars-de.md | 8 +- .../pages/components/avatars/avatars-es.md | 8 +- .../pages/components/avatars/avatars-fr.md | 8 +- .../pages/components/avatars/avatars-ja.md | 8 +- .../pages/components/avatars/avatars-pt.md | 8 +- .../pages/components/avatars/avatars-ru.md | 8 +- .../pages/components/avatars/avatars-zh.md | 8 +- docs/src/pages/components/box/box-ru.md | 2 +- .../pages/components/buttons/buttons-pt.md | 2 +- .../components/checkboxes/checkboxes-ja.md | 8 +- .../pages/components/dialogs/dialogs-ru.md | 12 +- docs/src/pages/components/grid/grid-ja.md | 2 +- docs/src/pages/components/grid/grid-zh.md | 33 ++-- docs/src/pages/components/hidden/hidden-es.md | 8 +- docs/src/pages/components/icons/icons-pt.md | 32 ++-- .../integrated-autocomplete-aa.md | 35 ++++ .../integrated-autocomplete-de.md | 35 ++++ .../integrated-autocomplete-es.md | 35 ++++ .../integrated-autocomplete-fr.md | 35 ++++ .../integrated-autocomplete-ja.md | 35 ++++ .../integrated-autocomplete-pt.md | 35 ++++ .../integrated-autocomplete-ru.md | 35 ++++ .../integrated-autocomplete-zh.md | 35 ++++ docs/src/pages/components/modal/modal-ru.md | 2 +- docs/src/pages/components/popper/popper-ru.md | 2 +- docs/src/pages/components/portal/portal-zh.md | 2 +- .../pages/components/selects/selects-aa.md | 46 ++--- .../pages/components/selects/selects-de.md | 26 +-- .../pages/components/selects/selects-es.md | 16 +- .../pages/components/selects/selects-fr.md | 18 +- .../pages/components/selects/selects-ja.md | 30 ++-- .../pages/components/selects/selects-pt.md | 30 ++-- .../pages/components/selects/selects-ru.md | 14 +- .../pages/components/selects/selects-zh.md | 26 +-- .../components/snackbars/snackbars-aa.md | 2 +- .../components/snackbars/snackbars-de.md | 2 +- .../components/snackbars/snackbars-es.md | 2 +- .../components/snackbars/snackbars-fr.md | 2 +- .../components/snackbars/snackbars-ja.md | 2 +- .../components/snackbars/snackbars-pt.md | 2 +- .../components/snackbars/snackbars-ru.md | 2 +- .../components/snackbars/snackbars-zh.md | 2 +- .../pages/components/switches/switches-ja.md | 8 +- docs/src/pages/components/tables/tables-zh.md | 2 +- .../components/text-fields/text-fields-aa.md | 118 +++++++----- .../components/text-fields/text-fields-de.md | 96 ++++++---- .../components/text-fields/text-fields-es.md | 96 ++++++---- .../components/text-fields/text-fields-fr.md | 98 ++++++---- .../components/text-fields/text-fields-ja.md | 114 +++++++----- .../components/text-fields/text-fields-pt.md | 110 +++++++----- .../components/text-fields/text-fields-ru.md | 108 ++++++----- .../components/text-fields/text-fields-zh.md | 102 ++++++----- .../pages/components/tooltips/tooltips-aa.md | 4 +- .../pages/components/tooltips/tooltips-de.md | 2 + .../pages/components/tooltips/tooltips-es.md | 2 + .../pages/components/tooltips/tooltips-fr.md | 2 + .../pages/components/tooltips/tooltips-ja.md | 2 + .../pages/components/tooltips/tooltips-pt.md | 4 +- .../pages/components/tooltips/tooltips-ru.md | 2 + .../pages/components/tooltips/tooltips-zh.md | 2 + .../components/tree-view/tree-view-aa.md | 14 +- .../components/tree-view/tree-view-de.md | 8 +- .../components/tree-view/tree-view-es.md | 8 +- .../components/tree-view/tree-view-fr.md | 8 +- .../components/tree-view/tree-view-ja.md | 10 +- .../components/tree-view/tree-view-pt.md | 10 +- .../components/tree-view/tree-view-ru.md | 12 +- .../components/tree-view/tree-view-zh.md | 10 +- .../customization/components/components-ja.md | 19 +- .../related-projects/related-projects-aa.md | 43 ++--- .../related-projects/related-projects-de.md | 7 - .../related-projects/related-projects-es.md | 7 - .../related-projects/related-projects-fr.md | 7 - .../related-projects/related-projects-ja.md | 7 - .../related-projects/related-projects-pt.md | 27 ++- .../related-projects/related-projects-ru.md | 7 - .../related-projects/related-projects-zh.md | 9 +- docs/src/pages/discover-more/team/team-aa.md | 2 +- docs/src/pages/discover-more/team/team-de.md | 2 +- docs/src/pages/discover-more/team/team-es.md | 2 +- docs/src/pages/discover-more/team/team-fr.md | 2 +- docs/src/pages/discover-more/team/team-ja.md | 2 +- docs/src/pages/discover-more/team/team-pt.md | 2 +- docs/src/pages/discover-more/team/team-ru.md | 2 +- docs/src/pages/discover-more/team/team-zh.md | 2 +- .../example-projects/example-projects-aa.md | 21 ++- .../example-projects/example-projects-de.md | 21 ++- .../example-projects/example-projects-es.md | 21 ++- .../example-projects/example-projects-fr.md | 21 ++- .../example-projects/example-projects-ja.md | 21 ++- .../example-projects/example-projects-pt.md | 21 ++- .../example-projects/example-projects-ru.md | 21 ++- .../example-projects/example-projects-zh.md | 21 ++- .../pages/getting-started/learn/learn-aa.md | 2 +- .../pages/getting-started/learn/learn-de.md | 2 +- .../pages/getting-started/learn/learn-es.md | 2 +- .../pages/getting-started/learn/learn-fr.md | 2 +- .../pages/getting-started/learn/learn-ja.md | 2 +- .../pages/getting-started/learn/learn-pt.md | 2 +- .../pages/getting-started/learn/learn-ru.md | 2 +- .../pages/getting-started/learn/learn-zh.md | 2 +- .../getting-started/support/support-aa.md | 2 +- .../getting-started/support/support-de.md | 2 +- .../getting-started/support/support-es.md | 2 +- .../getting-started/support/support-fr.md | 2 +- .../getting-started/support/support-ja.md | 2 +- .../getting-started/support/support-pt.md | 2 +- .../getting-started/support/support-ru.md | 2 +- .../getting-started/support/support-zh.md | 30 ++-- .../supported-platforms-aa.md | 2 +- .../supported-platforms-de.md | 2 +- .../supported-platforms-es.md | 2 +- .../supported-platforms-fr.md | 2 +- .../supported-platforms-ja.md | 2 +- .../supported-platforms-pt.md | 2 +- .../supported-platforms-ru.md | 2 +- .../supported-platforms-zh.md | 2 +- .../getting-started/templates/templates-ru.md | 2 +- .../pages/getting-started/usage/usage-aa.md | 2 +- .../pages/getting-started/usage/usage-de.md | 2 +- .../pages/getting-started/usage/usage-es.md | 2 +- .../pages/getting-started/usage/usage-fr.md | 2 +- .../pages/getting-started/usage/usage-ja.md | 2 +- .../pages/getting-started/usage/usage-pt.md | 2 +- .../pages/getting-started/usage/usage-ru.md | 18 +- .../pages/getting-started/usage/usage-zh.md | 2 +- .../minimizing-bundle-size-aa.md | 28 +-- .../minimizing-bundle-size-de.md | 15 +- .../minimizing-bundle-size-es.md | 15 +- .../minimizing-bundle-size-fr.md | 15 +- .../minimizing-bundle-size-ja.md | 15 +- .../minimizing-bundle-size-pt.md | 15 +- .../minimizing-bundle-size-ru.md | 15 +- .../minimizing-bundle-size-zh.md | 15 +- .../guides/responsive-ui/responsive-ui-es.md | 16 +- .../server-rendering/server-rendering-aa.md | 2 +- .../server-rendering/server-rendering-de.md | 2 +- .../server-rendering/server-rendering-es.md | 2 +- .../server-rendering/server-rendering-fr.md | 2 +- .../server-rendering/server-rendering-ja.md | 2 +- .../server-rendering/server-rendering-pt.md | 2 +- .../server-rendering/server-rendering-ru.md | 2 +- .../server-rendering/server-rendering-zh.md | 2 +- docs/src/pages/styles/advanced/advanced-aa.md | 2 +- docs/src/pages/styles/advanced/advanced-de.md | 2 +- docs/src/pages/styles/advanced/advanced-es.md | 2 +- docs/src/pages/styles/advanced/advanced-fr.md | 2 +- docs/src/pages/styles/advanced/advanced-ja.md | 2 +- docs/src/pages/styles/advanced/advanced-pt.md | 2 +- docs/src/pages/styles/advanced/advanced-ru.md | 2 +- docs/src/pages/styles/advanced/advanced-zh.md | 2 +- docs/src/pages/system/api/api-aa.md | 4 +- docs/src/pages/system/spacing/spacing-aa.md | 4 +- docs/src/pages/versions/versions-zh.md | 66 +++---- docs/translations/translations-aa.json | 1 + docs/translations/translations-de.json | 1 + docs/translations/translations-es.json | 1 + docs/translations/translations-fr.json | 1 + docs/translations/translations-ja.json | 1 + docs/translations/translations-pt.json | 1 + docs/translations/translations-ru.json | 1 + docs/translations/translations-zh.json | 11 +- 180 files changed, 2873 insertions(+), 896 deletions(-) create mode 100644 docs/src/pages/components/autocomplete/autocomplete-aa.md create mode 100644 docs/src/pages/components/autocomplete/autocomplete-de.md create mode 100644 docs/src/pages/components/autocomplete/autocomplete-es.md create mode 100644 docs/src/pages/components/autocomplete/autocomplete-fr.md create mode 100644 docs/src/pages/components/autocomplete/autocomplete-ja.md create mode 100644 docs/src/pages/components/autocomplete/autocomplete-pt.md create mode 100644 docs/src/pages/components/autocomplete/autocomplete-ru.md create mode 100644 docs/src/pages/components/autocomplete/autocomplete-zh.md create mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-aa.md create mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-de.md create mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-es.md create mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-fr.md create mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ja.md create mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-pt.md create mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ru.md create mode 100644 docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-zh.md diff --git a/docs/src/modules/components/backers-aa.md b/docs/src/modules/components/backers-aa.md index eef078cd92d939..00088323f32f0c 100644 --- a/docs/src/modules/components/backers-aa.md +++ b/docs/src/modules/components/backers-aa.md @@ -9,18 +9,16 @@ crwdns89074:0crwdne89074:0 crwdns89076:0crwdne89076:0

- crwdns89082:0crwdne89082:0 - crwdns89090:0crwdne89090:0 - crwdns89098:0crwdne89098:0 - crwdns89106:0crwdne89106:0 + crwdns89082:0crwdne89082:0 + crwdns89090:0crwdne89090:0 + crwdns89098:0crwdne89098:0

crwdns89110:0crwdne89110:0

- - crwdns89116:0crwdne89116:0 - + crwdns89116:0crwdne89116:0 + crwdns104890:0crwdne104890:0

### crwdns89120:0crwdne89120:0 diff --git a/docs/src/modules/components/backers-de.md b/docs/src/modules/components/backers-de.md index 38a3b764eb52d7..5e12306a98e2d6 100644 --- a/docs/src/modules/components/backers-de.md +++ b/docs/src/modules/components/backers-de.md @@ -9,18 +9,16 @@ Gold-Sponsoren sind diejenigen, die $500 pro Monat und mehr für Material-UI ges über [Patreon](https://www.patreon.com/oliviertassinari)

- creative-tim - tidelift - bitsrc - blokt + creative-tim + tidelift + bitsrc

über [OpenCollective](https://opencollective.com/material-ui)

- - callemall - + callemall + crosswordsolver

### Es gibt noch mehr! diff --git a/docs/src/modules/components/backers-es.md b/docs/src/modules/components/backers-es.md index f2dae4654c6d7b..baf5ed7a59648e 100644 --- a/docs/src/modules/components/backers-es.md +++ b/docs/src/modules/components/backers-es.md @@ -9,18 +9,16 @@ Los Patrocinadores Gold son aquellos que se han comprometido a donar $500/mes o a través de [Patreon](https://www.patreon.com/oliviertassinari)

- creative-tim - tidelift - bitsrc - blokt + creative-tim + tidelift + bitsrc

a través de [OpenCollective](https://opencollective.com/material-ui)

- - callemall - + callemall + crosswordsolver

### ¡Y aún hay más! diff --git a/docs/src/modules/components/backers-fr.md b/docs/src/modules/components/backers-fr.md index 19b336237e3b4b..232bc6a11c05ad 100644 --- a/docs/src/modules/components/backers-fr.md +++ b/docs/src/modules/components/backers-fr.md @@ -9,18 +9,16 @@ Les Gold Sponsors sont ceux qui ont promis 500 $ / mois et plus à Material-UI. via [Patreon](https://www.patreon.com/oliviertassinari)

- creative-tim - tidelift - bitsrc - blokt + creative-tim + tidelift + bitsrc

via [OpenCollective](https://opencollective.com/material-ui)

- - callemall - + callemall + crosswordsolver

### Il y en a plus ! diff --git a/docs/src/modules/components/backers-ja.md b/docs/src/modules/components/backers-ja.md index afd86b46b971f0..ad473b2314882f 100644 --- a/docs/src/modules/components/backers-ja.md +++ b/docs/src/modules/components/backers-ja.md @@ -9,18 +9,16 @@ Material-UIはMITライセンスのオープンソースプロジェクトです [パトロン](https://www.patreon.com/oliviertassinari)によるものです。

- creative-tim - タイドリフト - bitsrc - ブロークト + creative-tim + タイドリフト + bitsrc

[OpenCollective](https://opencollective.com/material-ui)によるものです。

- - callemall - + callemall + crosswordsolver

### もっとあります！ diff --git a/docs/src/modules/components/backers-pt.md b/docs/src/modules/components/backers-pt.md index 7b1fcb0f8bb318..b9b20ae4467fe8 100644 --- a/docs/src/modules/components/backers-pt.md +++ b/docs/src/modules/components/backers-pt.md @@ -9,18 +9,16 @@ Patrocinadores de Ouro são os que apoiaram com $500 por mês ou mais o Material via [Patreon](https://www.patreon.com/oliviertassinari)

- creative-tim - tidelift - bitsrc - blokt + creative-tim + tidelift + bitsrc

via [OpenCollective](https://opencollective.com/material-ui)

- - callemall - + callemall + crosswordsolver

### E tem mais! diff --git a/docs/src/modules/components/backers-ru.md b/docs/src/modules/components/backers-ru.md index f4f22146339778..5fe1443ae73f42 100644 --- a/docs/src/modules/components/backers-ru.md +++ b/docs/src/modules/components/backers-ru.md @@ -9,18 +9,16 @@ Material-UI — это проект с открытым исходным код через [Patreon](https://www.patreon.com/oliviertassinari)

- creative-tim - tidelift - bitsrc - blokt + creative-tim + tidelift + bitsrc

через [OpenCollective](https://opencollective.com/material-ui)

- - callemall - + callemall + crosswordsolver

### И это еще не все! diff --git a/docs/src/modules/components/backers-zh.md b/docs/src/modules/components/backers-zh.md index a56d45033e7935..bc4120aeb03153 100644 --- a/docs/src/modules/components/backers-zh.md +++ b/docs/src/modules/components/backers-zh.md @@ -9,18 +9,16 @@ Material-UI 是一个使用 MIT 许可证的开源项目。 可能完全因为 由[Patreon](https://www.patreon.com/oliviertassinari)

- creative-tim - tidelift - bitsrc - blokt + creative-tim + tidelift + bitsrc

由[OpenCollective](https://opencollective.com/material-ui)

- - callemall - + callemall + 填字游戏

### 其实还有更多！ diff --git a/docs/src/pages/components/app-bar/app-bar-pt.md b/docs/src/pages/components/app-bar/app-bar-pt.md index 71fe8892761dd6..db16ed23306ac0 100644 --- a/docs/src/pages/components/app-bar/app-bar-pt.md +++ b/docs/src/pages/components/app-bar/app-bar-pt.md @@ -50,7 +50,7 @@ Uma barra de aplicativos proeminente. Quando você renderiza a posição da barra de apps fixa, a dimensão do elemento não afeta o resto da página. Isso pode fazer com que parte do seu conteúdo fique invisível, atrás da barra de aplicativos. Aqui estão 3 soluções possíveis: 1. Você pode usar `posição="sticky"` ao invés de fixed. ⚠️ sticky não é suportado pelo IE 11. -2. You can render a second `` component: +2. Você pode renderizar um segundo componente ``: ```jsx function App() { @@ -65,7 +65,7 @@ function App() { } ``` -3. You can use `theme.mixins.toolbar` CSS: +3. Você pode usar `theme.mixins.toolbar` CSS: ```jsx const useStyles = makeStyles(theme => ({ @@ -85,25 +85,25 @@ function App() { }; ``` -## Scrolling +## Rolagem -You can use the `useScrollTrigger()` hook to respond to user scroll actions. +Você pode usar o hook `useScrollTrigger()` para responder às ações de rolagem do usuário. ### Barra de Aplicativos oculta -The app bar hides on scroll down to leave more space for reading. +A barra de aplicativos sumirá ao descer a página para deixar mais espaço de leitura. {{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true, "maxWidth": 500}} ### Barra de aplicativos elevada -The app bar elevates on scroll to communicate that the user is not at the top of the page. +A barra de aplicativos eleva-se na rolagem para comunicar que o usuário não está na parte superior da página. {{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true, "maxWidth": 500}} ### Voltar ao topo -A floating action buttons appears on scroll to make it easy to get back to the top of the page. +Um botão de ação flutuante aparece na rolagem para facilitar o retorno ao topo da página. {{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true, "maxWidth": 500}} @@ -119,7 +119,7 @@ A floating action buttons appears on scroll to make it easy to get back to the t #### Retornos -`trigger`: Does the scroll position match the criteria? +`trigger`: A posição da tela bate com o critério estabelecido? #### Exemplos diff --git a/docs/src/pages/components/autocomplete/autocomplete-aa.md b/docs/src/pages/components/autocomplete/autocomplete-aa.md new file mode 100644 index 00000000000000..a206ba0a06074a --- /dev/null +++ b/docs/src/pages/components/autocomplete/autocomplete-aa.md @@ -0,0 +1,158 @@ +--- +title: crwdns89226:0crwdne89226:0 +components: crwdns104482:0crwdne104482:0 +--- + +# crwdns89230:0crwdne89230:0 + +

crwdns89232:0crwdne89232:0

+ +crwdns104484:0crwdne104484:0 + +1. crwdns104486:0crwdne104486:0 +2. crwdns104488:0crwdne104488:0 + +## crwdns104490:0crwdne104490:0 + +crwdns104492:0crwdne104492:0 + +crwdns104494:0crwdne104494:0 + +### crwdns104496:0crwdne104496:0 + +crwdns104498:0crwdne104498:0 + +crwdns104500:0crwdne104500:0 + +### crwdns104502:0crwdne104502:0 + +crwdns104504:0crwdne104504:0 + +crwdns104506:0crwdne104506:0 + +## crwdns104508:0crwdne104508:0 + +crwdns104510:0crwdne104510:0 + +crwdns104512:0crwdne104512:0 + +## crwdns104514:0crwdne104514:0 + +crwdns104516:0crwdne104516:0 + +## crwdns104518:0crwdne104518:0 + +crwdns104520:0crwdne104520:0 + +## `crwdns104522:0crwdne104522:0` + +crwdns104524:0crwdne104524:0 crwdns104526:0crwdne104526:0 crwdns104528:0crwdne104528:0 + +```jsx +crwdns104530:0crwdne104530:0 +``` + +- crwdns104532:0crwdne104532:0 + +crwdns104534:0crwdne104534:0 + +### crwdns104950:0crwdne104950:0 + +crwdns104952:0crwdne104952:0 + +crwdns104954:0crwdne104954:0 + +## crwdns104542:0crwdne104542:0 + +crwdns104544:0crwdne104544:0 + +### crwdns104546:0crwdne104546:0 + +crwdns104956:0crwdne104956:0 + +crwdns104552:0crwdne104552:0 + +crwdns104958:0crwdne104958:0 + +> crwdns104960:0crwdne104960:0 + +## crwdns104554:0crwdne104554:0 + +crwdns104962:0crwdne104962:0 + +crwdns104964:0crwdne104964:0 + +### crwdns104560:0crwdne104560:0 + +crwdns104966:0crwdne104966:0 + +crwdns104968:0crwdne104968:0 + +### crwdns104566:0crwdne104566:0 + +crwdns104970:0crwdne104970:0 + +## crwdns104570:0crwdne104570:0 + +crwdns104972:0crwdne104972:0 + +crwdns104974:0crwdne104974:0 + +crwdns104976:0crwdne104976:0 + +## crwdns104576:0crwdne104576:0 + +crwdns104978:0crwdne104978:0 + +crwdns104980:0crwdne104980:0 + +## crwdns104982:0crwdne104982:0 + +crwdns104984:0crwdne104984:0 crwdns104986:0crwdne104986:0 + +```js +crwdns104588:0{ createFilterOptions }crwdne104588:0 +``` + +crwdns104988:0crwdne104988:0 + +1. crwdns104592:0[optional]crwdne104592:0 + - crwdns104594:0[optional]crwdne104594:0 crwdns104596:0crwdne104596:0 + - crwdns104598:0[optional]crwdne104598:0 crwdns104600:0crwdne104600:0 + - crwdns104602:0[optional]crwdne104602:0 + - crwdns104604:0[optional]crwdne104604:0 + - crwdns104606:0[optional]crwdne104606:0 crwdns104608:0crwdne104608:0 + +crwdns104990:0crwdne104990:0 + +```js +crwdns104612:0{filterOptions}crwdne104612:0 +``` + +crwdns104992:0crwdne104992:0 + +### crwdns104994:0crwdne104994:0 + +crwdns104996:0crwdne104996:0 crwdns104998:0crwdne104998:0 + +```jsx +crwdns104620:0{ inputValue }crwdnd104620:0{filterOptions}crwdne104620:0 +``` + +## crwdns104622:0crwdne104622:0 + +crwdns105000:0crwdne105000:0 crwdns105002:0crwdne105002:0 + +crwdns105004:0crwdne105004:0 + +## crwdns105006:0crwdne105006:0 + +### crwdns105008:0crwdne105008:0 + +crwdns105010:0crwdne105010:0 crwdns105012:0crwdne105012:0 + +## crwdns105014:0crwdne105014:0 + +crwdns105016:0crwdne105016:0 + +crwdns105018:0crwdne105018:0 crwdns105020:0crwdne105020:0 \ No newline at end of file diff --git a/docs/src/pages/components/autocomplete/autocomplete-de.md b/docs/src/pages/components/autocomplete/autocomplete-de.md new file mode 100644 index 00000000000000..ab3759663df268 --- /dev/null +++ b/docs/src/pages/components/autocomplete/autocomplete-de.md @@ -0,0 +1,168 @@ +--- +title: Autocomplete React-Komponente +components: TextField, Popper, Autocomplete +--- + +# Autovervollständigung (Autocomplete) + +

Die Autovervollständigung ist eine normale Texteingabe, die durch ein Panel mit vorgeschlagenen Optionen ergänzt wird.

+ +The widget is useful for setting the value of a single-line textbox in one of two types of scenarios: + +1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combobox). +2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo). + +## Combo box + +The value must be chosen from a predefined set of allowed values. + +{{"demo": "pages/components/autocomplete/ComboBox.js"}} + +### Playground + +Each of the following examples demonstrate one feature of the Autocomplete component. + +{{"demo": "pages/components/autocomplete/Playground.js"}} + +### Country select + +Choose one country between 248. + +{{"demo": "pages/components/autocomplete/CountrySelect.js"}} + +## Free solo + +Set `freeSolo` to true so the textbox can contain any arbitrary value. + +{{"demo": "pages/components/autocomplete/FreeSolo.js"}} + +## Grouped + +{{"demo": "pages/components/autocomplete/Grouped.js"}} + +## Disabled options + +{{"demo": "pages/components/autocomplete/DisabledOptions.js"}} + +## `useAutocomplete` + +For advanced customization use cases, we expose a `useAutocomplete()` hook. It accepts almost the same options as the Autocomplete component minor all the props related to the rendering of JSX. The Autocomplete component uses this hook internally. + +```jsx +import useAutocomplete from '@material-ui/lab/useAutocomplete'; +``` + +- 📦 [4 kB gzipped](/size-snapshot). + +{{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} + +### Customized hook + +{{"demo": "pages/components/autocomplete/CustomizedHook.js"}} + +Head to the [Customized Autocomplete](#customized-autocomplete) section for a customization example with the `Autocomplete` component instead of the hook. + +## Asynchronous requests + +{{"demo": "pages/components/autocomplete/Asynchronous.js"}} + +### Google Maps place + +A customized UI for Google Maps Places Autocomplete. + +{{"demo": "pages/components/autocomplete/GoogleMaps.js"}} + +For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API. + +> ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. + +## Multiple values + +Also knowned as tags, the user is allowed to enter more than 1 value. + +{{"demo": "pages/components/autocomplete/Tags.js"}} + +### Fixed options + +In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled. + +{{"demo": "pages/components/autocomplete/FixedTags.js"}} + +### Kontrollkästchen + +{{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} + +## Customized Autocomplete + +This demo reproduces the GitHub's label picker: + +{{"demo": "pages/components/autocomplete/GitHubLabel.js"}} + +Head to the [Customized hook](#customized-hook) section for a customization example with the `useAutocomplete` hook instead of the component. + +## Highlights + +The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. + +{{"demo": "pages/components/autocomplete/Highlights.js"}} + +## Custom filter + +The component exposes a factory to create a filter method that can provided to the `filerOption` prop. You can use it to change the default option filter behavior. + +```js +import { createFilterOptions } from '@material-ui/lab/Autocomplete'; +``` + +It supports the following options: + +1. `config` (*Object* [optional]): + - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. + - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. + - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. + - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. + - `config.trim` (*Boolean* [optional]): Defaults to `false`. Remove trailing spaces. + +In the following demo, the options need to start with the query prefix: + +```js +const filterOptions = createFilterOptions({ + matchFrom: 'start', + stringify: option => option.title, +}); + + +``` + +{{"demo": "pages/components/autocomplete/Filter.js", "defaultCodeOpen": false}} + +### Erweitert + +For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). For instance: + +```jsx +import matchSorter from 'match-sorter'; + +const filterOptions = (options, { inputValue }) => + matchSorter(options, inputValue); + + +``` + +## Virtualization + +Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). + +{{"demo": "pages/components/autocomplete/Virtualize.js"}} + +## Einschränkungen + +### iOS VoiceOver + +VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. + +## Barrierefreiheit + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) + +We encourage the usage of a label for the textbox. The component implements the WAI-ARIA authoring practices. \ No newline at end of file diff --git a/docs/src/pages/components/autocomplete/autocomplete-es.md b/docs/src/pages/components/autocomplete/autocomplete-es.md new file mode 100644 index 00000000000000..c6b92874545670 --- /dev/null +++ b/docs/src/pages/components/autocomplete/autocomplete-es.md @@ -0,0 +1,168 @@ +--- +title: Componente de Autocompletado de React +components: TextField, Popper, Autocomplete +--- + +# Autocompletado + +

El autocompletado es una caja de texto normal mejorada por un panel de opciones sugeridas.

+ +The widget is useful for setting the value of a single-line textbox in one of two types of scenarios: + +1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combobox). +2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo). + +## Combo box + +The value must be chosen from a predefined set of allowed values. + +{{"demo": "pages/components/autocomplete/ComboBox.js"}} + +### Playground + +Each of the following examples demonstrate one feature of the Autocomplete component. + +{{"demo": "pages/components/autocomplete/Playground.js"}} + +### Country select + +Choose one country between 248. + +{{"demo": "pages/components/autocomplete/CountrySelect.js"}} + +## Free solo + +Set `freeSolo` to true so the textbox can contain any arbitrary value. + +{{"demo": "pages/components/autocomplete/FreeSolo.js"}} + +## Grouped + +{{"demo": "pages/components/autocomplete/Grouped.js"}} + +## Disabled options + +{{"demo": "pages/components/autocomplete/DisabledOptions.js"}} + +## `useAutocomplete` + +For advanced customization use cases, we expose a `useAutocomplete()` hook. It accepts almost the same options as the Autocomplete component minor all the props related to the rendering of JSX. The Autocomplete component uses this hook internally. + +```jsx +import useAutocomplete from '@material-ui/lab/useAutocomplete'; +``` + +- 📦 [4 kB gzipped](/size-snapshot). + +{{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} + +### Customized hook + +{{"demo": "pages/components/autocomplete/CustomizedHook.js"}} + +Head to the [Customized Autocomplete](#customized-autocomplete) section for a customization example with the `Autocomplete` component instead of the hook. + +## Asynchronous requests + +{{"demo": "pages/components/autocomplete/Asynchronous.js"}} + +### Google Maps place + +A customized UI for Google Maps Places Autocomplete. + +{{"demo": "pages/components/autocomplete/GoogleMaps.js"}} + +For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API. + +> ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. + +## Multiple values + +Also knowned as tags, the user is allowed to enter more than 1 value. + +{{"demo": "pages/components/autocomplete/Tags.js"}} + +### Fixed options + +In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled. + +{{"demo": "pages/components/autocomplete/FixedTags.js"}} + +### Casillas de Verificación + +{{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} + +## Customized Autocomplete + +This demo reproduces the GitHub's label picker: + +{{"demo": "pages/components/autocomplete/GitHubLabel.js"}} + +Head to the [Customized hook](#customized-hook) section for a customization example with the `useAutocomplete` hook instead of the component. + +## Highlights + +The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. + +{{"demo": "pages/components/autocomplete/Highlights.js"}} + +## Custom filter + +The component exposes a factory to create a filter method that can provided to the `filerOption` prop. You can use it to change the default option filter behavior. + +```js +import { createFilterOptions } from '@material-ui/lab/Autocomplete'; +``` + +It supports the following options: + +1. `config` (*Object* [optional]): + - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. + - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. + - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. + - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. + - `config.trim` (*Boolean* [optional]): Defaults to `false`. Remove trailing spaces. + +In the following demo, the options need to start with the query prefix: + +```js +const filterOptions = createFilterOptions({ + matchFrom: 'start', + stringify: option => option.title, +}); + + +``` + +{{"demo": "pages/components/autocomplete/Filter.js", "defaultCodeOpen": false}} + +### Avanzado + +For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). For instance: + +```jsx +import matchSorter from 'match-sorter'; + +const filterOptions = (options, { inputValue }) => + matchSorter(options, inputValue); + + +``` + +## Virtualization + +Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). + +{{"demo": "pages/components/autocomplete/Virtualize.js"}} + +## Limitaciones + +### iOS VoiceOver + +VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. + +## Accesibilidad + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) + +We encourage the usage of a label for the textbox. The component implements the WAI-ARIA authoring practices. \ No newline at end of file diff --git a/docs/src/pages/components/autocomplete/autocomplete-fr.md b/docs/src/pages/components/autocomplete/autocomplete-fr.md new file mode 100644 index 00000000000000..f40bdbadf2fdc6 --- /dev/null +++ b/docs/src/pages/components/autocomplete/autocomplete-fr.md @@ -0,0 +1,168 @@ +--- +title: Composant React Auto-complétion +components: TextField, Popper, Autocomplete +--- + +# Autocomplete (Auto-complétion) + +

La saisie semi-automatique est une entrée de texte normale améliorée par un panneau d'options suggérées.

+ +The widget is useful for setting the value of a single-line textbox in one of two types of scenarios: + +1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combobox). +2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo). + +## Combo box + +The value must be chosen from a predefined set of allowed values. + +{{"demo": "pages/components/autocomplete/ComboBox.js"}} + +### Playground + +Each of the following examples demonstrate one feature of the Autocomplete component. + +{{"demo": "pages/components/autocomplete/Playground.js"}} + +### Country select + +Choose one country between 248. + +{{"demo": "pages/components/autocomplete/CountrySelect.js"}} + +## Free solo + +Set `freeSolo` to true so the textbox can contain any arbitrary value. + +{{"demo": "pages/components/autocomplete/FreeSolo.js"}} + +## Grouped + +{{"demo": "pages/components/autocomplete/Grouped.js"}} + +## Disabled options + +{{"demo": "pages/components/autocomplete/DisabledOptions.js"}} + +## `useAutocomplete` + +For advanced customization use cases, we expose a `useAutocomplete()` hook. It accepts almost the same options as the Autocomplete component minor all the props related to the rendering of JSX. The Autocomplete component uses this hook internally. + +```jsx +import useAutocomplete from '@material-ui/lab/useAutocomplete'; +``` + +- 📦 [4 kB gzipped](/size-snapshot). + +{{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} + +### Customized hook + +{{"demo": "pages/components/autocomplete/CustomizedHook.js"}} + +Head to the [Customized Autocomplete](#customized-autocomplete) section for a customization example with the `Autocomplete` component instead of the hook. + +## Asynchronous requests + +{{"demo": "pages/components/autocomplete/Asynchronous.js"}} + +### Google Maps place + +A customized UI for Google Maps Places Autocomplete. + +{{"demo": "pages/components/autocomplete/GoogleMaps.js"}} + +For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API. + +> ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. + +## Multiple values + +Also knowned as tags, the user is allowed to enter more than 1 value. + +{{"demo": "pages/components/autocomplete/Tags.js"}} + +### Fixed options + +In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled. + +{{"demo": "pages/components/autocomplete/FixedTags.js"}} + +### Cases à cocher + +{{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} + +## Customized Autocomplete + +This demo reproduces the GitHub's label picker: + +{{"demo": "pages/components/autocomplete/GitHubLabel.js"}} + +Head to the [Customized hook](#customized-hook) section for a customization example with the `useAutocomplete` hook instead of the component. + +## Highlights + +The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. + +{{"demo": "pages/components/autocomplete/Highlights.js"}} + +## Custom filter + +The component exposes a factory to create a filter method that can provided to the `filerOption` prop. You can use it to change the default option filter behavior. + +```js +import { createFilterOptions } from '@material-ui/lab/Autocomplete'; +``` + +It supports the following options: + +1. `config` (*Object* [optional]): + - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. + - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. + - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. + - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. + - `config.trim` (*Boolean* [optional]): Defaults to `false`. Remove trailing spaces. + +In the following demo, the options need to start with the query prefix: + +```js +const filterOptions = createFilterOptions({ + matchFrom: 'start', + stringify: option => option.title, +}); + + +``` + +{{"demo": "pages/components/autocomplete/Filter.js", "defaultCodeOpen": false}} + +### Avancé + +For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). For instance: + +```jsx +import matchSorter from 'match-sorter'; + +const filterOptions = (options, { inputValue }) => + matchSorter(options, inputValue); + + +``` + +## Virtualization + +Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). + +{{"demo": "pages/components/autocomplete/Virtualize.js"}} + +## Limites + +### iOS VoiceOver + +VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. + +## Accessibilité + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) + +We encourage the usage of a label for the textbox. The component implements the WAI-ARIA authoring practices. \ No newline at end of file diff --git a/docs/src/pages/components/autocomplete/autocomplete-ja.md b/docs/src/pages/components/autocomplete/autocomplete-ja.md new file mode 100644 index 00000000000000..95de4e22527e14 --- /dev/null +++ b/docs/src/pages/components/autocomplete/autocomplete-ja.md @@ -0,0 +1,168 @@ +--- +title: オートコンプリートReactコンポーネント +components: TextField, Popper, Autocomplete +--- + +# Autocomplete + +

オートコンプリートは、推奨オプションのパネルによって強化された通常のテキスト入力です。

+ +The widget is useful for setting the value of a single-line textbox in one of two types of scenarios: + +1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combobox). +2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo). + +## Combo box + +The value must be chosen from a predefined set of allowed values. + +{{"demo": "pages/components/autocomplete/ComboBox.js"}} + +### Playground + +Each of the following examples demonstrate one feature of the Autocomplete component. + +{{"demo": "pages/components/autocomplete/Playground.js"}} + +### Country select + +Choose one country between 248. + +{{"demo": "pages/components/autocomplete/CountrySelect.js"}} + +## Free solo + +Set `freeSolo` to true so the textbox can contain any arbitrary value. + +{{"demo": "pages/components/autocomplete/FreeSolo.js"}} + +## Grouped + +{{"demo": "pages/components/autocomplete/Grouped.js"}} + +## Disabled options + +{{"demo": "pages/components/autocomplete/DisabledOptions.js"}} + +## `useAutocomplete` + +For advanced customization use cases, we expose a `useAutocomplete()` hook. It accepts almost the same options as the Autocomplete component minor all the props related to the rendering of JSX. The Autocomplete component uses this hook internally. + +```jsx +import useAutocomplete from '@material-ui/lab/useAutocomplete'; +``` + +- 📦 [4 kB gzipped](/size-snapshot). + +{{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} + +### Customized hook + +{{"demo": "pages/components/autocomplete/CustomizedHook.js"}} + +Head to the [Customized Autocomplete](#customized-autocomplete) section for a customization example with the `Autocomplete` component instead of the hook. + +## Asynchronous requests + +{{"demo": "pages/components/autocomplete/Asynchronous.js"}} + +### Google Maps place + +A customized UI for Google Maps Places Autocomplete. + +{{"demo": "pages/components/autocomplete/GoogleMaps.js"}} + +For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API. + +> ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. + +## Multiple values + +Also knowned as tags, the user is allowed to enter more than 1 value. + +{{"demo": "pages/components/autocomplete/Tags.js"}} + +### Fixed options + +In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled. + +{{"demo": "pages/components/autocomplete/FixedTags.js"}} + +### Checkbox + +{{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} + +## Customized Autocomplete + +This demo reproduces the GitHub's label picker: + +{{"demo": "pages/components/autocomplete/GitHubLabel.js"}} + +Head to the [Customized hook](#customized-hook) section for a customization example with the `useAutocomplete` hook instead of the component. + +## Highlights + +The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. + +{{"demo": "pages/components/autocomplete/Highlights.js"}} + +## Custom filter + +The component exposes a factory to create a filter method that can provided to the `filerOption` prop. You can use it to change the default option filter behavior. + +```js +import { createFilterOptions } from '@material-ui/lab/Autocomplete'; +``` + +It supports the following options: + +1. `config` (*Object* [optional]): + - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. + - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. + - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. + - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. + - `config.trim` (*Boolean* [optional]): Defaults to `false`. Remove trailing spaces. + +In the following demo, the options need to start with the query prefix: + +```js +const filterOptions = createFilterOptions({ + matchFrom: 'start', + stringify: option => option.title, +}); + + +``` + +{{"demo": "pages/components/autocomplete/Filter.js", "defaultCodeOpen": false}} + +### 高度な機能(Advanced) + +For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). 例えば： + +```jsx +import matchSorter from 'match-sorter'; + +const filterOptions = (options, { inputValue }) => + matchSorter(options, inputValue); + + +``` + +## Virtualization + +Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). + +{{"demo": "pages/components/autocomplete/Virtualize.js"}} + +## 制限事項 + +### iOS VoiceOver + +VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. + +## アクセシビリティ + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) + +We encourage the usage of a label for the textbox. The component implements the WAI-ARIA authoring practices. \ No newline at end of file diff --git a/docs/src/pages/components/autocomplete/autocomplete-pt.md b/docs/src/pages/components/autocomplete/autocomplete-pt.md new file mode 100644 index 00000000000000..2ac0bc0d523710 --- /dev/null +++ b/docs/src/pages/components/autocomplete/autocomplete-pt.md @@ -0,0 +1,168 @@ +--- +title: Componente React para Autocompletar +components: TextField, Popper, Autocomplete +--- + +# Autocompletar + +

O autocompletar é uma entrada de texto normal aprimorada por um painel de opções sugeridas.

+ +The widget is useful for setting the value of a single-line textbox in one of two types of scenarios: + +1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combobox). +2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo). + +## Combo box + +The value must be chosen from a predefined set of allowed values. + +{{"demo": "pages/components/autocomplete/ComboBox.js"}} + +### Playground + +Each of the following examples demonstrate one feature of the Autocomplete component. + +{{"demo": "pages/components/autocomplete/Playground.js"}} + +### Country select + +Choose one country between 248. + +{{"demo": "pages/components/autocomplete/CountrySelect.js"}} + +## Free solo + +Set `freeSolo` to true so the textbox can contain any arbitrary value. + +{{"demo": "pages/components/autocomplete/FreeSolo.js"}} + +## Grouped + +{{"demo": "pages/components/autocomplete/Grouped.js"}} + +## Disabled options + +{{"demo": "pages/components/autocomplete/DisabledOptions.js"}} + +## `useAutocomplete` + +For advanced customization use cases, we expose a `useAutocomplete()` hook. It accepts almost the same options as the Autocomplete component minor all the props related to the rendering of JSX. The Autocomplete component uses this hook internally. + +```jsx +import useAutocomplete from '@material-ui/lab/useAutocomplete'; +``` + +- 📦 [4 kB gzipped](/size-snapshot). + +{{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} + +### Customized hook + +{{"demo": "pages/components/autocomplete/CustomizedHook.js"}} + +Head to the [Customized Autocomplete](#customized-autocomplete) section for a customization example with the `Autocomplete` component instead of the hook. + +## Asynchronous requests + +{{"demo": "pages/components/autocomplete/Asynchronous.js"}} + +### Google Maps place + +A customized UI for Google Maps Places Autocomplete. + +{{"demo": "pages/components/autocomplete/GoogleMaps.js"}} + +For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API. + +> ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. + +## Multiple values + +Also knowned as tags, the user is allowed to enter more than 1 value. + +{{"demo": "pages/components/autocomplete/Tags.js"}} + +### Fixed options + +In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled. + +{{"demo": "pages/components/autocomplete/FixedTags.js"}} + +### Caixas de Seleção + +{{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} + +## Customized Autocomplete + +This demo reproduces the GitHub's label picker: + +{{"demo": "pages/components/autocomplete/GitHubLabel.js"}} + +Head to the [Customized hook](#customized-hook) section for a customization example with the `useAutocomplete` hook instead of the component. + +## Highlights + +The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. + +{{"demo": "pages/components/autocomplete/Highlights.js"}} + +## Custom filter + +The component exposes a factory to create a filter method that can provided to the `filerOption` prop. You can use it to change the default option filter behavior. + +```js +import { createFilterOptions } from '@material-ui/lab/Autocomplete'; +``` + +It supports the following options: + +1. `config` (*Object* [optional]): + - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. + - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. + - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. + - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. + - `config.trim` (*Boolean* [optional]): Defaults to `false`. Remove trailing spaces. + +In the following demo, the options need to start with the query prefix: + +```js +const filterOptions = createFilterOptions({ + matchFrom: 'start', + stringify: option => option.title, +}); + + +``` + +{{"demo": "pages/components/autocomplete/Filter.js", "defaultCodeOpen": false}} + +### Avançado + +For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). Por exemplo: + +```jsx +import matchSorter from 'match-sorter'; + +const filterOptions = (options, { inputValue }) => + matchSorter(options, inputValue); + + +``` + +## Virtualization + +Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). + +{{"demo": "pages/components/autocomplete/Virtualize.js"}} + +## Limitações + +### iOS VoiceOver + +VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. + +## Acessibilidade + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) + +We encourage the usage of a label for the textbox. The component implements the WAI-ARIA authoring practices. \ No newline at end of file diff --git a/docs/src/pages/components/autocomplete/autocomplete-ru.md b/docs/src/pages/components/autocomplete/autocomplete-ru.md new file mode 100644 index 00000000000000..7dc648646609a8 --- /dev/null +++ b/docs/src/pages/components/autocomplete/autocomplete-ru.md @@ -0,0 +1,168 @@ +--- +title: React-компонент Автозаполнение +components: TextField, Popper, Autocomplete +--- + +# Автодополнение + +

Автодополнение - это обычный ввод текста, дополненный панелью предлагаемых опций.

+ +Этот виджет используется для установки значения однострочного текстового поля. Он полезен в одном из двух случев: + +1. Значение для текстового поля должно быть выбрано из предопределенного набора допустимых значений. Например, поле "местоположение" должно содержать список названий реальных локаций: [combo box](#combobox). +2. Текстовое поле может содержать любое произвольное значение, но целесообразно предлагать пользователю возможные значения. Например, поле поиска может предлагать аналогичные или предыдущие поиски, чтобы сэкономить время пользователя: [free solo](#free-solo). + +## Combo box + +Значение должно быть выбрано из предопределенного набора допустимых значений. + +{{"demo": "pages/components/autocomplete/ComboBox.js"}} + +### Песочница + +Каждый из следующих примеров демонстрирует одну функцию компонента автозаполнения. + +{{"demo": "pages/components/autocomplete/Playground.js"}} + +### Выбор страны + +Выберите одну страну из 248. + +{{"demo": "pages/components/autocomplete/CountrySelect.js"}} + +## Free solo + +Установите для `freeSolo` значение true, чтобы текстовое поле могло содержать любое произвольное значение. + +{{"demo": "pages/components/autocomplete/FreeSolo.js"}} + +## Сгруппированные + +{{"demo": "pages/components/autocomplete/Grouped.js"}} + +## Отключенные опции + +{{"demo": "pages/components/autocomplete/DisabledOptions.js"}} + +## `useAutocomplete` + +For advanced customization use cases, we expose a `useAutocomplete()` hook. It accepts almost the same options as the Autocomplete component minor all the props related to the rendering of JSX. The Autocomplete component uses this hook internally. + +```jsx +import useAutocomplete from '@material-ui/lab/useAutocomplete'; +``` + +- 📦 [4 kB gzipped](/size-snapshot). + +{{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} + +### Customized hook + +{{"demo": "pages/components/autocomplete/CustomizedHook.js"}} + +Head to the [Customized Autocomplete](#customized-autocomplete) section for a customization example with the `Autocomplete` component instead of the hook. + +## Асинхронные запросы + +{{"demo": "pages/components/autocomplete/Asynchronous.js"}} + +### Места Google Maps + +A customized UI for Google Maps Places Autocomplete. + +{{"demo": "pages/components/autocomplete/GoogleMaps.js"}} + +For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API. + +> ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. + +## Множественные значения + +Also knowned as tags, the user is allowed to enter more than 1 value. + +{{"demo": "pages/components/autocomplete/Tags.js"}} + +### Фиксированные опции + +In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled. + +{{"demo": "pages/components/autocomplete/FixedTags.js"}} + +### Чекбоксы + +{{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} + +## Customized Autocomplete + +This demo reproduces the GitHub's label picker: + +{{"demo": "pages/components/autocomplete/GitHubLabel.js"}} + +Head to the [Customized hook](#customized-hook) section for a customization example with the `useAutocomplete` hook instead of the component. + +## Highlights + +The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. + +{{"demo": "pages/components/autocomplete/Highlights.js"}} + +## Custom filter + +The component exposes a factory to create a filter method that can provided to the `filerOption` prop. You can use it to change the default option filter behavior. + +```js +import { createFilterOptions } from '@material-ui/lab/Autocomplete'; +``` + +It supports the following options: + +1. `config` (*Object* [optional]): + - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. + - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. + - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. + - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. + - `config.trim` (*Boolean* [optional]): Defaults to `false`. Remove trailing spaces. + +In the following demo, the options need to start with the query prefix: + +```js +const filterOptions = createFilterOptions({ + matchFrom: 'start', + stringify: option => option.title, +}); + + +``` + +{{"demo": "pages/components/autocomplete/Filter.js", "defaultCodeOpen": false}} + +### Advanced + +For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). For instance: + +```jsx +import matchSorter from 'match-sorter'; + +const filterOptions = (options, { inputValue }) => + matchSorter(options, inputValue); + + +``` + +## Virtualization + +Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). + +{{"demo": "pages/components/autocomplete/Virtualize.js"}} + +## Ограничения + +### iOS VoiceOver + +VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. + +## Доступность + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) + +We encourage the usage of a label for the textbox. The component implements the WAI-ARIA authoring practices. \ No newline at end of file diff --git a/docs/src/pages/components/autocomplete/autocomplete-zh.md b/docs/src/pages/components/autocomplete/autocomplete-zh.md new file mode 100644 index 00000000000000..5e9a0db15c1a28 --- /dev/null +++ b/docs/src/pages/components/autocomplete/autocomplete-zh.md @@ -0,0 +1,168 @@ +--- +title: React Autocomplete（自动补全）组件 +components: TextField, Popper, Autocomplete +--- + +# Autocomplete（自动补全） + +

自动补全是一个通过一组建议选项来帮助用户输入的普通文本输入框。

+ +该组件常用于以下两个场景中的单行文本框赋值： + +1. 文本框必须取值于某个预设值的集合，例如位置字段必须包含合理的位置： [组合框](#combobox) +2. 文本框可以设置任何值，但是为用户提供可能的选项会更好，譬如搜索框可以提供近似的或者曾搜索过的选项以节省用户时间：[灵活的单文本框](#free-solo) + +## 组合框 + +必须取值于一个预设的可选值集合 + +{{"demo": "pages/components/autocomplete/combox.js"}} + +### 练习 + +下面的每个示例都是自动完成组件的一个功能点的演示。 + +{{"demo": "pages/components/autocomplete/Playground.js"}} + +### 国家选择 + +在248个国家之中选一个。 + +{{"demo": "pages/components/autocomplete/CountrySelect.js"}} + +## 自由独奏 + +将 `freeSolo` 设置为true，以便在文本框中输入任意值。 + +{{"demo": "pages/components/autocomplete/FreeSolo.js"}} + +## 分组 + +{{"demo": "pages/components/autocomplete/Grouped.js"}} + +## 已禁用的选项 + +{{"demo": "pages/components/autocomplete/disabledOptions.js"}} + +## `使用自动完成` + +作为一种高级定制方式，我们公开了一个 `useAutocomplete()` 钩子方法。 它接受几乎与Autocomplete组件相同的参数，辅以与JSX渲染有关的所有参数。 Autocomplete组件内部也是使用的此钩子方法。 + +```jsx +import useAutocomplete from '@material-ui/lab/useAutocomplete'; +``` + +- 📦 [4kB gzip包](/size-snapshot)。 + +{{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} + +### 自定义钩子 + +{{"demo": "pages/components/autocomplete/ustomizedHook.js"}} + +转到[自定义自动完成](#customized-autocomplete)部分，查看使用 `Autocomplete` 组件（而不是钩子）的例子。 + +## 异步请求 + +{{"demo": "pages/components/autocomplete/disabledOptions.js"}} + +### Google Maps place + +A customized UI for Google Maps Places Autocomplete. + +{{"demo": "pages/components/autocomplete/GoogleMaps.js"}} + +For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API. + +> ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. + +## Multiple values + +Also knowned as tags, the user is allowed to enter more than 1 value. + +{{"demo": "pages/components/autocomplete/Tags.js"}} + +### Fixed options + +In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled. + +{{"demo": "pages/components/autocomplete/FixedTags.js"}} + +### Checkboxes（复选框） + +{{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} + +## Customized Autocomplete + +This demo reproduces the GitHub's label picker: + +{{"demo": "pages/components/autocomplete/GitHubLabel.js"}} + +Head to the [Customized hook](#customized-hook) section for a customization example with the `useAutocomplete` hook instead of the component. + +## Highlights + +The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. + +{{"demo": "pages/components/autocomplete/Highlights.js"}} + +## Custom filter + +The component exposes a factory to create a filter method that can provided to the `filerOption` prop. You can use it to change the default option filter behavior. + +```js +import { createFilterOptions } from '@material-ui/lab/Autocomplete'; +``` + +It supports the following options: + +1. `config` (*Object* [optional]): + - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. + - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. + - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. + - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. + - `config.trim` (*Boolean* [optional]): Defaults to `false`. Remove trailing spaces. + +In the following demo, the options need to start with the query prefix: + +```js +const filterOptions = createFilterOptions({ + matchFrom: 'start', + stringify: option => option.title, +}); + + +``` + +{{"demo": "pages/components/autocomplete/Filter.js", "defaultCodeOpen": false}} + +### 高级 + +For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). 就像这样： + +```jsx +import matchSorter from 'match-sorter'; + +const filterOptions = (options, { inputValue }) => + matchSorter(options, inputValue); + + +``` + +## Virtualization + +Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). + +{{"demo": "pages/components/autocomplete/Virtualize.js"}} + +## 局限性 + +### iOS VoiceOver + +VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. + +## 可访问性 + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) + +We encourage the usage of a label for the textbox. The component implements the WAI-ARIA authoring practices. \ No newline at end of file diff --git a/docs/src/pages/components/avatars/avatars-aa.md b/docs/src/pages/components/avatars/avatars-aa.md index 76a0eea1a35051..96ccf4609384cd 100644 --- a/docs/src/pages/components/avatars/avatars-aa.md +++ b/docs/src/pages/components/avatars/avatars-aa.md @@ -23,4 +23,10 @@ crwdns89302:0crwdne89302:0 crwdns89306:0crwdne89306:0 -crwdns89308:0crwdne89308:0 \ No newline at end of file +crwdns89308:0crwdne89308:0 + +## crwdns104924:0crwdne104924:0 + +crwdns104926:0crwdne104926:0 + +crwdns104928:0crwdne104928:0 \ No newline at end of file diff --git a/docs/src/pages/components/avatars/avatars-de.md b/docs/src/pages/components/avatars/avatars-de.md index 3ba465d539e06f..06d4e1c6cb8a89 100644 --- a/docs/src/pages/components/avatars/avatars-de.md +++ b/docs/src/pages/components/avatars/avatars-de.md @@ -23,4 +23,10 @@ Avatare mit einfachen Zeichen können erstellt werden, indem man einen String al Icon Avatare werden erstellt, indem man ein Icon als `children` übergibt. -{{"demo": "pages/components/avatars/IconAvatars.js"}} \ No newline at end of file +{{"demo": "pages/components/avatars/IconAvatars.js"}} + +## Varianten + +If you need square or rounded avatars, use the `variant` prop. + +{{"demo": "pages/components/avatars/VariantAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/avatars/avatars-es.md b/docs/src/pages/components/avatars/avatars-es.md index 09e970e76fbd50..9ccf606b9f2430 100644 --- a/docs/src/pages/components/avatars/avatars-es.md +++ b/docs/src/pages/components/avatars/avatars-es.md @@ -23,4 +23,10 @@ Los avatares que contienen letras simples pueden crearse pasando su cadena como Los avatares de íconos son creados pasando un ícono como `children`. -{{"demo": "pages/components/avatars/IconAvatars.js"}} \ No newline at end of file +{{"demo": "pages/components/avatars/IconAvatars.js"}} + +## Variants + +If you need square or rounded avatars, use the `variant` prop. + +{{"demo": "pages/components/avatars/VariantAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/avatars/avatars-fr.md b/docs/src/pages/components/avatars/avatars-fr.md index 95c85a3697f4cf..a4a86a11718621 100644 --- a/docs/src/pages/components/avatars/avatars-fr.md +++ b/docs/src/pages/components/avatars/avatars-fr.md @@ -23,4 +23,10 @@ Des avatars contenant des caractères simples peuvent être créés en transmett Les avatars d'icônes sont créés en transmettant une icône à `enfant`. -{{"demo": "pages/components/avatars/IconAvatars.js"}} \ No newline at end of file +{{"demo": "pages/components/avatars/IconAvatars.js"}} + +## Variants + +If you need square or rounded avatars, use the `variant` prop. + +{{"demo": "pages/components/avatars/VariantAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/avatars/avatars-ja.md b/docs/src/pages/components/avatars/avatars-ja.md index 9219975fd4f0e0..34a193917e0879 100644 --- a/docs/src/pages/components/avatars/avatars-ja.md +++ b/docs/src/pages/components/avatars/avatars-ja.md @@ -23,4 +23,10 @@ components: Avatar アイコンアバターは、 `子要素`としてアイコンを渡すことによって作成されます。 -{{"demo": "pages/components/avatars/IconAvatars.js"}} \ No newline at end of file +{{"demo": "pages/components/avatars/IconAvatars.js"}} + +## Variants + +If you need square or rounded avatars, use the `variant` prop. + +{{"demo": "pages/components/avatars/VariantAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/avatars/avatars-pt.md b/docs/src/pages/components/avatars/avatars-pt.md index ba17a615c720a5..3226f8c13c30b9 100644 --- a/docs/src/pages/components/avatars/avatars-pt.md +++ b/docs/src/pages/components/avatars/avatars-pt.md @@ -23,4 +23,10 @@ Avatares com letras podem ser criados passando sua string como `children`. Avatares com ícones são criados passando o ícone como `children`. -{{"demo": "pages/components/avatars/IconAvatars.js"}} \ No newline at end of file +{{"demo": "pages/components/avatars/IconAvatars.js"}} + +## Variantes + +If you need square or rounded avatars, use the `variant` prop. + +{{"demo": "pages/components/avatars/VariantAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/avatars/avatars-ru.md b/docs/src/pages/components/avatars/avatars-ru.md index 62d8fabf0886b7..3e5c21509d1d97 100644 --- a/docs/src/pages/components/avatars/avatars-ru.md +++ b/docs/src/pages/components/avatars/avatars-ru.md @@ -23,4 +23,10 @@ components: Avatar Аватары значков создаются путем передачи значка как `children`. -{{"demo": "pages/components/avatars/IconAvatars.js"}} \ No newline at end of file +{{"demo": "pages/components/avatars/IconAvatars.js"}} + +## Variants + +If you need square or rounded avatars, use the `variant` prop. + +{{"demo": "pages/components/avatars/VariantAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/avatars/avatars-zh.md b/docs/src/pages/components/avatars/avatars-zh.md index 002b423144cea7..ac39da9b6c0a17 100644 --- a/docs/src/pages/components/avatars/avatars-zh.md +++ b/docs/src/pages/components/avatars/avatars-zh.md @@ -23,4 +23,10 @@ components: Avatar 为了创建图标头像， 您可以将图标作为`子元素`来传递。 -{{"demo": "pages/components/avatars/IconAvatars.js"}} \ No newline at end of file +{{"demo": "pages/components/avatars/IconAvatars.js"}} + +## 变种(Variants) + +If you need square or rounded avatars, use the `variant` prop. + +{{"demo": "pages/components/avatars/VariantAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/box/box-ru.md b/docs/src/pages/components/box/box-ru.md index faaf06dbc4b963..2c076c30c91180 100644 --- a/docs/src/pages/components/box/box-ru.md +++ b/docs/src/pages/components/box/box-ru.md @@ -28,7 +28,7 @@ Box компонент оборачивает ваш компонент. Соз 1. Использовать [`React.cloneElement()`](https://reactjs.org/docs/react-api.html#cloneelement) -The Box component has a `clone` property to enable the usage of the clone element method of React. +Компонент Box имеет свойство `clone`, которое позволяет использовать метод clone element из React. ```jsx diff --git a/docs/src/pages/components/buttons/buttons-pt.md b/docs/src/pages/components/buttons/buttons-pt.md index 160a6085449316..727a0e9b6e6931 100644 --- a/docs/src/pages/components/buttons/buttons-pt.md +++ b/docs/src/pages/components/buttons/buttons-pt.md @@ -118,7 +118,7 @@ Aqui está um [exemplo de integração com react-router](/guides/composition/#bu ### Cursor não permitido -The ButtonBase component sets `pointer-events: none;` on disabled buttons, which prevents the appearance of a disabled cursor. +O componente ButtonBase define `pointer-events: none;` ao desabilitar os botões, o que previne que o cursor desabilitado seja exibido. Se você deseja usar `not-allowed`, você tem duas opções: diff --git a/docs/src/pages/components/checkboxes/checkboxes-ja.md b/docs/src/pages/components/checkboxes/checkboxes-ja.md index 6464094f66a440..9b251915a6b507 100644 --- a/docs/src/pages/components/checkboxes/checkboxes-ja.md +++ b/docs/src/pages/components/checkboxes/checkboxes-ja.md @@ -13,13 +13,13 @@ components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel {{"demo": "pages/components/checkboxes/Checkboxes.js"}} -`Checkbox`コンポーネントは` FormControlLabelコンポーネントを説明のラベルとして使うことができます。

+`Checkbox`コンポーネントは` FormControlLabel`コンポーネントを説明のラベルとして使うことができます。 -

{{"demo": "pages/components/checkboxes/CheckboxLabels.js"}}

+{{"demo": "pages/components/checkboxes/CheckboxLabels.js"}} -

FormGroupのCheckbox

+## FormGroupのCheckbox -

FormGroup` は、より簡単なAPIを提供する選択コントロールコンポーネントをグループ化するために使用される便利なラッパーです。 +`FormGroup` は、より簡単なAPIを提供する選択コントロールコンポーネントをグループ化するために使用される便利なラッパーです。 {{"demo": "pages/components/checkboxes/CheckboxesGroup.js"}} diff --git a/docs/src/pages/components/dialogs/dialogs-ru.md b/docs/src/pages/components/dialogs/dialogs-ru.md index e868340cfe2a36..dab239f2f5b2ae 100644 --- a/docs/src/pages/components/dialogs/dialogs-ru.md +++ b/docs/src/pages/components/dialogs/dialogs-ru.md @@ -13,7 +13,7 @@ components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions ## Простые диалоги -Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account). +Простые диалоговые окна могут предоставить дополнительные сведения или действия об элементе списка. Например, они могут отображать аватары, иконки, уточнение подтекста, или действия (например, добавление учетной записи). Особенности механики касаний: @@ -26,7 +26,7 @@ Simple dialogs can provide additional details or actions about a list item. For Оповещения - это срочные сообщения, требующие подтверждения, которые информируют пользователя о ситуации. -Most alerts don't need titles. They summarize a decision in a sentence or two by either: +Большинство предупреждений не нужны заголовки. They summarize a decision in a sentence or two by either: - Задать вопрос (например, «Удалить этот разговор?») - Создать заявления, связанное с кнопками действий @@ -40,7 +40,7 @@ Use title bar alerts only for high-risk situations, such as the potential loss o {{"demo": "pages/components/dialogs/AlertDialog.js"}} -## Transições +## Переходы Вы также можете поменять анимацию, в следующем примере используется `Slide`. @@ -52,11 +52,11 @@ Use title bar alerts only for high-risk situations, such as the potential loss o {{"demo": "pages/components/dialogs/FormDialog.js"}} -## Customized dialogs +## Индивидуальные диалоги Ниже находится пример кастомизации компонента. You can learn more about this in the [overrides documentation page](/customization/components/). -The dialog has a close button added to aide usability. +Данный диалог имеет кнопку закрытия, добавленную для удобства использования. {{"demo": "pages/components/dialogs/CustomizedDialogs.js"}} @@ -108,7 +108,7 @@ When dialogs become too long for the user’s viewport or device, they scroll. - `scroll = paper` содержимое диалогового окна прокручивается внутри элемента paper. - `scroll = body` содержимое диалога прокручивается внутри элемента body. -Try the demo below to see what we mean: +Попробуйте демо ниже, чтобы увидеть, что мы имеем в виду: {{"demo": "pages/components/dialogs/ScrollDialog.js"}} diff --git a/docs/src/pages/components/grid/grid-ja.md b/docs/src/pages/components/grid/grid-ja.md index 4c1482292c2f9c..eb0cf461902d9b 100644 --- a/docs/src/pages/components/grid/grid-ja.md +++ b/docs/src/pages/components/grid/grid-ja.md @@ -17,7 +17,7 @@ components: Grid - レイアウトには* containers * と * items*の2種類あります 。 - アイテムの幅はパーセンテージで設定されているので、それらは常に親要素に対して流動的でサイズが決まっています。 - アイテムには、個々のアイテム間の間隔を空けるための余白があります。 -- Xs、sm、md、lg、およびxlの5つのグリッドブレークポイントがあります。 +- xs、sm、md、lg、およびxlの5つのグリッドブレークポイントがあります。 **flexboxに不慣れ**な場合、 [CSS-Tricks flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) を読むことをおすすめします。 diff --git a/docs/src/pages/components/grid/grid-zh.md b/docs/src/pages/components/grid/grid-zh.md index 3618f1d21b6683..332f4bb1e3c5f2 100644 --- a/docs/src/pages/components/grid/grid-zh.md +++ b/docs/src/pages/components/grid/grid-zh.md @@ -35,38 +35,37 @@ components: Grid ### 基本栅格 -列宽适用于所有断点（即 `xs +列宽适用于所有断点（即 `xs` 及大于其的值）。 -

{{"demo": "pages/components/grid/CenteredGrid.js"}}

+{{"demo": "pages/components/grid/CenteredGrid.js"}} -

有断点的栅格

+### 有断点的栅格 -

一些列会定义多种宽度，这会导致布局会根据定义的端点来改变其宽度。

+一些列会定义多种宽度，这会导致布局会根据定义的端点来改变其宽度。 -

{{"demo": "pages/components/grid/FullWidthGrid.js"}}

+{{"demo": "pages/components/grid/FullWidthGrid.js"}} -

交互式

+## 交互式 -

下面是一个交互式的演示，您可让探索不同设置下的视觉结果：

+下面是一个交互式的演示，您可让探索不同设置下的视觉结果： -

{{"demo": "pages/components/grid/InteractiveGrid.js", "hideHeader": true}}

+{{"demo": "pages/components/grid/InteractiveGrid.js", "hideHeader": true}} -

自动布局

+## 自动布局 -

自适应布局使得 项 可以平摊使用空间。 -这也意味着你可以显式设置一个 项 的宽度，而使其他项的大小自动进行调整。

+自适应布局使得 *项* 可以平摊使用空间。 这也意味着你可以显式设置一个 *项* 的宽度，而使其他项的大小自动进行调整。 -

{{"demo": "pages/components/grid/AutoGrid.js"}}

+{{"demo": "pages/components/grid/AutoGrid.js"}} -

复杂的栅格

+## 复杂的栅格 -

以下演示不遵循 Material Design 规范，但说明了如何使用栅格构建复杂的布局。

+以下演示不遵循 Material Design 规范，但说明了如何使用栅格构建复杂的布局。 -

{{"demo": "pages/components/grid/ComplexGrid.js"}}

+{{"demo": "pages/components/grid/ComplexGrid.js"}} -

嵌套栅格

+## 嵌套栅格 -

container`和` item `属性分别是两个独立的布尔值，它们可以嵌套使用。 它们可以组合起来使用。 +`container`和` item `属性分别是两个独立的布尔值，它们可以嵌套使用。 它们可以组合起来使用。 > 一个 flex **容器** 是通过将 `flex` 或 `inline-flex`的计算显示赋予给一个元素而生成的。 Flex 容器的流入子容器称为 flex **items**， 它们使用 flex 布局模型进行布局。 diff --git a/docs/src/pages/components/hidden/hidden-es.md b/docs/src/pages/components/hidden/hidden-es.md index 7c6909d052271f..70c7d040dfd852 100644 --- a/docs/src/pages/components/hidden/hidden-es.md +++ b/docs/src/pages/components/hidden/hidden-es.md @@ -5,13 +5,13 @@ components: Hidden # Hidden -

Quickly and responsively toggle the visibility value of components and more with the hidden utilities.

+

Hidden: Cambia rápida y de manera responsiva el valor de visibilidad de los componentes y más con nuestras utilidades ocultas.

-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 the [`Grid`](/components/grid/) component. +Todos los elementos son visibles a menos que **estén explícitamente ocultos**. Para facilitar la integración con [interrupción responsivas](/customization/breakpoints/) de Material-UI, éste componente se puede usar para ocultar cualquier contenido, o puede usarlo junto con el componente [`Grid`](/components/grid/). ## Cómo funciona -Hidden works with a range of breakpoints e.g. `xsUp` or `mdDown`, or one or more breakpoints e.g. `only='sm'` or `only={['md', 'xl']}`. Ranges and individual breakpoints can be used simultaneously to achieve very customized behavior. The ranges are inclusive of the specified breakpoints. +Hidden funciona con un rango de puntos de interrupción, por ejemplo, `xsUp` o `mdDown`, o uno o más puntos de interrupción, por ejemplo, `only = 'sm'` o `only = {['md', 'xl']}`. Los rangos y los puntos de interrupción individuales se pueden usar simultáneamente para lograr un comportamiento muy personalizado. Los rangos son inclusivas de los puntos de interrupción. ```js innerWidth |xs sm md lg xl @@ -23,7 +23,7 @@ mdDown | hide | show ``` -## Implementations +## Implementación ### js diff --git a/docs/src/pages/components/icons/icons-pt.md b/docs/src/pages/components/icons/icons-pt.md index 8e28643d9ffa52..02f315e0744504 100644 --- a/docs/src/pages/components/icons/icons-pt.md +++ b/docs/src/pages/components/icons/icons-pt.md @@ -7,44 +7,44 @@ components: Icon, SvgIcon

Orientação e sugestões para usar ícones com o Material-UI.

-Material-UI provides icons support in three ways: +Material-UI fornece suporte de ícones de três maneiras: -1. Standardized [Material Design icons](#material-icons) exported as React components (SVG icons). -1. With the [SvgIcon](#svgicon) component, a React wrapper for custom SVG icons. -1. With the [Icon](#icon-font-icons) component, a React wrapper for custom font icons. +1. Ícones padronizados [Material Design](#material-icons) exportados como componentes do React (ícones SVG). +1. Com o componente [SvgIcon](#svgicon), um wrapper React para ícones SVG personalizados. +1. Com o componente [Icon](#icon-font-icons), um wrapper React para ícones de fonte personalizados. ## Ícones Material -Material Design has standardized over 1,000 official icons, each in five different "themes" (see below). Para cada ícone SVG, exportamos o respectivo componente React do pacote `@material-ui/icons`. You can search the full list of these icons in our [built-in search page](/components/material-icons/). +O Material Design padronizou mais de 1.000 ícones oficiais, cada um em cinco "temas" diferentes (veja abaixo). Para cada ícone SVG, exportamos o respectivo componente React do pacote `@material-ui/icons`. Você pode pesquisar a lista completa desses ícones em nossa [página de pesquisa incorporada](/components/material-icons/). ### Utilização -Install `@material-ui/icons`. Import icons using one of these two options: +Instale `@material-ui/icons`. Importe ícones usando uma destas duas opções: -- Option 1: +- Opção 1: ```jsx import AccessAlarmIcon from '@material-ui/icons/AccessAlarm'; import ThreeDRotation from '@material-ui/icons/ThreeDRotation'; ``` -- Option 2: +- Opção 2: ```jsx import { AccessAlarm, ThreeDRotation } from '@material-ui/icons'; ``` -The safest is Option 1 but Option 2 can yield the best developer experience. Make sure you follow the [minimizing bundle size guide](/guides/minimizing-bundle-size/#option-2) before using the second approach. The configuration of a Babel plugin is encouraged. +O mais seguro é a Opção 1, mas a Opção 2 pode proporcionar uma melhor experiência para o desenvolvedor. Certifique-se de seguir o guia [minimizando o tamanho do pacote](/guides/minimizing-bundle-size/#option-2) antes de usar a segunda abordagem. A configuração de um plugin Babel é recomendada. -Each icon also has a "theme": `Filled` (default), `Outlined`, `Rounded`, `Two tone` and `Sharp`. If you want to import the icon component with a "theme" different than default, append the "theme" name to the icon name. For example `@material-ui/icons/Delete` icon with: +Cada ícone possui também um "tema": `Filled` (padrão), `Outlined`, `Rounded`, `Two tone` e `Sharp`. Se você deseja importar o componente do ícone com um "tema" diferente do padrão, acrescente o nome do "tema" ao nome do ícone. Por exemplo, para usar o ícone `@material-ui/icons/Delete`, temos: -- `Filled` "theme" (default) is exported as `@material-ui/icons/Delete`, -- `Outlined` "theme" is exported as `@material-ui/icons/DeleteOutlined`, -- `Rounded` "theme" is exported as `@material-ui/icons/DeleteRounded`, -- `Two tone` "theme" is exported as `@material-ui/icons/DeleteTwoTone`, -- `Sharp` "theme" is exported as `@material-ui/icons/DeleteSharp`. +- "Tema" `Filled` (preenchido) (padrão) é exportado como `@material-ui/icons/Delete`, +- "Tema" `Outlined` (contornado) é exportado como `@material-ui/icons/DeleteOutlined`, +- "Tema" `Rounded` (arredondado) é exportado como `@material-ui/icons/DeleteRounded`, +- "Tema" `Two tone` (dois tons) é exportado como `@material-ui/icons/DeleteTwoTone`, +- "Tema" `Sharp` (pontiagudo) é exportado como `@material-ui/icons/DeleteSharp`. -Note: The Material Design specification names the icons using "snake_case" naming (for example `delete_forever`, `add_a_photo`), while `@material-ui/icons` exports the respective icons using "PascalCase" naming (for example `DeleteForever`, `AddAPhoto`). There are three exceptions to this naming rule: `3d_rotation` exported as `ThreeDRotation`, `4k` exported as `FourK`, and `360` exported as `ThreeSixty`. +Nota: A especificação Material Design nomeia os ícones usando a nomeação "snake_case" (por exemplo, `delete_forever`, `add_a_photo`), enquanto `@material-ui/icons` exporta os respectivos ícones usando a nomeação "PascalCase" (por exemplo `DeleteForever`, `AddAPhoto`). Há três exceções a essa regra de nomenclatura: `3d_rotation` exportado como `ThreeDRotation`, `4k` exportado como `FourK`e `360` exportado como `ThreeSixty`. {{"demo": "pages/components/icons/SvgMaterialIcons.js"}} diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-aa.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-aa.md new file mode 100644 index 00000000000000..10255755c2275d --- /dev/null +++ b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-aa.md @@ -0,0 +1,35 @@ +--- +title: crwdns104428:0crwdne104428:0 +--- + +# crwdns104430:0crwdne104430:0 + +

crwdns104432:0crwdne104432:0

+ +> crwdns104434:0crwdne104434:0 + +## crwdns104436:0crwdne104436:0 + +![crwdns104440:0crwdne104440:0](crwdns104438:0crwdne104438:0) ![crwdns104444:0crwdne104444:0](crwdns104442:0crwdne104442:0) + +crwdns104446:0crwdne104446:0 + +crwdns104448:0crwdne104448:0 + +crwdns104450:0crwdne104450:0 + +## crwdns104452:0crwdne104452:0 + +![crwdns104456:0crwdne104456:0](crwdns104454:0crwdne104454:0) ![crwdns104460:0crwdne104460:0](crwdns104458:0crwdne104458:0) + +crwdns104462:0crwdne104462:0 + +crwdns104464:0crwdne104464:0 + +## crwdns104466:0crwdne104466:0 + +![crwdns104470:0crwdne104470:0](crwdns104468:0crwdne104468:0) ![crwdns104474:0crwdne104474:0](crwdns104472:0crwdne104472:0) + +crwdns104476:0crwdne104476:0 crwdns104478:0crwdne104478:0 + +crwdns104480:0crwdne104480:0 diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-de.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-de.md new file mode 100644 index 00000000000000..8e3c7c73915104 --- /dev/null +++ b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-de.md @@ -0,0 +1,35 @@ +--- +title: Integrated Autocomplete React component +--- + +# Integrated Autocomplete + +

Integration examples with third-party libraries.

+ +> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). + +## downshift + +![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) + +Dieses Beispiel zeigt die Benutzung von [downshift](https://github.com/downshift-js/downshift). + +The last demo allows the user to clear the input and show a number of options on focus. + +{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} + +## react-select + +![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) + +Dieses Beispiel zeigt die Benutzung von [react-select](https://github.com/JedWatson/react-select). + +{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} + +## react-autosuggest + +![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) + +This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. + +{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-es.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-es.md new file mode 100644 index 00000000000000..931542870e8f3e --- /dev/null +++ b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-es.md @@ -0,0 +1,35 @@ +--- +title: Integrated Autocomplete React component +--- + +# Integrated Autocomplete + +

Integration examples with third-party libraries.

+ +> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). + +## downshift + +![estrellas](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![descargas npm](https://img.shields.io/npm/dm/downshift.svg) + +This example demonstrates how to use [downshift](https://github.com/downshift-js/downshift). + +The last demo allows the user to clear the input and show a number of options on focus. + +{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} + +## react-select + +![estrellas](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![descargas npm](https://img.shields.io/npm/dm/react-select.svg) + +This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select). + +{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} + +## react-autosuggest + +![estrellas](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![descargas npm](https://img.shields.io/npm/dm/react-autosuggest.svg) + +This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. + +{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-fr.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-fr.md new file mode 100644 index 00000000000000..f87d0f54766103 --- /dev/null +++ b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-fr.md @@ -0,0 +1,35 @@ +--- +title: Integrated Autocomplete React component +--- + +# Integrated Autocomplete + +

Integration examples with third-party libraries.

+ +> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). + +## downshift + +![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) + +This example demonstrates how to use [downshift](https://github.com/downshift-js/downshift). + +La dernière démo permet à l'utilisateur d'effacer une entrée et de montrer un certain nombre d'options sur le focus. + +{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} + +## react-select + +![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) + +This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select). + +{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} + +## react-autosuggest + +![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) + +This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. + +{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ja.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ja.md new file mode 100644 index 00000000000000..46d109f89aebc2 --- /dev/null +++ b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ja.md @@ -0,0 +1,35 @@ +--- +title: Integrated Autocomplete React component +--- + +# Integrated Autocomplete + +

Integration examples with third-party libraries.

+ +> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). + +## downshift + +![Stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npmダウンロード](https://img.shields.io/npm/dm/downshift.svg) + +次の例は、 [ダウンシフト](https://github.com/downshift-js/downshift)の使用方法を示します。 + +最後のデモでは、ユーザーが入力をクリアしてフォーカスのある多くのオプションを表示することができます。 + +{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} + +## react-select + +![Stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npmダウンロード](https://img.shields.io/npm/dm/react-select.svg) + +次の例では、[react-select](https://github.com/JedWatson/react-select)の使用方法を示します。 + +{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} + +## react-autosuggest + +![Stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npmダウンロード](https://img.shields.io/npm/dm/react-autosuggest.svg) + +次の例では、 [react-autosuggest](https://github.com/moroshko/react-autosuggest) の使用方法を示します。 ハイライトロジックに [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) を使用します。 + +{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-pt.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-pt.md new file mode 100644 index 00000000000000..b6eaac42a036de --- /dev/null +++ b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-pt.md @@ -0,0 +1,35 @@ +--- +title: Integrated Autocomplete React component +--- + +# Integrated Autocomplete + +

Integration examples with third-party libraries.

+ +> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). + +## downshift + +![estrelas](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) + +Este exemplo demonstra como usar [downshift](https://github.com/downshift-js/downshift). + +A última demonstração permite ao usuário limpar a entrada e mostrar várias opções em foco. + +{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} + +## react-select + +![estrelas](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) + +Este exemplo demonstra como usar [react-select](https://github.com/JedWatson/react-select). + +{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} + +## react-autosuggest + +![estrelas](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) + +Este exemplo demonstra como usar [react-autosuggest](https://github.com/moroshko/react-autosuggest). Ele também usa [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) para fazer o destaque do texto. + +{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ru.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ru.md new file mode 100644 index 00000000000000..a4d17b5415777e --- /dev/null +++ b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-ru.md @@ -0,0 +1,35 @@ +--- +title: Integrated Autocomplete React component +--- + +# Integrated Autocomplete + +

Integration examples with third-party libraries.

+ +> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). + +## downshift + +![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) + +Этот пример демонстрирует как использовать [downshift](https://github.com/downshift-js/downshift). + +The last demo allows the user to clear the input and show a number of options on focus. + +{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} + +## react-select + +![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) + +This example demonstrates how to use [react-select](https://github.com/JedWatson/react-select). + +{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} + +## react-autosuggest + +![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) + +This example demonstrates how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It also uses [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. + +{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} diff --git a/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-zh.md b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-zh.md new file mode 100644 index 00000000000000..6999c953fcbb6b --- /dev/null +++ b/docs/src/pages/components/integrated-autocomplete/integrated-autocomplete-zh.md @@ -0,0 +1,35 @@ +--- +title: Integrated Autocomplete React component +--- + +# Integrated Autocomplete + +

Integration examples with third-party libraries.

+ +> ⚠️ Since @material-ui/lab@v4.0.0-alpha.30 you can find a ready to use solution for this problem: [check the lab out](/components/autocomplete/). + +## downshift + +![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm下载](https://img.shields.io/npm/dm/downshift.svg) + +以下例子演示了如何使用 [downshift](https://github.com/downshift-js/downshift)。 + +在最后一个例子中，用户可以清除已有的输入，并在焦点的位置上显示一系列的选项。 + +{{"demo": "pages/components/integrated-autocomplete/IntegrationDownshift.js"}} + +## react-select + +![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm下载](https://img.shields.io/npm/dm/react-select.svg) + +以下例子演示了如何使用 [react-select](https://github.com/JedWatson/react-select)。 + +{{"demo": "pages/components/integrated-autocomplete/IntegrationReactSelect.js"}} + +## react-autosuggest + +![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm下载](https://img.shields.io/npm/dm/react-autosuggest.svg) + +以下例子演示了如何使用 [react-autosuggest](https://github.com/moroshko/react-autosuggest)。 它还使用了 [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) 来实现高亮的逻辑。 + +{{"demo": "pages/components/integrated-autocomplete/IntegrationAutosuggest.js"}} diff --git a/docs/src/pages/components/modal/modal-ru.md b/docs/src/pages/components/modal/modal-ru.md index 17e2b20e80f9ed..f0d10770adb48c 100644 --- a/docs/src/pages/components/modal/modal-ru.md +++ b/docs/src/pages/components/modal/modal-ru.md @@ -31,7 +31,7 @@ If you are creating a modal dialog, you probably want to use the [Dialog](/compo Notice that you can disable the outline (often blue or gold) with the `outline: 0` CSS property. -## Transições +## Переходы The open/close state of the modal can be animated with a transition component. This component should respect the following conditions: diff --git a/docs/src/pages/components/popper/popper-ru.md b/docs/src/pages/components/popper/popper-ru.md index 648389480c8e17..2a769be4dc29db 100644 --- a/docs/src/pages/components/popper/popper-ru.md +++ b/docs/src/pages/components/popper/popper-ru.md @@ -21,7 +21,7 @@ Some important features of the `Popper` component: {{"demo": "pages/components/popper/SimplePopper.js"}} -## Transições +## Переходы The open/close state of the popper can be animated with a render prop child and a transition component. This component should respect the following conditions: diff --git a/docs/src/pages/components/portal/portal-zh.md b/docs/src/pages/components/portal/portal-zh.md index 0892a09c903419..5677a9e1fa09b8 100644 --- a/docs/src/pages/components/portal/portal-zh.md +++ b/docs/src/pages/components/portal/portal-zh.md @@ -15,6 +15,6 @@ The children of the portal component will be appended to the `container` specifi {{"demo": "pages/components/portal/SimplePortal.js"}} -## Server-side +## 服务器端 React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://reactjs.org/docs/portals.html) API on the server. You have to wait for the client-side hydration to see the children. \ No newline at end of file diff --git a/docs/src/pages/components/selects/selects-aa.md b/docs/src/pages/components/selects/selects-aa.md index c7a33de2fdb0d9..33178de3a86792 100644 --- a/docs/src/pages/components/selects/selects-aa.md +++ b/docs/src/pages/components/selects/selects-aa.md @@ -19,46 +19,52 @@ crwdns91552:0crwdne91552:0 crwdns91554:0crwdne91554:0 -## crwdns91556:0crwdne91556:0 +## crwdns104638:0crwdne104638:0 -crwdns91558:0crwdne91558:0 crwdns91560:0crwdne91560:0 +crwdns104640:0crwdne104640:0 crwdns104642:0crwdne104642:0 -crwdns91562:0crwdne91562:0 crwdns91564:0crwdne91564:0 +## crwdns104644:0crwdne104644:0 -crwdns91566:0crwdne91566:0 +crwdns104646:0crwdne104646:0 crwdns104648:0crwdne104648:0 -## crwdns91568:0crwdne91568:0 +crwdns104650:0crwdne104650:0 crwdns104652:0crwdne104652:0 -crwdns91570:0crwdne91570:0 crwdns91572:0crwdne91572:0 +crwdns104654:0crwdne104654:0 -crwdns91574:0crwdne91574:0 crwdns91576:0crwdne91576:0 +## crwdns104656:0crwdne104656:0 -crwdns91578:0crwdne91578:0 +crwdns104658:0crwdne104658:0 crwdns104660:0crwdne104660:0 -## crwdns91580:0crwdne91580:0 +crwdns104662:0crwdne104662:0 crwdns104664:0crwdne104664:0 -crwdns91582:0crwdne91582:0 +crwdns104666:0crwdne104666:0 -## crwdns91584:0crwdne91584:0 +## crwdns104668:0crwdne104668:0 -crwdns91586:0crwdne91586:0 +crwdns104670:0crwdne104670:0 -crwdns91588:0crwdne91588:0 +## crwdns104672:0crwdne104672:0 -## crwdns91590:0crwdne91590:0 +crwdns104674:0crwdne104674:0 -crwdns91592:0crwdne91592:0 crwdns91594:0crwdne91594:0 +crwdns104676:0crwdne104676:0 -## crwdns104380:0crwdne104380:0 +## crwdns104678:0crwdne104678:0 -crwdns104382:0crwdne104382:0 crwdns104384:0crwdne104384:0 +crwdns104680:0crwdne104680:0 + +crwdns104682:0crwdne104682:0 + +## crwdns104684:0crwdne104684:0 + +crwdns104686:0crwdne104686:0 crwdns104688:0crwdne104688:0 ```jsx -crwdns104386:0crwdne104386:0 +crwdns104946:0crwdne104946:0 ``` -crwdns104388:0crwdne104388:0 +crwdns104690:0crwdne104690:0 ```jsx -crwdns104390:0crwdne104390:0 +crwdns104948:0crwdne104948:0 ``` \ No newline at end of file diff --git a/docs/src/pages/components/selects/selects-de.md b/docs/src/pages/components/selects/selects-de.md index a839de9d6196e8..20040f6c525afb 100644 --- a/docs/src/pages/components/selects/selects-de.md +++ b/docs/src/pages/components/selects/selects-de.md @@ -19,15 +19,19 @@ Da die Benutzererfahrung auf mobilen Geräten durch die native Auswahl der Platt {{"demo": "pages/components/selects/NativeSelects.js"}} -## Benutzerdefinierte Auswahl +## Text Felder (Text Fields) + +Die `TextField` Wrapper-Komponente ist ein vollständiges Formularsteuerelement, das eine Beschriftung, Eingabe und Hilfetext enthält. You can find an example with the select mode [in this section](/components/text-fields/#select). + +## Customized selects Hier sind einige Beispiele, wie man die Komponente anpassen kann. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/). -Der erste Schritt besteht darin, die `InputBase` Komponente zu formatieren. Anschließend können Sie es entweder direkt als Textfeld verwenden oder der Eigenschaft select `input` zuweisen, um ein Feld `select` zu erhalten. +The first step is to style the `InputBase` component. Once it's styled, you can either use it directly as a text field or provide it to the select `input` property to have a `select` field. {{"demo": "pages/components/selects/CustomizedSelects.js"}} -## Mehrfach Auswahl +## Multiple Select The `Select` component can handle multiple selections. It's enabled with the `multiple` property. @@ -35,19 +39,21 @@ Like with the single selection, you can pull out the new value by accessing `eve {{"demo": "pages/components/selects/MultipleSelect.js"}} -## Kontrollierte Auswahl +## Controlled Open Select {{"demo": "pages/components/selects/ControlledOpenSelect.js"}} -## Mit einem Dialog +## With a Dialog -Während es von der Material Design-Spezifikation nicht empfohlen wird, können Sie eine Auswahl innerhalb eines Dialogfelds verwenden. +While it's discouraged by the Material Design specification, you can use a select inside a dialog. {{"demo": "pages/components/selects/DialogSelect.js"}} -## Text Felder (Text Fields) +## Grouping + +Display categories with the `ListSubheader` component or the native `` element. -Die `TextField` Wrapper-Komponente ist ein vollständiges Formularsteuerelement, das eine Beschriftung, Eingabe und Hilfetext enthält. Ein Beispiel für den Auswahlmodus [in diesem Abschnitt](/components/text-fields/#textfield). +{{"demo": "pages/components/selects/GroupedSelect.js"}} ## Barrierefreiheit @@ -56,7 +62,7 @@ To properly label your `Select` input you need an extra element with an `id` tha ```jsx Age ``` @@ -65,7 +71,7 @@ Alternatively a `TextField` with an `id` and `label` creates the proper markup a ```jsx - Twenty + Ten Twenty ``` \ No newline at end of file diff --git a/docs/src/pages/components/selects/selects-es.md b/docs/src/pages/components/selects/selects-es.md index 7de683c5189bb4..001c5f1f5bef92 100644 --- a/docs/src/pages/components/selects/selects-es.md +++ b/docs/src/pages/components/selects/selects-es.md @@ -19,7 +19,11 @@ Dado que la experiencia del usuario puede mejorarse en móvil usando la selecci {{"demo": "pages/components/selects/NativeSelects.js"}} -## Selecciones personalizadas +## Campos de texto + +El componente `TextField` es un control de formulario completo, incluyendo una etiqueta, el campo de texto y texto de ayuda. You can find an example with the select mode [in this section](/components/text-fields/#select). + +## Customized selects Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). @@ -45,9 +49,11 @@ While it's discouraged by the Material Design specification, you can use a selec {{"demo": "pages/components/selects/DialogSelect.js"}} -## Campos de texto +## Grouping + +Display categories with the `ListSubheader` component or the native `` element. -El componente `TextField` es un control de formulario completo, incluyendo una etiqueta, el campo de texto y texto de ayuda. You can find an example with the select mode [in this section](/components/text-fields/#textfield). +{{"demo": "pages/components/selects/GroupedSelect.js"}} ## Accesibilidad @@ -56,7 +62,7 @@ To properly label your `Select` input you need an extra element with an `id` tha ```jsx Age ``` @@ -65,7 +71,7 @@ Alternatively a `TextField` with an `id` and `label` creates the proper markup a ```jsx - Twenty + Ten Twenty ``` \ No newline at end of file diff --git a/docs/src/pages/components/selects/selects-fr.md b/docs/src/pages/components/selects/selects-fr.md index 05b35433c8275a..9c7d72c3a2e2a7 100644 --- a/docs/src/pages/components/selects/selects-fr.md +++ b/docs/src/pages/components/selects/selects-fr.md @@ -19,6 +19,10 @@ As the user experience can be improved on mobile using the native select of the {{"demo": "pages/components/selects/NativeSelects.js"}} +## Text Fields (Champs de texte) + +Le composant d'encapsulation `TextField` est un contrôle de formulaire complet comprenant une étiquette, une entrée et un texte d'aide. You can find an example with the select mode [in this section](/components/text-fields/#select). + ## Customized selects Here are some examples of customizing the component. Vous pouvez en savoir plus dans la [page de documentation des overrides](/customization/components/). @@ -39,15 +43,17 @@ Like with the single selection, you can pull out the new value by accessing `eve {{"demo": "pages/components/selects/ControlledOpenSelect.js"}} -## Avec un dialogue +## With a Dialog -Bien que cela soit découragé par la spécification Material Design, vous pouvez utiliser une sélection dans une boîte de dialogue. +While it's discouraged by the Material Design specification, you can use a select inside a dialog. {{"demo": "pages/components/selects/DialogSelect.js"}} -## Text Fields (Champs de texte) +## Grouping + +Display categories with the `ListSubheader` component or the native `` element. -Le composant d'encapsulation `TextField` est un contrôle de formulaire complet comprenant une étiquette, une entrée et un texte d'aide. You can find an example with the select mode [in this section](/components/text-fields/#textfield). +{{"demo": "pages/components/selects/GroupedSelect.js"}} ## Accessibilité @@ -56,7 +62,7 @@ To properly label your `Select` input you need an extra element with an `id` tha ```jsx Age ``` @@ -65,7 +71,7 @@ Alternatively a `TextField` with an `id` and `label` creates the proper markup a ```jsx - Twenty + Ten Twenty ``` \ No newline at end of file diff --git a/docs/src/pages/components/selects/selects-ja.md b/docs/src/pages/components/selects/selects-ja.md index e4a6752fae2b83..f15c02d3d5cbad 100644 --- a/docs/src/pages/components/selects/selects-ja.md +++ b/docs/src/pages/components/selects/selects-ja.md @@ -19,35 +19,41 @@ components: Select, NativeSelect {{"demo": "pages/components/selects/NativeSelects.js"}} -## カスタマイズされた選択 +## Text Fields + +`TextField` ラッパーコンポーネントは、ラベル、入力、およびヘルプテキストを含む完全なフォームコントロールです。 You can find an example with the select mode [in this section](/components/text-fields/#select). + +## Customized selects コンポーネントのカスタマイズの例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。 -最初のステップは、 `InputBase` コンポーネントのスタイル設定です。 スタイルを設定したら、テキストフィールドとして直接使用するか、select `input` プロパティに提供して、 `select` フィールドを作成できます。 +The first step is to style the `InputBase` component. Once it's styled, you can either use it directly as a text field or provide it to the select `input` property to have a `select` field. {{"demo": "pages/components/selects/CustomizedSelects.js"}} -## 複数選択 +## Multiple Select -`Select` コンポーネントは、複数の選択を処理できます。 `multiple` プロパティで有効になります。 +The `Select` component can handle multiple selections. It's enabled with the `multiple` property. -単一選択の場合と同様に、 `onChange` コールバックで `event.target.value` にアクセスすることにより、新しい値を引き出すことができます。 常に配列です。 +Like with the single selection, you can pull out the new value by accessing `event.target.value` in the `onChange` callback. It's always an array. {{"demo": "pages/components/selects/MultipleSelect.js"}} -## 制御開選択 +## Controlled Open Select {{"demo": "pages/components/selects/ControlledOpenSelect.js"}} -## ダイアログ付き +## With a Dialog -Material Designの仕様では推奨されていませんが、ダイアログ内でselectを使用できます。 +While it's discouraged by the Material Design specification, you can use a select inside a dialog. {{"demo": "pages/components/selects/DialogSelect.js"}} -## Text Fields +## Grouping + +Display categories with the `ListSubheader` component or the native `` element. -`TextField` ラッパーコンポーネントは、ラベル、入力、ヘルプテキストを含む完全なフォームコントロールです。 このセクションで、選択モード 例を見つけることができます。

+{{"demo": "pages/components/selects/GroupedSelect.js"}} ## アクセシビリティ @@ -56,7 +62,7 @@ To properly label your `Select` input you need an extra element with an `id` tha ```jsx Age ``` @@ -65,7 +71,7 @@ Alternatively a `TextField` with an `id` and `label` creates the proper markup a ```jsx - Twenty + Ten Twenty ``` \ No newline at end of file diff --git a/docs/src/pages/components/selects/selects-pt.md b/docs/src/pages/components/selects/selects-pt.md index 5b00da10072dec..2d5351b09f86bb 100644 --- a/docs/src/pages/components/selects/selects-pt.md +++ b/docs/src/pages/components/selects/selects-pt.md @@ -19,35 +19,41 @@ Como a experiência do usuário pode ser melhorada em dispositivos móveis usand {{"demo": "pages/components/selects/NativeSelects.js"}} -## Seleções Customizados +## Campos de Texto + +O componente wrapper `TextField` é um controle de formulário completo, incluindo um rótulo, entrada e texto de ajuda. You can find an example with the select mode [in this section](/components/text-fields/#select). + +## Customized selects Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/). -O primeiro passo é modelar o componente `InputBase`. Uma vez estilizado, você pode usá-lo diretamente como um campo de texto ou fornecê-lo à propriedade `input` da seleção para ter um campo `select`. +The first step is to style the `InputBase` component. Once it's styled, you can either use it directly as a text field or provide it to the select `input` property to have a `select` field. {{"demo": "pages/components/selects/CustomizedSelects.js"}} -## Seleção Múltipla +## Multiple Select -O componente `Select` pode lidar com várias seleções. É ativado com a propriedade `multiple`. +The `Select` component can handle multiple selections. It's enabled with the `multiple` property. -Como na seleção única, você pode extrair o novo valor acessando `event.target.value` na chamada `onChange`. É sempre uma matriz. +Like with the single selection, you can pull out the new value by accessing `event.target.value` in the `onChange` callback. It's always an array. {{"demo": "pages/components/selects/MultipleSelect.js"}} -## Seleção Aberta Controlada +## Controlled Open Select {{"demo": "pages/components/selects/ControlledOpenSelect.js"}} -## Com uma caixa de Diálogo +## With a Dialog -Embora não seja recomendado pela especificação do Material Design, você pode usar uma seleção dentro de uma caixa de diálogo. +While it's discouraged by the Material Design specification, you can use a select inside a dialog. {{"demo": "pages/components/selects/DialogSelect.js"}} -## Campos de Texto +## Grouping + +Display categories with the `ListSubheader` component or the native `` element. -O componente wrapper `TextField` é um controle de formulário completo, incluindo um rótulo, entrada e texto de ajuda. Você pode encontrar um exemplo de seleção [nesta seção](/components/text-fields/#textfield). +{{"demo": "pages/components/selects/GroupedSelect.js"}} ## Acessibilidade @@ -56,7 +62,7 @@ To properly label your `Select` input you need an extra element with an `id` tha ```jsx Age ``` @@ -65,7 +71,7 @@ Alternatively a `TextField` with an `id` and `label` creates the proper markup a ```jsx - Twenty + Ten Twenty ``` \ No newline at end of file diff --git a/docs/src/pages/components/selects/selects-ru.md b/docs/src/pages/components/selects/selects-ru.md index 2c49948106d6f1..2b4aaa1cc9d268 100644 --- a/docs/src/pages/components/selects/selects-ru.md +++ b/docs/src/pages/components/selects/selects-ru.md @@ -19,6 +19,10 @@ As the user experience can be improved on mobile using the native select of the {{"demo": "pages/components/selects/NativeSelects.js"}} +## Текстовые поля + +`TextField` представляет собой полноценный элемент управления формы, включая метку (label), само поле ввода и вспомогательный текст. You can find an example with the select mode [in this section](/components/text-fields/#select). + ## Customized selects Ниже находятся примеры кастомизации компонента. You can learn more about this in the [overrides documentation page](/customization/components/). @@ -45,9 +49,11 @@ While it's discouraged by the Material Design specification, you can use a selec {{"demo": "pages/components/selects/DialogSelect.js"}} -## Текстовые поля +## Grouping + +Display categories with the `ListSubheader` component or the native `` element. -`TextField` представляет собой полноценный элемент управления формы, включая метку (label), само поле ввода и вспомогательный текст. You can find an example with the select mode [in this section](/components/text-fields/#textfield). +{{"demo": "pages/components/selects/GroupedSelect.js"}} ## Доступность @@ -56,7 +62,7 @@ To properly label your `Select` input you need an extra element with an `id` tha ```jsx Age ``` @@ -65,7 +71,7 @@ Alternatively a `TextField` with an `id` and `label` creates the proper markup a ```jsx - Twenty + Ten Twenty ``` \ No newline at end of file diff --git a/docs/src/pages/components/selects/selects-zh.md b/docs/src/pages/components/selects/selects-zh.md index d4a12c381583d3..77439a60d9bc60 100644 --- a/docs/src/pages/components/selects/selects-zh.md +++ b/docs/src/pages/components/selects/selects-zh.md @@ -19,15 +19,19 @@ components: Select, NativeSelect {{"demo": "pages/components/selects/NativeSelects.js"}} -## 自定义选择器 +## Text Fields（文本框） + +`TextField` wrapper 组件是一个完整的表单控件，包括标签，输入和帮助文本。 You can find an example with the select mode [in this section](/components/text-fields/#select). + +## Customized selects 以下是自定义组件的一些例子。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。 -第一步是设置 `InputBase` 组件的样式。 一旦设置好样式，您就可以直接将其用作文本字段，也可以将其提供给 select 组件的 `input` 属性作为一个 `select` 字段。 +The first step is to style the `InputBase` component. Once it's styled, you can either use it directly as a text field or provide it to the select `input` property to have a `select` field. {{"demo": "pages/components/selects/CustomizedSelects.js"}} -## 多选 +## Multiple Select The `Select` component can handle multiple selections. It's enabled with the `multiple` property. @@ -35,19 +39,21 @@ Like with the single selection, you can pull out the new value by accessing `eve {{"demo": "pages/components/selects/MultipleSelect.js"}} -## 可控制地打开选择器 +## Controlled Open Select {{"demo": "pages/components/selects/ControlledOpenSelect.js"}} -## 与对话框组件使用 +## With a Dialog -虽然 Material Design 的规范不鼓励这样做，但您还是可以在对话框组件中使用选择器。 +While it's discouraged by the Material Design specification, you can use a select inside a dialog. {{"demo": "pages/components/selects/DialogSelect.js"}} -## 文本输入框 +## Grouping + +Display categories with the `ListSubheader` component or the native `` element. -`TextField` 包装器组件是一个完整的表单控件，它包括了标签、输入和帮助文本。 您可以在本节中找到具有[select模式](/components/text-fields/#textfield)的示例 +{{"demo": "pages/components/selects/GroupedSelect.js"}} ## 可访问性 @@ -56,7 +62,7 @@ To properly label your `Select` input you need an extra element with an `id` tha ```jsx Age ``` @@ -65,7 +71,7 @@ Alternatively a `TextField` with an `id` and `label` creates the proper markup a ```jsx - Twenty + Ten Twenty ``` \ No newline at end of file diff --git a/docs/src/pages/components/snackbars/snackbars-aa.md b/docs/src/pages/components/snackbars/snackbars-aa.md index c89f3e2b9c8fb4..decc20ca767bff 100644 --- a/docs/src/pages/components/snackbars/snackbars-aa.md +++ b/docs/src/pages/components/snackbars/snackbars-aa.md @@ -73,7 +73,7 @@ crwdns91778:0crwdne91778:0 ![crwdns91784:0crwdne91784:0](crwdns91782:0crwdne91782:0) ![crwdns91788:0crwdne91788:0](crwdns91786:0crwdne91786:0) -crwdns103954:0crwdne103954:0 crwdns103956:0crwdne103956:0 crwdns103958:0crwdne103958:0 +crwdns104894:0crwdne104894:0 crwdns104896:0crwdne104896:0 crwdns103958:0crwdne103958:0 crwdns103960:0crwdne103960:0 diff --git a/docs/src/pages/components/snackbars/snackbars-de.md b/docs/src/pages/components/snackbars/snackbars-de.md index 62efcf288a6e21..2606923e5732ba 100644 --- a/docs/src/pages/components/snackbars/snackbars-de.md +++ b/docs/src/pages/components/snackbars/snackbars-de.md @@ -73,7 +73,7 @@ Für fortgeschrittenere Anwendungsfälle können Ihnen folgende Projekte helfen: ![stars](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/notistack.svg) -We demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack has an **imperative API** that makes it easy to display toasts (so you don't have to deal with open/close state of them). It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification). +This example demonstrates how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack has an **imperative API** that makes it easy to display snackbars, without having to handle their open/close state. It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification). {{"demo": "pages/components/snackbars/IntegrationNotistack.js", "defaultCodeOpen": false}} diff --git a/docs/src/pages/components/snackbars/snackbars-es.md b/docs/src/pages/components/snackbars/snackbars-es.md index 1a6a94919a7791..32bd75b87e1088 100644 --- a/docs/src/pages/components/snackbars/snackbars-es.md +++ b/docs/src/pages/components/snackbars/snackbars-es.md @@ -73,7 +73,7 @@ Para usos más avanzados tal vez puedas aprovercharte de: ![estrellas](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars) ![descargas npm](https://img.shields.io/npm/dm/notistack.svg) -We demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack has an **imperative API** that makes it easy to display toasts (so you don't have to deal with open/close state of them). It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification). +This example demonstrates how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack has an **imperative API** that makes it easy to display snackbars, without having to handle their open/close state. It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification). {{"demo": "pages/components/snackbars/IntegrationNotistack.js", "defaultCodeOpen": false}} diff --git a/docs/src/pages/components/snackbars/snackbars-fr.md b/docs/src/pages/components/snackbars/snackbars-fr.md index 60d45c86586624..ba702434bf9d10 100644 --- a/docs/src/pages/components/snackbars/snackbars-fr.md +++ b/docs/src/pages/components/snackbars/snackbars-fr.md @@ -73,7 +73,7 @@ Pour des cas d'utilisation plus avancés, vous pourrez peut-être tirer parti de ![stars](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/notistack.svg) -We demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack has an **imperative API** that makes it easy to display toasts (so you don't have to deal with open/close state of them). It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification). +This example demonstrates how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack has an **imperative API** that makes it easy to display snackbars, without having to handle their open/close state. It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification). {{"demo": "pages/components/snackbars/IntegrationNotistack.js", "defaultCodeOpen": false}} diff --git a/docs/src/pages/components/snackbars/snackbars-ja.md b/docs/src/pages/components/snackbars/snackbars-ja.md index a0d556473ee58d..761426faee9323 100644 --- a/docs/src/pages/components/snackbars/snackbars-ja.md +++ b/docs/src/pages/components/snackbars/snackbars-ja.md @@ -73,7 +73,7 @@ Google Keepのスナックバーの動作を再現することを目的とした ![Stars](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars) ![npmダウンロード](https://img.shields.io/npm/dm/notistack.svg) -We demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack has an **imperative API** that makes it easy to display toasts (so you don't have to deal with open/close state of them). It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification). +This example demonstrates how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack has an **imperative API** that makes it easy to display snackbars, without having to handle their open/close state. It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification). {{"demo": "pages/components/snackbars/IntegrationNotistack.js", "defaultCodeOpen": false}} diff --git a/docs/src/pages/components/snackbars/snackbars-pt.md b/docs/src/pages/components/snackbars/snackbars-pt.md index 3da473c46a2a0e..639d6ca7822d52 100644 --- a/docs/src/pages/components/snackbars/snackbars-pt.md +++ b/docs/src/pages/components/snackbars/snackbars-pt.md @@ -73,7 +73,7 @@ Para usos mais avançados, você pode tirar vantagem com: ![estrelas](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/notistack.svg) -We demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack has an **imperative API** that makes it easy to display toasts (so you don't have to deal with open/close state of them). It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification). +This example demonstrates how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack has an **imperative API** that makes it easy to display snackbars, without having to handle their open/close state. It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification). {{"demo": "pages/components/snackbars/IntegrationNotistack.js", "defaultCodeOpen": false}} diff --git a/docs/src/pages/components/snackbars/snackbars-ru.md b/docs/src/pages/components/snackbars/snackbars-ru.md index 3a6ef56e1448b4..8868b6cdfaeae2 100644 --- a/docs/src/pages/components/snackbars/snackbars-ru.md +++ b/docs/src/pages/components/snackbars/snackbars-ru.md @@ -73,7 +73,7 @@ You can change the direction of the [Slide](/components/transitions/#slide) tran ![stars](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/notistack.svg) -We demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack has an **imperative API** that makes it easy to display toasts (so you don't have to deal with open/close state of them). It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification). +This example demonstrates how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack has an **imperative API** that makes it easy to display snackbars, without having to handle their open/close state. It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification). {{"demo": "pages/components/snackbars/IntegrationNotistack.js", "defaultCodeOpen": false}} diff --git a/docs/src/pages/components/snackbars/snackbars-zh.md b/docs/src/pages/components/snackbars/snackbars-zh.md index 3a09d69e673865..99717a3ba9ca5f 100644 --- a/docs/src/pages/components/snackbars/snackbars-zh.md +++ b/docs/src/pages/components/snackbars/snackbars-zh.md @@ -73,7 +73,7 @@ Snackbars contain a single line of text directly related to the operation perfor ![评星](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars) ![npm下载](https://img.shields.io/npm/dm/notistack.svg) -We demonstrate how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack has an **imperative API** that makes it easy to display toasts (so you don't have to deal with open/close state of them). It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification). +This example demonstrates how to use [notistack](https://github.com/iamhosseindhv/notistack). notistack has an **imperative API** that makes it easy to display snackbars, without having to handle their open/close state. It also enables you to **stack** them on top of one another (although this is discouraged by the Material Design specification). {{"demo": "pages/components/snackbars/IntegrationNotistack.js", "defaultCodeOpen": false}} diff --git a/docs/src/pages/components/switches/switches-ja.md b/docs/src/pages/components/switches/switches-ja.md index 730ed85fc7a078..aff56846693257 100644 --- a/docs/src/pages/components/switches/switches-ja.md +++ b/docs/src/pages/components/switches/switches-ja.md @@ -13,13 +13,13 @@ components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel ## FormControlLabelを使用したスイッチ -`Switch` コンポーネントは` FormControlLabelコンポーネントを説明のラベルとして使うことができます。

+`Switch` コンポーネントは` FormControlLabel`コンポーネントを説明のラベルとして使うことができます。 -

{{"demo": "pages/components/switches/SwitchLabels.js"}}

+{{"demo": "pages/components/switches/SwitchLabels.js"}} -

FormGroupを使用したスイッチ

+## FormGroupを使用したスイッチ -

FormGroup` は、より簡単なAPIを提供する選択コントロールコンポーネントをグループ化するために使用される便利なラッパーです。 ただし、代わりに [チェックボックス](#checkboxes) を使用することをお勧めします。 +`FormGroup` は、より簡単なAPIを提供する選択コントロールコンポーネントをグループ化するために使用される便利なラッパーです。 ただし、代わりに [チェックボックス](#checkboxes) を使用することをお勧めします。 {{"demo": "pages/components/switches/SwitchesGroup.js"}} diff --git a/docs/src/pages/components/tables/tables-zh.md b/docs/src/pages/components/tables/tables-zh.md index 458ca695561c91..389d524bdfb117 100644 --- a/docs/src/pages/components/tables/tables-zh.md +++ b/docs/src/pages/components/tables/tables-zh.md @@ -97,7 +97,7 @@ In the following example, we demonstrate how to use [react-virtualized](https:// ### material-table -![评星](https://img.shields.io/github/stars/mbrn/material-table.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/material-table.svg) +![stars](https://img.shields.io/github/stars/mbrn/material-table.svg?style=social&label=Stars) ![npm下载](https://img.shields.io/npm/dm/material-table.svg) [material-table](https://github.com/mbrn/material-table) is a simple and powerful Datatable for React based on Material-UI Table with some additional features. They support many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). You should check it out. diff --git a/docs/src/pages/components/text-fields/text-fields-aa.md b/docs/src/pages/components/text-fields/text-fields-aa.md index 5677b74a3c9437..49b09d56052c16 100644 --- a/docs/src/pages/components/text-fields/text-fields-aa.md +++ b/docs/src/pages/components/text-fields/text-fields-aa.md @@ -13,103 +13,123 @@ crwdns92226:0crwdne92226:0 crwdns92228:0crwdne92228:0 crwdns92232:0crwdne92232:0 -crwdns92234:0crwdne92234:0 +crwdns104736:0crwdne104736:0 -> crwdns92236:0crwdne92236:0 +crwdns104738:0crwdne104738:0 -## crwdns92238:0crwdne92238:0 +> crwdns104740:0crwdne104740:0 -crwdns92240:0crwdne92240:0 +## crwdns104742:0crwdne104742:0 -crwdns92242:0crwdne92242:0 +crwdns104744:0crwdne104744:0 crwdns104746:0crwdne104746:0 -## crwdns92244:0crwdne92244:0 +crwdns104748:0crwdne104748:0 -crwdns92246:0crwdne92246:0 +## crwdns104750:0crwdne104750:0 -crwdns92248:0crwdne92248:0 +crwdns104752:0crwdne104752:0 -## crwdns92250:0crwdne92250:0 +crwdns104754:0crwdne104754:0 -crwdns92252:0crwdne92252:0 +## crwdns104756:0crwdne104756:0 -crwdns92254:0crwdne92254:0 crwdns92256:0crwdne92256:0 crwdns92258:0crwdne92258:0 crwdns92260:0crwdne92260:0 +crwdns104758:0crwdne104758:0 -crwdns92262:0crwdne92262:0 +crwdns104760:0crwdne104760:0 -## crwdns92264:0crwdne92264:0 +## crwdns104762:0crwdne104762:0 -crwdns92266:0crwdne92266:0 +crwdns104764:0crwdne104764:0 -## crwdns92268:0crwdne92268:0 +crwdns104766:0crwdne104766:0 -crwdns92270:0crwdne92270:0 crwdns92272:0crwdne92272:0 +## crwdns104768:0crwdne104768:0 -crwdns92274:0crwdne92274:0 +crwdns104770:0crwdne104770:0 -crwdns92276:0crwdne92276:0 crwdns92278:0crwdne92278:0 +crwdns104772:0crwdne104772:0 -crwdns92280:0crwdne92280:0 +### crwdns104774:0crwdne104774:0 -## crwdns92282:0crwdne92282:0 +crwdns104776:0crwdne104776:0 crwdns104778:0crwdne104778:0 crwdns104780:0crwdne104780:0 -crwdns92284:0crwdne92284:0 crwdns92286:0crwdne92286:0 crwdns92288:0crwdne92288:0 +crwdns104782:0crwdne104782:0 -crwdns92290:0crwdne92290:0 +## crwdns104784:0crwdne104784:0 -### crwdns92292:0crwdne92292:0 +crwdns104786:0crwdne104786:0 crwdns104788:0crwdne104788:0 crwdns104790:0crwdne104790:0 -crwdns92294:0crwdne92294:0 +crwdns104792:0crwdne104792:0 -crwdns92296:0crwdne92296:0 +crwdns104794:0crwdne104794:0 -### crwdns92298:0crwdne92298:0 +## crwdns104796:0crwdne104796:0 -crwdns92300:0crwdne92300:0 +crwdns104798:0crwdne104798:0 -### crwdns92302:0crwdne92302:0 +crwdns104800:0crwdne104800:0 -crwdns92304:0crwdne92304:0 +## crwdns104802:0crwdne104802:0 -## crwdns92306:0crwdne92306:0 +crwdns104804:0crwdne104804:0 -crwdns92308:0crwdne92308:0 crwdns92310:0crwdne92310:0 +crwdns104806:0crwdne104806:0 crwdns104808:0crwdne104808:0 crwdns104810:0crwdne104810:0 crwdns104812:0crwdne104812:0 -crwdns92312:0crwdne92312:0 +crwdns104814:0crwdne104814:0 -## crwdns92314:0crwdne92314:0 +## crwdns104816:0crwdne104816:0 -### crwdns92316:0crwdne92316:0 +crwdns104818:0crwdne104818:0 -crwdns92318:0crwdne92318:0 crwdns92320:0crwdne92320:0 crwdns92322:0crwdne92322:0 crwdns92324:0crwdne92324:0 +## crwdns105022:0crwdne105022:0 -![crwdns92328:0crwdne92328:0](crwdns92326:0crwdne92326:0) +crwdns105024:0crwdne105024:0 -crwdns92330:0crwdne92330:0 +crwdns105026:0crwdne105026:0 + +## crwdns105028:0crwdne105028:0 + +crwdns105030:0crwdne105030:0 crwdns105032:0crwdne105032:0 + +crwdns105034:0crwdne105034:0 + +crwdns105036:0crwdne105036:0 crwdns105038:0crwdne105038:0 + +crwdns105040:0crwdne105040:0 + +## crwdns105042:0crwdne105042:0 + +### crwdns104836:0crwdne104836:0 + +crwdns105044:0crwdne105044:0 crwdns105046:0crwdne105046:0 crwdns105048:0crwdne105048:0 crwdns105050:0crwdne105050:0 + +![crwdns105054:0crwdne105054:0](crwdns105052:0crwdne105052:0) + +crwdns105056:0crwdne105056:0 ```jsx crwdns92332:0{{ shrink: true }}crwdne92332:0 ``` -crwdns92334:0crwdne92334:0 +crwdns105058:0crwdne105058:0 ```jsx crwdns92336:0crwdne92336:0 ``` -### crwdns92338:0crwdne92338:0 +### crwdns104854:0crwdne104854:0 -crwdns92340:0crwdne92340:0 crwdns92342:0crwdne92342:0 +crwdns105060:0crwdne105060:0 crwdns105062:0crwdne105062:0 -## crwdns92344:0crwdne92344:0 +## crwdns105064:0crwdne105064:0 -crwdns92346:0crwdne92346:0 crwdns92348:0crwdne92348:0 +crwdns105066:0crwdne105066:0 crwdns105068:0crwdne105068:0 -crwdns92350:0crwdne92350:0 crwdns92352:0crwdne92352:0 +crwdns105070:0crwdne105070:0 crwdns105072:0crwdne105072:0 -crwdns92354:0crwdne92354:0 +crwdns105074:0crwdne105074:0 -crwdns92356:0crwdne92356:0 crwdns92358:0crwdne92358:0 +crwdns105076:0crwdne105076:0 crwdns105078:0crwdne105078:0 ```ts crwdns92360:0crwdne92360:0 @@ -119,9 +139,9 @@ crwdns92360:0crwdne92360:0 crwdns92362:0{ component: Component, inputRef, ...other }crwdnd92362:0{...other}crwdnd92362:0{ component: SomeThirdPartyComponent }crwdne92362:0 ``` -## crwdns92364:0crwdne92364:0 +## crwdns105080:0crwdne105080:0 -crwdns92366:0crwdne92366:0 crwdns92368:0crwdne92368:0 +crwdns105082:0crwdne105082:0 crwdns105084:0crwdne105084:0 ```jsx crwdns92370:0crwdne92370:0 @@ -134,9 +154,9 @@ crwdns92370:0crwdne92370:0 crwdns92376:0crwdne92376:0 ``` -## crwdns92378:0crwdne92378:0 +## crwdns105086:0crwdne105086:0 -crwdns92380:0crwdne92380:0 +crwdns105088:0crwdne105088:0 - crwdns102638:0crwdne102638:0 - crwdns102640:0crwdne102640:0 diff --git a/docs/src/pages/components/text-fields/text-fields-de.md b/docs/src/pages/components/text-fields/text-fields-de.md index fce6675913d9b2..de60e544415732 100644 --- a/docs/src/pages/components/text-fields/text-fields-de.md +++ b/docs/src/pages/components/text-fields/text-fields-de.md @@ -13,85 +13,105 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp Die `TextField` Wrapper-Komponente ist ein vollständiges Formularsteuerelement, das eine Beschriftung, Eingabe und Hilfetext enthält. -{{"demo": "pages/components/text-fields/TextFields.js"}} +It supports standard, outlined and filled styling. -> **Note:** This version of the text field is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it. +{{"demo": "pages/components/text-fields/BasicTextFields.js"}} -## Umrandung +> **Note:** The standard variant of the `TextField` is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it. -`TextField` unterstützt Umrandungen. +## Form props -{{"demo": "pages/components/text-fields/OutlinedTextFields.js"}} +Standard form attributes are supported e.g. `required`, `readOnly`, `type`, etc. as well as a `helperText` which is used to give context about a field’s input, such as how the input will be used. -## Gefüllt +{{"demo": "pages/components/text-fields/FormPropsTextFields.js"}} -`TextField` unterstützt Füllung. +## Validation -{{"demo": "pages/components/text-fields/FilledTextFields.js"}} +The `error` prop toggles the error state, the `helperText` prop can then be used to provide feedback to the user about the error. -## Komponenten - -Das `Textfeld` besteht aus kleineren Komponenten ( [`FormControl`](/api/form-control/), [`Input`](/api/input/), [`FilledInput`](/api/filled-input/), [`InputLabel`](/api/input-label/), [`OutlinedInput`](/api/outlined-input/), und [`FormHelperText`](/api/form-helper-text/) ) welche Sie direkt nutzen können, um Ihre Formulareingaben erheblich anzupassen. +{{"demo": "pages/components/text-fields/ValidationTextFields.js"}} -Möglicherweise haben Sie auch festgestellt, dass einige native HTML-Eingabeeigenschaften in der Komponente `TextField` fehlen. Das war Absicht. Die Komponente kümmert sich um die am häufigsten verwendeten Eigenschaften. Anschließend muss der Benutzer die darunter liegende Komponente verwenden, die in der folgenden Demo gezeigt wird. Sie können jedoch `inputProps` (und `InputProps`, `InputLabelProps` Eigenschaften) verwenden, wenn Sie einiges an Boilerplate vermeiden möchten. +## Multiline -{{"demo": "pages/components/text-fields/ComposedTextField.js"}} +The `multiline` prop transforms the text field into a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) or a [TextareaAutosize](/components/textarea-autosize/). -## Eingaben +{{"demo": "pages/components/text-fields/MultilineTextFields.js"}} -{{"demo": "pages/components/text-fields/Inputs.js"}} +## Select -## Benutzerdefinierte Eingabe +The `select` prop makes the text field use the [Select](/components/selects/) component internally. -Hier sind einige Beispiele, wie man die Komponente anpassen kann. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/). +{{"demo": "pages/components/text-fields/SelectTextFields.js"}} -{{"demo": "pages/components/text-fields/CustomizedInputs.js"}} +## Icons -Die Anpassung endet nicht bei CSS. Sie können Komposition verwenden, um benutzerdefinierte Komponenten zu erstellen und Ihrer App ein einzigartiges Gefühl zu verleihen. Nachfolgend ein Beispiel mit der [`InputBase`](/api/input-base/) Komponente, die von Google Maps inspiriert wurde. +There are multiple ways to display an icon with a text field. -{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} +{{"demo": "pages/components/text-fields/InputWithIcon.js"}} -## Eingabeverzierungen +### Input Adornments -`Input` ermöglicht die Bereitstellung von `InputAdornment`. Diese können verwendet werden, um einer Eingabe ein Präfix, ein Suffix oder eine Aktion hinzuzufügen. Sie können beispielsweise eine Symbolschaltfläche verwenden, um das Kennwort ein- oder auszublenden. +The main way is with an `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. {{"demo": "pages/components/text-fields/InputAdornments.js"}} -### Mit Symbol +## Layout -Symbole können vorangestellt oder angehängt werden. +`margin` can be used to alter the vertical spacing of inputs. Using `none` (default) will not apply margins to the `FormControl`, whereas `dense` and `normal` will. `dense` and `normal` alter other styles to meet the specification. -{{"demo": "pages/components/text-fields/InputWithIcon.js"}} +`fullWidth` can be used to make the input take up the full width of its container. -### Ausgefüllte Eingabeverzierungen +{{"demo": "pages/components/text-fields/LayoutTextFields.js"}} -{{"demo": "pages/components/text-fields/FilledInputAdornments.js"}} +## Uncontrolled vs Controlled -### Umrahmte Eingabeverzierungen +The component can be controlled or uncontrolled -{{"demo": "pages/components/text-fields/OutlinedInputAdornments.js"}} +{{"demo": "pages/components/text-fields/StateTextFields.js"}} -## Layout +## Komponenten + +`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. + +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. -`TextField`, `FormControl` ermöglicht die Angabe von `Abständen (Margin)`, um den vertikalen Abstand der Eingaben zu ändern. Bei Verwendung von `none` (Standard) werden keine Ränder für das `FormControl` angewendet, wohingegen `dense (dicht)` und `normal` sowie andere Stile angegeben werden können, um die Spezifikation zu erfüllen. +{{"demo": "pages/components/text-fields/ComposedTextField.js"}} + +## Eingaben + +{{"demo": "pages/components/text-fields/Inputs.js"}} + +## Farbe (Color) + +The `color` prop changes the highlight color of the text field when focused. + +{{"demo": "pages/components/text-fields/ColorTextFields.js"}} -{{"demo": "pages/components/text-fields/TextFieldMargins.js"}} +## Customized inputs + +Hier sind einige Beispiele, wie man die Komponente anpassen kann. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/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. + +{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} ## Einschränkungen ### Shrink -Der Status des Eingabe-Labels "Verkleinern" ist nicht immer korrekt. Das Eingabeetikett soll schrumpfen, sobald die Eingabe etwas anzeigt. Unter bestimmten Umständen können wir den Status "Schrumpfen" nicht ermitteln (Zahleneingabe, Datumseingabe, Stripe-Eingabe). Möglicherweise stellen Sie eine Überlappung fest. +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. -![schrumpfen](/static/images/text-fields/shrink.png) +![shrink](/static/images/text-fields/shrink.png) -Um das Problem zu umgehen, können Sie den Status des Labels "verkleinern" erzwingen. +To workaround the issue, you can force the "shrink" state of the label. ```jsx ``` -oder +or ```jsx Contagem @@ -103,9 +123,9 @@ The floating label is absolutely positioned, it won't impact the layout of the p ## Integration with 3rd party input libraries -Sie können Bibliotheken von Drittanbietern verwenden, um eine Eingabe zu formatieren. Sie müssen eine benutzerdefinierte Implementierung des `` -Elements mit der `inputComponent` -Eigenschaft bereitstellen. +You can use third-party libraries to format an input. You have to provide a custom implementation of the `` element with the `inputComponent` property. -Die folgende Demo verwendet die Bibliotheken [react-text-mask](https://github.com/text-mask/text-mask) und [react-number-format](https://github.com/s-yadav/react-number-format). The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037). +The following demo uses the [react-text-mask](https://github.com/text-mask/text-mask) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries. The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037). {{"demo": "pages/components/text-fields/FormattedInputs.js"}} diff --git a/docs/src/pages/components/text-fields/text-fields-es.md b/docs/src/pages/components/text-fields/text-fields-es.md index b5dba1cc706f9c..f40d38a214c8c7 100644 --- a/docs/src/pages/components/text-fields/text-fields-es.md +++ b/docs/src/pages/components/text-fields/text-fields-es.md @@ -13,85 +13,105 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp El componente `TextField` es un control de formulario completo, incluyendo una etiqueta, el campo de texto y texto de ayuda. -{{"demo": "pages/components/text-fields/TextFields.js"}} +It supports standard, outlined and filled styling. -> **Note:** This version of the text field is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it. +{{"demo": "pages/components/text-fields/BasicTextFields.js"}} -## Delineado +> **Note:** The standard variant of the `TextField` is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it. -El componente `TextField` soporta estilos con contorno delineado. +## Form props -{{"demo": "pages/components/text-fields/OutlinedTextFields.js"}} +Standard form attributes are supported e.g. `required`, `readOnly`, `type`, etc. as well as a `helperText` which is used to give context about a field’s input, such as how the input will be used. -## Relleno +{{"demo": "pages/components/text-fields/FormPropsTextFields.js"}} -El componente `TextField` soporta estilos con relleno. +## Validation -{{"demo": "pages/components/text-fields/FilledTextFields.js"}} +The `error` prop toggles the error state, the `helperText` prop can then be used to provide feedback to the user about the error. -## Componentes +{{"demo": "pages/components/text-fields/ValidationTextFields.js"}} -El componente `TextField` incluye y usa subcomponentes ( [`FormControl`](/api/form-control/), [`Input`](/api/input/), [`FilledInput`](/api/filled-input/), [`InputLabel`](/api/input-label/), [`OutlinedInput`](/api/outlined-input/) y [`FormHelperText`](/api/form-helper-text/) ) que pueden ser usados directamente para personalizar campos de ingreso de texto de manera sustancial. +## Multiline -Puede que también hayas notado que algunas propiedades nativas de input HTML no están presentes en el componente `TextField`. Esto es a propósito. El componente se encarga de programar la mayoría de las propiedades más usadas, luego depende del usuario programar las propiedades que se muestran en la siguiente demo. Aun así, se puede utilizar `inputProps` (y las propiedades `InputProps` e `InputLabelProps`) para personalizar y evitar el código boilerplate. +The `multiline` prop transforms the text field into a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) or a [TextareaAutosize](/components/textarea-autosize/). -{{"demo": "pages/components/text-fields/ComposedTextField.js"}} +{{"demo": "pages/components/text-fields/MultilineTextFields.js"}} -## Inputs +## Select -{{"demo": "pages/components/text-fields/Inputs.js"}} +The `select` prop makes the text field use the [Select](/components/selects/) component internally. -## Inputs personalizados +{{"demo": "pages/components/text-fields/SelectTextFields.js"}} -Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). - -{{"demo": "pages/components/text-fields/CustomizedInputs.js"}} +## Iconos -La personalización no se limita a usar CSS, también puedes usar una composición de componentes personalizados para darle a tu aplicación un estilo único. A continuación sigue un ejemplo del uso del componente [`InputBase`](/api/input-base/), inspirado por Google Maps. +There are multiple ways to display an icon with a text field. -{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} +{{"demo": "pages/components/text-fields/InputWithIcon.js"}} -## Adornos de campos de texto +### Input Adornments -`Input` permite el uso de `InputAdornment`. Este elemento se puede usar para agregar un prefijo, un sufijo o una acción a un campo de texto. Por ejemplo, puedes usar un botón de icono para esconder o revelar una contraseña. +The main way is with an `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. {{"demo": "pages/components/text-fields/InputAdornments.js"}} -### Con icono +## Disposición -Iconos se pueden poner en frente o detrás del campo de texto. +`margin` can be used to alter the vertical spacing of inputs. Using `none` (default) will not apply margins to the `FormControl`, whereas `dense` and `normal` will. `dense` and `normal` alter other styles to meet the specification. -{{"demo": "pages/components/text-fields/InputWithIcon.js"}} +`fullWidth` can be used to make the input take up the full width of its container. + +{{"demo": "pages/components/text-fields/LayoutTextFields.js"}} + +## Uncontrolled vs Controlled + +The component can be controlled or uncontrolled + +{{"demo": "pages/components/text-fields/StateTextFields.js"}} -### Adornos de campos de texto rellenos +## Componentes + +`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. + +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. + +{{"demo": "pages/components/text-fields/ComposedTextField.js"}} + +## Inputs -{{"demo": "pages/components/text-fields/FilledInputAdornments.js"}} +{{"demo": "pages/components/text-fields/Inputs.js"}} + +## Color -### Adornos de campos de texto delineados +The `color` prop changes the highlight color of the text field when focused. -{{"demo": "pages/components/text-fields/OutlinedInputAdornments.js"}} +{{"demo": "pages/components/text-fields/ColorTextFields.js"}} -## Diseño +## Customized inputs -`TextField`, `FormControl` permiten la especificación del `margin` para cambiar el espacio vertical de los campos de texto. Usar `none` (valor por defecto) no aplicará márgenes al `FormControl`, mientras que `dense` y `normal` cambiarán otros estilos para estar de acuerdo con la especificación. +Here are some examples of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). -{{"demo": "pages/components/text-fields/TextFieldMargins.js"}} +{{"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. + +{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} ## Limitaciones ### Shrink -El estado "shrink" de la etiqueta del campo de texto no está siempre correcto. La etiqueta debe achicarse al momento que el campo demuestra algun texto. En algunas circunstancias, no se puede determinar el estado "shrink" (campo de números, campo de fecha y hora, campo de Stripe). Tal vez veas una superposición. +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](/static/images/text-fields/shrink.png) -Para resolver el problema, puedes forzar el estado "shrink" de la etiqueta. +To workaround the issue, you can force the "shrink" state of the label. ```jsx ``` -o +or ```jsx Contagem @@ -103,9 +123,9 @@ The floating label is absolutely positioned, it won't impact the layout of the p ## Integration with 3rd party input libraries -Se pueden utilizar librerías externas para formatear un campo de texto. Para ello, hay que proporcionar una implementación personalizada del elemento `` con el atributo `inputComponent`. +You can use third-party libraries to format an input. You have to provide a custom implementation of the `` element with the `inputComponent` property. -El siguiente demo utiliza las librerías [react-text-mask](https://github.com/text-mask/text-mask) y [react-number-format](https://github.com/s-yadav/react-number-format). The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037). +The following demo uses the [react-text-mask](https://github.com/text-mask/text-mask) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries. The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037). {{"demo": "pages/components/text-fields/FormattedInputs.js"}} @@ -168,7 +188,7 @@ In order for the text field to be accessible, **the input should be linked to th ## Proyectos relacionados -Para usos más avanzados tal vez puedas sacarle partido a: +Para usos más avanzados tal vez puedas aprovercharte de: - [formik-material-ui](https://github.com/stackworx/formik-material-ui) Bindings for using Material-UI with formik. - [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) A set of wrapper components to facilitate using Material UI with Redux Form. diff --git a/docs/src/pages/components/text-fields/text-fields-fr.md b/docs/src/pages/components/text-fields/text-fields-fr.md index 9a662414f16ceb..9f585ef78a28a3 100644 --- a/docs/src/pages/components/text-fields/text-fields-fr.md +++ b/docs/src/pages/components/text-fields/text-fields-fr.md @@ -13,85 +13,105 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp Le composant d'encapsulation `TextField` est un contrôle de formulaire complet comprenant une étiquette, une entrée et un texte d'aide. -{{"demo": "pages/components/text-fields/TextFields.js"}} +It supports standard, outlined and filled styling. -> **Note:** This version of the text field is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it. +{{"demo": "pages/components/text-fields/BasicTextFields.js"}} -## Encadré +> **Note:** The standard variant of the `TextField` is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it. -`TextField` prend en charge le style encadré. +## Form props -{{"demo": "pages/components/text-fields/OutlinedTextFields.js"}} +Standard form attributes are supported e.g. `required`, `readOnly`, `type`, etc. as well as a `helperText` which is used to give context about a field’s input, such as how the input will be used. -## Remplis +{{"demo": "pages/components/text-fields/FormPropsTextFields.js"}} -`TextField` prend en charge le style rempli. +## Validation -{{"demo": "pages/components/text-fields/FilledTextFields.js"}} +The `error` prop toggles the error state, the `helperText` prop can then be used to provide feedback to the user about the error. -## Composants - -`TextField` est composé d'éléments plus petits ( [`FormControl`](/api/form-control/), [`Input`](/api/input/), [`FilledInput`](/api/filled-input/), [`InputLabel`](/api/input-label/), [`OutlinedInput`](/api/outlined-input/), et [`FormHelperText`](/api/form-helper-text/) ) que vous pouvez utiliser directement pour personnaliser de manière significative vos entrées de formulaire. +{{"demo": "pages/components/text-fields/ValidationTextFields.js"}} -Vous avez peut-être également remarqué que certaines propriétés d'entrée HTML natives sont absentes du composant `TextField`. C'est intentionnel. Le composant prend en charge les propriétés les plus utilisées, puis il appartient à l'utilisateur d'utiliser le composant sous-jacent présenté dans la démonstration suivante. Néanmoins, vous pouvez utiliser `inputProps` (et `InputProps`, `InputLabelProps` propriétés) pour aller plus vite. +## Multiline -{{"demo": "pages/components/text-fields/ComposedTextField.js"}} +The `multiline` prop transforms the text field into a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) or a [TextareaAutosize](/components/textarea-autosize/). -## Inputs +{{"demo": "pages/components/text-fields/MultilineTextFields.js"}} -{{"demo": "pages/components/text-fields/Inputs.js"}} +## Select -## Inputs personnalisées +The `select` prop makes the text field use the [Select](/components/selects/) component internally. -Here are some examples of customizing the component. Vous pouvez en savoir plus dans la [page de documentation des overrides](/customization/components/). +{{"demo": "pages/components/text-fields/SelectTextFields.js"}} -{{"demo": "pages/components/text-fields/CustomizedInputs.js"}} +## Icônes -La personnalisation ne se limite pas aux CSS, vous pouvez utiliser la composition pour créer des composants personnalisés et donner à votre application une sensation unique. Voici un exemple utilisant le composant [`InputBase`](/api/input-base/), inspiré de Google Maps. +There are multiple ways to display an icon with a text field. -{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} +{{"demo": "pages/components/text-fields/InputWithIcon.js"}} -## Ornements d'input +### Input Adornments -`Input` permet de fournir `InputAdornment`. Ceux-ci peuvent être utilisés pour ajouter un préfixe, un suffixe ou une action à une entrée. Par exemple, vous pouvez utiliser un bouton icône pour masquer ou révéler le mot de passe. +The main way is with an `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. {{"demo": "pages/components/text-fields/InputAdornments.js"}} -### Avec Icone +## Disposition -Les icônes peuvent être spécifiées comme prédéfinies ou ajoutées. +`margin` can be used to alter the vertical spacing of inputs. Using `none` (default) will not apply margins to the `FormControl`, whereas `dense` and `normal` will. `dense` and `normal` alter other styles to meet the specification. -{{"demo": "pages/components/text-fields/InputWithIcon.js"}} +`fullWidth` can be used to make the input take up the full width of its container. -### Ornements d'input remplis +{{"demo": "pages/components/text-fields/LayoutTextFields.js"}} -{{"demo": "pages/components/text-fields/InputAdornments.js"}} +## Uncontrolled vs Controlled -### Ornements d'input décrits +The component can be controlled or uncontrolled -{{"demo": "pages/components/text-fields/InputAdornments.js"}} +{{"demo": "pages/components/text-fields/StateTextFields.js"}} -## Disposition +## Composants + +`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` permettent de spécifier les `margin` pour modifier l'espacement vertical des entrées. L’utilisation de `none` (par défaut) n’appliquera pas les marges au `FormControl`, alors que `dense` et `normal` modifieront aussi les autres styles pour respecter les spécifications. +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. -{{"demo": "pages/components/text-fields/TextFields.js"}} +{{"demo": "pages/components/text-fields/ComposedTextField.js"}} + +## Inputs + +{{"demo": "pages/components/text-fields/Inputs.js"}} + +## Couleur + +The `color` prop changes the highlight color of the text field when focused. + +{{"demo": "pages/components/text-fields/ColorTextFields.js"}} + +## Customized inputs + +Here are some examples of customizing the component. Vous pouvez en savoir plus dans la [page de documentation des overrides](/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. + +{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} -## Restrictions +## Limites ### Shrink -Le label "shrink" n'est pas toujours correct. Le label d'input est supposé se réduire dès que l'input affiche quelque chose. Dans certaines circonstances, nous ne pouvons pas déterminer l'état de "réduction" (entrée de numéro, entrée de date / heure, entrée de bande). Vous remarquerez peut-être un chevauchement. +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](/static/images/text-fields/shrink.png) -Pour contourner le problème, vous pouvez forcer l'état "shrink" de la legende. +To workaround the issue, you can force the "shrink" state of the label. ```jsx ``` -ou +or ```jsx Contagem @@ -105,9 +125,9 @@ The floating label is absolutely positioned, it won't impact the layout of the p You can use third-party libraries to format an input. You have to provide a custom implementation of the `` element with the `inputComponent` property. -La démo suivante utilise les bibliothèques [react-text-mask](https://github.com/text-mask/text-mask) et [react-number-format](https://github.com/s-yadav/react-number-format). The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037). +The following demo uses the [react-text-mask](https://github.com/text-mask/text-mask) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries. The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037). -{{"demo": "pages/demos/text-fields/FormattedInputs.js"}} +{{"demo": "pages/components/text-fields/FormattedInputs.js"}} The provided input component should handle the `inputRef` property. The property should be called with a value that implements the following interface: @@ -168,7 +188,7 @@ In order for the text field to be accessible, **the input should be linked to th ## Projets complémentaires -Pour des cas d'utilisation plus avancés, vous pourrez peut-être tirer parti des avantages suivants: +Pour des cas d'utilisation plus avancés, vous pourrez peut-être tirer parti des projects suivants: - [formik-material-ui](https://github.com/stackworx/formik-material-ui) Bindings for using Material-UI with formik. - [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) A set of wrapper components to facilitate using Material UI with Redux Form. diff --git a/docs/src/pages/components/text-fields/text-fields-ja.md b/docs/src/pages/components/text-fields/text-fields-ja.md index 437935e6ccffbd..290940c521b5f3 100644 --- a/docs/src/pages/components/text-fields/text-fields-ja.md +++ b/docs/src/pages/components/text-fields/text-fields-ja.md @@ -13,103 +13,123 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp `TextField` ラッパーコンポーネントは、ラベル、入力、およびヘルプテキストを含む完全なフォームコントロールです。 -{{"demo": "pages/components/text-fields/TextFields.js"}} +It supports standard, outlined and filled styling. -> **Note:** ：このバージョンのテキストフィールドについては、[Material Design guidelines](https://material.io/)では説明されていませんが、Material-UIでは引き続きサポートされます。 +{{"demo": "pages/components/text-fields/BasicTextFields.js"}} -## アウトライン (Outlined) +> **Note:** The standard variant of the `TextField` is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it. -`TextField` はアウトラインスタイルをサポートします。 +## Form props -{{"demo": "pages/components/text-fields/OutlinedTextFields.js"}} +Standard form attributes are supported e.g. `required`, `readOnly`, `type`, etc. as well as a `helperText` which is used to give context about a field’s input, such as how the input will be used. -## Filled +{{"demo": "pages/components/text-fields/FormPropsTextFields.js"}} -`TextField` はアウトラインスタイルをサポートします。 +## Validation -{{"demo": "pages/components/text-fields/FilledTextFields.js"}} +The `error` prop toggles the error state, the `helperText` prop can then be used to provide feedback to the user about the error. -## コンポーネント +{{"demo": "pages/components/text-fields/ValidationTextFields.js"}} -`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/)など ）また、フォーム入力を大幅にカスタマイズするために直接活用できます。 +## Multiline -いくつかのネイティブHTML入力プロパティが `TextField` コンポーネントにないことに気づいたかもしれません。 これは故意です。 コンポーネントは最も使用されているプロパティの面倒を見ます、そしてそれは以下のデモで示される基本的なコンポーネントを使うことはユーザー次第です。 それでも、あなたは使用することができます `inputProps` （及び `InputProps`、 `InputLabelProps` あなたには、いくつかの決まり文句を避けたい場合はプロパティ）。 +The `multiline` prop transforms the text field into a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) or a [TextareaAutosize](/components/textarea-autosize/). -{{"demo": "pages/components/text-fields/ComposedTextField.js"}} +{{"demo": "pages/components/text-fields/MultilineTextFields.js"}} -## Inputs +## Select -{{"demo": "pages/components/text-fields/Inputs.js"}} +The `select` prop makes the text field use the [Select](/components/selects/) component internally. -## カスタマイズされた入力 (Customized inputs) +{{"demo": "pages/components/text-fields/SelectTextFields.js"}} -コンポーネントのカスタマイズの例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。 +## アイコン -{{"demo": "pages/components/text-fields/CustomizedInputs.js"}} - -カスタマイズはCSSにとどまりません。コンポジションを使用してカスタムコンポーネントを作成し、アプリに独特の雰囲気を与えることができます。 以下は、Googleマップに触発された [`InputBase`](/api/input-base/) コンポーネントを使用した例です。 +There are multiple ways to display an icon with a text field. -{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} +{{"demo": "pages/components/text-fields/InputWithIcon.js"}} -## 入力装飾 (Input Adornments) +### Input Adornments -`Input` は `InputAdornment `提供を許可します。 これらは、入力に接頭辞、接尾辞、またはアクションを追加するために使用できます。 たとえば、アイコンボタンを使用してパスワードを表示または非表示にすることができます。 +The main way is with an `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. {{"demo": "pages/components/text-fields/InputAdornments.js"}} -### アイコン付き +## レイアウト -アイコンは、先頭または末尾として指定できます。 +`margin` can be used to alter the vertical spacing of inputs. Using `none` (default) will not apply margins to the `FormControl`, whereas `dense` and `normal` will. `dense` and `normal` alter other styles to meet the specification. -{{"demo": "pages/components/text-fields/InputWithIcon.js"}} +`fullWidth` can be used to make the input take up the full width of its container. -### Filled Input Adornments +{{"demo": "pages/components/text-fields/LayoutTextFields.js"}} -{{"demo": "pages/components/text-fields/FilledInputAdornments.js"}} +## Uncontrolled vs Controlled -### Outlined Input Adornments +The component can be controlled or uncontrolled -{{"demo": "pages/components/text-fields/OutlinedInputAdornments.js"}} +{{"demo": "pages/components/text-fields/StateTextFields.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. + +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. -` TextField `、` FormControl `を使用すると、` margin `を指定して入力の縦方向の間隔を変更できます。 `none`（デフォルト）を使用すると`FormControl`に余白は適用されませんが、 `dense`と `normal`は他のスタイルを仕様に合わせて変更します。 +{{"demo": "pages/components/text-fields/ComposedTextField.js"}} + +## 入力 + +{{"demo": "pages/components/text-fields/Inputs.js"}} + +## カラー + +The `color` prop changes the highlight color of the text field when focused. + +{{"demo": "pages/components/text-fields/ColorTextFields.js"}} -{{"demo": "pages/components/text-fields/TextFieldMargins.js"}} +## Customized inputs + +コンポーネントのカスタマイズの例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/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. + +{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} -## 制限 +## 制限事項 -### シュリンク +### Shrink -入力ラベルの「shrink」状態は必ずしも正しくありません。 入力が何かを表示しているとすぐに入力ラベルは縮小するはずです。 状況によっては、「shrink」状態（数値入力、日時入力、ストライプ入力）を判別できません。 重複があるかもしれません。 +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. -![シュリンク](/static/images/text-fields/shrink.png) +![shrink](/static/images/text-fields/shrink.png) -この問題を回避するにはラベルの"shrink"状態を以下のように強制する必要があります。 +To workaround the issue, you can force the "shrink" state of the label. ```jsx ``` -または +or ```jsx Contagem ``` -### フローティングラベル +### Floating label -フローティングラベルは絶対位置に配置され、ページのレイアウトには影響しません。 正しく表示するには、入力がラベルよりも大きいことを確認する必要があります。 +The floating label is absolutely positioned, it won't impact the layout of the page. You need to make sure that the input is larger than the label to display correctly. -## サードパーティの入力ライブラリとの統合 +## Integration with 3rd party input libraries -サードパーティのライブラリを使って入力をフォーマットすることができます。 `inputComponent` プロパティを使用して、 `` 要素のカスタム実装を提供する必要があります。 +You can use third-party libraries to format an input. You have to provide a custom implementation of the `` element with the `inputComponent` property. -次のデモでは、[react-text-mask](https://github.com/text-mask/text-mask) と[react-number-format](https://github.com/s-yadav/react-number-format)ライブラリを使用します。 同じ概念を [（たとえば、react-stripe-element)に適用することもできます](https://github.com/mui-org/material-ui/issues/16037)。 +The following demo uses the [react-text-mask](https://github.com/text-mask/text-mask) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries. The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037). {{"demo": "pages/components/text-fields/FormattedInputs.js"}} -指定された入力コンポーネントは、 `inputRef` プロパティを処理する必要があります。 このプロパティは、次のインターフェイスを実装する値で呼び出す必要があります。 +The provided input component should handle the `inputRef` property. The property should be called with a value that implements the following interface: ```ts interface InputElement { @@ -145,7 +165,7 @@ function MyInputComponent(props) { ## アクセシビリティ -テキストフィールドにアクセスできるようにするには **、入力をラベルおよびヘルパーテキストにリンクする必要があります**。 基礎となるDOMノードにはこの構造が必要です。 +In order for the text field to be accessible, **the input should be linked to the label and the helper text**. The underlying DOM nodes should have this structure. ```jsx

@@ -166,9 +186,9 @@ function MyInputComponent(props) { ``` -## Complementary projects +## 補完プロジェクト -より高度なユースケースのためにあなたは利用することができるかもしれません： +より高度な使用例では、以下を利用できます。 - [formik-material-ui](https://github.com/stackworx/formik-material-ui) Bindings for using Material-UI with formik. - [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) A set of wrapper components to facilitate using Material UI with Redux Form. diff --git a/docs/src/pages/components/text-fields/text-fields-pt.md b/docs/src/pages/components/text-fields/text-fields-pt.md index 588a23f99942b0..219fe42ef383ee 100644 --- a/docs/src/pages/components/text-fields/text-fields-pt.md +++ b/docs/src/pages/components/text-fields/text-fields-pt.md @@ -13,103 +13,123 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp O componente wrapper `TextField` é um controle de formulário completo, incluindo um rótulo, entrada e texto de ajuda. -{{"demo": "pages/components/text-fields/TextFields.js"}} +It supports standard, outlined and filled styling. -> **Nota:** Esta versão do campo de texto não está mais documentada nas [diretrizes do Material Design](https://material.io/), mas Material-UI continuará a suportá-la. +{{"demo": "pages/components/text-fields/BasicTextFields.js"}} -## Delineado +> **Note:** The standard variant of the `TextField` is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it. -`TextField` suporta estilo delineado. +## Form props -{{"demo": "pages/components/text-fields/OutlinedTextFields.js"}} +Standard form attributes are supported e.g. `required`, `readOnly`, `type`, etc. as well as a `helperText` which is used to give context about a field’s input, such as how the input will be used. -## Preenchido +{{"demo": "pages/components/text-fields/FormPropsTextFields.js"}} -`TextField` suporta estilo preenchido. +## Validation -{{"demo": "pages/components/text-fields/FilledTextFields.js"}} +The `error` prop toggles the error state, the `helperText` prop can then be used to provide feedback to the user about the error. -## Componentes +{{"demo": "pages/components/text-fields/ValidationTextFields.js"}} -`TextField` é composto por componentes menores ([`FormControl`](/api/form-control/), [`Input`](/api/input/), [`FilledInput`](/api/filled-input/), [`InputLabel`](/api/input-label/), [`OutlinedInput`](/api/outlined-input/), e [`FormHelperText`](/api/form-helper-text/)) que você pode aproveitar diretamente para personalizar significativamente as entradas do seu formulário. +## Multiline -Você também pode ter notado que algumas propriedades de entrada nativas do HTML estão faltando no componente `TextField`. Isto é intencional. O componente cuida das propriedades mais usadas, depois cabe ao usuário usar o componente exibido na demonstração. Ainda, você pode usar `inputProps` (`InputProps` e `InputLabelProps`) se você quiser evitar algum boilerplate. +The `multiline` prop transforms the text field into a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) or a [TextareaAutosize](/components/textarea-autosize/). -{{"demo": "pages/components/text-fields/ComposedTextField.js"}} +{{"demo": "pages/components/text-fields/MultilineTextFields.js"}} -## Inputs +## Select -{{"demo": "pages/components/text-fields/Inputs.js"}} +The `select` prop makes the text field use the [Select](/components/selects/) component internally. -## Inputs Costumizados +{{"demo": "pages/components/text-fields/SelectTextFields.js"}} -Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/). +## Ícones -{{"demo": "pages/components/text-fields/CustomizedInputs.js"}} - -A customização não para no CSS, você pode usar composição para criar componentes personalizados e dar ao seu aplicativo uma sensação única. Abaixo há um exemplo usando o componente [`InputBase`](/api/input-base/), inspirado pelo Google Maps. +There are multiple ways to display an icon with a text field. -{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} +{{"demo": "pages/components/text-fields/InputWithIcon.js"}} -## Decoração de inputs +### Input Adornments -`Input` permite o uso de `InputAdornment`. Estes podem ser usados para adicionar um prefixo, sufixo ou uma ação para uma entrada. Por exemplo, você pode usar um botão com ícone para ocultar ou revelar a senha. +The main way is with an `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. {{"demo": "pages/components/text-fields/InputAdornments.js"}} -### Com ícone +## Leiaute -Ícones podem ser especificados previamente ou anexados ao input. +`margin` can be used to alter the vertical spacing of inputs. Using `none` (default) will not apply margins to the `FormControl`, whereas `dense` and `normal` will. `dense` and `normal` alter other styles to meet the specification. -{{"demo": "pages/components/text-fields/InputWithIcon.js"}} +`fullWidth` can be used to make the input take up the full width of its container. -### Input com bordas preenchidas +{{"demo": "pages/components/text-fields/LayoutTextFields.js"}} -{{"demo": "pages/components/text-fields/FilledInputAdornments.js"}} +## Uncontrolled vs Controlled -### Inputs com contornos delineados +The component can be controlled or uncontrolled -{{"demo": "pages/components/text-fields/OutlinedInputAdornments.js"}} +{{"demo": "pages/components/text-fields/StateTextFields.js"}} -## Leiaute +## Componentes + +`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. + +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. -`TextField`,`FormControl` permite a especificação de `margin` para alterar os espaços verticais do input. Usando `none` (padrão) não irá aplicar margens para o `FormControl`, enquanto que `dense` e `normal` irá também alterar outros estilos para atender as especificações. +{{"demo": "pages/components/text-fields/ComposedTextField.js"}} + +## Entradas + +{{"demo": "pages/components/text-fields/Inputs.js"}} + +## Cor + +The `color` prop changes the highlight color of the text field when focused. + +{{"demo": "pages/components/text-fields/ColorTextFields.js"}} -{{"demo": "pages/components/text-fields/TextFieldMargins.js"}} +## Customized inputs + +Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/). + +{{"demo": "pages/components/text-fields/CustomizedInputs.js"}} + +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. + +{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} ## Limitações -### Reduzir +### Shrink -O label de entrada "shrink" nem sempre está correto. O input label deve encolher assim que o input estiver exibindo algo. Em algumas circunstâncias, não podemos determinar o estado de "shrink" (input numérico, input datetime, input Stripe). Você pode notar uma sobreposição. +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. -![minimizar](/static/images/text-fields/shrink.png) +![shrink](/static/images/text-fields/shrink.png) -Para contornar o problema, você pode forçar a "shrink" do label. +To workaround the issue, you can force the "shrink" state of the label. ```jsx ``` -ou +or ```jsx Contagem ``` -### Rótulo flutuante +### Floating label -O rótulo flutuante está absolutamente posicionado, não afetará o leiaute da página. Você precisa ter certeza de que o componente de entrada é maior do que o rótulo para a exibição correta. +The floating label is absolutely positioned, it won't impact the layout of the page. You need to make sure that the input is larger than the label to display correctly. -## Integração com bibliotecas de input de terceiros +## Integration with 3rd party input libraries -Você pode usar bibliotecas de terceiros para formatar uma entrada. Você precisa fornecer uma implementação personalizada do elemento `` com a propriedade `inputComponent`. +You can use third-party libraries to format an input. You have to provide a custom implementation of the `` element with the `inputComponent` property. -A seguinte demonstração usa as bibliotecas [react-text-mask](https://github.com/text-mask/text-mask) e [react-number-format](https://github.com/s-yadav/react-number-format). O mesmo conceito pode ser aplicado para, [p. ex. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037). +The following demo uses the [react-text-mask](https://github.com/text-mask/text-mask) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries. The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037). {{"demo": "pages/components/text-fields/FormattedInputs.js"}} -O componente de entrada fornecido deve manipular a propriedade `inputRef`. A propriedade deve ser chamada com um valor que implemente a seguinte interface: +The provided input component should handle the `inputRef` property. The property should be called with a value that implements the following interface: ```ts interface InputElement { @@ -145,7 +165,7 @@ function MeuInputComponente(props) { ## Acessibilidade -Para que o campo de texto seja acessível, **a entrada deve estar vinculada ao rótulo e ao texto auxiliar**. Os nós DOM subjacentes devem ter essa estrutura. +In order for the text field to be accessible, **the input should be linked to the label and the helper text**. The underlying DOM nodes should have this structure. ```jsx
@@ -168,7 +188,7 @@ Para que o campo de texto seja acessível, **a entrada deve estar vinculada ao r ## Projetos Complementares -Para os usos mais avançados, você é capaz de aproveita: +Para usos mais avançados, você pode tirar vantagem com: - [formik-material-ui](https://github.com/stackworx/formik-material-ui) Ligações para usar Mateiral-UI com formik. - [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) Um conjunto de componentes do wrapper para facilitar o uso do Material UI com Redux Form. diff --git a/docs/src/pages/components/text-fields/text-fields-ru.md b/docs/src/pages/components/text-fields/text-fields-ru.md index 9d4468f7db8720..d70ab1a4df8d25 100644 --- a/docs/src/pages/components/text-fields/text-fields-ru.md +++ b/docs/src/pages/components/text-fields/text-fields-ru.md @@ -13,103 +13,123 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp `TextField` представляет собой полноценный элемент управления формы, включая метку (label), само поле ввода и вспомогательный текст. -{{"demo": "pages/components/text-fields/TextFields.js"}} +It supports standard, outlined and filled styling. -> **Note:** This version of the text field is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it. +{{"demo": "pages/components/text-fields/BasicTextFields.js"}} -## Контурный стиль +> **Note:** The standard variant of the `TextField` is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it. -`TextField` поддерживает контурный стиль. +## Form props -{{"demo": "pages/components/text-fields/OutlinedTextFields.js"}} +Standard form attributes are supported e.g. `required`, `readOnly`, `type`, etc. as well as a `helperText` which is used to give context about a field’s input, such as how the input will be used. -## Заполненный стиль +{{"demo": "pages/components/text-fields/FormPropsTextFields.js"}} -`TextField` поддерживает заполненный стиль. +## Validation -{{"demo": "pages/components/text-fields/FilledTextFields.js"}} +The `error` prop toggles the error state, the `helperText` prop can then be used to provide feedback to the user about the error. -## Компоненты - -`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/) ) которые вы можете использовать напрямую, чтобы значительно кастомизировать ваши поля ввода. +{{"demo": "pages/components/text-fields/ValidationTextFields.js"}} -Вы также могли заметить, что некоторые нативные свойства ввода HTML отсутствуют в компоненте `TextField`. Это сделано специально. Компонент включает в себя наиболее часто используемые свойства, а для расширенного использования можно использовать базовый компонент, показанный в следующей демонстрации. Вы все еще можете использовать `inputProps` (и `свойства InputProps`, `InputLabelProps`), если хотите избежать излишнего кода. +## Multiline -{{"demo": "pages/components/text-fields/ComposedTextField.js"}} +The `multiline` prop transforms the text field into a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) or a [TextareaAutosize](/components/textarea-autosize/). -## Поля ввода +{{"demo": "pages/components/text-fields/MultilineTextFields.js"}} -{{"demo": "pages/components/text-fields/Inputs.js"}} +## Select -## Кастомизированные поля ввода +The `select` prop makes the text field use the [Select](/components/selects/) component internally. -Ниже находятся примеры кастомизации компонента. You can learn more about this in the [overrides documentation page](/customization/components/). +{{"demo": "pages/components/text-fields/SelectTextFields.js"}} -{{"demo": "pages/components/text-fields/CustomizedInputs.js"}} +## Иконки -Настройка не ограничивается CSS, вы можете использовать композицию для создания пользовательских компонентов и придать вашему приложению уникальный стиль. Ниже приведен пример использования компонента [`InputBase`](/api/input-base/), вдохновленный Google Maps. +There are multiple ways to display an icon with a text field. -{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} +{{"demo": "pages/components/text-fields/InputWithIcon.js"}} -## Украшения поля ввода (Input) +### Input Adornments -`Input` позволяет использовать `InputAdornment`. Их можно использовать для добавления префикса, суффикса или действия к полю ввода. Например, вы можете использовать кнопку-иконку, чтобы скрыть или показать пароль. +The main way is with an `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. {{"demo": "pages/components/text-fields/InputAdornments.js"}} -### С иконкой +## Расположение -Иконки могут быть указаны как предварительно добавленные или добавленные. +`margin` can be used to alter the vertical spacing of inputs. Using `none` (default) will not apply margins to the `FormControl`, whereas `dense` and `normal` will. `dense` and `normal` alter other styles to meet the specification. -{{"demo": "pages/components/text-fields/InputWithIcon.js"}} +`fullWidth` can be used to make the input take up the full width of its container. -### Украшение полей ввода с заполненным стилем +{{"demo": "pages/components/text-fields/LayoutTextFields.js"}} -{{"demo": "pages/components/text-fields/FilledInputAdornments.js"}} +## Uncontrolled vs Controlled -### Украшение полей ввода с контурным стилем +The component can be controlled or uncontrolled -{{"demo": "pages/components/text-fields/OutlinedInputAdornments.js"}} +{{"demo": "pages/components/text-fields/StateTextFields.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. + +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. -`TextField`, `FormControl` позволяет спецификации `margin` изменять вертикальные отступы для полей ввода. Использование `none` (по умолчанию) не будет применять отступы для `FormControl`, тогда как `dense` и `normal` будут применять другие стили, которые соответствуют спецификации. +{{"demo": "pages/components/text-fields/ComposedTextField.js"}} + +## Поля ввода + +{{"demo": "pages/components/text-fields/Inputs.js"}} + +## Цвет + +The `color` prop changes the highlight color of the text field when focused. + +{{"demo": "pages/components/text-fields/ColorTextFields.js"}} -{{"demo": "pages/components/text-fields/TextFieldMargins.js"}} +## Customized inputs + +Ниже находятся примеры кастомизации компонента. You can learn more about this in the [overrides documentation page](/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. + +{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} ## Ограничения -### Сжатие +### Shrink -Состояние метки поля ввода (label) "shrink" не всегда корректно. Предполагается, что метка поля ввода уменьшается, как только в поле ввода что-нибудь отображается. В некоторых случаях мы не можем определить состояние "shrink" (числовое поле, поле даты, Stripe input). Вы могли заметить совпадения. +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. -![сжатие](/static/images/text-fields/shrink.png) +![shrink](/static/images/text-fields/shrink.png) -Чтобы решить эту проблему, вы можете принудительно изменить состояние метки. +To workaround the issue, you can force the "shrink" state of the label. ```jsx ``` -или +or ```jsx Contagem ``` -### Плавающая метка +### Floating label -Плавающий ярлык абсолютно позиционируется, он не повлияет на макет страницы. Необходимо убедиться, что поле ввода больше, чем метка для корректного отображения. +The floating label is absolutely positioned, it won't impact the layout of the page. You need to make sure that the input is larger than the label to display correctly. -## Интеграция с сторонними библиотеками текстовых полей +## Integration with 3rd party input libraries -Вы можете использовать сторонние библиотеки для форматирования ввода. Вы должны предоставить пользовательскую реализацию элемента `` со свойством `inputComponent`. +You can use third-party libraries to format an input. You have to provide a custom implementation of the `` element with the `inputComponent` property. -В следующем примере используются библиотеки [response-text-mask](https://github.com/text-mask/text-mask) и [response-number-format](https://github.com/s-yadav/react-number-format). The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037). +The following demo uses the [react-text-mask](https://github.com/text-mask/text-mask) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries. The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037). {{"demo": "pages/components/text-fields/FormattedInputs.js"}} -The provided input component should handle the `inputRef` property. Свойство должно вызываться со значением, которое реализует следующий интерфейс: +The provided input component should handle the `inputRef` property. The property should be called with a value that implements the following interface: ```ts interface InputElement { @@ -168,7 +188,7 @@ In order for the text field to be accessible, **the input should be linked to th ## Дополнительные проекты -Для более сложных решений вы можете применить следующие пакеты: +Для более сложных вариантов использования вы можете воспользоваться: - [formik-material-ui](https://github.com/stackworx/formik-material-ui) Bindings for using Material-UI with formik. - [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) A set of wrapper components to facilitate using Material UI with Redux Form. diff --git a/docs/src/pages/components/text-fields/text-fields-zh.md b/docs/src/pages/components/text-fields/text-fields-zh.md index 0572cec9aec87b..a597927a1783d4 100644 --- a/docs/src/pages/components/text-fields/text-fields-zh.md +++ b/docs/src/pages/components/text-fields/text-fields-zh.md @@ -13,85 +13,105 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp `TextField` wrapper 组件是一个完整的表单控件，包括标签，输入和帮助文本。 -{{"demo": "pages/components/text-fields/TextFields.js"}} +It supports standard, outlined and filled styling. -> **注意：** 此版本的文本框将不再记录在 [Material Design 指南中](https://material.io/)，但 Material-UI 将继续支持它。 +{{"demo": "pages/components/text-fields/BasicTextFields.js"}} -## Outlined（轮廓） +> **Note:** The standard variant of the `TextField` is no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support it. -`TextField` 支持轮廓的样式。 +## Form props -{{"demo": "pages/components/text-fields/OutlinedTextFields.js"}} +Standard form attributes are supported e.g. `required`, `readOnly`, `type`, etc. as well as a `helperText` which is used to give context about a field’s input, such as how the input will be used. -## Filled（填充） +{{"demo": "pages/components/text-fields/FormPropsTextFields.js"}} -`TextField` 支持轮廓的样式。 +## Validation -{{"demo": "pages/components/text-fields/FilledTextFields.js"}} +The `error` prop toggles the error state, the `helperText` prop can then be used to provide feedback to the user about the error. -## 组件 +{{"demo": "pages/components/text-fields/ValidationTextFields.js"}} -`TextField` 是由以下较小的组件组成的 ( [`FormControl`](/api/form-control/), [`Input`](/api/input/), [`FilledInput`](/api/filled-input/), [`InputLabel`](/api/input-label/), [`OutlinedInput`](/api/outlined-input/), and [`FormHelperText`](/api/form-helper-text/) )， 你可以直接利用这一点来自定义你的表单输入. +## Multiline -您可能注意到了， 和原生的 HTML input 组件相比，`TextField` 组件缺缺失了一些属性。 这是故意而为之的。 该组件只负责处理最常用的一些属性，如果有其他需求，用户可以自行使用下面 Demo 中演示的基础组件。 但是同时, 为了避免过于模版化，您仍然可以使用 `inputProps` (和 `inputProps`, `InputLabelProps` 属性) 来控制原生组件的属性。 +The `multiline` prop transforms the text field into a [textarea](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea) or a [TextareaAutosize](/components/textarea-autosize/). -{{"demo": "pages/components/text-fields/ComposedTextField.js"}} +{{"demo": "pages/components/text-fields/MultilineTextFields.js"}} -## Inputs（输入） +## Select -{{"demo": "pages/components/text-fields/Inputs.js"}} +The `select` prop makes the text field use the [Select](/components/selects/) component internally. -## 自定义输入 +{{"demo": "pages/components/text-fields/SelectTextFields.js"}} -以下是自定义组件的一些例子。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。 +## Icons（图标） -{{"demo": "pages/components/text-fields/CustomizedInputs.js"}} - -自定义不止于CSS，您可以使用组合来构建自定义组件，并给您的应用程序提供一种独特的感觉。 以下是使用受Google地图启发的 [`InputBase`](/api/input-base/) 组件的示例。 +There are multiple ways to display an icon with a text field. -{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} +{{"demo": "pages/components/text-fields/InputWithIcon.js"}} -## 修饰输入 +### Input Adornments -`Input` 允许提供 `InputAdornment`。 这些可用于向一个输入框添加前缀、后缀或动作。 例如，您可以使用图标按钮来隐藏或显示密码。 +The main way is with an `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. {{"demo": "pages/components/text-fields/InputAdornments.js"}} -### 使用图标 +## 布局 -您可以将图标指定为预置的或追加的。 +`margin` can be used to alter the vertical spacing of inputs. Using `none` (default) will not apply margins to the `FormControl`, whereas `dense` and `normal` will. `dense` and `normal` alter other styles to meet the specification. -{{"demo": "pages/components/text-fields/InputWithIcon.js"}} +`fullWidth` can be used to make the input take up the full width of its container. -### 修饰输入框的填充内容 +{{"demo": "pages/components/text-fields/LayoutTextFields.js"}} -{{"demo": "pages/components/text-fields/FilledInputAdornments.js"}} +## Uncontrolled vs Controlled -### 修饰输入框的轮廓 +The component can be controlled or uncontrolled -{{"demo": "pages/components/text-fields/OutlinedInputAdornments.js"}} +{{"demo": "pages/components/text-fields/StateTextFields.js"}} -## 布局 +## Components（组件） + +`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. + +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. + +{{"demo": "pages/components/text-fields/ComposedTextField.js"}} + +## Inputs（输入） + +{{"demo": "pages/components/text-fields/Inputs.js"}} + +## 颜色 + +The `color` prop changes the highlight color of the text field when focused. -`TextField` 和 `FormControl` 允许使用指定的 `间距`来改变输入的垂直间距。 使用 `none` (默认值)将不会在`FormControl` 添加间距，而相应的，以符合规范，`dense` 和 `normal` 也会改变其他的样式。 +{{"demo": "pages/components/text-fields/ColorTextFields.js"}} -{{"demo": "pages/components/text-fields/TextFieldMargins.js"}} +## Customized inputs + +以下是自定义组件的一些例子。 您可以在[重写文档页](/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. + +{{"demo": "pages/components/text-fields/CustomizedInputBase.js"}} ## 局限性 ### Shrink -输入标签 "shrink" 状态并不总是正确的。 输入标签应在输入显示内容时立即缩小。 在某些情况下, 我们无法确定 "shrink" 状态 (数字输入、日期时间输入、条带输入)。 您可能会注意到重叠的现象。 +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. -![缩小](/static/images/text-fields/shrink.png) +![shrink](/static/images/text-fields/shrink.png) -若要解决此问题，您可以在标签上强制赋予 "shrink" 状态。 +To workaround the issue, you can force the "shrink" state of the label. ```jsx ``` -或者 +或 ```jsx 计数 @@ -101,11 +121,11 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp The floating label is absolutely positioned, it won't impact the layout of the page. You need to make sure that the input is larger than the label to display correctly. -## 与第三方 input 库的整合 +## Integration with 3rd party input libraries -您可以使用第三方库格式化输入。 您必须提供一个带有 `inputComponent` 属性的 `` 元素的自定义实现。 +You can use third-party libraries to format an input. You have to provide a custom implementation of the `` element with the `inputComponent` property. -下面的演示使用 [react-text-mask](https://github.com/text-mask/text-mask)和 [react-number-format](https://github.com/s-yadav/react-number-format) 库。 同样的概念可以适用于 [这个例子：react-stripe-element](https://github.com/mui-org/material-ui/issues/16037)。 +The following demo uses the [react-text-mask](https://github.com/text-mask/text-mask) and [react-number-format](https://github.com/s-yadav/react-number-format) libraries. The same concept could be applied to [e.g. react-stripe-element](https://github.com/mui-org/material-ui/issues/16037). {{"demo": "pages/components/text-fields/FormattedInputs.js"}} @@ -143,7 +163,7 @@ function MyInputComponent(props) { />; ``` -## 可及性 +## 可访问性 In order for the text field to be accessible, **the input should be linked to the label and the helper text**. The underlying DOM nodes should have this structure. @@ -168,7 +188,7 @@ In order for the text field to be accessible, **the input should be linked to th ## 补充项目 -对于更高级的用例，您可以使用这些： +对于更高级的用例，您可以利用： - [formik-material-ui](https://github.com/stackworx/formik-material-ui) Bindings for using Material-UI with formik. - [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) A set of wrapper components to facilitate using Material UI with Redux Form. diff --git a/docs/src/pages/components/tooltips/tooltips-aa.md b/docs/src/pages/components/tooltips/tooltips-aa.md index 04031feeb7396f..d732e418cec355 100644 --- a/docs/src/pages/components/tooltips/tooltips-aa.md +++ b/docs/src/pages/components/tooltips/tooltips-aa.md @@ -66,9 +66,11 @@ crwdns92500:0crwdne92500:0 crwdns92504:0crwdne92504:0 crwdns103718:0crwdne103718:0 +> crwdns104732:0crwdne104732:0 + crwdns92508:0crwdne92508:0 -> crwdns101522:0crwdne101522:0 +> crwdns104734:0crwdne104734:0 ```jsx crwdns101524:0{disabled}crwdne101524:0 crwdns101526:0{'A disabled button'}crwdne101526:0 diff --git a/docs/src/pages/components/tooltips/tooltips-de.md b/docs/src/pages/components/tooltips/tooltips-de.md index f7493abc5d117d..33563c09746ace 100644 --- a/docs/src/pages/components/tooltips/tooltips-de.md +++ b/docs/src/pages/components/tooltips/tooltips-de.md @@ -72,6 +72,8 @@ A tooltip can be interactive. It won't close when the user hovers over the toolt Standardmäßig lösen deaktivierte Elemente wie `