Skip to content

Commit

Permalink
Revert attempt at renaming
Browse files Browse the repository at this point in the history
  • Loading branch information
eps1lon committed Jun 23, 2020
1 parent dee2e6f commit f034f65
Show file tree
Hide file tree
Showing 8 changed files with 109 additions and 109 deletions.
26 changes: 13 additions & 13 deletions docs/src/pages/components/accordion/accordion-de.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Expansion Panel React-Komponente
components: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary
title: Accordion React-Komponente
components: Accordion, AccordionActions, AccordionDetails, AccordionSummary
---

# Expansion Panel (erweiterungspanel)
# Accordion (erweiterungspanel)

<p class="description">Erweiterungspanels (Tafeln) enthalten Erstellungsabläufe und ermöglichen die einfache Bearbeitung eines Elements.</p>

Expand All @@ -13,32 +13,32 @@ components: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, Expans
## Einfaches Erweiterungspanel

{{"demo": "pages/components/expansion-panels/SimpleExpansionPanel.js", "bg": true}}
{{"demo": "pages/components/accordion/SimpleAccordion.js", "bg": true}}

## Kontrolliertes Akkordeon

Erweitern Sie das Standardbedienfeldverhalten, um ein Akkordeon mit der Komponente `ExpansionPanel` zu erstellen.
Erweitern Sie das Standardbedienfeldverhalten, um ein Akkordeon mit der Komponente `Accordion` zu erstellen.

