From 98e48ba5df2ea97b8a1a94711fb6c443f91140f2 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 14 Jun 2020 10:17:57 +0200 Subject: [PATCH 001/284] [core] Batch small changes (#21419) --- CHANGELOG.md | 10 ++++---- docs/pages/company/software-engineer.js | 24 +++++++++++++++++++ docs/src/modules/components/AppFooter.js | 2 -- docs/src/modules/components/AppFrame.js | 5 ++-- docs/src/modules/components/TopLayoutBlog.js | 3 +-- .../modules/components/TopLayoutCompany.js | 3 +-- docs/src/pages/company/jobs/jobs.md | 4 ++-- .../software-engineer/software-engineer.md | 4 ++-- .../TablePagination/TablePagination.test.js | 4 ++-- 9 files changed, 41 insertions(+), 18 deletions(-) create mode 100644 docs/pages/company/software-engineer.js diff --git a/CHANGELOG.md b/CHANGELOG.md index 753aaf1dbd4b01..984316f73025f5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -3,9 +3,11 @@ ## 4.10.2 ###### *June 11, 2020* -This release marks the end of the development on the `v4.x` branch. We are moving all ongoing efforts to v5 (`next` branch). -This means a feature freeze on v4. We will only accept critical bug fixes and security patches. -You can follow our progress on the [v5 milestone](https://github.com/mui-org/material-ui/milestone/35). We will make the documentation of the v5 alpha releases available under https://next.material-ui.com/. +⚠️ This release marks the end of the active development on the v4.x versions, after 18 months of development. +We are moving all ongoing efforts to v5 (`next` branch) ✨. +This means a feature freeze on v4. The development of this version will be limited to important bug fixes, security patches, and easing the upgrade path to v5. + +You can follow our progress on the [v5 milestone](https://github.com/mui-org/material-ui/milestone/35). We will make the documentation of the v5 alpha releases available under https://next.material-ui.com/, starting next week (weekly releases, as usual). Big thanks to the 19 contributors who made this release possible. Here are some highlights ✨: @@ -35,7 +37,7 @@ Big thanks to the 19 contributors who made this release possible. Here are some - Minify error messages in production (#21214) @eps1lon. - Using the [React error decoder](https://reactjs.org/docs/error-decoder.html/) as inspiration, the exception thrown by Material-UI in production are no minified. + Using the [React error decoder](https://reactjs.org/docs/error-decoder.html/) as inspiration, the exceptions thrown by Material-UI in production are now minified. You will be redirected to the documentation to [decode the error](https://material-ui.com/production-error/?code=4&args%5B%5D=500). ### `@material-ui/core@v4.10.2` diff --git a/docs/pages/company/software-engineer.js b/docs/pages/company/software-engineer.js new file mode 100644 index 00000000000000..8d9be28fda8606 --- /dev/null +++ b/docs/pages/company/software-engineer.js @@ -0,0 +1,24 @@ +import React from 'react'; +import TopLayoutCompany from 'docs/src/modules/components/TopLayoutCompany'; +import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; + +const pageFilename = 'company/software-engineer'; +const requireDemo = require.context( + 'docs/src/pages/company/software-engineer', + false, + /\.(js|tsx)$/, +); +const requireRaw = require.context( + '!raw-loader!../../src/pages/company/software-engineer', + false, + /\.(js|md|tsx)$/, +); + +export default function Page({ demos, docs }) { + return ; +} + +Page.getInitialProps = () => { + const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); + return { demos, docs }; +}; diff --git a/docs/src/modules/components/AppFooter.js b/docs/src/modules/components/AppFooter.js index a973d0b6a3b010..0eb49aa9b347cc 100644 --- a/docs/src/modules/components/AppFooter.js +++ b/docs/src/modules/components/AppFooter.js @@ -140,13 +140,11 @@ function AppFooter(props) { Contact Us - {/*
  • Jobs
    • - */} diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js index 5933ee1e1ad145..b444a657d0e696 100644 --- a/docs/src/modules/components/AppFrame.js +++ b/docs/src/modules/components/AppFrame.js @@ -144,7 +144,7 @@ const styles = (theme) => ({ }); function AppFrame(props) { - const { children, classes } = props; + const { children, classes, disableDrawer = false } = props; const theme = useTheme(); const t = useSelector((state) => state.options.t); const userLanguage = useSelector((state) => state.options.userLanguage); @@ -188,7 +188,7 @@ function AppFrame(props) { let navIconClassName = ''; let appBarClassName = classes.appBar; - if (activePage?.disableDrawer === true) { + if (activePage?.disableDrawer === true || disableDrawer === true) { disablePermanent = true; appBarClassName += ` ${classes.appBarHome}`; } else { @@ -349,6 +349,7 @@ function AppFrame(props) { AppFrame.propTypes = { children: PropTypes.node.isRequired, classes: PropTypes.object.isRequired, + disableDrawer: PropTypes.node, }; export default withStyles(styles)(AppFrame); diff --git a/docs/src/modules/components/TopLayoutBlog.js b/docs/src/modules/components/TopLayoutBlog.js index a4e67003bf29e6..4f696c37860dee 100644 --- a/docs/src/modules/components/TopLayoutBlog.js +++ b/docs/src/modules/components/TopLayoutBlog.js @@ -45,11 +45,10 @@ const styles = (theme) => ({ function TopLayoutBlog(props) { const { classes, docs } = props; - const { description, rendered, title } = docs.en; return ( - +
    diff --git a/docs/src/modules/components/TopLayoutCompany.js b/docs/src/modules/components/TopLayoutCompany.js index c3268014c7543d..dd8da10cc4e984 100644 --- a/docs/src/modules/components/TopLayoutCompany.js +++ b/docs/src/modules/components/TopLayoutCompany.js @@ -24,11 +24,10 @@ const styles = (theme) => ({ function TopLayoutCompany(props) { const { classes, docs } = props; - const { description, rendered, title } = docs.en; return ( - +
    diff --git a/docs/src/pages/company/jobs/jobs.md b/docs/src/pages/company/jobs/jobs.md index 4bc08b3a11267f..a2c3b7e8052d9c 100644 --- a/docs/src/pages/company/jobs/jobs.md +++ b/docs/src/pages/company/jobs/jobs.md @@ -2,5 +2,5 @@

    Join our team!

    - +- [Senior Software Engineer](/company/software-engineer/) • Remote
    + We are looking for a software engineer to help support our open source team, assist the Material-UI community and grow our premium products. Join us in our mission to make React application development fun and simple. diff --git a/docs/src/pages/company/software-engineer/software-engineer.md b/docs/src/pages/company/software-engineer/software-engineer.md index a63e1544c5dd52..abd0e7c0d68ebe 100644 --- a/docs/src/pages/company/software-engineer/software-engineer.md +++ b/docs/src/pages/company/software-engineer/software-engineer.md @@ -1,6 +1,6 @@ # Senior Software Engineer -

    We are looking for a software engineer to help support our open source team, assist the Material-UI community and grow our premium products. Join us in our mission to make React application development fun by making it simple.

    +

    We are looking for a software engineer to help support our open source team, assist the Material-UI community and grow our premium products. Join us in our mission to make React application development fun and simple.

    ## About Us @@ -21,7 +21,7 @@ Material-UI started back in 2014 to unify React and Material Design. Today, Mate ## Why we’re hiring -Both our open source products and community, and our premium products are [growing fast](https://www.rank2traffic.com/material-ui.com) and we need talented engineers to keep that going! +Both our open source products and community, and our premium products are [growing fast](https://www.similarweb.com/website/material-ui.com) and we need talented engineers to keep that going! We need help to continue to improve the health of Material-UI open source: make the library easier to use, make it support more use cases, improve performance, make it more accessible, and make it easier to customize to support [in-house design systems](https://medium.com/google-design/state-of-design-systems-2019-ff5f26ada71). We also need help keeping up with the community, guiding developers to answers, and just generally being a positive presence in the open source community. diff --git a/packages/material-ui/src/TablePagination/TablePagination.test.js b/packages/material-ui/src/TablePagination/TablePagination.test.js index ef38fb31a5bd0b..9d7108aa0494e7 100644 --- a/packages/material-ui/src/TablePagination/TablePagination.test.js +++ b/packages/material-ui/src/TablePagination/TablePagination.test.js @@ -19,12 +19,12 @@ describe('', () => { before(() => { classes = getClasses( - {}} page={0} rowsPerPage={10} />, + , ); }); describeConformance( - {}} page={0} rowsPerPage={10} />, + , () => ({ classes, inheritComponent: TableCell, From 021ed58e5abefb2f8584275d884f029f274d8838 Mon Sep 17 00:00:00 2001 From: Steffen Teichmann <44507274+tchmnn@users.noreply.github.com> Date: Sun, 14 Jun 2020 20:12:03 +0200 Subject: [PATCH 002/284] [docs] Fix version in localized urls (#21442) --- docs/src/modules/components/AppDrawer.js | 4 +++- docs/src/modules/components/AppFooter.js | 4 +++- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/docs/src/modules/components/AppDrawer.js b/docs/src/modules/components/AppDrawer.js index ead6ab7fa7a9bc..d63d9629470f0b 100644 --- a/docs/src/modules/components/AppDrawer.js +++ b/docs/src/modules/components/AppDrawer.js @@ -140,6 +140,8 @@ const iOS = process.browser && /iPad|iPhone|iPod/.test(navigator.userAgent); function AppDrawer(props) { const { classes, className, disablePermanent, mobileOpen, onClose, onOpen } = props; const { activePage, pages } = React.useContext(PageContext); + const userLanguage = useSelector((state) => state.options.userLanguage); + const languagePrefix = userLanguage === 'en' ? '' : `/${userLanguage}`; const t = useSelector((state) => state.options.t); const drawer = ( @@ -153,7 +155,7 @@ function AppDrawer(props) { {`v${process.env.LIB_VERSION}`} diff --git a/docs/src/modules/components/AppFooter.js b/docs/src/modules/components/AppFooter.js index 0eb49aa9b347cc..033d1e4ce20a99 100644 --- a/docs/src/modules/components/AppFooter.js +++ b/docs/src/modules/components/AppFooter.js @@ -52,6 +52,8 @@ const styles = (theme) => ({ function AppFooter(props) { const { classes } = props; + const userLanguage = useSelector((state) => state.options.userLanguage); + const languagePrefix = userLanguage === 'en' ? '' : `/${userLanguage}`; const t = useSelector((state) => state.options.t); return ( @@ -154,7 +156,7 @@ function AppFooter(props) { versionNumber: ( {`v${process.env.LIB_VERSION}`} From 86e10dacae77e1bc3f7aa99506941df4c279d606 Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sun, 14 Jun 2020 20:52:32 +0200 Subject: [PATCH 003/284] [docs] Sync translations (#21445) --- .../about-the-lab/about-the-lab-aa.md | 10 + .../about-the-lab/about-the-lab-de.md | 20 +- .../about-the-lab/about-the-lab-es.md | 18 ++ .../about-the-lab/about-the-lab-fr.md | 22 ++- .../about-the-lab/about-the-lab-ja.md | 22 ++- .../about-the-lab/about-the-lab-pt.md | 18 ++ .../about-the-lab/about-the-lab-ru.md | 20 +- .../about-the-lab/about-the-lab-zh.md | 18 ++ docs/src/pages/components/alert/alert-pt.md | 10 +- .../autocomplete/autocomplete-zh.md | 2 +- .../pages/components/avatars/avatars-zh.md | 24 +-- docs/src/pages/components/badges/badges-zh.md | 12 +- docs/src/pages/components/box/box-zh.md | 2 +- .../components/breadcrumbs/breadcrumbs-zh.md | 10 +- .../button-group/button-group-zh.md | 12 +- .../pages/components/buttons/buttons-zh.md | 10 +- docs/src/pages/components/chips/chips-pt.md | 2 +- docs/src/pages/components/chips/chips-zh.md | 8 +- .../pages/components/dividers/dividers-zh.md | 8 +- .../floating-action-button-zh.md | 16 +- docs/src/pages/components/grid/grid-zh.md | 2 +- docs/src/pages/components/icons/icons-fr.md | 2 +- docs/src/pages/components/icons/icons-ja.md | 2 +- docs/src/pages/components/links/links-zh.md | 30 +-- docs/src/pages/components/modal/modal-zh.md | 48 ++--- docs/src/pages/components/popper/popper-zh.md | 4 +- docs/src/pages/components/portal/portal-zh.md | 2 +- .../radio-buttons/radio-buttons-zh.md | 18 +- docs/src/pages/components/slider/slider-zh.md | 54 +++--- .../pages/components/steppers/steppers-zh.md | 10 +- .../pages/components/switches/switches-zh.md | 32 ++-- docs/src/pages/components/tables/tables-aa.md | 2 +- docs/src/pages/components/tables/tables-de.md | 2 +- docs/src/pages/components/tables/tables-es.md | 2 +- docs/src/pages/components/tables/tables-fr.md | 2 +- docs/src/pages/components/tables/tables-ja.md | 2 +- docs/src/pages/components/tables/tables-pt.md | 2 +- docs/src/pages/components/tables/tables-ru.md | 2 +- docs/src/pages/components/tables/tables-zh.md | 2 +- docs/src/pages/components/tabs/tabs-ja.md | 2 +- docs/src/pages/components/tabs/tabs-pt.md | 4 +- .../pages/components/tooltips/tooltips-zh.md | 52 +++--- .../components/transitions/transitions-zh.md | 4 +- .../use-media-query/use-media-query-zh.md | 58 +++--- .../breakpoints/breakpoints-pt.md | 6 +- .../src/pages/customization/color/color-pt.md | 18 +- .../customization/components/components-zh.md | 18 +- .../pages/customization/density/density-zh.md | 22 +-- .../pages/customization/globals/globals-zh.md | 10 +- .../pages/customization/palette/palette-pt.md | 36 ++-- .../pages/customization/palette/palette-zh.md | 2 +- .../pages/customization/theming/theming-pt.md | 2 +- .../pages/customization/theming/theming-zh.md | 88 ++++----- .../customization/typography/typography-zh.md | 2 +- .../related-projects/related-projects-zh.md | 2 +- .../supported-platforms-pt.md | 2 +- docs/src/pages/guides/api/api-pt.md | 2 +- .../guides/composition/composition-zh.md | 2 +- .../interoperability/interoperability-pt.md | 6 +- .../interoperability/interoperability-zh.md | 10 +- .../pages/guides/typescript/typescript-pt.md | 2 +- docs/src/pages/production-error/index-pt.md | 6 +- docs/src/pages/styles/advanced/advanced-zh.md | 172 +++++++++--------- docs/src/pages/system/api/api-fr.md | 2 +- docs/src/pages/system/basics/basics-fr.md | 2 +- docs/src/pages/system/borders/borders-fr.md | 2 +- docs/src/pages/system/display/display-fr.md | 16 +- docs/src/pages/system/display/display-zh.md | 20 +- docs/src/pages/system/flexbox/flexbox-fr.md | 24 +-- docs/src/pages/system/palette/palette-fr.md | 2 +- .../pages/system/positions/positions-fr.md | 16 +- docs/src/pages/system/shadows/shadows-fr.md | 6 +- docs/src/pages/system/sizing/sizing-fr.md | 18 +- docs/src/pages/system/spacing/spacing-fr.md | 2 +- .../pages/system/typography/typography-fr.md | 2 +- 75 files changed, 628 insertions(+), 496 deletions(-) diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-aa.md b/docs/src/pages/components/about-the-lab/about-the-lab-aa.md index 11e4640653bd1f..05033260e2769f 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-aa.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-aa.md @@ -27,4 +27,14 @@ crwdns109523:0crwdne109523:0 crwdns109525:0crwdne109525:0 ```sh crwdns89138:0crwdne89138:0 +``` + +## crwdns133576:0crwdne133576:0 + +crwdns133578:0crwdne133578:0 crwdns133580:0crwdne133580:0 + +```tsx +crwdns133582:0{ + backgroundColor: 'red', + }crwdne133582:0 ``` \ No newline at end of file diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-de.md b/docs/src/pages/components/about-the-lab/about-the-lab-de.md index 581766d202cdb6..907aad2faa2a18 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-de.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-de.md @@ -27,7 +27,7 @@ npm install @material-ui/lab yarn add @material-ui/lab ``` -The lab has a peer dependency on the core components. If you are not already using Material-UI in your project, you can install it with: +Das Labor hat eine Peer-Abhängigkeit von den Kernkomponenten. Wenn Sie in Ihrem Projekt noch keine Material-UI verwenden, können Sie es mit folgendem installieren: ```sh // mit npm @@ -35,4 +35,22 @@ npm install @material-ui/core // mit yarn yarn add @material-ui/core +``` + +## TypeScript + +In order to benefit from the [CSS overrides](/customization/globals/#css) and [default prop customization](/customization/globals/#default-props) with the theme, TypeScript users need to import the following types. Internally, it uses [module augmentation](/guides/typescript/#customization-of-theme) to extend the default theme structure with the extension components available in the lab. + +```tsx +import type '@material-ui/lab/themeAugmentation'; + +const theme = createMuiTheme({ + overrides: { + MuiTimeline: { + root: { + backgroundColor: 'red', + }, + }, + }, +}); ``` \ No newline at end of file diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-es.md b/docs/src/pages/components/about-the-lab/about-the-lab-es.md index e0f530be270202..a4d703eda8f8c5 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-es.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-es.md @@ -35,4 +35,22 @@ npm install @material-ui/core // usando yarn yarn add @material-ui/core +``` + +## TypeScript + +In order to benefit from the [CSS overrides](/customization/globals/#css) and [default prop customization](/customization/globals/#default-props) with the theme, TypeScript users need to import the following types. Internally, it uses [module augmentation](/guides/typescript/#customization-of-theme) to extend the default theme structure with the extension components available in the lab. + +```tsx +import type '@material-ui/lab/themeAugmentation'; + +const theme = createMuiTheme({ + overrides: { + MuiTimeline: { + root: { + backgroundColor: 'red', + }, + }, + }, +}); ``` \ No newline at end of file diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-fr.md b/docs/src/pages/components/about-the-lab/about-the-lab-fr.md index 7c243e056f3ee7..c918d9278c218c 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-fr.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-fr.md @@ -17,7 +17,7 @@ For a component to be ready to move to the core, the following criteria are cons ## Installation -Install the package in your project directory with: +Installez le package dans votre répertoire de projet avec: ```sh // avec npm @@ -27,7 +27,7 @@ npm install @material-ui/lab yarn add @material-ui/lab ``` -The lab has a peer dependency on the core components. If you are not already using Material-UI in your project, you can install it with: +Le laboratoire dépend des composants du package principal. Si vous n'utilisez pas encore Material-UI dans votre projet, vous pouvez l'installer avec: ```sh // avec npm @@ -35,4 +35,22 @@ npm install @material-ui/core // avec yarn yarn add @material-ui/core +``` + +## TypeScript + +In order to benefit from the [CSS overrides](/customization/globals/#css) and [default prop customization](/customization/globals/#default-props) with the theme, TypeScript users need to import the following types. Internally, it uses [module augmentation](/guides/typescript/#customization-of-theme) to extend the default theme structure with the extension components available in the lab. + +```tsx +import type '@material-ui/lab/themeAugmentation'; + +const theme = createMuiTheme({ + overrides: { + MuiTimeline: { + root: { + backgroundColor: 'red', + }, + }, + }, +}); ``` \ No newline at end of file diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-ja.md b/docs/src/pages/components/about-the-lab/about-the-lab-ja.md index 2849e1893b12d2..1e39603519b82c 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-ja.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-ja.md @@ -17,7 +17,7 @@ Coreパッケージに移るためには以下の基準を考慮します。 ## インストール -Install the package in your project directory with: +次を使用して、プロジェクトディレクトリにパッケージをインストールします。 ```sh // with npm @@ -27,7 +27,7 @@ npm install @material-ui/lab yarn add @material-ui/lab ``` -The lab has a peer dependency on the core components. If you are not already using Material-UI in your project, you can install it with: +このラボには、コアコンポーネントへのピア依存関係があります。 プロジェクトでまだMaterial-UIを使用していない場合は、次のコマンドでインストールできます。 ```sh // npmの場合 @@ -35,4 +35,22 @@ npm install @material-ui/core // yarnの場合 yarn add @material-ui/core +``` + +## TypeScript + +In order to benefit from the [CSS overrides](/customization/globals/#css) and [default prop customization](/customization/globals/#default-props) with the theme, TypeScript users need to import the following types. Internally, it uses [module augmentation](/guides/typescript/#customization-of-theme) to extend the default theme structure with the extension components available in the lab. + +```tsx +import type '@material-ui/lab/themeAugmentation'; + +const theme = createMuiTheme({ + overrides: { + MuiTimeline: { + root: { + backgroundColor: 'red', + }, + }, + }, +}); ``` \ No newline at end of file diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-pt.md b/docs/src/pages/components/about-the-lab/about-the-lab-pt.md index 83c33c5923449e..29d6ed336d7529 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-pt.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-pt.md @@ -35,4 +35,22 @@ npm install @material-ui/core // usando yarn yarn add @material-ui/core +``` + +## TypeScript + +In order to benefit from the [CSS overrides](/customization/globals/#css) and [default prop customization](/customization/globals/#default-props) with the theme, TypeScript users need to import the following types. Internally, it uses [module augmentation](/guides/typescript/#customization-of-theme) to extend the default theme structure with the extension components available in the lab. + +```tsx +import type '@material-ui/lab/themeAugmentation'; + +const theme = createMuiTheme({ + overrides: { + MuiTimeline: { + root: { + backgroundColor: 'red', + }, + }, + }, +}); ``` \ No newline at end of file diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-ru.md b/docs/src/pages/components/about-the-lab/about-the-lab-ru.md index f7c95eba8c9d5a..759fa4285b14b2 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-ru.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-ru.md @@ -27,7 +27,7 @@ npm install @material-ui/lab yarn add @material-ui/lab ``` -The lab has a peer dependency on the core components. If you are not already using Material-UI in your project, you can install it with: +Пакет lab зависит напрямую от пакета основных компонентов. Если Material-UI ещё не использовался вашем проекте, вы можете установить его командой: ```sh // with npm @@ -35,4 +35,22 @@ npm install @material-ui/core // with yarn yarn add @material-ui/core +``` + +## TypeScript + +In order to benefit from the [CSS overrides](/customization/globals/#css) and [default prop customization](/customization/globals/#default-props) with the theme, TypeScript users need to import the following types. Internally, it uses [module augmentation](/guides/typescript/#customization-of-theme) to extend the default theme structure with the extension components available in the lab. + +```tsx +import type '@material-ui/lab/themeAugmentation'; + +const theme = createMuiTheme({ + overrides: { + MuiTimeline: { + root: { + backgroundColor: 'red', + }, + }, + }, +}); ``` \ No newline at end of file diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-zh.md b/docs/src/pages/components/about-the-lab/about-the-lab-zh.md index d90dc7bfd14e05..f604f8dc23de1c 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-zh.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-zh.md @@ -35,4 +35,22 @@ npm install @material-ui/core // 用 yarn 安装 yarn add @material-ui/core +``` + +## TypeScript + +In order to benefit from the [CSS overrides](/customization/globals/#css) and [default prop customization](/customization/globals/#default-props) with the theme, TypeScript users need to import the following types. Internally, it uses [module augmentation](/guides/typescript/#customization-of-theme) to extend the default theme structure with the extension components available in the lab. + +```tsx +import type '@material-ui/lab/themeAugmentation'; + +const theme = createMuiTheme({ + overrides: { + MuiTimeline: { + root: { + backgroundColor: 'red', + }, + }, + }, +}); ``` \ No newline at end of file diff --git a/docs/src/pages/components/alert/alert-pt.md b/docs/src/pages/components/alert/alert-pt.md index 2381be8772f43a..d83579f068dd17 100644 --- a/docs/src/pages/components/alert/alert-pt.md +++ b/docs/src/pages/components/alert/alert-pt.md @@ -41,7 +41,7 @@ A propriedade `icon` permite que você adicione um ícone no início do componen 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 a propriedade ícone como falso removerá o ícone completamente. +Definir a propriedade `icon` como falso removerá o ícone completamente. {{"demo": "pages/components/alert/IconAlerts.js"}} @@ -57,13 +57,13 @@ Duas variantes adicionais estão disponíveis – delineado e preenchido: {{"demo": "pages/components/alert/FilledAlerts.js"}} -## Aviso na tela +## Toast -Você pode usar o componente SnackBar para [exibir um aviso na tela](/components/snackbars/#customized-snackbars) com o componente Alert. +Você pode usar o componente Snackbar para [exibir um toast](/components/snackbars/#customized-snackbars) com o componente Alert. ## Cor -A propriedade `color` irá sobrescrever a cor padrão para a gravidade especificada. +A propriedade `color` irá sobrescrever a cor padrão para a severidade especificada. {{"demo": "pages/components/alert/ColorAlerts.js"}} @@ -75,4 +75,4 @@ Quando o componente é exibido de forma dinâmica, o conteúdo é automaticament 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 acessíveis por usuários que usam apenas o teclado. +As ações devem ter um índice de tabulação de 0 para que possam ser acessíveis por usuários que usam apenas o teclado. diff --git a/docs/src/pages/components/autocomplete/autocomplete-zh.md b/docs/src/pages/components/autocomplete/autocomplete-zh.md index c92771960b78a8..fbc0f518657a00 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-zh.md +++ b/docs/src/pages/components/autocomplete/autocomplete-zh.md @@ -195,7 +195,7 @@ const filterOptions = createFilterOptions({ {{"demo": "pages/components/autocomplete/Filter.js", "defaultCodeOpen": false}} -### 高级 +### Advanced 进阶 对于更复杂的过滤机制，譬如模糊匹配（fuzzy matching），我们推荐您看一下 [match-sorter](https://github.com/kentcdodds/match-sorter)。 就像这样： diff --git a/docs/src/pages/components/avatars/avatars-zh.md b/docs/src/pages/components/avatars/avatars-zh.md index 9e0fea3cab624d..484be7d8398eb5 100644 --- a/docs/src/pages/components/avatars/avatars-zh.md +++ b/docs/src/pages/components/avatars/avatars-zh.md @@ -3,47 +3,47 @@ title: React Avatar 头像组件 components: Avatar, AvatarGroup, Badge --- -# Avatar 头像 +# Avatar 头像组件

    在整个 material design 中，无论是在表格中还是到对话框菜单中，都可以找到使用头像的身影。

    ## 图片头像 -可以通过向组件传递标准的`img` 属性、`src` 或`srcSet`来创建图片头像。 +通过将标准 `img` 的属性 `src` 或 `srcSet` 传递到组件中，您可以创建图片头像。 {{"demo": "pages/components/avatars/ImageAvatars.js"}} ## 字母头像 -可以通过向`children`传递字符串的方式来创建字符头像。 +通过传入一个作为 `children`的字符串，您可以创建包含简单字符的头像组件。 {{"demo": "pages/components/avatars/LetterAvatars.js"}} ## 尺寸 -你可以通过改变`height` 以及`width` 的CSS属性来改变头像的尺寸。 +你可以通过改变 `height` 以及 `width` 这两个 CSS 属性来改变头像组件的尺寸。 {{"demo": "pages/components/avatars/SizeAvatars.js"}} ## 图标头像 -通过将图标作为` children `传递来创建图标头像。 +通过将图标作为 `children` 来传递来创建图标头像。 {{"demo": "pages/components/avatars/IconAvatars.js"}} ## 变种 -如果你需要矩形或圆角头像，请使用 `variant`属性。 +如果你需要矩形或圆角的头像组件，请使用 `variant`属性。 {{"demo": "pages/components/avatars/VariantAvatars.js"}} -## Fallbacks +## 回调函数 -如果在加载头像图片时发生错误，组件将切换到以下备选方案： +如果在加载头像组件时发生错误，组件将按照如下顺序切换到以下备选方案： -- 提供的children子元素 -- `alt`属性的首字母 -- 通用头像图标 +- 提供的 children 子元素 +- `alt` 文本的首字母 +- 一个通用头像图标组件 {{"demo": "pages/components/avatars/FallbackAvatars.js"}} @@ -53,6 +53,6 @@ components: Avatar, AvatarGroup, Badge {{"demo": "pages/components/avatars/GroupAvatars.js"}} -## 徽章 +## 带有徽章的组件 {{"demo": "pages/components/avatars/BadgeAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/badges/badges-zh.md b/docs/src/pages/components/badges/badges-zh.md index c06a04fedce050..698dc46dd3ba5e 100644 --- a/docs/src/pages/components/badges/badges-zh.md +++ b/docs/src/pages/components/badges/badges-zh.md @@ -5,7 +5,7 @@ components: Badge # Badge 徽章 -

    徽章会在其子项的右上角生成一个小徽章。

    +

    徽章组件会在其子项（们）的右上角生成一个小徽章。

    ## 基本徽章 @@ -31,24 +31,24 @@ components: Badge ## 最大值 -您可以使用 `max` 属性来限制徽章内容的最大值。 +您可以使用 `max` 属性来限制徽章组件内容的最大值。 {{"demo": "pages/components/badges/BadgeMax.js"}} ## 圆点徽章 -`dot` 属性会使得徽章渲染为一个小点。 这样的组件可以作为一个提示的工具，来说明有些值已经改变，但是不需要计数。 +通过 `dot` 属性，一个徽章会渲染为一个小小的点。 这样的话，可以在不给出具体计数的情况下，组件能够提示一下变化。 {{"demo": "pages/components/badges/DotBadge.js"}} -## 徽章组件的覆盖 +## 徽章组件的 overlap 属性 -您可以使用 `overlap` 这个属性，在封装的元素相对的一角来显示徽章组件。 +你可以使用 `overlap` 属性来将徽章组件放置到到封装的元素一个相对位置的角落。 {{"demo": "pages/components/badges/BadgeOverlap.js"}} ## 徽章组件的校准 -你可以使用 `anchorOrigin` 属性来移动徽章到包裹元素的任何角落。 +你可以使用 `anchorOrigin` 属性移把徽章组件移动到封装的元素的任何角落。 {{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}} \ No newline at end of file diff --git a/docs/src/pages/components/box/box-zh.md b/docs/src/pages/components/box/box-zh.md index 4e3a519c0d9a2f..1a8d61148ccc39 100644 --- a/docs/src/pages/components/box/box-zh.md +++ b/docs/src/pages/components/box/box-zh.md @@ -46,7 +46,7 @@ Box 组件有一个 `clone` 的属性，通过它您可以使用 React 克隆元 ``` -> ⚠️CSS 的特异性依赖于导入的顺序。 如果您希望确保覆写包装组件的样式，则需要在最后才导入 Box。 +> ⚠️CSS 的优先级依赖于导入的顺序。 如果您希望确保覆写包装组件的样式，则需要在最后才导入 Box。 ## API diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md index 1f6d04e3aabd74..a6d7caf5f9500a 100644 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md +++ b/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md @@ -11,15 +11,15 @@ components: Breadcrumbs, Link, Typography {{"demo": "pages/components/breadcrumbs/SimpleBreadcrumbs.js"}} -## 最后活跃的面包屑 +## 激活最后一个面包屑导航 -保持最后一个面包屑的互动性 +保持最后一个面包屑导航交互。 {{"demo": "pages/components/breadcrumbs/ActiveLastBreadcrumb.js"}} ## 自定义分隔符 -在以下的示例中，我们使用了两个字符串分隔符和一个SVG图标。 +在以下的示例中，我们使用了两个字符串分隔符和一个 SVG 图标。 {{"demo": "pages/components/breadcrumbs/CustomSeparator.js"}} @@ -41,11 +41,11 @@ components: Breadcrumbs, Link, Typography {{"demo": "pages/components/breadcrumbs/RouterBreadcrumbs.js", "bg": true}} -## 可访问性 +## 无障碍设计 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#breadcrumb) -请务必在 `面包屑导航`组件上加上`aria-label`的描述。 +请务必在`面包屑导航`组件上加上 `aria-label` 的描述。 这个组件的可访问性依赖于： 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 979c1c279b9f6d..96be393937ae8c 100644 --- a/docs/src/pages/components/button-group/button-group-zh.md +++ b/docs/src/pages/components/button-group/button-group-zh.md @@ -1,17 +1,17 @@ --- -title: React ButtonGroup按钮组组件 +title: React ButtonGroup 按钮组组件 components: Button, ButtonGroup --- -# Button groups 按钮组 +# Button groups 按钮组组件 -

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

    +

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

    ## Basic button group 基本的按钮组 {{"demo": "pages/components/button-group/BasicButtonGroup.js"}} -## Basic button group 大小和颜色 +## 大小和颜色 {{"demo": "pages/components/button-group/GroupSizesColors.js"}} @@ -21,11 +21,11 @@ components: Button, ButtonGroup ## Split button 分体式按钮 -`ButtonGroup` 也可用于创建 split button。 下拉列表可以用于更改按钮相关的操作（如本例所示），或者用于立即触发一个相关的操作。 +`按钮组组件`也可用于创建分体式按钮。 下拉列表可以用于更改按钮相关的操作（如本例所示），或者用于立即触发一个相关的操作。 {{"demo": "pages/components/button-group/SplitButton.js"}} -## Disabled elevation 禁用 elevation +## Disabled elevation 禁用立体效果（elevation） 你也可以使用属性 `disableElevation` 属性来消除实心按钮的立体效果。 diff --git a/docs/src/pages/components/buttons/buttons-zh.md b/docs/src/pages/components/buttons/buttons-zh.md index e209cf2828958e..a1ed9896076cea 100644 --- a/docs/src/pages/components/buttons/buttons-zh.md +++ b/docs/src/pages/components/buttons/buttons-zh.md @@ -46,13 +46,13 @@ components: Button, IconButton, ButtonBase ## Handling clicks 处理点击 -所有组件都接受 `onClick` 处理程序，该处理程序被应用到 根(root) DOM 元素。 +所有组件都接受 `onClick` 处理程序，该处理程序被应用到根 DOM 元素中。 ```jsx - + ``` -请注意，文档里组件的 api 部分 [避免](/guides/api/#native-properties) 提到大量的 原生(native) 属性。 +请注意，文档里组件的 API 部分[避免](/guides/api/#native-properties)提到原生的属性（还是有很多）。 ## Upload button 上传按钮 @@ -74,7 +74,7 @@ components: Button, IconButton, ButtonBase 图标按钮通常位于应用栏和工具栏中。 -图标也适用于允许选择单个选项的切换按钮或 取消选择，例如向项目添加或删除星标。 +图标也适用于允许选择单个选项的切换按钮或取消选择，例如向项目添加或删除星标。 {{"demo": "pages/components/buttons/IconButtons.js"}} @@ -84,7 +84,7 @@ components: Button, IconButton, ButtonBase {{"demo": "pages/components/buttons/CustomizedButtons.js", "defaultCodeOpen": false}} -🎨如果你是在寻找灵感，你可以查看 [MUI Treasury's customization examples](https://mui-treasury.com/styles/button)。 +👑 如果您还在寻找灵感，您可以看看 [MUI Treasury 特别定制的一些例子](https://mui-treasury.com/styles/button)。 ## Complex Buttons（复杂按钮） diff --git a/docs/src/pages/components/chips/chips-pt.md b/docs/src/pages/components/chips/chips-pt.md index 23a5e12d901838..015331e9b55bd4 100644 --- a/docs/src/pages/components/chips/chips-pt.md +++ b/docs/src/pages/components/chips/chips-pt.md @@ -44,7 +44,7 @@ Você pode usar a propriedade `size` para definir um Chip pequeno. {{"demo": "pages/components/chips/SmallOutlinedChips.js"}} -## Chip - Live Demo +## Chip - Exemplo interativo {{"demo": "pages/components/chips/ChipsPlayground.js", "hideToolbar": true}} diff --git a/docs/src/pages/components/chips/chips-zh.md b/docs/src/pages/components/chips/chips-zh.md index 77464d8f31df93..f94d5b174d1826 100644 --- a/docs/src/pages/components/chips/chips-zh.md +++ b/docs/src/pages/components/chips/chips-zh.md @@ -15,8 +15,8 @@ components: Chip 以下是纸片组件的一个例子，它使用了图片，SVG 图标，“字母” 和（带有字符串的）头像。 -- 定义了`onClick` 属性的纸片组件会在获得焦点、鼠标悬浮、单击时有外观的变化。 -- 定义了`onDelete` 属性的纸片组件将显示一个删除图标，并在鼠标悬浮时有外观的变化。 +- 定义了 `onClick` 属性的纸片组件会在获得焦点、鼠标悬浮、单击时有外观的变化。 +- 定义了 `onDelete` 属性的纸片组件将显示一个删除图标，并在鼠标悬浮时有外观的变化。 {{"demo": "pages/components/chips/Chips.js"}} @@ -48,6 +48,6 @@ components: Chip {{"demo": "pages/components/chips/ChipsPlayground.js", "hideToolbar": true}} -## 可访问性 +## 无障碍设计 -如果Chip可删除或可点击，它应该作为一个按钮而被 tab 所顺序访问。 当纸片被聚焦时（例如在制表符时），释放（`keyup` 事件） `Backspace` 或 `Delete` 将调用 `onDelete` 处理程序，而释放 `Escape` 将模糊纸片。 \ No newline at end of file +如果 Chip 是可删除或可点击的，它则应该是一个安装标签顺序排列的按钮。 当纸片被聚焦时（例如在制表符时），释放（`keyup` 事件） `Backspace` 或 `Delete` 将调用 `onDelete` 处理程序，从而通过释放 `Escape` 来模糊纸片组件。 \ No newline at end of file diff --git a/docs/src/pages/components/dividers/dividers-zh.md b/docs/src/pages/components/dividers/dividers-zh.md index d4a8bd45ec458e..26547d632419fb 100644 --- a/docs/src/pages/components/dividers/dividers-zh.md +++ b/docs/src/pages/components/dividers/dividers-zh.md @@ -7,17 +7,17 @@ components: Divider

    分隔线是对列表和布局中的内容进行分组的一条细线。

    -[分隔线](https://material.io/design/components/dividers.html) 可以将内容分成清晰地小组。 +[分隔线](https://material.io/design/components/dividers.html)可以将内容分割成比较明确的组。 ## 列表分隔线 -默认情况下，分隔符呈现为 `
    `。 您可以使用 `ListItem` 组件上的 `divider` 属性来保存渲染此DOM元素。 +默认情况下，分割线会渲染成一个 `
    `。 使用 `ListItem` 组件中的 `divider` 属性，您可以直接渲染此分割线的 DOM 元素。 {{"demo": "pages/components/dividers/ListDividers.js", "bg": true}} ## HTML5 规范 -在列表中，你需要确保 `Divider` 被渲染成 `
  • ` 以遵循 HTML5 规范。 下面的例子展示了两种方式实现方式。 +在一个列表中，请确保您将 `Divider` 渲染成一个 `
  • ` 元素，这样才能遵循 HTML5 规范。 下面的例子展示了两种实现方式。 ## 内嵌分隔线 @@ -33,6 +33,6 @@ components: Divider ## 垂直分割线 -你也可以通过 `orientation` 属性让分割线渲染成垂直状态。 注意其中使用了 `flexItem` 属性来适应 flex 容器 +您也可以使用 `orientation` 属性将分割线渲染成垂直形状。 请注意这其中使用了 `flexItem` 属性来适应 flex 容器。 {{"demo": "pages/components/dividers/VerticalDividers.js", "bg": true}} \ No newline at end of file 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 78ba2756b1a2fc..a9a8d7a3f759bc 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 @@ -3,32 +3,32 @@ title: React Fab 浮动操作按钮组件 components: Fab --- -# Floating action button 浮动操作按钮 +# Floating action button 浮动操作按钮组件

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

    ## Floating Action Buttons 浮动操作按钮 -[浮动操作按钮](https://material.io/design/components/buttons-floating-action-button.html) 出现在所有屏幕内容的前面，通常是以圆形的形状出现，中间有一个图标。 FAB 有两种类型：常规的和扩展的。 +[浮动操作按钮](https://material.io/design/components/buttons-floating-action-button.html)出现在当前屏幕的所有内容之上，并且通常是中间有一个图标的圆形状。 FAB 有两种类型：常规的和扩展的。 -仅在最适合显示屏幕主要操作的方式时才使用 FAB。 +仅当 FAB 属于最适合呈现屏幕主要操作的方式时，才使用它。 -在每个屏幕中，我们建议只有一个浮动操作按钮来表示最常见的操作。 +在每个屏幕中，我们建议只安排一个浮动操作按钮来表示最常见的操作。 {{"demo": "pages/components/floating-action-button/FloatingActionButtons.js"}} ## Size 大小 -使用 `size` prop 属性来控制 FAB 的大小。 +您可以使用 `size` 属性来控制浮动操作按钮的大小。 {{"demo": "pages/components/floating-action-button/FloatingActionButtonSize.js"}} ## Animation 动画 -默认情况下，浮动操作按钮会以展开的动画出现在屏幕上。 +默认情况下，浮动操作按钮会以展开一片区域的动画在屏幕上出现。 -跨越多个横向屏幕（例如标签式屏幕）的浮动操作按钮应该短暂消失， 然后如果其动作改变则重新出现。 +当跨越多个横向屏幕（如标签式屏幕）时，浮动操作按钮应短暂消失，然后当动作改变的时候，重新出现。 -可以用缩放过渡来实现。 请注意，由于退出和进入 动画同时被触发，我们使用 `enterDelay` 来允许传出的浮动操作按钮的 动画，在新的动画进入之前完成。 +您可以使用缩放动画（Zoom transition）来实现这个效果。 请注意，因为退出动画和进入动画都是同时触发的，所以我们需要使 `enterDelay` 方法，确保在新的浮动操作按钮进入之前，就已经执行完旧的那个的退出动作。 {{"demo": "pages/components/floating-action-button/FloatingActionButtonZoom.js", "bg": true}} diff --git a/docs/src/pages/components/grid/grid-zh.md b/docs/src/pages/components/grid/grid-zh.md index ae0fd945218004..7ae0ca65751779 100644 --- a/docs/src/pages/components/grid/grid-zh.md +++ b/docs/src/pages/components/grid/grid-zh.md @@ -21,7 +21,7 @@ components: Grid 若你**对 flexbox 不太熟悉**，我们建议你阅读 [CSS-Tricks flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/) 手册。 -## Spacing 间距 +## Spacing（间距） 响应式栅格侧重于的一致的水平间距，而不是列宽。 Material design 外边距（margins）和列（col）都遵循** 8px **的方块形基线栅格。 你可以将 spacing 的属性值设置为一个在0和10之间的整数，且并包括0和10。 默认情况下，两个网格项之间的间距遵循这样的线性函数： `output(spacing) = spacing * 8px`，例如 `spacing={2}` 会创建一个 16px 的宽间距。 diff --git a/docs/src/pages/components/icons/icons-fr.md b/docs/src/pages/components/icons/icons-fr.md index eabc7580add570..edfe5aa8037519 100644 --- a/docs/src/pages/components/icons/icons-fr.md +++ b/docs/src/pages/components/icons/icons-fr.md @@ -19,7 +19,7 @@ Material Design has standardized over 1,100 official icons, each in five differe ### Installation -Install the package in your project directory with: +Installez le package dans votre répertoire de projet avec: ```sh // with npm diff --git a/docs/src/pages/components/icons/icons-ja.md b/docs/src/pages/components/icons/icons-ja.md index b8731073f4c1de..c4e6963a691b61 100644 --- a/docs/src/pages/components/icons/icons-ja.md +++ b/docs/src/pages/components/icons/icons-ja.md @@ -19,7 +19,7 @@ Material Design has standardized over 1,100 official icons, each in five differe ### インストール -Install the package in your project directory with: +次を使用して、プロジェクトディレクトリにパッケージをインストールします。 ```sh // with npm diff --git a/docs/src/pages/components/links/links-zh.md b/docs/src/pages/components/links/links-zh.md index f05c0e76091643..98595725c54eda 100644 --- a/docs/src/pages/components/links/links-zh.md +++ b/docs/src/pages/components/links/links-zh.md @@ -1,41 +1,41 @@ --- -components: Link +components: Link 链接组件 --- -# Link 链接 +# Links 链接 -

    链接（Links）组件允许您使用主题颜色和版面设计轻松自定义锚定元素。

    +

    您可以通过链接（Links）组件，轻松的使用主题颜色和字体铸排的样式来自定义锚定元素。

    ## 简单的链接 -链接（Links）组件构建在 [版面设计（Typography）](/api/typography/) 组件之上。 您可以利用其属性。 +链接组件是基于 [文字铸排（Typography）](/api/typography/)组件而开发的。 您可以利用它的一些属性。 {{"demo": "pages/components/links/Links.js"}} -然而，链接（Link）组件有着不同于版面设计（Typography ）组件的默认属性 +然而，链接组件有一些不同于文字铸排组件的默认属性： -- 当链接需要突出显示，使用 `color="primary"` -- 链接在多数的情况下，将被用于作为版面设计（Typograpy）的子组件，这种情况使用`variant="inherit"` +- 当链接需要突出显示时，设置 `color="primary"`。 +- 在多数的情况下，当链接需要作为文字铸排的子组件使用，则设置 `variant="inherit"`。 -## 安全提示 +## 安全性 -当你在使用Link组件下的 `target="_blank"`时 ，并同时在关联第三方内容的情况下， [推荐](https://developers.google.com/web/tools/lighthouse/audits/noopener) 始终配置 `rel ="noopener"` 或 `的rel ="noreferrer"` 。 +当你将 `target="_blank"`和链接组件一起使用时，若想和第三方的内容相连，我们[推荐](https://developers.google.com/web/tools/lighthouse/audits/noopener)始终配置 `rel="noopener"` 或者 `rel="noreferrer"`。 -- `rel="noopener"` 阻止新页面访问 `window.opener` 属性并确保它分开在不同的进程中运行。 若不如此，目标页面有潜在可能性将你的页面重定向至一个恶意网址 -- `rel ="noreferrer"` 具有相同的效果，但也阻止将 *Referer* 标头发送到新页面。 ⚠️ 去除referrer header会影响分析统计 +- `rel="noopener"` 会阻止新页面访问 `window.opener` 属性，并确保它在单独的进程运行。 若不如此，目标页面有极大可能将你的页面重定向至一个恶意网址。 +- `rel ="noreferrer"` 具有相同的效果，但也阻止将 *Referer* 页头发送到新的页面。 ⚠️ 去除 referrer header 会影响分析。 ## Third-party routing library（第三方路由库） -一种常见的用例是仅在客户端上执行导航，而无需通过 HTTP 往返服务器。 为解决此用例 `组件`，`Link` 组件提供了一个属性： +一种常见的用例是仅在客户端上执行导航，而无需通过 HTTP 往返服务器。 `Link` 组件提供了一个属性来处理这样的情况：那就是`component`。 这有一个[与 react-router 交互的例子](/guides/composition/#link)。 -## 可访问性 +## 无障碍设计 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#link) -- 当提供链接对应的内容时，避免使用泛泛的描述，比如“点击这里”或“跳转”之类的词语 相反的，请使用 [具体详细的描述](https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text)说明. +- 当提供链接对应的内容时，避免使用泛泛的描述，比如“点击这里”或“跳转”之类。 相反的，请使用 [具体详细的描述](https://developers.google.com/web/tools/lighthouse/audits/descriptive-link-text)说明。 - 为了获得最佳的用户体验，链接应该从页面上的文字中脱颖而出。 -- 如果一个链接没有赋予一个有意义的href值, [它应该用一个 `<按钮>` 元素](https://github.com/evcohen/eslint-plugin-jsx-a11y/blob/master/docs/rules/anchor-is-valid.md)表示 +- 如果一个链接没有赋予一个有意义的 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/modal/modal-zh.md b/docs/src/pages/components/modal/modal-zh.md index e1d261396a30ae..bc5d79a64f92f2 100644 --- a/docs/src/pages/components/modal/modal-zh.md +++ b/docs/src/pages/components/modal/modal-zh.md @@ -1,27 +1,27 @@ --- -title: 模态框 React 组件 +title: React Modal 模态框组件 components: Modal --- -# Modal 模态框 +# Modal 模态框组件

    模态框组件可以用来快速创建对话框、弹出窗口，灯箱等任何你所需的组件。

    -组件会在背景组件前渲染其`children`节点。 `Modal` 提供了一些重要的功能： +组件会在背景组件上层渲染其 `children` 节点。 `模态框`提供了一些重要的功能： -- 💄 Manages modal stacking when one-at-a-time just isn't enough. -- 🔐 创建一个 backdrop 来禁用在模态框外的交互。 +- 💄 管理了当一次只显示一个不能满足时的模态框堆叠。 +- 🔐 创建了一个背景暗化组件，这样能禁用在模态框之外的交互。 - 🔐 在模态框打开时禁用页面内容的滚动。 -- ♿️它妥善管理焦点;移动到模态内容， 并保持它直到模态关闭。 -- ♿️自动添加适当的ARIA角色。 -- 📦 [5kB 已压缩的包](/size-snapshot)。 +- ♿️ 它妥善管理焦点；移动到模态内容，并保持内容一直存在直到模态框关闭。 +- ♿️ 自动添加适当的 ARIA 角色。 +- 📦 [5kB 的压缩包](/size-snapshot)。 -> **术语注释**。 “模态框”（Modal）这个词有时也被用来指代“对话框”，但是这种用法属于误用。 模态框的窗口可以描述为 UI 的一部分。 如果一个元素[阻挡了用户与应用的其它部分的互动](https://en.wikipedia.org/wiki/Modal_window)，这个元素就是模态的。 +> **术语注释**。 “模态框”（Modal）这个词有时也被用来指代“对话框”，但是这种用法属于误用。 模态框的窗口描述了 UI 的一部分。 如果一个元素[阻挡了用户与应用的其它部分的互动](https://en.wikipedia.org/wiki/Modal_window)，这个元素就是模态的。 当你创建一个模态对话框时，使用[对话框（Dialog）](/components/dialogs/)组件比直接使用模态框更佳。 以下的组件将将模态框作为一个低级别的组件运用： - [Dialog](/components/dialogs/) -- [Drawer](/components/drawers/) +- [Drawer 抽屉](/components/drawers/) - [Menu](/components/menus/) - [Popover](/components/popover/) @@ -29,28 +29,28 @@ components: Modal {{"demo": "pages/components/modal/SimpleModal.js"}} -请注意，您可以使用 `outline: 0` 属性来禁用模态框的 outline (通常为蓝色或金色)。 +请注意，您可以通过 `outline: 0` 属性来禁用模态框的边缘（通常为蓝色或金色）。 ## 过渡动画 -模态框的 打开/关闭 可以使用一个过渡组件进行动画化处理。 此组件应遵守以下条件： +通过使用一个过渡组件，您可以给模态框的打开/关闭状态加上动画效果。 此组件应遵守以下条件： -- 成为模态框的直接子组件。 -- 在 prop 中应该有一个 `in` 属性。 这对应于 打开/关闭 状态。 -- 在进入过渡开始时调用 prop 中的 `onEnter` 回调。 -- 在退出过渡完成后调用 prop 中的 `onExited` 回调。 这两个回调允许模态框在关闭并完全过渡 (when closed and fully transitioned) 时卸载子内容。 +- 作为模态框的直接子元素。 +- 有一个 `in` 属性。 这对应于打开/关闭的状态。 +- 当进入过渡时调用 `onEnter` 回调属性。 +- 当退出过渡完成后应该调用 `onExited` 回调属性。 这两个回调属性保证了模态框在关闭并展示完过渡动画时，将会移除子内容。 模态框已经内嵌支持 [react-transition-group](https://github.com/reactjs/react-transition-group)。 {{"demo": "pages/components/modal/TransitionsModal.js"}} -或者，您可以使用 [react-spring](https://github.com/react-spring/react-spring)。 +或者，您也可以使用 [react-spring](https://github.com/react-spring/react-spring)。 {{"demo": "pages/components/modal/SpringModal.js"}} -## 模态框 SSR +## 服务端渲染的模态框 -React API [不支持](https://github.com/facebook/react/issues/13097) 在服务器上的 [`createPortal()`](https://reactjs.org/docs/portals.html)。 为了显示模态框，您需要使用 prop 上的 `disablePortal` 来禁用 protal 功能： +React [不支持](https://github.com/facebook/react/issues/13097)服务端渲染的 [`createPortal()`](https://reactjs.org/docs/portals.html) API。 若您想显示模态框，则需要通过 `disablePortal` 这个属性来禁用 protal 功能： {{"demo": "pages/components/modal/ServerModal.js"}} @@ -58,9 +58,9 @@ React API [不支持](https://github.com/facebook/react/issues/13097) 在服务 ### 焦点陷阱 -如果失去焦点，则模态框会将焦点移回到组件的主体 (body of the component)。 +如果用户试图将焦点离开模态框，模态框会将丢失的焦点移回到组件的主体。 -这样做是为了可访问性，但可能会造成问题。 如果用户需要与页面的另一部分进行交互，例如使用聊天窗口，您可以禁用该行为： +这样做的目的是为了无障碍设计，但是可能会造成问题。 如果用户需要与页面的其他部分进行交互，例如当您需要使用聊天窗口时，那么就可以禁用该行为： ```jsx @@ -70,7 +70,7 @@ React API [不支持](https://github.com/facebook/react/issues/13097) 在服务 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#dialog_modal) -- 记得用 `aria-labelledby="id..."` 属性来指向`Modal` 的标题. 另外, 你还可以使用 prop 上的 `aria-describedby="id..."` 属性来为 `Modal` 增加一段描述。 +- 记得用 `aria-labelledby="id..."` 属性来指向 `Modal` 的标题。 此外，您可以使用 `aria-describedby="id..."` 属性来为 `Modal` 组件添加一段描述。 ```jsx ``` -- 这篇 [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) 里的方法可以根据你的模态窗口里的内容, 为最合适的元素设置初始焦点. -- 请记住，“模态窗口” 叠加在主窗口或另一个模态窗口上。 模态框层下的所有层级都是 **inert** 的。 也就是说，用户不能与活跃的模态框外的内容交互。 这可能会产生 [冲突行为](#focus-trap)。 \ No newline at end of file +- 这篇 [WAI-ARIA authoring practices](https://www.w3.org/TR/wai-aria-practices/examples/dialog-modal/dialog.html) 里的方法帮助你通过模态窗口里的内容，为最相关的元素设置初始焦点。 +- 请记住，“模态窗口” 覆盖在主窗口或者另一个模态窗口上。 模态框层下的所有层级都是 **inert** 的。 也就是说，用户不能与当前处于活跃状态下的模态框之外的内容进行交互。 因为这可能会造成[冲突行为](#focus-trap)。 \ No newline at end of file diff --git a/docs/src/pages/components/popper/popper-zh.md b/docs/src/pages/components/popper/popper-zh.md index f4e0e6477a33bd..92fff32e28c826 100644 --- a/docs/src/pages/components/popper/popper-zh.md +++ b/docs/src/pages/components/popper/popper-zh.md @@ -26,8 +26,8 @@ components: Popper 气泡卡片的 打开/关闭 可以使用一个过渡组件进行动画化处理。 此组件应遵守以下条件： - 成为气泡卡片的直接子组件。 -- 在进入过渡开始时调用 prop 中的 `onEnter` 回调。 -- 在退出过渡完成后调用 prop 中的 `onExited` 回调。 这两个回调允许气泡卡片在关闭并完全过渡 (when closed and fully transitioned) 时卸载子内容。 +- 当进入过渡时调用 `onEnter` 回调属性。 +- 当退出过渡完成后应该调用 `onExited` 回调属性。 这两个回调允许气泡卡片在关闭并完全过渡 (when closed and fully transitioned) 时卸载子内容。 弹出组件Popper已经内嵌支持 [react-transition-group](https://github.com/reactjs/react-transition-group)。 diff --git a/docs/src/pages/components/portal/portal-zh.md b/docs/src/pages/components/portal/portal-zh.md index 9a185d4137246a..34f3de136d6d41 100644 --- a/docs/src/pages/components/portal/portal-zh.md +++ b/docs/src/pages/components/portal/portal-zh.md @@ -17,4 +17,4 @@ Portal 组件的子节点将被添加到指定的 `container` 中。 该组件 ## 服务器端 -React API [不支持](https://github.com/facebook/react/issues/13097) 在服务器上的 [`createPortal()`](https://reactjs.org/docs/portals.html)。 你必须等到客户端协调完成才能见到子节点。 \ No newline at end of file +React [不支持](https://github.com/facebook/react/issues/13097)服务端渲染的 [`createPortal()`](https://reactjs.org/docs/portals.html) API。 你必须等到客户端协调完成才能见到子节点。 \ No newline at end of file diff --git a/docs/src/pages/components/radio-buttons/radio-buttons-zh.md b/docs/src/pages/components/radio-buttons/radio-buttons-zh.md index 63d2ff042fa0ed..56d4d50bd4212c 100644 --- a/docs/src/pages/components/radio-buttons/radio-buttons-zh.md +++ b/docs/src/pages/components/radio-buttons/radio-buttons-zh.md @@ -1,9 +1,9 @@ --- -title: React Radio buttons（单选按钮）组件 +title: React 单选按钮组件（Radio buttons） components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel --- -# Radio 单选框 +# Radio 单选框组件

    用户可以通过单选按钮从一组中选择一个选项。

    @@ -13,15 +13,15 @@ components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel ## RadioGroup 单选框组 -`RadioGroup`适用于一组` Radio `，它提供相对简单的 API 并且能够使用键盘对该RadioGroup 进行控制。 +`RadioGroup` 适用于一组 `Radio`，它提供相对简单的 API 并且能够使用键盘对该 RadioGroup 进行控制。 {{"demo": "pages/components/radio-buttons/RadioButtonsGroup.js"}} -要横向布置按钮，请设置 `row`prop: ``. +要横向布置按钮，请将 `row` 属性设置为：``。 ## Standalone radio buttons 独立的单选框按钮 -`Radio` 也可以单独使用，无需额外的包装。 +`Radio` 也可以单独使用，无需额外的 RadioGroup wrapper。 {{"demo": "pages/components/radio-buttons/RadioButtons.js"}} @@ -29,11 +29,11 @@ components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel 你可以用 `FormControlLabel` 组件的 `labelPlacement` 属性来改变标签的位置。 -{{"demo": "pages/components/radio-buttons/FormControlLabelPlacement.js"}} +{{"demo": "pages/components/radio-buttons/FormControlLabelPlacement.js"}} -## Show error 显示错误 +## 显示错误 -一般来说，单选按钮应具有一个被默认选中的值。 如果不是这种情况，则在提交表单时如果未选择任何值，则可能会显示错误： +一般来说，单选按钮应带有一个默认选中的值。 如果不是这种情况，若用户在提交表单时如果未选择任何值，您可以让其显示一个错误： {{"demo": "pages/components/radio-buttons/ErrorRadios.js"}} @@ -47,7 +47,7 @@ components: Radio, RadioGroup, FormControl, FormLabel, FormControlLabel - [复选框 对比 单选按钮](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/slider/slider-zh.md b/docs/src/pages/components/slider/slider-zh.md index 22926d2e34ca78..b9e4ff1dc22a03 100644 --- a/docs/src/pages/components/slider/slider-zh.md +++ b/docs/src/pages/components/slider/slider-zh.md @@ -1,31 +1,31 @@ --- -title: 滑块 React 组件 +title: React Slide 滑块组件 components: Slider --- -# Slider 滑块 +# Slider 滑块组件 -

    用户可以使用滑块组件从某一范围内选取所需数值。

    +

    用户可以使用滑块组件在某一范围内取值。

    -[滑块](https://material.io/design/components/sliders.html) 反映了条形图上的一系列值，用户可以从中选择单个值。 滑块组件适用于调节设备音量、调整屏幕亮度，或者改变图像滤镜的强度。 +[滑块组件](https://material.io/design/components/sliders.html)反映了条形图上的一系列值，用户可以从中选择单个值。 它们通常适用于调节一些设置，譬如调节设备音量、调整屏幕亮度，或者改变图像的滤镜。 -- 📦 [22 kB gzipped](/size-snapshot) (但与其他Material-UI组件一起使用时，仅 +8 kB) +- 📦 [22 kB 压缩大小](/size-snapshot) (但与其他 Material-UI 组件使用时只有+8 kB)。 -## 连续值滑块 +## 连续的滑块组件 -用户可以使用连续值滑块从给定范围内选择某一数值。 +用户可以使用连续的滑块组件在给定的范围内选择一个值。 {{"demo": "pages/components/slider/ContinuousSlider.js"}} -## 离散值滑块 +## 离散的滑块组件 -离散滑块可以通过参考 (referencing) 其值指示器 (value indicator) 来调整为某一特定值。 以下是一些案例： +用户可以通过参考其值指示器，来将离散的滑块组件调整为某一特定值。 以下是一些案例： -在横轴上标记可选数值的位置：`marks={true}` +通过设置 `marks={true}`，你可以针对每个步骤产生一个标记。 {{"demo": "pages/components/slider/DiscreteSlider.js"}} -### 小步走 +### 小的步骤 您可以更改默认的步进增量。 @@ -33,31 +33,31 @@ components: Slider ### 自定义标记 -您可以通过为 `marks` prop 提供一个含义数据的数组来获得自定义标记。 +通过将一个丰富的数组提供给 `marks`属性，您可以定制标记。 {{"demo": "pages/components/slider/DiscreteSliderMarks.js"}} ### 受限制的值 -您可以使用 `step={null} ` 来将可选值限制为 `marks` prop 提供的值。 +通过将 `step={null}` 赋予给 `marks` 属性，您可以限制可供选择的值。 {{"demo": "pages/components/slider/DiscreteSliderValues.js"}} ### 标签总是可见 -数值标签始终可见： `valueLabelDisplay="on"` +通过设置 `valueLabelDisplay="on"`，您可以强制缩略图的标签始终可见。 {{"demo": "pages/components/slider/DiscreteSliderLabel.js"}} ## 范围滑块 -通过向 `value` prop 提供一个包含值的数组，可以设置滑块值的开始和结束。 +通过提供一个包含值的数组给 `value` 属性，您可以设置滑块的起始和终止值。 {{"demo": "pages/components/slider/RangeSlider.js"}} -## 带输入的滑块 +## 带输入框的滑块组件 -在这个例子中，输入允许设置一个离散值。 +在这个例子中，我们允许给输入框设置一个离散值。 {{"demo": "pages/components/slider/InputSlider.js"}} @@ -71,33 +71,33 @@ components: Slider {{"demo": "pages/components/slider/VerticalSlider.js"}} -## 轨道 +## 轨道（Track） -Track 显示可供用户选择的范围。 +轨道显示了允许用户选择的范围。 -### 移除 track +### 移除轨道 -可以通过设置 `track={false}` 来禁用。 +您可以通过设置 `track={false}` 来禁用轨道。 {{"demo": "pages/components/slider/TrackFalseSlider.js"}} ### 反转轨道 -设置 `track="inverted"` 来反转轨道。 +你可以通过设置 `track="inverted"` 来反转轨道。 {{"demo": "pages/components/slider/TrackInvertedSlider.js"}} ## 非线性缩放 -你可以使用 `scale` prop 来表示不同比例的 `值`。 例如，下面的例子中，*x* 的值表示 *10^x*。 +你可以使用 `scale` 属性来表示不同范围的`值`。 例如，在下面的例子中，*x* 的值表示 *10^x*。 {{"demo": "pages/components/slider/NonLinearSlider.js"}} -## 可访问性 +## 无障碍设计 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#slider) -该组件处理了大部分必要的工作，使之应用可访问性。 但是，你需要确保： +该组件处理了大部分必要的工作，使之应用无障碍访问。 但是，你需要确保： -- 每个箭头都有一个用户友好的标签（`aria-label`、`aria-labelledby` 或 `getAriaLabel` prop）。 -- 每一个箭头的当前值都有一个方便用户阅读的文字。 除非数值的含义显而易见。 你可以通过`getAriaValueText` 或者 `aria-valuetext` 更改提示气泡的名称。 \ No newline at end of file +- 每个滑块都带有一个方便用户的标签（`aria-label`、`aria-labelledby` 或 `getAriaLabel` 属性）。 +- 每一个滑块的当前值都有一个方便用户阅读的文字。 如果值与标签的语义相匹配的话，则不需要此操作。 你可以通过`getAriaValueText` 或者 `aria-valuetext` 属性来更改名字。 \ 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 ec399f7e9916fb..fe6329f7d2829e 100644 --- a/docs/src/pages/components/steppers/steppers-zh.md +++ b/docs/src/pages/components/steppers/steppers-zh.md @@ -42,7 +42,7 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco 此示例类似于常规的水平步进器，但步骤不再基于` activeStep `属性自动设置` disabled = {true} `。 -在这里使用 `StepButton` 演示了一个可单击的步进器标签，并且设置了 `completed` 标志。 但是，由于可以以非线性方式访问每个步骤，因此需要由您自己的实现来确定何时完成所有步骤（甚至是是否需要完成）。 +在这里使用 `StepButton` 演示了一个可单击的步骤器标签，并且设置了 `completed` 标志。 但是，由于可以以非线性方式访问每个步骤，因此需要由您自己的实现来确定何时完成所有步骤（甚至是是否需要完成）。 {{"demo": "pages/components/steppers/HorizontalNonLinearStepper.js", "bg": true}} @@ -62,17 +62,17 @@ components: MobileStepper, Step, StepButton, StepConnector, StepContent, StepIco ## 移动设备上的步骤条 -该组件实现了适用于移动设备上的紧凑型步骤条。 有关这方面的详细介绍，请参阅 [移动设备上的步骤条](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps)。 +该组件实现了适用于移动设备上的紧凑型步骤条。 如果你还在寻找灵感，请参阅 [移动设备上的步骤条](https://material.io/archive/guidelines/components/steppers.html#steppers-types-of-steps)。 ### 文本 -本质上，这是一个被正确定位的 back/next 按钮。 您必须自己实现文本描述，但是，下面提供了一个参考示例。 +本质上，这是一个被正确定位的 back/next 按钮。 您必须自己实现文本描述，但以下的示例也可供参考。 {{"demo": "pages/components/steppers/TextMobileStepper.js", "bg": true}} -### 文本与幻灯片效果 +### 带有幻灯片效果的文本 -这个实例与之前的非常相似，不同之处在于使用[ react-swipeable-views ](https://github.com/oliviertassinari/react-swipeable-views)以进行步骤转换。 +这个实例与之前的非常相似，不同之处在于使用 [react-swipeable-views](https://github.com/oliviertassinari/react-swipeable-views) 以进行步骤的过渡动画。 {{"demo": "pages/components/steppers/SwipeableTextMobileStepper.js", "bg": true}} diff --git a/docs/src/pages/components/switches/switches-zh.md b/docs/src/pages/components/switches/switches-zh.md index d97e357deed45f..d5cdf3d7f89ffe 100644 --- a/docs/src/pages/components/switches/switches-zh.md +++ b/docs/src/pages/components/switches/switches-zh.md @@ -1,57 +1,57 @@ --- -title: 开关 React 组件 +title: React 开关组件（Switch) components: Switch, FormControl, FormGroup, FormLabel, FormControlLabel --- -# Switch 开关 +# Switch 开关组件 -

    开关控制是改变单个设置状态打开或关闭的控件。

    +

    开关控制能切换单个设置的开/关两个状态。

    -[Switches](https://material.io/design/components/selection-controls.html#switches) 是在移动设备上调整设置的首选方式。 开关控制的选项，以及它当前所处的状态都应该从相应的描述标签中明确说明。 +在移动设备上调整设置时，[Switches](https://material.io/design/components/selection-controls.html#switches) 是一个首选方式。 开关控制的选项，以及它当前所处的状态，都应该在相应的描述标签中明确说明。 -## 基本开关 +## 基本的开关 {{"demo": "pages/components/switches/Switches.js"}} ## 带有 FormControlLabel 的开关 -借助 `FormControlLabel` 组件，可以为 `Switch` 提供一组描述。 +借助 `FormControlLabel` 组件，`Switch`能够提供一些描述。 {{"demo": "pages/components/switches/SwitchLabels.js"}} -## 带有 FormControlLabel 的开关组 +## 带有 FormGroup 的开关 -`FormGroup`提供相对简单的 API 对选择控件进行分组。 但是，如果需要多个相关控件，建议改用 [Checkboxes](/components/checkboxes/) 。 (参见: [When to use](#when-to-use))。 +`FormGroup` 则提供了相对简单的 API，它能够包装组件，进行控件的分组。 但是，若您需要多个相关控件，我们建议改用 [Checkboxes](/components/checkboxes/) 组件。 (参见: [何时使用](#when-to-use))。 {{"demo": "pages/components/switches/SwitchesGroup.js"}} ## 自定义样式开关 -这是一些自定义样式开关的例子 您可以在[样式重写文档页](/customization/components/)中了解有关此内容的更多信息。 +以下是自定义此组件的一些示例。 您可以在[样式重写文档页](/customization/components/)中了解有关此内容的更多信息。 {{"demo": "pages/components/switches/CustomizedSwitches.js"}} -🎨如果你是在寻找灵感，你可以查看 [MUI Treasury's customization examples](https://mui-treasury.com/styles/switch)。 +🎨 如果您还在寻找灵感，您可以查看一下 [MUI Treasury 自定义的例子](https://mui-treasury.com/components/button)。 ## 尺寸 -想要使用外观看起来比较小的开关组件 我们提供了 `size` 这个属性供您调整。 +想用一些优雅的小开关？ 我们提供了 `size` 这个属性供您调整。 {{"demo": "pages/components/switches/SwitchesSize.js"}} ## 标签放置 -你可以更改标签的位置: +你可以更改标签的位置： {{"demo": "pages/components/switches/FormControlLabelPosition.js"}} -## 什么时候使用 +## 何时使用 -- [复选框 对比 Switches（开关控件）](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8) +- [复选框 对比 开关控件](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8) -## 可及性 +## 无障碍设计 -- 它将渲染一个带有 `role=checkbox` 而不是 `role=switch` 的元素，但该属性尚未得到广泛支持。 请首先测试目标受众的辅助技术 (assistive technology) 是否正确支持此 role 属性。 或者您可以使用 `` 来更改 role 属性。 +- 它将渲染一个带有 `checkbox` 而不是 `switch` 角色的元素，鉴于该属性尚未得到广泛支持。 请首先测试目标受众的辅助技术 (assistive technology) 是否正确支持此 role 属性。 或者您可以使用 `` 来更改 role 属性。 - 所有表单控件都应该带有标签，而这包括了单选按钮，复选框和开关。 在大多数情况下，这是通过使用一个 `