From 089b60f9576c65eb885415379c5ee1eb9ff26d7d Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Sun, 31 May 2020 11:10:48 +0000 Subject: [PATCH 01/16] Bump @testing-library/dom from 7.5.7 to 7.7.1 (#21269) --- yarn.lock | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 60b36a45710f04..08db546ae9d230 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2345,9 +2345,9 @@ defer-to-connect "^1.0.1" "@testing-library/dom@^7.0.3", "@testing-library/dom@^7.2.2": - version "7.5.7" - resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.5.7.tgz#c4bf683a65083d4a78644588cfa4ad684c113fc7" - integrity sha512-835MiwAxQE7xjSrhpeJbv41UQRmsPJQ0tGfzWiJMdZj2LBbdG5cT8Z44Viv11/XucCmJHr/v8q7VpZnuSimscg== + version "7.7.1" + resolved "https://registry.yarnpkg.com/@testing-library/dom/-/dom-7.7.1.tgz#b43db5c0c96440fcb51229de34e8111d0ce03c98" + integrity sha512-lJTopFmsapwonQ0jrw5xnRWRDdyFQpJrzQzyRem3sXOa/qvXBJHy7QCKa1wZS2fvkBdYWfxCNrQh4t6EZU8s5Q== dependencies: "@babel/runtime" "^7.9.6" aria-query "^4.0.2" From 2b7fddce1c4a2fbddcfea39616800e059f6c5aa6 Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Sun, 31 May 2020 12:07:45 +0000 Subject: [PATCH 02/16] Bump puppeteer from 3.1.0 to 3.2.0 (#21263) --- yarn.lock | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 08db546ae9d230..22e051a71a632e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -11161,6 +11161,11 @@ mississippi@^3.0.0: stream-each "^1.1.0" through2 "^2.0.0" +mitt@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/mitt/-/mitt-2.0.1.tgz#9e8a075b4daae82dd91aac155a0ece40ca7cb393" + integrity sha512-FhuJY+tYHLnPcBHQhbUFzscD5512HumCPE4URXZUgPi3IvOJi4Xva5IIgy3xX56GqCmw++MAm5UURG6kDBYTdg== + mixin-deep@^1.2.0: version "1.3.2" resolved "https://registry.yarnpkg.com/mixin-deep/-/mixin-deep-1.3.2.tgz#1120b43dc359a785dce65b55b82e257ccf479566" @@ -13562,14 +13567,15 @@ punycode@^2.1.0, punycode@^2.1.1: integrity sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A== puppeteer@^3.0.0: - version "3.1.0" - resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-3.1.0.tgz#d44efdc5410809025f38bca2de106c3ae5c85a52" - integrity sha512-jLa9sqdVx0tPnr2FcwAq+8DSjGhSM4YpkwOf3JE22Ycyqm71SW7B5uGfTyMGFoLCmbCozbLZclCjasPb0flTRw== + version "3.2.0" + resolved "https://registry.yarnpkg.com/puppeteer/-/puppeteer-3.2.0.tgz#e775519dd99c5f15dc8972b2c44abed00fe81c9e" + integrity sha512-wkVid0V1p3Gw0u8Jyq0JxBaenx6H+/lmQIYDfHZS20IrhAobP70LSrWI6bF75olAKlrdR50w7IZxjaB09M6tDQ== dependencies: debug "^4.1.0" extract-zip "^2.0.0" https-proxy-agent "^4.0.0" mime "^2.0.3" + mitt "^2.0.1" progress "^2.0.1" proxy-from-env "^1.0.0" rimraf "^3.0.2" From 43e65a7203c921ef8c0e053a2eaa579b309a5d5b Mon Sep 17 00:00:00 2001 From: "dependabot-preview[bot]" <27856297+dependabot-preview[bot]@users.noreply.github.com> Date: Sun, 31 May 2020 12:24:16 +0000 Subject: [PATCH 03/16] Bump lerna from 3.21.0 to 3.22.0 (#21258) --- yarn.lock | 78 +++++++++++++++++++++++++++---------------------------- 1 file changed, 39 insertions(+), 39 deletions(-) diff --git a/yarn.lock b/yarn.lock index 22e051a71a632e..d70ca091bd2504 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1504,10 +1504,10 @@ is-ci "^2.0.0" npmlog "^4.1.2" -"@lerna/conventional-commits@3.18.5": - version "3.18.5" - resolved "https://registry.yarnpkg.com/@lerna/conventional-commits/-/conventional-commits-3.18.5.tgz#08efd2e5b45acfaf3f151a53a3ec7ecade58a7bc" - integrity sha512-qcvXIEJ3qSgalxXnQ7Yxp5H9Ta5TVyai6vEor6AAEHc20WiO7UIdbLDCxBtiiHMdGdpH85dTYlsoYUwsCJu3HQ== +"@lerna/conventional-commits@3.22.0": + version "3.22.0" + resolved "https://registry.yarnpkg.com/@lerna/conventional-commits/-/conventional-commits-3.22.0.tgz#2798f4881ee2ef457bdae027ab7d0bf0af6f1e09" + integrity sha512-z4ZZk1e8Mhz7+IS8NxHr64wyklHctCJyWpJKEZZPJiLFJ8yKto/x38O80R10pIzC0rr8Sy/OsjSH4bl0TbbgqA== dependencies: "@lerna/validation-error" "3.13.0" conventional-changelog-angular "^5.0.3" @@ -1530,10 +1530,10 @@ fs-extra "^8.1.0" npmlog "^4.1.2" -"@lerna/create@3.21.0": - version "3.21.0" - resolved "https://registry.yarnpkg.com/@lerna/create/-/create-3.21.0.tgz#e813832adf3488728b139e5a75c8b01b1372e62f" - integrity sha512-cRIopzKzE2vXJPmsiwCDMWo4Ct+KTmX3nvvkQLDoQNrrRK7w+3KQT3iiorbj1koD95RsVQA7mS2haWok9SIv0g== +"@lerna/create@3.22.0": + version "3.22.0" + resolved "https://registry.yarnpkg.com/@lerna/create/-/create-3.22.0.tgz#d6bbd037c3dc5b425fe5f6d1b817057c278f7619" + integrity sha512-MdiQQzCcB4E9fBF1TyMOaAEz9lUjIHp1Ju9H7f3lXze5JK6Fl5NYkouAvsLgY6YSIhXMY8AHW2zzXeBDY4yWkw== dependencies: "@evocateur/pacote" "^9.6.3" "@lerna/child-process" "3.16.5" @@ -1621,13 +1621,13 @@ ssri "^6.0.1" tar "^4.4.8" -"@lerna/github-client@3.16.5": - version "3.16.5" - resolved "https://registry.yarnpkg.com/@lerna/github-client/-/github-client-3.16.5.tgz#2eb0235c3bf7a7e5d92d73e09b3761ab21f35c2e" - integrity sha512-rHQdn8Dv/CJrO3VouOP66zAcJzrHsm+wFuZ4uGAai2At2NkgKH+tpNhQy2H1PSC0Ezj9LxvdaHYrUzULqVK5Hw== +"@lerna/github-client@3.22.0": + version "3.22.0" + resolved "https://registry.yarnpkg.com/@lerna/github-client/-/github-client-3.22.0.tgz#5d816aa4f76747ed736ae64ff962b8f15c354d95" + integrity sha512-O/GwPW+Gzr3Eb5bk+nTzTJ3uv+jh5jGho9BOqKlajXaOkMYGBELEAqV5+uARNGWZFvYAiF4PgqHb6aCUu7XdXg== dependencies: "@lerna/child-process" "3.16.5" - "@octokit/plugin-enterprise-rest" "^3.6.1" + "@octokit/plugin-enterprise-rest" "^6.0.1" "@octokit/rest" "^16.28.4" git-url-parse "^11.1.2" npmlog "^4.1.2" @@ -1654,10 +1654,10 @@ "@lerna/child-process" "3.16.5" semver "^6.2.0" -"@lerna/import@3.21.0": - version "3.21.0" - resolved "https://registry.yarnpkg.com/@lerna/import/-/import-3.21.0.tgz#87b08f2a2bfeeff7357c6fd8490e638d3cd5b32d" - integrity sha512-aISkL4XD0Dqf5asDaOZWu65jgj8fWUhuQseZWuQe3UfHxav69fTS2YLIngUfencaOSZVOcVCom28YCzp61YDxw== +"@lerna/import@3.22.0": + version "3.22.0" + resolved "https://registry.yarnpkg.com/@lerna/import/-/import-3.22.0.tgz#1a5f0394f38e23c4f642a123e5e1517e70d068d2" + integrity sha512-uWOlexasM5XR6tXi4YehODtH9Y3OZrFht3mGUFFT3OIl2s+V85xIGFfqFGMTipMPAGb2oF1UBLL48kR43hRsOg== dependencies: "@lerna/child-process" "3.16.5" "@lerna/command" "3.21.0" @@ -1876,10 +1876,10 @@ inquirer "^6.2.0" npmlog "^4.1.2" -"@lerna/publish@3.21.0": - version "3.21.0" - resolved "https://registry.yarnpkg.com/@lerna/publish/-/publish-3.21.0.tgz#0112393125f000484c3f50caba71a547f91bd7f4" - integrity sha512-JZ+ehZB9UCQ9nqH8Ld/Yqc/If++aK/7XIubkrB9sQ5hf2GeIbmI/BrJpMgLW/e9T5bKrUBZPUvoUN3daVipA5A== +"@lerna/publish@3.22.0": + version "3.22.0" + resolved "https://registry.yarnpkg.com/@lerna/publish/-/publish-3.22.0.tgz#7a3fb61026d3b7425f3b9a1849421f67d795c55d" + integrity sha512-8LBeTLBN8NIrCrLGykRu+PKrfrCC16sGCVY0/bzq9TDioR7g6+cY0ZAw653Qt/0Kr7rg3J7XxVNdzj3fvevlwA== dependencies: "@evocateur/libnpmaccess" "^3.1.2" "@evocateur/npm-registry-fetch" "^4.0.0" @@ -1902,7 +1902,7 @@ "@lerna/run-lifecycle" "3.16.2" "@lerna/run-topologically" "3.18.5" "@lerna/validation-error" "3.13.0" - "@lerna/version" "3.21.0" + "@lerna/version" "3.22.0" figgy-pudding "^3.5.1" fs-extra "^8.1.0" npm-package-arg "^6.1.0" @@ -2015,17 +2015,17 @@ dependencies: npmlog "^4.1.2" -"@lerna/version@3.21.0": - version "3.21.0" - resolved "https://registry.yarnpkg.com/@lerna/version/-/version-3.21.0.tgz#5bcc3d2de9eb8f4db18efb0d88973f9a509eccc3" - integrity sha512-nIT3u43fCNj6uSMN1dRxFnF4GhmIiOEqSTkGSjrMU+8kHKwzOqS/6X6TOzklBmCyEZOpF/fLlGqH3BZHnwLDzQ== +"@lerna/version@3.22.0": + version "3.22.0" + resolved "https://registry.yarnpkg.com/@lerna/version/-/version-3.22.0.tgz#67e1340c1904e9b339becd66429f32dd8ad65a55" + integrity sha512-6uhL6RL7/FeW6u1INEgyKjd5dwO8+IsbLfkfC682QuoVLS7VG6OOB+JmTpCvnuyYWI6fqGh1bRk9ww8kPsj+EA== dependencies: "@lerna/check-working-tree" "3.16.5" "@lerna/child-process" "3.16.5" "@lerna/collect-updates" "3.20.0" "@lerna/command" "3.21.0" - "@lerna/conventional-commits" "3.18.5" - "@lerna/github-client" "3.16.5" + "@lerna/conventional-commits" "3.22.0" + "@lerna/github-client" "3.22.0" "@lerna/gitlab-client" "3.15.0" "@lerna/output" "3.13.0" "@lerna/prerelease-id-from-version" "3.16.0" @@ -2108,10 +2108,10 @@ is-plain-object "^3.0.0" universal-user-agent "^5.0.0" -"@octokit/plugin-enterprise-rest@^3.6.1": - version "3.6.2" - resolved "https://registry.yarnpkg.com/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-3.6.2.tgz#74de25bef21e0182b4fa03a8678cd00a4e67e561" - integrity sha512-3wF5eueS5OHQYuAEudkpN+xVeUsg8vYEMMenEzLphUZ7PRZ8OJtDcsreL3ad9zxXmBbaFWzLmFcdob5CLyZftA== +"@octokit/plugin-enterprise-rest@^6.0.1": + version "6.0.1" + resolved "https://registry.yarnpkg.com/@octokit/plugin-enterprise-rest/-/plugin-enterprise-rest-6.0.1.tgz#e07896739618dab8da7d4077c658003775f95437" + integrity sha512-93uGjlhUD+iNg1iWhUENAtJata6w5nE+V4urXOAlIXdco6xNZtUSfYY8dzp3Udy74aqO/B5UZL80x/YMa5PKRw== "@octokit/plugin-paginate-rest@^1.1.1": version "1.1.2" @@ -10231,26 +10231,26 @@ lcid@^2.0.0: invert-kv "^2.0.0" lerna@^3.16.4: - version "3.21.0" - resolved "https://registry.yarnpkg.com/lerna/-/lerna-3.21.0.tgz#c81a0f8df45c6b7c9d3fc9fdcd0f846aca2375c6" - integrity sha512-ux8yOwQEgIXOZVUfq+T8nVzPymL19vlIoPbysOP3YA4hcjKlqQIlsjI/1ugBe6b4MF7W4iV5vS3gH9cGqBBc1A== + version "3.22.0" + resolved "https://registry.yarnpkg.com/lerna/-/lerna-3.22.0.tgz#da14d08f183ffe6eec566a4ef3f0e11afa621183" + integrity sha512-xWlHdAStcqK/IjKvjsSMHPZjPkBV1lS60PmsIeObU8rLljTepc4Sg/hncw4HWfQxPIewHAUTqhrxPIsqf9L2Eg== dependencies: "@lerna/add" "3.21.0" "@lerna/bootstrap" "3.21.0" "@lerna/changed" "3.21.0" "@lerna/clean" "3.21.0" "@lerna/cli" "3.18.5" - "@lerna/create" "3.21.0" + "@lerna/create" "3.22.0" "@lerna/diff" "3.21.0" "@lerna/exec" "3.21.0" - "@lerna/import" "3.21.0" + "@lerna/import" "3.22.0" "@lerna/info" "3.21.0" "@lerna/init" "3.21.0" "@lerna/link" "3.21.0" "@lerna/list" "3.21.0" - "@lerna/publish" "3.21.0" + "@lerna/publish" "3.22.0" "@lerna/run" "3.21.0" - "@lerna/version" "3.21.0" + "@lerna/version" "3.22.0" import-local "^2.0.0" npmlog "^4.1.2" From a9d760fa850ce85bc2cd916c76320ad6838c4fe3 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 1 Jun 2020 09:49:44 +0200 Subject: [PATCH 04/16] [Skeleton] Improve component (#21255) --- .../pages/components/skeleton/SkeletonTypography.js | 2 +- .../pages/components/skeleton/SkeletonTypography.tsx | 2 +- docs/src/pages/components/skeleton/skeleton.md | 11 +++++++++-- packages/material-ui-lab/src/Skeleton/Skeleton.js | 4 ++-- 4 files changed, 13 insertions(+), 6 deletions(-) diff --git a/docs/src/pages/components/skeleton/SkeletonTypography.js b/docs/src/pages/components/skeleton/SkeletonTypography.js index 012f7abcb55b2d..2f82d2cde9bf1d 100644 --- a/docs/src/pages/components/skeleton/SkeletonTypography.js +++ b/docs/src/pages/components/skeleton/SkeletonTypography.js @@ -12,7 +12,7 @@ function TypographyDemo(props) { return (
{variants.map((variant) => ( - + {loading ? : variant} ))} diff --git a/docs/src/pages/components/skeleton/SkeletonTypography.tsx b/docs/src/pages/components/skeleton/SkeletonTypography.tsx index 4c4a47e5641172..42e92e1801832d 100644 --- a/docs/src/pages/components/skeleton/SkeletonTypography.tsx +++ b/docs/src/pages/components/skeleton/SkeletonTypography.tsx @@ -11,7 +11,7 @@ function TypographyDemo(props: { loading?: boolean }) { return (
{variants.map((variant) => ( - + {loading ? : variant} ))} diff --git a/docs/src/pages/components/skeleton/skeleton.md b/docs/src/pages/components/skeleton/skeleton.md index 4b4082a2198e71..9e6022050ddcde 100644 --- a/docs/src/pages/components/skeleton/skeleton.md +++ b/docs/src/pages/components/skeleton/skeleton.md @@ -32,11 +32,11 @@ By default, the skeleton pulsate, but you can change the animation for a wave or {{"demo": "pages/components/skeleton/Animations.js"}} -## YouTube example +### Pulsate example {{"demo": "pages/components/skeleton/YouTube.js", "defaultCodeOpen": false}} -## Facebook example +### Wave example {{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}} @@ -65,3 +65,10 @@ loading ``` {{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} + +## Accessibility + +Skeleton screens provide an alternative to the traditional spinner methods. +Rather than showing an abstract widget, skeleton screens create anticipation of what is to come and reduce cognitive load. + +The background color of the skeleton uses the least amount of luminance to be visible in good conditions (good ambient light, good screen, no visual impairments). \ No newline at end of file diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js index 18b0f58cb57783..74003d1b1ecbca 100644 --- a/packages/material-ui-lab/src/Skeleton/Skeleton.js +++ b/packages/material-ui-lab/src/Skeleton/Skeleton.js @@ -7,8 +7,8 @@ export const styles = (theme) => ({ /* Styles applied to the root element. */ root: { display: 'block', - // Create a "on paper" color with sufficient contrast. - backgroundColor: fade(theme.palette.text.primary, 0.16), + // Create a "on paper" color with sufficient contrast retaining the color + backgroundColor: fade(theme.palette.text.primary, theme.palette.type === 'light' ? 0.11 : 0.13), height: '1.2em', }, /* Styles applied to the root element if `variant="text"`. */ From 96a419c172b56495e5432f6267abe0c2b8b52b08 Mon Sep 17 00:00:00 2001 From: Lotus Date: Mon, 1 Jun 2020 14:27:23 +0300 Subject: [PATCH 05/16] [docs] Replace typefaces with fontsource (#21153) --- docs/src/pages/components/typography/typography.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/docs/src/pages/components/typography/typography.md b/docs/src/pages/components/typography/typography.md index 2755101df3603b..090b38d70660b8 100644 --- a/docs/src/pages/components/typography/typography.md +++ b/docs/src/pages/components/typography/typography.md @@ -26,20 +26,20 @@ Shown below is a sample link markup used to load the Roboto font from a CDN: ## Install with npm -You can [install it](https://www.npmjs.com/package/typeface-roboto) by typing the below command in your terminal: +You can [install it](https://www.npmjs.com/package/fontsource-roboto) by typing the below command in your terminal: -`npm install typeface-roboto --save` +`npm install fontsource-roboto` Then, you can import it in your entry-point. ```js -import 'typeface-roboto'; +import 'fontsource-roboto'; ``` -For more info check out the [typeface](https://github.com/KyleAMathews/typefaces/tree/master/packages/roboto) project. +For more info check out [Fontsource](https://github.com/DecliningLotus/fontsource/blob/master/packages/roboto/README.md). ⚠️ Be careful when using this approach. -Make sure your bundler doesn't eager load all the font variations (100/300/400/500/700/900, italic/regular, SVG/woff). +Make sure your bundler doesn't eager load all the font variations (100/300/400/500/700/900, italic/regular, SVG/woff). Fontsource can be configured to load specific subsets, weights and styles. Inlining all the font files can significantly increase the size of your bundle. Material-UI default typography configuration only relies on 300, 400, 500, and 700 font weights. From 23cc51630329e2e6f0ecfd15432e8639d4ce9b8a Mon Sep 17 00:00:00 2001 From: Maksim Mamrikov Date: Mon, 1 Jun 2020 04:56:10 -0700 Subject: [PATCH 06/16] [Autocomplete] Document how to use a 3rd party input (#21257) --- .../autocomplete/CustomInputAutocomplete.js | 18 ++++++++++++++++++ .../autocomplete/CustomInputAutocomplete.tsx | 18 ++++++++++++++++++ .../components/autocomplete/autocomplete.md | 12 +++++++++++- 3 files changed, 47 insertions(+), 1 deletion(-) create mode 100644 docs/src/pages/components/autocomplete/CustomInputAutocomplete.js create mode 100644 docs/src/pages/components/autocomplete/CustomInputAutocomplete.tsx diff --git a/docs/src/pages/components/autocomplete/CustomInputAutocomplete.js b/docs/src/pages/components/autocomplete/CustomInputAutocomplete.js new file mode 100644 index 00000000000000..a6f3ef97477d70 --- /dev/null +++ b/docs/src/pages/components/autocomplete/CustomInputAutocomplete.js @@ -0,0 +1,18 @@ +import React from 'react'; +import Autocomplete from '@material-ui/lab/Autocomplete'; + +const options = ['Option 1', 'Option 2']; + +export default function CustomInputAutocomplete() { + return ( + ( +
+ +
+ )} + /> + ); +} diff --git a/docs/src/pages/components/autocomplete/CustomInputAutocomplete.tsx b/docs/src/pages/components/autocomplete/CustomInputAutocomplete.tsx new file mode 100644 index 00000000000000..a6f3ef97477d70 --- /dev/null +++ b/docs/src/pages/components/autocomplete/CustomInputAutocomplete.tsx @@ -0,0 +1,18 @@ +import React from 'react'; +import Autocomplete from '@material-ui/lab/Autocomplete'; + +const options = ['Option 1', 'Option 2']; + +export default function CustomInputAutocomplete() { + return ( + ( +
+ +
+ )} + /> + ); +} diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md index aa896621d02b8d..c4f2af9a8a1a32 100644 --- a/docs/src/pages/components/autocomplete/autocomplete.md +++ b/docs/src/pages/components/autocomplete/autocomplete.md @@ -139,7 +139,17 @@ Fancy smaller inputs? Use the `size` prop. {{"demo": "pages/components/autocomplete/Sizes.js"}} -## Customized Autocomplete +## Customizations + +### Custom input + +The `renderInput` prop allows you to customize the rendered input. +The first argument of this render prop contains props that you need to forward. +Pay specific attention to the `ref` and `inputProps` keys. + +{{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} + +### GitHub's picker This demo reproduces the GitHub's label picker: From 5e5fe25b7f2875edca2ff47d900929ff113bec4c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 1 Jun 2020 14:39:58 +0200 Subject: [PATCH 07/16] [core] Batch small changes (#21249) --- .github/ISSUE_TEMPLATE/1.bug.md | 1 + .github/ISSUE_TEMPLATE/2.feature.md | 1 + README.md | 6 ++--- docs/pages/_app.js | 2 +- .../src/modules/components/DiamondSponsors.js | 2 +- .../progress/CustomizedProgressBars.js | 4 ++-- .../progress/CustomizedProgressBars.tsx | 4 ++-- .../pages/customization/theming/theming.md | 14 +++++------ .../pages/discover-more/backers/backers.md | 6 ++--- .../related-projects/related-projects.md | 16 ++++++++----- docs/src/pages/landing/Quotes.js | 2 +- docs/src/pages/landing/backers.md | 6 ++--- .../src/Autocomplete/Autocomplete.test.js | 6 ++--- .../src/ThemeProvider/ThemeProvider.test.js | 4 ++-- packages/material-ui/package.json | 2 +- .../src/FilledInput/FilledInput.js | 6 ++--- .../src/OutlinedInput/OutlinedInput.js | 6 ++--- .../TextareaAutosize/TextareaAutosize.test.js | 2 +- .../src/useMediaQuery/useMediaQuery.test.js | 5 +--- scripts/react-next.diff | 24 ++++++++++++------- yarn.lock | 8 +++---- 21 files changed, 68 insertions(+), 59 deletions(-) diff --git a/.github/ISSUE_TEMPLATE/1.bug.md b/.github/ISSUE_TEMPLATE/1.bug.md index 7a597423362e41..3f8bec69f7ceac 100644 --- a/.github/ISSUE_TEMPLATE/1.bug.md +++ b/.github/ISSUE_TEMPLATE/1.bug.md @@ -1,6 +1,7 @@ --- name: Bug report 🐛 about: Create a bug report for Material-UI. +labels: 'status: needs triage' --- diff --git a/.github/ISSUE_TEMPLATE/2.feature.md b/.github/ISSUE_TEMPLATE/2.feature.md index dc741a213792b8..eb4e64abbf2a61 100644 --- a/.github/ISSUE_TEMPLATE/2.feature.md +++ b/.github/ISSUE_TEMPLATE/2.feature.md @@ -1,6 +1,7 @@ --- name: Feature request 💄 about: Suggest a new idea for the project. +labels: 'status: needs triage' --- diff --git a/README.md b/README.md index 69a79dc756b71c..22bdcd5ad4784d 100644 --- a/README.md +++ b/README.md @@ -59,14 +59,14 @@ Diamond Sponsors are those who have pledged $1,500/month or more to Material-UI. via [Patreon](https://www.patreon.com/oliviertassinari)

