diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-de.md b/docs/src/pages/components/about-the-lab/about-the-lab-de.md index a7e36e55d9b2bd..581766d202cdb6 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-de.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-de.md @@ -2,13 +2,13 @@

Dieses Paket enthält die Inkubator-Komponenten, die noch nicht bereit sind, in den Kern aufgenommen zu werden.

-The main difference between the lab and the core is how the components are versioned. Having a separate lab package allows us to release breaking changes when necessary while the core package follows a [slower-moving policy](https://material-ui.com/versions/#release-frequency). +Der Hauptunterschied zwischen dem Labor und dem Kern besteht darin, wie die Komponenten versioniert werden. Having a separate lab package allows us to release breaking changes when necessary while the core package follows a [slower-moving policy](https://material-ui.com/versions/#release-frequency). As developers use and test the components and report issues, the maintainers learn more about shortcomings of the components: missing features, accessibility issues, bugs, API design, etc. The older and more used a component is, the less likely it is that new issues will be found and subsequently need to introduce breaking changes. For a component to be ready to move to the core, the following criteria are considered: -* It needs to be **used**. The Material-UI team uses Google Analytics stats among other metrics to evaluate the usage of each component. A lab component with low usage either means that it isn't fully working yet or that there is a low demand for it. +* Es muss **verwendet werden**. Das Material-UI-Team verwendet neben anderen Metriken Google Analytics Statistiken, um die Nutzung der einzelnen Komponenten zu bewerten. Eine Laborkomponente mit geringem Verbrauch bedeutet entweder, dass sie noch nicht vollständig funktioniert oder dass eine geringe Nachfrage besteht. * It needs to match the **code quality** of the core components. It doesn't have to be perfect to be a part of the core, but the component should be reliable enough that developers can depend on it. * Each component needs **type definitions**. It is not currently required that a lab component is typed, but it would need to be typed to move to the core. * Requires good **test coverage**. Some of the lab components don't currently have comprehensive tests. @@ -17,7 +17,7 @@ For a component to be ready to move to the core, the following criteria are cons ## Installation -Install the package in your project directory with: +Installieren Sie das Paket innerhalb des Projektordners mit: ```sh // mit npm diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-fr.md b/docs/src/pages/components/about-the-lab/about-the-lab-fr.md index a0c168d2b70117..7c243e056f3ee7 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-fr.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-fr.md @@ -2,7 +2,7 @@

Ce package contient des composants en incubation (en développement) qui ne sont pas encore prêts à être ajoutés au package principal.

-The main difference between the lab and the core is how the components are versioned. Having a separate lab package allows us to release breaking changes when necessary while the core package follows a [slower-moving policy](https://material-ui.com/versions/#release-frequency). +La principale différence entre le laboratoire et le noyau est la façon dont les composants sont versionnés. Le fait de disposer d'un paquet de laboratoire séparé nous permet de publier les modifications de rupture si nécessaire, tandis que le paquet de base suit une [politique plus lente](https://material-ui.com/versions/#release-frequency). As developers use and test the components and report issues, the maintainers learn more about shortcomings of the components: missing features, accessibility issues, bugs, API design, etc. The older and more used a component is, the less likely it is that new issues will be found and subsequently need to introduce breaking changes. diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-pt.md b/docs/src/pages/components/about-the-lab/about-the-lab-pt.md index ef0ac171b53eca..cc3035c5189ecd 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-pt.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-pt.md @@ -2,22 +2,22 @@

Este pacote hospeda os componentes da incubadora que ainda não estão prontos para mover para o núcleo (core).

-The main difference between the lab and the core is how the components are versioned. Having a separate lab package allows us to release breaking changes when necessary while the core package follows a [slower-moving policy](https://material-ui.com/versions/#release-frequency). +A principal diferença entre o lab e o core (núcleo) é como os componentes são versionados. Tendo um pacote separado para o lab, podemos liberar alterações radicais quando necessário, enquanto o pacote do core segue uma [política de movimentação mais lenta](https://material-ui.com/versions/#release-frequency). -As developers use and test the components and report issues, the maintainers learn more about shortcomings of the components: missing features, accessibility issues, bugs, API design, etc. The older and more used a component is, the less likely it is that new issues will be found and subsequently need to introduce breaking changes. +À medida que os desenvolvedores usam, testam os componentes e relatam problemas, os mantenedores aprendem mais sobre as deficiências dos componentes: recursos ausentes, problemas de acessibilidade, bugs, design de API, etc. Quanto mais antigo e mais usado for um componente, menor é a probabilidade de novos problemas serem encontrados e, posteriormente, novas alterações radicais precisarão ser introduzidas. -For a component to be ready to move to the core, the following criteria are considered: +Para que um componente esteja pronto para ir para o core, são considerados os seguintes critérios: -* It needs to be **used**. The Material-UI team uses Google Analytics stats among other metrics to evaluate the usage of each component. A lab component with low usage either means that it isn't fully working yet or that there is a low demand for it. -* It needs to match the **code quality** of the core components. It doesn't have to be perfect to be a part of the core, but the component should be reliable enough that developers can depend on it. - * Each component needs **type definitions**. It is not currently required that a lab component is typed, but it would need to be typed to move to the core. - * Requires good **test coverage**. Some of the lab components don't currently have comprehensive tests. -* Can it be used as **leverage** to incentivize users to upgrade to the latest major release? The less fragmented the community is, the better. -* It needs to have a low probability of a **breaking change** in the short/medium future. For instance, if it needs a new feature that will likely require a breaking change, it may be preferable to delay its promotion to the core. +* Ele precisa ser **utilizado**. A equipe do Material-UI usa o Google Analytics e outras métricas para avaliar o uso de cada componente. Um componente do lab com baixo uso significa que ainda não está totalmente funcionando ou que há uma baixa demanda por ele. +* Ele precisa corresponder à **qualidade de código** dos componentes principais. O componente não precisa ser perfeito para fazer parte do core, mas ele deve ser confiável o suficiente para que os desenvolvedores possam depender dele. + * Cada componente precisa de **definições de tipo**. Atualmente, não é necessário que um componente do lab seja tipado, mas ele precisará ser tipado para passar para o core. + * Requer boa **cobertura de teste**. Atualmente, alguns dos componentes do lab não têm testes abrangentes. +* O componente pode ser usado como **alavancagem** para incentivar os usuários a atualizar para a versão mais recente? Quanto menos fragmentada a comunidade, melhor. +* Ele precisa ter uma baixa probabilidade de **alterações radicais** no curto/médio prazo. Por exemplo, se o componente precisar de um novo recurso que provavelmente precisará de alterações radicais, pode ser preferível adiar sua promoção para o core. ## Instalação -Install the package in your project directory with: +Instale o pacote no diretório do projeto com: ```sh // usando npm @@ -27,7 +27,7 @@ npm install @material-ui/lab yarn add @material-ui/lab ``` -The lab has a peer dependency on the core components. If you are not already using Material-UI in your project, you can install it with: +O lab tem dependências com os componentes do core. Se você ainda não está utilizando o Material-UI em seu projeto, poderá instalá-lo com: ```sh // usando npm diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-zh.md b/docs/src/pages/components/about-the-lab/about-the-lab-zh.md index d31572a0f0753f..e3ce29de3298ac 100644 --- a/docs/src/pages/components/about-the-lab/about-the-lab-zh.md +++ b/docs/src/pages/components/about-the-lab/about-the-lab-zh.md @@ -2,22 +2,22 @@

此依赖包包含了一些还在开发中的组件，它们还不能移到 core（核心）库中。

-核心库（core）和实验室（lab）之间的主要差别就是组件是如何版本化的 Having a separate lab package allows us to release breaking changes when necessary while the core package follows a [slower-moving policy](https://material-ui.com/versions/#release-frequency). +核心库（core）和实验室（lab）之间的主要差别就是组件是如何版本化的 拥有独立的实验室版本，我们就可以在必要的时候发布一些会影响原本代码的改动，并且核心库遵循 [slower-moving policy](https://material-ui.com/versions/#release-frequency) -As developers use and test the components and report issues, the maintainers learn more about shortcomings of the components: missing features, accessibility issues, bugs, API design, etc. The older and more used a component is, the less likely it is that new issues will be found and subsequently need to introduce breaking changes. +程序员在使用和测试组件后向项目报漏洞，维护者就知道更多关于组件的缺点：如缺少功能，能不能访问的问题、漏洞，API设计等等的问题 一个组建被使用的时间越久，新问题被发现以及因此需要引入重大更改的可能性就越少。 -For a component to be ready to move to the core, the following criteria are considered: +那些准备放到核心库里的组件，需要考虑以下几点： -* It needs to be **used**. The Material-UI team uses Google Analytics stats among other metrics to evaluate the usage of each component. A lab component with low usage either means that it isn't fully working yet or that there is a low demand for it. -* It needs to match the **code quality** of the core components. It doesn't have to be perfect to be a part of the core, but the component should be reliable enough that developers can depend on it. - * Each component needs **type definitions**. It is not currently required that a lab component is typed, but it would need to be typed to move to the core. - * Requires good **test coverage**. Some of the lab components don't currently have comprehensive tests. -* Can it be used as **leverage** to incentivize users to upgrade to the latest major release? The less fragmented the community is, the better. -* It needs to have a low probability of a **breaking change** in the short/medium future. For instance, if it needs a new feature that will likely require a breaking change, it may be preferable to delay its promotion to the core. +* 它需要**被使用过** Material-UI 团队使用谷歌分析的数据去评估每个组件的使用情况。 如果一个实验室组件使用量太少，意味着它并不能全部正常工作，或者需求量比较小。 +* 它需要和核心组件的**代码质量**相似 作为核心代码的一部分，它不需要很完美，但是这个组件应该要很可靠，要另其他开发者可以依赖它 + * 每个组件需要**类型定义** 就目前来说，实验室组件不需要定义类型，但是当搬到核心代码之后就需要定义好类型了。 + * 需要一个好的**测试覆盖率**。 有一些实验室组件目前并没有进行综合的测试。 +* 这个组建是否可以作为一个激励用户更新到最新版本的**杠杆**？ 一个社区的分裂程度越低越好。 +* 需要极少可能地在不久地将来就引入**重大更改**。 例如，如果它需要一个新的功能并因此将有可能引入重大更改，那么最好推迟将其纳入核心库。 ## 安装 -Install the package in your project directory with: +请在您的项目目录中用以下方式安装依赖包： ```sh // 用 npm 安装 @@ -27,7 +27,7 @@ npm install @material-ui/lab yarn add @material-ui/lab ``` -The lab has a peer dependency on the core components. If you are not already using Material-UI in your project, you can install it with: +该 lab 和那些核心组件是对等依赖的。 若您还未在项目中使用 Material-UI，那可以按如下方式安装： ```sh // 用 npm 安装 diff --git a/docs/src/pages/components/alert/alert-de.md b/docs/src/pages/components/alert/alert-de.md index d1895b6bbf0cd5..2c0f8fa8fd0826 100644 --- a/docs/src/pages/components/alert/alert-de.md +++ b/docs/src/pages/components/alert/alert-de.md @@ -1,29 +1,29 @@ --- -title: Alert React component +title: Hinweis React-Komponente components: Alert --- -# Alert +# Hinweis -

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

+

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.

-**Note:** This component is not documented in the [Material Design guidelines](https://material.io/), but Material-UI supports it. +**Hinweis:** Diese Komponente ist nicht in den [Material-Design-Richtlinien](https://material.io/) dokumentiert, wird aber von Material-UI unterstützt. -## Simple alerts +## Einfache Hinweise -The alert offers four severity levels that set a distinctive icon and color. +Der Hinweis bietet vier Schweregrade an welche je ein eigenes Icon und eine eigene Farbe besitzen. {{"demo": "pages/components/alert/SimpleAlerts.js"}} ## Beschreibung -You can use the `AlertTitle` component to display a formatted title above the content. +Die `AlertTitle`-Komponente kann verwendet werden um einen formatierten Titel über dem Inhalt anzuzeigen. {{"demo": "pages/components/alert/DescriptionAlerts.js"}} -## Actions +## Aktionen -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. +Ein Hinweis kann eine Aktion wie zum Beispiel Schließen oder Zurücksetzen haben. Sie wird am Ende des Hinweises, hinter der Nachricht, angezeigt. 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. diff --git a/docs/src/pages/components/alert/alert-es.md b/docs/src/pages/components/alert/alert-es.md index 439a534f31925b..5e82fb0ec4f0d7 100644 --- a/docs/src/pages/components/alert/alert-es.md +++ b/docs/src/pages/components/alert/alert-es.md @@ -39,25 +39,25 @@ Puede utilizar el componente de [ transition ](/components/transitions/) como `C El `icon` prop permite añadir un icono para el inicio del componente Alert. Esto anulará el icono por defecto para la gravedad especificada. -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). +Puede cambiar el ícono de la gravedad por defecto mediante la propidad `iconMapping`. Esta puede ser definida de forma global usando [Tema personalizado](/customization/globals/#default-props). -Setting the icon prop to false will remove the icon altogether. +Al establecer la propiedad `icon` en false, el ícono no se mostrará. {{"demo": "pages/components/alert/IconAlerts.js"}} ## Variants -Two additional variants are available – outlined, and filled: +Están disponibles dos variantes adicionales - outlined y filled: -### Outlined +### Contorno {{"demo": "pages/components/alert/OutlinedAlerts.js"}} -### Filled +### Relleno {{"demo": "pages/components/alert/FilledAlerts.js"}} -## Toast +## Mensaje emergente You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert. diff --git a/docs/src/pages/components/alert/alert-pt.md b/docs/src/pages/components/alert/alert-pt.md index 62102331f645e7..0f1b453df648a0 100644 --- a/docs/src/pages/components/alert/alert-pt.md +++ b/docs/src/pages/components/alert/alert-pt.md @@ -21,49 +21,49 @@ Você pode usar o componente `AlertTitle` para exibir um título formatado acima {{"demo": "pages/components/alert/DescriptionAlerts.js"}} -## Actions +## Ações -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. +Um alerta pode conter uma ação, como um botão de fechar ou desfazer. É renderizado depois da mensagem na parte final do alerta. -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. +Se um `onClose` callback é dado e um atributo `action` é passado, um ícone de fechar é exibido. O atributo `action` pode ser usado para fornecer uma ação alternativa, por exemplo usando um Button ou IconButton. {{"demo": "pages/components/alert/ActionAlerts.js"}} -### Transition +### Transição -You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. +Você pode utilizar um [transition component](/components/transitions/) como `Collapse` para realizar uma transição na aparência do alerta. {{"demo": "pages/components/alert/TransitionAlerts.js"}} ## Ícones -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. +O atributo `icon` permite que você adicione um ícone no início do componente de alerta. Isto substituirá o ícone padrão de acordo com a gravidade especificada. -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). +Você pode alterar a gravidade padrão para mapeamento de ícones com o atributo `iconMapping`. Isto pode ser definido globalmente utilizando [theme customization](/customization/globals/#default-props). -Setting the icon prop to false will remove the icon altogether. +Definir o atributo ícone como falso removerá o ícone completamente. {{"demo": "pages/components/alert/IconAlerts.js"}} ## Variantes -Two additional variants are available – outlined, and filled: +Duas variantes adicionais estão disponíveis – delineadas e preenchidas: ### Outlined {{"demo": "pages/components/alert/OutlinedAlerts.js"}} -### Filled +### Preenchido {{"demo": "pages/components/alert/FilledAlerts.js"}} -## Toast +## Aviso na tela -You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert. +Você pode usar o componente SnackBar para [exibir um aviso na tela](/components/snackbars/#customized-snackbars) com o componente Alert. ## Cor -The `color` prop will override the default color for the specified severity. +A propriedade `color` substituirá a cor padrão para a gravidade especificada. {{"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. +Quando o componente é exibido de forma dinâmica, o conteúdo é automaticamente anunciado pela maioria dos leitores de tela. No momento, os leitores de tela não informam aos usuários sobre alertas que estão presentes quando a página carrega. -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. +O uso de cores para adicionar significado apenas fornece uma indicação visual, que não vai ser transmitida para usuários de tecnologias assistivas, como leitores de tela. Certifique-se de que a informação indicada pela cor seja clara a partir do próprio próprio conteúdo (por exemplo, o texto visível), ou esteja incluída através de meios alternativos, como um texto oculto adicional. -Actions must have a tab index of 0 so that they can be reached by keyboard-only users. +As ações devem ter um índice de tabulação igual a 0 para que possam ser alcançadas por usuários que usam apenas o teclado. diff --git a/docs/src/pages/components/alert/alert-zh.md b/docs/src/pages/components/alert/alert-zh.md index b3c0ca594b2923..180500434231c7 100644 --- a/docs/src/pages/components/alert/alert-zh.md +++ b/docs/src/pages/components/alert/alert-zh.md @@ -31,7 +31,7 @@ components: Alert ### 过渡效果 -可以使用 [过渡组件](/components/transitions) ，如 `Collapse（展开）` 来实现「提醒」出现时的过渡效果。 +可以使用 [过渡组件](/components/transitions/) ，如 `Collapse（展开）` 来实现「提醒」出现时的过渡效果。 {{"demo": "pages/components/alert/TransitionAlerts.js"}} 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 e7e47d061717ac..52028d9f98185a 100644 --- a/docs/src/pages/components/app-bar/app-bar-ja.md +++ b/docs/src/pages/components/app-bar/app-bar-ja.md @@ -49,8 +49,8 @@ A prominent app bar. アプリバーの位置を固定してレンダリングすると、要素の寸法はページの残りの部分に影響しません。 これにより、コンテンツの一部がアプリバーの背後で見えなくなる可能性があります。 以下に3つの解決策を示します。 -1. 固定の代わりに `position = "sticky"` を使用できます。 stickyはIE 11ではサポートされていません。 -2. You can render a second `` component: +1. fixed の代わりに `position="sticky"` を使用できます。 ⚠️ stickyはIE 11ではサポートされていません。 +2. 2番目の `` コンポーネントをレンダリングできます: ```jsx function App() { 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 64ed0bf397dcf9..8611d7c64052e7 100644 --- a/docs/src/pages/components/app-bar/app-bar-pt.md +++ b/docs/src/pages/components/app-bar/app-bar-pt.md @@ -1,5 +1,5 @@ --- -title: Componente App Bar (Barra de Aplicativos) para React +title: Componente Barra de Aplicativos para React components: AppBar, Toolbar, Menu --- diff --git a/docs/src/pages/components/autocomplete/autocomplete-aa.md b/docs/src/pages/components/autocomplete/autocomplete-aa.md index 84fb6ab86942bd..a987d1555b1293 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-aa.md +++ b/docs/src/pages/components/autocomplete/autocomplete-aa.md @@ -34,7 +34,7 @@ crwdns104506:0crwdne104506:0 crwdns107773:0crwdne107773:0 crwdns107775:0crwdne107775:0 -crwdns109699:0crwdne109699:0 +crwdns129994:0crwdne129994:0 crwdns107779:0crwdne107779:0 @@ -132,16 +132,22 @@ crwdns109771:0crwdne109771:0 crwdns109773:0crwdne109773:0 crwdns104588:0{ createFilterOptions }crwdne104588:0 ``` -crwdns109775:0crwdne109775:0 +### `crwdns130366:0crwdne130366:0` + +#### crwdns130368:0crwdne130368:0 1. crwdns104592:0[optional]crwdne104592:0 - crwdns104594:0[optional]crwdne104594:0 crwdns104596:0crwdne104596:0 - crwdns104598:0[optional]crwdne104598:0 crwdns104600:0crwdne104600:0 - crwdns104602:0[optional]crwdne104602:0 - - crwdns104604:0[optional]crwdne104604:0 + - crwdns130370:0[optional]crwdne130370:0 - crwdns104606:0[optional]crwdne104606:0 crwdns104608:0crwdne104608:0 - crwdns109191:0[optional]crwdne109191:0 crwdns109193:0crwdne109193:0 crwdns109195:0crwdne109195:0 crwdns109197:0crwdne109197:0 +#### crwdns130372:0crwdne130372:0 + +crwdns130374:0crwdne130374:0 + crwdns109777:0crwdne109777:0 ```js @@ -150,7 +156,7 @@ crwdns104612:0{filterOptions}crwdne104612:0 crwdns109779:0crwdne109779:0 -### crwdns109781:0crwdne109781:0 +### crwdns130376:0crwdne130376:0 crwdns109783:0crwdne109783:0 crwdns109785:0crwdne109785:0 @@ -166,7 +172,7 @@ crwdns109791:0crwdne109791:0 ## crwdns106475:0crwdne106475:0 -### crwdns109793:0crwdne109793:0 +### crwdns130378:0crwdne130378:0 crwdns109795:0crwdne109795:0 crwdns109797:0crwdne109797:0 @@ -181,11 +187,11 @@ crwdns109801:0crwdne109801:0 crwdns109803:0crwdne109803:0 autoComplete: 'new-password', }}crwdne107871:0 -### crwdns109805:0crwdne109805:0 +### crwdns130380:0crwdne130380:0 crwdns109807:0crwdne109807:0 crwdns109809:0crwdne109809:0 -### crwdns109811:0crwdne109811:0 +### crwdns130382:0crwdne130382:0 crwdns109813:0crwdne109813:0 crwdns109815:0crwdne109815:0 crwdns109817:0crwdne109817:0 diff --git a/docs/src/pages/components/autocomplete/autocomplete-de.md b/docs/src/pages/components/autocomplete/autocomplete-de.md index 6a56fbdb8138af..e9bb601ee05916 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-de.md +++ b/docs/src/pages/components/autocomplete/autocomplete-de.md @@ -34,7 +34,7 @@ Wählen Sie ein Land aus 248. Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search. -However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus` (it helps the user clearning the selected value). +However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus` (it helps the user clear the selected value). {{"demo": "pages/components/autocomplete/FreeSolo.js"}} @@ -78,29 +78,29 @@ Head to the [Customized Autocomplete](#customized-autocomplete) section for a cu {{"demo": "pages/components/autocomplete/Asynchronous.js"}} -### Google Maps place +### Google Maps Ort -A customized UI for Google Maps Places Autocomplete. +Eine angepasste Oberfläche für Google Maps Places Autovervollständigung. {{"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. +Für diese Demo müssen wir die [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API laden. > ⚠️ Bevor Sie die Google Maps JavaScript-API verwenden können, müssen Sie sich anmelden und ein Abrechnungskonto erstellen. ## Mehrere Werte -Also known as tags, the user is allowed to enter more than one value. +Auch als Tags bekannt, darf der Benutzer mehr als einen Wert eingeben. {{"demo": "pages/components/autocomplete/Tags.js"}} -### Fixed options +### Feste Optionen -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. +Falls Sie bestimmte Tags sperren müssen, damit sie nicht in der Schnittstelle entfernt werden können, können Sie die Chips deaktivieren. {{"demo": "pages/components/autocomplete/FixedTags.js"}} -### Checkboxes +### Kontrollkästchen {{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} @@ -112,7 +112,7 @@ Fancy smaller inputs? Verwenden Sie die `size` Prop. ## Angepasste Autovervollständigung -This demo reproduces the GitHub's label picker: +Diese Demo reproduziert die Label-Auswahl von GitHub: {{"demo": "pages/components/autocomplete/GitHubLabel.js"}} @@ -126,23 +126,29 @@ The following demo relies on [autosuggest-highlight](https://github.com/moroshko ## Benutzerderfinierter Filter -The component exposes a factory to create a filter method that can provided to the `filerOption` prop. You can use it to change the default option filter behavior. +The component exposes a factory to create a filter method that can provided to the `filerOption` prop. Sie können es verwenden, um das Standard-Filterverhalten der Option zu ändern. ```js import { createFilterOptions } from '@material-ui/lab/Autocomplete'; ``` -It supports the following options: +### `createFilterOptions(config) => filterOptions` + +#### Parameter 1. `config` (*Object* [optional]): - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Alles in Kleinbuchstaben. - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. - - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. + - `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.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. -In the following demo, the options need to start with the query prefix: +#### Rückgabewerte + +`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. + +In der folgenden Demo müssen die Optionen mit dem Abfragepräfix beginnen: ```js const filterOptions = createFilterOptions({ @@ -170,7 +176,7 @@ const filterOptions = (options, { inputValue }) => ## Virtualisierung -Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). +Suche innerhalb von 10.000 zufällig generierten Optionen. Die Liste ist virtualisiert dank [react-window](https://github.com/bvaughn/react-window). {{"demo": "pages/components/autocomplete/Virtualize.js"}} @@ -178,11 +184,11 @@ 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. +Die Browser haben Heuristiken, um den Benutzern zu helfen, die Formulareingaben auszufüllen. Es kann jedoch die UX der Komponente negativ beeinflussen. 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: +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"`: @@ -197,14 +203,14 @@ However, in addition to remembering past entered values, the browser might also ### iOS VoiceOver -VoiceOver on iOS Safari doesn't support the `aria-owns` attribute very well. You can work around the issue with the `disablePortal` prop. +VoiceOver auf iOS Safari unterstützt das `aria-owns` Attribut nicht sehr gut. You can work around the issue with the `disablePortal` prop. ### TypeScript -To fully take advantage of type inference, you need to set the `multiple` prop to `undefined`, `false` or `true`. See [this discussion](https://github.com/mui-org/material-ui/pull/18854#discussion_r364215153) for more details. TypeScript might solve this bug in the future. +To fully take advantage of type inference, you need to set the `multiple` prop to `undefined`, `false` or `true`. See [this discussion](https://github.com/mui-org/material-ui/pull/18854#discussion_r364215153) for more details. TypeScript könnte diesen Fehler in Zukunft lösen. ## Barrierefreiheit (WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) -We encourage the usage of a label for the textbox. The component implements the WAI-ARIA authoring practices. \ No newline at end of file +Wir empfehlen die Verwendung eines Labels für die Textbox. Die Komponente implementiert die WAI-ARIA Autorenpraktiken. \ No newline at end of file diff --git a/docs/src/pages/components/autocomplete/autocomplete-es.md b/docs/src/pages/components/autocomplete/autocomplete-es.md index 3254a93b2d2a7f..0b941d639f677c 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-es.md +++ b/docs/src/pages/components/autocomplete/autocomplete-es.md @@ -20,11 +20,11 @@ El valor debe elegirse de un conjunto predefinido de valores permitidos. ### Playground -Each of the following examples demonstrate one feature of the Autocomplete component. +Cada uno de los siguientes ejemplos demuestran una característica del componente Autocompletado. {{"demo": "pages/components/autocomplete/Playground.js"}} -### Country select +### Selección de País Choose one country between 248. @@ -32,9 +32,9 @@ Choose one country between 248. ## Free solo -Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search. +Setear `freeSolo` a true, para que el cuadro de texto pueda contener cualquier valor arbitrario. La propiedad está diseñada para cubrir el principal caso de uso de una caja de búsqueda con sugerencias, ej: Google Search. -However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus` (it helps the user clearning the selected value). +However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus` (it helps the user clear the selected value). {{"demo": "pages/components/autocomplete/FreeSolo.js"}} @@ -100,7 +100,7 @@ In the event that you need to lock certain tag so that they can't be removed in {{"demo": "pages/components/autocomplete/FixedTags.js"}} -### Checkboxes +### Casillas de Verificación {{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} @@ -120,7 +120,7 @@ Head to the [Customized hook](#customized-hook) section for a customization exam ## Destacados -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 siguiente demostración se basa en [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), una pequeña utilidad (1 kB) para resaltar texto en componentes de autosuggest y autocompletar. {{"demo": "pages/components/autocomplete/Highlights.js"}} @@ -132,16 +132,22 @@ The component exposes a factory to create a filter method that can provided to t import { createFilterOptions } from '@material-ui/lab/Autocomplete'; ``` -It supports the following options: +### `createFilterOptions(config) => filterOptions` + +#### Argumentos 1. `config` (*Object* [optional]): - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. - - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. + - `config.stringify` (*Func* [optional]): Controls how an option is converted into a string so that it can be matched against the input text fragment. - `config.trim` (*Boolean* [optional]): Default `false`. Remove trailing spaces. - `config.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. +#### Regresa + +`filterOptions`: the returned filter method can be provided directly to the `filterOptions` prop of the `Autocomplete` component, or the parameter of the same name for the hook. + In the following demo, the options need to start with the query prefix: ```js diff --git a/docs/src/pages/components/autocomplete/autocomplete-fr.md b/docs/src/pages/components/autocomplete/autocomplete-fr.md index ef33cda22d511d..e998825f4a8e7f 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-fr.md +++ b/docs/src/pages/components/autocomplete/autocomplete-fr.md @@ -34,7 +34,7 @@ Choose one country between 248. Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search. -However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus` (it helps the user clearning the selected value). +However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus` (it helps the user clear the selected value). {{"demo": "pages/components/autocomplete/FreeSolo.js"}} @@ -100,7 +100,7 @@ In the event that you need to lock certain tag so that they can't be removed in {{"demo": "pages/components/autocomplete/FixedTags.js"}} -### Checkboxes +### Cases à cocher {{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} @@ -132,16 +132,22 @@ The component exposes a factory to create a filter method that can provided to t import { createFilterOptions } from '@material-ui/lab/Autocomplete'; ``` -It supports the following options: +### `createFilterOptions(config) => filterOptions` + +#### 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.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. - - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. + - `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. - `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. +#### 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. + In the following demo, the options need to start with the query prefix: ```js diff --git a/docs/src/pages/components/autocomplete/autocomplete-ja.md b/docs/src/pages/components/autocomplete/autocomplete-ja.md index ed79976262e8bb..a01fb58547e354 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-ja.md +++ b/docs/src/pages/components/autocomplete/autocomplete-ja.md @@ -34,7 +34,7 @@ Choose one country between 248. Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search. -However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus` (it helps the user clearning the selected value). +However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus` (it helps the user clear the selected value). {{"demo": "pages/components/autocomplete/FreeSolo.js"}} @@ -100,7 +100,7 @@ In the event that you need to lock certain tag so that they can't be removed in {{"demo": "pages/components/autocomplete/FixedTags.js"}} -### Checkboxes +### Checkbox {{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} @@ -132,16 +132,22 @@ The component exposes a factory to create a filter method that can provided to t import { createFilterOptions } from '@material-ui/lab/Autocomplete'; ``` -It supports the following options: +### `createFilterOptions(config) => filterOptions` + +#### 引数 1. `config` (*Object* [optional]): - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. - - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. + - `config.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` (*ブール値* [任意]): デフォルト値 `false`. Remove trailing spaces. - `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. +#### 戻り値 + +`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. + In the following demo, the options need to start with the query prefix: ```js diff --git a/docs/src/pages/components/autocomplete/autocomplete-pt.md b/docs/src/pages/components/autocomplete/autocomplete-pt.md index 0a0c5f6be5fd56..4869d5648add81 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-pt.md +++ b/docs/src/pages/components/autocomplete/autocomplete-pt.md @@ -14,19 +14,19 @@ The widget is useful for setting the value of a single-line textbox in one of tw ## Combo box -The value must be chosen from a predefined set of allowed values. +O valor deve ser escolhido a partir de um conjunto predefinido de valores permitidos. {{"demo": "pages/components/autocomplete/ComboBox.js"}} ### Playground -Each of the following examples demonstrate one feature of the Autocomplete component. +Cada um dos exemplos a seguir demonstra uma funcionalidade do componente Autocomplet. {{"demo": "pages/components/autocomplete/Playground.js"}} ### Country select -Choose one country between 248. +Escolha um país entre 248. {{"demo": "pages/components/autocomplete/CountrySelect.js"}} @@ -34,13 +34,13 @@ Choose one country between 248. Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search. -However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus` (it helps the user clearning the selected value). +However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus` (it helps the user clear the selected value). {{"demo": "pages/components/autocomplete/FreeSolo.js"}} ### Helper message -Sometimes you want to make explicit to the user that he/she can add whatever value he/she wants. The following demo adds a last option: `Add "YOUR SEARCH"`. +Às vezes você quer tornar explícito ao usuário que ele pode adicionar qualquer valor que ele/ela quiser. The following demo adds a last option: `Add "YOUR SEARCH"`. {{"demo": "pages/components/autocomplete/FreeSoloCreateOption.js"}} @@ -88,9 +88,9 @@ For this demo, we need to load the [Google Maps JavaScript](https://developers.g > ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account. -## Multiple values +## Múltiplos valores -Also known as tags, the user is allowed to enter more than one value. +Também conhecidos como tags, o usuário pode inserir mais de um valor. {{"demo": "pages/components/autocomplete/Tags.js"}} @@ -100,7 +100,7 @@ In the event that you need to lock certain tag so that they can't be removed in {{"demo": "pages/components/autocomplete/FixedTags.js"}} -### Checkboxes +### Caixas de Seleção {{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} @@ -132,16 +132,22 @@ The component exposes a factory to create a filter method that can provided to t import { createFilterOptions } from '@material-ui/lab/Autocomplete'; ``` -It supports the following options: +### `createFilterOptions(config) => filterOptions` + +#### Argumentos 1. `config` (*Object* [optional]): - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. - - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. + - `config.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* [opcional]): Padrão `false`. Remove trailing spaces. - `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. +#### Retornos + +`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. + In the following demo, the options need to start with the query prefix: ```js diff --git a/docs/src/pages/components/autocomplete/autocomplete-ru.md b/docs/src/pages/components/autocomplete/autocomplete-ru.md index c4e3566dfee5c0..8a58dc30ab4b8b 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-ru.md +++ b/docs/src/pages/components/autocomplete/autocomplete-ru.md @@ -12,7 +12,7 @@ components: TextField, Popper, Autocomplete 1. Значение для текстового поля должно быть выбрано из предопределенного набора допустимых значений, например, поле местоположения должно содержать действительное имя местоположения: [поле со списком](#combo-box). 2. Текстовое поле может содержать любое произвольное значение, но целесообразно предлагать пользователю возможные значения. Например, поле поиска может предлагать аналогичные или предыдущие поиски, чтобы сэкономить время пользователя: [free solo](#free-solo). -## Ком-Бог +## Комбо-Бокс Значение должно быть выбрано из предопределенного набора допустимых значений. @@ -30,21 +30,21 @@ components: TextField, Popper, Autocomplete {{"demo": "pages/components/autocomplete/CountrySelect.js"}} -## Бесплатное соло +## Произвольное значение -Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search. +Установите для `freeSolo` значение true, чтобы текстовое поле могло содержать любое произвольное значение. Это свойство предназначено для использования в качестве поискового окна с подсказками, например как поиск Google. -However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus` (it helps the user clearning the selected value). +However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus` (it helps the user clear the selected value). {{"demo": "pages/components/autocomplete/FreeSolo.js"}} -### Helper message +### Вспомогательное сообщение -Sometimes you want to make explicit to the user that he/she can add whatever value he/she wants. The following demo adds a last option: `Add "YOUR SEARCH"`. +Если вы хотите четко указать пользователю, что он/она может добавить любое значение. Следующее демо добавляет последний вариант: `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"}} @@ -58,7 +58,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. +Для продвинутой кастомизации используйте `useAutocomplete()` хук. 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'; @@ -78,7 +78,7 @@ Head to the [Customized Autocomplete](#customized-autocomplete) section for a cu {{"demo": "pages/components/autocomplete/Asynchronous.js"}} -### Google Maps place +### Места Google Maps A customized UI for Google Maps Places Autocomplete. @@ -94,13 +94,13 @@ 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. +В случае, если вам нужно зафиксировать определенный тег (так что он не мог быть удалён через интерфейс), вы можете установить chips в состояние disabled. {{"demo": "pages/components/autocomplete/FixedTags.js"}} -### Checkboxes +### Чекбоксы {{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} @@ -132,16 +132,22 @@ The component exposes a factory to create a filter method that can provided to t import { createFilterOptions } from '@material-ui/lab/Autocomplete'; ``` -It supports the following options: +### `createFilterOptions(config) => filterOptions` + +#### Аргументы 1. `config` (*Object* [optional]): - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. - - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. + - `config.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]): По умолчанию - `false`. Remove trailing spaces. - `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. +#### Возвращает + +`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. + In the following demo, the options need to start with the query prefix: ```js @@ -170,7 +176,7 @@ const filterOptions = (options, { inputValue }) => ## Виртуализация -Search within 10,000 randomly generated options. The list is virtualized thanks to [react-window](https://github.com/bvaughn/react-window). +Поиск в 10000 случайно сгенерированных опций. Список виртуализирован благодаря [реагирующему окну](https://github.com/bvaughn/react-window). {{"demo": "pages/components/autocomplete/Virtualize.js"}} diff --git a/docs/src/pages/components/autocomplete/autocomplete-zh.md b/docs/src/pages/components/autocomplete/autocomplete-zh.md index 507861295a4371..b44ea1d7b6394a 100644 --- a/docs/src/pages/components/autocomplete/autocomplete-zh.md +++ b/docs/src/pages/components/autocomplete/autocomplete-zh.md @@ -30,23 +30,23 @@ components: TextField, Popper, Autocomplete {{"demo": "pages/components/autocomplete/CountrySelect.js"}} -## 自由独奏 +## 免费工具 -Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search. +将 `freeSolo` 设置为true，以便在文本框中输入任意值。 Prop的设计是为了覆盖搜索框的主要用例，并提出建议，例如谷歌搜索。 -However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus` (it helps the user clearning the selected value). +然而，仍然存在着这种情况。 如果您打算将它用于一个 [组合框](#combo-box) (一个强化的选定元素版本)，我们建议设置 `selectOnFocus` (它帮助用户清除选定的值)。 {{"demo": "pages/components/autocomplete/FreeSolo.js"}} -### Helper message +### 帮助信息 -Sometimes you want to make explicit to the user that he/she can add whatever value he/she wants. The following demo adds a last option: `Add "YOUR SEARCH"`. +有时您想要向用户显示他/她可以添加自己想要的任何值。 以下的演示增加了一个最新的操作方式：`添加“你的搜索”` -{{"demo": "pages/components/autocomplete/FreeSoloCreateOption.js"}} +{{"demo": "pages/components/autocomplete/FreeSolo.js"}} -You could also display a dialog when the user wants to add a new value. +您也可以在用户想要添加一个新的值时显示一个对话框 -{{"demo": "pages/components/autocomplete/FreeSoloCreateOptionDialog.js"}} +{{"demo": "pages/components/autocomplete/FreeSolo.js"}} ## 分组 @@ -54,11 +54,11 @@ You could also display a dialog when the user wants to add a new value. ## 已禁用的选项 -{{"demo": "pages/components/autocomplete/DisabledOptions.js"}} +{{"demo": "pages/components/autocomplete/disabledOptions.js"}} ## `使用自动完成` -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. +作为一种高级定制方式，我们公开了一个 `useAutocomplete()` 钩子方法。 它接受几乎与Autocomplete组件相同的参数，辅以与JSX渲染有关的所有参数。 Autocomplete组件内部也是使用的此钩子方法。 ```jsx import useAutocomplete from '@material-ui/lab/useAutocomplete'; @@ -68,51 +68,51 @@ import useAutocomplete from '@material-ui/lab/useAutocomplete'; {{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} -### Customized hook +### 自定义钩子 -{{"demo": "pages/components/autocomplete/CustomizedHook.js"}} +{{"demo": "pages/components/autocomplete/ustomizedHook.js"}} -Head to the [Customized Autocomplete](#customized-autocomplete) section for a customization example with the `Autocomplete` component instead of the hook. +转到[自定义自动完成](#customized-autocomplete)部分，查看使用 `Autocomplete` 组件（而不是钩子）的例子。 ## 异步请求 -{{"demo": "pages/components/autocomplete/Asynchronous.js"}} +{{"demo": "pages/components/autocomplete/disabledOptions.js"}} -### Google Maps place +### 谷歌地图位置 A customized UI for Google Maps Places Autocomplete. {{"demo": "pages/components/autocomplete/GoogleMaps.js"}} -For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API. +对于这个演示，我们需要加载 [谷歌地图JavaScript](https://developers. google. com/maps/documentation/javascript/tutorial) API。 > 在你开始使用谷歌地图javascript API之前，你需要创建一个帐户 (用于使用谷歌地图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"}} -### Checkboxes +### 复选框 {{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} ## 尺寸 -Fancy smaller inputs? Use the `size` prop. +想要使用外观看起来比较小的输入框吗？ Use the `size` prop. {{"demo": "pages/components/autocomplete/Sizes.js"}} ## 定制的自动完成组件 -This demo reproduces the GitHub's label picker: +该演示再现了GitHub的标签选择器： {{"demo": "pages/components/autocomplete/GitHubLabel.js"}} @@ -132,16 +132,22 @@ The component exposes a factory to create a filter method that can provided to t import { createFilterOptions } from '@material-ui/lab/Autocomplete'; ``` -It supports the following options: +### `createFilterOptions(config) => filterOptions` + +#### 参数 1. `config` (*Object* [optional]): - `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Remove diacritics. - `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Lowercase everything. - `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. - - `config.stringify` (*Func* [optional]): Defaults to `JSON.stringify`. + - `config.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]): 默认值为`false`。 Remove trailing spaces. - `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. +#### 返回结果 + +`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. + In the following demo, the options need to start with the query prefix: ```js diff --git a/docs/src/pages/components/avatars/avatars-de.md b/docs/src/pages/components/avatars/avatars-de.md index dbc9a1c7f38e1f..3b27542b5946b6 100644 --- a/docs/src/pages/components/avatars/avatars-de.md +++ b/docs/src/pages/components/avatars/avatars-de.md @@ -41,8 +41,8 @@ If you need square or rounded avatars, use the `variant` prop. 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 +- die mitgegebenen children +- den ersten Buchstaben des `alt`-Textes - ein generisches Avatar-Symbol {{"demo": "pages/components/avatars/FallbackAvatars.js"}} diff --git a/docs/src/pages/components/backdrop/backdrop-zh.md b/docs/src/pages/components/backdrop/backdrop-zh.md index bfea124bbcb772..8fd4c7ad27d504 100644 --- a/docs/src/pages/components/backdrop/backdrop-zh.md +++ b/docs/src/pages/components/backdrop/backdrop-zh.md @@ -1,6 +1,6 @@ --- title: 覆盖 React 组件 -components: Backdrop +components: 背景板（Backdrop） --- # Backdrop 背景板 diff --git a/docs/src/pages/components/badges/badges-zh.md b/docs/src/pages/components/badges/badges-zh.md index 13ad4c92c0a6ec..7ac869cf43aa8d 100644 --- a/docs/src/pages/components/badges/badges-zh.md +++ b/docs/src/pages/components/badges/badges-zh.md @@ -25,25 +25,25 @@ components: Badge {{"demo": "pages/components/badges/BadgeVisibility.js"}} -The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. +当 badgeContent 为零时，徽章组件将会自动隐藏。 您可以使用 `showZero` 属性覆盖它。 {{"demo": "pages/components/badges/ShowZeroBadge.js"}} ## Maximum value -You can use the `max` property to cap the value of the badge content. +您可以使用 `max` 属性来限制徽章内容的最大值。 {{"demo": "pages/components/badges/BadgeMax.js"}} ## Dot badge -The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count. +`dot` 属性会使得徽章渲染为一个小点。 这样的组件可以作为一个提示的工具，来说明有些值已经改变，但是不需要计数。 {{"demo": "pages/components/badges/DotBadge.js"}} ## 徽章组件的覆盖 -You can use the `overlap` property to place the badge relative to the corner of the wrapped element. +您可以使用 `overlap` 这个属性，在封装的元素相对的一角来显示徽章组件。 {{"demo": "pages/components/badges/BadgeOverlap.js"}} diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation-es.md b/docs/src/pages/components/bottom-navigation/bottom-navigation-es.md index fca17c15fd1098..102d0bc3e852de 100644 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation-es.md +++ b/docs/src/pages/components/bottom-navigation/bottom-navigation-es.md @@ -1,5 +1,5 @@ --- -title: Componente de React para navegación a pie de página +title: Componente para navegación a pie de página components: BottomNavigation, BottomNavigationAction --- 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 dacfc0718b85e7..e73311e9edf808 100644 --- a/docs/src/pages/components/button-group/button-group-zh.md +++ b/docs/src/pages/components/button-group/button-group-zh.md @@ -3,19 +3,19 @@ title: ButtonGroup React component components: Button, ButtonGroup --- -# Button group +# Button groups（按钮组） -

The ButtonGroup component can be used to group related buttons.

+

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

-## Basic button group +## 基本的按钮组 {{"demo": "pages/components/button-group/BasicButtonGroup.js"}} -### Group sizes and colors +### 按钮组尺寸和颜色 {{"demo": "pages/components/button-group/GroupSizesColors.js"}} -### Group orientation +### 按钮组方向 {{"demo": "pages/components/button-group/GroupOrientation.js"}} diff --git a/docs/src/pages/components/buttons/buttons-de.md b/docs/src/pages/components/buttons/buttons-de.md index ccb25bbf73a879..5bba9b4262d5f5 100644 --- a/docs/src/pages/components/buttons/buttons-de.md +++ b/docs/src/pages/components/buttons/buttons-de.md @@ -54,7 +54,7 @@ Fancy larger or smaller buttons? Verwende die Eigenschaft `size`. {{"demo": "pages/components/buttons/ButtonSizes.js"}} -## Buttons with icons and label +## Buttons mit Symbolen und Beschriftung Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon. diff --git a/docs/src/pages/components/buttons/buttons-es.md b/docs/src/pages/components/buttons/buttons-es.md index eb6e1fa300b9dc..fc7efb192efc6b 100644 --- a/docs/src/pages/components/buttons/buttons-es.md +++ b/docs/src/pages/components/buttons/buttons-es.md @@ -54,13 +54,13 @@ Botones más grandes o más pequeños? Usa la propiedad `size`. {{"demo": "pages/components/buttons/ButtonSizes.js"}} -## Buttons with icons and label +## Botones con iconos y títulos Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon. {{"demo": "pages/components/buttons/IconLabelButtons.js"}} -## Icon Buttons +## Botones con Iconos Icon buttons are commonly found in app bars and toolbars. @@ -76,7 +76,7 @@ Here are some examples of customizing the component. You can learn more about th 👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/button). -## Complex Buttons +## Botones Complejos The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. You can take advantage of this lower level component to build custom interactions. diff --git a/docs/src/pages/components/buttons/buttons-fr.md b/docs/src/pages/components/buttons/buttons-fr.md index e63aeccba57973..f1fd876263c993 100644 --- a/docs/src/pages/components/buttons/buttons-fr.md +++ b/docs/src/pages/components/buttons/buttons-fr.md @@ -54,13 +54,13 @@ Fancy larger or smaller buttons? Use the `size` property. {{"demo": "pages/components/buttons/ButtonSizes.js"}} -## Buttons with icons and label +## Boutons avec des icônes et une étiquette Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon. {{"demo": "pages/components/buttons/IconLabelButtons.js"}} -## Icon Buttons +## Boutons avec icône Icon buttons are commonly found in app bars and toolbars. @@ -68,7 +68,7 @@ Icons are also appropriate for toggle buttons that allow a single choice to be s {{"demo": "pages/components/buttons/IconButtons.js"}} -## Customized buttons +## Boutons personnalisés Here are some examples of customizing the component. Vous pouvez en savoir plus dans la [page de documentation des overrides](/customization/components/). @@ -76,7 +76,7 @@ Here are some examples of customizing the component. Vous pouvez en savoir plus 👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/button). -## Complex Buttons +## Boutons complexes The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. You can take advantage of this lower level component to build custom interactions. diff --git a/docs/src/pages/components/buttons/buttons-ja.md b/docs/src/pages/components/buttons/buttons-ja.md index 9086d3ac31f82a..8a8c08ce3f575d 100644 --- a/docs/src/pages/components/buttons/buttons-ja.md +++ b/docs/src/pages/components/buttons/buttons-ja.md @@ -54,7 +54,7 @@ Outlined buttons are also a lower emphasis alternative to contained buttons, or {{"demo": "pages/components/buttons/ButtonSizes.js"}} -## Buttons with icons and label +## アイコンとラベルの付いたButton Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon. @@ -68,7 +68,7 @@ Icons are also appropriate for toggle buttons that allow a single choice to be s {{"demo": "pages/components/buttons/IconButtons.js"}} -## Customized buttons +## カスタムButton コンポーネントのカスタマイズの例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。 @@ -76,7 +76,7 @@ Icons are also appropriate for toggle buttons that allow a single choice to be s 👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/button). -## Complex Buttons +## 複雑なButton The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. You can take advantage of this lower level component to build custom interactions. diff --git a/docs/src/pages/components/buttons/buttons-pt.md b/docs/src/pages/components/buttons/buttons-pt.md index 3ef4cab5ebcc0b..ec7a0d396472e4 100644 --- a/docs/src/pages/components/buttons/buttons-pt.md +++ b/docs/src/pages/components/buttons/buttons-pt.md @@ -54,13 +54,13 @@ Gosta de botões maiores ou menores? Use a propriedade `size`. {{"demo": "pages/components/buttons/ButtonSizes.js"}} -## Buttons with icons and label +## Botões com ícones e rótulo Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon. {{"demo": "pages/components/buttons/IconLabelButtons.js"}} -## Icon Buttons +## Botões de Ícone Icon buttons are commonly found in app bars and toolbars. @@ -68,7 +68,7 @@ Icons are also appropriate for toggle buttons that allow a single choice to be s {{"demo": "pages/components/buttons/IconButtons.js"}} -## Customized buttons +## Botões Personalizados Aqui estão alguns exemplos de customização do componente. Você pode aprender mais sobre isso na [página de documentação de sobrescritas](/customization/components/). @@ -76,7 +76,7 @@ Aqui estão alguns exemplos de customização do componente. Você pode aprender 👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/button). -## Complex Buttons +## Botões Complexos The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. You can take advantage of this lower level component to build custom interactions. diff --git a/docs/src/pages/components/buttons/buttons-ru.md b/docs/src/pages/components/buttons/buttons-ru.md index 8f8925a26b477d..634760bfc9ed54 100644 --- a/docs/src/pages/components/buttons/buttons-ru.md +++ b/docs/src/pages/components/buttons/buttons-ru.md @@ -54,13 +54,13 @@ Fancy larger or smaller buttons? Use the `size` property. {{"demo": "pages/components/buttons/ButtonSizes.js"}} -## Buttons with icons and label +## Кнопки с иконками и текстом Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon. {{"demo": "pages/components/buttons/IconLabelButtons.js"}} -## Icon Buttons +## Кнопки с иконками Icon buttons are commonly found in app bars and toolbars. @@ -68,7 +68,7 @@ Icons are also appropriate for toggle buttons that allow a single choice to be s {{"demo": "pages/components/buttons/IconButtons.js"}} -## Customized buttons +## Настраиваемые кнопки Ниже находятся примеры кастомизации компонента. You can learn more about this in the [overrides documentation page](/customization/components/). @@ -76,7 +76,7 @@ Icons are also appropriate for toggle buttons that allow a single choice to be s 👑 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/button). -## Complex Buttons +## Сложные кнопки The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. You can take advantage of this lower level component to build custom interactions. diff --git a/docs/src/pages/components/buttons/buttons-zh.md b/docs/src/pages/components/buttons/buttons-zh.md index f85d2f96b68114..fdd07e6bd380b4 100644 --- a/docs/src/pages/components/buttons/buttons-zh.md +++ b/docs/src/pages/components/buttons/buttons-zh.md @@ -1,5 +1,5 @@ --- -title: React Button（按钮）组件 +title: React Button 按钮组件 components: Button, IconButton, ButtonBase --- @@ -7,94 +7,94 @@ components: Button, IconButton, ButtonBase

只需通过轻按一下按钮，用户即可采取行动并做出选择。

-[按钮](https://material.io/design/components/buttons.html) 传达用户可以执行的操作。 他们通常直接放置在您的用户界面中，例如： +[按钮](https://material.io/design/components/buttons.html) 传达了一系列用户可以执行的操作命令。 他们通常直接放置在您的用户界面中，例如： -- Dialogs（对话框） -- Modal windows（模态窗口） -- Forms（表单） -- Cards（卡片） -- Toolbars（工具栏) +- Dialogs 对话框 +- Modal windows 模态窗口 +- Forms 表单 +- Cards 卡片 +- Toolbars 工具栏 -## Contained Buttons（实心按钮） +## Contained Buttons 实心按钮 -[实心按钮](https://material.io/design/components/buttons.html#contained-button)表示高度的强调, 根据他们的立体效果和填充颜色来区分彼此。 它们用于触发应用程序所具有的主要功能。 +[实心按钮](https://material.io/design/components/buttons.html#contained-button)表示高度的强调，你根据它们的立体效果和填充颜色来区分彼此。 它们用于触发应用程序所具有的主要功能。 {{"demo": "pages/components/buttons/ContainedButtons.js"}} -You can remove the elevation with the `disableElevation` prop. +你也可以使用属性 `disableElevation` 属性来消除实心按钮的立体效果。 {{"demo": "pages/components/buttons/DisableElevation.js"}} -## Text Buttons（文本按钮） +## Text Buttons 文本按钮 -[Text buttons](https://material.io/design/components/buttons.html#text-button) are typically used for less-pronounced actions, including those located: +[文本按钮](https://material.io/design/components/buttons.html#text-button)通常用于不太明显的操作，包括那些存在于： -- dialogs（对话框）中的 -- cards（卡片）中的 +- 在 dialogs 对话框中的 +- 在 cards 卡片中的 -In cards, text buttons help maintain an emphasis on card content. +在卡片中，文本按钮有助于强调卡片的内容。 {{"demo": "pages/components/buttons/TextButtons.js"}} -## Outlined Buttons（描边按钮） +## Outlined Buttons 描边按钮 -[Outlined buttons](https://material.io/design/components/buttons.html#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app. +[描边按钮](https://material.io/design/components/buttons.html#outlined-button)表示中等的强调。 它们包含了一些重要的操作，但不是一个 app 中的主要操作。 -Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons. +你也可以将描边按钮作为比实心按钮次要一点的替代方案，或者用来作为比文本按钮重要一点的展示。 {{"demo": "pages/components/buttons/OutlinedButtons.js"}} -## Upload button +## 一个上传按钮 {{"demo": "pages/components/buttons/UploadButtons.js"}} ## 尺寸 -想要更大或更小的按钮？ 你可以使用 `size` 属性。 +您想要一个大一点或者小一点的按钮吗？ 我们提供了 `size` 这个属性供您调整。 {{"demo": "pages/components/buttons/ButtonSizes.js"}} -## Buttons with icons and label +## 带有 icons 图标和 label 标签的按钮 -Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon. +有时您可能想在特定一个按钮上添加图标以增强应用程序的用户体验，因为大多数情况下我们觉得图标比纯文本更有辨识度。 例如，如果您有删除按钮，则可以使用垃圾箱图标对其进行标记。 {{"demo": "pages/components/buttons/IconLabelButtons.js"}} -## Icon Buttons +## Icon Buttons 图标按钮 -Icon buttons are commonly found in app bars and toolbars. +图标按钮通常运用于应用栏和工具栏。 -Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. +图标也适用于实现单个选项的选择和或取消选择的切换按钮，例如向一个元素添加或删除星标。 {{"demo": "pages/components/buttons/IconButtons.js"}} -## Customized buttons +## 自定义按钮 以下是自定义组件的一些例子。 您可以在[重写文档页](/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/components/button). +👑如果您还在寻找灵感，您可以查看一下 [MUI Treasury 自定义的例子](https://mui-treasury.com/components/button)。 -## Complex Buttons +## Complex Buttons 复杂按钮 -The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. You can take advantage of this lower level component to build custom interactions. +文本按钮，包含按钮，浮动操作按钮和图标按钮都基于同一个组件：`ButtonBase`。 利用此较底层的组件，您可以创建一些自定义的交互操作。 {{"demo": "pages/components/buttons/ButtonBase.js"}} -## Third-party routing library（第三方路由库） +## Third-party routing library 第三方路由库 -One common use case is to use the button to trigger navigation to a new page. The `ButtonBase` component provides a property to handle this use case: `component`. However for certain focus polyfills `ButtonBase` requires the DOM node of the provided component. This is achieved by attaching a ref to the component and expecting that the component forwards this ref to the underlying DOM node. Given that many of the interactive components rely on `ButtonBase`, you should be able to take advantage of it everywhere. +我们发现的一个常用案例，是用按钮来导航用户到新的页面。 你可以用 `ButtonBase` 的 `component` 属性来处理这样的事件。 然而，一些针对 `ButtonBase` 的特定 polyfills 补丁则要求该组件的 DOM 节点。 您可以尝试在组件上附加一个 ref，并且预期此组件能够将这个 ref 传递到下层 DOM 节点，通过这样的方法可以实现。 鉴于许多我们的交互式组件都基于 `ButtonBase`，您可以在很多情况下受益。 -Here is an [integration example with react-router](/guides/composition/#button). +这就有一个[与 react-router 交互的例子](/guides/composition/#button)。 ## 局限性 -### Cursor not-allowed +### Cursor 鼠标悬浮的禁用 -The ButtonBase component sets `pointer-events: none;` on disabled buttons, which prevents the appearance of a disabled cursor. +在 disabled 不可用的按钮上，ButtonBase 组件会有这个设置：`pointer-events: none;` ，这样一来不可用样式的鼠标悬浮就不会出现。 -If you wish to use `not-allowed`, you have two options: +若您希望使用 `not-allowed`， 您有以下两种选择： 1. **CSS only**。 您可以移除作用在 `