diff --git a/.circleci/config.yml b/.circleci/config.yml index a67a23a1b9a474..42263977a512fa 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -206,12 +206,7 @@ workflows: version: 2 pipeline: jobs: - - checkout: - filters: - branches: - ignore: - - l10n - - /dependabot\// + - checkout - test_unit: requires: - checkout diff --git a/.eslintrc.js b/.eslintrc.js index 68a9f0e6a2981b..03d27addd5c724 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -169,6 +169,8 @@ module.exports = { 'jsx-a11y/no-static-element-interactions': 'off', 'jsx-a11y/tabindex-no-positive': 'off', + // In tests this is generally intended. + 'react/button-has-type': 'off', // They are accessed to test custom validator implementation with PropTypes.checkPropTypes 'react/forbid-foreign-prop-types': 'off', // components that are defined in test are isolated enough diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS index 4ccb1eb7655c61..e69de29bb2d1d6 100644 --- a/.github/CODEOWNERS +++ b/.github/CODEOWNERS @@ -1,2 +0,0 @@ -/docs/src/pages/components/alert/ @dimitropoulos -/packages/material-ui-lab/src/Alert/ @dimitropoulos diff --git a/.github/workflows/maintenance.yml b/.github/workflows/maintenance.yml index 2ab4b42bd8d739..8c90f18d4d0c17 100644 --- a/.github/workflows/maintenance.yml +++ b/.github/workflows/maintenance.yml @@ -2,10 +2,17 @@ name: 'Maintenance' on: # So that PRs touching the same files as the push are updated push: + branches: + - master + - next # So that the `dirtyLabel` is removed if conflicts are resolved - # On forks the secret isn't set. We need to manually remove it. - #pull_request: - # types: [synchronize] + # Could put too much strain on rate limit + # If we hit the rate limit too often remove this event + pull_request_target: + branches: + - master + - next + types: [synchronize] jobs: main: diff --git a/CHANGELOG.md b/CHANGELOG.md index 753aaf1dbd4b01..c36ad993a22d9b 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,11 +1,214 @@ ### [Versions](https://material-ui.com/versions/) +## UNRELEASED - 4.12.0 + +This release is intended to help prepare the migration to Material-UI v5 ⏫: + +- 📚 Start to add deprecations in anticipation of v5. We plan to add a deprecation for any breaking change in v5 that allows it. Each warning comes with a simple message that explains how to handle the deprecation. If no warnings are reported in the console, you are set for this first batch. +Please report issues with the deprecations on [#22074](https://github.com/mui-org/material-ui/issues/22074) (wrong instructions, false-positives, floods in the console, etc.). + +You can expect similar releases like this one in the coming months. + +### `@material-ui/core@v4.12.0` + +#### Deprecations + +- [theme] Deprecate `fade` color utility in favor of `alpha` (#22837) @mnajdova +- [theme] Deprecate theme.mixins.gutters (#22245) @joshwooding +- [Avatar] Add circular variant (#22090) @eps1lon +- [Badge] Add overlap circular and rectangular (#22076) @eps1lon +- [Box] Deprecate css prop in favor of sx (#23480) @mnajdova +- [CircularProgress] Backport simplified determinate style & deprecate static (#22094) @mbrookes +- [Dialog] Deprecate the transition onX props (#22114) @mbrookes +- [GridList] Rename to ImageList & add deprecation warnings (#22363) @mbrookes +- [Menu] Deprecate transition onX props (#22213) @mbrookes +- [Popover] Deprecate transition onX props (#22202) @mbrookes +- [Snackbar] Deprecate transition onX props (#22206) @mbrookes + +## 4.11.2 +###### _Dec 2 2020_ + +This release widens the peer dependency scope of React to accept ^17.0.0. +The change makes it easier for developers to upgrade React independently from Material-UI. The best support for React 17 will be found in Material-UI v5. + +This is a reminder that all ongoing work has moved to v5. This means a feature freeze on v4. The development of v4 is limited to important bug fixes, security patches and easing the upgrade path to v5. + +### `@material-ui/core@v4.11.2` + +- [core] Allow React 17 in peer dependencies (#23697) @oliviertassinari + +### `@material-ui/icons@v4.11.2` + +- [core] Allow React 17 in peer dependencies (#23697) @oliviertassinari + +### `@material-ui/lab@v4.11.2` + +- [core] Allow React 17 in peer dependencies (#23697) @oliviertassinari + +### `@material-ui/styles@v4.11.2` + +- [core] Allow React 17 in peer dependencies (#23697) @oliviertassinari + +### `@material-ui/system@v4.11.2` + +- [core] Allow React 17 in peer dependencies (#23697) @oliviertassinari + +### `@material-ui/utils@v4.11.2` + +- [core] Allow React 17 in peer dependencies (#23697) @oliviertassinari + +### `@material-ui/lab@v4.0.0-alpha.57` + +- [core] Allow React 17 in peer dependencies (#23697) @oliviertassinari + +## 4.11.1 +###### _Nov 24 2020_ + +Big thanks to the 12 contributors who made this release possible. + +- 🐛 Fix integration issue with TypeScript 4.1 (#23692) @ldrick +- ⚛️ Fix two issues with React 17 (#22263, #23367) @eps1lon + v4 doesn't have official support for React 17 like v5 has. Use it at your own risk. +- 🐛 Fix right-to-left support of Tabs since Chrome 85 (#22830) @ankit + +### `@material-ui/core@v4.11.1` + +- [styles] Add support for TypeScript 4.1 (#23692) @ldrick +- [ClickAwayListener] Fix mounting behavior in Portals in React 17 (#23367) @eps1lon +- [TrapFocus] Prevent possible crash in React 17 (#22263) @eps1lon +- [Tabs] Fix RTL scrollbar with Chrome 85 (#22830) @ankit + +### `@material-ui/styles@v4.11.1` + +- [styles] Add support for TypeScript 4.1 (#23692) @ldrick + +### Docs + +- [blog] Allow to support card preview (#23087) @oliviertassinari +- [blog] Danail Hadjiatanasov joins Material-UI (#23223) @oliviertassinari +- [blog] New posts (#22607) @oliviertassinari +- [blog] Q2 2020 Update (#21822) @oliviertassinari +- [blog] Q3 2020 Update (#23055) @oliviertassinari +- [docs] Add Backstage to showcase (#22428) @stefanalund +- [docs] Add Design resources in installation (#22209) @oliviertassinari +- [docs] Add DoiT diamond sponsor (#22436) @oliviertassinari +- [docs] Add LightyearVPN to showcase (#22568) @lightyearvpn +- [docs] Add Material-UI Builder to in-house ads (#23342) @mbrookes +- [docs] Add Octopus diamond sponsor (#22178) @oliviertassinari +- [docs] Add Spotify to users (#22776) @mbrookes +- [docs] Add ethicalads.io (#21752) @oliviertassinari +- [docs] Add live demo with DataGrid (#22697) @oliviertassinari +- [docs] Add notification about survey @oliviertassinari +- [docs] Add notification for MUI for Figma v4.12.0 (#23212) @mbrookes +- [docs] Add redirection for links published on npm (#22575) @oliviertassinari +- [docs] Allow to host code in a different repo (#23390) @oliviertassinari +- [docs] Avoid confusion between layout grid and data grid (#22681) @oliviertassinari +- [docs] Backport _redirect from next @oliviertassinari +- [docs] Change "Let Us Know" button URL (#22521) @mbrookes +- [docs] Clear the different between table vs data grid right at the start @oliviertassinari +- [docs] Encourage DataGrid in /components/tables/ over alternatives (#22637) @oliviertassinari +- [docs] Engage with more Russian users @oliviertassinari +- [docs] Fix 404 reported by Moz.com @oliviertassinari +- [docs] Fix codesandbox link @oliviertassinari +- [docs] Fix static asset loading with X @oliviertassinari +- [docs] Fix theme.palette.type usage @oliviertassinari +- [docs] Forward x data-grid (#22400) @oliviertassinari +- [docs] Improve SEO on titles (#22742) @oliviertassinari +- [docs] Improve ad display @oliviertassinari +- [docs] Improve codesandbox generation logic (#22221) @oliviertassinari +- [docs] Improve export to CodeSandbox (#22346) @oliviertassinari +- [docs] Improve position in the side nav of DataGrid @oliviertassinari +- [docs] Include new video on customization @oliviertassinari +- [docs] Option to disable ads (#22574) @oliviertassinari +- [docs] Point to the production branch of x @oliviertassinari +- [docs] Reduce tracking events (#21710) @eps1lon +- [docs] Remove codefund Ads (#21714) @eps1lon +- [docs] Remove expansion-panels @oliviertassinari +- [docs] Remove v5 docs capability @oliviertassinari +- [docs] Sync translation (#21638, #21751, #21925, #22751, #22850, #22887, #23357) @oliviertassinari +- [docs] Update homepage quotes (#23326) @mbrookes +- [docs] Use codesandbox deploy for demos created from deploy previews (#22616) @eps1lon +- [docs] configuring redirects for MUI X (#22632) @dtassone + +### Core + +- [core] Remove Alert codeowner @oliviertassinari +- [core] Small changes (master) (#22022) @oliviertassinari +- [test] Add skip ci to Crowdin commit message (#22684) @mbrookes +- [test] Fix CI @oliviertassinari +- [test] Only run on push for master/next (#22627) @eps1lon +- [test] Run CircleCI anytime (#22686) @eps1lon +- [test] Update react next patch (#22393) @eps1lon + +## 4.11.0 +###### *July 1, 2020* + +Big thanks to the 8 contributors who made this release possible. + +### `@material-ui/core@v4.11.0` + +- [ExpansionPanel] Prepare renaming to Accordion, add warnings (#21560) @mnajdova + It uses a more common naming convention: + + ```diff + -import ExpansionPanel from '@material-ui/core/ExpansionPanel'; + -import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; + -import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; + -import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions'; + +import Accordion from '@material-ui/core/Accordion'; + +import AccordionSummary from '@material-ui/core/AccordionSummary'; + +import AccordionDetails from '@material-ui/core/AccordionDetails'; + +import AccordionActions from '@material-ui/core/AccordionActions'; + + - + + + - + + + Location + Select trip destination + - + + + - + + + {}} /> + Select your destination of choice + - + + + + - + + + + + - + + + - + + + ``` + +### Docs + +- [blog] Post survey results 2020 (#21555) @mnajdova +- [docs] Add new gold sponsor @oliviertassinari +- [docs] CodeFund is shutting down (#21632) @oliviertassinari +- [docs] Enable next.material-ui.com sub-domain @oliviertassinari +- [docs] Fix ad issues @oliviertassinari +- [docs] Fix version in localized urls (#21442) @tchmnn +- [docs] Sync translations (#21445) @oliviertassinari +- [docs] Sync translations (#21535) @oliviertassinari + +### Core + +- [core] Batch small changes (#21419) @oliviertassinari +- [core] Fix react next patch and prevent regression (#21482) @eps1lon + ## 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 +238,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/README.md b/README.md index 22bdcd5ad4784d..6156ea1e274259 100644 --- a/README.md +++ b/README.md @@ -6,22 +6,19 @@
-[React](https://reactjs.org/) components for faster and easier web development. Build your own design system, or start with [Material Design](https://material.io/design/introduction/). +[React](https://reactjs.org/) components for faster and simpler web development. Build your own design system, or start with [Material Design](https://material.io/design/introduction/). -[![npm package](https://img.shields.io/npm/v/@material-ui/core/latest.svg)](https://www.npmjs.com/package/@material-ui/core) +[![license](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/mui-org/material-ui/blob/master/LICENSE) +[![npm latest package](https://img.shields.io/npm/v/@material-ui/core/latest.svg)](https://www.npmjs.com/package/@material-ui/core) +[![npm next package](https://img.shields.io/npm/v/@material-ui/core/next.svg)](https://www.npmjs.com/package/@material-ui/core) [![npm downloads](https://img.shields.io/npm/dm/@material-ui/core.svg)](https://www.npmjs.com/package/@material-ui/core) -[![CircleCI](https://img.shields.io/circleci/project/github/mui-org/material-ui/master.svg)](https://circleci.com/gh/mui-org/material-ui/tree/master) -[![Build Status](https://dev.azure.com/mui-org/Material-UI/_apis/build/status/mui-org.material-ui?branchName=master)](https://dev.azure.com/mui-org/Material-UI/_build/latest?definitionId=1&branchName=master) -[![Coverage Status](https://img.shields.io/codecov/c/github/mui-org/material-ui/master.svg)](https://codecov.io/gh/mui-org/material-ui/branch/master) -[![CII Best Practices](https://bestpractices.coreinfrastructure.org/projects/1320/badge)](https://bestpractices.coreinfrastructure.org/projects/1320) -![Code style](https://img.shields.io/badge/code_style-prettier-ff69b4.svg) +[![CircleCI](https://img.shields.io/circleci/project/github/mui-org/material-ui/next.svg)](https://app.circleci.com/pipelines/github/mui-org/material-ui?branch=next) +[![Coverage Status](https://img.shields.io/codecov/c/github/mui-org/material-ui/next.svg)](https://codecov.io/gh/mui-org/material-ui/branch/next) [![Follow on Twitter](https://img.shields.io/twitter/follow/MaterialUI.svg?label=follow+Material-UI)](https://twitter.com/MaterialUI) [![Dependabot Status](https://api.dependabot.com/badges/status?host=github&repo=mui-org/material-ui)](https://dependabot.com) -[![PeerDependencies](https://david-dm.org/mui-org/material-ui/master/peer-status.svg?path=packages/material-ui)](https://david-dm.org/mui-org/material-ui/master?type=peer&path=packages/material-ui) -[![Dependencies](https://david-dm.org/mui-org/material-ui/master/status.svg?path=packages/material-ui)](https://david-dm.org/mui-org/material-ui/master?path=packages/material-ui) -[![DevDependencies](https://david-dm.org/mui-org/material-ui/master/dev-status.svg?path=packages/material-ui)](https://david-dm.org/mui-org/material-ui/master?type=dev) -[![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/mui-org/material-ui.svg)](https://isitmaintained.com/project/mui-org/material-ui "Average time to resolve an issue") -[![Crowdin](https://d322cqt584bo4o.cloudfront.net/material-ui-docs/localized.svg?cache=v1)](https://translate.material-ui.com/project/material-ui-docs) +[![Average time to resolve an issue](https://isitmaintained.com/badge/resolution/mui-org/material-ui.svg)](https://isitmaintained.com/project/mui-org/material-ui 'Average time to resolve an issue') +[![Crowdin](https://badges.crowdin.net/material-ui-docs/localized.svg)](https://translate.material-ui.com/project/material-ui-docs) +[![Open Collective backers and sponsors](https://img.shields.io/opencollective/all/material-ui)](https://opencollective.com/material-ui)
@@ -30,6 +27,7 @@ Material-UI is available as an [npm package](https://www.npmjs.com/package/@material-ui/core). **[Stable channel v4](https://material-ui.com/)** + ```sh // with npm npm install @material-ui/core @@ -38,9 +36,25 @@ npm install @material-ui/core yarn add @material-ui/core ``` -**[v3.x](https://v3.material-ui.com/)** ([Migration from v3 to v4](https://material-ui.com/guides/migration-v3/)) +⚠️ All ongoing work has moved to v5. The development of v4 is limited to important bug fixes, security patches and easing the upgrade path to v5. + +**[Alpha channel v5](https://next.material-ui.com/)** + +```sh +// with npm +npm install @material-ui/core@next + +// with yarn +yarn add @material-ui/core@next +``` + +
+ Older versions -**[v0.x](https://v0.material-ui.com/)** ([Migration to v1](https://material-ui.com/guides/migration-v0x/)) + - **[v3.x](https://v3.material-ui.com/)** ([Migration from v3 to v4](https://material-ui.com/guides/migration-v3/)) + - **[v0.x](https://v0.material-ui.com/)** ([Migration to v1](https://material-ui.com/guides/migration-v0x/)) + +
Please note that `@next` will only point to pre-releases; to get the latest stable release use `@latest` instead. @@ -49,10 +63,11 @@ Please note that `@next` will only point to pre-releases; to get the latest stab ### Diamond 💎

- sencha + octopus + doit-intl

-Diamond Sponsors are those who have pledged $1,500/month or more to Material-UI. +Diamond Sponsors are those who have pledged \$1,500/month or more to Material-UI. ### Gold 🏆 @@ -66,10 +81,17 @@ via [Patreon](https://www.patreon.com/oliviertassinari) via [OpenCollective](https://opencollective.com/material-ui)

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

+ +Direct + +

+ elevator

-Gold Sponsors are those who have pledged $500/month or more to Material-UI. +Gold Sponsors are those who have pledged \$500/month or more to Material-UI. ### There is more! @@ -85,11 +107,7 @@ import ReactDOM from 'react-dom'; import Button from '@material-ui/core/Button'; function App() { - return ( - - ); + return ; } ReactDOM.render(, document.querySelector('#app')); @@ -101,8 +119,8 @@ Yes, it's really all you need to get started as you can see in this live and int ## Questions -For *how-to* questions and other non-issues, -please use [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) instead of Github issues. +For _how-to_ questions and other non-issues, +please use [StackOverflow](https://stackoverflow.com/questions/tagged/material-ui) instead of GitHub issues. There is a StackOverflow tag called "material-ui" that you can use to tag your questions. ## Examples @@ -116,19 +134,18 @@ Check out our [documentation website](https://material-ui.com/). ## Premium Themes -You can find complete templates & themes in the [Material-UI store](https://material-ui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=readme-store) . +You can find complete templates & themes in the [Material-UI store](https://material-ui.com/store/?utm_source=docs&utm_medium=referral&utm_campaign=readme-store). ## Contributing -Read our [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Material-UI. +Read the [contributing guide](/CONTRIBUTING.md) to learn about our development process, how to propose bugfixes and improvements, and how to build and test your changes to Material-UI. Notice that contributions go far beyond pull requests and commits. Although we love giving you the opportunity to put your stamp on Material-UI, we also are thrilled to receive a variety of [other contributions](https://material-ui.com/getting-started/faq/#material-ui-is-awesome-how-can-i-support-the-project). ## Changelog -Recently Updated? -Please read the [changelog](https://github.com/mui-org/material-ui/releases). +If you have recently updated, please read the [changelog](https://github.com/mui-org/material-ui/releases) for details of what has changed. ## Roadmap @@ -138,3 +155,31 @@ The future plans and high priority features and enhancements can be found in the This project is licensed under the terms of the [MIT license](/LICENSE). + +## Sponsoring services + +These great services sponsor Material-UI's core infrastructure: + +[GitHub](https://github.com/) + +GitHub allows us to host the Git repository. + +[CircleCI](https://circleci.com/) + +CircleCI allows us to run the test suite. + +[Netlify](https://www.netlify.com/) + +Netlify allows us to distribute the documentation. + +[CrowdIn](https://crowdin.com/) + +CrowdIn allows us to translate the documentation. + +[BrowserStack](https://www.browserstack.com/) + +BrowserStack allows us to test in real browsers. + +[CodeCov](https://codecov.io/) + +CodeCov allows us to monitor the test coverage. diff --git a/azure-pipelines.yml b/azure-pipelines.yml index 30fb3df99bcfd1..169c8f7ebe37a4 100644 --- a/azure-pipelines.yml +++ b/azure-pipelines.yml @@ -1,10 +1,8 @@ trigger: branches: include: - - '*' - exclude: - - l10n - - dependabot/* + - 'master' + - 'next' # https://developercommunity.visualstudio.com/comments/949241/view.html pr: diff --git a/crowdin.yml b/crowdin.yml index 40658da901fdf0..7ea77ac277d866 100644 --- a/crowdin.yml +++ b/crowdin.yml @@ -1,3 +1,4 @@ +commit_message: "[skip ci]" files: - source: /docs/src/**/*.md ignore: diff --git a/docs/next.config.js b/docs/next.config.js index a2445799b4630b..185e523e9c6850 100644 --- a/docs/next.config.js +++ b/docs/next.config.js @@ -30,9 +30,11 @@ module.exports = { const plugins = config.plugins.concat([ new webpack.DefinePlugin({ 'process.env': { + COMMIT_REF: JSON.stringify(process.env.COMMIT_REF), ENABLE_AD: JSON.stringify(process.env.ENABLE_AD), GITHUB_AUTH: JSON.stringify(process.env.GITHUB_AUTH), LIB_VERSION: JSON.stringify(pkg.version), + PULL_REQUEST: JSON.stringify(process.env.PULL_REQUEST === 'true'), REACT_MODE: JSON.stringify(reactMode), }, }), @@ -69,8 +71,8 @@ module.exports = { (context, request, callback) => { const hasDependencyOnRepoPackages = [ 'notistack', - 'material-table', '@material-ui/pickers', + '@material-ui/data-grid', ].includes(request); if (hasDependencyOnRepoPackages) { @@ -98,7 +100,7 @@ module.exports = { // transpile 3rd party packages with dependencies in this repository { test: /\.(js|mjs|jsx)$/, - include: /node_modules(\/|\\)(material-table|notistack|@material-ui(\/|\\)pickers)/, + include: /node_modules(\/|\\)(notistack|@material-ui(\/|\\)(pickers|data-grid))/, use: { loader: 'babel-loader', options: { @@ -111,6 +113,7 @@ module.exports = { { alias: { '@material-ui/core': '../packages/material-ui/src', + '@material-ui/utils': '../packages/material-ui-utils/src', }, transformFunctions: ['require'], }, diff --git a/docs/notifications.json b/docs/notifications.json index 5fe5605e7b926a..2e2b4e65626f30 100644 --- a/docs/notifications.json +++ b/docs/notifications.json @@ -10,9 +10,9 @@ "userLanguage": "zh" }, { - "id": 49, - "date": "2020-03-30", - "title": "Sketch", - "text": "Introducing Material-UI for Sketch. Today, we’re excited to introduce the Sketch symbols 💎 for Material-UI." + "id": 52, + "date": "2020-12-12", + "title": "Adobe XD", + "text": "Welcoming Adobe XD to the Material-UI design assets family. 600+ Material-UI symbols, handcrafted in Adobe XD, ready to help turn your imagination into reality!" } -] \ No newline at end of file +] diff --git a/docs/package.json b/docs/package.json index 8de42f376478eb..57d7325cd644c8 100644 --- a/docs/package.json +++ b/docs/package.json @@ -26,6 +26,7 @@ "@emotion/core": "^10.0.27", "@emotion/styled": "^10.0.27", "@material-ui/core": "^4.1.2", + "@material-ui/data-grid": "^4.0.0-alpha.6", "@material-ui/docs": "^4.0.0-beta.0", "@material-ui/icons": "^4.2.1", "@material-ui/lab": "^4.0.0-alpha.18", @@ -80,7 +81,6 @@ "lz-string": "^1.4.4", "markdown-to-jsx": "^6.10.2", "marked": "^1.0.0", - "material-table": "^1.50.0", "material-ui-popup-state": "^1.4.1", "next": "^9.3.0", "notistack": "^0.9.3", diff --git a/docs/pages/_app.js b/docs/pages/_app.js index c15f4fb9e6197b..ffd1cdaeffe36c 100644 --- a/docs/pages/_app.js +++ b/docs/pages/_app.js @@ -37,7 +37,7 @@ function useFirstRender() { return firstRenderRef.current; } -acceptLanguage.languages(['en', 'zh', 'pt']); +acceptLanguage.languages(['en', 'zh', 'pt', 'ru']); function loadCrowdin() { window._jipt = []; diff --git a/docs/pages/api-docs/accordion-actions.js b/docs/pages/api-docs/accordion-actions.js new file mode 100644 index 00000000000000..90c17442a2c2ae --- /dev/null +++ b/docs/pages/api-docs/accordion-actions.js @@ -0,0 +1,15 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; + +const pageFilename = 'api/accordion-actions'; +const requireRaw = require.context('!raw-loader!./', false, /\/accordion-actions\.md$/); + +export default function Page({ docs }) { + return ; +} + +Page.getInitialProps = () => { + const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); + return { demos, docs }; +}; diff --git a/docs/pages/api-docs/accordion-actions.md b/docs/pages/api-docs/accordion-actions.md new file mode 100644 index 00000000000000..fcedca1e5d723f --- /dev/null +++ b/docs/pages/api-docs/accordion-actions.md @@ -0,0 +1,57 @@ +--- +filename: /packages/material-ui/src/AccordionActions/AccordionActions.js +--- + + + +# AccordionActions API + +

The API documentation of the AccordionActions React component. Learn more about the props and the CSS customization points.

+ +## Import + +```js +import AccordionActions from '@material-ui/core/AccordionActions'; +// or +import { AccordionActions } from '@material-ui/core'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + +## Component name + +The `MuiAccordionActions` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| children | node | | The content of the component. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| disableSpacing | bool | false | If `true`, the actions do not have additional margin. | + +The `ref` is forwarded to the root element. + +Any other props supplied will be provided to the root element (native element). + +## CSS + +| Rule name | Global class | Description | +|:-----|:-------------|:------------| +| root | .MuiAccordionActions-root | Styles applied to the root element. +| spacing | .MuiAccordionActions-spacing | Styles applied to the root element if `disableSpacing={false}`. + +You can override the style of the component thanks to one of these customization points: + +- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). +- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). +- With a theme and an [`overrides` property](/customization/globals/#css). + +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/AccordionActions/AccordionActions.js) for more detail. + +## Demos + +- [Accordion](/components/accordion/) + diff --git a/docs/pages/api-docs/accordion-details.js b/docs/pages/api-docs/accordion-details.js new file mode 100644 index 00000000000000..8677fef6f37f02 --- /dev/null +++ b/docs/pages/api-docs/accordion-details.js @@ -0,0 +1,15 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; + +const pageFilename = 'api/accordion-details'; +const requireRaw = require.context('!raw-loader!./', false, /\/accordion-details\.md$/); + +export default function Page({ docs }) { + return ; +} + +Page.getInitialProps = () => { + const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); + return { demos, docs }; +}; diff --git a/docs/pages/api-docs/accordion-details.md b/docs/pages/api-docs/accordion-details.md new file mode 100644 index 00000000000000..491a85d4429f7f --- /dev/null +++ b/docs/pages/api-docs/accordion-details.md @@ -0,0 +1,55 @@ +--- +filename: /packages/material-ui/src/AccordionDetails/AccordionDetails.js +--- + + + +# AccordionDetails API + +

The API documentation of the AccordionDetails React component. Learn more about the props and the CSS customization points.

+ +## Import + +```js +import AccordionDetails from '@material-ui/core/AccordionDetails'; +// or +import { AccordionDetails } from '@material-ui/core'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + +## Component name + +The `MuiAccordionDetails` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| children | node | | The content of the accordion details. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | + +The `ref` is forwarded to the root element. + +Any other props supplied will be provided to the root element (native element). + +## CSS + +| Rule name | Global class | Description | +|:-----|:-------------|:------------| +| root | .MuiAccordionDetails-root | Styles applied to the root element. + +You can override the style of the component thanks to one of these customization points: + +- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). +- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). +- With a theme and an [`overrides` property](/customization/globals/#css). + +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/AccordionDetails/AccordionDetails.js) for more detail. + +## Demos + +- [Accordion](/components/accordion/) + diff --git a/docs/pages/api-docs/accordion-summary.js b/docs/pages/api-docs/accordion-summary.js new file mode 100644 index 00000000000000..ab14333f59327e --- /dev/null +++ b/docs/pages/api-docs/accordion-summary.js @@ -0,0 +1,15 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; + +const pageFilename = 'api/accordion-summary'; +const requireRaw = require.context('!raw-loader!./', false, /\/accordion-summary\.md$/); + +export default function Page({ docs }) { + return ; +} + +Page.getInitialProps = () => { + const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); + return { demos, docs }; +}; diff --git a/docs/pages/api-docs/accordion-summary.md b/docs/pages/api-docs/accordion-summary.md new file mode 100644 index 00000000000000..641eaefc9e364e --- /dev/null +++ b/docs/pages/api-docs/accordion-summary.md @@ -0,0 +1,67 @@ +--- +filename: /packages/material-ui/src/AccordionSummary/AccordionSummary.js +--- + + + +# AccordionSummary API + +

The API documentation of the AccordionSummary React component. Learn more about the props and the CSS customization points.

+ +## Import + +```js +import AccordionSummary from '@material-ui/core/AccordionSummary'; +// or +import { AccordionSummary } from '@material-ui/core'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + +## Component name + +The `MuiAccordionSummary` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| children | node | | The content of the accordion summary. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| expandIcon | node | | The icon to display as the expand indicator. | +| IconButtonProps | object | | Props applied to the `IconButton` element wrapping the expand icon. | + +The `ref` is forwarded to the root element. + +Any other props supplied will be provided to the root element ([ButtonBase](/api/button-base/)). + +## CSS + +| Rule name | Global class | Description | +|:-----|:-------------|:------------| +| root | .MuiAccordionSummary-root | Styles applied to the root element. +| expanded | .Mui-expanded | Pseudo-class applied to the root element, children wrapper element and `IconButton` component if `expanded={true}`. +| focused | .Mui-focused | Pseudo-class applied to the root element if `focused={true}`. +| disabled | .Mui-disabled | Pseudo-class applied to the root element if `disabled={true}`. +| content | .MuiAccordionSummary-content | Styles applied to the children wrapper element. +| expandIcon | .MuiAccordionSummary-expandIcon | Styles applied to the `IconButton` component when `expandIcon` is supplied. + +You can override the style of the component thanks to one of these customization points: + +- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). +- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). +- With a theme and an [`overrides` property](/customization/globals/#css). + +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/AccordionSummary/AccordionSummary.js) for more detail. + +## Inheritance + +The props of the [ButtonBase](/api/button-base/) component are also available. +You can take advantage of this behavior to [target nested components](/guides/api/#spread). + +## Demos + +- [Accordion](/components/accordion/) + diff --git a/docs/pages/api-docs/accordion.js b/docs/pages/api-docs/accordion.js new file mode 100644 index 00000000000000..90ecdc5be3ab1e --- /dev/null +++ b/docs/pages/api-docs/accordion.js @@ -0,0 +1,15 @@ +import React from 'react'; +import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; +import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; + +const pageFilename = 'api/accordion'; +const requireRaw = require.context('!raw-loader!./', false, /\/accordion\.md$/); + +export default function Page({ docs }) { + return ; +} + +Page.getInitialProps = () => { + const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); + return { demos, docs }; +}; diff --git a/docs/pages/api-docs/accordion.md b/docs/pages/api-docs/accordion.md new file mode 100644 index 00000000000000..a51ff21880b78c --- /dev/null +++ b/docs/pages/api-docs/accordion.md @@ -0,0 +1,70 @@ +--- +filename: /packages/material-ui/src/Accordion/Accordion.js +--- + + + +# Accordion API + +

The API documentation of the Accordion React component. Learn more about the props and the CSS customization points.

+ +## Import + +```js +import Accordion from '@material-ui/core/Accordion'; +// or +import { Accordion } from '@material-ui/core'; +``` + +You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). + + + +## Component name + +The `MuiAccordion` name can be used for providing [default props](/customization/globals/#default-props) or [style overrides](/customization/globals/#css) at the theme level. + +## Props + +| Name | Type | Default | Description | +|:-----|:-----|:--------|:------------| +| children* | node | | The content of the accordion. | +| classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | +| defaultExpanded | bool | false | If `true`, expands the accordion by default. | +| disabled | bool | false | If `true`, the accordion will be displayed in a disabled state. | +| expanded | bool | | If `true`, expands the accordion, otherwise collapse it. Setting this prop enables control over the accordion. | +| onChange | func | | Callback fired when the expand/collapse state is changed.

**Signature:**
`function(event: object, expanded: boolean) => void`
*event:* The event source of the callback.
*expanded:* The `expanded` state of the accordion. | +| square | bool | false | If `true`, rounded corners are disabled. | +| TransitionComponent | elementType | Collapse | The component used for the collapse effect. [Follow this guide](/components/transitions/#transitioncomponent-prop) to learn more about the requirements for this component. | +| TransitionProps | object | | Props applied to the [`Transition`](http://reactcommunity.org/react-transition-group/transition#Transition-props) element. | + +The `ref` is forwarded to the root element. + +Any other props supplied will be provided to the root element ([Paper](/api/paper/)). + +## CSS + +| Rule name | Global class | Description | +|:-----|:-------------|:------------| +| root | .MuiAccordion-root | Styles applied to the root element. +| rounded | .MuiAccordion-rounded | Styles applied to the root element if `square={false}`. +| expanded | .Mui-expanded | Styles applied to the root element if `expanded={true}`. +| disabled | .Mui-disabled | Styles applied to the root element if `disabled={true}`. + +You can override the style of the component thanks to one of these customization points: + +- With a rule name of the [`classes` object prop](/customization/components/#overriding-styles-with-classes). +- With a [global class name](/customization/components/#overriding-styles-with-global-class-names). +- With a theme and an [`overrides` property](/customization/globals/#css). + +If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/Accordion/Accordion.js) for more detail. + +## Inheritance + +The props of the [Paper](/api/paper/) component are also available. +You can take advantage of this behavior to [target nested components](/guides/api/#spread). + +## Demos + +- [Accordion](/components/accordion/) + diff --git a/docs/pages/api-docs/avatar.md b/docs/pages/api-docs/avatar.md index 7e5c8c74d96af9..3c61fcad93c9e4 100644 --- a/docs/pages/api-docs/avatar.md +++ b/docs/pages/api-docs/avatar.md @@ -36,7 +36,7 @@ The `MuiAvatar` name can be used for providing [default props](/customization/gl | sizes | string | | The `sizes` attribute for the `img` element. | | src | string | | The `src` attribute for the `img` element. | | srcSet | string | | The `srcSet` attribute for the `img` element. Use this attribute for responsive image display. | -| variant | 'circle'
| 'rounded'
| 'square' | 'circle' | The shape of the avatar. | +| variant | 'circle'
| 'circular'
| 'rounded'
| 'square' | 'circle' | The shape of the avatar. | The `ref` is forwarded to the root element. @@ -49,6 +49,7 @@ Any other props supplied will be provided to the root element (native element). | root | .MuiAvatar-root | Styles applied to the root element. | colorDefault | .MuiAvatar-colorDefault | Styles applied to the root element if not `src` or `srcSet`. | circle | .MuiAvatar-circle | Styles applied to the root element if `variant="circle"`. +| circular | .MuiAvatar-circular | Styles applied to the root element if `variant="circular"`. | rounded | .MuiAvatar-rounded | Styles applied to the root element if `variant="rounded"`. | square | .MuiAvatar-square | Styles applied to the root element if `variant="square"`. | img | .MuiAvatar-img | Styles applied to the img element if either `src` or `srcSet` is defined. diff --git a/docs/pages/api-docs/circular-progress.md b/docs/pages/api-docs/circular-progress.md index a6d86808dd113b..82c06f532502d6 100644 --- a/docs/pages/api-docs/circular-progress.md +++ b/docs/pages/api-docs/circular-progress.md @@ -37,7 +37,7 @@ The `MuiCircularProgress` name can be used for providing [default props](/custom | disableShrink | bool | false | If `true`, the shrink animation is disabled. This only works if variant is `indeterminate`. | | size | number
| string | 40 | The size of the circle. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, e.g '3rem'. | | thickness | number | 3.6 | The thickness of the circle. | -| value | number | 0 | The value of the progress indicator for the determinate and static variants. Value between 0 and 100. | +| value | number | 0 | The value of the progress indicator for the determinate variant. Value between 0 and 100. | | variant | 'determinate'
| 'indeterminate'
| 'static' | 'indeterminate' | The variant to use. Use indeterminate when there is no progress value. | The `ref` is forwarded to the root element. @@ -51,12 +51,14 @@ Any other props supplied will be provided to the root element (native element). | root | .MuiCircularProgress-root | Styles applied to the root element. | static | .MuiCircularProgress-static | Styles applied to the root element if `variant="static"`. | indeterminate | .MuiCircularProgress-indeterminate | Styles applied to the root element if `variant="indeterminate"`. +| determinate | .MuiCircularProgress-determinate | Styles applied to the root element if `variant="determinate"`. | colorPrimary | .MuiCircularProgress-colorPrimary | Styles applied to the root element if `color="primary"`. | colorSecondary | .MuiCircularProgress-colorSecondary | Styles applied to the root element if `color="secondary"`. | svg | .MuiCircularProgress-svg | Styles applied to the `svg` element. | circle | .MuiCircularProgress-circle | Styles applied to the `circle` svg path. | circleStatic | .MuiCircularProgress-circleStatic | Styles applied to the `circle` svg path if `variant="static"`. | circleIndeterminate | .MuiCircularProgress-circleIndeterminate | Styles applied to the `circle` svg path if `variant="indeterminate"`. +| circleDeterminate | .MuiCircularProgress-circleDeterminate | Styles applied to the `circle` svg path if `variant="determinate"`. | circleDisableShrink | .MuiCircularProgress-circleDisableShrink | Styles applied to the `circle` svg path if `disableShrink={true}`. You can override the style of the component thanks to one of these customization points: diff --git a/docs/pages/api-docs/expansion-panel-actions.md b/docs/pages/api-docs/expansion-panel-actions.md index f56843dbc77140..839d39090e73e4 100644 --- a/docs/pages/api-docs/expansion-panel-actions.md +++ b/docs/pages/api-docs/expansion-panel-actions.md @@ -18,7 +18,10 @@ import { ExpansionPanelActions } from '@material-ui/core'; You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). +⚠️ The ExpansionPanelActions component was renamed to AccordionActions to use a more common naming convention. +You should use `import { AccordionActions } from '@material-ui/core'` +or `import AccordionActions from '@material-ui/core/AccordionActions'`. ## Component name @@ -51,7 +54,3 @@ You can override the style of the component thanks to one of these customization If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ExpansionPanelActions/ExpansionPanelActions.js) for more detail. -## Demos - -- [Expansion Panels](/components/expansion-panels/) - diff --git a/docs/pages/api-docs/expansion-panel-details.md b/docs/pages/api-docs/expansion-panel-details.md index e1d50da46b9a3c..57dc5b6220c487 100644 --- a/docs/pages/api-docs/expansion-panel-details.md +++ b/docs/pages/api-docs/expansion-panel-details.md @@ -18,7 +18,10 @@ import { ExpansionPanelDetails } from '@material-ui/core'; You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). +⚠️ The ExpansionPanelDetails component was renamed to AccordionDetails to use a more common naming convention. +You should use `import { AccordionDetails } from '@material-ui/core'` +or `import AccordionDetails from '@material-ui/core/AccordionDetails'`. ## Component name @@ -49,7 +52,3 @@ You can override the style of the component thanks to one of these customization If that's not sufficient, you can check the [implementation of the component](https://github.com/mui-org/material-ui/blob/master/packages/material-ui/src/ExpansionPanelDetails/ExpansionPanelDetails.js) for more detail. -## Demos - -- [Expansion Panels](/components/expansion-panels/) - diff --git a/docs/pages/api-docs/expansion-panel-summary.md b/docs/pages/api-docs/expansion-panel-summary.md index fd4ff7bcf5b72c..b38ba4666ad080 100644 --- a/docs/pages/api-docs/expansion-panel-summary.md +++ b/docs/pages/api-docs/expansion-panel-summary.md @@ -18,7 +18,10 @@ import { ExpansionPanelSummary } from '@material-ui/core'; You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). +⚠️ The ExpansionPanelSummary component was renamed to AccordionSummary to use a more common naming convention. +You should use `import { AccordionSummary } from '@material-ui/core'` +or `import AccordionSummary from '@material-ui/core/AccordionSummary'`. ## Component name @@ -32,6 +35,7 @@ The `MuiExpansionPanelSummary` name can be used for providing [default props](/c | classes | object | | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. | | expandIcon | node | | The icon to display as the expand indicator. | | IconButtonProps | object | | Props applied to the `IconButton` element wrapping the expand icon. | +| onFocusVisible | func | | Callback fired when the component is focused with a keyboard. We trigger a `onFocus` callback too. | The `ref` is forwarded to the root element. @@ -61,7 +65,3 @@ If that's not sufficient, you can check the [implementation of the component](ht The props of the [ButtonBase](/api/button-base/) component are also available. You can take advantage of this behavior to [target nested components](/guides/api/#spread). -## Demos - -- [Expansion Panels](/components/expansion-panels/) - diff --git a/docs/pages/api-docs/expansion-panel.md b/docs/pages/api-docs/expansion-panel.md index 5d92270d9b0953..bcd70b00c0d34d 100644 --- a/docs/pages/api-docs/expansion-panel.md +++ b/docs/pages/api-docs/expansion-panel.md @@ -18,7 +18,10 @@ import { ExpansionPanel } from '@material-ui/core'; You can learn more about the difference by [reading this guide](/guides/minimizing-bundle-size/). +⚠️ The ExpansionPanel component was renamed to Accordion to use a more common naming convention. +You should use `import { Accordion } from '@material-ui/core'` +or `import Accordion from '@material-ui/core/Accordion'`. ## Component name @@ -64,7 +67,3 @@ If that's not sufficient, you can check the [implementation of the component](ht The props of the [Paper](/api/paper/) component are also available. You can take advantage of this behavior to [target nested components](/guides/api/#spread). -## Demos - -- [Expansion Panels](/components/expansion-panels/) - diff --git a/docs/pages/api-docs/icon-button.md b/docs/pages/api-docs/icon-button.md index 01d1e5407bd450..015be7107adb43 100644 --- a/docs/pages/api-docs/icon-button.md +++ b/docs/pages/api-docs/icon-button.md @@ -72,5 +72,4 @@ You can take advantage of this behavior to [target nested components](/guides/ap ## Demos - [Buttons](/components/buttons/) -- [Grid List](/components/grid-list/) diff --git a/docs/pages/api-docs/list-subheader.md b/docs/pages/api-docs/list-subheader.md index 1e174241c8682d..9219d2662b54e1 100644 --- a/docs/pages/api-docs/list-subheader.md +++ b/docs/pages/api-docs/list-subheader.md @@ -61,6 +61,5 @@ If that's not sufficient, you can check the [implementation of the component](ht ## Demos -- [Grid List](/components/grid-list/) - [Lists](/components/lists/) diff --git a/docs/pages/blog/2020-developer-survey-results.js b/docs/pages/blog/2020-developer-survey-results.js new file mode 100644 index 00000000000000..0f85331540a683 --- /dev/null +++ b/docs/pages/blog/2020-developer-survey-results.js @@ -0,0 +1,15 @@ +import React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; + +const pageFilename = 'blog/2020-developer-survey-results'; +const requireRaw = require.context('!raw-loader!./', false, /2020-developer-survey-results\.md$/); + +export default function Page({ docs }) { + return ; +} + +Page.getInitialProps = () => { + const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); + return { demos, docs }; +}; diff --git a/docs/pages/blog/2020-developer-survey-results.md b/docs/pages/blog/2020-developer-survey-results.md new file mode 100644 index 00000000000000..f5907ea2b0952f --- /dev/null +++ b/docs/pages/blog/2020-developer-survey-results.md @@ -0,0 +1,314 @@ +--- +description: 2020 Material-UI Developer Survey results +--- + +# 2020 Material-UI Developer Survey results + +Marija Najdova, Olivier Tassinari, Matt Brookes. June 27, 2020. + +Continuing the tradition from last year, we launched a developer survey a few months ago, to which we received 1488 responses. This is twice as many as last year (734), so we thank you all for the participation! +The survey is closed and we can now give a detailed summary of the results. + +Like last year, the survey was again broken into three sections: ["Introduction"](#Introduction), ["About you"](#about-you) and ["Your product"](#your-product). + +## Introduction + +In this section, we wanted to hear what developers think is going well, what we should keep doing, and which areas need improving to make the library even better. + +### 1. How would you feel if you could no longer use Material-UI? + +Pie chart: 73.3% Very disappointed, 21.3% somewhat disappointed, 5.4% not disappointed. + +Similar to last year, over 94% of the respondents would be disappointed if they could no longer use Material-UI, which is very encouraging. We will keep working hard to hopefully move more of you into the "very disappointed" category! + +The number of respondents who would not be disappointed has moved down from 6.5% to 5.4%, which is technically a 17% improvement! 🙂 We'd love to understand more about those who use Material-UI, but would happily use other solutions, so a follow-up question might be needed next year. + +### 2. How likely is it that you would recommend Material-UI to a friend or colleague? + +Bar chart: 0.20% - 1, 0% - 2, 0.20% - 3, 0.20% - 4, 1.02% - 5, 1.97% - 6, 8.71% - 7, 22.52% - 8, 20.88% - 9, 44.29% - 10 +
+Pie chart: 73.3% Very disappointed, 21.3% somewhat disappointed, 5.4% not disappointed. + +As last year, we again calculated the [Net Promoter Score](https://en.wikipedia.org/wiki/Net_Promoter) +(promoters less detractors). This year it is again a pretty high number 61.54%! (As the values for NPS range between -100 and +100, a “positive” score is considered “good”, greater than 50 is “excellent”, and above 70 is considered “world class”). + +### 3. Who do you think would most benefit from Material-UI? + +Word cloud of who would benefit most + +

This word cloud was generated with wordclouds.com.

+ +Developers are again at the center of our universe 🙂 (And "people" and "teams" in general, of course!) This is understandable, given the [job role demographic](#8-which-of-the-following-best-describes-your-current-job-role) +of the majority of respondents. We will push hard on making the experience for you even better over the next year. + +### 4. What is the main benefit you receive from Material-UI? + +Word cloud of the main benefit of Material-UI + +The responses to this question are a very clear indicator to us about what we need to continue to do more of. Some of the most common points were: the range of components, ease of use, documentation quality, as well as the design. We will, of course, continue to work on all of these. + +### 5. How can we improve Material-UI for you? + +As the answers to these questions were pretty different, we grouped them into different categories and counted the different number of times the concern was mentioned. You can see all of them sorted in descending order: + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
306more components
202more components - ?
15more components - data grid
12more components - carousel
12more components - charts
10more components - lab to core
10more components - upload
9more components - icons
6more components - big calendar
5more components - layout
4more components - navbar
4more components - nested menu
2more components - rich text editor
2more components - splitter
1more components - masonry
1more components - nav bar
1more components - numberpad
1more components - onboarding
1more components - prompt
1more components - scrollspy
1more components - swappable tabs
1more components - timeline
1more components - video player
1more components - virtualization
1more components - drag and drop
1more components - dropdown
1more components - image
189customization
85customization - easier
22customization - docs
16customization - dynamic color & variant
15customization - improve custom themes
13customization - provide more themes (not just Material Design)
11customization - ?
9customization - unstyled components
8customization - support system in all components
8customization - theme editor (visual tool)
2customization - theme gallery (coming from the community)
155docs
46docs - ?
45docs - more examples
33docs - more templates
16docs - beginner friendly
8docs - smaller demos
8docs - tutorials
3docs - api integration with components
2docs - better search
2docs - spanish
1docs - chinese
1docs - translations
1docs - detailed api
1docs - easier discoverability of components
1docs - generated DOM
1docs - japanese
1docs - more realistic examples
1docs - nested props
1docs - plugins
1docs - ssr
64performance
31performance - ?
32performance - bundle size
1performance - DOM size
56styles
19styles - styled components
7styles - docs
5styles - simpler
4styles - ?
3styles - CSS syntax
3styles - better dark/light switch
3styles - emotion
3styles - performance
2styles - agnostic to engine
2styles - css modules
2styles - utility class names
1styles - atomic compiled css-in-js
1styles - keep jss
1styles - remove JSS
25typescript
19typescript - ?
3typescript - docs
3typescript - faster check
21date picker - improve
19react native
13form
13material design updates
12animations
8animations - ?
2animations - docs
1animations - declarative API
1animations - SVG
11test
4test - jest
3test - stable snapshot
1test - ?
1test - docs
1test - styles
1test - testing library integration
8more opinionated
8simplify
7class components
7mobile
7fewer breaking changes
7designers
2designers - bridge design tools and code
2designers - Adobe XD material
2designers - Figma material
1designers - ?
6free vs paid balance
6tree view - improve
6less abstracted components
5more abstracted components
4accessibility
1accessibility - ?
1accessibility - auto id
1accessibility - full audit
1accessibility - more examples
4system
1system - CSS grid
1system - docs
1system - performance
1system - rework breakpoints
3components consistency
3grid - improve
+ +### Comparison with last year + +There are a couple of noticeable differences compared to last year. +Some can be explained by our work, others by the evolution of the ecosystem. +Each item is prefixed by the multiplication factor of the pain point for 2020 relative to 2019. + +Decreasing pain: +- x0: Slider. No requests. The requirements are mostly met, especially with the introduction of the range feature. +- x0.1: Strict mode. We fixed a lot of strict mode compatibility issues this year. However, since Create React App has made this mode a default, we have seen a lot more requests for it. +- x0.1: Autocomplete. We added a new component, and have resolved a large number of issues opened since. This will be moved from lab to the core in v5. +- x0.2: Fewer breaking changes. Only releasing minor versions under v4 for over a year helps a lot. However, we still need to be careful with CSS changes. +- x0.3: Accessibility. We have been able to leverage GitHub issues opened by a11y experts, often coming from large companies using Material-UI at scale to improve it a lot this year. +- x0.4: Material design. We didn't do much for it this year, at least not as much as we could have. Maybe the reduction is because fewer people care? It seems that we start to resonate more with developers building custom design systems. +- x0.4: TypeScript. The continued migration of all the demos to TypeScript and of all the props to IntelliSense is paying off. +- x0.5: Date picker. We did a lot for it this year. We probably still need the range feature, and to move it into the main repository (docs migration, etc.) for consistency. +- x0.7: Performance. We didn't do much this year, so perhaps developers are leveraging React more effectively with virtualization, update pruning, etc? + +Growing pains: +- ∞: Forms is a new item. It seems that we should at least work more closely with react-hook-form, formik, and react-final-form. +- ∞: Charts is a new item. Material Design even has a page dedicated to [date visualization](https://material.io/design/communication/data-visualization.html). +- x5: Custom themes. +- x5: Simpler customization. We have improved customizability this year by introducing global class names and reducing the CSS specificity of some selectors. However, it seems that we are now tapping into a new audience. We need to do better. +- x1.5: Animations. +- x1.2: React native. We still have no plans for it. The [market is too small](https://npm-stat.com/charts.html?package=react-dom,react-native) to make it sustainable with our model. +- x1.1: More components. The more we offer, the more developers ask for! We will try to help solve this with the enterprise version, both because it's the best model we have found that can sustain the development of advanced components, and because it allows us to reinvest in the open source components. The first early access will land this year. + +### 6. What are your key criteria when choosing a UI library? + +Bar chart: 21.99% The design, look & feel, 21.64% Documentation quality, 16.38% Customizability, 8.42% TypeScript integration, 6.89% Comprehensiveness, 5.35% Enterprise ready, 4.68% Bundle size, 4.92% Popularity, 4.45% Accessibility, 2.62% Documentation quality, 1.88% Offered support & help, 0.12% Performance, 0.67% Other. + +The number of answers was limited to 3. + +## About you + +### 7. How did you hear about Material-UI? + +Bar chart: 50.65% Search, 26.18% Word of mouth, 10.76% Social, 5.10% Blog, 7.31% Other. + +### 8. Which of the following best describes your current job role? + +Bar chart: 52.18% Full-stack developer, 27.11% Frontend developer, 11.65% Entrepreneur (I do it all), 3.47% Beginner learning web development, 1.23% Backend Developer, 1.16% UX Designer, 0.34% Student, 0.20% CTO, 2.66% Other. + +This was expected :) + +### 9. How big is your organization? + +Bar chart: 12.30% Hobby / side project, 13.40% Self-employed, 35.60% 2-5 people, 16.10% 6-10, 10.30% 11-20, 5.10% 21-50, 2.50% 51-100, 4.60% 100+ + +It seems we are consistently popular with small to medium-sized organizations, so we will keep working on the ease of use of the components, while at the same time, allowing designers to style them to match their organizations' brand. + +### 10. How long have you been developing with JavaScript + +Bar chart: 3.60% I'm just getting started!, 7.40% 6 months +, 20.80% 1 year +, 27.80% 3 years +, 24.30% 5 years +, 9.80% 10 years +, 4.10% 15 years +, 2.30% 20 years + + +We can see the normal distribution of developer experience here, where most have moderate level of experience (between 1 and 5 years). + +### 11. How long have you been developing with React? + +Bar chart: 10.70% I'm just getting started!, 15.60% 6 months +, 24.60% 1 year +, 21.40% 2 years +, 23.10% 3 years +, 4.60% Bleeding edge baby! 5 years + + +### 12. How long have you been developing with Material-UI? + +Bar chart: 20.50% I'm just getting started!, 24.90% 6 months +, 28% 1 year +, 17.40% 2 years +, 7.50% 3 years +, 1.70% I'm a pioneer! 4 years + + +### 13. What were you primarily using before Material-UI? + +Bar chart: 47.08% Bootstrap, 16.04% Custom system, 13.68% Started with Material-UI, 6.67% Angular Material, 4.44% Semantic-UI, 3.19% Ant Design, 8.89% Other + +Similar to last year, it seems that most respondents were previously using Bootstrap. We can see also that custom solutions, as well as some other frameworks, were replaced with Material-UI. + +### 14. How many Material-UI based projects have you built? + +Bar chart: 11.50% 0 (I’m just getting started), 23% 1, 54.80% 2-5, 7.80% 6-10, 2.90% 10+ + +## Your product + +### 15. What are you building? + +Bar chart: 23.43% Enterprise application, 20.31% Dashboard admin app, 7.40% A design system, 7.40% A set of UI components, 7.37% playing with tech, 7.34% A prototype, 6.40% Landing page, 5.41% e-commerce site, 4.80% CMS, 3.59% Portfolio or resume, 1.88% Blog, 4.69% Other + +Enterprises and dashboards are at the top of the heap, and yes, we know that for many of you, the systems you are building are internal, but if you have something that you would like to share as part of [the showcase](/discover-more/showcase/), let us know by opening a PR. Also for those of you building UI components, we'd be happy to give you a shout out in the [related projects](/discover-more/related-projects/) +section. + +### 16. What “delivery mechanism” are you using? + +Bar chart: 68.37% Single page app (Create React App, etc), 18.24% Server-side rendered website (Next.js, Gatsby, etc), 6.22% Desktop app (Electron, etc), 4.65% Native mobile app (Cordova, etc), 0.10% React Native, 2.40% Other + +### 17. Who are you building it for? + +Pie chart: 55.17% For my company +22.86% For a client, 16.94% Side project, 5.03% More than one of these. + +### 18. Which JS framework are you using, if any? + +Pie chart: 57.34% Create React App, 16.40% Custom webpack, 12.35% Next.js, 5.40% Gatsby, 8.51% Other. + +### 19. What styling system are you using? + +Pie chart: 53.84% Material-UI styles (JSS), 20.41% Styled components, 13.01% Good plain CSS, 8.31% CSS Modules, 1.96% Emotion, 0.59% scss, 0.59% sass, 0.09% less, 1.19% Other + +The response seems to be similar to the one from the last year's survey, so we will push with better support for styled components. + +### 20. Has your organization ever paid for UI components? + +Pie chart: 89.90% No, 10.10% Yes + + +### 21. What type system are you using? + +Bar chart: 54.08% None +30.87% TypeScript 3.8, 7.31% TypeScript 3.7, 1.90% Flow, 1.55% TypeScript 3.6, 0.98% TypeScript 3.5, 3.31% Other + +Almost half of the community is using TypeScript. Next year, it might even become more popular than JavaScript. + +## Conclusion + +This data is **incredibly valuable** for our team. +Thank you again for participating! +We want to work on the problems that resonate the most with our users. +[It's clear](#5-how-can-we-improve-material-ui-for-you) that we should: + +1. Provide more flexibility on the components, unstyled components (pure hooks?). +1. Make the customization easier and implement custom themes with Material-UI. Maybe provide a theme builder. +1. Provide a second theme, update the current components to better match Material Design, provide more simple components and features (e.g. dropzone, carousel) as well as provide a better DX (there are good ideas from other UI libraries to apply to Material-UI v5). +1. Improve upon the paid advanced versions of the components (e.g. complex data grid, date range picker, tree view drag & drop, virtualization, etc). + +**We will update [our ROADMAP](/discover-more/roadmap/) in the coming days**. +We will run a similar survey next year to keep track of our progress. + +If you want to continue to influence our roadmap, please upvote 👍 the issues you are the most interested in on GitHub. + +How to upvote on GitHub +

Help us prioritize by upvoting.

diff --git a/docs/pages/blog/2020-q2-update.js b/docs/pages/blog/2020-q2-update.js new file mode 100644 index 00000000000000..3ead0ffc267587 --- /dev/null +++ b/docs/pages/blog/2020-q2-update.js @@ -0,0 +1,15 @@ +import React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; + +const pageFilename = 'blog/2020-q2-update'; +const requireRaw = require.context('!raw-loader!./', false, /2020-q2-update\.md$/); + +export default function Page({ docs }) { + return ; +} + +Page.getInitialProps = () => { + const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); + return { demos, docs }; +}; diff --git a/docs/pages/blog/2020-q2-update.md b/docs/pages/blog/2020-q2-update.md new file mode 100644 index 00000000000000..8c4a2027ab74ac --- /dev/null +++ b/docs/pages/blog/2020-q2-update.md @@ -0,0 +1,116 @@ +--- +description: An update on our mission for Q2 2020. +--- + +# Q2 2020 Update + +Olivier Tassinari. July 17, 2020. + +This update covers our progress over the last three months, and what we aim to achieve in the coming months. + +## Product + +Here are the most significant improvements since March 2020: + +- 🚧 Work has started on [the next major version: v5](https://github.com/mui-org/material-ui/issues/20012).
+The last 14 months have been spent focusing on improving the library under the v4.x development branch, while not introducing any breaking changes. During this period we have identified several important areas for improvement. While the absence of breaking changes is a significant time-saver for developers, it also limits the scope of the problems that can be solved and the quality of the solutions. We're excited about what comes next!

+You can find the documentation for the next version at http://next.material-ui.com/. The next 6-8 months will see weekly releases as always, following [the roadmap](https://github.com/mui-org/material-ui/issues/20012) and [milestone](https://github.com/mui-org/material-ui/milestone/35). + +- 📍 The icons package has been updated with changes made by Google, leading to [200+ new icons](https://next.material-ui.com/components/material-icons/). + + icons + +- 🎨 [Figma assets](https://material-ui.com/store/items/figma-react/) for Material-UI extend the support for design tools beyond Sketch. + + figma + + Adobe XD and Framer support are also up for consideration if they attract a significant audience, but not until we've polished the Sketch and Figma assets. + +- 🔄 `LoadingButton` – [a new component in the lab](https://next.material-ui.com/components/buttons/#loading-buttons). This work is influenced by the [concurrent UI patterns](https://reactjs.org/docs/concurrent-mode-patterns.html) presented by the React team. + + loading + +- ⚛️ We have made **all** component props available in IntelliSense. This is complementary to the `propTypes` and API pages in the documentation. + + ![props](/static/blog/2020-q1-update/props.png) + +- ⏰ A new [`Timeline` component](/components/timeline/) joins the lab. + + timeline + +- 📣 We have analyzed and published the results of the "Material-UI Developer Survey 2020". If you haven't read it yet, you can follow this link to [read it in detail](/blog/2020-developer-survey-results/). It contains a lot of interesting insights that will shape the future of the library and company. Thanks for the contributions! ❤️ +- 🇨🇳🇧🇷 The non-API documentation has been fully translated to Chinese and Brazilian, thanks to the collaboration of [Danica Shen](https://github.com/DDDDDanica), [Yan Lee](https://github.com/AGDholo), and [Jairon Alves Lima](https://github.com/jaironalves), native speakers from the community 🙏. + + chinese + + brazilian + + After English, Chinese, and Brazilian, the languages that would benefit the most from translation are **Russian** and **Spanish**.
+ Feel free to [get stuck into](https://translate.material-ui.com/) if you are a native speaker and able to give a hand with either of these two languages. + +- 🗂 A new extension of the Tab API [in the lab](/components/tabs/#experimental-api) implements accessible tabs following [WAI-ARIA](https://www.w3.org/TR/wai-aria-practices/#tabpanel) authoring practices. + +```jsx + + + + + + + Item One + Item Two + Item Three + +``` + +- 📆 On the [date picker](https://next.material-ui-pickers.dev/): + + - A new `renderInput` API which matches that of the autocomplete component has been added. + - The input mask UX has been improved. + - Support for `value={null}` has been added. + - Desktop vs mobile detection has been improved by using the pointer capabilities instead of the screen dimension. + - Accessibility has been improved. + - Consistency between the date pickers and the other components of the library has been improved. + +## Company + +### Growth between Q1 2020 and Q2 2020 + +- 📦 From 4.8M to 5.1M downloads per month on npm. +- ⭐️ From 56.2k to 59.0k stars, leave us yours 🌟. +- 👨‍👩‍👧‍👦 From 1,720 to 1,825 contributors on GitHub. +- 💰 Grew monthly financial support by 46%. +- 🏢 Headcount remains the same. + +## Our roadmap intent for Q3 2020 + +We'll do our best, no guarantee! + +- ⚙️ To make significant progress with the v5 roadmap. + +- 🌏 Translate the API pages, for instance, the [Alert API](https://material-ui.com/api/alert/) can only be consumed in English. + +- 📆 Migrate the date picker components to the main repository to ensure high consistency with the core components. Keep investing in the component to make it part of the v5 release schedule. + +- 👩‍🎨 We will work with a design agency to do the branding of the company, redo the homepage, do the marketing pages of the enterprise version of the library, improve the documentation, introduce new themes (as alternatives to Material Design). + +- ❓ Please upvote [GitHub issues](https://github.com/mui-org/material-ui/issues) if you want something specific. The number of 👍 helps us to prioritize. + +### Company + +These are objectives, no guarantees: + +- 🏢 We will [hire](/company/jobs/) 3 full-time roles in the team. + - One person on the open-source side to focus on the design system problem (unstyled, theming, styling, etc.): ✅ starting in two months. + - One person on the enterprise side to consolidate the development of the advanced components: 🚧 Work in progress. + - One person on a role yet to defined: 🚧 Work in progress. + +- 🏝 We will run a company-wide team retreat if COVID-19 allows it. +- 📈 We will put structures internally to prepare the next step of growth. + +### Enterprise components + +- ⌗ Make available a first alpha version of our advanced data grid component as part of the enterprise bundle. +You can already [play with an early version](https://muix-preview.netlify.app/#/grid). +- 📆 Make available a first alpha version of the date range picker as part of the enterprise bundle. +You can already [play with an early version](https://next.material-ui-pickers.dev/demo/daterangepicker). diff --git a/docs/pages/blog/2020-q3-update.js b/docs/pages/blog/2020-q3-update.js new file mode 100644 index 00000000000000..8cabbb8043f7cf --- /dev/null +++ b/docs/pages/blog/2020-q3-update.js @@ -0,0 +1,15 @@ +import React from 'react'; +import TopLayoutBlog from 'docs/src/modules/components/TopLayoutBlog'; +import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; + +const pageFilename = 'blog/2020-q3-update'; +const requireRaw = require.context('!raw-loader!./', false, /2020-q3-update\.md$/); + +export default function Page({ docs }) { + return ; +} + +Page.getInitialProps = () => { + const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); + return { demos, docs }; +}; diff --git a/docs/pages/blog/2020-q3-update.md b/docs/pages/blog/2020-q3-update.md new file mode 100644 index 00000000000000..6ea7ffcb030ab3 --- /dev/null +++ b/docs/pages/blog/2020-q3-update.md @@ -0,0 +1,169 @@ +--- +title: Q3 2020 Update +description: An update on our mission for Q3 2020. +date: 2020-10-14T00:00:00.000Z +authors: ['oliviertassinari'] +card: true +--- + +This update covers our progress over the last three months, and what we aim to achieve in the coming months. + +## Product + +Here are the most significant improvements since June 2020. This was a dense quarter! + +- 🚧 We have started the quarter with the first pre-release [v5.0.0-alpha.1](https://github.com/mui-org/material-ui/releases?after=v5.0.0-alpha.1) of the next major iteration of the library. + There have been eleven more pre-releases since then. During the alpha development stage of version 5, we are focusing on making the planned breaking changes, as well as developing new features. + On the breaking changes side, we have made almost half of the changes that we have planned. +- 🧪 We have promoted 7 components from the lab to the core: Alert, Autocomplete, Pagination, Rating, Skeleton, SpeedDial, and ToggleButton. + Thank you for all your feedback on these components. + While we still plan a couple of breaking changes on them, we are confident that they have reached the same level of quality as the other core components. +- 👮 We have introduced a new component in the lab, the [TrapFocus](https://next.material-ui.com/components/trap-focus/). It manages focus for its descendants. This is useful when implementing overlays such as modal dialogs, which should not allow the focus to escape while open: + + + +- ⚛️ We have prepared the support for the upcoming release of [React v17](https://reactjs.org/blog/2020/08/10/react-v17-rc.html). Most of the work was about better handling events, and updating our test infrastructure to run the whole test suite with the _latest_ and _next_ version of React.
We have also improved `StrictMode` support. The last standing issues are being addressed with the work on the style engine. More on that later in the post. +- 💅 We have introduced a new dynamic variant API. This API allows developers to add new variants to Material-UI components right from the theme, without having to wrap the components. For instance with the Button: + + ```tsx + // Define the style that should be applied for specific props. + const theme = createMuiTheme({ + components: { + MuiButton: { + variants: [ + { + props: { variant: 'dashed', color: 'secondary' }, + styles: { + border: `4px dashed ${red[500]}`, + }, + }, + ], + }, + }, + }); + + // Optionally retain type safety: + declare module '@material-ui/core/Button/Button' { + interface ButtonPropsVariantOverrides { + dashed: true; + } + } + + // Enjoy! + - - + + ); } diff --git a/docs/src/pages/components/expansion-panels/DetailedExpansionPanel.tsx b/docs/src/pages/components/accordion/DetailedAccordion.tsx similarity index 78% rename from docs/src/pages/components/expansion-panels/DetailedExpansionPanel.tsx rename to docs/src/pages/components/accordion/DetailedAccordion.tsx index 12d73dbdafd5f5..1423d2d1306bce 100644 --- a/docs/src/pages/components/expansion-panels/DetailedExpansionPanel.tsx +++ b/docs/src/pages/components/accordion/DetailedAccordion.tsx @@ -1,10 +1,10 @@ import React from 'react'; import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'; import clsx from 'clsx'; -import ExpansionPanel from '@material-ui/core/ExpansionPanel'; -import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; -import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; -import ExpansionPanelActions from '@material-ui/core/ExpansionPanelActions'; +import Accordion from '@material-ui/core/Accordion'; +import AccordionDetails from '@material-ui/core/AccordionDetails'; +import AccordionSummary from '@material-ui/core/AccordionSummary'; +import AccordionActions from '@material-ui/core/AccordionActions'; import Typography from '@material-ui/core/Typography'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; import Chip from '@material-ui/core/Chip'; @@ -48,13 +48,13 @@ const useStyles = makeStyles((theme: Theme) => }), ); -export default function DetailedExpansionPanel() { +export default function DetailedAccordion() { const classes = useStyles(); return (
- - + } aria-controls="panel1c-content" id="panel1c-header" @@ -65,8 +65,8 @@ export default function DetailedExpansionPanel() {
Select trip destination
- - + +
{}} /> @@ -80,15 +80,15 @@ export default function DetailedExpansionPanel() {
- + - + - - + +
); } diff --git a/docs/src/pages/components/expansion-panels/SimpleExpansionPanel.js b/docs/src/pages/components/accordion/SimpleAccordion.js similarity index 55% rename from docs/src/pages/components/expansion-panels/SimpleExpansionPanel.js rename to docs/src/pages/components/accordion/SimpleAccordion.js index 0fd1f5ae9faa97..3dece0f807e0c7 100644 --- a/docs/src/pages/components/expansion-panels/SimpleExpansionPanel.js +++ b/docs/src/pages/components/accordion/SimpleAccordion.js @@ -1,8 +1,8 @@ import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; -import ExpansionPanel from '@material-ui/core/ExpansionPanel'; -import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; -import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; +import Accordion from '@material-ui/core/Accordion'; +import AccordionSummary from '@material-ui/core/AccordionSummary'; +import AccordionDetails from '@material-ui/core/AccordionDetails'; import Typography from '@material-ui/core/Typography'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; @@ -16,50 +16,50 @@ const useStyles = makeStyles((theme) => ({ }, })); -export default function SimpleExpansionPanel() { +export default function SimpleAccordion() { const classes = useStyles(); return (
- - + } aria-controls="panel1a-content" id="panel1a-header" > - Expansion Panel 1 - - + Accordion 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - + + + } aria-controls="panel2a-content" id="panel2a-header" > - Expansion Panel 2 - - + Accordion 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - + + + } aria-controls="panel3a-content" id="panel3a-header" > - Disabled Expansion Panel - - + Disabled Accordion + +
); } diff --git a/docs/src/pages/components/expansion-panels/SimpleExpansionPanel.tsx b/docs/src/pages/components/accordion/SimpleAccordion.tsx similarity index 57% rename from docs/src/pages/components/expansion-panels/SimpleExpansionPanel.tsx rename to docs/src/pages/components/accordion/SimpleAccordion.tsx index 7bff501c37bd5f..cd5dd496ddacf3 100644 --- a/docs/src/pages/components/expansion-panels/SimpleExpansionPanel.tsx +++ b/docs/src/pages/components/accordion/SimpleAccordion.tsx @@ -1,8 +1,8 @@ import React from 'react'; import { Theme, createStyles, makeStyles } from '@material-ui/core/styles'; -import ExpansionPanel from '@material-ui/core/ExpansionPanel'; -import ExpansionPanelSummary from '@material-ui/core/ExpansionPanelSummary'; -import ExpansionPanelDetails from '@material-ui/core/ExpansionPanelDetails'; +import Accordion from '@material-ui/core/Accordion'; +import AccordionSummary from '@material-ui/core/AccordionSummary'; +import AccordionDetails from '@material-ui/core/AccordionDetails'; import Typography from '@material-ui/core/Typography'; import ExpandMoreIcon from '@material-ui/icons/ExpandMore'; @@ -18,50 +18,50 @@ const useStyles = makeStyles((theme: Theme) => }), ); -export default function SimpleExpansionPanel() { +export default function SimpleAccordion() { const classes = useStyles(); return (
- - + } aria-controls="panel1a-content" id="panel1a-header" > - Expansion Panel 1 - - + Accordion 1 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - + + + } aria-controls="panel2a-content" id="panel2a-header" > - Expansion Panel 2 - - + Accordion 2 + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse malesuada lacus ex, sit amet blandit leo lobortis eget. - - - - + + + } aria-controls="panel3a-content" id="panel3a-header" > - Disabled Expansion Panel - - + Disabled Accordion + +
); } diff --git a/docs/src/pages/components/accordion/accordion-de.md b/docs/src/pages/components/accordion/accordion-de.md new file mode 100644 index 00000000000000..442cfe1740d354 --- /dev/null +++ b/docs/src/pages/components/accordion/accordion-de.md @@ -0,0 +1,56 @@ +--- +title: React Accordion Komponente +components: Accordion, AccordionActions, AccordionDetails, AccordionSummary +--- + +# Akkordeon (Accordion) + +

Erweiterungspanels (Tafeln) enthalten Erstellungsabläufe und ermöglichen die einfache Bearbeitung eines Elements.

+ +[Ein Erweiterungspanel](https://material.io/archive/guidelines/components/expansion-panels.html) ist ein leichter Behälter, der entweder alleine stehen kann oder mit einer größeren Oberfläche verbunden ist, beispielsweise einer Karte. + +> **Hinweis:** Diese Komponente ist zwar nicht mehr in den [Material-Design-Richtlinien](https://material.io/) dokumentiert, wird aber weiterhin von Material-UI unterstützt. It was formerly known as the "expansion panel". + +## Einfaches Erweiterungspanel + +{{"demo": "pages/components/accordion/SimpleAccordion.js", "bg": true}} + +## Kontrolliertes Akkordeon + +Erweitern Sie das Standardbedienfeldverhalten, um ein Akkordeon mit der Komponente `Accordion` zu erstellen. + +{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}} + +## Individuelles Erweiterungspanel + +Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/). + +{{"demo": "pages/components/accordion/CustomizedAccordions.js"}} + +## Zusätzliche Aktionen + +In order to put an action such as a `Checkbox` or a button inside of the `AccordionSummary`, you need to stop the propagation of the focus and click events to prevent the panel from expanding/collapsing when using the action. You should also provide an `aria-label` for the action, otherwise the label of the nested action will be included in the label of the parent button that controls the accordion expansion. + +{{"demo": "pages/components/accordion/ActionsInAccordionSummary.js", "bg": true}} + +## Performance + +Der Inhalt von Accordions wird standardmäßig bereitgestellt, auch wenn das Panel nicht erweitert wird. Bei diesem Standardverhalten werden serverseitiges Rendering und SEO berücksichtigt. If you render expensive component trees inside your panels or simply render many panels it might be a good idea to change this default behavior by enabling the `unmountOnExit` in `TransitionProps`: + +```jsx + +``` + +Wie bei jeder Leistungsoptimierung ist dies keine Silberkugel. Stellen Sie sicher, dass Sie zuerst Engpässe erkennen und anschließend diese Optimierungsstrategien ausprobieren. + +## Sekundäre Überschrift und Spalten + +Zur Strukturierung des Inhalts können mehrere Spalten verwendet werden. Dem Bedienfeld kann ein Hilfetext hinzugefügt werden, welches den Benutzer unterstützt. + +{{"demo": "pages/components/accordion/DetailedAccordion.js", "bg": true}} + +## Barrierefreiheit + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion) + +Für eine optimale Erreichbarkeit empfehlen wir die Einstellung `id` und `aria-controls` in der `AccordionSummary`. Das `Accordion` leitet die notwendigen `aria-labelledby` und `id` für den Inhaltsbereich des Panels ab. diff --git a/docs/src/pages/components/accordion/accordion-es.md b/docs/src/pages/components/accordion/accordion-es.md new file mode 100644 index 00000000000000..bf092b1e53a92d --- /dev/null +++ b/docs/src/pages/components/accordion/accordion-es.md @@ -0,0 +1,56 @@ +--- +title: React Accordion component +components: Accordion, AccordionActions, AccordionDetails, AccordionSummary +--- + +# Accordion (panel de expansión) + +

Los paneles de expansión contienen flujos de creación y permiten una edición simple de un elemento.

+ +Un [panel de expansión](https://material.io/archive/guidelines/components/expansion-panels.html) es un contenedor liviano que puede ser ya sea único o estar conectado a una superficie más grande, como una tarjeta. + +> **Note:** Expansion panels are no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support them. Antes era conocido como "panel de expansión". + +## Panel de expansión simple + +{{"demo": "pages/components/accordion/SimpleAccordion.js", "bg": true}} + +## Acordeón controlado + +Extiende el comportamiento por defecto del panel para crear un acordeón con el componente `Accordion`. + +{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}} + +## Panel de expansión personalizados + +He aquí un ejemplo de personalización del componente. You can learn more about this in the [overrides documentation page](/customization/components/). + +{{"demo": "pages/components/accordion/CustomizedAccordions.js"}} + +## Acciones Adicionales + +In order to put an action such as a `Checkbox` or a button inside of the `AccordionSummary`, you need to stop the propagation of the focus and click events to prevent the panel from expanding/collapsing when using the action. You should also provide an `aria-label` for the action, otherwise the label of the nested action will be included in the label of the parent button that controls the accordion expansion. + +{{"demo": "pages/components/accordion/ActionsInAccordionSummary.js", "bg": true}} + +## Rendimiento + +The content of Accordions is mounted by default even if the panel is not expanded. Este comportamiento por defecto tiene el renderizado del lado del servidor y SEO en mente. If you render expensive component trees inside your panels or simply render many panels it might be a good idea to change this default behavior by enabling the `unmountOnExit` in `TransitionProps`: + +```jsx + +``` + +Como en cualquier optimización de rendimiento esto no es una bala de plata. Be sure to identify bottlenecks first and then try out these optimization strategies. + +## Cabecera secundaria y columnas + +Múltiples columnas pueden ser usadas para estructurar el contenido, y un texto de ayuda puede ser agregado al panel para asistir al usuario. + +{{"demo": "pages/components/accordion/DetailedAccordion.js", "bg": true}} + +## Accesibilidad + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion) + +Para óptima accesibilidad recomendamos establecer `id` y `aria-controls` en `AccordionSummary`. El `Accordion` derivará los necesarios `aria-labelledby` y `id` para la región de contenido del panel. diff --git a/docs/src/pages/components/accordion/accordion-fr.md b/docs/src/pages/components/accordion/accordion-fr.md new file mode 100644 index 00000000000000..2fe2be379db12b --- /dev/null +++ b/docs/src/pages/components/accordion/accordion-fr.md @@ -0,0 +1,56 @@ +--- +title: React Accordion component +components: Accordion, AccordionActions, AccordionDetails, AccordionSummary +--- + +# Accordéon (Panneau d'extension) + +

L'accordéon contient le flux de création et permet la modification légère de ses éléments.

+ +[Un accordéonn](https://material.io/archive/guidelines/components/expansion-panels.html) est un conteneur léger pouvant être autonome ou connecté à une surface plus grande, telle qu'une carte. + +> **Note:** Le panneau d'expansion n'est plus documenté dans le [Material Design guidelines](https://material.io/), mais Material-UI continue le support. Il était précédemment connus sous le nom de panneau d'expansion. + +## Accordéon simple + +{{"demo": "pages/components/accordion/SimpleAccordion.js", "bg": true}} + +## Accordéon contrôlé + +Étendez le comportement du panneau par défaut pour créer un accordéon avec le composant `Accordion`. + +{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}} + +## Customiser l'accordéon + +Voici un exemple de personnalisation du composant. Vous pouvez en savoir plus dans la [page de documentation des overrides](/customization/components/). + +{{"demo": "pages/components/accordion/CustomizedAccordions.js"}} + +## Actions supplémentaires + +Pour pouvoir exécuter une action comme une `Checkbox` ou un bouton à l'intérieur du `AccordionSummary`, vous aurez besoin d'arrêter la propagation du focus et de l'évènement de clique sur l'accordéon à partir de l'expansion/réduction au moment de son utilisation. Vous devriez également fournir un `aria-label` pour l'action, autrement le label de l'action imbriquer sera inclus dans le label du bouton parent qui contrôle l'expansion de l'accordéon. + +{{"demo": "pages/components/accordion/ActionsInAccordionSummary.js", "bg": true}} + +## Performances + +Le contenu de l'accordéon est monter par défaut et se même si l'accordéon n'est pas ouvert. Se comportement à le "server-side rendrering" et le SEO comme objectif. Si vous devez rendre un lourd composant au niveau des détails de l'accordéon ou simplement rendre plusieurs accordéons, il serait une bonne idée de changer le comportement par défaut en activant le `unmountOnExit` dans le prop `TransitionProps`: + +```jsx + +``` + +Se n'est tout de même pas une solution miracle. Soyez sure de d'abord identifier les goulot d'étranglement et ensuite de considérer ses stratégies d'optimisation. + +## Titres et colonnes secondaire + +Plusieurs colonnes peuvent être utilisées pour structurer le contenu et un texte d'assistance peut être ajouté a l'accordéon pour aider l'utilisateur. + +{{"demo": "pages/components/accordion/DetailedAccordion.js", "bg": true}} + +## Accessibilité + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion) + +Pour une accessibilité optimal nous recommandons le paramètre `id` et `aria-controls` sur le `AccordionsSummary`. `Accordion` générera les nécessaires `aria-labelledby` et `id` pour le contenu régional de l'accordéon. diff --git a/docs/src/pages/components/accordion/accordion-ja.md b/docs/src/pages/components/accordion/accordion-ja.md new file mode 100644 index 00000000000000..2203bcea39dbef --- /dev/null +++ b/docs/src/pages/components/accordion/accordion-ja.md @@ -0,0 +1,56 @@ +--- +title: React Accordion component +components: Accordion, AccordionActions, AccordionDetails, AccordionSummary +--- + +# Accordion (拡張パネル) + +

Expansion panels(拡張パネル) には作成フローが含まれ、要素を簡単に編集できます。

+ +[拡張パネル](https://material.io/archive/guidelines/components/expansion-panels.html)は 独立した軽量のコンテナであるか、カードなどの大きなサーフェスに接続されています。 + +> **注：** 拡張パネルについては、[Material Design guidelines](https://material.io/)では説明されていませんが、Material-UIでは引き続きサポートされます。 以前は"expansion panel"としてしられていたものです。 + +## Simple Accordion + +{{"demo": "pages/components/accordion/SimpleAccordion.js", "bg": true}} + +## Controlled Accordion + +パネルのデフォルトの動作を拡張し、`Accordion`コンポーネントを使用してアコーディオンを作成します。 + +{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}} + +## カスタマイズされた拡張パネル + +コンポーネントのカスタマイズ例を次に示します。 コンポーネントのカスタマイズ例を次に示します。 コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。 + +{{"demo": "pages/components/accordion/CustomizedAccordions.js"}} + +## Additional actions + +`Checkbox`などのアクションまたはボタンを`AccordionSummary`の内部で使うために、フォーカスの伝播を止めて、アクション時にクリックイベントがパネルの開閉動作を呼ばないようにする必要があります。 また、アクションに `aria-label` を付与する必要があります。 そうしないと、入れ子になったアクションのラベルがアコーディオンの拡張を制御する親コンポーネントのボタンのラベルに含まれることになります。 + +{{"demo": "pages/components/accordion/ActionsInAccordionSummary.js", "bg": true}} + +## パフォーマンス + +Accordionsのコンテンツは、パネルが展開されていない場合でもデフォルトでマウントされます。 このデフォルトの動作では、サーバー側のレンダリングとSEOが考慮されています。 パネルの中で高価なコンポーネント ツリーをレンダリングしたり、単に多くのパネルをレンダリングする場合は、`TransitionProps` の `unmountOnExit` を有効にして、このデフォルトの動作を変更するのが良いでしょう。 + +```jsx + +``` + +他のパフォーマンス最適化と同様、これは特効薬ではありません。 まずボトルネックを特定してから、これらの最適化戦略を試してください。 + +## Secondary heading and Columns (第2の見出しと列) + +複数の列を使用してコンテンツを構成でき、ユーザーを支援するためにヘルパーテキストをパネルに追加できます。 + +{{"demo": "pages/components/accordion/DetailedAccordion.js", "bg": true}} + +## アクセシビリティ + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion) + +最適なアクセシビリティのために、 `AccordionSummary``id` と `aria-controls` を設定することをお勧めします。 `Accordion` は、パネルのコンテンツ領域に必要な `aria-labelledby` および `id` を導き出します。 最適なアクセシビリティのために、 `AccordionSummary``id` と `aria-controls` を設定することをお勧めします。 `Accordion` は、パネルのコンテンツ領域に必要な `aria-labelledby` および `id` を導き出します。 diff --git a/docs/src/pages/components/accordion/accordion-pt.md b/docs/src/pages/components/accordion/accordion-pt.md new file mode 100644 index 00000000000000..6fb6a10e131aed --- /dev/null +++ b/docs/src/pages/components/accordion/accordion-pt.md @@ -0,0 +1,56 @@ +--- +title: Componente de Acordeão React +components: Accordion, AccordionActions, AccordionDetails, AccordionSummary +--- + +# Acordeão + +

Os acordeões contêm fluxos de criação e permitem a edição simplificada de um elemento.

+ +[Um acordeão](https://material.io/archive/guidelines/components/expansion-panels.html) é um contêiner leve que pode estar sozinho ou conectado em uma superfície maior, como um cartão. + +> **Nota:** Os acordeões não estão mais documentados nas [diretrizes do Material Design](https://material.io/), mas o Material-UI continuará a suportá-los. Anteriormente, ele era formalmente conhecido como "painel de expansão". + +## Acordeão simples + +{{"demo": "pages/components/accordion/SimpleAccordion.js", "bg": true}} + +## Acordeão controlado + +Estenda o comportamento padrão para criar um acordeão customizado com o componente `Accordion`. + +{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}} + +## Acordeões 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/). + +{{"demo": "pages/components/accordion/CustomizedAccordions.js"}} + +## Ações adicionais + +Para colocar uma ação como um `Checkbox` ou um botão dentro do `AccordionSummary`, você precisa parar a propogação do foco e eventos de clique para previnir o painel de expandir/colapsar quando usar a ação. Você deve fornecer também um `aria-label` para a ação, caso contrário, o rótulo da ação aninhada será incluído no rótulo do botão pai que controla a expansão do acordeão. + +{{"demo": "pages/components/accordion/ActionsInAccordionSummary.js", "bg": true}} + +## Performance + +O conteúdo dos acordeões é montado por padrão, mesmo que o acordeão não esteja expandido. Esse comportamento padrão tem em mente a renderização do lado do servidor e o SEO. Se você renderizar grandes árvores de componentes dentro de seu acordeão ou simplesmente renderizar muitos acordeões, pode ser uma boa ideia desabilitar esse comportamento padrão habilitando `unmountOnExit` em `TransitionProps`: + +```jsx + +``` + +Como acontece com qualquer otimização de desempenho, isso não é uma bala de prata. Certifique-se de identificar gargalos primeiro e, em seguida, experimente essas estratégias de otimização. + +## Cabeçalho secundário e colunas + +Várias colunas podem ser usadas para estruturar o conteúdo, e um texto auxiliar pode ser adicionado ao acordeão para ajudar o usuário. + +{{"demo": "pages/components/accordion/DetailedAccordion.js", "bg": true}} + +## Acessibilidade + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion) + +Para melhor acessibilidade recomendamos a definição do `id` e `aria-controls` no `AccordionSummary`. O `Accordion` irá derivar os valores de `aria-labelledby` e `id` para a região de conteúdo do acordeão. diff --git a/docs/src/pages/components/accordion/accordion-ru.md b/docs/src/pages/components/accordion/accordion-ru.md new file mode 100644 index 00000000000000..672d73b585a844 --- /dev/null +++ b/docs/src/pages/components/accordion/accordion-ru.md @@ -0,0 +1,56 @@ +--- +title: Компонент React Accordion +components: Accordion, AccordionActions, AccordionDetails, AccordionSummary +--- + +# Accordion + +

Аккордеоны содержат потоки создания и позволяют осуществить легковесное редактирование элемента.

+ +[Accordion](https://material.io/archive/guidelines/components/expansion-panels.html) это легковесный контейнер, который может использоваться отдельно или как часть более крупного компонента, такого как Card. + +> **На заметку:** Аккордеоны больше не задокументированы в [руководствах Material Design](https://material.io/), но Material-UI будет продолжать поддерживать их. Ранее они были известны как "expansion panels". + +## Простой аккордеон + +{{"demo": "pages/components/accordion/SimpleAccordion.js", "bg": true}} + +## Контролируемый аккордеон + +Используя компонент `Accordion`, расширив его поведение по умолчанию, можно получить "аккордеон". + +{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}} + +## Настраиваемый аккордеон + +Ниже находится пример кастомизации компонента. You can learn more about this in the [overrides documentation page](/customization/components/). + +{{"demo": "pages/components/accordion/CustomizedAccordions.js"}} + +## Действия внутри аккордеона + +Чтобы предотвратить сворачивание/разворачивания аккордеона при нажатии на `Checkbox` или на кнопку внутри `AccordionSummary`, необходимо прервать всплытие событий нажатия и фокуса. Также вы должны указать `aria-label` для действий, иначе label действия будет включен в label кнопки разворачивания аккордеона. + +{{"demo": "pages/components/accordion/ActionsInAccordionSummary.js", "bg": true}} + +## Производительность + +Содержимое аккордеонов монтируется по умолчанию, даже если панель не развернута. Это поведение подразумевает рендеринг на стороне сервера и SEO. Если внутри аккордеона находятся ресурсоемкие, для рендеринга, иерархии компонентов или просто на странице много аккордеонов, то возможно хорошей идеей будет изменить поведение по умолчанию включив `unmountOnExit` в `TransitionProps`: + +```jsx + +``` + +Как и при любой оптимизации производительности, эта функция не панацея. Сначала идентифицируйте узкие места и лишь затем пытайтесь применить эти стратегии. + +## Подзаголовок и столбцы + +Содержимое панели можно структурировать, сгруппировав его в отдельные столбцы, кроме того можно добавить подзаголовок и подсказки для пользователя. + +{{"demo": "pages/components/accordion/DetailedAccordion.js", "bg": true}} + +## Доступность + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion) + +Для оптимальной доступности мы рекомендуем установить `id` и `aria-controls` на `AccordionSummary`. `Accordion` унаследует необходимые `aria-labelbyby` и `id` для области содержимого панели. diff --git a/docs/src/pages/components/accordion/accordion-zh.md b/docs/src/pages/components/accordion/accordion-zh.md new file mode 100644 index 00000000000000..67ac0632085a24 --- /dev/null +++ b/docs/src/pages/components/accordion/accordion-zh.md @@ -0,0 +1,56 @@ +--- +title: React Accordion （扩展面板）组件 +components: Accordion, AccordionActions, AccordionDetails, AccordionSummary +--- + +# Accordion 扩展面板 + +

扩展面板包含了流程的创建和元素的轻量编辑。

+ +[扩展面板](https://material.io/archive/guidelines/components/accordion.html) 是一个轻量级容器，既可以单独使用，也可以和卡片这样更大的平面相结合。 + +> **注意：** 此版本的扩展面板将不再记录在 [Material Design 指南中](https://material.io/)，但 Material-UI 将继续支持它。 您可能属性它之前的名字为 "expansion panel"。 + +## 简单的扩展面板 + +{{"demo": "pages/components/accordion/SimpleAccordion.js", "bg": true}} + +## 可控制的折叠面板 + +使用`控制面板` 组件，能够扩展已有的控制面板行为，来创建自定义的扩展面板组。 + +{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}} + +## 自定义扩展面板 + +以下是自定义组件的一个示例。 您可以在 [重写文档页](/customization/components/) 中了解有关此内容的更多信息。 + +{{"demo": "pages/components/accordion/CustomizedAccordions.js"}} + +## 其他操作 + +当你把 `Checkbox` 或者一个按钮这样的操作事件放进 `AccordionSummary`，当在打开和收缩控制面板时使用这个操作，你则需要阻止 focus 和 click 事件的传播（propagation）。 您还应该为该操作提供一个 `aria-label` 标签，否则嵌套操作的标签将包含在控制扩展面板的父按钮的标签中。 + +{{"demo": "pages/components/accordion/ActionsInAccordionSummary.js", "bg": true}} + +## 性能 + +即使扩展面板没有展开，默认情况下扩展面板的内容也会挂载。 这样的默认情况是是考虑到了服务端渲染（server-side rendering）和搜索引擎优化（SEO）。 如果您在扩展面板中渲染组件树性能开销很大，或者只是想要渲染很多不带内容的扩展面板，那么通过启用 `TransitionProps` 中的 `unmountOnExit` 来改变默认的渲染方式也许可行。 + +```jsx + +``` + +不过对所有情况下的性能优化，这并不是灵丹妙药。 请您务必先确定性能的瓶颈所在，再考虑这些优化策略。 + +## 次要标题和列 + +您也可以使用多列来构造内容，而且将辅助文本添加到面板能够以辅助用户。 + +{{"demo": "pages/components/accordion/DetailedAccordion.js", "bg": true}} + +## 无障碍设计 + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion) + +为了获得最佳的无障碍设计，我们建议在 `AccordionSummary` 上设置 `id` 和 `aria-controls`。 `Accordion` 将为扩展面板的内容区域派生必需的 `aria-labelledby` 和 `id`。 diff --git a/docs/src/pages/components/accordion/accordion.md b/docs/src/pages/components/accordion/accordion.md new file mode 100644 index 00000000000000..dfab03f59d5e7c --- /dev/null +++ b/docs/src/pages/components/accordion/accordion.md @@ -0,0 +1,67 @@ +--- +title: React Accordion component +components: Accordion, AccordionActions, AccordionDetails, AccordionSummary +--- + +# Accordion + +

Accordions contain creation flows and allow lightweight editing of an element.

+ +[An accordion](https://material.io/archive/guidelines/components/expansion-panels.html) is a lightweight container that may either stand alone or be connected to a larger surface, such as a card. + +> **Note:** Accordions are no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support them. It was formerly known as the "expansion panel". + +## Simple accordion + +{{"demo": "pages/components/accordion/SimpleAccordion.js", "bg": true}} + +## Controlled accordion + +Extend the default behavior to create an accordion with the `Accordion` component. + +{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}} + +## Customized accordions + +Here is an example of customizing the component. You can learn more about this in the +[overrides documentation page](/customization/components/). + +{{"demo": "pages/components/accordion/CustomizedAccordions.js"}} + +## Additional actions + +In order to put an action such as a `Checkbox` or a button inside of the `AccordionSummary`, you need to stop the propagation of the focus and click events to prevent the accordion from +expanding/collapsing when using the action. +You should also provide an `aria-label` for the action, otherwise the label of the nested action will be included in +the label of the parent button that controls the accordion expansion. + +{{"demo": "pages/components/accordion/ActionsInAccordionSummary.js", "bg": true}} + +## Performance + +The content of Accordions is mounted by default even if the accordion is not expanded. +This default behavior has server-side rendering and SEO in mind. +If you render expensive component trees inside your accordion details or simply render many +accordions it might be a good idea to change this default behavior by enabling the +`unmountOnExit` in `TransitionProps`: + +```jsx + +``` + +As with any performance optimization this is not a silver bullet. Be sure to identify +bottlenecks first and then try out these optimization strategies. + +## Secondary heading and columns + +Multiple columns can be used to structure the content, and a helper text may be added to the accordion to assist the user. + +{{"demo": "pages/components/accordion/DetailedAccordion.js", "bg": true}} + +## Accessibility + +(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion) + +For optimal accessibility we recommend setting `id` and `aria-controls` on the +`AccordionSummary`. The `Accordion` will derive the necessary `aria-labelledby` +and `id` for the content region of the accordion. diff --git a/docs/src/pages/components/alert/alert-aa.md b/docs/src/pages/components/alert/alert-aa.md deleted file mode 100644 index 783e1accc82917..00000000000000 --- a/docs/src/pages/components/alert/alert-aa.md +++ /dev/null @@ -1,78 +0,0 @@ ---- -title: crwdns107401:0crwdne107401:0 -components: crwdns130708:0crwdne130708:0 ---- - -# crwdns107405:0crwdne107405:0 - -

crwdns107407:0crwdne107407:0

- -crwdns107575:0crwdne107575:0 - -## crwdns107409:0crwdne107409:0 - -crwdns107577:0crwdne107577:0 - -crwdns107579:0crwdne107579:0 - -## crwdns107415:0crwdne107415:0 - -crwdns107581:0crwdne107581:0 - -crwdns107583:0crwdne107583:0 - -## crwdns107421:0crwdne107421:0 - -crwdns107585:0crwdne107585:0 crwdns107587:0crwdne107587:0 - -crwdns107589:0crwdne107589:0 crwdns107591:0crwdne107591:0 - -crwdns107593:0crwdne107593:0 - -### crwdns107433:0crwdne107433:0 - -crwdns107595:0crwdne107595:0 - -crwdns107597:0crwdne107597:0 - -## crwdns107439:0crwdne107439:0 - -crwdns107599:0crwdne107599:0 crwdns107601:0crwdne107601:0 - -crwdns107603:0crwdne107603:0 crwdns107605:0crwdne107605:0 - -crwdns107607:0crwdne107607:0 - -crwdns107609:0crwdne107609:0 - -## crwdns107453:0crwdne107453:0 - -crwdns107611:0crwdne107611:0 - -### crwdns107457:0crwdne107457:0 - -crwdns107613:0crwdne107613:0 - -### crwdns107461:0crwdne107461:0 - -crwdns107615:0crwdne107615:0 - -## crwdns107465:0crwdne107465:0 - -crwdns107617:0crwdne107617:0 - -## crwdns107469:0crwdne107469:0 - -crwdns107619:0crwdne107619:0 - -crwdns107621:0crwdne107621:0 - -## crwdns107475:0crwdne107475:0 - -crwdns107623:0crwdne107623:0 - -crwdns107625:0crwdne107625:0 crwdns107627:0crwdne107627:0 - -crwdns107629:0crwdne107629:0 crwdns107631:0crwdne107631:0 - -crwdns107633:0crwdne107633:0 diff --git a/docs/src/pages/components/alert/alert-de.md b/docs/src/pages/components/alert/alert-de.md index 0f112f697273fc..b1ebbb3fabd244 100644 --- a/docs/src/pages/components/alert/alert-de.md +++ b/docs/src/pages/components/alert/alert-de.md @@ -1,9 +1,9 @@ --- -title: Hinweis React-Komponente +title: React Hinweis Komponenten components: Alert, AlertTitle --- -# Hinweis +# Hinweis (Alert)

Ein Hinweis zeigt eine kurze, wichtige Nachricht auf eine Weise, welche die Aufmerksamkeit des Benutzers auf sich zieht ohne die Aufgabe des Benutzers zu unterbrechen.

@@ -11,7 +11,7 @@ components: Alert, AlertTitle ## Einfache Hinweise -Der Hinweis bietet vier Schweregrade an welche je ein eigenes Icon und eine eigene Farbe besitzen. +Der Hinweis bietet vier Schweregrade an, welche je ein eigenes Icon und eine eigene Farbe besitzen. {{"demo": "pages/components/alert/SimpleAlerts.js"}} @@ -47,13 +47,13 @@ Setting the icon prop to false will remove the icon altogether. ## Varianten -Two additional variants are available – outlined, and filled: +Zwei weitere Varianten sind verfügbar – umrandet und ausgefüllt: ### Umrandung {{"demo": "pages/components/alert/OutlinedAlerts.js"}} -### Gefüllt +### Ausgefüllt {{"demo": "pages/components/alert/FilledAlerts.js"}} diff --git a/docs/src/pages/components/alert/alert-es.md b/docs/src/pages/components/alert/alert-es.md index f3ff5e2f8402bf..157259c413086e 100644 --- a/docs/src/pages/components/alert/alert-es.md +++ b/docs/src/pages/components/alert/alert-es.md @@ -1,5 +1,5 @@ --- -title: Componente React Alerta (Alert) +title: React Alert component components: Alert, AlertTitle --- @@ -45,7 +45,7 @@ Al establecer la propiedad `icono` a falso, el icono se removerá completamente. {{"demo": "pages/components/alert/IconAlerts.js"}} -## Variants +## Variantes Dos variantes adicionales están disponibles – delineada y rellena: diff --git a/docs/src/pages/components/alert/alert-fr.md b/docs/src/pages/components/alert/alert-fr.md index 24a539081793a9..51c096c84fb092 100644 --- a/docs/src/pages/components/alert/alert-fr.md +++ b/docs/src/pages/components/alert/alert-fr.md @@ -1,5 +1,5 @@ --- -title: Composant Alert React +title: React Alert component components: Alert, AlertTitle --- diff --git a/docs/src/pages/components/alert/alert-ja.md b/docs/src/pages/components/alert/alert-ja.md index 7e24927efdebee..a33573f204a8f1 100644 --- a/docs/src/pages/components/alert/alert-ja.md +++ b/docs/src/pages/components/alert/alert-ja.md @@ -1,45 +1,45 @@ --- -title: Alert React component +title: React Alert component components: Alert, AlertTitle --- -# Alert +# アラート -

An alert displays a short, important message in a way that attracts the user's attention without interrupting the user's task.

+

アラートは、ユーザのタスクを中断することなく、ユーザの注意を引き付けるような短く重要なメッセージを表示します。

-**Note:** This component is not documented in the [Material Design guidelines](https://material.io/), but Material-UI supports it. +**注意:** このコンポーネントは [Material Design guidelines](https://material.io/)に記載されていませんが、Material-UIはそれをサポートしています。 -## Simple alerts +## 単純なアラート -The alert offers four severity levels that set a distinctive icon and color. +このアラートは、特徴的なアイコンと色を設定する4つの重要度レベルを提供します。 {{"demo": "pages/components/alert/SimpleAlerts.js"}} ## Description -You can use the `AlertTitle` component to display a formatted title above the content. +`アラートタイトル` コンポーネントを使用して、書式付きタイトルをコンテンツの上に表示することができます。 {{"demo": "pages/components/alert/DescriptionAlerts.js"}} -## Actions +## アクション -An alert can have an action, such as a close or undo button. It is rendered after the message, at the end of the alert. +アラートには、閉じるボタンや元に戻すボタンなどのアクションがあります。 これは、アラートの最後にメッセージの後にレンダリングされます。 これは、アラートの最後にメッセージの後にレンダリングされます。 -If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. +`onClose` コールバックが指定されていて、 `アクション` プロパティが設定されていない場合は、閉じるアイコンが表示されます。 `アクション` プロパティは、ボタンや IconButtonなどの代替アクションを提供するために使用できます。 `アクション` プロパティは、ボタンや IconButtonなどの代替アクションを提供するために使用できます。 `アクション` プロパティは、ボタンや IconButtonなどの代替アクションを提供するために使用できます。 `アクション` プロパティは、ボタンや IconButtonなどの代替アクションを提供するために使用できます。 {{"demo": "pages/components/alert/ActionAlerts.js"}} -### Transition +### トランジション -You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. +[Collapse](/components/transitions/) のような `トランジションコンポーネント` を使用して、アラートの外観を遷移することができます。 {{"demo": "pages/components/alert/TransitionAlerts.js"}} -## アイコン +## Icons -The `icon` prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity. +`アイコン` プロパティでは、アラートコンポーネントの先頭にアイコンを追加できます。 これは指定された重要度のデフォルトアイコンを上書きします。 これは指定された重要度のデフォルトアイコンを上書きします。 これは指定された重要度のデフォルトアイコンを上書きします。 これは指定された重要度のデフォルトアイコンを上書きします。 -You can change the default severity to icon mapping with the `iconMapping` prop. This can be defined globally using [theme customization](/customization/globals/#default-props). +`iconMapping` プロパティを使用して、デフォルトの重要度をアイコンマッピングに変更できます。 `iconMapping` プロパティを使用して、デフォルトの重要度をアイコンマッピングに変更できます。 [テーマカスタマイズ](/customization/globals/#default-props)を使用してグローバルに定義することができます。 `iconMapping` プロパティを使用して、デフォルトの重要度をアイコンマッピングに変更できます。 [テーマカスタマイズ](/customization/globals/#default-props)を使用してグローバルに定義することができます。 `iconMapping` プロパティを使用して、デフォルトの重要度をアイコンマッピングに変更できます。 [テーマカスタマイズ](/customization/globals/#default-props)を使用してグローバルに定義することができます。 Setting the icon prop to false will remove the icon altogether. @@ -47,23 +47,23 @@ Setting the icon prop to false will remove the icon altogether. ## バリアント -Two additional variants are available – outlined, and filled: +さらに2つのバリエーションがあります – アウトラインと塗りつぶし: ### アウトライン (Outlined) {{"demo": "pages/components/alert/OutlinedAlerts.js"}} -### Filled +### 塗りつぶし {{"demo": "pages/components/alert/FilledAlerts.js"}} -## Toast +## トースト -You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert. +Snackbar を使ってアラートで [乾杯を表示](/components/snackbars/#customized-snackbars)できます。 ## カラー -The `color` prop will override the default color for the specified severity. +`色` プロパティは、指定された重要度のデフォルトの色を上書きします。 {{"demo": "pages/components/alert/ColorAlerts.js"}} @@ -71,8 +71,8 @@ The `color` prop will override the default color for the specified severity. (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) -When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads. +コンポーネントが動的に表示されると、ほとんどのスクリーンリーダーによってコンテンツが自動的に表示されます。 この時点で、スクリーンリーダーは、ページが読み込まれたときに存在するアラートをユーザーに知らせることはありません。 コンポーネントが動的に表示されると、ほとんどのスクリーンリーダーによってコンテンツが自動的に表示されます。 この時点で、スクリーンリーダーは、ページが読み込まれたときに存在するアラートをユーザーに知らせることはありません。 コンポーネントが動的に表示されると、ほとんどのスクリーンリーダーによってコンテンツが自動的に表示されます。 この時点で、スクリーンリーダーは、ページが読み込まれたときに存在するアラートをユーザーに知らせることはありません。 この時点で、スクリーンリーダーは、ページが読み込まれたときに存在するアラートをユーザーに知らせることはありません。 -Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text. +色を使って意味を加えることは視覚的な表示のみを提供し、スクリーンリーダーなどの支援技術の利用者には伝えられません。 色で示されている情報がコンテンツ自体から明らかになっていることを確認してください (例えば、目に見えるテキスト) または、隠されたテキストなどの代替手段によって含まれています。 色で示されている情報がコンテンツ自体から明らかになっていることを確認してください (例えば、目に見えるテキスト) または、隠されたテキストなどの代替手段によって含まれています。 色で示されている情報がコンテンツ自体から明らかになっていることを確認してください (例えば、目に見えるテキスト) または、隠されたテキストなどの代替手段によって含まれています。 -Actions must have a tab index of 0 so that they can be reached by keyboard-only users. +アクションはキーボードのみのユーザーがアクセスできるように、タブインデックスが 0 である必要があります。 diff --git a/docs/src/pages/components/alert/alert-pt.md b/docs/src/pages/components/alert/alert-pt.md index 2381be8772f43a..1aca70270a995a 100644 --- a/docs/src/pages/components/alert/alert-pt.md +++ b/docs/src/pages/components/alert/alert-pt.md @@ -1,5 +1,5 @@ --- -title: Componente React para Alerta +title: Componente React para Alertas components: Alert, AlertTitle --- @@ -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/alert/alert-ru.md b/docs/src/pages/components/alert/alert-ru.md index 233013f267381b..204b2b2d0c358e 100644 --- a/docs/src/pages/components/alert/alert-ru.md +++ b/docs/src/pages/components/alert/alert-ru.md @@ -1,23 +1,23 @@ --- -title: Компонент Alert +title: Компонент React Alert components: Alert, AlertTitle --- # Alert -

Alert показывает короткое и важное сообщение для того, чтобы привлечь внимание пользователя, не отвлекая его от задачи.

+

Alert показывает короткое и важное сообщение для того, чтобы привлечь внимание пользователя, не отвлекая его.

-**Примечание:** Этот компонент не задокументирован в [гайдлайнах Material Design](https://material.io/), но Material-UI поддерживает его. +**Примечание:** Этот компонент не задокументирован в [руководствах Material Design](https://material.io/), но Material-UI поддерживает его. ## Простейшие предупреждения -Alert предлагает 4 уровня предупреждения с уникальным цветом и значком. +Alert предлагает 4 уровня важности предупреждения с уникальными цветом и значком. {{"demo": "pages/components/alert/SimpleAlerts.js"}} ## Описание -Вы можете использовать `AlertTitle`, чтобы отобразить заголовок над содержимым. +Вы можете использовать `AlertTitle`, чтобы отобразить отформатированный заголовок над содержимым. {{"demo": "pages/components/alert/DescriptionAlerts.js"}} diff --git a/docs/src/pages/components/alert/alert-zh.md b/docs/src/pages/components/alert/alert-zh.md index 388aff0e4f737c..fd76e505271776 100644 --- a/docs/src/pages/components/alert/alert-zh.md +++ b/docs/src/pages/components/alert/alert-zh.md @@ -1,55 +1,55 @@ --- -title: React 提醒组件 +title: React Alert （警告提示）组件 components: Alert, AlertTitle --- -# Alert 提醒 +# Alert 警告提示 -

「提醒」是简短且重要的信息，在不影响用户操作的同时能够吸引用户的注意力。

+

一个警告提示组件展示了一段简短且重要的信息，在不影响用户操作的同时能够吸引用户的注意力。

-**注意：**这个组件不在[《Material Design 指南》](https://material.io/)中，但它是被 Material-UI 支持的。 +**请注意：**该组件不再出现在 [Material Design 指南](https://material.io/)中, 但 Material-UI 会继续支持此组件。 -## 简单的提醒 +## 简单的警告提示 -一共有四种不同程度的「提醒」，每种都有自己独特的颜色和图标。 +警告提示有四种不同程度的级别，每种都有自己独特的颜色和图标。 {{"demo": "pages/components/alert/SimpleAlerts.js"}} ## 描述 -在提醒内容的上面使用 `AlertTitle` 可以实现标题的格式化。 +您可以使用 `AlertTitle` 组件在内容之上展示一个格式化的标题。 {{"demo": "pages/components/alert/DescriptionAlerts.js"}} ## 行为 -一个「提醒」可以有一个行为，例如「关闭」或「撤销」按钮。 它在消息之后，「提醒」结束时被渲染。 +一个警告提示可以附带一个行为，例如一个关闭或撤销按钮。 它在消息之后，提醒结束前被渲染。 -如果提供了 `onClose` 回调且没有设置 `action` 属性的话，「关闭」图标就会显示。 这个 `action` 行为可以用其他形式来完成，例如使用一个按钮或者图标按钮。 +如果提供了 `onClose` 回调且没有设置 `action` 属性的话，则会呈现一个关闭图标。 这个 `action` 属性可以用来提供一个可替代的行为，例如使用一个 Button 或者IconButton。 {{"demo": "pages/components/alert/ActionAlerts.js"}} ### 过渡效果 -可以使用 [过渡组件](/components/transitions/) ，如 `Collapse（展开）` 来实现「提醒」出现时的过渡效果。 +您也可以使用 [过渡组件](/components/transitions/) ，如使用 `Collapse（展开）` 来实现提醒出现时的过渡效果。 {{"demo": "pages/components/alert/TransitionAlerts.js"}} ## 图标 -`icon`是指可以在「提醒」组件的开始的地方加一个图标。 以此来改变不同程度「提醒」的默认图标。 +使用 `icon` 属性，您可以在警告提示组件开头添加一个图标。 以此来改变不同程度的默认图标。 -通过使用 `iconMapping` 这种映射方法，可以改变不同程度的默认图标。 在[自定义主题](/customization/globals/#default-props)中可以进行全局设置。 +通过使用 `iconMapping` 属性，您可以改变不同程度的默认图标映射。 使用 [自定义主题](/customization/globals/#default-props)，您可以进行全局的设置。 -把图标属性设置为 false 将会把图标都移除了。 +把 icon 属性设置为 false 时，将会把图标都移除。 {{"demo": "pages/components/alert/IconAlerts.js"}} -## 变种 +## 变体 -还可以实现「边框」和「填充」这两种变体。 +还有描边（outlined）和填充（filled）这两种组件的变体可以使用。 -### 边框 +### 描边 {{"demo": "pages/components/alert/OutlinedAlerts.js"}} @@ -57,22 +57,22 @@ components: Alert, AlertTitle {{"demo": "pages/components/alert/FilledAlerts.js"}} -## 提示 +## Toast（提示） -你可以使用「消息条」来显示[ 带确认按钮的Toast 提示](/components/snackbars/#customized-snackbars) 。 +你可以使用消息条（Snackbar）来显示一个带警告提示组件的 [toast](/components/snackbars/#customized-snackbars) 。 -## Color 颜色 +## 颜色 -`color` 属性用来改变不同程度「提醒」的默认颜色。 +使用 `color` 属性可以覆盖不同程度提醒的默认颜色。 {{"demo": "pages/components/alert/ColorAlerts.js"}} -## 可访问性 +## 无障碍设计 (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) -动态显示组件时，大部分屏幕都会自动朗读其内容。 此时，屏幕不会将页面加载时出现的提醒通知给用户。 +当动态地显示组件时，大部分屏幕都会自动朗读其内容。 此时，屏幕阅读不会将页面加载时出现的提醒通知给用户。 -使用颜色来增加意义只提供了一个视觉指示，而不会传达给用户的辅助技术，如屏幕阅读器。 确保用颜色表示的信息对于内容本身是明显的(例如可见的文本)，或者通过其他方法包含进来，例如附加的隐藏文本。 +使用颜色来增加意义只提供了一个视觉指示，而不会传达给一个辅助用户的技术，如屏幕阅读器。 请确保用颜色表示的信息，或者对于内容本身（例如一些可见的文本）是明显的，或者通过其他方法包含信息，例如一个附加的隐藏文本。 -动作的选项卡索引必须为0，这样只有键盘的用户才能访问它们。 +动作的选项卡索引（tab index）必须为 0，这样只使用键盘的用户才能访问它们。 diff --git a/docs/src/pages/components/alert/alert.md b/docs/src/pages/components/alert/alert.md index c207f85375df8c..74ec4d6f806b26 100644 --- a/docs/src/pages/components/alert/alert.md +++ b/docs/src/pages/components/alert/alert.md @@ -1,5 +1,5 @@ --- -title: Alert React component +title: React Alert component components: Alert, AlertTitle --- diff --git a/docs/src/pages/components/app-bar/app-bar-aa.md b/docs/src/pages/components/app-bar/app-bar-aa.md deleted file mode 100644 index c79e7a122065ab..00000000000000 --- a/docs/src/pages/components/app-bar/app-bar-aa.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -title: crwdns89140:0crwdne89140:0 -components: crwdns89142:0crwdne89142:0 ---- - -# crwdns89144:0crwdne89144:0 - -

crwdns89146:0crwdne89146:0

- -crwdns89148:0crwdne89148:0 crwdns89150:0crwdne89150:0 - -crwdns105183:0crwdne105183:0 - -## crwdns100404:0crwdne100404:0 - -crwdns105185:0crwdne105185:0 - -## crwdns100406:0crwdne100406:0 - -crwdns100408:0crwdne100408:0 - -crwdns105187:0crwdne105187:0 - -## crwdns100412:0crwdne100412:0 - -crwdns105189:0crwdne105189:0 - -## crwdns100416:0crwdne100416:0 - -crwdns100418:0crwdne100418:0 - -crwdns105191:0crwdne105191:0 - -## crwdns100422:0crwdne100422:0 - -crwdns105193:0crwdne105193:0 - -## crwdns103896:0crwdne103896:0 - -crwdns103898:0crwdne103898:0 - -crwdns105195:0crwdne105195:0 - -## crwdns103902:0crwdne103902:0 - -crwdns107349:0crwdne107349:0 - -## crwdns103906:0crwdne103906:0 - -crwdns103908:0crwdne103908:0 crwdns103910:0crwdne103910:0 crwdns103912:0crwdne103912:0 - -1. crwdns103914:0crwdne103914:0 crwdns103916:0crwdne103916:0 -2. crwdns103918:0crwdne103918:0 - -```jsx -crwdns103920:0crwdne103920:0 -``` - -3. crwdns103922:0crwdne103922:0 - -```jsx -crwdns103924:0{classes.offset}crwdne103924:0 -``` - -## crwdns103926:0crwdne103926:0 - -crwdns103928:0crwdne103928:0 - -### crwdns89188:0crwdne89188:0 - -crwdns103930:0crwdne103930:0 - -crwdns107351:0crwdne107351:0 - -### crwdns89194:0crwdne89194:0 - -crwdns103934:0crwdne103934:0 - -crwdns107353:0crwdne107353:0 - -### crwdns100438:0crwdne100438:0 - -crwdns103938:0crwdne103938:0 - -crwdns107355:0crwdne107355:0 - -### `crwdns100444:0[options]crwdne100444:0` - -#### crwdns89202:0crwdne89202:0 - -1. crwdns103942:0[optional]crwdne103942:0 - -- crwdns89206:0[optional]crwdne89206:0 crwdns89208:0crwdne89208:0 crwdns89210:0crwdne89210:0 -- crwdns89212:0[optional]crwdne89212:0 -- crwdns89214:0[optional]crwdne89214:0 crwdns89216:0crwdne89216:0 - -#### crwdns89218:0crwdne89218:0 - -crwdns103944:0crwdne103944:0 - -#### crwdns89222:0crwdne89222:0 - -```jsx -crwdns103946:0crwdne103946:0 -``` \ No newline at end of file diff --git a/docs/src/pages/components/app-bar/app-bar-de.md b/docs/src/pages/components/app-bar/app-bar-de.md index 8a1764b15a9e97..e76cae832ed288 100644 --- a/docs/src/pages/components/app-bar/app-bar-de.md +++ b/docs/src/pages/components/app-bar/app-bar-de.md @@ -113,7 +113,7 @@ Beim Scrollen erscheint ein schwebender Button, um einfach wieder zum Seitenanfa 1. `options` (*Object* [optional]): -- `options.disableHysteresis ` (*Boolean* [optional]): Standardeinstellung ist `false`. Hysterese deaktivieren. Die Bildlaufrichtung wird beim Bestimmen des `trigger`-Werts ignoriert. +- `options.disableHysteresis` (*Boolean* [optional]): Standardeinstellung ist `false`. Hysterese deaktivieren. Die Bildlaufrichtung wird beim Bestimmen des `trigger`-Werts ignoriert. - `options.target` (*Node* [optional]): Standardwert `window`. - `options.threshold` (*Number* [optional]): Defaults to `100`. Change the `trigger` value when the vertical scroll strictly crosses this threshold (exclusive). diff --git a/docs/src/pages/components/app-bar/app-bar-es.md b/docs/src/pages/components/app-bar/app-bar-es.md index d7e0c480239893..ab082fd41c324f 100644 --- a/docs/src/pages/components/app-bar/app-bar-es.md +++ b/docs/src/pages/components/app-bar/app-bar-es.md @@ -5,7 +5,7 @@ components: AppBar, Toolbar, Menu # App Bar -

La App Bar muestra información y acciones disponibles en la pantalla actual.

+

La App Bar muestra información y acciones relacionadas con la pantalla actual.

La [top App Bar](https://material.io/design/components/app-bars-top.html) provee contenido y acciones relacionados a la pantalla actual. Es usada para mostrar logotipos de marcas, títulos de pantalla, navegación y acciones. @@ -77,7 +77,7 @@ function App() { return ( - {/* content */} + {/* contenido */}
@@ -130,7 +130,7 @@ function HideOnScroll(props) { const trigger = useScrollTrigger(); return ( -
Hello
+
Hola
 ); } diff --git a/docs/src/pages/components/app-bar/app-bar-fr.md b/docs/src/pages/components/app-bar/app-bar-fr.md index e8fd6c80f581fc..f114ed23459334 100644 --- a/docs/src/pages/components/app-bar/app-bar-fr.md +++ b/docs/src/pages/components/app-bar/app-bar-fr.md @@ -9,7 +9,7 @@ components: AppBar, Toolbar, Menu [La barre d'application](https://material.io/design/components/app-bars-top.html) de la page fournit le contenu et les actions liés à l'écran actuel. Il est utilisé pour la marque, les titres d'écran, la navigation et les actions. -It can transform into a contextual action bar or be used as a navbar. +Il peut être utilisé en tant que barre d'action contextuel ou en tant que barre de navigation. ## Barre d'application simple @@ -35,9 +35,9 @@ Une barre de recherche latérale. {{"demo": "pages/components/app-bar/DenseAppBar.js", "bg": true}} -## Prominent +## Barre plus importante -A prominent app bar. +Barre d'application étendu. {{"demo": "pages/components/app-bar/ProminentAppBar.js", "bg": true}} @@ -45,12 +45,12 @@ A prominent app bar. {{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} -## Fixed placement +## Emplacement fixe -When you render the app bar position fixed, the dimension of the element doesn't impact the rest of the page. This can cause some part of your content to be invisible, behind the app bar. Here are 3 possible solutions: +Quand vous rendez la barre d'application en position fixe, les dimensions de l'élément n'impact pas le reste de page. Cela peut rendre certaine partie de votre contenu invisible, caché derrière la barre d'application. Voici 3 solutions possible: -1. You can use `position="sticky"` instead of fixed. ⚠️ sticky is not supported by IE 11. -2. You can render a second `` component: +1. Vous pouvez utiliser `position="sticky"` au lieu de `position="fixed"`. Sticky n'est pas supporter par IE 11. +2. Vous pouvez rendre un deuxième composant `` : ```jsx function App() { @@ -65,7 +65,7 @@ function App() { } ``` -3. You can use `theme.mixins.toolbar` CSS: +3. Vous pouvez utiliser `theme.mixins.toolbar` CSS: ```jsx const useStyles = makeStyles(theme => ({ @@ -87,23 +87,23 @@ function App() { ## Défilement -You can use the `useScrollTrigger()` hook to respond to user scroll actions. +Vous pouvez utiliser le `useScrollTrigger()` hook pour répondre au défilement déclencher par l'utilisateur. ### Barre d'application masquable -The app bar hides on scroll down to leave more space for reading. +La barre d'application est caché lorsque l'utilisateur défile vers le bas de page lui conférant plus d'espace de lecture. {{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} ### Barre d'application élevable -The app bar elevates on scroll to communicate that the user is not at the top of the page. +La barre d'application s'élève lorsque l'utilisateur fait défiler la page pour lui indiquer qu'il n'est plus au début de la page. {{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} -### Back to top +### Retour au sommet -A floating action buttons appears on scroll to make it easy to get back to the top of the page. +Au défilement un bouton d'action flottant apparaît pour faciliter le retour au sommet de la page. {{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} diff --git a/docs/src/pages/components/app-bar/app-bar-ja.md b/docs/src/pages/components/app-bar/app-bar-ja.md index 52028d9f98185a..f10615ad4f7fb5 100644 --- a/docs/src/pages/components/app-bar/app-bar-ja.md +++ b/docs/src/pages/components/app-bar/app-bar-ja.md @@ -7,9 +7,9 @@ components: AppBar, Toolbar, Menu

App Barには、現在の画面に関する情報と操作が表示されます。

-[top App Bar](https://material.io/design/components/app-bars-top.html) は、現在の画面に関連するコンテンツとアクションを提供します。 ブランディング、画面タイトル、ナビゲーション、およびアクションに使用されます。 +[top App Bar](https://material.io/design/components/app-bars-top.html) は、現在の画面に関連するコンテンツとアクションを提供します。 ブランディング、画面タイトル、ナビゲーション、およびアクションに使用されます。 ブランディング、画面タイトル、ナビゲーション、およびアクションに使用されます。 ブランディング、画面タイトル、ナビゲーション、およびアクションに使用されます。 ブランディング、画面タイトル、ナビゲーション、およびアクションに使用されます。 -It can transform into a contextual action bar or be used as a navbar. +アクションバーに変換したり、ナビゲーションバーとして使うことができます。 ## シンプルなアプリバー @@ -37,7 +37,7 @@ It can transform into a contextual action bar or be used as a navbar. ## Prominent -A prominent app bar. +目立つアプリバー {{"demo": "pages/components/app-bar/ProminentAppBar.js", "bg": true}} @@ -47,9 +47,9 @@ A prominent app bar. ## ラベルの配置 -アプリバーの位置を固定してレンダリングすると、要素の寸法はページの残りの部分に影響しません。 これにより、コンテンツの一部がアプリバーの背後で見えなくなる可能性があります。 以下に3つの解決策を示します。 +アプリバーの位置を固定してレンダリングすると、要素の寸法はページの残りの部分に影響しません。 これにより、コンテンツの一部がアプリバーの背後で見えなくなる可能性があります。 以下に3つの解決策を示します。 これにより、コンテンツの一部がアプリバーの背後で見えなくなる可能性があります。 以下に3つの解決策を示します。 これにより、コンテンツの一部がアプリバーの背後で見えなくなる可能性があります。 以下に3つの解決策を示します。 これにより、コンテンツの一部がアプリバーの背後で見えなくなる可能性があります。 以下に3つの解決策を示します。 -1. fixed の代わりに `position="sticky"` を使用できます。 ⚠️ stickyはIE 11ではサポートされていません。 +1. fixed の代わりに `position="sticky"` を使用できます。 fixed の代わりに `position="sticky"` を使用できます。 ⚠️ stickyはIE 11ではサポートされていません。 fixed の代わりに `position="sticky"` を使用できます。 fixed の代わりに `position="sticky"` を使用できます。 ⚠️ stickyはIE 11ではサポートされていません。 fixed の代わりに `position="sticky"` を使用できます。 ⚠️ stickyはIE 11ではサポートされていません。 2. 2番目の `` コンポーネントをレンダリングできます: ```jsx @@ -65,7 +65,7 @@ function App() { } ``` -3. You can use `theme.mixins.toolbar` CSS: +3. `theme.mixins.toolbar` CSSを使えます。: ```jsx const useStyles = makeStyles(theme => ({ @@ -113,13 +113,13 @@ function App() { 1. `オプション` (*オプジェクト* [任意]): -- `options.disableHysteresis` (*ブール値* [任意]): デフォルト値 `false`. ヒステリシスを無効にします。 ` trigger ` 値を決定するときにスクロール方向を無視します。 +- `options.disableHysteresis` (*ブール値* [任意]): デフォルト値 `false`. ヒステリシスを無効にします。 ヒステリシスを無効にします。 ヒステリシスを無効にします。 ヒステリシスを無効にします。 `trigger` 値を決定するときにスクロール方向を無視します。 - `options.target` (*ノード* [任意]): デフォルト地 `window`. - `options.threshold` (*Number* [optional]): デフォルトは`100`. 垂直スクロールがこのしきい値(排他的) を厳密に超えたときに`trigger` 値を変更します。 #### 戻り値 -` trigger `：スクロール位置が基準に合っていますか？ +`trigger`：スクロール位置が基準に合っていますか？ #### 例 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 5fb7983ffdbe6b..c24aabaf6030e1 100644 --- a/docs/src/pages/components/app-bar/app-bar-pt.md +++ b/docs/src/pages/components/app-bar/app-bar-pt.md @@ -45,11 +45,11 @@ Uma barra de aplicativos proeminente. {{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} -## Local de filtros +## Posicionamento fixo -Quando você renderiza a posição da barra de apps fixa, a dimensão do elemento não afeta o resto da página. Isso pode fazer com que parte do seu conteúdo fique invisível, atrás da barra de aplicativos. Aqui estão 3 soluções possíveis: +Quando você renderiza a barra de aplicativos com um posicionamento fixo, a dimensão do elemento não afeta o resto da página. Isso pode fazer com que parte do seu conteúdo pareça estar invisível, atrás da barra de aplicativos. Aqui estão 3 soluções possíveis: -1. Você pode usar `posição="sticky"` ao invés de fixed. ⚠️ sticky não é suportado pelo IE 11. +1. Você pode usar `position="sticky"` ao invés de fixed. ⚠️ sticky não é suportado pelo IE 11. 2. Você pode renderizar um segundo componente ``: ```jsx @@ -65,7 +65,7 @@ function App() { } ``` -3. Você pode usar `theme.mixins.toolbar` CSS: +3. Você pode usar o CSS `theme.mixins.toolbar`: ```jsx const useStyles = makeStyles(theme => ({ @@ -91,7 +91,7 @@ Você pode usar o hook `useScrollTrigger()` para responder às ações de rolage ### Barra de aplicativos oculta -A barra de aplicativos sumirá ao descer a página para deixar mais espaço de leitura. +A barra de aplicativos ficará oculta ao rolar a página para baixo, deixando mais espaço de leitura. {{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} @@ -113,7 +113,7 @@ Um botão de ação flutuante aparece na rolagem para facilitar o retorno ao top 1. `options` (*Object* [opcional]): -- `options.disableHysteresis` (*Boolean* [opcional]): Padrão `false`. Desabilita a histerese. Ignora a direção de rolagem ao determinar o valor `trigger`. +- `options.disableHysteresis` (*Boolean* [opcional]): Padrão `false`. Desabilita a histerese. Ignora a direção de rolagem ao determinar o valor de `trigger`. - `options.target` (*Node* [opcional]): Padrão `window`. - `options.threshold` (*Number* [opcional]): Padrão `100`. Modifica o valor limite que aciona a `trigger` quando a barra de rolagem vertical cruzar ou chegar a este limite. diff --git a/docs/src/pages/components/app-bar/app-bar-zh.md b/docs/src/pages/components/app-bar/app-bar-zh.md index 17a323adf4ba1a..1564bf2637cc53 100644 --- a/docs/src/pages/components/app-bar/app-bar-zh.md +++ b/docs/src/pages/components/app-bar/app-bar-zh.md @@ -1,5 +1,5 @@ --- -title: React App Bar 应用栏组件 +title: React App Bar（应用栏）组件 components: AppBar, Toolbar, Menu --- diff --git a/docs/src/pages/components/autocomplete/autocomplete-aa.md b/docs/src/pages/components/autocomplete/autocomplete-aa.md deleted file mode 100644 index b21116c00f9bf5..00000000000000 --- a/docs/src/pages/components/autocomplete/autocomplete-aa.md +++ /dev/null @@ -1,236 +0,0 @@ ---- -title: crwdns89226:0crwdne89226:0 -components: crwdns104482:0crwdne104482:0 ---- - -# crwdns89230:0crwdne89230:0 - -

crwdns89232:0crwdne89232:0

- -crwdns104484:0crwdne104484:0 - -1. crwdns105106:0crwdne105106:0 -2. crwdns104488:0crwdne104488:0 - -crwdns130710:0crwdne130710:0 - -## crwdns104490:0crwdne104490:0 - -crwdns130712:0crwdne130712:0 - -crwdns130714:0crwdne130714:0 - -### crwdns104496:0crwdne104496:0 - -crwdns130716:0crwdne130716:0 - -crwdns130718:0crwdne130718:0 - -### crwdns104502:0crwdne104502:0 - -crwdns130720:0crwdne130720:0 - -crwdns130722:0crwdne130722:0 - -### crwdns131302:0crwdne131302:0 - -crwdns131304:0crwdne131304:0 - -1. crwdns131692:0crwdne131692:0 crwdns131694:0crwdne131694:0 -2. crwdns131696:0crwdne131696:0 crwdns131698:0crwdne131698:0 - -> crwdns131310:0crwdne131310:0 - -crwdns131700:0crwdne131700:0 - -## crwdns104508:0crwdne104508:0 - -crwdns131846:0crwdne131846:0 - -### crwdns131848:0crwdne131848:0 - -crwdns131850:0crwdne131850:0 - -crwdns131852:0crwdne131852:0 - -### crwdns131854:0crwdne131854:0 - -crwdns131856:0crwdne131856:0 - -- crwdns131710:0crwdne131710:0 -- crwdns131712:0crwdne131712:0 -- crwdns132112:0crwdne132112:0 -- crwdns132114:0crwdne132114:0 - -crwdns131858:0crwdne131858:0 - -crwdns131860:0crwdne131860:0 - -crwdns131862:0crwdne131862:0 - -## crwdns104514:0crwdne104514:0 - -crwdns131864:0crwdne131864:0 - -## crwdns104518:0crwdne104518:0 - -crwdns131866:0crwdne131866:0 - -## `crwdns104522:0crwdne104522:0` - -crwdns131868:0crwdne131868:0 crwdns131870:0crwdne131870:0 crwdns131872:0crwdne131872:0 - -```jsx -crwdns104530:0crwdne104530:0 -``` - -- crwdns131716:0crwdne131716:0 - -crwdns131874:0crwdne131874:0 - -### crwdns131876:0crwdne131876:0 - -crwdns131878:0crwdne131878:0 - -crwdns131880:0crwdne131880:0 - -## crwdns104542:0crwdne104542:0 - -crwdns131882:0crwdne131882:0 - -### crwdns131884:0crwdne131884:0 - -crwdns131886:0crwdne131886:0 - -crwdns131888:0crwdne131888:0 - -crwdns131890:0crwdne131890:0 - -> crwdns131360:0crwdne131360:0 - -## crwdns104554:0crwdne104554:0 - -crwdns131892:0crwdne131892:0 - -crwdns131894:0crwdne131894:0 - -### crwdns131896:0crwdne131896:0 - -crwdns131898:0crwdne131898:0 - -crwdns131900:0crwdne131900:0 - -### crwdns131902:0crwdne131902:0 - -crwdns131904:0crwdne131904:0 - -### crwdns131906:0crwdne131906:0 - -crwdns131908:0crwdne131908:0 - -crwdns131910:0crwdne131910:0 - -## crwdns106429:0crwdne106429:0 - -crwdns131912:0crwdne131912:0 crwdns131914:0crwdne131914:0 - -crwdns131916:0crwdne131916:0 - -## crwdns133018:0crwdne133018:0 - -### crwdns133020:0crwdne133020:0 - -crwdns133022:0crwdne133022:0 crwdns133024:0crwdne133024:0 crwdns133026:0crwdne133026:0 - -crwdns133028:0crwdne133028:0 - -### crwdns133030:0crwdne133030:0 - -crwdns133032:0crwdne133032:0 - -crwdns133034:0crwdne133034:0 - -crwdns133036:0crwdne133036:0 - -## crwdns106445:0crwdne106445:0 - -crwdns133038:0crwdne133038:0 - -crwdns133040:0crwdne133040:0 - -## crwdns106451:0crwdne106451:0 - -crwdns133042:0crwdne133042:0 crwdns133044:0crwdne133044:0 - -```js -crwdns104588:0{ createFilterOptions }crwdne104588:0 -``` - -### `crwdns133046:0crwdne133046:0` - -#### crwdns130368:0crwdne130368:0 - -1. crwdns131404:0[optional]crwdne131404:0 - - crwdns131406:0[optional]crwdne131406:0 crwdns131408:0crwdne131408:0 - - crwdns131410:0[optional]crwdne131410:0 crwdns131412:0crwdne131412:0 - - crwdns131414:0[optional]crwdne131414:0 crwdns131416:0crwdne131416:0 crwdns131418:0crwdne131418:0 crwdns131420:0crwdne131420:0 - - crwdns131422:0[optional]crwdne131422:0 - - crwdns131718:0[optional]crwdne131718:0 - - crwdns131720:0[optional]crwdne131720:0 crwdns131722:0crwdne131722:0 - -#### crwdns130372:0crwdne130372:0 - -crwdns133048:0crwdne133048:0 - -crwdns133050:0crwdne133050:0 - -```js -crwdns104612:0{filterOptions}crwdne104612:0 -``` - -crwdns133052:0crwdne133052:0 - -### crwdns133054:0crwdne133054:0 - -crwdns133056:0crwdne133056:0 crwdns133058:0crwdne133058:0 - -```jsx -crwdns104620:0{ inputValue }crwdnd104620:0{filterOptions}crwdne104620:0 -``` - -## crwdns106467:0crwdne106467:0 - -crwdns133060:0crwdne133060:0 crwdns133062:0crwdne133062:0 - -crwdns133064:0crwdne133064:0 - -## crwdns106475:0crwdne106475:0 - -### crwdns133066:0crwdne133066:0 - -crwdns133068:0crwdne133068:0 crwdns133070:0crwdne133070:0 - -crwdns133072:0crwdne133072:0 - -crwdns133074:0crwdne133074:0 crwdns133076:0crwdne133076:0 - -- crwdns131724:0crwdne131724:0 crwdns131726:0crwdne131726:0 crwdns131728:0crwdne131728:0 -- crwdns131730:0crwdne131730:0 - crwdns131732:0{...params}crwdnd131732:0{{ - ...params.inputProps, - autoComplete: 'new-password', - }}crwdne131732:0 - -### crwdns133078:0crwdne133078:0 - -crwdns133080:0crwdne133080:0 crwdns133082:0crwdne133082:0 - -### crwdns133084:0crwdne133084:0 - -crwdns133086:0crwdne133086:0 crwdns133088:0crwdne133088:0 - -## crwdns106481:0crwdne106481:0 - -crwdns133090:0crwdne133090:0 - -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 1f92c47282716e..0699a415648a91 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-de.md +++ b/docs/src/pages/components/autocomplete/autocomplete-de.md @@ -1,5 +1,5 @@ --- -title: Autocomplete React-Komponente +title: React Autocomplete component components: TextField, Popper, Autocomplete --- @@ -9,8 +9,8 @@ components: TextField, Popper, Autocomplete Das Widget ist nützlich, um den Wert eines einzeiligen Textfeldes in einem von zwei Arten von Szenarien zu setzen: -1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combo-box). -2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo). +1. Der Wert für das Textfeld muss aus einer vordefinierten Menge zulässiger Werte ausgewählt werden, z. B. ein Standortfeld, welches einen gültigen Standortnamen enthalten muss: [Combo Box](#combo-box). +2. Das Textfeld kann beliebige Werte enthalten, aber es ist vorteilhaft, dem Benutzer mögliche Werte vorzuschlagen, z. B ein Suchfeld, welches ähnliche oder frühere Suchen vorschlägt, um den Suchvorgang für den Benutzer zu beschleunigen: [free solo](#free-solo). It's meant to be an improved version of the "react-select" and "downshift" packages. @@ -78,7 +78,7 @@ You could also display a dialog when the user wants to add a new value. ## `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. +For advanced customization use cases, we expose a headless `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. ```jsx import useAutocomplete from '@material-ui/lab/useAutocomplete'; @@ -176,7 +176,7 @@ import { createFilterOptions } from '@material-ui/lab/Autocomplete'; - `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]): Standardeinstellung ist `false`. Abschließende Leerzeichen entfernen. + - `config.trim` (*Boolean* [optional]): Standardeinstellung ist `false`. Abschließende Leerzeichen entfernen. #### Rückgabewerte @@ -225,15 +225,12 @@ By default, the component disable the **autocomplete** feature (remembering what Zusätzlich zur Speicherung der eingegebenen Werte kann der Browser aber auch **Autofill** Vorschläge vorschlagen (gespeichertes Login, Adresse oder Zahlungsinformationen). Falls Sie die automatische Füllung vermeiden möchten, können Sie Folgendes versuchen: - Name the input without leaking any information the browser can use. e.g. `id="field1"` instead of `id="country"`. Wenn Sie die ID leer lassen, verwendet die Komponente eine zufällige ID. -- Setze `autoComplete="neues Passwort"`: - jsx - +- Setze `autoComplete="neues Passwort"`: jsx Setze `autoComplete="neues Passwort": +jsx` Setze `autoComplete="neues Passwort": + jsx` Setze `autoComplete="neues Passwort": + jsx` + Setze autoComplete="neues Passwort": + jsx ### iOS VoiceOver diff --git a/docs/src/pages/components/autocomplete/autocomplete-es.md b/docs/src/pages/components/autocomplete/autocomplete-es.md index 882cfc82630b04..57947daf952579 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-es.md +++ b/docs/src/pages/components/autocomplete/autocomplete-es.md @@ -1,5 +1,5 @@ --- -title: Componente de Autocompletado de React +title: React Autocomplete component components: TextField, Popper, Autocomplete --- @@ -10,7 +10,7 @@ components: TextField, Popper, Autocomplete El widget es útil para establecer el valor de un cuadro de texto de una sola línea en uno de los dos tipos de escenarios: 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). +2. El cuadro de texto puede contener cualquier valor arbitrario, pero es de gran ventaja sugerir posibles valores al usuario, por ejemplo, un campo de búsqueda puede sugerir búsquedas similares o anteriores para ahorrarle tiempo al usuario: [solo libre](#free-solo). Esto pretende ser una versión mejorada de los paquetes "react-select" y "downshift". @@ -78,7 +78,7 @@ También puedes mostrar un diálogo cuando el usuario quiere añadir un nuevo va ## `useAutocomplete` -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. +For advanced customization use cases, we expose a headless `useAutocomplete()` hook. 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'; @@ -136,15 +136,15 @@ Fancy smaller inputs? Use the `size` prop. {{"demo": "pages/components/autocomplete/Sizes.js"}} -## Customizations +## Personalizaciones -### Custom input +### Input personalizado -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. +El apoyo `renderInput` te permite personalizar la entrada renderizada. El primer argumento de este apoyo renderizado contiene apoyos que necesitas para avanzar. Ponga atención específica a las claves `red` y `inputProps`. {{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} -### GitHub's picker +### Selector de GitHub Esta demo reproduce el selector de etiquetas de GitHub: @@ -225,15 +225,12 @@ Por defecto, el componente deshabilita la característica de **autocompletar** ( 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: - 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 - +- Establecer `autoComplete="new-password"`: jsx Establecer `autoComplete="new-password": +jsx` Establecer `autoComplete="new-password": + jsx` Establecer `autoComplete="new-password": + jsx` + Establecer autoComplete="new-password": + jsx ### iOS VoiceOver @@ -241,10 +238,10 @@ VoiceOver en iOS Safari no soporta el atributo `aria-owns` especialmente bien. P ### ListboxComponent -If you provide a custom `ListboxComponent` prop, you need to make sure that the intended scroll container has the `role` attribute set to `listbox`. This ensures the correct behavior of the scroll, for example when using the keyboard to navigate. +Si proporciona un apoyo personalizado `ListboxComponent`, usted necesita asegurarse de que el contedenedor de desplazamiento destinado tiene el atributo `role` esta configurado `listbox`. Esto asegura el comportamiento correcto del desplazamiento, por ejemplo cuando usas el teclado para navegar. ## Accesibilidad (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) -We encourage the usage of a label for the textbox. The component implements the WAI-ARIA authoring practices. \ No newline at end of file +Animamos el uso de una etiqueta para el cuadro de texto. El componente implementa las prácticas de creación de WAI-ARIA. \ No newline at end of file diff --git a/docs/src/pages/components/autocomplete/autocomplete-fr.md b/docs/src/pages/components/autocomplete/autocomplete-fr.md index 75b40693f67b76..9f12860fdf5920 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-fr.md +++ b/docs/src/pages/components/autocomplete/autocomplete-fr.md @@ -1,122 +1,122 @@ --- -title: Composant React Auto-complétion +title: React Autocomplete component components: TextField, Popper, Autocomplete --- # Autocomplete (Auto-complétion) -

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

+

L'auto-complétion est un input normal améliorer par un panneau de suggestion.

Le widget est utile pour définir la valeur d'une zone de texte simple d'une seule ligne dans l'un des deux types de scénarios suivants: -1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combo-box). -2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo). +1. La valeur de la textbox doit être préalablement définit, ex: un champ de location doit contenir de valide nom de location: [combo box](#combo-box). +2. La zone de texte peut contenir n'importe quelle valeur arbitraire, mais il est avantageux de proposer des valeurs à l'utilisateur, par exemple, un champ de recherche peut suggérer similaires ou recherches antérieures pour gagner du temps aux utilisateurs: [gratuit solo](#free-solo). -It's meant to be an improved version of the "react-select" and "downshift" packages. +C'est censé être une version améliorée de la "react-select" et de "downshift". ## Combo box -The value must be chosen from a predefined set of allowed values. +La valeur doit être choisie à partir d'un ensemble prédéfini de valeurs autorisées. {{"demo": "pages/components/autocomplete/ComboBox.js"}} ### Playground -Each of the following examples demonstrate one feature of the Autocomplete component. +Chacun des exemples suivants illustrent l'une des caractéristiques de la saisie semi-automatique de composant. {{"demo": "pages/components/autocomplete/Playground.js"}} -### Country select +### Sélection de pays -Choose one of the 248 countries. +Choisissez l'un des 248 pays. {{"demo": "pages/components/autocomplete/CountrySelect.js"}} -### Controllable states +### États contrôlables -The component has two states that can be controlled: +Le composant a deux états qui peuvent être contrôlés : -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. l'état "valeur" avec la combinaison `valeur`/`onChange` props. Cet état représente la valeur sélectionnée par l'utilisateur, par exemple en appuyant sur Enter. +2. l'état "input value" avec la combinaison `inputValue`/`onInputChange`. Cet état représente la valeur affichée dans la zone de texte. -> ⚠️ These two state are isolated, they should be controlled independently. +> ⚠ Ces deux états sont isolés, ils doivent être contrôlés de manière indépendante. {{"demo": "pages/components/autocomplete/ControllableStates.js"}} ## Free solo -Set `freeSolo` to true so the textbox can contain any arbitrary value. +Définissez `freeSolo` à true pour que le textbox puisse contenir n'importe quelle valeur arbitraire. ### Search input -The prop is designed to cover the primary use case of a **search input** with suggestions, e.g. Google search or react-autowhatever. +La prop est conçue pour couvrir le cas d'utilisation principal d'une **search input** avec des suggestions, par exemple la recherche Google ou le react-autowhatever. {{"demo": "pages/components/autocomplete/FreeSolo.js"}} -### Creatable +### Créable -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 vous avez l'intention d'utiliser ce mode pour une [combo box](#combo-box) comme expérience (une version améliorée d'un élément sélectionné) nous vous recommandons de régler : -- `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` pour aider l'utilisateur à effacer la valeur sélectionnée. +- `clearOnBlur` pour aider l'utilisateur à entrer une nouvelle valeur. +- `handleHomeEndKeys` pour déplacer le focus à l'intérieur de la fenêtre pop-up avec les touches Accueil et Fin. +- Une dernière option, par exemple `Ajouter "VOTRE RECHERCH"`. {{"demo": "pages/components/autocomplete/FreeSoloCreateOption.js"}} -You could also display a dialog when the user wants to add a new value. +Vous pouvez également afficher une boîte de dialogue lorsque l'utilisateur souhaite ajouter une nouvelle valeur. {{"demo": "pages/components/autocomplete/FreeSoloCreateOptionDialog.js"}} -## Grouped +## Groupé {{"demo": "pages/components/autocomplete/Grouped.js"}} -## Disabled options +## Options désactivées {{"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. +For advanced customization use cases, we expose a headless `useAutocomplete()` hook. Il accepte presque les mêmes options que le composant de saisie automatique moins tous les props liés au rendu de JSX. Le composant Autocomplete utilise ce hook en interne. ```jsx import useAutocomplete from '@material-ui/lab/useAutocomplete'; ``` -- 📦 [4.5 kB gzipped](/size-snapshot). +- 📦 [4.5 kB gzippé](/size-snapshot). {{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} -### Customized hook +### Hook personnalisé {{"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. +Rendez-vous à la section [Auto-complétion personnalisée](#customized-autocomplete) pour un exemple de personnalisation avec le composant `Auto-complétion` au lieu du hook. -## Asynchronous requests +## Demandes asynchrones {{"demo": "pages/components/autocomplete/Asynchronous.js"}} -### Google Maps place +### Lieu de Google Maps -A customized UI for Google Maps Places Autocomplete. +Une interface utilisateur personnalisée pour la saisie automatique des lieux Google Maps. {{"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. +Pour cette démo, nous avons besoin de charger l'API JavaScript [Google Maps](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. +> ⚠ Avant de pouvoir commencer à utiliser l'API JavaScript de Google Maps, vous devez vous inscrire et créer un compte de facturation. -## Multiple values +## Valeurs multiples -Also known as tags, the user is allowed to enter more than one value. +Aussi connu sous le nom de tags, l'utilisateur est autorisé à entrer plus d'une valeur. {{"demo": "pages/components/autocomplete/Tags.js"}} -### Fixed options +### Options fixes -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. +Si vous avez besoin de verrouiller certaines balises pour qu'elles ne puissent pas être supprimées dans l'interface, vous pouvez désactiver les chip. {{"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 +### Limiter les tags -You can use the `limitTags` prop to limit the number of displayed options when not focused. +Vous pouvez utiliser la prop `limitTags` pour limiter le nombre d'options affichées quand la cible n'est pas sélectionnée. {{"demo": "pages/components/autocomplete/LimitTags.js"}} @@ -136,31 +136,31 @@ Fancy smaller inputs? Use the `size` prop. {{"demo": "pages/components/autocomplete/Sizes.js"}} -## Customizations +## Personnalisations ### 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. +La propriété `renderInput` vous permet de personnaliser l'entrée rendue. Le premier argument de cette prop de rendu contient des props que vous devez avancer. Faites une attention particulière aux clés `ref` et `inputProps`. {{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} -### GitHub's picker +### Sélecteur de GitHub -This demo reproduces the GitHub's label picker: +Cette démo reproduit le sélecteur d'étiquettes 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. +Rendez-vous à la section [Crochet personnalisé](#customized-hook) pour un exemple de personnalisation avec le hook `useAutocomplete` au lieu du composant. ## Highlights -The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. +La démo suivante repose sur [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), un petit utilitaire (1 ko) pour mettre en évidence le texte dans les composants de suggestion automatique et la saisie automatique. {{"demo": "pages/components/autocomplete/Highlights.js"}} -## Custom filter +## Filtre personnalisé -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. +Le composant expose une usine pour créer une méthode de filtre qui peut être fournie à la propriété `filterOptions`. Vous pouvez l'utiliser pour modifier le comportement de filtre par défaut. ```js import { createFilterOptions } from '@material-ui/lab/Autocomplete'; @@ -170,19 +170,19 @@ import { createFilterOptions } from '@material-ui/lab/Autocomplete'; #### Paramètres -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]): Valeur par défaut `false`. Remove trailing spaces. +1. `config` (*Object* [optional] ) : + - `config.ignoreAccents` (*Boolean* [optional]) : Valeur par défaut de `true`. Supprimer les diacritiques. + - `config.ignoreCase` (*Boolean* [optional]) : Valeur par défaut de `true`. Tout en minuscule. + - `config.limit` (*Numéro* [optional]) : Valeur par défaut à null. Limiter le nombre d'options suggérées à afficher. Par exemple, si `config.limite` est `100`, seule les premières `100` options correspondantes sont affichées. Cela peut être utile si beaucoup d'options de correspondance et de virtualisation n'ont pas été mises en place. + - `config.matchFrom` (*'any' | 'start'* [optional]: Par défaut de `'any'`. + - `config.stringify` (*Func* [optional]) : Contrôle comment une option est convertie en une chaîne de caractères pour qu'elle puisse être comparée au fragment de texte d'entrée. + - `config.trim` (*Boolean* [optional]): Valeur par défaut `false`. Supprimer les espaces suivants. #### Valeur de retour -`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`: la méthode de filtre retournée peut être fournie directement à la prop `filterOptions` du composant `Auto-complétion` , ou le paramètre du même nom pour le hook. -In the following demo, the options need to start with the query prefix: +Dans la démo suivante, les options doivent commencer par le préfixe de requête : ```js const filterOptions = createFilterOptions({ @@ -197,7 +197,7 @@ const filterOptions = createFilterOptions({ ### Avancé -For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). Par exemple: +Pour les mécanismes de filtrage plus riches, comme les correspondances floues, il est recommandé de regarder [matchs-sorter](https://github.com/kentcdodds/match-sorter). Par exemple: ```jsx import matchSorter from 'match-sorter'; @@ -208,9 +208,9 @@ const filterOptions = (options, { inputValue }) => ``` -## Virtualization +## Virtualisation -Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). +Recherchez dans 10 000 options générées aléatoirement. La liste est virtualisée grâce à [react-window](https://github.com/bvaughn/react-window). {{"demo": "pages/components/autocomplete/Virtualize.js"}} @@ -218,14 +218,14 @@ Search within 10,000 randomly generated options. The list is virtualized thanks ### autocomplete/autofill -The browsers have heuristics to help the users fill the form inputs. However, it can harm the UX of the component. +Les navigateurs ont des heuristiques pour aider les utilisateurs à remplir les entrées de formulaire. Cependant, cela peut nuire à l'UX du composant. -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. +Par défaut, le composant désactive la fonctionnalité **auto-complétion** (rappelant ce que l'utilisateur a tapé pour un champ donné dans une session précédente) avec l'attribut `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: +Cependant, en plus de se souvenir des valeurs entrées passées, le navigateur peut également proposer des suggestions de **remplissage automatique** (connexion, adresse ou détails de paiement enregistrés). Dans le cas où vous voulez le remplissage automatique, vous pouvez essayer ce qui suit : -- 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"`: +- Nommez l'input sans fuir les informations que le navigateur peut utiliser. par exemple `id="field1"` au lieu de `id="country"`. Si vous laissez l'id vide, le composant utilise un id aléatoire. +- Définir `autoComplete="new-password"`: jsx jsx jsx jsx -### iOS VoiceOver +### voiceOver iOS -VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. +VoiceOver sur iOS Safari ne supporte pas très bien l'attribut `aria-owns`. Vous pouvez contourner le problème avec la propriété `disablePortal`. ### ListboxComponent -If you provide a custom `ListboxComponent` prop, you need to make sure that the intended scroll container has the `role` attribute set to `listbox`. This ensures the correct behavior of the scroll, for example when using the keyboard to navigate. +Si vous fournissez une prop `ListboxComponent` personnalisée, vous devez vous assurer que le conteneur de défilement prévu a l'attribut `role` défini à `listbox`. Cela assure le comportement correct du défilement, par exemple lorsque vous utilisez le clavier pour naviguer. ## Accessibilité (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) -We encourage the usage of a label for the textbox. The component implements the WAI-ARIA authoring practices. \ No newline at end of file +Nous encourageons l'utilisation d'un label pour la zone de texte. Le composant implémente les pratiques de création de WAI-ARIA. \ No newline at end of file diff --git a/docs/src/pages/components/autocomplete/autocomplete-ja.md b/docs/src/pages/components/autocomplete/autocomplete-ja.md index 78831b838d5977..c66c96d72489ad 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-ja.md +++ b/docs/src/pages/components/autocomplete/autocomplete-ja.md @@ -1,5 +1,5 @@ --- -title: オートコンプリートReactコンポーネント +title: React Autocomplete component components: TextField, Popper, Autocomplete --- @@ -7,64 +7,64 @@ components: TextField, Popper, Autocomplete

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

-The widget is useful for setting the value of a single-line textbox in one of two types of scenarios: +ウィジェットは、単一行テキストボックスの値を設定する際に以下の2通りの状況で役に立ちます。 -1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combo-box). -2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo). +1. テキストボックスの値が、予め決められた許容値の中から選ばないといけない場合。 例えば、位置の欄は [combo box](#combo-box)の中から選ばないといけない。 +2. テキストボックスが任意の値を含む可能性があるが、ユーザーに可能性のある値の提案をすることが有効な場合。例えば、検索欄で近い、又は、以前の検索結果を示してユーザーの時間を節約する。[free solo](#free-solo). -It's meant to be an improved version of the "react-select" and "downshift" packages. +"react-select"と"downshift"というパッケージの改良版であることを意識しています。 ## Combo box -The value must be chosen from a predefined set of allowed values. +テキストボックスの値は、予め決められた許容値の中から選ばないといけない {{"demo": "pages/components/autocomplete/ComboBox.js"}} ### Playground -Each of the following examples demonstrate one feature of the Autocomplete component. +以下の各例は、Autocompleteコンポーネントの各機能を示しています。 {{"demo": "pages/components/autocomplete/Playground.js"}} ### Country select -Choose one of the 248 countries. +248の国から一つ選びます。 {{"demo": "pages/components/autocomplete/CountrySelect.js"}} ### Controllable states -The component has two states that can be controlled: +コンポーネントは、操作できる二つのステートを持ちます。 -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. "value"ステートは `value`/`onChange` を組み合わせて使用します。 "value"ステートは `value`/`onChange` を組み合わせて使用します。 この値は、ユーザーが選択した値を示します。例えば、Enterを押している状態。 "value"ステートは `value`/`onChange` を組み合わせて使用します。 この値は、ユーザーが選択した値を示します。例えば、Enterを押している状態。 +2. "input value"ステートは`inputValue`/`onInputChange` を組み合わせて使用します。 この値は、テキストボックスに表示される値を示します。 この値は、テキストボックスに表示される値を示します。 この値は、テキストボックスに表示される値を示します。 -> ⚠️ These two state are isolated, they should be controlled independently. +> 二つのステートは解離しており、独立して管理される必要があります。 {{"demo": "pages/components/autocomplete/ControllableStates.js"}} ## Free solo -Set `freeSolo` to true so the textbox can contain any arbitrary value. +`freeSolo`をtureにすることで、テキストボックスに任意の値を含むことができます。 ### Search input -The prop is designed to cover the primary use case of a **search input** with suggestions, e.g. Google search or react-autowhatever. +提案付きの**検索欄**に使われることを主な使われ方として設計されています。例えば、Google searchやreact-autowhatever {{"demo": "pages/components/autocomplete/FreeSolo.js"}} ### Creatable -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: +このモードを[combo box](#combo-box)のような体験(selectの拡張版) に使う意図であれば、以下のような設定をお勧めします。 -- `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`でユーザーが選択した値を消せるようにする。 +- `clearOnBlur` でユーザーが新しい値を入力できるようにする。 +- `handleHomeEndKeys`でポップアップな内でHome and Endキーを使ってフォーカスが移動できるようにする。 +- 最後の選択肢に, 例えば`Add "YOUR SEARCH"`を追加する。 {{"demo": "pages/components/autocomplete/FreeSoloCreateOption.js"}} -You could also display a dialog when the user wants to add a new value. +ユーザーが新しい値を入力する時に、ダイアログを表示することもできます。 {{"demo": "pages/components/autocomplete/FreeSoloCreateOptionDialog.js"}} @@ -78,7 +78,7 @@ You could also display a dialog when the user wants to add a new value. ## `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. +For advanced customization use cases, we expose a headless `useAutocomplete()` hook. JSXのレンダリングに関連する値以外は、Autocompleteコンポーネントとほぼ同じ値をとります。 Autocompleteコンポーネントは内部でこのhookを使用しています。 Autocompleteコンポーネントは内部でこのhookを使用しています。 ```jsx import useAutocomplete from '@material-ui/lab/useAutocomplete'; @@ -92,7 +92,7 @@ import useAutocomplete from '@material-ui/lab/useAutocomplete'; {{"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. +[Customized Autocomplete](#customized-autocomplete) 部分で、 hookの代わりに `Autocomplete`を使用したカスタマイズ例が見れます。 ## Asynchronous requests @@ -100,23 +100,23 @@ Head to the [Customized Autocomplete](#customized-autocomplete) section for a cu ### Google Maps place -A customized UI for Google Maps Places Autocomplete. +Google マップの位置の自動保管用のカスタムUI {{"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. +このデモでは、 [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) APIをロードする必要があります。 -> ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. +> Google Maps JavaScript APIを使用する前に、サインアップして、決済アカウントを作成する必要があります。 ## Multiple values -Also known as tags, the user is allowed to enter more than one value. +タグとも言える。ユーザーは一つ以上の値を選択することができます。 {{"demo": "pages/components/autocomplete/Tags.js"}} ### Fixed options -In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled. +インターフェースから削除されないように、特定のタグを固定する必要があるイベント中、チップスを無効化することができます。 {{"demo": "pages/components/autocomplete/FixedTags.js"}} @@ -126,7 +126,7 @@ In the event that you need to lock certain tag so that they can't be removed in ### Limit tags -You can use the `limitTags` prop to limit the number of displayed options when not focused. +`limitTags` でフォーカスしていない時に表示する選択肢の数に上限を設けられます。 {{"demo": "pages/components/autocomplete/LimitTags.js"}} @@ -140,27 +140,27 @@ Fancy smaller inputs? `size`propを使用します。 ### Custom input -The `renderInput` prop allows you to customize the rendered input. The first argument of this render prop contains props that you need to forward. Pay specific attention to the `ref` and `inputProps` keys. +`renderInput`でレンダリングされる入力をカスタマイズできます。 このrender propsの一つ目の引数は、継承する必要のあるpropsを含みます。 `ref` と `inputProps` の扱いに特に注意してください。 このrender propsの一つ目の引数は、継承する必要のあるpropsを含みます。 `ref` と `inputProps` の扱いに特に注意してください。 {{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} ### GitHub's picker -This demo reproduces the GitHub's label picker: +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. +[Customized hook](#customized-hook) 部分で、 コンポーネントの代わりに、`useAutocomplete`hookを使用したカスタマイズ例が見れます。 ## Highlights -The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. +以下のデモはこちらに依存します。[autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), 提案されたテキストや自動保管コンポーネントをハイライトする小さいサイズの(1 kB)ユーティリティ {{"demo": "pages/components/autocomplete/Highlights.js"}} ## Custom filter -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. +`filterOptions`に流せるフィルターメソッドを作成できるファクトリーを露出しているコンポーネント デフォルトのフィルター挙動を変更するのに使うことができます。 デフォルトのフィルター挙動を変更するのに使うことができます。 デフォルトのフィルター挙動を変更するのに使うことができます。 ```js import { createFilterOptions } from '@material-ui/lab/Autocomplete'; @@ -171,18 +171,18 @@ import { createFilterOptions } from '@material-ui/lab/Autocomplete'; #### 引数 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]): Defaults `false`. Remove trailing spaces. + - `config.ignoreAccents` (*Boolean* [optional]): デフォルトは`true`. 発音記号を削除する + - `config.ignoreCase` (*Boolean* [optional]): デフォルトは`true`. すべて小文字にする。 + - `config.limit` (*Number* [optional]): デフォルトはnull. 表示される推奨オプションの数を制限する。 例えば、 `config.limit` が `100`の時、頭の`100`個のマッチングオプションのみが表示されます。 バーチャライズせずに、大量の選択肢を扱うのに有効です。 + - `config.matchFrom` (*'any' | 'start'* [optional]): デフォルトは `'any'`. + - `config.stringify` (*Func* [optional]): オプションがどのようにstringに変換されるか制御します。入力文字片に対してマッチさせることができます。 + - `config.trim` (*Boolean* [optional]): デフォルトは `false`. 末尾のスペースを削除します。 #### 戻り値 -`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`: 返り値のフィルターメソッドは、`Autocomplete`コンポーネントの`filterOptions`propに直接渡すことができます。hookにも渡すことができます。 -In the following demo, the options need to start with the query prefix: +以下のデモでは、選択肢が前方一致する必要があります。 ```js const filterOptions = createFilterOptions({ @@ -197,7 +197,7 @@ const filterOptions = createFilterOptions({ ### 高度な機能(Advanced) -For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). 例えば： +fuzzy matchingのような高度なメカニズの為には [match-sorter](https://github.com/kentcdodds/match-sorter)を見ることをおすすめします。 例えば： 例えば： 例えば： ```jsx import matchSorter from 'match-sorter'; @@ -210,7 +210,7 @@ const filterOptions = (options, { inputValue }) => ## Virtualization -Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). +10,000のランダム生成された選択肢内で検索します。 10,000のランダム生成された選択肢内で検索します。 10,000のランダム生成された選択肢内で検索します。 [react-window](https://github.com/bvaughn/react-window)でリストをバーチャライズしています。 {{"demo": "pages/components/autocomplete/Virtualize.js"}} @@ -218,14 +218,14 @@ Search within 10,000 randomly generated options. The list is virtualized thanks ### autocomplete/autofill -The browsers have heuristics to help the users fill the form inputs. However, it can harm the UX of the component. +ブラウザは入力補助のために経験則を持っています。 しかし、これはコンポーネントのUXを損なう可能性があります。 -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. +デフォルトでは, **autocomplete** 機能(特定の欄に以前入力した内容を保持しておくもの) は `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: +しかし、過去に入力された値を記憶しておくことに加えて、ブラウザは**autofill** を提案してくることがあります。(ログイン情報、住所、支払い情報) autofillを避けたい場合、以下の方法を取れます。 autofillを避けたい場合、以下の方法を取れます。 autofillを避けたい場合、以下の方法を取れます。 -- 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"`: +- ブラウザが判断できない命名を入力欄に使う。 ブラウザが判断できない命名を入力欄に使う。 例: `id="country"`の代わりに、`id="field1"`を使う idを空にした場合、コンポーネントはランダムなidを保管します。 idを空にした場合、コンポーネントはランダムなidを保管します。 +- Set `autoComplete="new-password"`: jsx jsx jsx jsx ⚠️ Antes de você começar a usar a API Javascript do Google Maps você precisará estar cadastrado e ter uma conta. +> ⚠️ Antes de você começar a usar a API JavaScript do Google Maps você precisará estar cadastrado e ter uma conta. ## Múltiplos valores @@ -120,13 +120,13 @@ Em ocasiões que você necessite travar certa tag para que não possa ser removi {{"demo": "pages/components/autocomplete/FixedTags.js"}} -### Caixas de Seleção +### Caixas de seleção {{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} ### Limitar tags -Você pode usar a propriedade `limitTags` para limitrar o nuúmero de opções exibidas quando o componente não estiver com o foco. +Você pode usar a propriedade `limitTags` para limitrar o número de opções exibidas quando o componente não estiver com o foco. {{"demo": "pages/components/autocomplete/LimitTags.js"}} @@ -140,13 +140,13 @@ Gosta mais de campos de texto menores? Use a propriedade `size`. ### Input customizado -A propriedade `renderInput` permite que você customize o input renderizado. O primeiro argumento desta propriedade de render, contém propriedades que você precisa repassar. Preste atenção específicamente nas chaves `ref` e `inputProps`. +A propriedade `renderInput` permite que você customize o input renderizado. O primeiro argumento desta propriedade de render, contém propriedades que você precisa encaminhar. Preste atenção específicamente nas chaves `ref` e `inputProps`. {{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} ### Seletor do GitHub -Esta demonstração reproduz o rótulo de selecão do GitHub's: +Esta demonstração reproduz o rótulo de seleção do GitHub's: {{"demo": "pages/components/autocomplete/GitHubLabel.js"}} @@ -154,13 +154,13 @@ Va para a seção [Hook customizado](#customized-hook) para um exemplo com o uso ## Realce -A demonstração a seguir depende do [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), um utilitário pequeno (1 kB) para realçar textos nos componentes autosuggest e autocomplete. +A demonstração a seguir dependem do [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), um utilitário pequeno (1 kB) para realçar textos nos componentes autosuggest e autocomplete. {{"demo": "pages/components/autocomplete/Highlights.js"}} ## Filtro customizado -O componente expõe uma fábrica para criar um método de filtro que pode ser fornecido para a propriedade `filerOption`. Você pode usar ela para modificar o comportamento padão do filtro. +O componente expõe uma fábrica para criar um método de filtro que pode ser fornecido para a propriedade `filterOptions`. Você pode usar ela para modificar o comportamento padrão do filtro. ```js import { createFilterOptions } from '@material-ui/lab/Autocomplete'; @@ -182,7 +182,7 @@ import { createFilterOptions } from '@material-ui/lab/Autocomplete'; `filterOptions`: o método de filtro retornado pode ser fornecido diretamente para a propriedade `filterOptions` do componente `Autocomplete` ou para o parâmetro de mesmo nome no hook. -Na demonstração a seguir, as opções necessarias para o filtro ser aplicado no inicio das opções: +Na demonstração a seguir, as opções necessárias para o filtro ser aplicado no inicio das opções: ```js const filterOptions = createFilterOptions({ @@ -224,7 +224,7 @@ Por padrão, o componente desabilita o recurso de **autocomplete** (recurso que No entanto, além de relembrar valores fornecidos anteriormente, o navegador também pode propor sugestões de **autofill** (preenchimento automático para informações de login, endereço ou detalhes de pagamento). No caso de você querer evitar o recurso de preenchimento automático, tente o seguinte: -- Nomeie o campo sem fornecer informações para o navegador do que ele representa. ex. `id="field1"` ao invés de `id="country"`. Se você deixar o id do vazio, o componente utiliza um id aleatório. +- Nomeie o campo sem fornecer informações para o navegador do que ele representa. `id="field1"` ao invés de `id="country"`. Se você deixar o id do vazio, o componente utiliza um id aleatório. - Defina `autoComplete="new-password"`: jsx ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. +> ⚠️ Перед началом использования API карт Google, JavaScript необходимо зарегистрировать и создать учетную запись для выставления счетов. ## Множественные значения @@ -152,7 +152,7 @@ This demo reproduces the GitHub's label picker: Head to the [Customized hook](#customized-hook) section for a customization example with the `useAutocomplete` hook instead of the component. -## Highlights +## Основные моменты The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. @@ -216,24 +216,21 @@ const filterOptions = (options, { inputValue }) => ## Ограничения -### autocomplete/autofill +### Автозаполнение The browsers have heuristics to help the users fill the form inputs. However, it can harm the UX of the component. 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. -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: +Однако, помимо запоминания введенных ранее значений браузер может также предложить **автозаполнение** (сохраненный логин, адрес или платежная информация). In the event you want the avoid autofill, you can try the following: - 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"`: - jsx - +- Set `autoComplete="new-password"`: jsx Set `autoComplete="new-password": +jsx` Set `autoComplete="new-password": + jsx` Set `autoComplete="new-password": + jsx` + Set autoComplete="new-password": + jsx ### iOS VoiceOver diff --git a/docs/src/pages/components/autocomplete/autocomplete-zh.md b/docs/src/pages/components/autocomplete/autocomplete-zh.md index c92771960b78a8..6f97b3bc6cb94d 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-zh.md +++ b/docs/src/pages/components/autocomplete/autocomplete-zh.md @@ -1,5 +1,5 @@ --- -title: React Autocomplete 自动补全组件 +title: React Autocomplete（自动补全）组件 components: TextField, Popper, Autocomplete --- @@ -36,35 +36,35 @@ components: TextField, Popper, Autocomplete 此组件有两种可控的状态： -1. “value” 状态，使用 `value`/`onChange` 属性组合。 这个状态表示用户选择的值，例如，当按 Enter 键时. -2. “input value” 状态，使用 `inputValue`/`onInputChange` 属性组合。 这个状态表示展示在文本框中的值。 +1. “value” 状态（state）包含了 `value`/`onChange` 两种属性的组合。 这个状态表示用户选择的值，如当按下 Enter 键时。 +2. “input value” 状态（state) 则包含了 `inputValue`/`onInputChange` 两种属性的组合。 这个状态展示了在文本框中显示的值。 > ⚠️ 以上两种状态互不干涉，它们应该被单独控制着。 {{"demo": "pages/components/autocomplete/ControllableStates.js"}} -## 免费工具 +## Free solo -将 `freeSolo` 设置为true，以便在文本框中输入任意值。 +当将 `freeSolo` 设置为 true 时，用户可以文本框中输入任意值。 ### 搜索输入栏 -该属性的主要使用方式是创建一个带有搜索建议的 **输入栏**，例如 Google 搜索 或 react-autowhatever。 +该属性的主要使用方式是创建一个带有搜索建议的 **输入文本框**，例如 Google 搜索 或 react-autowhatever。 {{"demo": "pages/components/autocomplete/FreeSolo.js"}} ### Creatable （可创造性） -如果您打算将此模块用于类似 [组合框](#combo-box) 的体验（选择控件元素的增强版），我们建议设置： +如果您打算将此模块用于类似 [组合框](#combo-box) 的体验（一个选择控件元素的增强版），我们则建议如下的设置： - `selectOnFocus` 帮助用户清除所选值。 - `clearOnBlur` 帮助用户输入一个新的值。 - `handleHomeEndKeys` 使用Home 和 End 键在弹出窗口内移动焦点。 -- 最后一个选项，例如 `Add "YOUR SEARCH"`。 +- 最后一个选项，例如 `加上 "你的搜索结果"`。 {{"demo": "pages/components/autocomplete/FreeSoloCreateOption.js"}} -您也可以在用户想要添加一个新的值时显示一个对话框 +您也可以在用户想要加入一个新值的时候显示一个对话框。 {{"demo": "pages/components/autocomplete/FreeSoloCreateOptionDialog.js"}} @@ -78,7 +78,7 @@ components: TextField, Popper, Autocomplete ## `useAutocomplete` -作为一种高级定制方式，我们公开了一个 `useAutocomplete()` 钩子方法。 它接受几乎与Autocomplete组件相同的参数，辅以与JSX渲染有关的所有参数。 Autocomplete组件内部也是使用的此钩子方法。 +对于高级定制用例，我们暴露了一个无头（headless）的 `useAutocomplete()` hook。 它接受几乎与 Autocomplete 组件相同的参数，辅以与 JSX 渲染有关的所有参数。 Autocomplete 组件内部也是使用的此 hook。 ```jsx import useAutocomplete from '@material-ui/lab/useAutocomplete'; @@ -88,39 +88,39 @@ import useAutocomplete from '@material-ui/lab/useAutocomplete'; {{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} -### 自定义钩子 +### 自定义的 hook {{"demo": "pages/components/autocomplete/CustomizedHook.js"}} -转到[自定义自动完成](#customized-autocomplete)部分，查看使用 `Autocomplete` 组件（而不是钩子）的例子。 +请转到 [自定义自动完成组件](#customized-autocomplete) 的部分，来查看使用 `Autocomplete` 组件（而不是 hook）的例子。 ## 异步请求 {{"demo": "pages/components/autocomplete/Asynchronous.js"}} -### 谷歌地图位置 +### Google Maps Places -一个为谷歌地图位置自动补全功能设计的 UI。 +一个为 Google Maps Places 自动补全功能设计的 UI。 {{"demo": "pages/components/autocomplete/GoogleMaps.js"}} -对于这个演示，我们需要加载 [谷歌地图JavaScript](https://developers. google. com/maps/documentation/javascript/tutorial) API。 +在这个演示中，我们需要加载 [谷歌地图 JavaScript](https://developers. google. com/maps/documentation/javascript/tutorial) 的 API。 > ⚠️在你开始使用 Google Maps JavaScript API 之前，你必须注册并且创建一个可支付的账户。 ## 多个值 -这也称为标签，允许用户输入多个值。 +这也称为标签（tags)，用户可以输入多个的值。 {{"demo": "pages/components/autocomplete/Tags.js"}} -### 固定选项 +### 固定的选项 有时候你需要锁定某个标签，这样他们不会被从界面中移除，这时你可以将 chips 设置为禁用。 {{"demo": "pages/components/autocomplete/FixedTags.js"}} -### 复选框 +### Checkboxes 复选框 {{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} @@ -132,25 +132,25 @@ import useAutocomplete from '@material-ui/lab/useAutocomplete'; ## 尺寸 -想要使用外观看起来比较小的输入框吗？ 您可以使用 `size` 属性。 +想要使用外观看起来比较小的输入框吗？ 试着使用 `size` 属性吧。 {{"demo": "pages/components/autocomplete/Sizes.js"}} -## 自定义设置 +## 个性化 ### 自定义输入 -`renderInput` 属性允许你对输入内容进行自定义渲染 The first argument of this render prop contains props that you need to forward. 请特别注意 `ref` 和 `inputProps` 键(key)。 +使用 `renderInput` 属性，您可以对输入内容进行自定义渲染。 此 render 属性的第一个参数包含了你想要传递的那些属性。 请特别注意 `ref` 和 `inputProps` 键（key）。 {{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} -### GitHub 标签选择器 +### GitHub 标签选择器 -该演示再现了GitHub的标签选择器： +该演示再现了 GitHub 的标签选择器： {{"demo": "pages/components/autocomplete/GitHubLabel.js"}} -你也可以转到[自定义 hook](#customized-hook) 章节，查看一下使用 `useAutocomplete` hook 的自定义例子，而不是使用自动补全组件（Autocomplete）。 +你也可以转到[自定义 hook](#customized-hook) 章节，查看一下使用 `useAutocomplete` hook 的自定义例子，而不是使用组件。 ## 高亮显示 @@ -160,7 +160,7 @@ import useAutocomplete from '@material-ui/lab/useAutocomplete'; ## 自定义筛选 -此组件提供了一个工厂来构建一个筛选的方法，供给 `filterOptions` 属性使用。 用此你可以更改默认的筛选行为。 +此组件提供了一个 factory 来构建一个筛选的方法，供给 `filterOptions` 属性使来用。 用此你可以更改默认的筛选行为。 ```js import { createFilterOptions } from '@material-ui/lab/Autocomplete'; @@ -171,18 +171,18 @@ import { createFilterOptions } from '@material-ui/lab/Autocomplete'; #### 参数 1. `config` (*Object* [optional]): - - `config.ignoreAccents` (*Boolean* [optional]): 默认值为` true `。 移除字母的变音符号。 + - `config.ignoreAccents` (*Boolean* [optional])：默认值为 `true`。 移除字母的变音符号。 - `config.ignoreCase` (*Boolean* [optional]): 默认值为` true `。 所有字母都小写。 - - `config.limit` (*Number* [optional]): 默认值为 null。 显示限定数量的建议选项。 譬如，如果 `config.limit` 为 `100`，那么只显示前`100` 个匹配的选项。 如果存在很多选项匹配，并且虚拟化设置还没建立成时，这样的限制是非常有效的。 - - `config.matchFrom` (*'any' | 'start'* [optional]): 默认值为 `'any'`。 - - `config.stringify` (*Func* [optional]): 控制如何将一个选项转换成一个字符串，这样，选项就能够和输入文本的片段相匹配。 - - `config.trim` (*Boolean* [optional]): 默认值为`false`。 删除尾随空格。 + - `config.limit` (*Number* [optional])：默认值为 null。 显示限定数量的建议选项。 例如，如果 `config.limit` 是 `100`,，那么只显示前 `100 个` 匹配的选项。 如果存在很多选项匹配，并且虚拟化设置还没建立成时，这样的限制是非常有效的。 + - `config.matchFrom` (*'any' | 'start'* [optional])：默认值为 `'any'`。 + - `config.stringify` (*Func* [optional])：控制如何将一个选项转换成一个字符串，这样，选项就能够和输入文本的片段相匹配。 + - `config.trim` (*Boolean* [optional])：默认值为 `false`。 删除尾随空格。 #### 返回结果 -`过滤选项`: 返回的过滤器方法可以直接提供给`自动补全` 组件的 ` filterOptions ` 属性， 或者可以传给 hook 的同名参数。 +`过滤选项`：返回的过滤器方法可以直接提供给 ` Autocomplete` 组件的 `filterOptions` 属性， 或者可以传给 hook 的同名参数。 -以下的例子中，选项必须有一个查询的前缀： +在以下的例子中，选项必须有一个查询的前缀： ```js const filterOptions = createFilterOptions({ @@ -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)。 就像这样： @@ -210,11 +210,11 @@ const filterOptions = (options, { inputValue }) => ## 可视化 -在 10000个随机生成的选项中搜索。 多亏了[react-window](https://github.com/bvaughn/react-window)，这个列表得以可视化。 +在 10000 个随机生成的选项中搜索。 多亏了[react-window](https://github.com/bvaughn/react-window)，这个列表得以可视化。 {{"demo": "pages/components/autocomplete/Virtualize.js"}} -## 局限性 +## 设计局限 ### autocomplete/autofill @@ -224,7 +224,7 @@ const filterOptions = (options, { inputValue }) => 然而，除了记住过去已经输入的值，浏览器可能也会给出 **自动填充（autofill）** 的建议（譬如有保存的登录信息，地址，或者支付方式等）。 若您不需要自动填充，您可以尝试以下的方式： -- 给输入框一个不同的名字，这样不会泄露任何信息给浏览器使用。 例如：`id="field1"` 而不是 `id="country"`。 若你不填写 id，该组件则会使用一个随机的 id。 +- 给输入框一个不同的名字，这样不会给浏览器泄露任何可以滥用的信息。 例如：`id="field1"` 而不是 `id="country"`。 若你不填写 id 的话，该组件则会使用一个随机的 id。 - 设置为 `autoComplete="new-password"`： jsx }} /> -### iOS VoiceOver +### iOS VoiceOver 辅助功能 iOS Safari 中的 VoiceOver 对 `aria-owns` 属性的支持并不是很到位。 你可以用 `disablePortal` 属性来解决这个问题。 diff --git a/docs/src/pages/components/autocomplete/autocomplete.md b/docs/src/pages/components/autocomplete/autocomplete.md index c4f2af9a8a1a32..cef8825e272773 100644 --- a/docs/src/pages/components/autocomplete/autocomplete.md +++ b/docs/src/pages/components/autocomplete/autocomplete.md @@ -1,5 +1,5 @@ --- -title: Autocomplete React component +title: React Autocomplete component components: TextField, Popper, Autocomplete --- @@ -78,7 +78,7 @@ You could also display a dialog when the user wants to add a new value. ## `useAutocomplete` -For advanced customization use cases, we expose a `useAutocomplete()` hook. +For advanced customization use cases, we expose a headless `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. diff --git a/docs/src/pages/components/avatars/avatars-aa.md b/docs/src/pages/components/avatars/avatars-aa.md deleted file mode 100644 index 75d441e106060c..00000000000000 --- a/docs/src/pages/components/avatars/avatars-aa.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: crwdns89284:0crwdne89284:0 -components: crwdns106553:0crwdne106553:0 ---- - -# crwdns106121:0crwdne106121:0 - -

crwdns89290:0crwdne89290:0

- -## crwdns89292:0crwdne89292:0 - -crwdns106555:0crwdne106555:0 - -crwdns89296:0crwdne89296:0 - -## crwdns89298:0crwdne89298:0 - -crwdns106557:0crwdne106557:0 - -crwdns89302:0crwdne89302:0 - -## crwdns106559:0crwdne106559:0 - -crwdns106561:0crwdne106561:0 - -crwdns106563:0crwdne106563:0 - -## crwdns106565:0crwdne106565:0 - -crwdns106567:0crwdne106567:0 - -crwdns106569:0crwdne106569:0 - -## crwdns106571:0crwdne106571:0 - -crwdns106573:0crwdne106573:0 - -crwdns106575:0crwdne106575:0 - -## crwdns106577:0crwdne106577:0 - -crwdns106579:0crwdne106579:0 - -- crwdns106545:0crwdne106545:0 -- crwdns109189:0crwdne109189:0 -- crwdns106549:0crwdne106549:0 - -crwdns106581:0crwdne106581:0 - -## crwdns106583:0crwdne106583:0 - -crwdns106585:0crwdne106585:0 - -crwdns106587:0crwdne106587:0 - -## crwdns106589:0crwdne106589:0 - -crwdns106591:0crwdne106591:0 \ No newline at end of file diff --git a/docs/src/pages/components/avatars/avatars-de.md b/docs/src/pages/components/avatars/avatars-de.md index 3b27542b5946b6..5add1ce8753c53 100644 --- a/docs/src/pages/components/avatars/avatars-de.md +++ b/docs/src/pages/components/avatars/avatars-de.md @@ -1,5 +1,5 @@ --- -title: Avatar React-Komponente +title: React Avatar Komponente components: Avatar, AvatarGroup, Badge --- @@ -7,13 +7,13 @@ components: Avatar, AvatarGroup, Badge

Avatare sind im gesamten Material Design zu finden und werden in allen Bereichen von Tabellen bis hin zu Dialogmenüs verwendet.

-## Bild Avatare +## Bild-Avatare Bild-Avatare können erstellt werden, indem reguläre `img` props `src` oder `srcSet` an die Komponente übergeben werden. {{"demo": "pages/components/avatars/ImageAvatars.js"}} -## Buchstaben Avatare +## Buchstaben-Avatare Avatars containing simple characters can be created by passing a string as `children`. @@ -21,13 +21,13 @@ Avatars containing simple characters can be created by passing a string as `chil ## Größen -You can change the size of the avatar with the `height` and `width` CSS properties. +Die Größe des Avatars kann mit den `height`- und `width`-CSS-Eigenschaften verändert werden. {{"demo": "pages/components/avatars/SizeAvatars.js"}} -## Icon Avatare +## Icon-Avatare -Icon Avatare werden erstellt, indem man ein Icon als `children` übergibt. +Icon-Avatare werden erstellt, indem man ein Icon als `children` übergibt. {{"demo": "pages/components/avatars/IconAvatars.js"}} diff --git a/docs/src/pages/components/avatars/avatars-es.md b/docs/src/pages/components/avatars/avatars-es.md index ac02f1703499ce..473ff252a0ade5 100644 --- a/docs/src/pages/components/avatars/avatars-es.md +++ b/docs/src/pages/components/avatars/avatars-es.md @@ -1,58 +1,58 @@ --- -title: Componente Avatar de React +title: React Avatar component components: Avatar, AvatarGroup, Badge --- # Avatar -

Los avatares se pueden encontrar a lo largo de todo Material Design con usos que van desde tablas hasta diálogos de menús.

+

Los avatares se pueden encontrar a lo largo de todo Material Design con usos en todo desde tablas hasta diálogos de menús.

## Avatares de Imágenes -Image avatars can be created by passing standard `img` props `src` or `srcSet` to the component. +Las imágenes de avatar pueden ser creadas pasándoles las propiedades estándar de `img`, `src` o `srcSet` al componente. {{"demo": "pages/components/avatars/ImageAvatars.js"}} ## Avatares de Letras -Avatars containing simple characters can be created by passing a string as `children`. +Los avatares que contengan carácteres simples pueden ser creados pasándoles un string como `children`. {{"demo": "pages/components/avatars/LetterAvatars.js"}} ## Tamaños -You can change the size of the avatar with the `height` and `width` CSS properties. +Puedes cambiar el tamaño del avatar con las propiedades de CSS `height` y `width`. {{"demo": "pages/components/avatars/SizeAvatars.js"}} -## Avatares de íconos +## Avatares de iconos Los avatares de íconos son creados pasando un ícono como `children`. {{"demo": "pages/components/avatars/IconAvatars.js"}} -## Variants +## Variantes -If you need square or rounded avatars, use the `variant` prop. +Si necesitas avatares cuadrados o redondeados, utiliza la prop `variant`. {{"demo": "pages/components/avatars/VariantAvatars.js"}} ## Fallbacks -If there is an error loading the avatar image, the component falls back to an alternative in the following order: +Si hay un error cargando la imagen del avatar, el componente recurre a una alternativa en el siguiente orden: -- the provided children -- the first letter of the `alt` text -- a generic avatar icon +- los componentes hijos proporcionados +- la primera letra del texto `alt` +- una imagen de avatar generica {{"demo": "pages/components/avatars/FallbackAvatars.js"}} ## Agrupado -`AvatarGroup` renders its children as a stack. +`AvatarGroup` renderiza sus componentes hijos como una pila. {{"demo": "pages/components/avatars/GroupAvatars.js"}} -## With badge +## Con Badge {{"demo": "pages/components/avatars/BadgeAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/avatars/avatars-fr.md b/docs/src/pages/components/avatars/avatars-fr.md index ff8141543e207c..92710c8a63701a 100644 --- a/docs/src/pages/components/avatars/avatars-fr.md +++ b/docs/src/pages/components/avatars/avatars-fr.md @@ -1,58 +1,58 @@ --- -title: Composant React Avatar +title: React Avatar component components: Avatar, AvatarGroup, Badge --- # Avatar -

Les avatars sont utilisés un peu partout dans le design material et peuvent être utilisés dans tous les domaines, des tableaux aux menus de dialogue.

+

Les avatars se trouvent tout au long material-design avec des utilisations dans tout, des tables aux menus de dialogue.

-## Avatars d'images +## Avatars de l'image -Image avatars can be created by passing standard `img` props `src` or `srcSet` to the component. +Les avatars d'image peuvent être créés en passant le standard `img` props `src` ou `srcSet` au composant. {{"demo": "pages/components/avatars/ImageAvatars.js"}} ## Lettre avatars -Avatars containing simple characters can be created by passing a string as `children`. +Les avatars contenant des caractères simples peuvent être créés en passant une chaîne en tant que `children`. {{"demo": "pages/components/avatars/LetterAvatars.js"}} ## Tailles -You can change the size of the avatar with the `height` and `width` CSS properties. +Vous pouvez modifier la taille de l'avatar avec les propriétés CSS `height` et `width`. {{"demo": "pages/components/avatars/SizeAvatars.js"}} ## Avatars d'icônes -Les avatars d'icônes sont créés en transmettant une icône à `enfant`. +Les avatars d'icônes sont créés en transmettant une icône à `children`. {{"demo": "pages/components/avatars/IconAvatars.js"}} ## Variants -If you need square or rounded avatars, use the `variant` prop. +Si vous avez besoin d'avatars carrés ou arrondis, utilisez la prop `variant`. {{"demo": "pages/components/avatars/VariantAvatars.js"}} ## Fallbacks -If there is an error loading the avatar image, the component falls back to an alternative in the following order: +S'il y a une erreur lors du chargement de l'image d'avatar, le composant retombe vers une alternative dans l'ordre suivant : -- the provided children -- the first letter of the `alt` text -- a generic avatar icon +- les children fournis +- la première lettre du texte `alt` +- une icône générique d'avatar {{"demo": "pages/components/avatars/FallbackAvatars.js"}} -## Grouped +## Groupé -`AvatarGroup` renders its children as a stack. +`L'avatarGroup` rend ses enfants comme une pile. {{"demo": "pages/components/avatars/GroupAvatars.js"}} -## With badge +## Avec badge {{"demo": "pages/components/avatars/BadgeAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/avatars/avatars-ja.md b/docs/src/pages/components/avatars/avatars-ja.md index 265feb88d06fa3..b5d1dafde78d39 100644 --- a/docs/src/pages/components/avatars/avatars-ja.md +++ b/docs/src/pages/components/avatars/avatars-ja.md @@ -1,5 +1,5 @@ --- -title: Avatar React component +title: React アバターコンポーネント components: Avatar, AvatarGroup, Badge --- @@ -7,52 +7,52 @@ components: Avatar, AvatarGroup, Badge

Avatars(アバター) は、テーブルからダイアログメニューまで、あらゆる用途に使用されています。

-## Image avatars +## Image avatars(画像アバター) -Image avatars can be created by passing standard `img` props `src` or `srcSet` to the component. +Image Avatars(画像アバター) は通常の`img` propsである、 `src` もしくは `srcSet`をコンポーネントに渡すことで作成できます。 {{"demo": "pages/components/avatars/ImageAvatars.js"}} -## Letter avatars +## Letter avatars(文字アバター) -Avatars containing simple characters can be created by passing a string as `children`. +`children`に文字列を渡すことで、シンプルな文字列を使ったアバターを作成することができます。 {{"demo": "pages/components/avatars/LetterAvatars.js"}} ## サイズ -You can change the size of the avatar with the `height` and `width` CSS properties. +アバターのサイズは、 `height` と `width` の CSS プロパティで変更できます。 {{"demo": "pages/components/avatars/SizeAvatars.js"}} -## Icon avatars +## Icon avatars (アイコンアバター) -アイコンアバターは、 `子要素`としてアイコンを渡すことによって作成されます。 +アイコンアバターは、 `children(子要素)`としてアイコンを渡すことによって作成されます。 {{"demo": "pages/components/avatars/IconAvatars.js"}} ## バリアント -If you need square or rounded avatars, use the `variant` prop. +四角形や丸いアバターを作成したい場合は、`variant` propを指定することで実現できます。 {{"demo": "pages/components/avatars/VariantAvatars.js"}} -## Fallbacks +## Fallbacks (エラー回避) -If there is an error loading the avatar image, the component falls back to an alternative in the following order: +アバター画像の読み込み時に問題が発生した場合、コンポーネントは以下の順序に沿って代替手段をとります。 -- the provided children -- the first letter of the `alt` text -- a generic avatar icon +- 指定された`children`(子要素) +- `alt`に指定された文字列の頭文字 +- 汎用アバターアイコン {{"demo": "pages/components/avatars/FallbackAvatars.js"}} ## Grouped -`AvatarGroup` renders its children as a stack. +`AvatarGroup`は与えられた子要素をスタックとしてレンダリングします。 {{"demo": "pages/components/avatars/GroupAvatars.js"}} -## With badge +## バッジをつける {{"demo": "pages/components/avatars/BadgeAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/components/avatars/avatars-pt.md b/docs/src/pages/components/avatars/avatars-pt.md index c31b4a0c88716d..4d5200c4c4f657 100644 --- a/docs/src/pages/components/avatars/avatars-pt.md +++ b/docs/src/pages/components/avatars/avatars-pt.md @@ -1,5 +1,5 @@ --- -title: Componente React para Avatares +title: Componente para Avatares components: Avatar, AvatarGroup, Badge --- diff --git a/docs/src/pages/components/avatars/avatars-ru.md b/docs/src/pages/components/avatars/avatars-ru.md index 1dfa8a51f88dbc..5560aeb68d27eb 100644 --- a/docs/src/pages/components/avatars/avatars-ru.md +++ b/docs/src/pages/components/avatars/avatars-ru.md @@ -1,5 +1,5 @@ --- -title: React-компонент Аватар +title: Компонент React Avatar components: Avatar, AvatarGroup, Badge --- @@ -37,9 +37,9 @@ components: Avatar, AvatarGroup, Badge {{"demo": "pages/components/avatars/VariantAvatars.js"}} -## Fallbacks +## Запасные варианты -If there is an error loading the avatar image, the component falls back to an alternative in the following order: +Если при загрузке изображения аватара возникает ошибка, компонент возвращается к альтернативному варианту в следующем порядке: - the provided children - the first letter of the `alt` text diff --git a/docs/src/pages/components/avatars/avatars-zh.md b/docs/src/pages/components/avatars/avatars-zh.md index 9e0fea3cab624d..7650c1deced10a 100644 --- a/docs/src/pages/components/avatars/avatars-zh.md +++ b/docs/src/pages/components/avatars/avatars-zh.md @@ -1,49 +1,49 @@ --- -title: React Avatar 头像组件 +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/avatars/avatars.md b/docs/src/pages/components/avatars/avatars.md index a62bf4b9c738db..51a1f24b1ac17b 100644 --- a/docs/src/pages/components/avatars/avatars.md +++ b/docs/src/pages/components/avatars/avatars.md @@ -1,5 +1,5 @@ --- -title: Avatar React component +title: React Avatar component components: Avatar, AvatarGroup, Badge --- diff --git a/docs/src/pages/components/backdrop/backdrop-aa.md b/docs/src/pages/components/backdrop/backdrop-aa.md deleted file mode 100644 index 74b122def8efa6..00000000000000 --- a/docs/src/pages/components/backdrop/backdrop-aa.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -title: crwdns130844:0crwdne130844:0 -components: crwdns106865:0crwdne106865:0 ---- - -# crwdns106867:0crwdne106867:0 - -

crwdns106869:0crwdne106869:0

- -crwdns130846:0crwdne130846:0 crwdns106873:0crwdne106873:0 - -crwdns106875:0crwdne106875:0 diff --git a/docs/src/pages/components/backdrop/backdrop-es.md b/docs/src/pages/components/backdrop/backdrop-es.md index 2cda4a585143ab..57fa082e9cc52d 100644 --- a/docs/src/pages/components/backdrop/backdrop-es.md +++ b/docs/src/pages/components/backdrop/backdrop-es.md @@ -1,5 +1,5 @@ --- -title: Backdrop React Component +title: Backdrop React Componente components: Backdrop --- @@ -7,6 +7,6 @@ components: Backdrop

El componente backdrop es usado para proveer énfasis en un elemento particular o en partes de este.

-The backdrop signals to the user of a state change within the application and can be used for creating loaders, dialogs and more. En su forma simple, el componente backdrop añade una capa de atenuado sobre su aplicación. +El backdrop señala al usuario de un cambio de estado dentro de una aplicación y puede ser usado para crear cargadores, diálogos y más. En su forma simple, el componente backdrop añade una capa de atenuado sobre su aplicación. {{"demo": "pages/components/backdrop/SimpleBackdrop.js"}} diff --git a/docs/src/pages/components/backdrop/backdrop-fr.md b/docs/src/pages/components/backdrop/backdrop-fr.md index 69dd23b659aca5..de3b5a22eeccf6 100644 --- a/docs/src/pages/components/backdrop/backdrop-fr.md +++ b/docs/src/pages/components/backdrop/backdrop-fr.md @@ -1,12 +1,12 @@ --- -title: Backdrop React Component +title: Composant React Backdrop components: Backdrop --- # Backdrop -

The backdrop component is used to provide emphasis on a particular element or parts of it.

+

Le composant Backdrop est utilisé pour mettre l'accent sur un ou des parties particulières de celui-ci.

-The backdrop signals to the user of a state change within the application and can be used for creating loaders, dialogs and more. In its simplest form, the backdrop component will add a dimmed layer over your application. +Le Backdrop signale à l'utilisateur d'un changement d'état dans l'application et peuvent être utilisés pour créer des chargeurs, des dialogues et plus encore. Dans sa forme la plus simple, le composant Backdrop ajoutera une couche assombrie sur votre application. {{"demo": "pages/components/backdrop/SimpleBackdrop.js"}} diff --git a/docs/src/pages/components/backdrop/backdrop-ja.md b/docs/src/pages/components/backdrop/backdrop-ja.md index 69dd23b659aca5..5db2a28fc8add5 100644 --- a/docs/src/pages/components/backdrop/backdrop-ja.md +++ b/docs/src/pages/components/backdrop/backdrop-ja.md @@ -1,12 +1,12 @@ --- -title: Backdrop React Component +title: 背景 React Component components: Backdrop --- -# Backdrop +# 背景 -

The backdrop component is used to provide emphasis on a particular element or parts of it.

+

背景コンポーネントは、特定の要素やその一部に重点を置くために使用されます。

-The backdrop signals to the user of a state change within the application and can be used for creating loaders, dialogs and more. In its simplest form, the backdrop component will add a dimmed layer over your application. +アプリケーション内での状態変化のユーザーへのバックドロップ信号と、ローダー、ダイアログなどの作成に使用できます。 最も簡単な形式では、backdrop コンポーネントはアプリケーションにdimmed レイヤーを追加します。 {{"demo": "pages/components/backdrop/SimpleBackdrop.js"}} diff --git a/docs/src/pages/components/backdrop/backdrop-zh.md b/docs/src/pages/components/backdrop/backdrop-zh.md index c8be5a28341105..89be8c4f48846a 100644 --- a/docs/src/pages/components/backdrop/backdrop-zh.md +++ b/docs/src/pages/components/backdrop/backdrop-zh.md @@ -1,12 +1,12 @@ --- -title: Backdrop React 组件 +title: React Backdrop（背景暗化）组件 components: Backdrop --- -# Backdrop 背景板 +# Backdrop 背景暗化 -

Backdrop 组件用于提供对特定元素或其部分的强调。

+

背景暗化组件用于提供针对特定元素或这个元素一部分的强调。

-Backdrop组件提醒用户应用程序内部状态的变化，也可以用来创建进度条、对话框等等。 在最简单的情况下，backdrop 组件将在您的应用程序上添加一个暗淡的图层。 +Backdrop组件提醒用户应用程序内部状态的变化，也可以用来创建进度条、对话框等等。 在最简单的情况下，背景暗化组件将在您的应用程序上添加一个暗淡的图层。 {{"demo": "pages/components/backdrop/SimpleBackdrop.js"}} diff --git a/docs/src/pages/components/badges/badges-aa.md b/docs/src/pages/components/badges/badges-aa.md deleted file mode 100644 index 75726a43d87a88..00000000000000 --- a/docs/src/pages/components/badges/badges-aa.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: crwdns89310:0crwdne89310:0 -components: crwdns89312:0crwdne89312:0 ---- - -# crwdns106123:0crwdne106123:0 - -

crwdns89316:0crwdne89316:0

- -## crwdns107489:0crwdne107489:0 - -crwdns89320:0crwdne89320:0 crwdns89322:0crwdne89322:0 - -crwdns89324:0crwdne89324:0 - -## crwdns100708:0crwdne100708:0 - -crwdns106593:0crwdne106593:0 crwdns100712:0crwdne100712:0 - -crwdns100714:0crwdne100714:0 - -## crwdns100716:0crwdne100716:0 - -crwdns100718:0crwdne100718:0 - -crwdns107491:0crwdne107491:0 - -crwdns107493:0crwdne107493:0 crwdns107495:0crwdne107495:0 - -crwdns107497:0crwdne107497:0 - -## crwdns107499:0crwdne107499:0 - -crwdns107501:0crwdne107501:0 - -crwdns107503:0crwdne107503:0 - -## crwdns107505:0crwdne107505:0 - -crwdns107507:0crwdne107507:0 crwdns107509:0crwdne107509:0 - -crwdns107511:0crwdne107511:0 - -## crwdns100740:0crwdne100740:0 - -crwdns107513:0crwdne107513:0 - -crwdns107515:0crwdne107515:0 - -## crwdns100746:0crwdne100746:0 - -crwdns107517:0crwdne107517:0 - -crwdns130848:0crwdne130848:0 \ No newline at end of file diff --git a/docs/src/pages/components/badges/badges-de.md b/docs/src/pages/components/badges/badges-de.md index 97d1819cd9e406..8cfef89b3b6e3e 100644 --- a/docs/src/pages/components/badges/badges-de.md +++ b/docs/src/pages/components/badges/badges-de.md @@ -1,5 +1,5 @@ --- -title: Badge React-Komponente +title: React Badge Komponente components: Badge --- diff --git a/docs/src/pages/components/badges/badges-es.md b/docs/src/pages/components/badges/badges-es.md index fc17fe7628253e..c93f446251f640 100644 --- a/docs/src/pages/components/badges/badges-es.md +++ b/docs/src/pages/components/badges/badges-es.md @@ -1,5 +1,5 @@ --- -title: Componente Badge +title: React Badge component components: Badge --- @@ -11,13 +11,13 @@ components: Badge Ejemplos de insignias que contienen texto, utilizando colores primarios y secundarios. La insignia se aplica a sus hijos. -{{"demo": "pages/demos/badges/SimpleBadge.js"}} +{{"demo": "pages/components/badges/SimpleBadge.js"}} ## Placas personalizadas -Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). +La siguiente tabla muestra un ejemplo de personalización del componente. Puedes aprender más sobre esto en la [sección Personalizando Componentes de la documentación](/customization/components/). -{{"demo": "pages/demos/badges/CustomizedBadge.js"}} +{{"demo": "pages/components/badges/CustomizedBadges.js"}} ## Visibilidad del Badge @@ -25,30 +25,30 @@ La visibilidad del badge puede ser controlada usando la propiedad `invisible`. {{"demo": "pages/components/badges/BadgeVisibility.js"}} -El badge automáticamente se oculta con `badgeContent` igual a cero. Usted puede sobrescribir esto con la propiedad `showZero`. +El badge se oculta automáticamente con `badgeContent` igual a cero. Puede anular esto con la propiedad `showZero`. {{"demo": "pages/components/badges/ShowZeroBadge.js"}} ## Valor máximo -Usted puede usar la propiedad `max` para establecer el valor máximo que puede contener el Badge. +Puedes usar la propiedad `max` para limitar el valor máximo del contenido del badge. {{"demo": "pages/components/badges/BadgeMax.js"}} ## Badge de punto -La propiedad `dot` cambia el badge a un pequeño punto. Esto puede ser usado para mostrar una notificación sin mostrar el valor. +La propiedad `dot` cambia el badge a un pequeño punto. Esto se puede usar como una notificación de que algo ha cambiado sin contar. {{"demo": "pages/components/badges/DotBadge.js"}} ## Superposición del Badge -Usted puede usar la propiedad `overlap` para establecer el Badge relativo a la esquina del elemento envuelto. +Puede usar la propiedad `overlap` para colocar la insignia relativa a la esquina del elemento envuelto. {{"demo": "pages/components/badges/BadgeOverlap.js"}} ## Alineación del Badge -Usted puede usar la propiedad `anchorOrigin` para mover el Badge a cualquier esquina del elemento envuelto. +Puede usar la propiedad `overlap` para colocar la insignia relativa a la esquina del elemento envuelto. {{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}} \ No newline at end of file diff --git a/docs/src/pages/components/badges/badges-fr.md b/docs/src/pages/components/badges/badges-fr.md index c68ecc5394601c..548930168e4cba 100644 --- a/docs/src/pages/components/badges/badges-fr.md +++ b/docs/src/pages/components/badges/badges-fr.md @@ -1,54 +1,54 @@ --- -title: Composant React Badge +title: React Badge component components: Badge --- # Badge -

Emblema gera um pequeno emblema para o canto superior direito do seu filho(s).

+

Le badge génère un petit badge en haut à droite de son enfant.

-## Basic badges +## Badges Basique Exemples de badges contenant du texte, utilisant les couleurs primaires et secondaires. Le badge est appliqué aux enfants. {{"demo": "pages/components/badges/SimpleBadge.js"}} -## Badges custom +## Badges personnalisés -Voici un exemple de personnalisation du composant. You can learn more about this in the [overrides documentation page](/customization/components/). +Voici un exemple de personnalisation du composant. Vous pouvez en apprendre plus à ce sujet dans la [page de documentation](/customization/components/). {{"demo": "pages/components/badges/CustomizedBadges.js"}} ## Visibilité du badge -La visibilité des badges peut être contrôlée à l'aide de la propriété `invisible`. +La visibilité des badges peut être contrôlée en utilisant le prop `invisible`. {{"demo": "pages/components/badges/BadgeVisibility.js"}} -Le badge se cache automatiquement quand badgeContent est nul. Vous pouvez la remplacer avec la propriété `showZero`. +Le badge se cache automatiquement quand badgeContent est null. Vous pouvez la remplacer avec le prop `showZero`. {{"demo": "pages/components/badges/ShowZeroBadge.js"}} -## Maximum value +## Valeur maximale -Vous pouvez utiliser la propriété `max` pour limiter la valeur du contenu du badge. +Vous pouvez utiliser le prop `max` pour plafonner la valeur du contenu du badge. {{"demo": "pages/components/badges/BadgeMax.js"}} -## Dot badge +## Badge à points -La propriété `dot` change un badge en petit point. Il peut être utilisé comme une notification indiquant que quelque chose a changé sans donner un nombre. +La propriété `point` change un badge en un petit point. Cela peut être utilisé comme une notification que quelque chose a changé sans donner de compte. {{"demo": "pages/components/badges/DotBadge.js"}} -## Badge overlap +## Chevauchement des badges -You can use the `overlap` property to place the badge relative to the corner of the wrapped element. +Vous pouvez utiliser le prop `overlap` pour placer le badge relatif au coin de l'élément enveloppé. {{"demo": "pages/components/badges/BadgeOverlap.js"}} -## Badge alignment +## Alignement du badge -You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element. +Vous pouvez utiliser le prop `anchorOrigin` pour déplacer le badge dans n'importe quel coin de l'élément enveloppé. {{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}} \ No newline at end of file diff --git a/docs/src/pages/components/badges/badges-ja.md b/docs/src/pages/components/badges/badges-ja.md index 3b288e11afc30c..ccb9f1bd63b426 100644 --- a/docs/src/pages/components/badges/badges-ja.md +++ b/docs/src/pages/components/badges/badges-ja.md @@ -1,13 +1,13 @@ --- -title: バッジReactコンポーネント +title: React バッジコンポーネント components: Badge --- -# Badge (バッジ) +# Badge バッジ

バッジは、その子供の右上に小さなバッジを生成します。

-## Basic badges +## 基本的なバッジ プライマリー色とセカンダリーを使用した、テキストを含むバッジの例。 バッジが子要素に適用されます。 @@ -15,7 +15,7 @@ components: Badge ## Customized badges （カスタマイズされたバッジ） -コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドドキュメントページ](/customization/components/)ご覧ください。 +コンポーネントのカスタマイズ例を次に示します。 コンポーネントのカスタマイズ例を次に示します。 コンポーネントのカスタマイズ例を次に示します。 コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドドキュメントページ](/customization/components/)ご覧ください。 {{"demo": "pages/components/badges/CustomizedBadges.js"}} @@ -25,19 +25,19 @@ components: Badge {{"demo": "pages/components/badges/BadgeVisibility.js"}} -BadgeContentが0の場合、バッジは自動的に非表示になります。 `showZero` プロパティでこれをオーバーライドできます。 +BadgeContentが0の場合、バッジは自動的に非表示になります。 BadgeContentが0の場合、バッジは自動的に非表示になります。 `showZero` プロパティでこれをオーバーライドできます。 {{"demo": "pages/components/badges/ShowZeroBadge.js"}} -## Maximum value +## 最大値 バッジコンテンツの値に上限を設定するには、 `max` プロパティを使用します。 {{"demo": "pages/components/badges/BadgeMax.js"}} -## Dot badge +## ドットバッジ -`dot`プロパティは、バッジを小さなドットに変更します。 これは、何かが変更されたことをカウントせずに通知するために使用できます。 +`dot`プロパティは、バッジを小さなドットに変更します。 これは、何かが変更されたことをカウントせずに通知するために使用できます。 これは、何かが変更されたことをカウントせずに通知するために使用できます。 これは、何かが変更されたことをカウントせずに通知するために使用できます。 これは、何かが変更されたことをカウントせずに通知するために使用できます。 {{"demo": "pages/components/badges/DotBadge.js"}} @@ -49,6 +49,6 @@ BadgeContentが0の場合、バッジは自動的に非表示になります。 ## バッジの配置 -You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element. +`anchorOrigin` プロパティを使用して、バッジをラップされた要素の隅に移動できます。 {{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}} \ No newline at end of file diff --git a/docs/src/pages/components/badges/badges-pt.md b/docs/src/pages/components/badges/badges-pt.md index 8ddd2b6ce522b0..572b46d67ea155 100644 --- a/docs/src/pages/components/badges/badges-pt.md +++ b/docs/src/pages/components/badges/badges-pt.md @@ -1,5 +1,5 @@ --- -title: Componente React para Emblemas +title: Componente React para emblemas components: Badge --- diff --git a/docs/src/pages/components/badges/badges-ru.md b/docs/src/pages/components/badges/badges-ru.md index 48d9bc55352153..a83a4f401c53c5 100644 --- a/docs/src/pages/components/badges/badges-ru.md +++ b/docs/src/pages/components/badges/badges-ru.md @@ -1,5 +1,5 @@ --- -title: React-компонент Значок +title: Компонент React Badge components: Badge --- diff --git a/docs/src/pages/components/badges/badges-zh.md b/docs/src/pages/components/badges/badges-zh.md index c06a04fedce050..5762c9fc5b8f2f 100644 --- a/docs/src/pages/components/badges/badges-zh.md +++ b/docs/src/pages/components/badges/badges-zh.md @@ -1,11 +1,11 @@ --- -title: React Badge 徽章组件 +title: React Badge（徽章）组件 components: Badge --- # Badge 徽章 -

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

+

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

## 基本徽章 @@ -15,7 +15,7 @@ components: Badge ## 自定义徽章 -以下是自定义组件的一个示例。 您可以在[重写文档页面](/customization/components/)中了解更多有关此内容的信息。 +以下是自定义组件的一个示例。 您可以在 [重写文档页面](/customization/components/) 中了解更多有关此内容的信息。 {{"demo": "pages/components/badges/CustomizedBadges.js"}} @@ -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/badges/badges.md b/docs/src/pages/components/badges/badges.md index a1716bbc3f7d96..4c1df3f9b43d0a 100644 --- a/docs/src/pages/components/badges/badges.md +++ b/docs/src/pages/components/badges/badges.md @@ -1,5 +1,5 @@ --- -title: Badge React component +title: React Badge component components: Badge --- diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation-aa.md b/docs/src/pages/components/bottom-navigation/bottom-navigation-aa.md deleted file mode 100644 index 97e616ebc65d20..00000000000000 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation-aa.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: crwdns89358:0crwdne89358:0 -components: crwdns89360:0crwdne89360:0 ---- - -# crwdns89362:0crwdne89362:0 - -

crwdns89364:0crwdne89364:0

- -crwdns89366:0crwdne89366:0 crwdns89368:0crwdne89368:0 crwdns89370:0crwdne89370:0 - -## crwdns89372:0crwdne89372:0 - -crwdns89374:0crwdne89374:0 - -crwdns105495:0crwdne105495:0 - -## crwdns89378:0crwdne89378:0 - -crwdns89380:0crwdne89380:0 - -crwdns105497:0crwdne105497:0 \ No newline at end of file diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation-fr.md b/docs/src/pages/components/bottom-navigation/bottom-navigation-fr.md index 6a59dd23513a57..52070c53900d49 100644 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation-fr.md +++ b/docs/src/pages/components/bottom-navigation/bottom-navigation-fr.md @@ -5,18 +5,18 @@ components: BottomNavigation, BottomNavigationAction # Bottom Navigation (Barre de navigation inférieure) -

Les barres de navigation inférieures permettent le mouvement entre les destinations principales dans une application.

+

Les barres de navigation inférieures permettent de se déplacer entre les destinations principales dans une application.

-[La barre de navigation inférieure](https://material.io/design/components/bottom-navigation.html) affichage de trois à cinq destinations au bas de l'écran. Chaque destination est représentée par une icône et une étiquette de texte facultative. Lorsque vous appuyez sur une icône de navigation inférieure, l'utilisateur est dirigé vers la destination de navigation de premier niveau associée à cette icône. +[Les barres de navigation du bas](https://material.io/design/components/bottom-navigation.html) affichent trois à cinq destinations au bas d'un écran. Chaque destination est représentée par une icône et une étiquette de texte optionnelle. Lorsqu'une icône de navigation en bas de page est enfoncée, l'utilisateur est dirigé vers la destination de navigation de niveau supérieur associée à cette icône. ## Bottom Navigation (Barre de navigation inférieure) -Lorsqu'il y a seulement **trois** actions, l'affichage d'icônes et des étiquettes de texte en permanence. +Lorsqu'il n'y a que **trois actions** , afficher à la fois les icônes et les libellés de texte en tout temps. {{"demo": "pages/components/bottom-navigation/SimpleBottomNavigation.js", "bg": true}} -## Navigation inférieure sans étiquette +## Navigation du bas sans étiquette -Si il y a **quatre** ou **cinq** actions, affichage inactif points de vue uniquement sous forme d'icônes. +S'il y a **quatre actions** ou **cinq actions** , afficher les vues inactives uniquement sous forme d'icônes. {{"demo": "pages/components/bottom-navigation/LabelBottomNavigation.js", "bg": true}} \ No newline at end of file diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation-ja.md b/docs/src/pages/components/bottom-navigation/bottom-navigation-ja.md index a9b7783e6fe1a7..962864d1a2fc86 100644 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation-ja.md +++ b/docs/src/pages/components/bottom-navigation/bottom-navigation-ja.md @@ -7,7 +7,7 @@ components: BottomNavigation, BottomNavigationAction

ボトムナビゲーションを使用すると、アプリ内の主要な目的地間を移動できます。

-[ボトムナビゲーション](https://material.io/design/components/bottom-navigation.html) バーは、画面下部に3〜5つの目的地を表示します。 各目的地は、アイコンとオプションのテキストラベルで表されます。 ボトムナビゲーションアイコンをタップすると、そのアイコンに関連付けられている最上位のナビゲーション先に移動します。 +[ボトムナビゲーション](https://material.io/design/components/bottom-navigation.html) バーは、画面下部に3〜5つの目的地を表示します。 各目的地は、アイコンとオプションのテキストラベルで表されます。 ボトムナビゲーションアイコンをタップすると、そのアイコンに関連付けられている最上位のナビゲーション先に移動します。 各目的地は、アイコンとオプションのテキストラベルで表されます。 ボトムナビゲーションアイコンをタップすると、そのアイコンに関連付けられている最上位のナビゲーション先に移動します。 ## ボトムナビゲーション diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation-zh.md b/docs/src/pages/components/bottom-navigation/bottom-navigation-zh.md index c5d931277057d7..5ba729002552d9 100644 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation-zh.md +++ b/docs/src/pages/components/bottom-navigation/bottom-navigation-zh.md @@ -1,5 +1,5 @@ --- -title: React Bottom Navigation 底部导航栏组件 +title: React Bottom Navigation（底部导航栏）组件 components: BottomNavigation, BottomNavigationAction --- diff --git a/docs/src/pages/components/box/box-aa.md b/docs/src/pages/components/box/box-aa.md deleted file mode 100644 index 6c2529c0b037fe..00000000000000 --- a/docs/src/pages/components/box/box-aa.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: crwdns89384:0crwdne89384:0 ---- - -# crwdns89386:0crwdne89386:0 - -

crwdns89388:0crwdne89388:0

- -crwdns89390:0crwdne89390:0 crwdns103434:0crwdne103434:0 - -## crwdns89394:0crwdne89394:0 - -crwdns89396:0crwdne89396:0 - -## crwdns89398:0crwdne89398:0 - -crwdns89400:0crwdne89400:0 crwdns89402:0crwdne89402:0 crwdns89404:0crwdne89404:0 - -```jsx -crwdns89406:0{1}crwdne89406:0 -``` - -crwdns89408:0crwdne89408:0 crwdns89410:0crwdne89410:0 - -crwdns89412:0crwdne89412:0 crwdns89414:0crwdne89414:0 crwdns89416:0crwdne89416:0 crwdns89418:0crwdne89418:0 crwdns89420:0crwdne89420:0 - -1. crwdns89422:0crwdne89422:0 - -crwdns89424:0crwdne89424:0 - -```jsx -crwdns89426:0crwdne89426:0 -``` - -2. crwdns89428:0crwdne89428:0 - -crwdns89430:0crwdne89430:0 crwdns89432:0crwdne89432:0 - -```jsx -crwdns89434:0{...props}crwdne89434:0 -``` - -> crwdns89436:0crwdne89436:0 crwdns89438:0crwdne89438:0 - -## crwdns89440:0crwdne89440:0 - -```jsx -crwdns89442:0crwdne89442:0 -``` - -| crwdns89444:0crwdne89444:0 | crwdns89446:0crwdne89446:0 | crwdns89448:0crwdne89448:0 | crwdns89450:0crwdne89450:0 | -|:------------------------------------------------------------------ |:--------------------------------------------------------------- |:------------------------------------------------------------ |:----------------------------------------------------- | -| crwdns89452:0crwdne89452:0 | crwdns89454:0crwdne89454:0
 | | crwdns89456:0crwdne89456:0 | -| crwdns89458:0crwdne89458:0 | crwdns89460:0crwdne89460:0 | crwdns89462:0crwdne89462:0 | crwdns89464:0crwdne89464:0 crwdns89466:0crwdne89466:0 | -| crwdns89468:0crwdne89468:0 | crwdns89470:0crwdne89470:0
 | crwdns89472:0crwdne89472:0 | crwdns89474:0crwdne89474:0 crwdns89476:0crwdne89476:0 | - - -crwdns89478:0crwdne89478:0 \ No newline at end of file diff --git a/docs/src/pages/components/box/box-de.md b/docs/src/pages/components/box/box-de.md index 637a964ea766e0..76ca0bef17b488 100644 --- a/docs/src/pages/components/box/box-de.md +++ b/docs/src/pages/components/box/box-de.md @@ -1,5 +1,5 @@ --- -title: Box React Komponente +title: React Box component --- # Box @@ -14,7 +14,7 @@ Die Style-Funktion der [Palette](/system/palette/). ## Material-UI-Komponenten überschreiben -Die Box-Komponente umschließt Ihre Komponente. Es erstellt ein neues DOM-Element, welches – sofern nicht anders im `component`-Attribut angegeben – ein `
`-Element ist. Angenommen, Sie möchten stattdessen ein `` verwenden: +Die Box-Komponente umschließt Ihre Komponente. Es erstellt ein neues DOM-Element, welches – sofern nicht anders im `component`-Attribut angegeben – ein `
`-Element ist. Angenommen, stattdessen soll ein ``-Element verwendet werden: ```jsx @@ -22,7 +22,7 @@ Die Box-Komponente umschließt Ihre Komponente. Es erstellt ein neues DOM-Elemen ``` -Dies funktioniert hervorragend, wenn die Änderungen für ein neues DOM-Element isoliert werden können. Zum Beispiel können Sie den Rand auf diese Weise ändern. +Dies funktioniert hervorragend, wenn die Änderungen für ein neues DOM-Element isoliert werden können. Zum Beispiel kann der Rand auf diese Weise verändert werden. Manchmal müssen Sie jedoch das zugrunde liegende DOM-Element als Ziel festlegen. Sie möchten beispielsweise die Textfarbe des Buttons ändern. Die Button-Komponente definiert ihre eigene Farbe. CSS-Vererbung hilft hier nicht. Um das Problem zu umgehen, haben Sie zwei Möglichkeiten: diff --git a/docs/src/pages/components/box/box-es.md b/docs/src/pages/components/box/box-es.md index 9ad53be61ce158..ed8f2a2b4ac9b9 100644 --- a/docs/src/pages/components/box/box-es.md +++ b/docs/src/pages/components/box/box-es.md @@ -1,5 +1,5 @@ --- -title: Box React component +title: React Box component --- # Cuadro diff --git a/docs/src/pages/components/box/box-fr.md b/docs/src/pages/components/box/box-fr.md index 19cf16086eba84..e1a9a1c7d25a36 100644 --- a/docs/src/pages/components/box/box-fr.md +++ b/docs/src/pages/components/box/box-fr.md @@ -1,20 +1,20 @@ --- -title: Composant React Box +title: React Box component --- # Box (Boite) -

The Box component serves as a wrapper component for most of the CSS utility needs.

+

Le composant Box sert de composant de wrapper pour la plupart des besoins de l'utilitaire CSS.

-The Box component packages [all the style functions](/system/basics/#all-inclusive) that are exposed in `@material-ui/system`. It's created using the [`styled()`](/styles/api/#styled-style-function-component) function of `@material-ui/core/styles`. +Le composant Box contiens [toutes les fonctions de style](/system/basics/#all-inclusive) qui sont exposées dans `@material-ui/system`. Il est créé en utilisant la fonction [`styled()`](/styles/api/#styled-style-function-component) de `@material-ui/core/styles`. ## Exemple -[The palette](/system/palette/) style function. +[La palette](/system/palette/) de style fonction. -## Overriding Material-UI components +## Remplacer les composants Material-UI -The Box component wraps your component. It creates a new DOM element, a `
` by default that can be changed with the `component` property. Let's say you want to use a `` instead: +Le composant Box enveloppe votre composant. Il crée un nouvel élément DOM, un élément `
` par défaut qui peut être modifié avec la propriété du composant ``. Disons que vous voulez utiliser un `` à la place : ```jsx @@ -22,13 +22,13 @@ The Box component wraps your component. It creates a new DOM element, a `
` ``` -This works great when the changes can be isolated to a new DOM element. Par exemple, vous pouvez modifier la marge de cette façon. +Cela fonctionne très bien quand les changements peuvent être isolés dans un nouvel élément DOM. Par exemple, vous pouvez changer la marge de cette façon. -However, sometimes you have to target the underlying DOM element. For instance, you want to change the text color of the button. The Button component defines its own color. CSS inheritance doesn't help. To workaround the problem, you have two options: +Cependant, vous devez parfois cibler l'élément DOM sous-jacent. Par exemple, vous voulez changer la couleur du texte du bouton. Le composant Bouton définit sa propre couleur. L'héritage CSS n'aide pas. Pour contourner le problème, vous avez deux options : -1. Use [`React.cloneElement()`](https://reactjs.org/docs/react-api.html#cloneelement) +1. Utilisez [`React.cloneElement()`](https://reactjs.org/docs/react-api.html#cloneelement) -The Box component has a `clone` property to enable the usage of the clone element method of React. +La composante Box a une propriété `cloner` pour activer l'utilisation de l'élément de clone méthode de React. ```jsx @@ -36,9 +36,9 @@ The Box component has a `clone` property to enable the usage of the clone elemen ``` -2. Use render props +2. Utiliser les props de rendu -The Box children accepts a render props function. You can pull out the `className`. +Les enfants de la boîte acceptent une fonction de rendu des props. Vous pouvez retirer le `className`. ```jsx @@ -46,7 +46,7 @@ The Box children accepts a render props function. You can pull out the `classNam ``` -> ⚠️ The CSS specificity relies on the import order. If you want the guarantee that the wrapped component's style will be overridden, you need to import the Box last. +> ⚠ La spécificité CSS dépend de l'ordre d'importation. Si vous voulez la garantie que le style du composant enveloppé sera surchargé, vous devez importer le Box en dernier. ## API @@ -54,11 +54,11 @@ The Box children accepts a render props function. You can pull out the `classNam import Box from '@material-ui/core/Box'; ``` -| Name | Type | Default | Description | -|:------------------------------------------------------- |:----------------------------------------------------------------------------------------------------------------- |:--------------------------------------- |:----------------------------------------------------------------------------------------------------- | -| children * | union: node |
 func
 | | Box render function or node. | -| clone | bool | false | If `true`, the box will recycle its children DOM element. It's using `React.cloneElement` internally. | -| component | union: string |
 func |
 object
 | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | +| Nom | Type | Défaut | Description | +|:------------------------------------------------------- |:----------------------------------------------------------------------------------------------------------------- |:--------------------------------------- |:---------------------------------------------------------------------------------------------------------------------- | +| children * | union: node |
 func
 | | Fonction de rendu ou noeud de la boîte. | +| clone | bool | false | Si `true`, la boîte recycle son élément DOM enfant. Il utilise `React.cloneElement` en interne. | +| component | union: string |
 func |
 object
 | 'div' | Le composant utilisé pour le noeud racine. Soit une chaîne de caractères pour utiliser un élément DOM ou un composant. | -Any other properties supplied will be used by [the style functions](/system/basics/#all-inclusive) or spread to the root element. \ No newline at end of file +Toute autre propriété fournie sera utilisée par [les fonctions de style](/system/basics/#all-inclusive) ou étendue à l'élément racine. \ No newline at end of file diff --git a/docs/src/pages/components/box/box-ja.md b/docs/src/pages/components/box/box-ja.md index 4f73bcffb9caac..8bdb2c41b89e8d 100644 --- a/docs/src/pages/components/box/box-ja.md +++ b/docs/src/pages/components/box/box-ja.md @@ -1,12 +1,12 @@ --- -title: Box Reactコンポーネント +title: React Box component --- # Box

Boxコンポーネントは、CSSユーティリティーのほとんどのニーズに対応するラッパーコンポーネントとして機能します

-Boxコンポーネントは、`@material-ui/system`で公開される[すべてのスタイル関数](/system/basics/#all-inclusive) をパッケージ化します。 It's created using the [`styled()`](/styles/api/#styled-style-function-component) function of `@material-ui/core/styles`. +Boxコンポーネントは、`@material-ui/system`で公開される[すべてのスタイル関数](/system/basics/#all-inclusive) をパッケージ化します。 It's created using the [`styled()`](/styles/api/#styled-style-function-component) function of `@material-ui/core/styles`. It's created using the [`styled()`](/styles/api/#styled-style-function-component) function of `@material-ui/core/styles`. ## 例 @@ -14,7 +14,7 @@ Boxコンポーネントは、`@material-ui/system`で公開される[すべて ## Material-UI componentsのオーバーライド -The Box componentは、コンポーネントをラップします。 新しいDOM要素を作成します。この要素はデフォルトで`
`であり、`component` プロパティを使用して変更できます。 代わりに `` を使用すると +The Box componentは、コンポーネントをラップします。 The Box componentは、コンポーネントをラップします。 The Box componentは、コンポーネントをラップします。 新しいDOM要素を作成します。この要素はデフォルトで`
`であり、`component` プロパティを使用して変更できます。 代わりに `` を使用すると 代わりに `` を使用すると 代わりに `` を使用すると ```jsx @@ -22,7 +22,7 @@ The Box componentは、コンポーネントをラップします。 新しいDO ``` -これは、新しいDOM要素に分離する変更の場合に非常に有効です。 たとえば、この方法で余白を変更できます。 +これは、新しいDOM要素に分離する変更の場合に非常に有効です。 たとえば、この方法で余白を変更できます。 たとえば、この方法で余白を変更できます。 たとえば、この方法で余白を変更できます。 たとえば、この方法で余白を変更できます。 ただし、場合によっては基礎となるDOM要素をターゲットにする必要があります。 たとえば、ボタンのテキストカラーを変更するとします。 Buttonコンポーネントは、独自のカラーを定義します。 CSS継承は役に立ちません。 この問題を回避するには、次の2つの方法があります。 diff --git a/docs/src/pages/components/box/box-ru.md b/docs/src/pages/components/box/box-ru.md index b06ae2351ea442..30e4c62cdadf23 100644 --- a/docs/src/pages/components/box/box-ru.md +++ b/docs/src/pages/components/box/box-ru.md @@ -1,5 +1,5 @@ --- -title: React-компонент Box +title: Компонент React Box --- # Box diff --git a/docs/src/pages/components/box/box-zh.md b/docs/src/pages/components/box/box-zh.md index 4e3a519c0d9a2f..fa13e7a5fd532d 100644 --- a/docs/src/pages/components/box/box-zh.md +++ b/docs/src/pages/components/box/box-zh.md @@ -1,5 +1,5 @@ --- -title: React Box分组组件 +title: React Box（分组）组件 --- # Box 分组 @@ -46,7 +46,7 @@ Box 组件有一个 `clone` 的属性，通过它您可以使用 React 克隆元 ``` -> ⚠️CSS 的特异性依赖于导入的顺序。 如果您希望确保覆写包装组件的样式，则需要在最后才导入 Box。 +> ⚠️CSS 的优先级依赖于导入的顺序。 如果您希望确保覆写包装组件的样式，则需要在最后才导入 Box。 ## API diff --git a/docs/src/pages/components/box/box.md b/docs/src/pages/components/box/box.md index a2f92061ea4bd8..64366a4c6a527a 100644 --- a/docs/src/pages/components/box/box.md +++ b/docs/src/pages/components/box/box.md @@ -1,5 +1,5 @@ --- -title: Box React component +title: React Box component --- # Box diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-aa.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-aa.md deleted file mode 100644 index 9af55aad2ac2e5..00000000000000 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-aa.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: crwdns89480:0crwdne89480:0 -components: crwdns89482:0crwdne89482:0 ---- - -# crwdns89484:0crwdne89484:0 - -

crwdns89486:0crwdne89486:0

- -## crwdns89488:0crwdne89488:0 - -crwdns89490:0crwdne89490:0 - -## crwdns105499:0crwdne105499:0 - -crwdns105501:0crwdne105501:0 - -crwdns105503:0crwdne105503:0 - -## crwdns105505:0crwdne105505:0 - -crwdns105507:0crwdne105507:0 - -crwdns105509:0crwdne105509:0 - -## crwdns105511:0crwdne105511:0 - -crwdns105513:0crwdne105513:0 - -## crwdns105515:0crwdne105515:0 - -crwdns105517:0crwdne105517:0 - -## crwdns105519:0crwdne105519:0 - -crwdns105521:0crwdne105521:0 crwdns105523:0crwdne105523:0 - -crwdns105525:0crwdne105525:0 - -## crwdns105527:0crwdne105527:0 - -crwdns105529:0crwdne105529:0 - -## crwdns105531:0crwdne105531:0 - -crwdns105533:0crwdne105533:0 - -crwdns105535:0crwdne105535:0 - -crwdns105537:0crwdne105537:0 - -- crwdns89520:0crwdne89520:0 -- crwdns89522:0crwdne89522:0 -- crwdns89524:0crwdne89524:0 \ No newline at end of file diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-de.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-de.md index 92facd4ac74216..7516f82b7898ff 100644 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-de.md +++ b/docs/src/pages/components/breadcrumbs/breadcrumbs-de.md @@ -1,5 +1,5 @@ --- -title: Breadcrumbs React-Komponente +title: React Breadcrumbs component components: Breadcrumbs, Link, Typography --- @@ -19,7 +19,7 @@ Keep the last breadcrumb interactive. ## Benutzerdefiniertes Trennzeichen -In den folgenden Beispielen werden zwei textbasierte Trennzeichen und ein SVG Icon verwendet. +In den folgenden Beispielen werden zwei textbasierte Trennzeichen und ein SVG-Icon verwendet. {{"demo": "pages/components/breadcrumbs/CustomSeparator.js"}} diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-es.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-es.md index 5faa8fef4fd061..1f24ba168cb294 100644 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-es.md +++ b/docs/src/pages/components/breadcrumbs/breadcrumbs-es.md @@ -1,5 +1,5 @@ --- -title: Componente React Migas de pan +title: React Breadcrumbs component components: Breadcrumbs, Link, Typography --- @@ -11,9 +11,9 @@ components: Breadcrumbs, Link, Typography {{"demo": "pages/components/breadcrumbs/SimpleBreadcrumbs.js"}} -## Active last breadcrumb +## Activa las últimas migas de pan -Keep the last breadcrumb interactive. +Mantenga las últimas migas de pan interactivas. {{"demo": "pages/components/breadcrumbs/ActiveLastBreadcrumb.js"}} @@ -33,7 +33,7 @@ En los siguientes ejemplos, estamos usando dos cadenas como separadores, y un í ## Migas de pan personalizadas -Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). +He aquí un ejemplo de personalización del componente. You can learn more about this in the [overrides documentation page](/customization/components/). {{"demo": "pages/components/breadcrumbs/CustomizedBreadcrumbs.js"}} diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-fr.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-fr.md index 4233a924a56eda..e86d9859f68ac8 100644 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-fr.md +++ b/docs/src/pages/components/breadcrumbs/breadcrumbs-fr.md @@ -1,5 +1,5 @@ --- -title: Composant React Fil d'Ariane +title: React Breadcrumbs component components: Breadcrumbs, Link, Typography --- @@ -11,9 +11,9 @@ components: Breadcrumbs, Link, Typography {{"demo": "pages/components/breadcrumbs/SimpleBreadcrumbs.js"}} -## Active last breadcrumb +## Dernier fil d'Ariane actif -Keep the last breadcrumb interactive. +Garder le dernier fil d'ariane interactif. {{"demo": "pages/components/breadcrumbs/ActiveLastBreadcrumb.js"}} diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-ja.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-ja.md index 0a4747d08fb214..cd596bdf634136 100644 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-ja.md +++ b/docs/src/pages/components/breadcrumbs/breadcrumbs-ja.md @@ -1,5 +1,5 @@ --- -title: Breadcrumbs Reactコンポーネント +title: React Breadcrumbs component components: Breadcrumbs, Link, Typography --- @@ -33,7 +33,7 @@ Keep the last breadcrumb interactive. ## カスタマイズされた breadcrumbs -コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。 +コンポーネントのカスタマイズ例を次に示します。 コンポーネントのカスタマイズ例を次に示します。 コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。 {{"demo": "pages/components/breadcrumbs/CustomizedBreadcrumbs.js"}} diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-ru.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-ru.md index 5ecb01fb23b653..112eedb4c5505d 100644 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-ru.md +++ b/docs/src/pages/components/breadcrumbs/breadcrumbs-ru.md @@ -1,5 +1,5 @@ --- -title: Breadcrumbs +title: Компонент React Breadcrumbs components: Breadcrumbs, Link, Typography --- diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md index 1f6d04e3aabd74..4f25c4404007b5 100644 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md +++ b/docs/src/pages/components/breadcrumbs/breadcrumbs-zh.md @@ -1,5 +1,5 @@ --- -title: React Breadcrumbs 面包屑导航组件 +title: React Breadcrumbs（面包屑导航）组件 components: Breadcrumbs, Link, Typography --- @@ -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"}} @@ -33,7 +33,7 @@ components: Breadcrumbs, Link, Typography ## 自定义的面包屑导航 -以下是自定义组件的一个示例。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。 +以下是自定义组件的一个示例。 您可以在 [重写文档页](/customization/components/) 中了解有关此内容的更多信息。 {{"demo": "pages/components/breadcrumbs/CustomizedBreadcrumbs.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/breadcrumbs/breadcrumbs.md b/docs/src/pages/components/breadcrumbs/breadcrumbs.md index 2e0d4762a0aebb..288d750546a694 100644 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs.md +++ b/docs/src/pages/components/breadcrumbs/breadcrumbs.md @@ -1,5 +1,5 @@ --- -title: Breadcrumbs React component +title: React Breadcrumbs component components: Breadcrumbs, Link, Typography --- diff --git a/docs/src/pages/components/button-group/button-group-aa.md b/docs/src/pages/components/button-group/button-group-aa.md deleted file mode 100644 index 0e2e707d3f94db..00000000000000 --- a/docs/src/pages/components/button-group/button-group-aa.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -title: crwdns108145:0crwdne108145:0 -components: crwdns108147:0crwdne108147:0 ---- - -# crwdns108149:0crwdne108149:0 - -

crwdns108151:0crwdne108151:0

- -## crwdns108153:0crwdne108153:0 - -crwdns108155:0crwdne108155:0 - -## crwdns131758:0crwdne131758:0 - -crwdns108159:0crwdne108159:0 - -## crwdns131760:0crwdne131760:0 - -crwdns108163:0crwdne108163:0 - -## crwdns131762:0crwdne131762:0 - -crwdns131764:0crwdne131764:0 crwdns108169:0crwdne108169:0 - -crwdns108171:0crwdne108171:0 - -## crwdns131766:0crwdne131766:0 - -crwdns131768:0crwdne131768:0 - -crwdns131770:0crwdne131770:0 diff --git a/docs/src/pages/components/button-group/button-group-de.md b/docs/src/pages/components/button-group/button-group-de.md index 6e7ba1f689e929..5543bded4951f3 100644 --- a/docs/src/pages/components/button-group/button-group-de.md +++ b/docs/src/pages/components/button-group/button-group-de.md @@ -1,21 +1,21 @@ --- -title: ButtonGroup React component +title: React ButtonGroup component components: Button, ButtonGroup --- # Button group -

The ButtonGroup component can be used to group related buttons.

+

Die ButtonGroup-Komponente kann verwendet werden, um zueinandergehörende Schaltflächen zu gruppieren.

## Basic button group {{"demo": "pages/components/button-group/BasicButtonGroup.js"}} -## Sizes and colors +## Größen und Farben {{"demo": "pages/components/button-group/GroupSizesColors.js"}} -## Vertical group +## Vertikale Gruppe {{"demo": "pages/components/button-group/GroupOrientation.js"}} @@ -27,6 +27,6 @@ components: Button, ButtonGroup ## Disabled elevation -You can remove the elevation with the `disableElevation` prop. +Die Erhöhung kann mit der `disableElevation`-Prop deaktiviert werden. {{"demo": "pages/components/button-group/DisableElevation.js"}} diff --git a/docs/src/pages/components/button-group/button-group-es.md b/docs/src/pages/components/button-group/button-group-es.md index 65ded4e37f3a45..c5a09c00d29a5a 100644 --- a/docs/src/pages/components/button-group/button-group-es.md +++ b/docs/src/pages/components/button-group/button-group-es.md @@ -1,5 +1,5 @@ --- -title: Componente React ButtonGroup +title: React ButtonGroup component components: Button, ButtonGroup --- @@ -21,7 +21,7 @@ components: Button, ButtonGroup ## Botón dividido -`ButtonGroup` también puede ser empleado para crear un botón dividido. El menú desplegable puede cambiar la acción del botón (como en este ejemplo), o ser utilizado para disparar inmediatamente una acción relacionada. +`ButtonGroup` también puede ser empleado para crear un botón dividido. El menú desplegable puede cambiar la acción del botón (como en este ejemplo), o ser utilizado para ejecutar inmediatamente una acción relacionada. {{"demo": "pages/components/button-group/SplitButton.js"}} diff --git a/docs/src/pages/components/button-group/button-group-fr.md b/docs/src/pages/components/button-group/button-group-fr.md index 00fe3e271cad3e..554e86fbe5eee1 100644 --- a/docs/src/pages/components/button-group/button-group-fr.md +++ b/docs/src/pages/components/button-group/button-group-fr.md @@ -1,32 +1,32 @@ --- -title: ButtonGroup React component +title: React ButtonGroup component components: Button, ButtonGroup --- -# Button group +# Groupe de boutons -

The ButtonGroup component can be used to group related buttons.

+

Le composant ButtonGroup peut être utilisé pour regrouper les boutons associés.

-## Basic button group +## Groupe de boutons de base {{"demo": "pages/components/button-group/BasicButtonGroup.js"}} -## Sizes and colors +## Tailles et couleurs {{"demo": "pages/components/button-group/GroupSizesColors.js"}} -## Vertical group +## Groupe vertical {{"demo": "pages/components/button-group/GroupOrientation.js"}} -## Split button +## Bouton Split -`ButtonGroup` can also be used to create a split button. The dropdown can change the button action (as in this example), or be used to immediately trigger a related action. +`ButtonGroup` peut également être utilisé pour créer un bouton de séparation. La liste déroulante peut modifier l'action du bouton (comme dans cet exemple), ou être utilisée pour déclencher immédiatement une action connexe. {{"demo": "pages/components/button-group/SplitButton.js"}} -## Disabled elevation +## Désactivé élévation -You can remove the elevation with the `disableElevation` prop. +Vous pouvez supprimer l'élévation avec la propriété `disableElevation`. {{"demo": "pages/components/button-group/DisableElevation.js"}} diff --git a/docs/src/pages/components/button-group/button-group-ja.md b/docs/src/pages/components/button-group/button-group-ja.md index de8cddcac3d2e8..a8c773f5fa40be 100644 --- a/docs/src/pages/components/button-group/button-group-ja.md +++ b/docs/src/pages/components/button-group/button-group-ja.md @@ -1,32 +1,32 @@ --- -title: ButtonGroup React component +title: React ButtonGroup component components: Button, ButtonGroup --- # Button group -

The ButtonGroup component can be used to group related buttons.

+

ButtonGroupコンポーネントは、関連するボタンをグループ化するために使用することができます。

-## Basic button group +## 基本的なbutton group {{"demo": "pages/components/button-group/BasicButtonGroup.js"}} -## Sizes and colors +## サイズと色 {{"demo": "pages/components/button-group/GroupSizesColors.js"}} -## Vertical group +## 縦のグループ {{"demo": "pages/components/button-group/GroupOrientation.js"}} ## Split button -`ButtonGroup` can also be used to create a split button. この例のようにドロップダウンでボタンの動作を変更することも、関連する動作をすぐに起動するために使用することもできます。 +`ButtonGroup` で分割したボタンを作成することも可能です。 この例のようにドロップダウンでボタンの動作を変更することも、関連する動作をすぐに起動するために使用することもできます。 {{"demo": "pages/components/button-group/SplitButton.js"}} -## Disabled elevation +## 高さを無効化する -You can remove the elevation with the `disableElevation` prop. +`disableElevation`でシャドウを取り除けます。 {{"demo": "pages/components/button-group/DisableElevation.js"}} diff --git a/docs/src/pages/components/button-group/button-group-pt.md b/docs/src/pages/components/button-group/button-group-pt.md index 20784db299d410..61e4505c54849e 100644 --- a/docs/src/pages/components/button-group/button-group-pt.md +++ b/docs/src/pages/components/button-group/button-group-pt.md @@ -1,5 +1,5 @@ --- -title: Componente React para grupo de botões +title: Componente React para Grupo de botões components: Button, ButtonGroup --- diff --git a/docs/src/pages/components/button-group/button-group-ru.md b/docs/src/pages/components/button-group/button-group-ru.md index 024fd8f763dc71..cdd62ad9d68535 100644 --- a/docs/src/pages/components/button-group/button-group-ru.md +++ b/docs/src/pages/components/button-group/button-group-ru.md @@ -1,5 +1,5 @@ --- -title: React-компонент ButtonGroup +title: Компонент React ButtonGroup components: Button, ButtonGroup --- 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..85eed55c8c9e75 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/button-group/button-group.md b/docs/src/pages/components/button-group/button-group.md index 00fe3e271cad3e..b4c41cb03a9e3c 100644 --- a/docs/src/pages/components/button-group/button-group.md +++ b/docs/src/pages/components/button-group/button-group.md @@ -1,5 +1,5 @@ --- -title: ButtonGroup React component +title: React ButtonGroup component components: Button, ButtonGroup --- diff --git a/docs/src/pages/components/buttons/buttons-aa.md b/docs/src/pages/components/buttons/buttons-aa.md deleted file mode 100644 index 132e9618819733..00000000000000 --- a/docs/src/pages/components/buttons/buttons-aa.md +++ /dev/null @@ -1,126 +0,0 @@ ---- -title: crwdns89530:0crwdne89530:0 -components: crwdns108211:0crwdne108211:0 ---- - -# crwdns106125:0crwdne106125:0 - -

crwdns89536:0crwdne89536:0

- -crwdns89538:0crwdne89538:0 crwdns89540:0crwdne89540:0 - -- crwdns89542:0crwdne89542:0 -- crwdns89544:0crwdne89544:0 -- crwdns89546:0crwdne89546:0 -- crwdns89548:0crwdne89548:0 -- crwdns89550:0crwdne89550:0 - -## crwdns89552:0crwdne89552:0 - -crwdns89554:0crwdne89554:0 crwdns89556:0crwdne89556:0 - -crwdns108287:0crwdne108287:0 - -crwdns108289:0crwdne108289:0 - -crwdns108291:0crwdne108291:0 - -## crwdns89562:0crwdne89562:0 - -crwdns108293:0crwdne108293:0 - -- crwdns89566:0crwdne89566:0 -- crwdns89568:0crwdne89568:0 - -crwdns108295:0crwdne108295:0 - -crwdns108297:0crwdne108297:0 - -## crwdns89574:0crwdne89574:0 - -crwdns108299:0crwdne108299:0 crwdns108301:0crwdne108301:0 - -crwdns108303:0crwdne108303:0 - -crwdns108305:0crwdne108305:0 - -## crwdns132908:0crwdne132908:0 - -crwdns132910:0crwdne132910:0 - -```jsx -crwdns132912:0crwdne132912:0 -``` - -crwdns132914:0crwdne132914:0 - -## crwdns132916:0crwdne132916:0 - -crwdns132918:0crwdne132918:0 - -## crwdns132920:0crwdne132920:0 - -crwdns132922:0crwdne132922:0 crwdns132924:0crwdne132924:0 - -crwdns132926:0crwdne132926:0 - -## crwdns132928:0crwdne132928:0 - -crwdns132930:0crwdne132930:0 crwdns132932:0crwdne132932:0 - -crwdns132934:0crwdne132934:0 - -## crwdns132936:0crwdne132936:0 - -crwdns132938:0crwdne132938:0 - -crwdns132940:0crwdne132940:0 - -crwdns132942:0crwdne132942:0 - -## crwdns132944:0crwdne132944:0 - -crwdns132946:0crwdne132946:0 crwdns132948:0crwdne132948:0 - -crwdns132950:0crwdne132950:0 - -crwdns132952:0crwdne132952:0 - -## crwdns132954:0crwdne132954:0 - -crwdns132956:0crwdne132956:0 crwdns132958:0crwdne132958: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 - -crwdns132978:0crwdne132978:0 - -crwdns132980:0crwdne132980:0 - -1. crwdns103698:0crwdne103698:0 crwdns103700:0crwdne103700:0 - - ```css - crwdns132982:0crwdne132982:0 - ``` - -crwdns132984:0crwdne132984:0 - -- crwdns130850:0crwdne130850:0 -- crwdns103708:0crwdne103708:0 - -2. crwdns103710:0crwdne103710:0 crwdns103712:0crwdne103712:0 - - ```jsx - crwdns132986:0{{ cursor: 'not-allowed' }}crwdnd132986:0{Link}crwdne132986:0 - ``` - -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 0da92d704b78d7..e49630748f6483 100644 --- a/docs/src/pages/components/buttons/buttons-de.md +++ b/docs/src/pages/components/buttons/buttons-de.md @@ -1,11 +1,11 @@ --- -title: Button React Komponente +title: React Button component components: Button, IconButton, ButtonBase --- -# Button (schaltfläche) +# Button (Schaltfläche) -

Mit den Schaltflächen können Benutzer mit einem einzigen Tastendruck Aktionen ausführen und Entscheidungen treffen.

+

Buttons erlauben es dem Benutzer, mit einem einzigen Fingertipp Aktionen auszuführen und Entscheidungen zu treffen.

[Buttons](https://material.io/design/components/buttons.html) (Schaltflächen / Knöpfe) geben Aktionen an, die ein Nutzer ausführen kann. Sie werden an verschiedenen Orten in Anwendungen verwendet, zum Beispiel: @@ -15,32 +15,32 @@ components: Button, IconButton, ButtonBase - Cards - Toolbars -## Contained Buttons +## Eigenständige Buttons -[Contained buttons](https://material.io/design/components/buttons.html#contained-button) sind hervorgehoben und unterscheiden sich durch die Verwendung von Höhe und Füllung. Sie enthalten Aktionen, die für Ihre App vorrangig sind. +[Eigenständige Buttons](https://material.io/design/components/buttons.html#contained-button) sind hervorgehoben und unterscheiden sich durch die Verwendung von Höhe und Füllung. Sie enthalten primäre Aktionen einer Anwendung. {{"demo": "pages/components/buttons/ContainedButtons.js"}} -You can remove the elevation with the `disableElevation` prop. +Die Erhöhung kann mit der `disableElevation`-Prop deaktiviert werden. {{"demo": "pages/components/buttons/DisableElevation.js"}} -## Text Buttons +## Text-Buttons -[Text buttons](https://material.io/design/components/buttons.html#text-button) werden normalerweise für weniger ausgeprägte Aktionen verwendet, darunter auch solche, die Folgendes enthalten: +[Text-Buttons](https://material.io/design/components/buttons.html#text-button) werden normalerweise für weniger ausgeprägte Aktionen verwendet, als Beispiel solche, die in den folgenden Komponenten enthalten sind: - In Dialogen - In Karten -In Karten helfen Text Buttons dabei, den Karteninhalt hervorzuheben. +In Karten helfen Text-Buttons dabei, den Karteninhalt zu betonen. {{"demo": "pages/components/buttons/TextButtons.js"}} -## Outlined Buttons +## Umrandete Buttons -[Outlined Buttons](https://material.io/design/components/buttons.html#outlined-button) sind Buttons mit mittlerer Betonung. Sie enthalten wichtige Aktionen, aber nicht die primäre Aktion in einer App. +[Umrandete Buttons](https://material.io/design/components/buttons.html#outlined-button) sind Buttons mit mittlerer Betonung. Sie enthalten wichtige Aktionen, aber nicht die primäre Aktion einer Anwendung. -Outlined Buttons sind auch eine Alternative mit geringerer Betonung als Contained Buttons, oder eine Alternative mit höherer Betonung als Text Buttons. +Umrandete Buttons haben eine geringere Betonung als eigenständige Buttons, aber eine stärkere als Text-Buttons. {{"demo": "pages/components/buttons/OutlinedButtons.js"}} @@ -80,7 +80,7 @@ Icons eignen sich auch für Umschaltflächen, mit denen eine einzelne Auswahl au ## Benutzerdefinierte Buttons -Hier sind einige Beispiele, wie man die Komponente anpassen kann. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/). +Hier einige Beispiele zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/components/). {{"demo": "pages/components/buttons/CustomizedButtons.js", "defaultCodeOpen": false}} diff --git a/docs/src/pages/components/buttons/buttons-es.md b/docs/src/pages/components/buttons/buttons-es.md index 1212a95e28be08..6346df6dbd7d2e 100644 --- a/docs/src/pages/components/buttons/buttons-es.md +++ b/docs/src/pages/components/buttons/buttons-es.md @@ -1,9 +1,9 @@ --- -title: Componente de React Button +title: React Button component components: Button, IconButton, ButtonBase --- -# Button (botón) +# Botón

Los botones permiten a los usuarios ejecutar acciones, y tomar decisiones, con un simple toque.

@@ -44,15 +44,15 @@ Los botones delineados también son una alternativa de menos énfasis que los bo {{"demo": "pages/components/buttons/OutlinedButtons.js"}} -## Handling clicks +## Controlador del click -All components accept an `onClick` handler that is applied to the root DOM element. +Todos los componentes aceptan un controlador `onClick` el cual se aplica al elemento raíz en el DOM. ```jsx - + ``` -Note that the documentation [avoids](/guides/api/#native-properties) mentioning native props (there are a lot) in the API section of the components. +Ten en cuenta que la documentación [evita](/guides/api/#native-properties) mencionar las propiedades nativas (existen varias) en la sección API de los componentes. ## Botón de subida @@ -84,7 +84,7 @@ Here are some examples of customizing the component. You can learn more about th {{"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). +🎨 Si estás buscando inspiración, puedes mirar [los ejemplos de MUI Treasury](https://mui-treasury.com/styles/button). ## Botones Complejos @@ -96,17 +96,17 @@ Los Botones de Texto, los Botones Contenidos, los Botones de Acción Flotantes y Un caso de uso común es emplear el botón para iniciar la navegación hacia una nueva página. El componente `ButtonBase` provee un atributo para tratar este uso: `component`. Sin embargo, para ciertos rellenos `ButtonBase` requiere el nodo DOM del componente proporcionado. Esto se logra adjuntando una referencia al componente y esperando que el componente reenvíe esta referencia al nodo DOM subyacente. Given that many of the interactive components rely on `ButtonBase`, you should be able to take advantage of it everywhere. -Here is an [integration example with react-router](/guides/composition/#button). +Aquí hay un ejemplo de integración con [react-router](/guides/composition/#button). ## Limitaciones -### Cursor not-allowed +### Cursor no permitido -The ButtonBase component sets `pointer-events: none;` on disabled buttons, which prevents the appearance of a disabled cursor. +El componente ButtonBase define `pointer-events: none;` en los botones deshabilitados, lo que previene la aparición del cursor desactivado. -If you wish to use `not-allowed`, you have two options: +Si deseas usar `not-allowed`, tienes dos opciones: -1. **CSS only**. You can remove the pointer events style on the disabled state of the ` ``` diff --git a/docs/src/pages/components/buttons/buttons-fr.md b/docs/src/pages/components/buttons/buttons-fr.md index f986760812ca5c..7919c98f62f46d 100644 --- a/docs/src/pages/components/buttons/buttons-fr.md +++ b/docs/src/pages/components/buttons/buttons-fr.md @@ -1,5 +1,5 @@ --- -title: Composant React Button +title: React Button component components: Button, IconButton, ButtonBase --- @@ -7,7 +7,7 @@ components: Button, IconButton, ButtonBase

Les boutons permettent aux utilisateurs d'effectuer une action et de faire des choix en un seul clic.

-[Buttons](https://material.io/design/components/buttons.html) communicate actions that users can take. They are typically placed throughout your UI, in places like: +[Boutons](https://material. io/design/components/buttons. html) communiquent les actions que les utilisateurs peuvent faire. Ils sont généralement placés à travers votre interface utilisateur, dans des endroits tels que : - Dialogues - Fenêtres modales @@ -21,7 +21,7 @@ components: Button, IconButton, ButtonBase {{"demo": "pages/components/buttons/ContainedButtons.js"}} -You can remove the elevation with the `disableElevation` prop. +Vous pouvez supprimer l'élévation avec la propriété `disableElevation`. {{"demo": "pages/components/buttons/DisableElevation.js"}} @@ -44,17 +44,17 @@ Les boutons surbrillance sont également une alternative moins importante que le {{"demo": "pages/components/buttons/OutlinedButtons.js"}} -## Handling clicks +## Gestion des clics -All components accept an `onClick` handler that is applied to the root DOM element. +Tous les composants acceptent un gestionnaire `onClick` qui est appliqué à l'élément DOM racine. ```jsx - + ``` -Note that the documentation [avoids](/guides/api/#native-properties) mentioning native props (there are a lot) in the API section of the components. +Notez que la documentation [évite](/guides/api/#native-properties) de mentionner les props natifs (il y en a beaucoup) dans la section API des composants. -## Upload button +## Bouton de téléchargement {{"demo": "pages/components/buttons/UploadButtons.js"}} @@ -64,17 +64,17 @@ Fancy larger or smaller buttons? Use the `size` property. {{"demo": "pages/components/buttons/ButtonSizes.js"}} -## Boutons avec des icônes et une étiquette +## Boutons avec icônes et libellés -Parfois, vous voudrez peut-être avoir des icônes pour certains boutons afin d'améliorer l'UX de l'application, car nous reconnaissons plus facilement les logos que le texte brut. Par exemple, si vous avez un bouton de suppression, vous pouvez lui attribuer une icône représentant une poubelle. +Parfois, vous pouvez avoir des icônes pour certains boutons pour améliorer l'UX de l'application car nous reconnaissons les logos plus facilement que le texte brut. Par exemple, si vous avez un bouton de suppression, vous pouvez l’étiqueter avec une icône de poubelle. {{"demo": "pages/components/buttons/IconLabelButtons.js"}} ## Boutons avec icône -Les boutons d'icône se trouvent généralement dans les barres d'applications et les barres d'outils. +Les boutons d'icônes se trouvent généralement dans les barres d'applications et les barres d'outils. -Les icônes sont également appropriés pour les boutons à bascule qui permettent à un seul choix à choisir ou décochée, comme l' ajout ou la suppression d' une étoile à un élément. +Les icônes sont également appropriées pour les boutons de bascule qui permettent à un seul choix d'être sélectionné ou désélectionné, comme l'ajout ou la suppression d'une étoile à un objet. {{"demo": "pages/components/buttons/IconButtons.js"}} @@ -84,7 +84,7 @@ Here are some examples of customizing the component. Vous pouvez en savoir plus {{"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). +🎨 Si vous cherchez de l'inspiration, vous pouvez consulter les [exemples de personnalisation de MUI Treasury](https://mui-treasury.com/styles/button). ## Boutons complexes @@ -94,19 +94,19 @@ Les boutons texte, les boutons contained, les bouton d'action flottante et les b ## Bibliothèque de routage tierce -One common use case is to use the button to trigger navigation to a new page. Le composant `ButtonBase` fournit une propriété pour traiter ce cas d'utilisation: `composant`. Cependant, pour certains focus polyfills `ButtonBase` requiert le nœud DOM du composant fourni. Pour ce faire, associez une référence au composant et attendez-vous à ce que le composant transmette cette référence au noeud DOM sous-jacent. Given that many of the interactive components rely on `ButtonBase`, you should be able to take advantage of it everywhere. +Un cas d'utilisation courant est d'utiliser le bouton pour déclencher la navigation vers une nouvelle page. Le composant `ButtonBase` fournit une propriété pour traiter ce cas d'utilisation: `composant`. Cependant, pour certains focus polyfills `ButtonBase` requiert le nœud DOM du composant fourni. Pour ce faire, associez une référence au composant et attendez-vous à ce que le composant transmette cette référence au noeud DOM sous-jacent. Given that many of the interactive components rely on `ButtonBase`, you should be able to take advantage of it everywhere. -Here is an [integration example with react-router](/guides/composition/#button). +Voici un exemple d'intégration [avec react-router](/guides/composition/#button). ## Limites -### Cursor not-allowed +### Curseur non autorisé -The ButtonBase component sets `pointer-events: none;` on disabled buttons, which prevents the appearance of a disabled cursor. +Le composant ButtonBase définit `pointer-événements : none;` sur les boutons désactivés, ce qui empêche l'apparence d'un curseur désactivé. -If you wish to use `not-allowed`, you have two options: +Si vous souhaitez utiliser `non-autorisé`, vous avez deux options : -1. **CSS only**. You can remove the pointer events style on the disabled state of the ` ``` -This has the advantage of supporting any element, for instance, a link `` element. \ No newline at end of file +Ceci a l'avantage de supporter n'importe quel élément, par exemple, un élément de lien ``. \ No newline at end of file diff --git a/docs/src/pages/components/buttons/buttons-ja.md b/docs/src/pages/components/buttons/buttons-ja.md index 56e5160a41c98b..cfe6197fb0fd5b 100644 --- a/docs/src/pages/components/buttons/buttons-ja.md +++ b/docs/src/pages/components/buttons/buttons-ja.md @@ -1,5 +1,5 @@ --- -title: Button コンポーネント +title: React Button component components: Button, IconButton, ButtonBase --- @@ -17,11 +17,11 @@ components: Button, IconButton, ButtonBase ## Contained Buttons -[Contained button](https://material.io/design/components/buttons.html#contained-button)は、力強く、強調と塗りつぶしによって区別されるようなボタンです。 アプリケーションの初歩的なアクションが含まれます。 +[Contained buttons](https://material.io/design/components/buttons.html#contained-button) are high-emphasis, distinguished by their use of elevation and fill. アプリ内で強調すべきアクションを含みます。 {{"demo": "pages/components/buttons/ContainedButtons.js"}} -You can remove the elevation with the `disableElevation` prop. +`disableElevation`でシャドウを取り除けます。 {{"demo": "pages/components/buttons/DisableElevation.js"}} @@ -32,27 +32,27 @@ You can remove the elevation with the `disableElevation` prop. - Dialog - Card -Cardの中でText Buttonを用いることで、Cardの内容に重点を置くことができます。 +Cardでは、テキストボタンを使用することでCardの内容に重点を置くことができます。 {{"demo": "pages/components/buttons/TextButtons.js"}} ## Outlined Buttons -[Outlined buttons](https://material.io/design/components/buttons.html#outlined-button) are medium-emphasis buttons. 重要なアクションを含みますが、アプリ内では最も重要ではない、といった場合に使われます。 +[Outlined buttons](https://material.io/design/components/buttons.html#outlined-button) は少し強調されたボタンです。 重要ではあるが、一番ではないアクションを含みます。 重要ではあるが、一番ではないアクションを含みます。 重要ではあるが、一番ではないアクションを含みます。 -Outlined buttonは、Contained buttonと比べると強調が弱く、 Text buttonと比べると強調の強いボタンです。 +Outlined buttonは、Contained buttonより弱く、 Text buttonよりは強い強調をします。 {{"demo": "pages/components/buttons/OutlinedButtons.js"}} ## Handling clicks -All components accept an `onClick` handler that is applied to the root DOM element. +全てのコンポーネントは `onClick`を受け付けます。これはルートのDOM要素に適用されます。 ```jsx - + ``` -Note that the documentation [avoids](/guides/api/#native-properties) mentioning native props (there are a lot) in the API section of the components. +ドキュメントでは(多すぎるので)ネイティブpropsに関しては [言及していない](/guides/api/#native-properties)ことに注意してください。 ## Upload button @@ -66,7 +66,7 @@ Note that the documentation [avoids](/guides/api/#native-properties) mentioning ## Buttons with icons and label -ロゴはプレーンテキストよりも認識しやすいため、ボタンにアイコンを追加してアプリケーションのUXを強化したい場合があります。 たとえば、削除ボタンにごみ箱アイコンを付けるような場合です。 +ロゴはプレーンテキストよりも認識しやすいため、ボタンにアイコンを追加してアプリケーションのUXを強化したい場合があります。 たとえば、削除ボタンにごみ箱アイコンを付けるような場合です。 たとえば、削除ボタンにごみ箱アイコンを付けるような場合です。 たとえば、削除ボタンにごみ箱アイコンを付けるような場合です。 たとえば、削除ボタンにごみ箱アイコンを付けるような場合です。 たとえば、削除ボタンにごみ箱アイコンを付けるような場合です。 {{"demo": "pages/components/buttons/IconLabelButtons.js"}} @@ -80,21 +80,21 @@ Note that the documentation [avoids](/guides/api/#native-properties) mentioning ## カスタムButton -コンポーネントのカスタマイズの例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/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) を確認すると良いでしょう。 ## 複雑なButton -テキストボタン、包含ボタン、フローティングアクションボタン、およびアイコンボタンは、同じコンポーネント（ `ButtonBase`上に構築されています。 この低レベルのコンポーネントを利用してカスタムインタラクションを構築できます。 +テキストボタン、コンテインボタン、フローティングアクションボタン、アイコンボタンは、同じコンポーネント(`ButtonBase`) を元に作成されています。 この元のコンポーネントを利用して独自のインタラクションを構築できます。 この元のコンポーネントを利用して独自のインタラクションを構築できます。 {{"demo": "pages/components/buttons/ButtonBase.js"}} ## サードパーティ製ルーティングライブラリ -一般的な使用例の1つは、ボタンを使用して新しいページへのナビゲーションを開始することです。 `ButtonBase` コンポーネントは、このユースケースを処理するためのプロパティを提供します 。 108/5000 ただし、特定のフォーカスについては` ButtonBase `には提供されているDOMノードが必要です。 これは、refをコンポーネントに添付し、 コンポーネントがこのrefを基になるDOMノードに転送することを期待することによって実現されます。 Given that many of the interactive components rely on `ButtonBase`, you should be able to take advantage of it everywhere. +一般的な使用例の1つは、ボタンを使用して新しいページへのナビゲーションを発火することです。 `ButtonBase` コンポーネントは、このユースケースを扱うためのプロパティを提供します 。 ただし、特定のフォーカスについては` ButtonBase `には提供されているコンポーネントのDOMノードが必要です。 コンポーネントにrefを添付し、コンポーネントが基のDOMノードにrefを継承することを期待して成り立っています。 多くのインタラクティブなコンポーネントが `ButtonBase` に依存していることから、どこでもこの機能を使うことができるはずです。 こちらは [react-routerとの統合例](/guides/composition/#button). @@ -102,11 +102,11 @@ Note that the documentation [avoids](/guides/api/#native-properties) mentioning ### Cursor not-allowed -The ButtonBase component sets `pointer-events: none;` on disabled buttons, which prevents the appearance of a disabled cursor. +ButtonBaseコンポーネントは無効化時に、 `pointer-events: none;` としています。無効化されたカーソルが出現することを抑制するためです。 -If you wish to use `not-allowed`, you have two options: +`not-allowed`を意図的に使用したい場合、２つの選択肢があります。 -1. **CSS only**. You can remove the pointer events style on the disabled state of the ` + ``` -请注意，文档里组件的 api 部分 [避免](/guides/api/#native-properties) 提到大量的 原生(native) 属性。 +请注意，文档里组件的 API 部分 [避免](/guides/api/#native-properties) 提到原生的属性（还是有很多）。 ## Upload button 上传按钮 @@ -74,17 +74,17 @@ components: Button, IconButton, ButtonBase 图标按钮通常位于应用栏和工具栏中。 -图标也适用于允许选择单个选项的切换按钮或 取消选择，例如向项目添加或删除星标。 +图标也适用于允许选择单个选项的切换按钮或取消选择，例如向项目添加或删除星标。 {{"demo": "pages/components/buttons/IconButtons.js"}} ## Customized Buttons（自定义按钮） -以下是自定义组件的一些例子。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。 +你可以参考以下一些例子来自定义组件。 您可以在[重写文档页](/customization/components/)中了解有关此内容的更多信息。 {{"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（复杂按钮） @@ -98,7 +98,7 @@ components: Button, IconButton, ButtonBase 这有一个[与 react-router 交互的例子](/guides/composition/#button)。 -## 局限性 +## 设计局限 ### Cursor 鼠标悬浮的禁用 @@ -117,7 +117,7 @@ components: Button, IconButton, ButtonBase 然而： -- 如您要[在 disabled 不可用元素上显示提示文本](/components/tooltips/#disabled-elements)，则需添加 `pointer-events: none;` +- 如您要 [在 disabled 不可用元素上显示提示文本](/components/tooltips/#disabled-elements)，则需添加 `pointer-events: none;` - 若您加载除了一个 button 元素之外的元素， 例如，一个链接 `` 元素，指针是不会改变的。 2. **改变 DOM**。 您可以这样封装按钮： @@ -125,7 +125,7 @@ components: Button, IconButton, ButtonBase ```jsx ``` diff --git a/docs/src/pages/components/buttons/buttons.md b/docs/src/pages/components/buttons/buttons.md index c03fee28568dac..03bef149869195 100644 --- a/docs/src/pages/components/buttons/buttons.md +++ b/docs/src/pages/components/buttons/buttons.md @@ -1,5 +1,5 @@ --- -title: Button React component +title: React Button component components: Button, IconButton, ButtonBase --- diff --git a/docs/src/pages/components/cards/cards-aa.md b/docs/src/pages/components/cards/cards-aa.md deleted file mode 100644 index 96d559ca180c66..00000000000000 --- a/docs/src/pages/components/cards/cards-aa.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: crwdns89686:0crwdne89686:0 -components: crwdns89688:0crwdne89688:0 ---- - -# crwdns106127:0crwdne106127:0 - -

crwdns89692:0crwdne89692:0

- -crwdns89694:0crwdne89694:0 - -crwdns89696:0crwdne89696:0 crwdns89698:0crwdne89698:0 - -## crwdns89700:0crwdne89700:0 - -crwdns89702:0crwdne89702:0 - -crwdns105539:0crwdne105539:0 - -### crwdns106881:0crwdne106881:0 - -crwdns108803:0crwdne108803:0 - -crwdns106885:0crwdne106885:0 - -## crwdns89706:0crwdne89706:0 - -crwdns106887:0crwdne106887:0 - -crwdns106889:0crwdne106889:0 - -## crwdns89712:0crwdne89712:0 - -crwdns106891:0crwdne106891:0 - -crwdns106893:0crwdne106893:0 - -crwdns106895:0crwdne106895:0 crwdns106897:0crwdne106897:0 crwdns106899:0crwdne106899:0 crwdns106901:0crwdne106901:0 - -crwdns106903:0crwdne106903:0 - -> crwdns89728:0crwdne89728:0 crwdns89730:0crwdne89730:0 - -## crwdns89732:0crwdne89732:0 - -crwdns106905:0crwdne106905:0 - -crwdns106907:0crwdne106907:0 - -crwdns106909:0crwdne106909:0 - -## crwdns108085:0crwdne108085:0 - -crwdns132600:0crwdne132600:0 \ No newline at end of file diff --git a/docs/src/pages/components/cards/cards-de.md b/docs/src/pages/components/cards/cards-de.md index 62f39f17667ce6..5540eac6d578f1 100644 --- a/docs/src/pages/components/cards/cards-de.md +++ b/docs/src/pages/components/cards/cards-de.md @@ -1,9 +1,9 @@ --- -title: Cards React Komponente +title: React Card component components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper --- -# Card (karte) +# Karte (Card)

Karten enthalten Inhalte und Aktionen zu einem bestimmten Thema.

diff --git a/docs/src/pages/components/cards/cards-es.md b/docs/src/pages/components/cards/cards-es.md index 8fce4869d9e1f2..06d7453eedb0d7 100644 --- a/docs/src/pages/components/cards/cards-es.md +++ b/docs/src/pages/components/cards/cards-es.md @@ -1,5 +1,5 @@ --- -title: Componente de React Card (Tarjeta) +title: React Card component components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper --- @@ -39,7 +39,7 @@ Por defecto usamos una combinacion de un `
` y una *imagen de fondo* para mo {{"demo": "pages/components/cards/ImgMediaCard.js", "bg": true}} -> ⚠️ When `component="img"`, CardMedia relies on `object-fit` for centering the image. It's not supported by IE 11. +> ⚠ Cuando `component="img"`, CardMedia depende de `object-fit` para centrar la imagen. No es compatible con IE 11. ## Controles de IU @@ -51,4 +51,4 @@ Acá un ejemplo de una tarjeta con control multimedia. ## Personalización -🎨 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 +🎨 Si estás buscando inspiración, puedes revisar [los ejemplos de MUI Treasury](https://mui-treasury.com/components/card). \ No newline at end of file diff --git a/docs/src/pages/components/cards/cards-fr.md b/docs/src/pages/components/cards/cards-fr.md index 3a35bb6a16413e..aa355229db6fc6 100644 --- a/docs/src/pages/components/cards/cards-fr.md +++ b/docs/src/pages/components/cards/cards-fr.md @@ -1,5 +1,5 @@ --- -title: Composant React Carte +title: React Card component components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper --- @@ -9,7 +9,7 @@ components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedi [cartes](https://material.io/design/components/cards.html) sont des surfaces qui affichent du contenu et des actions sur un seul sujet. -They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy. +Ils devraient être faciles à analyser pour trouver des informations pertinentes et réalisables. Les éléments, comme le texte et les images, doivent être placés sur eux d'une manière qui indique clairement la hiérarchie. ## Carte simple @@ -25,7 +25,7 @@ Définissez `variant="outlined"` pour afficher une carte encadrée. ## Interaction complexe -Sur le bureau, le contenu de la carte peut s’étendre. +Sur grand écran, le contenu de la carte peut s’étendre. {{"demo": "pages/components/cards/RecipeReviewCard.js", "bg": true}} @@ -39,7 +39,7 @@ Par défaut, nous utilisons la combinaison d'un élément `
` et *background {{"demo": "pages/components/cards/ImgMediaCard.js", "bg": true}} -> ⚠️ When `component="img"`, CardMedia relies on `object-fit` for centering the image. It's not supported by IE 11. +> ⚠ Quand `component="img"`, CardMedia s'appuie sur `objet-fit` pour centrer l'image. Ce n'est pas supporté par IE 11. ## Contrôles d'UI @@ -51,4 +51,4 @@ Voici un exemple de carte de contrôle multimédia. ## Personnalisation -🎨 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 +🎨 Si vous cherchez de l'inspiration, vous pouvez consulter les [exemples de personnalisation de MUI Treasury](https://mui-treasury.com/components/card). \ No newline at end of file diff --git a/docs/src/pages/components/cards/cards-ja.md b/docs/src/pages/components/cards/cards-ja.md index 3f9a9e3a8c23e6..0b812bd03b6053 100644 --- a/docs/src/pages/components/cards/cards-ja.md +++ b/docs/src/pages/components/cards/cards-ja.md @@ -1,5 +1,5 @@ --- -title: Card コンポーネント +title: React Card component components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper --- @@ -35,7 +35,7 @@ Set `variant="outlined"` to render an outlined card. {{"demo": "pages/components/cards/MediaCard.js", "bg": true}} -デフォルトでは、メディアを表示する為に `
` 要素と *背景画像* の組み合わせを使用します。 状況によってこれは問題になることがあります。 例えば、動画やレスポンシブ画像を表示したいとします。 そのような場合は `component` プロパティを使用します。 +デフォルトでは、メディアを表示する為に `
` 要素と *背景画像* の組み合わせを使用します。 状況によってこれは問題になることがあります。 例えば、動画やレスポンシブ画像を表示したいとします。 そのような場合は `component` プロパティを使用します。 状況によってこれは問題になることがあります。 例えば、動画やレスポンシブ画像を表示したいとします。 そのような場合は `component` プロパティを使用します。 状況によってこれは問題になることがあります。 例えば、動画やレスポンシブ画像を表示したいとします。 そのような場合は `component` プロパティを使用します。 状況によってこれは問題になることがあります。 例えば、動画やレスポンシブ画像を表示したいとします。 そのような場合は `component` プロパティを使用します。 状況によってこれは問題になることがあります。 例えば、動画やレスポンシブ画像を表示したいとします。 そのような場合は `component` プロパティを使用します。 {{"demo": "pages/components/cards/ImgMediaCard.js", "bg": true}} @@ -51,4 +51,4 @@ Card内の補足的なアクションは、通常はカードの下部に配置 ## カスタマイズ -🎨 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/cards/cards-pt.md b/docs/src/pages/components/cards/cards-pt.md index 28bf7f38b3c1ad..1b56c2f011910c 100644 --- a/docs/src/pages/components/cards/cards-pt.md +++ b/docs/src/pages/components/cards/cards-pt.md @@ -31,21 +31,21 @@ O conteúdo do cartão pode ser expandido. ## Mídia -Exemplo de um cartão usando uma imagem para demonstrar a principal ideia do conteúdo. +Exemplo de um cartão usando uma imagem para reforçar o conteúdo. {{"demo": "pages/components/cards/MediaCard.js", "bg": true}} -Por padrão, nós usamos uma combinação de um elemento `<div>` e um *background image* para exibir o componente media. Isto pode ser problemático em algumas situações. Por exemplo, você pode querer exibir um vídeo ou uma imagem responsiva. Use a propriedade `component` para estes casos de uso: +Por padrão, nós usamos a combinação de um elemento `
` e uma *imagem de fundo* para exibir a mídia. Isto pode ser problemático em algumas situações. Por exemplo, você pode querer exibir um vídeo ou uma imagem responsiva. Use a propriedade `component` para estas situações: {{"demo": "pages/components/cards/ImgMediaCard.js", "bg": true}} > ⚠️ Quando `component="img"`, CardMedia depende de `object-fit` para centralizar a imagem. Não é suportado pelo IE 11. -## Controles de UI +## Controles da interface do usuário Ações suplementares dentro do cartão são explicitamente chamadas usando ícones, texto e controles de interface do usuário, normalmente colocados na parte inferior do cartão. -Aqui está um exemplo de um controle de mídia do cartão. +Aqui está um exemplo de um controle de mídia com cartão. {{"demo": "pages/components/cards/MediaControlCard.js", "bg": true}} diff --git a/docs/src/pages/components/cards/cards-ru.md b/docs/src/pages/components/cards/cards-ru.md index 1421255aedb1f0..e2c5c5c801802d 100644 --- a/docs/src/pages/components/cards/cards-ru.md +++ b/docs/src/pages/components/cards/cards-ru.md @@ -1,5 +1,5 @@ --- -title: Card компонент из React +title: Компонент React Card components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper --- diff --git a/docs/src/pages/components/cards/cards-zh.md b/docs/src/pages/components/cards/cards-zh.md index c68eba379bd310..999400752196af 100644 --- a/docs/src/pages/components/cards/cards-zh.md +++ b/docs/src/pages/components/cards/cards-zh.md @@ -1,5 +1,5 @@ --- -title: React Card 卡片组件 +title: React Card（卡片）组件 components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper --- @@ -51,4 +51,4 @@ components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedi ## Customization 个性化 -🎨如果你是在寻找灵感，你可以查看 [MUI Treasury's customization examples](https://mui-treasury.com/components/card)。 \ No newline at end of file +🎨 如果您还在寻找灵感，您可以看看 [MUI Treasury 特别定制的一些例子](https://mui-treasury.com/components/card)。 \ No newline at end of file diff --git a/docs/src/pages/components/cards/cards.md b/docs/src/pages/components/cards/cards.md index 6377dbe052caf3..850d5e7cfbc350 100644 --- a/docs/src/pages/components/cards/cards.md +++ b/docs/src/pages/components/cards/cards.md @@ -1,5 +1,5 @@ --- -title: Card React component +title: React Card component components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper --- diff --git a/docs/src/pages/components/checkboxes/checkboxes-aa.md b/docs/src/pages/components/checkboxes/checkboxes-aa.md deleted file mode 100644 index cd2fdac34901bc..00000000000000 --- a/docs/src/pages/components/checkboxes/checkboxes-aa.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: crwdns89740:0crwdne89740:0 -components: crwdns89742:0crwdne89742:0 ---- - -# crwdns106129:0crwdne106129:0 - -

crwdns89746:0crwdne89746:0

- -crwdns89748:0crwdne89748:0 - -crwdns89750:0crwdne89750:0 crwdns89752:0crwdne89752:0 - -## crwdns130384:0crwdne130384:0 - -crwdns89754:0crwdne89754:0 - -## crwdns130386:0crwdne130386:0 - -crwdns130388:0crwdne130388:0 - -crwdns89758:0crwdne89758:0 - -## crwdns130390:0crwdne130390:0 - -crwdns89762:0crwdne89762:0 - -crwdns89764:0crwdne89764:0 - -## crwdns130392:0crwdne130392:0 - -crwdns89768:0crwdne89768:0 - -crwdns89770:0crwdne89770:0 - -## crwdns130394:0crwdne130394:0 - -crwdns100826:0crwdne100826:0 crwdns100828:0crwdne100828:0 - -crwdns104246:0crwdne104246:0 - -crwdns132602:0crwdne132602:0 - -## crwdns130396:0crwdne130396:0 - -- [crwdns89788:0crwdne89788:0 crwdns89790:0crwdne89790:0](crwdns89786:0crwdne89786:0) -- [crwdns102464:0crwdne102464:0 crwdns102466:0crwdne102466:0](crwdns102462:0crwdne102462:0) - -## crwdns130398:0crwdne130398:0 - -crwdns132604:0crwdne132604:0 - -- crwdns102472:0crwdne102472:0 crwdns102474:0crwdne102474:0 -- crwdns102476:0crwdne102476:0 crwdns102478:0crwdne102478:0 - -```jsx -crwdns89782:0{{ 'aria-label': 'Checkbox A' }}crwdne89782:0 -``` \ No newline at end of file diff --git a/docs/src/pages/components/checkboxes/checkboxes-de.md b/docs/src/pages/components/checkboxes/checkboxes-de.md index 05ae90d3321976..0782ab3229c930 100644 --- a/docs/src/pages/components/checkboxes/checkboxes-de.md +++ b/docs/src/pages/components/checkboxes/checkboxes-de.md @@ -1,5 +1,5 @@ --- -title: Checkbox React-Komponente +title: React Checkbox component components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel --- diff --git a/docs/src/pages/components/checkboxes/checkboxes-es.md b/docs/src/pages/components/checkboxes/checkboxes-es.md index ec91ce9d685473..74e2aabeed6f62 100644 --- a/docs/src/pages/components/checkboxes/checkboxes-es.md +++ b/docs/src/pages/components/checkboxes/checkboxes-es.md @@ -1,5 +1,5 @@ --- -title: Checkbox React component +title: React Checkbox component components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel --- @@ -11,13 +11,13 @@ components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel Si tienes varias opciones en una lista, puedes ahorrar espacio usando checkboxes en lugar de utilizar interruptores de encendedido/apagado. Si tienes una única opción, evita usar un checkbox y utiliza un interruptor de encendido/apagado en su lugar. -## Basic checkboxes +## Checkboxes básicos {{"demo": "pages/components/checkboxes/Checkboxes.js"}} -## Checkbox with FormControlLabel +## Checkbox con FormControlLabel -`Checkbox` can be provided with a label thanks to the `FormControlLabel` component. +`Checkbox` puede ser provisto de una etiqueta gracias al componente `FormControlLabel`. {{"demo": "pages/components/checkboxes/CheckboxLabels.js"}} @@ -35,13 +35,13 @@ Puede cambiar la ubicación de la etiqueta: ## Customized checkbox -Here is an example of customizing the component. You can learn more about this in the [overrides documentation page](/customization/components/). +He aquí un ejemplo de personalización del componente. Puedes aprender más sobre esto en la [sección Personalizando Componentes de la documentación](/customization/components/). {{"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). +🎨 Si estás buscando inspiración, puedes mirar [los ejemplos de MUI Treasury](https://mui-treasury.com/styles/checkbox). -## When to use +## Cuándo usarlo - [Checkboxes vs. Botones de selección](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) - [Checkboxes vs. Interruptores](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8) diff --git a/docs/src/pages/components/checkboxes/checkboxes-fr.md b/docs/src/pages/components/checkboxes/checkboxes-fr.md index 01c6877f3fd86b..e227040d7d9e85 100644 --- a/docs/src/pages/components/checkboxes/checkboxes-fr.md +++ b/docs/src/pages/components/checkboxes/checkboxes-fr.md @@ -1,5 +1,5 @@ --- -title: Checkbox React component +title: React Checkbox component components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel --- @@ -15,13 +15,13 @@ Si vous avez plusieurs options dans une liste, vous pouvez conserver de l'espace {{"demo": "pages/components/checkboxes/Checkboxes.js"}} -## Checkbox with FormControlLabel +## Checkbox avec FormControlLabel -`Checkbox` can be provided with a label thanks to the `FormControlLabel` component. +`La case à cocher` peut être fournie avec une étiquette grâce au composant `FormControlLabel`. {{"demo": "pages/components/checkboxes/CheckboxLabels.js"}} -## Cases à cocher avec FormGroup +## Checkbox avec FormGroup `FormGroup` est un wrapper utile utilisé pour regrouper les composants de contrôles de sélection et qui fournit une API plus simple. @@ -33,18 +33,18 @@ Vous pouvez changer l'emplacement du label: {{"demo": "pages/components/checkboxes/FormControlLabelPosition.js"}} -## Case à cocher personnalisée +## Checkbox personnalisée Voici un exemple de personnalisation du composant. Vous pouvez en savoir plus dans la [page de documentation des overrides](/customization/components/). {{"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). +🎨 Si vous cherchez de l'inspiration, vous pouvez consulter les [exemples de personnalisation de MUI Treasury](https://mui-treasury.com/styles/checkbox). ## Quand les utiliser -- [Cases à cocher vs. Radio Buttons](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) -- [Cases à cocher vs. Switches (interrupteurs)](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8) +- [Checkbox vs. Radio Buttons](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) +- [Checkbox vs. Switches (interrupteurs)](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8) ## Accessibilité diff --git a/docs/src/pages/components/checkboxes/checkboxes-ja.md b/docs/src/pages/components/checkboxes/checkboxes-ja.md index 61935c4a3372eb..f0cad49537f9e2 100644 --- a/docs/src/pages/components/checkboxes/checkboxes-ja.md +++ b/docs/src/pages/components/checkboxes/checkboxes-ja.md @@ -1,5 +1,5 @@ --- -title: CheckBox コンポーネント +title: React Checkbox component components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel --- @@ -9,7 +9,7 @@ components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel [CheckBox コンポーネント](https://material.io/design/components/selection-controls.html#checkboxes) を使用してオプションをオンまたはオフにすることができます。 -リストに複数のオプションを持っている場合は、 Checkboxを使用して代わりのオン/オフスイッチのスペースを保存することができます。 選択肢が1つしかない場合は、チェックボックスを使用せずに代わりにオン/オフスイッチを使用します。 +リストに複数のオプションを持っている場合は、 Checkboxを使用して代わりのオン/オフスイッチのスペースを保存することができます。 選択肢が1つしかない場合は、チェックボックスを使用せずに代わりにオン/オフスイッチを使用します。 リストに複数のオプションを持っている場合は、 Checkboxを使用して代わりのオン/オフスイッチのスペースを保存することができます。 選択肢が1つしかない場合は、チェックボックスを使用せずに代わりにオン/オフスイッチを使用します。 リストに複数のオプションを持っている場合は、 Checkboxを使用して代わりのオン/オフスイッチのスペースを保存することができます。 選択肢が1つしかない場合は、チェックボックスを使用せずに代わりにオン/オフスイッチを使用します。 リストに複数のオプションを持っている場合は、 Checkboxを使用して代わりのオン/オフスイッチのスペースを保存することができます。 選択肢が1つしかない場合は、チェックボックスを使用せずに代わりにオン/オフスイッチを使用します。 リストに複数のオプションを持っている場合は、 Checkboxを使用して代わりのオン/オフスイッチのスペースを保存することができます。 選択肢が1つしかない場合は、チェックボックスを使用せずに代わりにオン/オフスイッチを使用します。 ## Basic checkboxes @@ -35,23 +35,23 @@ components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel ## カスタマイズされたチェックボックス -コンポーネントのカスタマイズ例を次に示します。 詳細については、 [overrides documentation page](/customization/components/)を参照してください。 +コンポーネントのカスタマイズ例を次に示します。 コンポーネントのカスタマイズ例を次に示します。 コンポーネントのカスタマイズ例を次に示します。 詳細については、 [overrides documentation page](/customization/components/)を参照してください。 {{"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) を確認すると良いでしょう。 ## When to use -- [Checkboxと Radio Buttons](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) -- [Checkboxと スイッチ](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8) +- [Checkboxと スイッチ Checkboxと スイッチ Radio Buttons](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) +- [Checkboxと スイッチ スイッチ](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8) ## アクセシビリティ (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#checkbox) -- ラジオボタン、チェックボックス、スイッチなどのすべてのフォームコントロールにラベルを付ける必要があります。 ほとんどの場合、 `