- tidelift - bitsrc + tidelift + bitsrc

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

- call-em-all + call-em-all

Gold Sponsors are those who have pledged $500/month or more to Material-UI. diff --git a/docs/pages/_app.js b/docs/pages/_app.js index bfcc1ff85c0eb9..c15f4fb9e6197b 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -160,7 +160,7 @@ function Analytics() { * Adjusted to track 3 or more different ratios */ function trackDevicePixelRation() { - window.ga('set', 'dimension3', window.devicePixelRatio); + window.ga('set', 'dimension3', Math.round(window.devicePixelRatio * 10) / 10); matchMedia = window.matchMedia(`(resolution: ${window.devicePixelRatio}dppx)`); // Need to setup again. diff --git a/docs/src/modules/components/DiamondSponsors.js b/docs/src/modules/components/DiamondSponsors.js index 61e38292182f9e..37c9a603d3b436 100644 --- a/docs/src/modules/components/DiamondSponsors.js +++ b/docs/src/modules/components/DiamondSponsors.js @@ -53,7 +53,7 @@ export default function DiamondSponsors(props) { {t('diamondSponsors')} - {randomSencha < 0.05 ? ( + {randomSencha < 0.25 ? ( ({ borderRadius: 5, }, colorPrimary: { - backgroundColor: theme.palette.grey[theme.palette.type === 'dark' ? 700 : 200], + backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], }, bar: { borderRadius: 5, @@ -23,7 +23,7 @@ const useStylesFacebook = makeStyles((theme) => ({ position: 'relative', }, bottom: { - color: theme.palette.grey[theme.palette.type === 'dark' ? 700 : 200], + color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], }, top: { color: '#1a90ff', diff --git a/docs/src/pages/components/progress/CustomizedProgressBars.tsx b/docs/src/pages/components/progress/CustomizedProgressBars.tsx index c03e1074f00240..a9a06e4ee9bfcd 100644 --- a/docs/src/pages/components/progress/CustomizedProgressBars.tsx +++ b/docs/src/pages/components/progress/CustomizedProgressBars.tsx @@ -10,7 +10,7 @@ const BorderLinearProgress = withStyles((theme: Theme) => borderRadius: 5, }, colorPrimary: { - backgroundColor: theme.palette.grey[theme.palette.type === 'dark' ? 700 : 200], + backgroundColor: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], }, bar: { borderRadius: 5, @@ -26,7 +26,7 @@ const useStylesFacebook = makeStyles((theme: Theme) => position: 'relative', }, bottom: { - color: theme.palette.grey[theme.palette.type === 'dark' ? 700 : 200], + color: theme.palette.grey[theme.palette.type === 'light' ? 200 : 700], }, top: { color: '#1a90ff', diff --git a/docs/src/pages/customization/theming/theming.md b/docs/src/pages/customization/theming/theming.md index 0ad9374bc29a68..bbcb03f16178ad 100644 --- a/docs/src/pages/customization/theming/theming.md +++ b/docs/src/pages/customization/theming/theming.md @@ -137,7 +137,7 @@ Using `unstable_createMuiStrictModeTheme` restricts the usage of some of our com The component used in the `component` prop of the following components need to forward their ref: -- [`Collapse`](/api/Collapse/) +- [`Collapse`](/api/collapse/) Otherwise you'll encounter `Error: Function component cannot be given refs`. See also: [Composition: Caveat with refs](/guides/composition/#caveat-with-refs). @@ -146,9 +146,9 @@ See also: [Composition: Caveat with refs](/guides/composition/#caveat-with-refs) The `children` of the following components need to forward their ref: -- [`Fade`](/api/Fade/) -- [`Grow`](/api/Grow/) -- [`Zoom`](/api/Zoom/) +- [`Fade`](/api/fade/) +- [`Grow`](/api/grow/) +- [`Zoom`](/api/zoom/) ```diff -function TabPanel(props) { @@ -195,12 +195,12 @@ function Fade() { #### Arguments -1. `options` (_Object_): Takes an incomplete theme object and adds the missing parts. -2. `...args` (_Array_): Deep merge the arguments with the about to be returned theme. +1. `options` (*Object*): Takes an incomplete theme object and adds the missing parts. +2. `...args` (*Array*): Deep merge the arguments with the about to be returned theme. #### Returns -`theme` (_Object_): A complete, ready to use theme object. +`theme` (*Object*): A complete, ready to use theme object. #### Examples diff --git a/docs/src/pages/discover-more/backers/backers.md b/docs/src/pages/discover-more/backers/backers.md index c9a7c69c10f793..3ce263b121fa83 100644 --- a/docs/src/pages/discover-more/backers/backers.md +++ b/docs/src/pages/discover-more/backers/backers.md @@ -22,14 +22,14 @@ Please contact us at diamond@material-ui.com to subscribe to this tier. via [Patreon](https://www.patreon.com/oliviertassinari)

- tidelift - bitsrc + tidelift + bitsrc

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

- call-em-all + call-em-all

Gold Sponsors are those who have pledged $500/month or more to Material-UI. diff --git a/docs/src/pages/discover-more/related-projects/related-projects.md b/docs/src/pages/discover-more/related-projects/related-projects.md index bc0962fdafb469..11b94aa2773c48 100644 --- a/docs/src/pages/discover-more/related-projects/related-projects.md +++ b/docs/src/pages/discover-more/related-projects/related-projects.md @@ -32,14 +32,14 @@ This is a collection of third-party projects that extend Material-UI. - [@mui-treasury/layout](https://mui-treasury.com/layout): Components to handle the overall layout of a page. You can find a couple of examples, e.g. [a reactjs.org clone](https://mui-treasury.com/layout/clones/reactjs). -### Tables +### Table - [material-table](https://github.com/mbrn/material-table): A simple and powerful Datatable for React based on Material-UI Table with some additional features. It supports many different use cases (editable, filtering, grouping, sorting, selection, i18n, tree data and more). - [dx-react-grid-material-ui](https://devexpress.github.io/devextreme-reactive/react/grid/): A data grid for Material-UI with paging, sorting, filtering, grouping and editing features ([paid license](https://js.devexpress.com/licensing/)). - [mui-datatables](https://github.com/gregnb/mui-datatables): Responsive data tables for Material-UI with filtering, sorting, search and more. - [tubular-react](https://github.com/unosquare/tubular-react): A Material-UI table with local or remote data-source. Featuring filtering, sorting, free-text search, export to CSV locally, and aggregations. -### Notifications +### Notification - [notistack](https://github.com/iamhosseindhv/notistack): Makes it easy to display snackbars (so you don't have to deal with open/close state of them). @@ -47,7 +47,7 @@ This is a collection of third-party projects that extend Material-UI. - [material-ui-dropzone](https://github.com/Yuvaleros/material-ui-dropzone): Built on top of react-dropzone. -### Forms +### Form - [formik-material-ui](https://github.com/stackworx/formik-material-ui) Bindings for using Material-UI with [formik](https://jaredpalmer.com/formik). - [redux-form-material-ui](https://github.com/erikras/redux-form-material-ui) Bindings for using Material-UI with [Redux Form](https://redux-form.com/). @@ -66,18 +66,22 @@ This is a collection of third-party projects that extend Material-UI. - [material-ui-flat-pagination](https://github.com/szmslab/material-ui-flat-pagination): A flat design pagination component for Material-UI. -### Schedulers/Calendars +### Scheduler/Calendar - [dx-react-scheduler-material-ui](https://devexpress.github.io/devextreme-reactive/react/scheduler/): A scheduler/calendar component for Material-UI with multiple calendar views, editing, recurrence appointments and date navigation features ([paid license](https://js.devexpress.com/licensing/)). -### Charts +### Chart - [dx-react-chart-material-ui](https://devexpress.github.io/devextreme-reactive/react/chart/): Charts for Material-UI that visualizes data using a variety of series types, including bar, line, area, scatter, pie, and more ([paid license](https://js.devexpress.com/licensing/)). -### Dialogs +### Dialog - [material-ui-confirm](https://github.com/jonatanklosko/material-ui-confirm): Provides easy to use confirmation dialogs to simplify confirming user actions without writing boilerplate code. +### Color picker + +- [material-ui-color](https://github.com/mikbry/material-ui-color): Collections of color components for material-ui. No dependencies, small, highly customizable and theming support! + ## Blocks - [components-extra](https://github.com/alexandre-lelain/components-extra): Provides a set of "molecule" components built on top of Material-UI like a Footer, a CookiesBanner, a BackToTop button and other complex elements highly customizable to help devs build the macro parts of their UI very quickly. Those components are often duplicated across sites - this library solves this exact problem. diff --git a/docs/src/pages/landing/Quotes.js b/docs/src/pages/landing/Quotes.js index bc7f5009bad7d9..64fec0379f4d34 100644 --- a/docs/src/pages/landing/Quotes.js +++ b/docs/src/pages/landing/Quotes.js @@ -171,7 +171,7 @@ function Quote(props) { diff --git a/docs/src/pages/landing/backers.md b/docs/src/pages/landing/backers.md index fe93a84f0e3c9e..887e437e65f1b1 100644 --- a/docs/src/pages/landing/backers.md +++ b/docs/src/pages/landing/backers.md @@ -13,12 +13,12 @@ The continued development and maintenance of Material-UI is made possible by the ### Gold 🏆

- tidelift - bitsrc + tidelift + bitsrc

- call-em-all + call-em-all

### There are more! diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js index 26c3940e07b3b5..34fde3e7453322 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js @@ -996,7 +996,7 @@ describe('', () => { fireEvent.keyDown(textbox, { key: 'ArrowDown' }); fireEvent.keyDown(textbox, { key: 'Enter' }); - expect(consoleErrorMock.callCount()).to.equal(1); // strict mode renders twice + expect(consoleErrorMock.callCount()).to.equal(1); expect(consoleErrorMock.messages()[0]).to.include( 'The component expects a single value to match a given option but found 2 matches.', ); @@ -1015,7 +1015,7 @@ describe('', () => { />, ); - expect(consoleWarnMock.callCount()).to.equal(4); + expect(consoleWarnMock.callCount()).to.equal(4); // strict mode renders twice expect(consoleWarnMock.messages()[0]).to.include( 'None of the options match with `"not a good value"`', ); @@ -1044,7 +1044,7 @@ describe('', () => { const options = getAllByRole('option').map((el) => el.textContent); expect(options).to.have.length(7); expect(options).to.deep.equal(['A', 'D', 'E', 'B', 'G', 'F', 'C']); - expect(consoleWarnMock.callCount()).to.equal(2); + expect(consoleWarnMock.callCount()).to.equal(2); // strict mode renders twice expect(consoleWarnMock.messages()[0]).to.include('returns duplicated headers'); }); }); diff --git a/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js b/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js index 5c9d0be268daeb..9013d9095500ad 100644 --- a/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js +++ b/packages/material-ui-styles/src/ThemeProvider/ThemeProvider.test.js @@ -135,7 +135,7 @@ describe('ThemeProvider', () => {
, ); - expect(consoleErrorMock.callCount()).to.equal(2); // twice in strict mode + expect(consoleErrorMock.callCount()).to.equal(2); // strict mode renders twice expect(consoleErrorMock.messages()[0]).to.include('However, no outer theme is present.'); }); @@ -148,7 +148,7 @@ describe('ThemeProvider', () => { , , ); - expect(consoleErrorMock.callCount()).to.equal(2); + expect(consoleErrorMock.callCount()).to.equal(2); // strict mode renders twice expect(consoleErrorMock.messages()[0]).to.include( 'Material-UI: You should return an object from your theme function', ); diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json index 2d55605415ed0b..38d4d3fbc46da3 100644 --- a/packages/material-ui/package.json +++ b/packages/material-ui/package.json @@ -56,7 +56,7 @@ "@types/react-transition-group": "^4.2.0", "clsx": "^1.0.4", "hoist-non-react-statics": "^3.3.2", - "popper.js": "^1.16.1-lts", + "popper.js": "1.16.1-lts", "prop-types": "^15.7.2", "react-is": "^16.8.0", "react-transition-group": "^4.4.0" diff --git a/packages/material-ui/src/FilledInput/FilledInput.js b/packages/material-ui/src/FilledInput/FilledInput.js index 1e12008d121ab8..99c4339183cf9a 100644 --- a/packages/material-ui/src/FilledInput/FilledInput.js +++ b/packages/material-ui/src/FilledInput/FilledInput.js @@ -113,9 +113,9 @@ export const styles = (theme) => { input: { padding: '27px 12px 10px', '&:-webkit-autofill': { - WebkitBoxShadow: theme.palette.type === 'dark' ? '0 0 0 100px #266798 inset' : null, - WebkitTextFillColor: theme.palette.type === 'dark' ? '#fff' : null, - caretColor: theme.palette.type === 'dark' ? '#fff' : null, + WebkitBoxShadow: theme.palette.type === 'light' ? null : '0 0 0 100px #266798 inset', + WebkitTextFillColor: theme.palette.type === 'light' ? null : '#fff', + caretColor: theme.palette.type === 'light' ? null : '#fff', borderTopLeftRadius: 'inherit', borderTopRightRadius: 'inherit', }, diff --git a/packages/material-ui/src/OutlinedInput/OutlinedInput.js b/packages/material-ui/src/OutlinedInput/OutlinedInput.js index 53b17c355ef287..6792be64a219ef 100644 --- a/packages/material-ui/src/OutlinedInput/OutlinedInput.js +++ b/packages/material-ui/src/OutlinedInput/OutlinedInput.js @@ -73,9 +73,9 @@ export const styles = (theme) => { input: { padding: '18.5px 14px', '&:-webkit-autofill': { - WebkitBoxShadow: theme.palette.type === 'dark' ? '0 0 0 100px #266798 inset' : null, - WebkitTextFillColor: theme.palette.type === 'dark' ? '#fff' : null, - caretColor: theme.palette.type === 'dark' ? '#fff' : null, + WebkitBoxShadow: theme.palette.type === 'light' ? null : '0 0 0 100px #266798 inset', + WebkitTextFillColor: theme.palette.type === 'light' ? null : '#fff', + caretColor: theme.palette.type === 'light' ? null : '#fff', borderRadius: 'inherit', }, }, diff --git a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js index cea126a0d4a584..09daadd961d059 100644 --- a/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js +++ b/packages/material-ui/src/TextareaAutosize/TextareaAutosize.test.js @@ -261,7 +261,7 @@ describe('', () => { }); forceUpdate(); - expect(consoleErrorMock.callCount()).to.equal(3); + expect(consoleErrorMock.callCount()).to.equal(3); // strict mode renders twice expect(consoleErrorMock.messages()[0]).to.include('Material-UI: Too many re-renders.'); }); }); diff --git a/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js b/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js index 68b0a4a5c6e57d..ba9977d1a25fd8 100644 --- a/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js +++ b/packages/material-ui/src/useMediaQuery/useMediaQuery.test.js @@ -285,13 +285,10 @@ describe('useMediaQuery', () => { render(); // logs warning twice in StrictMode - expect(consoleErrorMock.callCount()).to.equal(2); + expect(consoleErrorMock.callCount()).to.equal(2); // strict mode renders twice expect(consoleErrorMock.messages()[0]).to.include( 'Material-UI: The `query` argument provided is invalid', ); - expect(consoleErrorMock.messages()[1]).to.include( - 'Material-UI: The `query` argument provided is invalid', - ); }); }); }); diff --git a/scripts/react-next.diff b/scripts/react-next.diff index e4c1686ddfc877..eefeed800a8388 100644 --- a/scripts/react-next.diff +++ b/scripts/react-next.diff @@ -2,11 +2,20 @@ diff --git a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js b/pa index 5e83281c0..3c995f97c 100644 --- a/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +++ b/packages/material-ui-lab/src/Autocomplete/Autocomplete.test.js +@@ -963,7 +963,7 @@ describe('', () => { + fireEvent.keyDown(textbox, { key: 'Enter' }); + expect(handleChange.callCount).to.equal(1); + expect(handleChange.args[0][1]).to.equal('a'); +- expect(consoleErrorMock.callCount()).to.equal(4); // strict mode renders twice ++ expect(consoleErrorMock.callCount()).to.equal(3); + expect(consoleErrorMock.messages()[0]).to.include( + 'Material-UI: The `getOptionLabel` method of Autocomplete returned undefined instead of a string', + ); @@ -993,7 +993,7 @@ describe('', () => { />, ); -- expect(consoleWarnMock.callCount()).to.equal(4); +- expect(consoleWarnMock.callCount()).to.equal(4); // strict mode renders twice + expect(consoleWarnMock.callCount()).to.equal(2); expect(consoleWarnMock.messages()[0]).to.include( 'None of the options match with `"not a good value"`', @@ -15,7 +24,7 @@ index 5e83281c0..3c995f97c 100644 const options = getAllByRole('option').map((el) => el.textContent); expect(options).to.have.length(7); expect(options).to.deep.equal(['A', 'D', 'E', 'B', 'G', 'F', 'C']); -- expect(consoleWarnMock.callCount()).to.equal(2); +- expect(consoleWarnMock.callCount()).to.equal(2); // strict mode renders twice + expect(consoleWarnMock.callCount()).to.equal(1); expect(consoleWarnMock.messages()[0]).to.include('returns duplicated headers'); }); @@ -28,7 +37,7 @@ index 5c9d0be26..7f0862466 100644
, ); -- expect(consoleErrorMock.callCount()).to.equal(2); // twice in strict mode +- expect(consoleErrorMock.callCount()).to.equal(2); // strict mode renders twice + expect(consoleErrorMock.callCount()).to.equal(1); expect(consoleErrorMock.messages()[0]).to.include('However, no outer theme is present.'); }); @@ -37,7 +46,7 @@ index 5c9d0be26..7f0862466 100644 , , ); -- expect(consoleErrorMock.callCount()).to.equal(2); +- expect(consoleErrorMock.callCount()).to.equal(2); // strict mode renders twice + expect(consoleErrorMock.callCount()).to.equal(1); expect(consoleErrorMock.messages()[0]).to.include( 'Material-UI: You should return an object from your theme function', @@ -63,7 +72,7 @@ index cea126a0d..1eaf80628 100644 }); forceUpdate(); -- expect(consoleErrorMock.callCount()).to.equal(3); +- expect(consoleErrorMock.callCount()).to.equal(3); // strict mode renders twice + expect(consoleErrorMock.callCount()).to.equal(1); expect(consoleErrorMock.messages()[0]).to.include('Material-UI: Too many re-renders.'); }); @@ -99,14 +108,11 @@ index 68b0a4a5c..e31152c44 100644 render(); - // logs warning twice in StrictMode -- expect(consoleErrorMock.callCount()).to.equal(2); +- expect(consoleErrorMock.callCount()).to.equal(2); // strict mode renders twice + expect(consoleErrorMock.callCount()).to.equal(1); expect(consoleErrorMock.messages()[0]).to.include( 'Material-UI: The `query` argument provided is invalid', ); -- expect(consoleErrorMock.messages()[1]).to.include( -- 'Material-UI: The `query` argument provided is invalid', -- ); }); }); }); diff --git a/yarn.lock b/yarn.lock index d70ca091bd2504..f2fe66bb8c929d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -12637,10 +12637,10 @@ pnp-webpack-plugin@1.5.0: dependencies: ts-pnp "^1.1.2" -popper.js@^1.16.1-lts: - version "1.16.1" - resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1.tgz#2a223cb3dc7b6213d740e40372be40de43e65b1b" - integrity sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ== +popper.js@1.16.1-lts: + version "1.16.1-lts" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05" + integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA== posix-character-classes@^0.1.0: version "0.1.1" From 010058b818913bbd9c507b4ef3014dd194b31e5c Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Mon, 1 Jun 2020 16:24:45 +0200 Subject: [PATCH 08/16] [docs] Sync translations (#21275) --- docs/src/pages/components/alert/alert-pt.md | 24 ++-- .../pages/components/app-bar/app-bar-pt.md | 6 +- .../autocomplete/autocomplete-aa.md | 58 +++++---- .../autocomplete/autocomplete-de.md | 10 +- .../autocomplete/autocomplete-es.md | 118 ++++++++++-------- .../autocomplete/autocomplete-fr.md | 10 +- .../autocomplete/autocomplete-ja.md | 16 ++- .../autocomplete/autocomplete-pt.md | 12 +- .../autocomplete/autocomplete-ru.md | 10 +- .../autocomplete/autocomplete-zh.md | 26 ++-- .../pages/components/avatars/avatars-es.md | 2 +- .../pages/components/avatars/avatars-pt.md | 4 +- .../pages/components/backdrop/backdrop-pt.md | 4 +- docs/src/pages/components/badges/badges-pt.md | 12 +- .../bottom-navigation/bottom-navigation-pt.md | 8 +- .../components/breadcrumbs/breadcrumbs-pt.md | 22 ++-- .../button-group/button-group-zh.md | 12 +- .../pages/components/buttons/buttons-aa.md | 68 +++++----- .../pages/components/buttons/buttons-de.md | 16 ++- .../pages/components/buttons/buttons-es.md | 10 ++ .../pages/components/buttons/buttons-fr.md | 10 ++ .../pages/components/buttons/buttons-ja.md | 20 ++- .../pages/components/buttons/buttons-pt.md | 22 +++- .../pages/components/buttons/buttons-ru.md | 14 ++- .../pages/components/buttons/buttons-zh.md | 38 +++--- docs/src/pages/components/cards/cards-zh.md | 2 +- .../components/checkboxes/checkboxes-pt.md | 2 +- .../components/checkboxes/checkboxes-zh.md | 2 +- docs/src/pages/components/chips/chips-pt.md | 4 +- docs/src/pages/components/chips/chips-zh.md | 2 +- .../click-away-listener-zh.md | 4 +- .../css-baseline/css-baseline-pt.md | 2 +- .../css-baseline/css-baseline-zh.md | 8 +- .../pages/components/dividers/dividers-pt.md | 4 +- .../expansion-panels/expansion-panels-pt.md | 2 +- .../floating-action-button-es.md | 26 ++-- .../floating-action-button-zh.md | 14 +-- .../components/grid-list/grid-list-pt.md | 2 +- docs/src/pages/components/icons/icons-es.md | 2 +- docs/src/pages/components/links/links-zh.md | 2 +- docs/src/pages/components/lists/lists-zh.md | 2 +- docs/src/pages/components/menus/menus-zh.md | 2 +- docs/src/pages/components/modal/modal-pt.md | 2 +- docs/src/pages/components/modal/modal-zh.md | 6 +- .../components/pagination/pagination-pt.md | 10 +- .../components/pagination/pagination-zh.md | 12 +- docs/src/pages/components/popper/popper-zh.md | 4 +- docs/src/pages/components/portal/portal-pt.md | 2 +- .../pages/components/progress/progress-zh.md | 4 +- .../radio-buttons/radio-buttons-aa.md | 20 +-- .../radio-buttons/radio-buttons-de.md | 2 + .../radio-buttons/radio-buttons-es.md | 6 +- .../radio-buttons/radio-buttons-fr.md | 2 + .../radio-buttons/radio-buttons-ja.md | 2 + .../radio-buttons/radio-buttons-pt.md | 16 +-- .../radio-buttons/radio-buttons-ru.md | 2 + .../radio-buttons/radio-buttons-zh.md | 10 +- docs/src/pages/components/rating/rating-pt.md | 2 +- .../pages/components/selects/selects-es.md | 2 +- .../pages/components/selects/selects-pt.md | 2 +- .../pages/components/selects/selects-zh.md | 4 +- .../pages/components/skeleton/skeleton-aa.md | 14 ++- .../pages/components/skeleton/skeleton-de.md | 12 +- .../pages/components/skeleton/skeleton-es.md | 12 +- .../pages/components/skeleton/skeleton-fr.md | 12 +- .../pages/components/skeleton/skeleton-ja.md | 12 +- .../pages/components/skeleton/skeleton-pt.md | 22 ++-- .../pages/components/skeleton/skeleton-ru.md | 12 +- .../pages/components/skeleton/skeleton-zh.md | 20 +-- docs/src/pages/components/slider/slider-zh.md | 14 +-- .../components/snackbars/snackbars-zh.md | 6 +- .../pages/components/steppers/steppers-zh.md | 14 +-- .../pages/components/switches/switches-pt.md | 2 +- .../pages/components/switches/switches-zh.md | 2 +- docs/src/pages/components/tables/tables-zh.md | 4 +- .../components/text-fields/text-fields-zh.md | 2 +- .../textarea-autosize/textarea-autosize-zh.md | 6 +- .../toggle-button/toggle-button-zh.md | 10 +- .../pages/components/tooltips/tooltips-zh.md | 2 +- .../components/tree-view/tree-view-zh.md | 2 +- .../components/typography/typography-aa.md | 10 +- .../components/typography/typography-de.md | 12 +- .../components/typography/typography-es.md | 12 +- .../components/typography/typography-fr.md | 10 +- .../components/typography/typography-ja.md | 12 +- .../components/typography/typography-pt.md | 10 +- .../components/typography/typography-ru.md | 10 +- .../components/typography/typography-zh.md | 12 +- .../customization/components/components-aa.md | 2 +- .../customization/components/components-de.md | 2 +- .../customization/components/components-es.md | 2 +- .../customization/components/components-fr.md | 2 +- .../customization/components/components-ja.md | 2 +- .../customization/components/components-ru.md | 2 +- .../customization/components/components-zh.md | 50 ++++---- .../default-theme/default-theme-zh.md | 4 +- .../pages/customization/density/density-zh.md | 4 +- .../pages/customization/globals/globals-zh.md | 4 +- .../pages/customization/palette/palette-aa.md | 2 +- .../pages/customization/palette/palette-de.md | 2 +- .../pages/customization/palette/palette-es.md | 2 +- .../pages/customization/palette/palette-fr.md | 2 +- .../pages/customization/palette/palette-ja.md | 2 +- .../pages/customization/palette/palette-pt.md | 2 +- .../pages/customization/palette/palette-ru.md | 2 +- .../pages/customization/palette/palette-zh.md | 2 +- .../pages/customization/spacing/spacing-zh.md | 14 +-- .../pages/customization/theming/theming-aa.md | 8 +- .../pages/customization/theming/theming-de.md | 8 +- .../pages/customization/theming/theming-es.md | 8 +- .../pages/customization/theming/theming-fr.md | 8 +- .../pages/customization/theming/theming-ja.md | 8 +- .../pages/customization/theming/theming-pt.md | 16 +-- .../pages/customization/theming/theming-ru.md | 8 +- .../pages/customization/theming/theming-zh.md | 8 +- .../pages/customization/z-index/z-index-zh.md | 6 +- .../related-projects/related-projects-aa.md | 34 ++--- .../related-projects/related-projects-de.md | 26 ++-- .../related-projects/related-projects-es.md | 26 ++-- .../related-projects/related-projects-fr.md | 24 ++-- .../related-projects/related-projects-ja.md | 24 ++-- .../related-projects/related-projects-pt.md | 26 ++-- .../related-projects/related-projects-ru.md | 26 ++-- .../related-projects/related-projects-zh.md | 26 ++-- .../discover-more/showcase/showcase-zh.md | 4 +- docs/src/pages/discover-more/team/team-zh.md | 6 +- .../pages/discover-more/vision/vision-zh.md | 2 +- .../example-projects/example-projects-zh.md | 36 +++--- docs/src/pages/getting-started/faq/faq-pt.md | 22 ++-- docs/src/pages/getting-started/faq/faq-zh.md | 2 +- .../supported-components-zh.md | 12 +- .../supported-platforms-zh.md | 4 +- .../pages/getting-started/usage/usage-zh.md | 18 +-- docs/src/pages/guides/api/api-aa.md | 18 +-- docs/src/pages/guides/api/api-de.md | 18 +-- docs/src/pages/guides/api/api-es.md | 20 +-- docs/src/pages/guides/api/api-fr.md | 18 +-- docs/src/pages/guides/api/api-ja.md | 18 +-- docs/src/pages/guides/api/api-pt.md | 16 +-- docs/src/pages/guides/api/api-ru.md | 18 +-- docs/src/pages/guides/api/api-zh.md | 18 +-- .../interoperability/interoperability-aa.md | 2 +- .../interoperability/interoperability-de.md | 2 +- .../interoperability/interoperability-es.md | 2 +- .../interoperability/interoperability-fr.md | 2 +- .../interoperability/interoperability-ja.md | 2 +- .../interoperability/interoperability-pt.md | 2 +- .../interoperability/interoperability-ru.md | 2 +- .../interoperability/interoperability-zh.md | 2 +- .../minimizing-bundle-size-zh.md | 2 +- docs/src/pages/guides/testing/testing-zh.md | 2 +- docs/src/pages/landing/backers-aa.md | 6 +- docs/src/pages/landing/backers-de.md | 6 +- docs/src/pages/landing/backers-es.md | 6 +- docs/src/pages/landing/backers-fr.md | 6 +- docs/src/pages/landing/backers-ja.md | 6 +- docs/src/pages/landing/backers-pt.md | 6 +- docs/src/pages/landing/backers-ru.md | 6 +- docs/src/pages/landing/backers-zh.md | 8 +- docs/src/pages/system/basics/basics-zh.md | 12 +- docs/src/pages/versions/versions-pt.md | 6 +- docs/translations/translations-es.json | 2 +- docs/translations/translations-pt.json | 10 +- 163 files changed, 990 insertions(+), 766 deletions(-) diff --git a/docs/src/pages/components/alert/alert-pt.md b/docs/src/pages/components/alert/alert-pt.md index 68f3ef8e0488bf..2381be8772f43a 100644 --- a/docs/src/pages/components/alert/alert-pt.md +++ b/docs/src/pages/components/alert/alert-pt.md @@ -7,7 +7,7 @@ components: Alert, AlertTitle

Um alerta exibe uma mensagem curta e importante de uma forma que atrai a atenção do usuário sem interromper o que ele estiver fazendo.

-**Observação:** Este componente não está documentado nos [guias do Material Design](https://material.io/), mas o Material-UI o suporta. +**Observação:** Este componente não está documentado nas [diretrizes do Material Design](https://material.io/), mas o Material-UI o suporta. ## Alerta simples @@ -23,33 +23,33 @@ Você pode usar o componente `AlertTitle` para exibir um título formatado acima ## Ações -Um alerta pode conter uma ação, como um botão de fechar ou desfazer. É renderizado depois da mensagem na parte final do alerta. +Um alerta pode conter uma ação, como um botão de fechar ou desfazer. A ação é renderizada depois da mensagem, na parte final do alerta. -Se um `onClose` callback é dado e um atributo `action` é passado, um ícone de fechar é exibido. O atributo `action` pode ser usado para fornecer uma ação alternativa, por exemplo usando um Button ou IconButton. +Se um callback `onClose` é fornecido e a propriedade `action` não é definida, um ícone de fechar será exibido. A propriedade `action` pode ser usada para fornecer uma ação alternativa, por exemplo, usando um Button ou IconButton. {{"demo": "pages/components/alert/ActionAlerts.js"}} ### Transição -Você pode utilizar um [transition component](/components/transitions/) como `Collapse` para realizar uma transição na aparência do alerta. +Você pode utilizar um [componente de transição](/components/transitions/) como um `Collapse` para realizar uma transição na exibição do alerta. {{"demo": "pages/components/alert/TransitionAlerts.js"}} ## Ícones -O atributo `icon` permite que você adicione um ícone no início do componente de alerta. Isto substituirá o ícone padrão de acordo com a gravidade especificada. +A propriedade `icon` permite que você adicione um ícone no início do componente de alerta. Isto substituirá o ícone padrão de acordo com a severidade especificada. -Você pode alterar a gravidade padrão para mapeamento de ícones com o atributo `iconMapping`. Isto pode ser definido globalmente utilizando [theme customization](/customization/globals/#default-props). +Você pode alterar a severidade padrão e o mapeamento do ícone com a propriedade `iconMapping`. Isso pode ser definido globalmente utilizando [customização do tema](/customization/globals/#default-props). -Definir o atributo ícone como falso removerá o ícone completamente. +Definir a propriedade ícone como falso removerá o ícone completamente. {{"demo": "pages/components/alert/IconAlerts.js"}} ## Variantes -Duas variantes adicionais estão disponíveis – delineadas e preenchidas: +Duas variantes adicionais estão disponíveis – delineado e preenchido: -### Outlined +### Delineado {{"demo": "pages/components/alert/OutlinedAlerts.js"}} @@ -63,7 +63,7 @@ Você pode usar o componente SnackBar para [exibir um aviso na tela](/components ## Cor -A propriedade `color` substituirá a cor padrão para a gravidade especificada. +A propriedade `color` irá sobrescrever a cor padrão para a gravidade especificada. {{"demo": "pages/components/alert/ColorAlerts.js"}} @@ -73,6 +73,6 @@ A propriedade `color` substituirá a cor padrão para a gravidade especificada. Quando o componente é exibido de forma dinâmica, o conteúdo é automaticamente anunciado pela maioria dos leitores de tela. No momento, os leitores de tela não informam aos usuários sobre alertas que estão presentes quando a página carrega. -O uso de cores para adicionar significado apenas fornece uma indicação visual, que não vai ser transmitida para usuários de tecnologias assistivas, como leitores de tela. Certifique-se de que a informação indicada pela cor seja clara a partir do próprio próprio conteúdo (por exemplo, o texto visível), ou esteja incluída através de meios alternativos, como um texto oculto adicional. +O uso de cores para adicionar significado apenas fornece uma indicação visual, que não vai ser transmitida para usuários de tecnologias assistivas, como leitores de tela. Certifique-se de que a informação indicada pela cor seja clara a partir do próprio conteúdo (por exemplo, o texto visível), ou esteja incluída através de meios alternativos, como um texto oculto adicional. -As ações devem ter um índice de tabulação igual a 0 para que possam ser alcançadas por usuários que usam apenas o teclado. +As ações devem ter um índice de tabulação igual a 0 para que possam ser acessíveis por usuários que usam apenas o teclado. 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 908831b2866200..5fb7983ffdbe6b 100644 --- a/docs/src/pages/components/app-bar/app-bar-pt.md +++ b/docs/src/pages/components/app-bar/app-bar-pt.md @@ -5,7 +5,7 @@ components: AppBar, Toolbar, Menu # Barra de Aplicativos -

A Barra de aplicativos exibe informações e ações relacionadas à tela atual.

+

A barra de aplicativos exibe informações e ações relacionadas à tela atual.

A [barra de aplicativos superior](https://material.io/design/components/app-bars-top.html) provê conteúdo e ações relacionados à tela atual. Ela é utilizada para a identidade visual, títulos de tela, navegação, e ações. @@ -21,11 +21,11 @@ Um campo de busca principal. {{"demo": "pages/components/app-bar/PrimarySearchAppBar.js", "bg": true}} -## App Bar com menu +## Barra de Aplicativos com menu {{"demo": "pages/components/app-bar/MenuAppBar.js", "bg": true}} -## App Bar com campo de busca +## Barra de Aplicativos com campo de busca Uma barra de pesquisa na lateral. diff --git a/docs/src/pages/components/autocomplete/autocomplete-aa.md b/docs/src/pages/components/autocomplete/autocomplete-aa.md index a9fd4730a52145..b21116c00f9bf5 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-aa.md +++ b/docs/src/pages/components/autocomplete/autocomplete-aa.md @@ -136,29 +136,37 @@ crwdns131912:0crwdne131912:0 crwdns131914:0crwdne131914:0 crwdns131916:0crwdne131916:0 -## crwdns106437:0crwdne106437:0 +## crwdns133018:0crwdne133018:0 -crwdns131918:0crwdne131918:0 +### crwdns133020:0crwdne133020:0 -crwdns131920:0crwdne131920:0 +crwdns133022:0crwdne133022:0 crwdns133024:0crwdne133024:0 crwdns133026:0crwdne133026:0 -crwdns131922:0crwdne131922:0 +crwdns133028:0crwdne133028:0 + +### crwdns133030:0crwdne133030:0 + +crwdns133032:0crwdne133032:0 + +crwdns133034:0crwdne133034:0 + +crwdns133036:0crwdne133036:0 ## crwdns106445:0crwdne106445:0 -crwdns131924:0crwdne131924:0 +crwdns133038:0crwdne133038:0 -crwdns131926:0crwdne131926:0 +crwdns133040:0crwdne133040:0 ## crwdns106451:0crwdne106451:0 -crwdns131928:0crwdne131928:0 crwdns131930:0crwdne131930:0 +crwdns133042:0crwdne133042:0 crwdns133044:0crwdne133044:0 ```js crwdns104588:0{ createFilterOptions }crwdne104588:0 ``` -### `crwdns131932:0crwdne131932:0` +### `crwdns133046:0crwdne133046:0` #### crwdns130368:0crwdne130368:0 @@ -172,19 +180,19 @@ crwdns104588:0{ createFilterOptions }crwdne104588:0 #### crwdns130372:0crwdne130372:0 -crwdns131934:0crwdne131934:0 +crwdns133048:0crwdne133048:0 -crwdns131936:0crwdne131936:0 +crwdns133050:0crwdne133050:0 ```js crwdns104612:0{filterOptions}crwdne104612:0 ``` -crwdns131938:0crwdne131938:0 +crwdns133052:0crwdne133052:0 -### crwdns131940:0crwdne131940:0 +### crwdns133054:0crwdne133054:0 -crwdns131942:0crwdne131942:0 crwdns131944:0crwdne131944:0 +crwdns133056:0crwdne133056:0 crwdns133058:0crwdne133058:0 ```jsx crwdns104620:0{ inputValue }crwdnd104620:0{filterOptions}crwdne104620:0 @@ -192,19 +200,19 @@ crwdns104620:0{ inputValue }crwdnd104620:0{filterOptions}crwdne104620:0 ## crwdns106467:0crwdne106467:0 -crwdns131946:0crwdne131946:0 crwdns131948:0crwdne131948:0 +crwdns133060:0crwdne133060:0 crwdns133062:0crwdne133062:0 -crwdns131950:0crwdne131950:0 +crwdns133064:0crwdne133064:0 ## crwdns106475:0crwdne106475:0 -### crwdns131952:0crwdne131952:0 +### crwdns133066:0crwdne133066:0 -crwdns131954:0crwdne131954:0 crwdns131956:0crwdne131956:0 +crwdns133068:0crwdne133068:0 crwdns133070:0crwdne133070:0 -crwdns131958:0crwdne131958:0 +crwdns133072:0crwdne133072:0 -crwdns131960:0crwdne131960:0 crwdns131962:0crwdne131962:0 +crwdns133074:0crwdne133074:0 crwdns133076:0crwdne133076:0 - crwdns131724:0crwdne131724:0 crwdns131726:0crwdne131726:0 crwdns131728:0crwdne131728:0 - crwdns131730:0crwdne131730:0 @@ -213,16 +221,16 @@ crwdns131960:0crwdne131960:0 crwdns131962:0crwdne131962:0 autoComplete: 'new-password', }}crwdne131732:0 -### crwdns131964:0crwdne131964:0 +### crwdns133078:0crwdne133078:0 -crwdns131966:0crwdne131966:0 crwdns131968:0crwdne131968:0 +crwdns133080:0crwdne133080:0 crwdns133082:0crwdne133082:0 -### crwdns132782:0crwdne132782:0 +### crwdns133084:0crwdne133084:0 -crwdns132784:0crwdne132784:0 crwdns132786:0crwdne132786:0 +crwdns133086:0crwdne133086:0 crwdns133088:0crwdne133088:0 ## crwdns106481:0crwdne106481:0 -crwdns132788:0crwdne132788:0 +crwdns133090:0crwdne133090:0 -crwdns132790:0crwdne132790:0 crwdns132792:0crwdne132792:0 \ No newline at end of file +crwdns133092:0crwdne133092:0 crwdns133094:0crwdne133094: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 index 72c78a32b56346..1f92c47282716e 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-de.md +++ b/docs/src/pages/components/autocomplete/autocomplete-de.md @@ -136,7 +136,15 @@ Fancy smaller inputs? Verwenden Sie die `size` Prop. {{"demo": "pages/components/autocomplete/Sizes.js"}} -## Angepasste Autovervollständigung +## Customizations + +### Custom input + +The `renderInput` prop allows you to customize the rendered input. The first argument of this render prop contains props that you need to forward. Pay specific attention to the `ref` and `inputProps` keys. + +{{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} + +### GitHub's picker Diese Demo reproduziert die Label-Auswahl von GitHub: diff --git a/docs/src/pages/components/autocomplete/autocomplete-es.md b/docs/src/pages/components/autocomplete/autocomplete-es.md index 9467899eca49d7..882cfc82630b04 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-es.md +++ b/docs/src/pages/components/autocomplete/autocomplete-es.md @@ -12,7 +12,7 @@ El widget es útil para establecer el valor de un cuadro de texto de una sola l 1. El valor para el cuadro de texto debe elegirse de un conjunto predefinido de valores permitidos, por ejemplo, un campo de ubicación debe contener un nombre de ubicación válido: [cuadro combinado](#combo-box). 2. El cuadro de texto puede contener cualquier valor arbitrario, pero es ventajoso sugerir posibles valores al usuario, por ejemplo, un campo de búsqueda puede sugerir búsquedas similares o anteriores para ahorrarle tiempo al usuario: [gratis solo](#free-solo). -It's meant to be an improved version of the "react-select" and "downshift" packages. +Esto pretende ser una versión mejorada de los paquetes "react-select" y "downshift". ## Combo box @@ -20,7 +20,7 @@ El valor debe elegirse de un conjunto predefinido de valores permitidos. {{"demo": "pages/components/autocomplete/ComboBox.js"}} -### Playground +### Campo de pruebas Cada uno de los siguientes ejemplos demuestran una característica del componente Autocompletado. @@ -28,18 +28,18 @@ Cada uno de los siguientes ejemplos demuestran una característica del component ### Selección de País -Choose one of the 248 countries. +Selecciona uno de los 248 países. {{"demo": "pages/components/autocomplete/CountrySelect.js"}} -### Controllable states +### Estados controlables -The component has two states that can be controlled: +El componente tiene dos estados que pueden ser controlados: -1. the "value" state with the `value`/`onChange` props combination. This state represents the value selected by the user, for instance when pressing Enter. -2. the "input value" state with the `inputValue`/`onInputChange` props combination. This state represents the value displayed in the textbox. +1. el "valor" del estado con la combinación de props `value`/`onChange`. Este estado representa el valor seleccionado por el usuario, por ejemplo al pulsar Enter. +2. el estado "valor de entrada" con la combinación de props `inputValue`/`onInputChange`. Este estado representa el valor mostrado en el campo de texto. -> ⚠️ These two state are isolated, they should be controlled independently. +> ⚠️ Estos dos estados son aislados, deben ser controlados de forma independiente. {{"demo": "pages/components/autocomplete/ControllableStates.js"}} @@ -47,38 +47,38 @@ The component has two states that can be controlled: Setear `freeSolo` a true, para que el cuadro de texto pueda contener cualquier valor arbitrario. -### Search input +### Campo de búsqueda -The prop is designed to cover the primary use case of a **search input** with suggestions, e.g. Google search or react-autowhatever. +La propiedad está diseñada para cubrir el principal caso de uso de una **caja de búsqueda** con sugerencias, ej: Google Search o react-autowhatever. {{"demo": "pages/components/autocomplete/FreeSolo.js"}} -### Creatable +### Creable -If you intend to use this mode for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting: +Si pretendes usar este modo para una experiencia similar a un [combo box](#combo-box) (una versión mejora de un selector de elementos) te recomendamos configurar: -- `selectOnFocus` to helps the user clear the selected value. -- `clearOnBlur` to helps the user to enter a new value. -- `handleHomeEndKeys` to move focus inside the popup with the Home and End keys. -- A last option, for instance `Add "YOUR SEARCH"`. +- `selectOnFocus` que ayuda al usuario a borrar el valor seleccionado. +- `clearOnBlur` que ayuda a que el usuario introduzca un nuevo valor. +- `handleHomeEndKeys` para mover el foco dentro de la ventana emergente con las claves Home y End. +- Una última opción, por ejemplo `Agregar "SU BÚSQUEDA"`. {{"demo": "pages/components/autocomplete/FreeSoloCreateOption.js"}} -You could also display a dialog when the user wants to add a new value. +También puedes mostrar un diálogo cuando el usuario quiere añadir un nuevo valor. {{"demo": "pages/components/autocomplete/FreeSoloCreateOptionDialog.js"}} -## Grouped +## Agrupado {{"demo": "pages/components/autocomplete/Grouped.js"}} -## Disabled options +## Deshabilitar opciones {{"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 minus all the props related to the rendering of JSX. The Autocomplete component uses this hook internally. +Para la personalización avanzada de casos de uso, exponemos un hook `useAutocomplete()`. Acepta casi las mismas opciones que el componente Autocompletar menus las propiedades relacionadas al renderizado de JSX. El componente Autocompletar usa este hook internamente. ```jsx import useAutocomplete from '@material-ui/lab/useAutocomplete'; @@ -88,35 +88,35 @@ import useAutocomplete from '@material-ui/lab/useAutocomplete'; {{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} -### Customized hook +### Hook personalizado {{"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. +Dirígete a la sección [Autocompletar Personalizado](#customized-autocomplete) para un ejemplo de personalización con el componente `Autcompletar` en vez del hook. -## Asynchronous requests +## Peticiones asíncronas {{"demo": "pages/components/autocomplete/Asynchronous.js"}} -### Google Maps place +### Lugar de Google Maps -A customized UI for Google Maps Places Autocomplete. +Una interfaz de usuario personalizado para el autocompletar de Google Maps Places. {{"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. +Para esta demostración, tenemos que cargar la API de [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial). -> ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. +> ⚠️ Antes de empezar a usar la API de Google Maps JavaScript, debes registrarte y crear una cuenta de facturación. -## Multiple values +## Valores múltiples -Also known as tags, the user is allowed to enter more than one value. +También conocidos como etiquetas, el usuario puede introducir más de un valor. {{"demo": "pages/components/autocomplete/Tags.js"}} -### Fixed options +### Opciones fijas -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. +En caso de que necesites bloquear ciertas etiquetas de modo que no puedan ser removidas en la interfaz, se puede deshabilitar los chips. {{"demo": "pages/components/autocomplete/FixedTags.js"}} @@ -124,9 +124,9 @@ In the event that you need to lock certain tag so that they can't be removed in {{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} -### Limit tags +### Limitar las etiquetas -You can use the `limitTags` prop to limit the number of displayed options when not focused. +Puedes utilizar la propiedad `limitTags` para limitar el número de opciones que aparecen cuando no se selecciona. {{"demo": "pages/components/autocomplete/LimitTags.js"}} @@ -136,13 +136,21 @@ Fancy smaller inputs? Use the `size` prop. {{"demo": "pages/components/autocomplete/Sizes.js"}} -## Autocompletado personalizado +## Customizations -This demo reproduces the GitHub's label picker: +### Custom input + +The `renderInput` prop allows you to customize the rendered input. The first argument of this render prop contains props that you need to forward. Pay specific attention to the `ref` and `inputProps` keys. + +{{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} + +### GitHub's picker + +Esta demo reproduce el selector de etiquetas de GitHub: {{"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. +Dirígete a la sección de [Hook personalizado](#customized-hook) para un ejemplo de personalización con el hook `useAutocomplete` en lugar del componente. ## Destacados @@ -152,7 +160,7 @@ La siguiente demostración se basa en [autosuggest-highlight](https://github.com ## Filtro personalizado -The component exposes a factory to create a filter method that can provided to the `filterOptions` prop. You can use it to change the default option filter behavior. +El componente expone una factoría para crear un método de filtrado para proveer a la propiedad `filterOptions`. Puede usarse para cambiar el comportamiento de filtrado por defecto. ```js import { createFilterOptions } from '@material-ui/lab/Autocomplete'; @@ -163,18 +171,18 @@ import { createFilterOptions } from '@material-ui/lab/Autocomplete'; #### Argumentos 1. `config` (*Object* [optional]): - - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. - - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. - - `config.limit` (*Number* [optional]): Default to null. Limit the number of suggested options to be shown. For example, if `config.limit` is `100`, only the first `100` matching options are shown. It can be useful if a lot of options match and virtualization wasn't set up. - - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. - - `config.stringify` (*Func* [optional]): Controls how an option is converted into a string so that it can be matched against the input text fragment. - - `config.trim` (*Boolean* [optional]): Default `false`. Remove trailing spaces. + - `config.ignoreAccents` (*Boolean* [optional]): Por defecto a `true`. Elimina los acentos. + - `config.ignoreCase` (*Boolean* [optional]): Por defecto a `true`. En minúsculas todo. + - `config.limit` (*Number* [optional]): Por defecto a null. Limita el número de opciones sugeridas para ser mostrado. Por ejemplo, si `config.limit` es `100`, sólo las primeras `100` coincidencias se muestran. Esto puede ser útil si existe muchas coincidencias y la virtualización no estaba establecida. + - `config.matchFrom` (*'any' | 'start'* [optional]): Por defecto a `'any'`. + - `config.stringify` (*Func* [optional]): Controla cómo una opción se convierte en una cadena, de manera que se pueden combinar en contra de la entrada de texto del fragmento. + - `config.trim` (*Boolean* [optional]): Por defecto a `false`. Eliminar espacios en blanco. #### Regresa -`filterOptions`: the returned filter method can be provided directly to the `filterOptions` prop of the `Autocomplete` component, or the parameter of the same name for the hook. +`filterOptions`: método de filtro devuelto puede ser provisto directamente a la propiedad `filterOptions` del componente `Autocompletar`, o el parámetro del mismo nombre para el hook. -In the following demo, the options need to start with the query prefix: +En la siguiente demostración, las opciones que se necesitan para iniciar con la consulta prefijo: ```js const filterOptions = createFilterOptions({ @@ -189,7 +197,7 @@ const filterOptions = createFilterOptions({ ### Avanzado -For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). Por ejemplo: +Para mecanismos de filtrado más completos, como la coincidencia aproximada, se recomienda buscar en [match-sorter de](https://github.com/kentcdodds/match-sorter). Por ejemplo: ```jsx import matchSorter from 'match-sorter'; @@ -200,24 +208,24 @@ const filterOptions = (options, { inputValue }) => ``` -## Virtualization +## Virtualización -Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). +Buscar entre 10.000 opciones generadas al azar. La lista está virtualizada gracias a [react-window](https://github.com/bvaughn/react-window). {{"demo": "pages/components/autocomplete/Virtualize.js"}} ## Limitaciones -### autocomplete/autofill +### autocompletar/autorellenar -The browsers have heuristics to help the users fill the form inputs. However, it can harm the UX of the component. +Los navegadores tienen heurísticos para ayudar a los usuarios a rellenar el formulario. Sin embargo, puede dañar la experiencia de usuario del componente. -By default, the component disable the **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute. +Por defecto, el componente deshabilita la característica de **autocompletar** (recordando lo que el usuario ha escrito para un campo dado, en una sesión anterior) con el atributo `autoComplete="off"`. -However, in addition to remembering past entered values, the browser might also propose **autofill** suggestions (saved login, address, or payment details). In the event you want the avoid autofill, you can try the following: +Sin embargo, además de recordar el valor introducido anteriormente, el navegador también puede proponer sugerencias **autorellenadas** (inicio de sesión guardado, la dirección o detalles de pago). En el caso de que desees evitar el autorellenar, puedes intentar lo siguiente: -- Name the input without leaking any information the browser can use. e.g. `id="field1"` instead of `id="country"`. If you leave the id empty, the component uses a random id. -- Set `autoComplete="new-password"`: +- Nombra la entrada sin filtrar ninguna información que el navegador pueda utilizar. p.e. `id="field1"` en vez de `id="country"`. Si dejas el id de vacío, el componente utiliza un identificador aleatorio. +- Establecer `autoComplete="new-password"`: jsx Home and End keys. -- A last option, for instance `Add "YOUR SEARCH"`. +- `selectOnFocus` 帮助用户清除所选值。 +- `clearOnBlur` 帮助用户输入一个新的值。 +- `handleHomeEndKeys` 使用Home 和 End 键在弹出窗口内移动焦点。 +- 最后一个选项，例如 `Add "YOUR SEARCH"`。 {{"demo": "pages/components/autocomplete/FreeSoloCreateOption.js"}} @@ -136,7 +136,15 @@ import useAutocomplete from '@material-ui/lab/useAutocomplete'; {{"demo": "pages/components/autocomplete/Sizes.js"}} -## 自定义的自动补全组件 +## Customizations + +### Custom input + +The `renderInput` prop allows you to customize the rendered input. The first argument of this render prop contains props that you need to forward. Pay specific attention to the `ref` and `inputProps` keys. + +{{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} + +### GitHub's picker 该演示再现了GitHub的标签选择器： diff --git a/docs/src/pages/components/avatars/avatars-es.md b/docs/src/pages/components/avatars/avatars-es.md index 37e4d6b70fe60d..ac02f1703499ce 100644 --- a/docs/src/pages/components/avatars/avatars-es.md +++ b/docs/src/pages/components/avatars/avatars-es.md @@ -47,7 +47,7 @@ If there is an error loading the avatar image, the component falls back to an al {{"demo": "pages/components/avatars/FallbackAvatars.js"}} -## Grouped +## Agrupado `AvatarGroup` renders its children as a stack. diff --git a/docs/src/pages/components/avatars/avatars-pt.md b/docs/src/pages/components/avatars/avatars-pt.md index b265487bad0505..c31b4a0c88716d 100644 --- a/docs/src/pages/components/avatars/avatars-pt.md +++ b/docs/src/pages/components/avatars/avatars-pt.md @@ -5,7 +5,7 @@ components: Avatar, AvatarGroup, Badge # Avatar -

Os avatares são encontrado ao longo do material design, com usos em tudo, desde tabelas até menus de diálogo.

+

Os avatares são encontrados ao longo do material design, com usos em tudo, desde tabelas até menus de diálogo.

## Avatares com imagens @@ -37,7 +37,7 @@ Se você precisa de avatares com cantos quadrados ou arredondados, use a proprie {{"demo": "pages/components/avatars/VariantAvatars.js"}} -## Fallbacks +## Contingências (Fallbacks) Se houver um erro ao carregar a imagem do avatar, o componente escolhe uma alternativa na seguinte ordem: diff --git a/docs/src/pages/components/backdrop/backdrop-pt.md b/docs/src/pages/components/backdrop/backdrop-pt.md index 034f95a21c2c44..bde5895658cb55 100644 --- a/docs/src/pages/components/backdrop/backdrop-pt.md +++ b/docs/src/pages/components/backdrop/backdrop-pt.md @@ -1,11 +1,11 @@ --- -title: Componente React para Plano de Fundo +title: Componente React para Pano de Fundo components: Backdrop --- # Backdrop -

O componente backdrop (plano de fundo) é usado para fornecer ênfase em um elemento específico ou partes dele.

+

O componente backdrop (pano de fundo) é usado para fornecer ênfase em um elemento específico ou partes dele.

O backdrop sinaliza para o usuário uma mudança de estado dentro do aplicativo e pode ser usado para criar progressos, diálogos e muito mais. Em seu formato mais simples, o componente backdrop irá adicionar uma camada escurecida sobre seu aplicativo. diff --git a/docs/src/pages/components/badges/badges-pt.md b/docs/src/pages/components/badges/badges-pt.md index 9dc3d30c446a3b..8ddd2b6ce522b0 100644 --- a/docs/src/pages/components/badges/badges-pt.md +++ b/docs/src/pages/components/badges/badges-pt.md @@ -3,9 +3,9 @@ title: Componente React para Emblemas components: Badge --- -# Badge (Emblema) +# Emblema -

Badge gera um pequeno emblema no canto superior direito de seu(s) filho(s).

+

O componente Badge gera um pequeno emblema no canto superior direito de seu(s) filho(s).

## Emblemas básicos @@ -13,7 +13,7 @@ Exemplos de emblemas contendo texto, usando cores primárias e secundárias. O e {{"demo": "pages/components/badges/SimpleBadge.js"}} -## Emblemas Customizados +## Emblemas customizados Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/). @@ -31,7 +31,7 @@ O emblema se esconde automaticamente quando o badgeContent é zero. Você pode s ## Valor máximo -Você pode usar a propriedade `max` para limitar o valor do conteúdo do selo. +Você pode usar a propriedade `max` para limitar o valor do conteúdo do emblema. {{"demo": "pages/components/badges/BadgeMax.js"}} @@ -41,13 +41,13 @@ A propriedade `dot` altera um emblema para um pequeno ponto. Isto pode ser usado {{"demo": "pages/components/badges/DotBadge.js"}} -## Sobreposição de emblema +## Alinhamento do emblema Você pode usar a propriedade `overlap` para colocar o emblema em relação ao canto do elemento envolvido. {{"demo": "pages/components/badges/BadgeOverlap.js"}} -## Alinhamento de emblema +## Alinhamento do emblema Você pode usar a propriedade `anchorOrigin` para mover o emblema para qualquer canto do elemento envolvido. diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation-pt.md b/docs/src/pages/components/bottom-navigation/bottom-navigation-pt.md index 586934d2dfe13c..c24d49b58a16ce 100644 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation-pt.md +++ b/docs/src/pages/components/bottom-navigation/bottom-navigation-pt.md @@ -3,19 +3,19 @@ title: Componente React para Navegação inferior components: BottomNavigation, BottomNavigationAction --- -# Navegação Inferior +# Navegação inferior

A barra de navegação inferior permite navegar entre os principais destinos em um aplicativo.

-Barras de [Navegação Inferior](https://material.io/design/components/bottom-navigation.html) apresentam de três a cinco destinos na parte inferior da tela. Cada destino é apresentado por um ícone e opcionalmente um rótulo de texto (text label). Quando um botão de navegação é pressionado, o usuário é levado ao destino associado com ícone. +Barras de [navegação inferior](https://material.io/design/components/bottom-navigation.html) apresentam de três a cinco destinos na parte inferior da tela. Cada destino é apresentado por um ícone e opcionalmente um rótulo de texto. Quando um ícone de navegação inferior é pressionado, o usuário é levado ao destino associado com ícone. -## Navegação Inferior +## Navegação inferior Quando existir apenas **três** ações, exiba ambos, os ícones e rótulos de texto. {{"demo": "pages/components/bottom-navigation/SimpleBottomNavigation.js", "bg": true}} -## Navegação Inferior sem rótulo +## Navegação inferior sem rótulo Se existir **quatro** ou **cinco** ações, exiba os destinos inativos somente com ícone. diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-pt.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-pt.md index 82a3fed1a5c7ae..866ccb02f4153a 100644 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-pt.md +++ b/docs/src/pages/components/breadcrumbs/breadcrumbs-pt.md @@ -1,37 +1,37 @@ --- -title: Componente React para Breadcrumbs +title: Componente React para Navegação estrutural components: Breadcrumbs, Link, Typography --- -# Breadcrumbs +# Navegação estrutural -

Breadcrumbs permitem aos usuários fazer seleções em uma gama de valores.

+

Navegação estrutural permite aos usuários fazer seleções em um intervalo de caminhos.

-## Breadcrumbs simples +## Navegação estrutural simples {{"demo": "pages/components/breadcrumbs/SimpleBreadcrumbs.js"}} -## Último breadcrumb ativo +## Último caminho ativo -Mantenha o último caminho de navegação interativo. +Mantendo o último caminho de navegação interativo. {{"demo": "pages/components/breadcrumbs/ActiveLastBreadcrumb.js"}} -## Separador personalizado +## Separador customizado No exemplo a seguir, nós usamos duas strings separadoras, e um ícone SVG. {{"demo": "pages/components/breadcrumbs/CustomSeparator.js"}} -## Breadcrumbs com ícones +## Navegação estrutural com ícones {{"demo": "pages/components/breadcrumbs/IconBreadcrumbs.js"}} -## Breadcrumbs colapsado +## Navegação estrutural retraída {{"demo": "pages/components/breadcrumbs/CollapsedBreadcrumbs.js"}} -## Breadcrumbs personalizado +## Navegação estrutural customizada Aqui está um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/). @@ -51,4 +51,4 @@ A acessibilidade neste componente conta com: - O conjunto de links são estruturados usando uma lista ordenada (elemento `
    `). - Para prevenir que os leitores de tela pronunciem os separadores visuais entre os links, eles são escondidos com `aria-hidden`. -- Um elemento `nav` rotulado com `aria-label` identifica a estrutura como uma trilha breadcrumb e faz uma marcação na navegação para facilitar a localização. \ No newline at end of file +- Um elemento `nav` rotulado com `aria-label` identifica a estrutura como uma trilha de navegação estrutural e faz uma marcação na navegação para facilitar a localização. \ No newline at end of file diff --git a/docs/src/pages/components/button-group/button-group-zh.md b/docs/src/pages/components/button-group/button-group-zh.md index c089175ebf8003..979c1c279b9f6d 100644 --- a/docs/src/pages/components/button-group/button-group-zh.md +++ b/docs/src/pages/components/button-group/button-group-zh.md @@ -7,25 +7,25 @@ components: Button, ButtonGroup

    ButtonGroup 组件可用于对相关按钮进行分组。

    -## 基本的按钮组 +## Basic button group 基本的按钮组 {{"demo": "pages/components/button-group/BasicButtonGroup.js"}} -## 大小和颜色 +## Basic button group 大小和颜色 {{"demo": "pages/components/button-group/GroupSizesColors.js"}} -## 垂直组 +## Vertical group 垂直组 {{"demo": "pages/components/button-group/GroupOrientation.js"}} -## Split button +## Split button 分体式按钮 -`ButtonGroup` 也可用于创建 split button。 下拉列表可以用于更改按钮相关的操作（如本例所示），或者用于立即出发一个相关的操作。 +`ButtonGroup` 也可用于创建 split button。 下拉列表可以用于更改按钮相关的操作（如本例所示），或者用于立即触发一个相关的操作。 {{"demo": "pages/components/button-group/SplitButton.js"}} -## 禁用 elevation +## Disabled elevation 禁用 elevation 你也可以使用属性 `disableElevation` 属性来消除实心按钮的立体效果。 diff --git a/docs/src/pages/components/buttons/buttons-aa.md b/docs/src/pages/components/buttons/buttons-aa.md index aad1f4c2018c02..132e9618819733 100644 --- a/docs/src/pages/components/buttons/buttons-aa.md +++ b/docs/src/pages/components/buttons/buttons-aa.md @@ -44,65 +44,75 @@ crwdns108303:0crwdne108303:0 crwdns108305:0crwdne108305:0 -## crwdns108213:0crwdne108213:0 +## crwdns132908:0crwdne132908:0 -crwdns108307:0crwdne108307:0 +crwdns132910:0crwdne132910:0 -## crwdns108217:0crwdne108217:0 +```jsx +crwdns132912:0crwdne132912:0 +``` -crwdns108309:0crwdne108309:0 crwdns108311:0crwdne108311:0 +crwdns132914:0crwdne132914:0 -crwdns108313:0crwdne108313:0 +## crwdns132916:0crwdne132916:0 -## crwdns108225:0crwdne108225:0 +crwdns132918:0crwdne132918:0 -crwdns108315:0crwdne108315:0 crwdns108317:0crwdne108317:0 +## crwdns132920:0crwdne132920:0 -crwdns108319:0crwdne108319:0 +crwdns132922:0crwdne132922:0 crwdns132924:0crwdne132924:0 -## crwdns108233:0crwdne108233:0 +crwdns132926:0crwdne132926:0 -crwdns108321:0crwdne108321:0 +## crwdns132928:0crwdne132928:0 -crwdns108323:0crwdne108323:0 +crwdns132930:0crwdne132930:0 crwdns132932:0crwdne132932:0 -crwdns108325:0crwdne108325:0 +crwdns132934:0crwdne132934:0 -## crwdns108241:0crwdne108241:0 +## crwdns132936:0crwdne132936:0 -crwdns108327:0crwdne108327:0 crwdns108329:0crwdne108329:0 +crwdns132938:0crwdne132938:0 -crwdns108331:0crwdne108331:0 +crwdns132940:0crwdne132940:0 -crwdns132598:0crwdne132598:0 +crwdns132942:0crwdne132942:0 -## crwdns108251:0crwdne108251:0 +## crwdns132944:0crwdne132944:0 -crwdns108335:0crwdne108335:0 crwdns108337:0crwdne108337:0 +crwdns132946:0crwdne132946:0 crwdns132948:0crwdne132948:0 -crwdns108339:0crwdne108339:0 +crwdns132950:0crwdne132950:0 -## crwdns108259:0crwdne108259:0 +crwdns132952:0crwdne132952:0 -crwdns108341:0crwdne108341:0 crwdns108343:0crwdne108343:0 crwdns108345:0crwdne108345:0 crwdns108347:0crwdne108347:0 crwdns108349:0crwdne108349:0 +## crwdns132954:0crwdne132954:0 -crwdns108351:0crwdne108351:0 +crwdns132956:0crwdne132956:0 crwdns132958:0crwdne132958:0 -## crwdns108273:0crwdne108273:0 +crwdns132960:0crwdne132960:0 + +## crwdns132962:0crwdne132962:0 + +crwdns132964:0crwdne132964:0 crwdns132966:0crwdne132966:0 crwdns132968:0crwdne132968:0 crwdns132970:0crwdne132970:0 crwdns132972:0crwdne132972:0 + +crwdns132974:0crwdne132974:0 + +## crwdns132976:0crwdne132976:0 ### crwdns108275:0crwdne108275:0 -crwdns108353:0crwdne108353:0 +crwdns132978:0crwdne132978:0 -crwdns108355:0crwdne108355:0 +crwdns132980:0crwdne132980:0 1. crwdns103698:0crwdne103698:0 crwdns103700:0crwdne103700:0 ```css - crwdns105395:0crwdne105395:0 + crwdns132982:0crwdne132982:0 ``` -crwdns108357:0crwdne108357:0 +crwdns132984:0crwdne132984:0 - crwdns130850:0crwdne130850:0 - crwdns103708:0crwdne103708:0 @@ -110,7 +120,7 @@ crwdns108357:0crwdne108357:0 2. crwdns103710:0crwdne103710:0 crwdns103712:0crwdne103712:0 ```jsx - crwdns105399:0{{ cursor: 'not-allowed' }}crwdnd105399:0{Link}crwdne105399:0 + crwdns132986:0{{ cursor: 'not-allowed' }}crwdnd132986:0{Link}crwdne132986:0 ``` -crwdns108359:0crwdne108359:0 \ No newline at end of file +crwdns132988:0crwdne132988:0 \ No newline at end of file diff --git a/docs/src/pages/components/buttons/buttons-de.md b/docs/src/pages/components/buttons/buttons-de.md index 2c206bc4bc6b9b..0da92d704b78d7 100644 --- a/docs/src/pages/components/buttons/buttons-de.md +++ b/docs/src/pages/components/buttons/buttons-de.md @@ -44,6 +44,16 @@ Outlined Buttons sind auch eine Alternative mit geringerer Betonung als Containe {{"demo": "pages/components/buttons/OutlinedButtons.js"}} +## Handling clicks + +All components accept an `onClick` handler that is applied to the root DOM element. + +```jsx + +``` + +Note that the documentation [avoids](/guides/api/#native-properties) mentioning native props (there are a lot) in the API section of the components. + ## Upload-Button {{"demo": "pages/components/buttons/UploadButtons.js"}} @@ -74,17 +84,17 @@ Hier sind einige Beispiele, wie man die Komponente anpassen kann. Mehr dazu erfa {{"demo": "pages/components/buttons/CustomizedButtons.js", "defaultCodeOpen": false}} -🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/button). +🎨 Wenn Sie nach Inspiration suchen, sehen sie sich [MUI Treasury's Anpassungs-Beispiele](https://mui-treasury.com/styles/button) an. ## Komplexe Buttons -Die Text Buttons, die Contained Buttons, die Floatin Action Buttons und die Icon Buttons basieren auf derselben Komponente: der `ButtonBase`. Sie können diese Komponente der unteren Ebene nutzen, um benutzerdefinierte Interaktionen zu erstellen. +Die Text Buttons, die Contained Buttons, die Floatin Action Buttons und die Icon Buttons basieren auf derselben Komponente: der `ButtonBase`. Sie können die Vorteile dieser grundlegenden Komponente zum erstellen von benutzerdefinierten Interaktionen nutzen. {{"demo": "pages/components/buttons/ButtonBase.js"}} ## Drittanbieter-Routing Bibliothek -Ein häufiger Anwendungsfall ist die Verwendung eines Buttons, um eine Navigation zu einer neuen Seite auszulösen. Die `ButtonBase` Komponente stellt eine Eigenschaft für diesen Anwendungsfall bereit: `component`. Für bestimmte Fokus-Polyfills erfordert `ButtonBase` jedoch den DOM-Knoten der bereitgestellten Komponente. Dies wird erreicht, indem der Komponente ein Ref zugeordnet wird und erwartet wird, dass die Komponente diesen Ref an den zugrunde liegenden DOM-Knoten weiterleitet. Given that many of the interactive components rely on `ButtonBase`, you should be able to take advantage of it everywhere. +Ein häufig gebrauchtes Feature ist das Wechseln zu einer anderen Seite als Button-Aktion. Die `ButtonBase` Komponente stellt eine Eigenschaft für diesen Anwendungsfall bereit: `component`. Für bestimmte Fokus-Polyfills erfordert `ButtonBase` jedoch den DOM-Knoten der bereitgestellten Komponente. Dies wird erreicht, indem der Komponente ein Ref zugeordnet wird und erwartet wird, dass die Komponente diesen Ref an den zugrunde liegenden DOM-Knoten weiterleitet. Given that many of the interactive components rely on `ButtonBase`, you should be able to take advantage of it everywhere. Hier ist ein [Integrationsbeispiel mit react-router](/guides/composition/#button). diff --git a/docs/src/pages/components/buttons/buttons-es.md b/docs/src/pages/components/buttons/buttons-es.md index e4b2c96e11268c..1212a95e28be08 100644 --- a/docs/src/pages/components/buttons/buttons-es.md +++ b/docs/src/pages/components/buttons/buttons-es.md @@ -44,6 +44,16 @@ Los botones delineados también son una alternativa de menos énfasis que los bo {{"demo": "pages/components/buttons/OutlinedButtons.js"}} +## Handling clicks + +All components accept an `onClick` handler that is applied to the root DOM element. + +```jsx + +``` + +Note that the documentation [avoids](/guides/api/#native-properties) mentioning native props (there are a lot) in the API section of the components. + ## Botón de subida {{"demo": "pages/components/buttons/UploadButtons.js"}} diff --git a/docs/src/pages/components/buttons/buttons-fr.md b/docs/src/pages/components/buttons/buttons-fr.md index 7ca91e4dced1c6..f986760812ca5c 100644 --- a/docs/src/pages/components/buttons/buttons-fr.md +++ b/docs/src/pages/components/buttons/buttons-fr.md @@ -44,6 +44,16 @@ Les boutons surbrillance sont également une alternative moins importante que le {{"demo": "pages/components/buttons/OutlinedButtons.js"}} +## Handling clicks + +All components accept an `onClick` handler that is applied to the root DOM element. + +```jsx + +``` + +Note that the documentation [avoids](/guides/api/#native-properties) mentioning native props (there are a lot) in the API section of the components. + ## Upload button {{"demo": "pages/components/buttons/UploadButtons.js"}} diff --git a/docs/src/pages/components/buttons/buttons-ja.md b/docs/src/pages/components/buttons/buttons-ja.md index 046d3e2aa42f8a..56e5160a41c98b 100644 --- a/docs/src/pages/components/buttons/buttons-ja.md +++ b/docs/src/pages/components/buttons/buttons-ja.md @@ -44,6 +44,16 @@ Outlined buttonは、Contained buttonと比べると強調が弱く、 Text butt {{"demo": "pages/components/buttons/OutlinedButtons.js"}} +## Handling clicks + +All components accept an `onClick` handler that is applied to the root DOM element. + +```jsx + +``` + +Note that the documentation [avoids](/guides/api/#native-properties) mentioning native props (there are a lot) in the API section of the components. + ## Upload button {{"demo": "pages/components/buttons/UploadButtons.js"}} @@ -54,23 +64,23 @@ Outlined buttonは、Contained buttonと比べると強調が弱く、 Text butt {{"demo": "pages/components/buttons/ButtonSizes.js"}} -## アイコンとラベルの付いたButton +## Buttons with icons and label -プレーンテキストよりもロゴを認識しやすいため、アプリケーションのUXを向上させるために特定のボタンのアイコンを表示したい場合があります。 たとえば、削除ボタンがある場合は、ゴミ箱アイコンでラベルを付けることができます。 +ロゴはプレーンテキストよりも認識しやすいため、ボタンにアイコンを追加してアプリケーションのUXを強化したい場合があります。 たとえば、削除ボタンにごみ箱アイコンを付けるような場合です。 {{"demo": "pages/components/buttons/IconLabelButtons.js"}} ## Icon Buttons -アイコンボタンは通常、アプリバーとツールバーにあります。 +アイコンだけのボタンは、App BarやToolbarでよく使われます。 -アイコンは、アイテムへの星の追加や削除など、単一の選択肢を選択または選択解除できるトグルボタンにも適しています。 +アイコンは、アイテムを一つ選択したり、アイテムに星を追加または削除するなど選択/解除できるトグルボタンにも適しています。 {{"demo": "pages/components/buttons/IconButtons.js"}} ## カスタムButton -コンポーネントのカスタマイズの例を次に示します。 詳細については、 [overrides documentation page](/customization/components/)を参照してください。 +コンポーネントのカスタマイズの例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。 {{"demo": "pages/components/buttons/CustomizedButtons.js", "defaultCodeOpen": false}} diff --git a/docs/src/pages/components/buttons/buttons-pt.md b/docs/src/pages/components/buttons/buttons-pt.md index 32b39ad3157ff4..41685cdb402139 100644 --- a/docs/src/pages/components/buttons/buttons-pt.md +++ b/docs/src/pages/components/buttons/buttons-pt.md @@ -44,6 +44,16 @@ Botões delineados são uma alternativa de menor ênfase comparado com botões c {{"demo": "pages/components/buttons/OutlinedButtons.js"}} +## Handling clicks + +All components accept an `onClick` handler that is applied to the root DOM element. + +```jsx + +``` + +Note that the documentation [avoids](/guides/api/#native-properties) mentioning native props (there are a lot) in the API section of the components. + ## Botão de Upload {{"demo": "pages/components/buttons/UploadButtons.js"}} @@ -54,13 +64,13 @@ Gosta de botões maiores ou menores? Use a propriedade `size`. {{"demo": "pages/components/buttons/ButtonSizes.js"}} -## Botões com ícones e rótulo +## Botões com ícones e "Label" Às vezes você pode querer ter ícones para determinados botão para melhorar o UX do aplicativo como reconhecemos logotipos mais facilmente do que o texto sem formatação. Por exemplo, se você tem um botão com a açõo de "deletar" você pode rotulá-lo com um ícone do caixote de lixo. {{"demo": "pages/components/buttons/IconLabelButtons.js"}} -## Botões de Ícone +## Botões de Icone Botões de ícones são comumente encontrados em barras de aplicativos e barras de ferramentas. @@ -76,7 +86,7 @@ Aqui estão alguns exemplos de customização do componente. Você pode aprender 🎨 Se você está procurando inspiração, você pode verificar [os exemplos de customização de MUI Treasury](https://mui-treasury.com/styles/button). -## Botões Complexos +## Botões complexos O botões de texto, botões contidos, botões de ação flutuante e ícone botões são construídos em cima do mesmo componente: O componente `ButtonBase `. Você pode tirar vantagem deste componente de nível mais abastrato para construir interações personalizadas. @@ -92,9 +102,9 @@ Aqui está um [exemplo de integração com react-router](/guides/composition/#bu ### Propriedade CSS Cursor not-allowed -O componente ButtonBase define a propriedade CSS `pointer-events: none;` por padrão em botões desabilitados, o que conflita com a exibição de um cursor desabilitado. +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 a o cursor como `not-allowed`, você tem duas opções: +Se você deseja usar `not-allowed`, você tem duas opções: 1. **Apenas com CSS**. Você pode modificar os estilos aplicados no seletor de estado disabled do elemento ` +``` + +Note that the documentation [avoids](/guides/api/#native-properties) mentioning native props (there are a lot) in the API section of the components. + ## Кнопка загрузки файла {{"demo": "pages/components/buttons/UploadButtons.js"}} @@ -64,7 +74,7 @@ Fancy larger or smaller buttons? Use the `size` property. Кнопки с иконками обычно находятся на панелях навигации и на панелях инструментов. -Иконки также подходят для кнопок переключения, которые позволяют выбрать элемент или отменить выбор, например, добавление или удаление звезды для элемента. +Значки также подходят для кнопок переключения, которые позволяют выбрать элемент или отменить выбор, например, добавление или удаление звезды для элемента. {{"demo": "pages/components/buttons/IconButtons.js"}} @@ -78,7 +88,7 @@ Fancy larger or smaller buttons? Use the `size` property. ## Сложные кнопки -Текстовые кнопки, плавающие кнопки действий, блочные кнопки построены на основе одного и того же компонента: `ButtonBase`. Вы можете воспользоваться этим более низкоуровневым компонентом для создания пользовательских кнопок. +Текстовые кнопки, плавающие кнопки действий, блочные кнопки построены на основе одного и того же компонента: `ButtonBase`. Вы можете воспользоваться этим более низкоуровневым компонентом для создания пользовательских взаимодействий. {{"demo": "pages/components/buttons/ButtonBase.js"}} diff --git a/docs/src/pages/components/buttons/buttons-zh.md b/docs/src/pages/components/buttons/buttons-zh.md index 9868062f5b7ed9..6e5fb477c7f013 100644 --- a/docs/src/pages/components/buttons/buttons-zh.md +++ b/docs/src/pages/components/buttons/buttons-zh.md @@ -44,6 +44,16 @@ components: Button, IconButton, ButtonBase {{"demo": "pages/components/buttons/OutlinedButtons.js"}} +## Handling clicks + +All components accept an `onClick` handler that is applied to the root DOM element. + +```jsx + +``` + +Note that the documentation [avoids](/guides/api/#native-properties) mentioning native props (there are a lot) in the API section of the components. + ## 一个上传按钮 {{"demo": "pages/components/buttons/UploadButtons.js"}} @@ -54,39 +64,39 @@ components: Button, IconButton, ButtonBase {{"demo": "pages/components/buttons/ButtonSizes.js"}} -## 带有 icons 图标和 label 标签的按钮 +## 带有icons（图标）和 label（标签）的按钮 -有时您可能想在特定一个按钮上添加图标以增强应用程序的用户体验，因为大多数情况下我们觉得图标比纯文本更有辨识度。 例如，如果您有删除按钮，则可以使用垃圾箱图标对其进行标记。 +有时您可能希望为某个按钮添加图标以增强应用程序的用户体验，因为我们识别徽标比纯文本更容易。 例如，如果您有删除按钮，则可以使用垃圾箱图标对其进行标记。 {{"demo": "pages/components/buttons/IconLabelButtons.js"}} -## Icon Buttons 图标按钮 +## Icon Buttons（图标按钮） -图标按钮通常运用于应用栏和工具栏。 +图标按钮通常位于应用栏和工具栏中。 -图标也适用于实现单个选项的选择和或取消选择的切换按钮，例如向一个元素添加或删除星标。 +图标也适用于允许选择单个选项的切换按钮或 取消选择，例如向项目添加或删除星标。 {{"demo": "pages/components/buttons/IconButtons.js"}} -## 自定义按钮 +## Customized Buttons（自定义按钮） -以下是自定义组件的一些例子。 您可以在[重写文档页面](/customization/components/)中了解更多有关此内容的信息。 +以下是自定义组件的一些例子。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。 {{"demo": "pages/components/buttons/CustomizedButtons.js", "defaultCodeOpen": false}} -🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/button). +🎨如果你是在寻找灵感，你可以查看 [MUI Treasury's customization examples](https://mui-treasury.com/styles/button)。 -## 复杂按钮 +## Complex Buttons（复杂按钮） -文本按钮，包含按钮，浮动操作按钮和图标按钮都基于同一个组件：`ButtonBase`。 利用此较底层的组件，您可以创建一些自定义的交互操作。 +文本按钮，包含按钮，浮动操作按钮和图标按钮构建在同一组件之上：`ButtonBase`。 您可以利用此较底层的组件来构建自定义交互。 {{"demo": "pages/components/buttons/ButtonBase.js"}} -## Third-party routing library 第三方路由库 +## Third-party routing library（第三方路由库） -我们发现的一个常用案例，是用按钮来导航用户到新的页面。 你可以用 `ButtonBase` 的 `component` 属性来处理这样的事件。 然而，一些针对 `ButtonBase` 的特定 polyfills 补丁则要求该组件的 DOM 节点。 您可以尝试在组件上附加一个 ref，并且预期此组件能够将这个 ref 传递到下层 DOM 节点，通过这样的方法可以实现。 鉴于许多我们的交互式组件都基于 `ButtonBase`，您可以在很多情况下受益。 +一个常见的用例是使用按钮触发导航到新页面的操作。 `ButtonBase` 组件提供了一个处理此用例的属性：`component`。 然而，一些特定 `ButtonBase` 的代码需要所给组件的 DOM 节点。 在组件上附加一个 ref，并且预期此组件能够将这个 ref 传递到下层 DOM 节点，通过这样的方法可以实现。 鉴于我们的许多交互式组件都依赖于 `ButtonBase`，您可以在任何情况都能受益于它。 -这就有一个[与 react-router 交互的例子](/guides/composition/#button)。 +这有一个[与 react-router 交互的例子](/guides/composition/#button)。 ## 局限性 @@ -120,4 +130,4 @@ components: Button, IconButton, ButtonBase ``` -这样一来就可以支持任何元素，例如，一个 `` 元素。 \ No newline at end of file +这个方法能支持任何元素，例如，一个 `` 元素。 \ No newline at end of file diff --git a/docs/src/pages/components/cards/cards-zh.md b/docs/src/pages/components/cards/cards-zh.md index b4fb348fb46fab..c68eba379bd310 100644 --- a/docs/src/pages/components/cards/cards-zh.md +++ b/docs/src/pages/components/cards/cards-zh.md @@ -51,4 +51,4 @@ components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedi ## Customization 个性化 -🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/card). \ No newline at end of file +🎨如果你是在寻找灵感，你可以查看 [MUI Treasury's customization examples](https://mui-treasury.com/components/card)。 \ No newline at end of file diff --git a/docs/src/pages/components/checkboxes/checkboxes-pt.md b/docs/src/pages/components/checkboxes/checkboxes-pt.md index 73bb759a839f12..bdb04237041cd4 100644 --- a/docs/src/pages/components/checkboxes/checkboxes-pt.md +++ b/docs/src/pages/components/checkboxes/checkboxes-pt.md @@ -27,7 +27,7 @@ O componente `Checkbox` pode ser fornecido com um rótulo graças ao componente {{"demo": "pages/components/checkboxes/CheckboxesGroup.js"}} -## Posicionamento do Rótulo +## Label placement Você pode alterar o posicionamento do rótulo: diff --git a/docs/src/pages/components/checkboxes/checkboxes-zh.md b/docs/src/pages/components/checkboxes/checkboxes-zh.md index f4c7ac4b971ee9..60a3b6be1bd7d2 100644 --- a/docs/src/pages/components/checkboxes/checkboxes-zh.md +++ b/docs/src/pages/components/checkboxes/checkboxes-zh.md @@ -39,7 +39,7 @@ components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel {{"demo": "pages/components/checkboxes/CustomizedCheckbox.js", "defaultCodeOpen": false}} -🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/checkbox). +🎨如果你是在寻找灵感，你可以查看 [MUI Treasury's customization examples](https://mui-treasury.com/styles/checkbox)。 ## 什么时候使用 diff --git a/docs/src/pages/components/chips/chips-pt.md b/docs/src/pages/components/chips/chips-pt.md index bd123ea226d34d..23a5e12d901838 100644 --- a/docs/src/pages/components/chips/chips-pt.md +++ b/docs/src/pages/components/chips/chips-pt.md @@ -7,9 +7,9 @@ components: Chip

    Chips são elementos compactos que representam uma entrada, atributo ou ação.

    -[Chips](https://material.io/design/components/chips.html) permitirá que usuários insiram informações, façam seleções, filtrem conteúdo ou acionem gatilhos. +[Chips](https://material.io/design/components/chips.html) permitirão que usuários insiram informações, façam seleções, filtrem conteúdo ou acionem gatilhos. -Embora incluído aqui como um componente independente, o uso mais comum será em alguma forma de entrada, portanto, alguns dos comportamentos demonstrados aqui não são mostrados no contexto. +Embora incluído aqui como um componente independente, o uso mais comum será em alguma forma de entrada, portanto, alguns dos comportamentos demonstrados aqui não são mostrados considerando um contexto. ## Chip diff --git a/docs/src/pages/components/chips/chips-zh.md b/docs/src/pages/components/chips/chips-zh.md index 339d2c9dd1feca..77464d8f31df93 100644 --- a/docs/src/pages/components/chips/chips-zh.md +++ b/docs/src/pages/components/chips/chips-zh.md @@ -50,4 +50,4 @@ components: Chip ## 可访问性 -如果Chip可删除或可点击，它应该作为一个按钮而被 tab 所顺序访问。 When the Chip is focused (e.g. when tabbing) releasing (`keyup` event) `Backspace` or `Delete` will call the `onDelete` handler while releasing `Escape` will blur the Chip. \ No newline at end of file +如果Chip可删除或可点击，它应该作为一个按钮而被 tab 所顺序访问。 当纸片被聚焦时（例如在制表符时），释放（`keyup` 事件） `Backspace` 或 `Delete` 将调用 `onDelete` 处理程序，而释放 `Escape` 将模糊纸片。 \ No newline at end of file diff --git a/docs/src/pages/components/click-away-listener/click-away-listener-zh.md b/docs/src/pages/components/click-away-listener/click-away-listener-zh.md index d6c20b40f7fb55..28c4f7414a7fe8 100644 --- a/docs/src/pages/components/click-away-listener/click-away-listener-zh.md +++ b/docs/src/pages/components/click-away-listener/click-away-listener-zh.md @@ -8,7 +8,7 @@ components: ClickAwayListener

    用于检测点击事件是否发生在元素之外。 它可以监听文档中某处发生的点击事件。

    - 📦 [1.5kB 已压缩的包](/size-snapshot)。 -- ⚛️ Support portals +- ⚛️ 支持门户网站 ## 示例 @@ -24,7 +24,7 @@ components: ClickAwayListener {{"demo": "pages/components/click-away-listener/PortalClickAway.js"}} -## Leading edge +## 前缘 Leading edge 默认情况下，组件响应尾随事件 (trailing events) (点击 + 触摸结束)。 然而，您可以配置它来应对主要事件(leading events) (鼠标按下 + 触摸开始)。 diff --git a/docs/src/pages/components/css-baseline/css-baseline-pt.md b/docs/src/pages/components/css-baseline/css-baseline-pt.md index 3c8597ebca6407..415ee17938777c 100644 --- a/docs/src/pages/components/css-baseline/css-baseline-pt.md +++ b/docs/src/pages/components/css-baseline/css-baseline-pt.md @@ -4,7 +4,7 @@ components: CssBaseline, ScopedCssBaseline # CSS Baseline -

    Material-UI oferece um componente CSS Base a fim de inciar uma elegante, consistente e simples base para construir sobre.

    +

    Material-UI oferece um componente CSS Base a fim de inciar uma elegante, consistente e simples base para construção de aplicativos.

    ## Reset global diff --git a/docs/src/pages/components/css-baseline/css-baseline-zh.md b/docs/src/pages/components/css-baseline/css-baseline-zh.md index 35ce6864ffbc94..b55bb4c59a6419 100644 --- a/docs/src/pages/components/css-baseline/css-baseline-zh.md +++ b/docs/src/pages/components/css-baseline/css-baseline-zh.md @@ -6,7 +6,7 @@ components: CssBaseline, ScopedCssBaseline

    Material-UI 提供了一个 CssBaseline 组件，用于启动一个优雅、一致且简单的基线。

    -## Global reset +## 全局重置 您可能对 [normailize.css](https://github.com/necolas/normalize.css)比较熟悉，而这是一个 HTML 元素和样式规范化的属性的集合。 @@ -58,13 +58,13 @@ export default function MyApp() { - 在 `` 元素里面，我们将 `box-sizing` 全局设置为 `border-box`。 这样一来，包括 `*:: before` 和 `*:: after` 的每个元素，都会被声明来继承这个属性，这样能够确保元素的声明宽度永远不会超过 padding 或者 border。 -### Typography（文字排版） +### 文字排版 - 在 `` 里面不会声明基础的 font-size，但是我们假设是 16px (浏览器的默认设置)。 您可以在[主题文档](/customization/typography/#typography-html-font-size) 页面中了解更多有关更改 `` 默认字体大小的影响 。 - 在 `theme.typography.body2` 元素上设置 `` 样式。 - 您可以通过设置 `theme.typography.fontWeightBold` 来控制 `` 和 `` 元素的 font-weight 属性。 -- Custom font-smoothing is enabled for better display of the Roboto font. +- 为了更好地显示Roboto字体，启用了自定义字体平滑功能。 ## Customization 个性化 -Head to the [global customization](/customization/globals/#global-css) section of the documentation to change the output of these components. \ No newline at end of file +前往文档中的 [全局自定义](/customization/globals/#global-css) 部分来改变这些组件的输出。 \ No newline at end of file diff --git a/docs/src/pages/components/dividers/dividers-pt.md b/docs/src/pages/components/dividers/dividers-pt.md index 621c9397bac746..58a73afddd48eb 100644 --- a/docs/src/pages/components/dividers/dividers-pt.md +++ b/docs/src/pages/components/dividers/dividers-pt.md @@ -3,7 +3,7 @@ title: Componente React para Divisores components: Divider --- -# Divider (divisor) +# Divisor

    Um divisor é uma linha fina que agrupa conteúdo em listas e leiautes.

    @@ -17,7 +17,7 @@ O divisor renderiza como um `
    ` por padrão. Você pode salvar a renderizaç ## Especificação HTML5 -Em uma lista, você deve garantir que o `Divisor` seja renderizado como um elemento `
  1. ` para corresponder à especificação HTML5. Os exemplos abaixo mostram duas maneiras de conseguir isso. +Em uma lista, você deve garantir que o `Divider` seja renderizado como um elemento `
  2. ` para corresponder à especificação HTML5. Os exemplos abaixo mostram duas maneiras de conseguir isso. ## Divisores de inserção diff --git a/docs/src/pages/components/expansion-panels/expansion-panels-pt.md b/docs/src/pages/components/expansion-panels/expansion-panels-pt.md index f22bcc050b677c..e4bd58e7d487e3 100644 --- a/docs/src/pages/components/expansion-panels/expansion-panels-pt.md +++ b/docs/src/pages/components/expansion-panels/expansion-panels-pt.md @@ -53,4 +53,4 @@ Várias colunas podem ser usadas para estruturar o conteúdo, e um texto auxilia (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion) -Para melhor acessibilidade recomendamos a definição de `id` e `aria-controles` no `ExpansionPanelSummary`. O `ExpansionPanel` irá derivar os valores de `aria-labelledby` e `id` para a região de conteúdo do painel. \ No newline at end of file +Para melhor acessibilidade recomendamos a definição do `id` e `aria-controls` no `ExpansionPanelSummary`. O `ExpansionPanel` irá derivar os valores de `aria-labelledby` e `id` para a região de conteúdo do painel. \ No newline at end of file diff --git a/docs/src/pages/components/floating-action-button/floating-action-button-es.md b/docs/src/pages/components/floating-action-button/floating-action-button-es.md index 0027a7515b6c38..2e8ec50ce434f7 100644 --- a/docs/src/pages/components/floating-action-button/floating-action-button-es.md +++ b/docs/src/pages/components/floating-action-button/floating-action-button-es.md @@ -1,34 +1,34 @@ --- -title: Fab React component +title: Componente de React Fab components: Fab --- -# Floating action button +# Botón de acción flotante -

    A floating action button (FAB) performs the primary, or most common, action on a screen.

    +

    Un botón de acción flotante (FAB) realiza la acción principal, o la más común, en una pantalla.

    -## Floating Action Button +## Botón de acción flotante -A [floating action button](https://material.io/design/components/buttons-floating-action-button.html) appears in front of all screen content, typically as a circular shape with an icon in its center. Los BAF existen en dos formas: regular, y extendido. +Un [botón de acción flotante](https://material.io/design/components/buttons-floating-action-button.html)aparece delante de todo el contenido de la pantalla, típicamente como una forma circular con un icono en su centro. Los FABs vienen en dos tipos: regulares y extendidos. -Sólo se recomienda usar un BAF si es la manera más apta para presentar la acción primaria de una pantalla. +Sólo usa un FAB si es la forma más adecuada de presentar la acción principal de una pantalla. -Se recomienda solo un botón flotante por pantalla para representar la acción más común. +Se recomienda un solo botón de acción flotante por pantalla para representar la acción más común. {{"demo": "pages/components/floating-action-button/FloatingActionButtons.js"}} -## Size +## Tamaño -Use the `size` prop for larger or smaller floating action buttons. +Usa el `tamaño` para botones de acción flotante más grandes o más pequeños. {{"demo": "pages/components/floating-action-button/FloatingActionButtonSize.js"}} -## Animation +## Animación -El botón de acción flotante aparece en la página animado como un pedazo de material en expansión, por defecto. +El botón de acción flotante se anima en la pantalla como una pieza de material en expansión, por defecto. -Un botón de acción flotante que aparece en varias páginas laterales (como páginas en pestañas) debe desaparecer por un momento, y luego aparecer de nuevo si su acción cambia. +Un botón de acción flotante que abarca múltiples pantallas laterales (como las pantallas con pestañas) debería desaparecer brevemente, para luego reaparecer si su acción cambia. -La transición Zoom se puede usar para lograr esto. Ten en cuenta que ya que las animaciones de salida y de entrada son desencadenados al mismo tiempo, usamos `enterDelay` para permitir que termine la animación del Botón de Acción Flotante saliente antes de que entre el nuevo. +La transición Zoom se puede utilizar para lograr esto. Tenga en cuenta que como las animaciones de salida y de entrada se disparan al mismo tiempo, usamos `enterDelay` para permitir que la animación del Botón de Acción Flotante saliente termine antes de que el nuevo entre. {{"demo": "pages/components/floating-action-button/FloatingActionButtonZoom.js", "bg": true}} diff --git a/docs/src/pages/components/floating-action-button/floating-action-button-zh.md b/docs/src/pages/components/floating-action-button/floating-action-button-zh.md index d781bdbd14da3e..78ba2756b1a2fc 100644 --- a/docs/src/pages/components/floating-action-button/floating-action-button-zh.md +++ b/docs/src/pages/components/floating-action-button/floating-action-button-zh.md @@ -1,17 +1,17 @@ --- -title: Fab React component +title: React Fab 浮动操作按钮组件 components: Fab --- -# Floating action button 提升动作按钮 +# Floating action button 浮动操作按钮 -

    提升动作按钮 (FAB) 通常用于在屏幕上执行一些主要的或是最为常见的操作。

    +

    浮动操作按钮 (FAB) 通常用于在屏幕上执行一些主要的或是最为常见的操作。

    -## Floating Action Button +## Floating Action Buttons 浮动操作按钮 -A [floating action button](https://material.io/design/components/buttons-floating-action-button.html) appears in front of all screen content, 通常为圆形，且中间有一个图标。 FAB有两种类型：常规的和扩展的。 +[浮动操作按钮](https://material.io/design/components/buttons-floating-action-button.html) 出现在所有屏幕内容的前面，通常是以圆形的形状出现，中间有一个图标。 FAB 有两种类型：常规的和扩展的。 -只使用FAB是最适合呈现屏幕主要操作的方法。 +仅在最适合显示屏幕主要操作的方式时才使用 FAB。 在每个屏幕中，我们建议只有一个浮动操作按钮来表示最常见的操作。 @@ -29,6 +29,6 @@ A [floating action button](https://material.io/design/components/buttons-floatin 跨越多个横向屏幕（例如标签式屏幕）的浮动操作按钮应该短暂消失， 然后如果其动作改变则重新出现。 -可以使用缩放转换来实现此目的。 注意，既然退出和进入动画同时被触发，我们使用`enterDelay`来允许旧的浮动动作按钮动画在新的按钮进入之前完成。 +可以用缩放过渡来实现。 请注意，由于退出和进入 动画同时被触发，我们使用 `enterDelay` 来允许传出的浮动操作按钮的 动画，在新的动画进入之前完成。 {{"demo": "pages/components/floating-action-button/FloatingActionButtonZoom.js", "bg": true}} diff --git a/docs/src/pages/components/grid-list/grid-list-pt.md b/docs/src/pages/components/grid-list/grid-list-pt.md index c8423e8309e0e3..6668c6374fb932 100644 --- a/docs/src/pages/components/grid-list/grid-list-pt.md +++ b/docs/src/pages/components/grid-list/grid-list-pt.md @@ -21,7 +21,7 @@ Este exemplo demonstra o uso do `GridListTileBar` para adicionar uma sobreposiç {{"demo": "pages/components/grid-list/TitlebarGridList.js", "hideEditButton": true}} -## Lista de grade de linha única +## Lista de grade em linha única Este exemplo demonstra uma lista de grade com imagens, em linha unica e rolável horizontalmente. As listas de grade de rolagem horizontal não são recomendadas porque a rolagem interfere nos padrões de leitura típicos, afetando a compreensão. Uma exceção notável para rolagem horizontal, seria uma lista de grade com imagens em linha única, como uma galeria. diff --git a/docs/src/pages/components/icons/icons-es.md b/docs/src/pages/components/icons/icons-es.md index c0d4eb300fa8f4..9cc6d49044d65c 100644 --- a/docs/src/pages/components/icons/icons-es.md +++ b/docs/src/pages/components/icons/icons-es.md @@ -94,7 +94,7 @@ function HomeIcon(props) { {{"demo": "pages/components/icons/SvgIconsColor.js"}} -### Size +### Tamaño {{"demo": "pages/components/icons/SvgIconsSize.js"}} diff --git a/docs/src/pages/components/links/links-zh.md b/docs/src/pages/components/links/links-zh.md index 33b9898313e757..f05c0e76091643 100644 --- a/docs/src/pages/components/links/links-zh.md +++ b/docs/src/pages/components/links/links-zh.md @@ -35,7 +35,7 @@ components: Link (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#link) - 当提供链接对应的内容时，避免使用泛泛的描述，比如“点击这里”或“跳转”之类的词语 相反的，请使用 [具体详细的描述](https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text)说明. -- For the best user experience, links should stand out from the text on the page. +- 为了获得最佳的用户体验，链接应该从页面上的文字中脱颖而出。 - 如果一个链接没有赋予一个有意义的href值, [它应该用一个 `<按钮>` 元素](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md)表示 {{"demo": "pages/components/links/ButtonLink.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/lists/lists-zh.md b/docs/src/pages/components/lists/lists-zh.md index a3dc5962d58115..db2e1580cbe892 100644 --- a/docs/src/pages/components/lists/lists-zh.md +++ b/docs/src/pages/components/lists/lists-zh.md @@ -95,4 +95,4 @@ function ListItemLink(props) { ## 个性化 -🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/list-item). \ No newline at end of file +🎨如果你是在寻找灵感，你可以查看 [MUI Treasury's customization examples](https://mui-treasury.com/styles/list-item)。 \ No newline at end of file diff --git a/docs/src/pages/components/menus/menus-zh.md b/docs/src/pages/components/menus/menus-zh.md index 76c37d2cb02cf2..780ee69648d184 100644 --- a/docs/src/pages/components/menus/menus-zh.md +++ b/docs/src/pages/components/menus/menus-zh.md @@ -41,7 +41,7 @@ components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper `MenuItem` 的原理是用额外的样式包装了 `ListItem` 组件。 你可以将同样的列表合成功能来装饰 `MenuItem` 组件： -🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/menu). +🎨如果你是在寻找灵感，你可以查看 [MUI Treasury's customization examples](https://mui-treasury.com/styles/menu)。 ## 限高菜单 diff --git a/docs/src/pages/components/modal/modal-pt.md b/docs/src/pages/components/modal/modal-pt.md index c02a1dcde5e8eb..06c15169fc326f 100644 --- a/docs/src/pages/components/modal/modal-pt.md +++ b/docs/src/pages/components/modal/modal-pt.md @@ -50,7 +50,7 @@ Como alternativa, você pode usar [react-spring](https://github.com/react-spring ## Modal do lado do servidor -React [não suporta](https://github.com/facebook/react/issues/13097) a API [`createPortal()`](https://reactjs.org/docs/portals.html) no servidor. Para exibir o modal, você precisa desativar o recurso portal com a propriedade `disablePortal`: +React [não suporta](https://github.com/facebook/react/issues/13097) a API [`createPortal()`](https://pt-br.reactjs.org/docs/portals.html) no servidor. Para exibir o modal, você precisa desativar o recurso portal com a propriedade `disablePortal`: {{"demo": "pages/components/modal/ServerModal.js"}} diff --git a/docs/src/pages/components/modal/modal-zh.md b/docs/src/pages/components/modal/modal-zh.md index a8f19cc7a8efab..e1d261396a30ae 100644 --- a/docs/src/pages/components/modal/modal-zh.md +++ b/docs/src/pages/components/modal/modal-zh.md @@ -25,7 +25,7 @@ components: Modal - [Menu](/components/menus/) - [Popover](/components/popover/) -## 简单的模态 +## 简单的模态框 {{"demo": "pages/components/modal/SimpleModal.js"}} @@ -56,7 +56,7 @@ React API [不支持](https://github.com/facebook/react/issues/13097) 在服务 ## 局限性 -### Focus trap +### 焦点陷阱 如果失去焦点，则模态框会将焦点移回到组件的主体 (body of the component)。 @@ -87,4 +87,4 @@ React API [不支持](https://github.com/facebook/react/issues/13097) 在服务 ``` - 这篇 [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) 里的方法可以根据你的模态窗口里的内容, 为最合适的元素设置初始焦点. -- Keep in mind that a "modal window" overlays on either the primary window or another modal window. 模态框层下的所有层级都是 **inert** 的。 也就是说，用户不能与活跃的模态框外的内容交互。 This might create [conflicting behaviors](#focus-trap). \ No newline at end of file +- 请记住，“模态窗口” 叠加在主窗口或另一个模态窗口上。 模态框层下的所有层级都是 **inert** 的。 也就是说，用户不能与活跃的模态框外的内容交互。 这可能会产生 [冲突行为](#focus-trap)。 \ No newline at end of file diff --git a/docs/src/pages/components/pagination/pagination-pt.md b/docs/src/pages/components/pagination/pagination-pt.md index ec19ccdc952780..4780e621519d9c 100644 --- a/docs/src/pages/components/pagination/pagination-pt.md +++ b/docs/src/pages/components/pagination/pagination-pt.md @@ -45,7 +45,7 @@ Você pode especificar quantos dígitos exibir a qualquer lado da página atual ## `usePagination` -Para casos avançados de uso de customização, nós expomos um hook `usePagination()`. Ele aceita quase as mesmas opções que o componente de Paginação, menos todas as propriedades relacionadas à renderização de JSX. O componente de paginação usa este hook internamente. +Para casos avançados de uso de customização, nós expomos um hook `usePagination()`. Ele aceita quase as mesmas opções que o componente de paginação, menos todas as propriedades relacionadas à renderização de JSX. O componente de paginação usa este hook internamente. ```jsx import { usePagination } from '@material-ui/lab/Pagination'; @@ -53,15 +53,15 @@ import { usePagination } from '@material-ui/lab/Pagination'; {{"demo": "pages/components/pagination/UsePagination.js"}} -## Table pagination +## Paginação em tabelas -The `Pagination` component was designed to paginate a list of arbitrary items when infinite loading isn't used. It's preferred in contexts where SEO is important, for instance, a blog. +O componente `Pagination` foi projetado para paginar uma lista de itens arbitrários quando a carga infinita não é usada. É preferível em contextos onde o SEO é importante, por exemplo, um blog. -For the pagination of a large set of tabular data, you should use the `TablePagination` component. +Para a paginação de um conjunto grande de dados tabulares, você deve usar o componente `TablePagination`. {{"demo": "pages/components/pagination/TablePagination.js"}} -You can learn more about this use case in the [table section](/components/tables/#custom-pagination-options) of the documentation. +Você pode aprender mais sobre este caso de uso na [seção de tabela](/components/tables/#custom-pagination-options) da documentação. ## Acessibilidade diff --git a/docs/src/pages/components/pagination/pagination-zh.md b/docs/src/pages/components/pagination/pagination-zh.md index 3fc821e9af226a..3157d2ed25aa9d 100644 --- a/docs/src/pages/components/pagination/pagination-zh.md +++ b/docs/src/pages/components/pagination/pagination-zh.md @@ -1,5 +1,5 @@ --- -title: 分页React组件 +title: React Pagination 分页组件 components: Pagination, PaginationItem --- @@ -53,21 +53,21 @@ import { usePagination } from '@material-ui/lab/Pagination'; {{"demo": "pages/components/pagination/UsePagination.js"}} -## Table pagination +## 表格分页 -The `Pagination` component was designed to paginate a list of arbitrary items when infinite loading isn't used. It's preferred in contexts where SEO is important, for instance, a blog. +`Pagination` 组件的设计是为了在不使用无限加载的情况下，将任意项目列表分页。 在重视 SEO 的环境下，比如说博客，它是首选。 -For the pagination of a large set of tabular data, you should use the `TablePagination` component. +对于大型表格数据的分页，应该使用 `TablePagination` 组件。 {{"demo": "pages/components/pagination/TablePagination.js"}} -You can learn more about this use case in the [table section](/components/tables/#custom-pagination-options) of the documentation. +您可以在文档的 [表格部分](/components/tables/#custom-pagination-options) 中了解更多关于此用例的信息。 ## 可访问性 ### ARIA -默认情况下，根节点具有“导航”和aria-label“分页导航”的作用。 页面项目具有一个aria-label，用于标识项目的用途（“转到第一页”，“转到上一页”，“转到页面1”等）。 你可以使用 `getItemAriaLabel`属性来覆盖它们。 +默认情况下，根节点具有 "navigation" 和 aria-label “分页导航” 的作用。 页面项目具有一个aria-label，用于标识项目的用途（“转到第一页”，“转到上一页”，“转到页面1”等）。 你可以使用 `getItemAriaLabel`属性来覆盖它们。 ### 键盘 diff --git a/docs/src/pages/components/popper/popper-zh.md b/docs/src/pages/components/popper/popper-zh.md index d27d15e8cccf0a..f4e0e6477a33bd 100644 --- a/docs/src/pages/components/popper/popper-zh.md +++ b/docs/src/pages/components/popper/popper-zh.md @@ -13,7 +13,7 @@ components: Popper - 💄 这是 react-popper 的一个替代性组件。 它旨在简化。 - 📦 [10 kB gzipped](/size-snapshot) ([7 kB](https://bundlephobia.com/result?p=popper.js) 来自 Popper.js). - 子组件以 [`Portal`](/components/portal/) 形式呈现在 DOM 中，以避免渲染问题。 您可以使用 `disablePortal` 禁用此行为。 -- 不同于 [`Popover`](/components/popover/) 组件，滚动行为是可被允许的。 The placement of the popper updates with the available area in the viewport. +- 不同于 [`Popover`](/components/popover/) 组件，滚动行为是可被允许的。 弹出提示的位置会随着视口中的可用面积而更新。 - 点击不会隐藏 `Popper` 组件。 如果你确实需要这一行为，则可以使用 [`ClickAwayListener`](/components/click-away-listener/) - 见 [menu documentation section](/components/menus/#menulist-composition) 中的样例。 - ` anchorEl ` 作为创建新 `Poper.js` 实例的参考对象所传递。 @@ -47,7 +47,7 @@ components: Popper ## 占位的参考对象 -The `anchorEl` property can be a reference to a fake DOM element. 您只需要创建一个类似于 [`ReferenceObject`](https://github.com/FezVrasta/popper.js/blob/0642ce0ddeffe3c7c033a412d4d60ce7ec8193c3/packages/popper/index.d.ts#L118-L123) 的对象。 +`anchorEl` 属性可以是对占位 DOM 元素的引用。 您只需要创建一个类似于 [`ReferenceObject`](https://github.com/FezVrasta/popper.js/blob/0642ce0ddeffe3c7c033a412d4d60ce7ec8193c3/packages/popper/index.d.ts#L118-L123) 的对象。 选中部分文本以看到气泡卡片： diff --git a/docs/src/pages/components/portal/portal-pt.md b/docs/src/pages/components/portal/portal-pt.md index a26ee09a0d6659..109829fcedf358 100644 --- a/docs/src/pages/components/portal/portal-pt.md +++ b/docs/src/pages/components/portal/portal-pt.md @@ -17,4 +17,4 @@ O filho do componente portal será adicionado ao `container` especificado. O com ## Do lado do servidor -React [não suporta](https://github.com/facebook/react/issues/13097) a API [`createPortal()`](https://reactjs.org/docs/portals.html) no servidor. Você deve esperar pelo lado do cliente fazer a hidratação para ver o filho. \ No newline at end of file +React [não suporta](https://github.com/facebook/react/issues/13097) a API [`createPortal()`](https://pt-br.reactjs.org/docs/portals.html) no servidor. Você deve esperar pelo lado do cliente fazer a hidratação para ver o filho. \ No newline at end of file diff --git a/docs/src/pages/components/progress/progress-zh.md b/docs/src/pages/components/progress/progress-zh.md index 542c0f4fbef5bd..7e869a44355bc1 100644 --- a/docs/src/pages/components/progress/progress-zh.md +++ b/docs/src/pages/components/progress/progress-zh.md @@ -1,5 +1,5 @@ --- -title: Circular, Linear progress React components +title: React Circular 进度环, React Linear progress 进度条组件 components: CircularProgress, LinearProgress --- @@ -99,6 +99,6 @@ function Progress(props) { ![高负载](/static/images/progress/heavy-load.gif) -When it's not possible, you can leverage the `disableShrink` property to mitigate the issue. See [this issue](https://github.com/mui-org/material-ui/issues/10327). +当它不可用时，您可以利用 `disableShrink` 属性来缓解这个问题。 查看 [这个问题](https://github.com/mui-org/material-ui/issues/10327). {{"demo": "pages/components/progress/CircularUnderLoad.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-aa.md b/docs/src/pages/components/radio-buttons/radio-buttons-aa.md index 109e8d1c765781..1b72fd65a7eff4 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-aa.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-aa.md @@ -17,29 +17,31 @@ crwdns91440:0crwdne91440:0 crwdns91442:0crwdne91442:0 +crwdns132882:0crwdne132882:0 + ## crwdns130402:0crwdne130402:0 -crwdns130404:0crwdne130404:0 +crwdns132884:0crwdne132884:0 -crwdns91448:0crwdne91448:0 +crwdns132886:0crwdne132886:0 ## crwdns130406:0crwdne130406:0 -crwdns130526:0crwdne130526:0 +crwdns132888:0crwdne132888:0 -crwdns130528:0crwdne130528:0 +crwdns132890:0crwdne132890:0 ## crwdns130530:0crwdne130530:0 -crwdns130532:0crwdne130532:0 crwdns130534:0crwdne130534:0 +crwdns132892:0crwdne132892:0 crwdns132894:0crwdne132894:0 -crwdns130536:0crwdne130536:0 +crwdns132896:0crwdne132896:0 ## crwdns130538:0crwdne130538:0 -crwdns130540:0crwdne130540:0 crwdns130542:0crwdne130542:0 +crwdns132898:0crwdne132898:0 crwdns132900:0crwdne132900:0 -crwdns130544:0crwdne130544:0 +crwdns132902:0crwdne132902:0 ## crwdns130546:0crwdne130546:0 @@ -47,7 +49,7 @@ crwdns130544:0crwdne130544:0 ## crwdns130548:0crwdne130548:0 -crwdns130550:0crwdne130550:0 +crwdns132904:0crwdne132904:0 - crwdns102602:0crwdne102602:0 crwdns102604:0crwdne102604:0 - crwdns102606:0crwdne102606:0 crwdns102608:0crwdne102608:0 diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-de.md b/docs/src/pages/components/radio-buttons/radio-buttons-de.md index 82f2cb991e4d39..197d69807c75da 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-de.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-de.md @@ -17,6 +17,8 @@ Bei Optionsschaltflächen sollte die am häufigsten verwendete Option standardm {{"demo": "pages/components/radio-buttons/RadioButtonsGroup.js"}} +To lay out the buttons horizontally, set the `row` prop: ``. + ## Standalone radio buttons `Radio` can also be used standalone, without the RadioGroup wrapper. diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-es.md b/docs/src/pages/components/radio-buttons/radio-buttons-es.md index c5401ad7a3fe37..99421dcef4c287 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-es.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-es.md @@ -17,15 +17,17 @@ Radio buttons should have the most commonly used option selected by default. {{"demo": "pages/components/radio-buttons/RadioButtonsGroup.js"}} +Para poner los botones de forma horizontal, establezca el `fila` prop: ``. + ## Standalone radio buttons -`Radio` can also be used standalone, without the RadioGroup wrapper. +`Radio` también puede ser utilizado de forma independiente, sin el contenedor RadioGroup. {{"demo": "pages/components/radio-buttons/RadioButtons.js"}} ## Ubicación de Etiqueta -You can change the placement of the label with the `FormControlLabel` component's `labelPlacement` prop: +Usted puede cambiar la ubicación de la etiqueta con el `FormControlLabel` del componente `labelPlacement` prop: {{"demo": "pages/components/radio-buttons/FormControlLabelPlacement.js"}} diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-fr.md b/docs/src/pages/components/radio-buttons/radio-buttons-fr.md index 06d7ec624bcbd7..aca0e564e32cf4 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-fr.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-fr.md @@ -17,6 +17,8 @@ Généralement, les cases d'option doivent avoir l'option la plus utilisée sél {{"demo": "pages/components/radio-buttons/RadioButtonsGroup.js"}} +To lay out the buttons horizontally, set the `row` prop: ``. + ## Standalone radio buttons `Radio` can also be used standalone, without the RadioGroup wrapper. diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-ja.md b/docs/src/pages/components/radio-buttons/radio-buttons-ja.md index d1f395ba46b92a..0bdbb00fd287cd 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-ja.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-ja.md @@ -17,6 +17,8 @@ components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel {{"demo": "pages/components/radio-buttons/RadioButtonsGroup.js"}} +To lay out the buttons horizontally, set the `row` prop: ``. + ## Standalone radio buttons `Radio` can also be used standalone, without the RadioGroup wrapper. diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-pt.md b/docs/src/pages/components/radio-buttons/radio-buttons-pt.md index 2c5bc7563007a0..6cd9a2c6197611 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-pt.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-pt.md @@ -1,5 +1,5 @@ --- -title: Componente React para Botões de Opção +title: Componente React para Botões de opção components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel --- @@ -9,23 +9,25 @@ components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel Use [botões de opção](https://material.io/design/components/selection-controls.html#radio-buttons) quando um usuário precisar ver todas as opções disponíveis. Se várias opções podem ser suprimidas da visualização, considere usar um menu suspenso (dropdown), pois ele utiliza menos espaço. -Os botões de opção devem ter a opção mais comumente usada selecionada por padrão. +Os botões de opção devem ter a opção comum e mais usada selecionada por padrão. ## RadioGroup -`RadioGroup` é um wrapper útil usado para agrupar componentes `Radio` fornecendo uma API mais fácil, e adequá a acessibilidade pelo teclado para o grupo. +O componente `RadioGroup` é um wrapper utilizado para agrupar componentes `Radio`, fornece uma API mais simples e adequada para a acessibilidade por teclado. {{"demo": "pages/components/radio-buttons/RadioButtonsGroup.js"}} +Para demonstrar os botões horizontalmente, defina a propriedade `row`: ``. + ## Botões de opção independentes -`Radio` também pode ser usado de forma independente, sem o RadioGroup wrapper. +O componente `Radio` também pode ser usado de forma independente, sem o wrapper RadioGroup. {{"demo": "pages/components/radio-buttons/RadioButtons.js"}} -## Posicionamento do Rótulo +## Posicionamento do rótulo -Você pode alterar o posicionamento do rótulo com o componente `FormControlLabel` e a propriedade `labelPlacement`: +Você pode alterar o posicionamento do rótulo com o componente `FormControlLabel` na propriedade `labelPlacement`: {{"demo": "pages/components/radio-buttons/FormControlLabelPlacement.js"}} @@ -43,7 +45,7 @@ Aqui está um exemplo de customização do componente. Você pode aprender mais ## Quando usar -- [Caixas de Seleção vs. Botões de Opção](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) +- [Caixas de seleção vs. Botões de opção](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) ## Acessibilidade diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-ru.md b/docs/src/pages/components/radio-buttons/radio-buttons-ru.md index 7f488d9925e102..348a53576cda36 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-ru.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-ru.md @@ -17,6 +17,8 @@ Use [radio buttons](https://material.io/design/components/selection-controls.htm {{"demo": "pages/components/radio-buttons/RadioButtonsGroup.js"}} +To lay out the buttons horizontally, set the `row` prop: ``. + ## Standalone radio buttons `Radio` can also be used standalone, without the RadioGroup wrapper. diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-zh.md b/docs/src/pages/components/radio-buttons/radio-buttons-zh.md index 6db79d19a0b4f4..a95be0b17bac9f 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-zh.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-zh.md @@ -17,7 +17,9 @@ components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel {{"demo": "pages/components/radio-buttons/RadioButtonsGroup.js"}} -## Standalone radio buttons +要横向布置按钮，请设置 `row`prop: ``. + +## Standalone radio buttons 独立的单选框按钮 `Radio` 也可以单独使用，无需额外的包装。 @@ -25,9 +27,9 @@ components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel ## 标签放置 -You can change the placement of the label with the `FormControlLabel` component's `labelPlacement` prop: +你可以用 `FormControlLabel` 组件的 `labelPlacement` prop 来改变标签的位置。 -{{"demo": "pages/components/radio-buttons/FormControlLabelPlacement.js"}} +{{"demo": "pages/components/radio-buttons/FormControlLabelPlacement.js"}} ## Show error 显示错误 @@ -45,7 +47,7 @@ You can change the placement of the label with the `FormControlLabel` component' - [复选框 对比 单选按钮](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) -## 可访问性 +## 可及性 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#radiobutton) diff --git a/docs/src/pages/components/rating/rating-pt.md b/docs/src/pages/components/rating/rating-pt.md index 6a6dbc368a6dce..7674f6864cb824 100644 --- a/docs/src/pages/components/rating/rating-pt.md +++ b/docs/src/pages/components/rating/rating-pt.md @@ -13,7 +13,7 @@ components: Rating ## Avaliações customizadas -Aqui esta um exemplo de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/). +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/rating/CustomizedRatings.js"}} diff --git a/docs/src/pages/components/selects/selects-es.md b/docs/src/pages/components/selects/selects-es.md index 14530762f2272c..0db00c98658f77 100644 --- a/docs/src/pages/components/selects/selects-es.md +++ b/docs/src/pages/components/selects/selects-es.md @@ -17,7 +17,7 @@ Los menús son colocados sobre sus emisores de elementos tales que el elemento d The Select component is meant to be interchangeable with a native ``. -Se você estiver procurando por recursos mais avançados, como combobox, seleção múltipla, autocompletar, uso assíncrono ou com suporte de adição, vá para o [ componente `Autocomplete`](/components/autocomplete/). A ideia dessa ferramenta era para ser uma versão melhorada das bibliotecas "react-select" e "downshift". +Se você estiver procurando por recursos mais avançados, como combobox, seleção múltipla, autocompletar, uso assíncrono ou com suporte de adição, vá para o [ componente `Autocomplete`](/components/autocomplete/). A idéia dessa ferramenta é ser uma versão melhorada das bibliotecas "react-select" e "downshift". ## Seleção Nativa diff --git a/docs/src/pages/components/selects/selects-zh.md b/docs/src/pages/components/selects/selects-zh.md index 7fc94bc40a322c..c264641a15a46b 100644 --- a/docs/src/pages/components/selects/selects-zh.md +++ b/docs/src/pages/components/selects/selects-zh.md @@ -37,7 +37,7 @@ Select 组件的设计原理是和一个原生的 `` 元素能够互相 ``` -For a [native select](#native-select), you should mention a label by giving the value of the `id` attribute of the select element to the `InputLabel`'s `htmlFor` attribute: +对于一个 [原生选择](#native-select)，你应该通过将选择元素的 `id` 属性的值赋给 `InputLabel` 的 `htmlFor` 属性来提及标签。 ```jsx Age diff --git a/docs/src/pages/components/skeleton/skeleton-aa.md b/docs/src/pages/components/skeleton/skeleton-aa.md index a5c7d092d5f0f8..8b069b7244dc39 100644 --- a/docs/src/pages/components/skeleton/skeleton-aa.md +++ b/docs/src/pages/components/skeleton/skeleton-aa.md @@ -27,15 +27,15 @@ crwdns107335:0crwdne107335:0 crwdns107337:0crwdne107337:0 -## crwdns107339:0crwdne107339:0 +### crwdns132990:0crwdne132990:0 crwdns107341:0crwdne107341:0 -## crwdns107343:0crwdne107343:0 +### crwdns132992:0crwdne132992:0 crwdns107345:0crwdne107345:0 -## crwdns132760:0crwdne132760:0 +## crwdns132994:0crwdne132994:0 crwdns132762:0crwdne132762:0 @@ -53,4 +53,10 @@ crwdns132772:0crwdne132772:0 crwdns132774:0crwdne132774:0 crwdns132776:0crwdne132776:0 crwdns132778:0{data.avatar}crwdne132778:0 ``` -crwdns132780:0crwdne132780:0 \ No newline at end of file +crwdns132780:0crwdne132780:0 + +## crwdns132996:0crwdne132996:0 + +crwdns132998:0crwdne132998:0 crwdns133000:0crwdne133000:0 + +crwdns133002:0crwdne133002:0 \ No newline at end of file diff --git a/docs/src/pages/components/skeleton/skeleton-de.md b/docs/src/pages/components/skeleton/skeleton-de.md index 8fa7cf5b501db1..aad8aac4c91fb8 100644 --- a/docs/src/pages/components/skeleton/skeleton-de.md +++ b/docs/src/pages/components/skeleton/skeleton-de.md @@ -31,11 +31,11 @@ By default, the skeleton pulsate, but you can change the animation for a wave or {{"demo": "pages/components/skeleton/Animations.js"}} -## YouTube-Beispiel +### Pulsate example {{"demo": "pages/components/skeleton/YouTube.js", "defaultCodeOpen": false}} -## Facebook example +### Wave example {{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}} @@ -61,4 +61,10 @@ loading : ``` -{{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} \ No newline at end of file +{{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} + +## Barrierefreiheit + +Skeleton screens provide an alternative to the traditional spinner methods. Rather than showing an abstract widget, skeleton screens create anticipation of what is to come and reduce cognitive load. + +The background color of the skeleton uses the least amount of luminance to be visible in good conditions (good ambient light, good screen, no visual impairments). \ No newline at end of file diff --git a/docs/src/pages/components/skeleton/skeleton-es.md b/docs/src/pages/components/skeleton/skeleton-es.md index b28b31cfb795e3..72b38a7cc835fd 100644 --- a/docs/src/pages/components/skeleton/skeleton-es.md +++ b/docs/src/pages/components/skeleton/skeleton-es.md @@ -31,11 +31,11 @@ By default, the skeleton pulsate, but you can change the animation for a wave or {{"demo": "pages/components/skeleton/Animations.js"}} -## YouTube example +### Pulsate example {{"demo": "pages/components/skeleton/YouTube.js", "defaultCodeOpen": false}} -## Facebook example +### Wave example {{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}} @@ -61,4 +61,10 @@ loading : ``` -{{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} \ No newline at end of file +{{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} + +## Accesibilidad + +Skeleton screens provide an alternative to the traditional spinner methods. Rather than showing an abstract widget, skeleton screens create anticipation of what is to come and reduce cognitive load. + +The background color of the skeleton uses the least amount of luminance to be visible in good conditions (good ambient light, good screen, no visual impairments). \ No newline at end of file diff --git a/docs/src/pages/components/skeleton/skeleton-fr.md b/docs/src/pages/components/skeleton/skeleton-fr.md index 5580cde557bbfc..78071ea856e711 100644 --- a/docs/src/pages/components/skeleton/skeleton-fr.md +++ b/docs/src/pages/components/skeleton/skeleton-fr.md @@ -31,11 +31,11 @@ By default, the skeleton pulsate, but you can change the animation for a wave or {{"demo": "pages/components/skeleton/Animations.js"}} -## YouTube example +### Pulsate example {{"demo": "pages/components/skeleton/YouTube.js", "defaultCodeOpen": false}} -## Facebook example +### Wave example {{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}} @@ -61,4 +61,10 @@ loading : ``` -{{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} \ No newline at end of file +{{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} + +## Accessibilité + +Skeleton screens provide an alternative to the traditional spinner methods. Rather than showing an abstract widget, skeleton screens create anticipation of what is to come and reduce cognitive load. + +The background color of the skeleton uses the least amount of luminance to be visible in good conditions (good ambient light, good screen, no visual impairments). \ No newline at end of file diff --git a/docs/src/pages/components/skeleton/skeleton-ja.md b/docs/src/pages/components/skeleton/skeleton-ja.md index a1ab2f38b1bc2f..f6f846aba5b1d9 100644 --- a/docs/src/pages/components/skeleton/skeleton-ja.md +++ b/docs/src/pages/components/skeleton/skeleton-ja.md @@ -31,11 +31,11 @@ By default, the skeleton pulsate, but you can change the animation for a wave or {{"demo": "pages/components/skeleton/Animations.js"}} -## YouTubeの例 +### Pulsate example {{"demo": "pages/components/skeleton/YouTube.js", "defaultCodeOpen": false}} -## Facebookの例 +### Wave example {{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}} @@ -61,4 +61,10 @@ loading : ``` -{{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} \ No newline at end of file +{{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} + +## アクセシビリティ + +Skeleton screens provide an alternative to the traditional spinner methods. Rather than showing an abstract widget, skeleton screens create anticipation of what is to come and reduce cognitive load. + +The background color of the skeleton uses the least amount of luminance to be visible in good conditions (good ambient light, good screen, no visual impairments). \ No newline at end of file diff --git a/docs/src/pages/components/skeleton/skeleton-pt.md b/docs/src/pages/components/skeleton/skeleton-pt.md index 0c5a154cbea406..cd02a2aa8914ad 100644 --- a/docs/src/pages/components/skeleton/skeleton-pt.md +++ b/docs/src/pages/components/skeleton/skeleton-pt.md @@ -7,7 +7,7 @@ components: Skeleton

    Exiba uma visualização do espaço reservado de seu conteúdo antes que os dados sejam carregados, reduzindo a sensação de lentidão do tempo de carregamento.

    -Os dados dos seus componentes podem não estar imediatamente disponíveis. Você pode aumentar o desempenho percebido pelos usuários usando esqueletos. Ele passa a sensação de que as coisas estão acontecendo imediatamente, então a informação é mostrada incrementalmente na tela (Cf. [Evite uso de progressos](https://www.lukew.com/ff/entry.asp?1797)). +Os dados dos seus componentes podem não estar imediatamente disponíveis. Você pode aumentar o desempenho percebido pelos usuários usando skeletons. Ele passa a sensação de que as coisas estão acontecendo imediatamente, então a informação é mostrada incrementalmente na tela (Cf. [Evite uso de progressos](https://www.lukew.com/ff/entry.asp?1797)). O componente é projetado para ser usado **diretamente em seus componentes**. Por exemplo: @@ -31,19 +31,19 @@ Por padrão, o skeleton pulsa, mas você pode mudar a animação para uma onda o {{"demo": "pages/components/skeleton/Animations.js"}} -## Exemplo YouTube +### Pulsate example {{"demo": "pages/components/skeleton/YouTube.js", "defaultCodeOpen": false}} -## Exemplo Facebook +### Wave example {{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}} -## Inferring dimensions +## Inferindo dimensões -In addition to accepting `width` and `height` props, the component can also infer the dimensions. +Além de aceitar as propriedades `width` e `height`, o componente também pode inferir as dimensões. -It works well when it comes to typography as its height is set using `em` units. +Ele funciona bem quando se trata de tipografia, pois sua altura é definida usando a unidade `em`. ```jsx @@ -53,7 +53,7 @@ It works well when it comes to typography as its height is set using `em` units. {{"demo": "pages/components/skeleton/SkeletonTypography.js", "defaultCodeOpen": false}} -But when it comes to other components, you may not want to repeat the width and height. In these instances, you can pass `children` and it will infer its width and height from them. +Mas quando se trata de outros componentes, você pode não querer repetir a largura e a altura. Nesses casos, você pode passar componentes como `children`, e ele vai inferir a sua largura e a altura a partir deles. ```jsx loading @@ -61,4 +61,10 @@ loading : ``` -{{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} \ No newline at end of file +{{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} + +## Acessibilidade + +Skeleton screens provide an alternative to the traditional spinner methods. Rather than showing an abstract widget, skeleton screens create anticipation of what is to come and reduce cognitive load. + +The background color of the skeleton uses the least amount of luminance to be visible in good conditions (good ambient light, good screen, no visual impairments). \ No newline at end of file diff --git a/docs/src/pages/components/skeleton/skeleton-ru.md b/docs/src/pages/components/skeleton/skeleton-ru.md index 4e2df33fff35f5..1d42c76e646c62 100644 --- a/docs/src/pages/components/skeleton/skeleton-ru.md +++ b/docs/src/pages/components/skeleton/skeleton-ru.md @@ -31,11 +31,11 @@ components: Skeleton {{"demo": "pages/components/skeleton/Animations.js"}} -## Пример в качестве YouTube +### Pulsate example {{"demo": "pages/components/skeleton/YouTube.js", "defaultCodeOpen": false}} -## Пример в качестве Facebook +### Wave example {{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}} @@ -61,4 +61,10 @@ loading : ``` -{{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} \ No newline at end of file +{{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} + +## Доступность + +Skeleton screens provide an alternative to the traditional spinner methods. Rather than showing an abstract widget, skeleton screens create anticipation of what is to come and reduce cognitive load. + +The background color of the skeleton uses the least amount of luminance to be visible in good conditions (good ambient light, good screen, no visual impairments). \ No newline at end of file diff --git a/docs/src/pages/components/skeleton/skeleton-zh.md b/docs/src/pages/components/skeleton/skeleton-zh.md index 4c372ff660a643..e7fc6ef00d1488 100644 --- a/docs/src/pages/components/skeleton/skeleton-zh.md +++ b/docs/src/pages/components/skeleton/skeleton-zh.md @@ -31,19 +31,19 @@ components: Skeleton {{"demo": "pages/components/skeleton/Animations.js"}} -## YouTube 示例 +### Pulsate example {{"demo": "pages/components/skeleton/YouTube.js", "defaultCodeOpen": false}} -## Facebook 示例 +### Wave example {{"demo": "pages/components/skeleton/Facebook.js", "defaultCodeOpen": false, "bg": true}} -## Inferring dimensions +## 推断尺寸 -In addition to accepting `width` and `height` props, the component can also infer the dimensions. +除了接受 `width` 和 `height` props 外，组件还可以推断出尺寸。 -It works well when it comes to typography as its height is set using `em` units. +当涉及到排版时，它很好用，因为它的高度是用 `em` 单位设置的。 ```jsx @@ -53,7 +53,7 @@ It works well when it comes to typography as its height is set using `em` units. {{"demo": "pages/components/skeleton/SkeletonTypography.js", "defaultCodeOpen": false}} -But when it comes to other components, you may not want to repeat the width and height. In these instances, you can pass `children` and it will infer its width and height from them. +但是，当涉及到其他组件时，你可能不想重复宽度和 高度 在这些情况下，你可以通过 `children`，然后它将会 从它们中推断出它的宽度和高度。 ```jsx loading @@ -61,4 +61,10 @@ loading : ``` -{{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} \ No newline at end of file +{{"demo": "pages/components/skeleton/SkeletonChildren.js", "defaultCodeOpen": false}} + +## 可访问性 + +Skeleton screens provide an alternative to the traditional spinner methods. Rather than showing an abstract widget, skeleton screens create anticipation of what is to come and reduce cognitive load. + +The background color of the skeleton uses the least amount of luminance to be visible in good conditions (good ambient light, good screen, no visual impairments). \ No newline at end of file diff --git a/docs/src/pages/components/slider/slider-zh.md b/docs/src/pages/components/slider/slider-zh.md index c23dd90432491c..22926d2e34ca78 100644 --- a/docs/src/pages/components/slider/slider-zh.md +++ b/docs/src/pages/components/slider/slider-zh.md @@ -25,7 +25,7 @@ components: Slider {{"demo": "pages/components/slider/DiscreteSlider.js"}} -### Small steps +### 小步走 您可以更改默认的步进增量。 @@ -57,7 +57,7 @@ components: Slider ## 带输入的滑块 -In this example an input allows a discrete value to be set. +在这个例子中，输入允许设置一个离散值。 {{"demo": "pages/components/slider/InputSlider.js"}} @@ -77,7 +77,7 @@ Track 显示可供用户选择的范围。 ### 移除 track -track 可以通过设置 `track={false}` 来禁用。 +可以通过设置 `track={false}` 来禁用。 {{"demo": "pages/components/slider/TrackFalseSlider.js"}} @@ -89,7 +89,7 @@ track 可以通过设置 `track={false}` 来禁用。 ## 非线性缩放 -You can use the `scale` prop to represent the `value` on a different scale. 例如，下面的例子中，*x* 的值表示 *10^x*。 +你可以使用 `scale` prop 来表示不同比例的 `值`。 例如，下面的例子中，*x* 的值表示 *10^x*。 {{"demo": "pages/components/slider/NonLinearSlider.js"}} @@ -97,7 +97,7 @@ You can use the `scale` prop to represent the `value` on a different scale. 例 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider) -The component handles most of the work necessary to make it accessible. 但是，你需要确保： +该组件处理了大部分必要的工作，使之应用可访问性。 但是，你需要确保： -- Each thumb has a user-friendly label (`aria-label`, `aria-labelledby` or `getAriaLabel` prop). -- Each thumb has a user-friendly text for its current value. 除非数值的含义显而易见。 你可以通过`getAriaValueText` 或者 `aria-valuetext` 更改提示气泡的名称。 \ No newline at end of file +- 每个箭头都有一个用户友好的标签（`aria-label`、`aria-labelledby` 或 `getAriaLabel` prop）。 +- 每一个箭头的当前值都有一个方便用户阅读的文字。 除非数值的含义显而易见。 你可以通过`getAriaValueText` 或者 `aria-valuetext` 更改提示气泡的名称。 \ No newline at end of file diff --git a/docs/src/pages/components/snackbars/snackbars-zh.md b/docs/src/pages/components/snackbars/snackbars-zh.md index 7e6f61c0dea706..96c76a8b9648e3 100644 --- a/docs/src/pages/components/snackbars/snackbars-zh.md +++ b/docs/src/pages/components/snackbars/snackbars-zh.md @@ -29,7 +29,7 @@ Snackbars 包含一行直接与所执行操作相关的文本。 它们可能包 ## 定位的消息条 -In wide layouts, snackbars can be left-aligned or center-aligned if they are consistently placed on the same spot at the bottom of the screen, however there may be circumstances where the placement of the snackbar needs to be more flexible. You can control the position of the snackbar by specifying the `anchorOrigin` prop. +在宽大的布局中，如果消息条始终放在屏幕底部的同一位置，那么可以左对齐或中间对齐，但在某些情况下，消息条的位置可能需要更加灵活。 你可以通过指定 `anchorOrigin` prop 来控制消息条的位置。 {{"demo": "pages/components/snackbars/PositionedSnackbar.js"}} @@ -73,7 +73,7 @@ In wide layouts, snackbars can be left-aligned or center-aligned if they are con ![评星](https://img.shields.io/github/stars/iamhosseindhv/notistack.svg?style=social&label=Stars) ![npm下载](https://img.shields.io/npm/dm/notistack.svg) -以下例子演示了如何使用 [notistack](https://github.com/iamhosseindhv/notistack)。 notistack has an **imperative API** 可以轻松地显示一串消息条，而无需处理其打开/关闭状态。 It also enables you to **stack** them on top of one another (尽管 Material Design 规范并不鼓励这样做). +以下例子演示了如何使用 [notistack](https://github.com/iamhosseindhv/notistack)。 notistack 有一个 **imperative API** 可以轻松地显示一串消息条，且无需处理其打开/关闭状态。 它还可以让你把它们 **堆叠** 在一起（尽管 Material Design 规范不鼓励这样做）。 {{"demo": "pages/components/snackbars/IntegrationNotistack.js", "defaultCodeOpen": false}} @@ -81,4 +81,4 @@ In wide layouts, snackbars can be left-aligned or center-aligned if they are con (WAI-ARIA: https://www.w3.org/TR/wai-aria-1.1/#alert) -- By default, the snackbar won't auto-hide. However, if you decide to use the `autoHideDuration` prop, it's recommended to give the user [sufficient time](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) to respond. \ No newline at end of file +- 默认情况下，消息条不会自动隐藏。 但是，如果您决定使用 `autoHideDuration` prop，建议给用户 [足够的时间](https://www.w3.org/TR/UNDERSTANDING-WCAG20/time-limits.html) 来响应。 \ No newline at end of file diff --git a/docs/src/pages/components/steppers/steppers-zh.md b/docs/src/pages/components/steppers/steppers-zh.md index 11cba268dafa60..e27035c34ca47e 100644 --- a/docs/src/pages/components/steppers/steppers-zh.md +++ b/docs/src/pages/components/steppers/steppers-zh.md @@ -24,7 +24,7 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco {{"demo": "pages/components/steppers/HorizontalLinearStepper.js", "bg": true}} -### Linear - Alternative Label +### 线性步骤条 - 备选标签 您可以将标签放置在节点图标之下。请在 `Stepper` 组件中设置 `alternativeLabel` 这一属性。 @@ -46,17 +46,17 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco {{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js", "bg": true}} -### Non-linear - Alternative Label +### 非线性步骤条 - 备选标签 您可以将标签放置在节点图标之下。请在 `Stepper` 组件中设置 `alternativeLabel` 这一属性。 {{"demo": "pages/components/steppers/HorizontalNonLinearAlternativeLabelStepper.js", "bg": true}} -### Non-linear - Error Step +### 非线性步骤条 - 错误步骤 {{"demo": "pages/components/steppers/HorizontalNonLinearStepperWithError.js", "bg": true}} -## 垂直步进器 +## 垂直步骤条 {{"demo": "pages/components/steppers/VerticalLinearStepper.js", "bg": true}} @@ -64,19 +64,19 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco 该组件实现了适用于移动设备的紧凑型步进器。 有关其详情, 请参阅 [移动步骤](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps)。 -### Text +### 文本 本质上，这是一个被正确定位的 back/next 按钮。 您必须自己实现文本描述，但是，下面提供了一个参考示例。 {{"demo": "pages/components/steppers/TextMobileStepper.js", "bg": true}} -### Text with Carousel effect +### 文本与幻灯片效果 这个实例与之前的非常相似，不同之处在于使用[ react-swipeable-views ](https://github.com/oliviertassinari/react-swipeable-views)以进行步骤转换。 {{"demo": "pages/components/steppers/SwipeableTextMobileStepper.js", "bg": true}} -### Dots +### 点状 当步骤的数字不是特别明显时使用点状标记。 diff --git a/docs/src/pages/components/switches/switches-pt.md b/docs/src/pages/components/switches/switches-pt.md index 297804fbd772e4..2550d85d997154 100644 --- a/docs/src/pages/components/switches/switches-pt.md +++ b/docs/src/pages/components/switches/switches-pt.md @@ -39,7 +39,7 @@ Gosta de interruptores menores? Use a propriedade `size`. {{"demo": "pages/components/switches/SwitchesSize.js"}} -## Posicionamento do Rótulo +## Label placement Você pode alterar o posicionamento do rótulo: diff --git a/docs/src/pages/components/switches/switches-zh.md b/docs/src/pages/components/switches/switches-zh.md index e0250f2abb5faa..d97e357deed45f 100644 --- a/docs/src/pages/components/switches/switches-zh.md +++ b/docs/src/pages/components/switches/switches-zh.md @@ -31,7 +31,7 @@ components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel {{"demo": "pages/components/switches/CustomizedSwitches.js"}} -🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/switch). +🎨如果你是在寻找灵感，你可以查看 [MUI Treasury's customization examples](https://mui-treasury.com/styles/switch)。 ## 尺寸 diff --git a/docs/src/pages/components/tables/tables-zh.md b/docs/src/pages/components/tables/tables-zh.md index 93b756d7c9d97f..1c97fd1b66e24a 100644 --- a/docs/src/pages/components/tables/tables-zh.md +++ b/docs/src/pages/components/tables/tables-zh.md @@ -79,9 +79,9 @@ components: Table, TableBody, TableCell, TableContainer, TableFooter, TableHead, {{"demo": "pages/components/tables/StickyHeadTable.js", "bg": true}} -## Collapsible table +## 可折叠表格 -An example of a table with expandable rows, revealing more information. It utilizes the [`Collapse`](/api/collapse/) component. +以可扩展行的表格为例，揭示更多信息。 它利用了 [`Collapse`](/api/collapse/) 组件。 {{"demo": "pages/components/tables/CollapsibleTable.js", "bg": true}} 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 44a5778bd01aef..d7834975f1deb9 100644 --- a/docs/src/pages/components/text-fields/text-fields-zh.md +++ b/docs/src/pages/components/text-fields/text-fields-zh.md @@ -103,7 +103,7 @@ components: FilledInput, FormControl, FormHelperText, Input, InputAdornment, Inp {{"demo": "pages/components/text-fields/CustomizedInputBase.js", "bg": true}} -🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/text-field). +🎨如果你是在寻找灵感，你可以查看 [MUI Treasury's customization examples](https://mui-treasury.com/styles/text-field)。 ## 局限性 diff --git a/docs/src/pages/components/textarea-autosize/textarea-autosize-zh.md b/docs/src/pages/components/textarea-autosize/textarea-autosize-zh.md index c8709b1564076e..de1fbbf4bd991b 100644 --- a/docs/src/pages/components/textarea-autosize/textarea-autosize-zh.md +++ b/docs/src/pages/components/textarea-autosize/textarea-autosize-zh.md @@ -1,11 +1,11 @@ --- -title: Textarea Autosize React component +title: React Textarea Autosize 自适应文本框组件 components: TextareaAutosize --- -# Textarea 自动调整大小 +# Textarea Autosize 自适应文本框 -

    一个随内容增长的React的文本框组件。

    +

    一个自适应内容大小的 React 文本框组件。

    - 📦 [2.1 kB gzipped](/size-snapshot) diff --git a/docs/src/pages/components/toggle-button/toggle-button-zh.md b/docs/src/pages/components/toggle-button/toggle-button-zh.md index bb11c7c170e954..ed025ba108fb18 100644 --- a/docs/src/pages/components/toggle-button/toggle-button-zh.md +++ b/docs/src/pages/components/toggle-button/toggle-button-zh.md @@ -7,11 +7,11 @@ components: ToggleButton, ToggleButtonGroup

    Toggle Buttons 可用于对相关选项进行分组。

    -为了强调组合之间的关联，每一组 [Toggle buttons](https://material.io/components/buttons#toggle-button) 应该共享一个容器。 The `ToggleButtonGroup` controls the selected state of its child buttons when given its own `value` prop. +为了强调组合之间的关联，每一组 [Toggle buttons](https://material.io/components/buttons#toggle-button) 应该共享一个容器。 当给定 ToggleButtonGroup（切换按钮） 的 `value` prop 时，那么 `ToggleButtonGroup` 就可以控制其子按钮的选择状态。 ## 单选 -Text justification toggle buttons present options for left, right, center, full, and justified text with only one item available for selection at a time. 选择一个选项则会取消其他选项。 +文本对齐的切换按钮提供了 left, right, center, full 和 justified 的选项，但是每次只能选择一个项目。 选择一个选项则会取消其他选项。 {{"demo": "pages/components/toggle-button/ToggleButtons.js"}} @@ -27,7 +27,7 @@ Text justification toggle buttons present options for left, right, center, full, {{"demo": "pages/components/toggle-button/ToggleButtonSizes.js"}} -## Vertical buttons +## 垂直排列的按钮 {{"demo": "pages/components/toggle-button/VerticalToggleButtons.js"}} @@ -63,5 +63,5 @@ const handleAlignment = (event, newAlignment) => { ## 可访问性 -- ToggleButtonGroup has `role="group"`. You should provide an accessible label with `aria-label="label"`, `aria-labelledby="id"` or `