{{"demo": "pages/components/expansion-panels/ControlledExpansionPanels.js", "bg": true}}
{{"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/expansion-panels/CustomizedExpansionPanels.js"}}
{{"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 `ExpansionPanelSummary`, 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 panel expansion.
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/expansion-panels/ActionsInExpansionPanelSummary.js", "bg": true}}
{{"demo": "pages/components/accordion/ActionsInAccordionSummary.js", "bg": true}}

## Performance

Der Inhalt von ExpansionPanels 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`:
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
<ExpansionPanel TransitionProps={{ unmountOnExit: true }} />
<Accordion TransitionProps={{ unmountOnExit: true }} />
```

Wie bei jeder Leistungsoptimierung ist dies keine Silberkugel. Stellen Sie sicher, dass Sie zuerst Engpässe erkennen und anschließend diese Optimierungsstrategien ausprobieren.
Expand All @@ -47,10 +47,10 @@ Wie bei jeder Leistungsoptimierung ist dies keine Silberkugel. Stellen Sie siche

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/expansion-panels/DetailedExpansionPanel.js", "bg": true}}
{{"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 `ExpansionPanelSummary`. Das `ExpansionPanel` leitet die notwendigen `aria-labelledby` und `id` für den Inhaltsbereich des Panels ab.
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.
26 changes: 13 additions & 13 deletions docs/src/pages/components/accordion/accordion-es.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Componente React Panel de Expansión
components: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary
components: Accordion, AccordionActions, AccordionDetails, AccordionSummary
---

# Expansion Panel (panel de expansión)
# Accordion (panel de expansión)

<p class="description">Los paneles de expansión contienen flujos de creación y permiten una edición simple de un elemento.</p>

Expand All @@ -13,32 +13,32 @@ Un [panel de expansión](https://material.io/archive/guidelines/components/expan
## Panel de expansión simple

{{"demo": "pages/components/expansion-panels/SimpleExpansionPanel.js", "bg": true}}
{{"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 `ExpansionPanel`.
Extiende el comportamiento por defecto del panel para crear un acordeón con el componente `Accordion`.

{{"demo": "pages/components/expansion-panels/ControlledExpansionPanels.js", "bg": true}}
{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}}

## Customized expansion panels
## 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/expansion-panels/CustomizedExpansionPanels.js"}}
{{"demo": "pages/components/accordion/CustomizedAccordions.js"}}

## Additional actions

In order to put an action such as a `Checkbox` or a button inside of the `ExpansionPanelSummary`, 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 panel expansion.
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/expansion-panels/ActionsInExpansionPanelSummary.js", "bg": true}}
{{"demo": "pages/components/accordion/ActionsInAccordionSummary.js", "bg": true}}

## Rendimiento

The content of ExpansionPanels is mounted by default even if the panel is not expanded. This default behavior has server-side rendering and SEO in mind. 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`:
The content of Accordions is mounted by default even if the panel is not expanded. This default behavior has server-side rendering and SEO in mind. 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
<ExpansionPanel TransitionProps={{ unmountOnExit: true }} />
<Accordion TransitionProps={{ unmountOnExit: true }} />
```

As with any performance optimization this is not a silver bullet. Be sure to identify bottlenecks first and then try out these optimization strategies.
Expand All @@ -47,10 +47,10 @@ As with any performance optimization this is not a silver bullet. Be sure to ide

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/expansion-panels/DetailedExpansionPanel.js", "bg": true}}
{{"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 `ExpansionPanelSummary`. El `ExpansionPanel` derivará los necesarios `aria-labelledby` y `id` para la región de contenido del panel.
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.
26 changes: 13 additions & 13 deletions docs/src/pages/components/accordion/accordion-fr.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
---
title: Composant React Panneau d'expansion
components: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary
components: Accordion, AccordionActions, AccordionDetails, AccordionSummary
---

# Expansion Panel (Panneau d'extension)
# Accordion (Panneau d'extension)

<p class="description">Les panneaux d’extension contiennent des flux de création et permettent une édition légère d’un élément.</p>

Expand All @@ -13,32 +13,32 @@ components: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, Expans
## Panneau d'extension simple

{{"demo": "pages/components/expansion-panels/SimpleExpansionPanel.js", "bg": true}}
{{"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 `ExpansionPanel`.
Étendez le comportement du panneau par défaut pour créer un accordéon avec le composant `Accordion`.

{{"demo": "pages/components/expansion-panels/ControlledExpansionPanels.js", "bg": true}}
{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}}

## Customized expansion panels
## Customized accordions

Voici un exemple de personnalisation du composant. Vous pouvez en savoir plus dans la [page de documentation des overrides](/customization/components/).

{{"demo": "pages/components/expansion-panels/CustomizedExpansionPanels.js"}}
{{"demo": "pages/components/accordion/CustomizedAccordions.js"}}

## Additional actions

In order to put an action such as a `Checkbox` or a button inside of the `ExpansionPanelSummary`, 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 panel expansion.
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/expansion-panels/ActionsInExpansionPanelSummary.js", "bg": true}}
{{"demo": "pages/components/accordion/ActionsInAccordionSummary.js", "bg": true}}

## Performances

The content of ExpansionPanels is mounted by default even if the panel is not expanded. This default behavior has server-side rendering and SEO in mind. 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`:
The content of Accordions is mounted by default even if the panel is not expanded. This default behavior has server-side rendering and SEO in mind. 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
<ExpansionPanel TransitionProps={{ unmountOnExit: true }} />
<Accordion TransitionProps={{ unmountOnExit: true }} />
```

As with any performance optimization this is not a silver bullet. Be sure to identify bottlenecks first and then try out these optimization strategies.
Expand All @@ -47,10 +47,10 @@ As with any performance optimization this is not a silver bullet. Be sure to ide

Plusieurs colonnes peuvent être utilisées pour structurer le contenu et un texte d'assistance peut être ajouté au panneau pour aider l'utilisateur.

{{"demo": "pages/components/expansion-panels/DetailedExpansionPanel.js", "bg": true}}
{{"demo": "pages/components/accordion/DetailedAccordion.js", "bg": true}}

## Accessibilité

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion)

For optimal accessibility we recommend setting `id` and `aria-controls` on the `ExpansionPanelSummary`. The `ExpansionPanel` will derive the necessary `aria-labelledby` and `id` for the content region of the panel.
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 panel.
28 changes: 14 additions & 14 deletions docs/src/pages/components/accordion/accordion-ja.md
Original file line number Diff line number Diff line change
@@ -1,44 +1,44 @@
---
title: Expansion Panel React component
components: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary
title: Accordion React component
components: Accordion, AccordionActions, AccordionDetails, AccordionSummary
---

# Expansion Panel (拡張パネル)
# Accordion (拡張パネル)

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

[拡張パネル](https://material.io/archive/guidelines/components/expansion-panels.html)は 独立した軽量のコンテナであるか、カードなどの大きなサーフェスに接続されています。

> **注:** 拡張パネルについては、[Material Design guidelines](https://material.io/)では説明されていませんが、Material-UIでは引き続きサポートされます。
## Simple Expansion Panel
## Simple Accordion

{{"demo": "pages/components/expansion-panels/SimpleExpansionPanel.js", "bg": true}}
{{"demo": "pages/components/accordion/SimpleAccordion.js", "bg": true}}

## Controlled Accordion

パネルのデフォルトの動作を拡張し、`ExpansionPanel`コンポーネントを使用してアコーディオンを作成します。
パネルのデフォルトの動作を拡張し、`Accordion`コンポーネントを使用してアコーディオンを作成します。

{{"demo": "pages/components/expansion-panels/ControlledExpansionPanels.js", "bg": true}}
{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}}

## カスタマイズされた拡張パネル

コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドのドキュメントページ](/customization/components/)を参照してください。

{{"demo": "pages/components/expansion-panels/CustomizedExpansionPanels.js"}}
{{"demo": "pages/components/accordion/CustomizedAccordions.js"}}

## Additional actions

In order to put an action such as a `Checkbox` or a button inside of the `ExpansionPanelSummary`, 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 panel expansion.
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/expansion-panels/ActionsInExpansionPanelSummary.js", "bg": true}}
{{"demo": "pages/components/accordion/ActionsInAccordionSummary.js", "bg": true}}

## パフォーマンス

ExpansionPanelsのコンテンツは、パネルが展開されていない場合でもデフォルトでマウントされます。 このデフォルトの動作では、サーバー側のレンダリングとSEOが考慮されています。 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`:
Accordionsのコンテンツは、パネルが展開されていない場合でもデフォルトでマウントされます。 このデフォルトの動作では、サーバー側のレンダリングとSEOが考慮されています。 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
<ExpansionPanel TransitionProps={{ unmountOnExit: true }} />
<Accordion TransitionProps={{ unmountOnExit: true }} />
```

他のパフォーマンス最適化と同様、これは特効薬ではありません。 まずボトルネックを特定してから、これらの最適化戦略を試してください。
Expand All @@ -47,10 +47,10 @@ ExpansionPanelsのコンテンツは、パネルが展開されていない場

複数の列を使用してコンテンツを構成でき、ユーザーを支援するためにヘルパーテキストをパネルに追加できます。

{{"demo": "pages/components/expansion-panels/DetailedExpansionPanel.js", "bg": true}}
{{"demo": "pages/components/accordion/DetailedAccordion.js", "bg": true}}

## アクセシビリティ

(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion)

最適なアクセシビリティのために、 `ExpansionPanelSummary``id``aria-controls` を設定することをお勧めします。 `ExpansionPanel` は、パネルのコンテンツ領域に必要な `aria-labelledby` および `id` を導き出します。
最適なアクセシビリティのために、 `AccordionSummary``id``aria-controls` を設定することをお勧めします。 `Accordion` は、パネルのコンテンツ領域に必要な `aria-labelledby` および `id` を導き出します。

0 comments on commit f034f65

Please sign in to comment.