From 0635cc011488d9595313939a72a5864a76db853e Mon Sep 17 00:00:00 2001 From: Marija Najdova Date: Tue, 28 Sep 2021 12:21:36 +0200 Subject: [PATCH 1/6] [docs] Remove translation files for fr, de, ja, es, ru --- .../about-the-lab/about-the-lab-de.md | 58 - .../about-the-lab/about-the-lab-es.md | 58 - .../about-the-lab/about-the-lab-fr.md | 59 - .../about-the-lab/about-the-lab-ja.md | 59 - .../about-the-lab/about-the-lab-ru.md | 58 - .../components/accordion/accordion-de.md | 49 - .../components/accordion/accordion-es.md | 49 - .../components/accordion/accordion-fr.md | 49 - .../components/accordion/accordion-ja.md | 49 - .../components/accordion/accordion-ru.md | 49 - docs/src/pages/components/alert/alert-de.md | 82 - docs/src/pages/components/alert/alert-es.md | 82 - docs/src/pages/components/alert/alert-fr.md | 82 - docs/src/pages/components/alert/alert-ja.md | 82 - docs/src/pages/components/alert/alert-ru.md | 82 - .../pages/components/app-bar/app-bar-de.md | 162 -- .../pages/components/app-bar/app-bar-es.md | 165 -- .../pages/components/app-bar/app-bar-fr.md | 165 -- .../pages/components/app-bar/app-bar-ja.md | 162 -- .../pages/components/app-bar/app-bar-ru.md | 153 -- .../autocomplete/autocomplete-de.md | 326 --- .../autocomplete/autocomplete-es.md | 326 --- .../autocomplete/autocomplete-fr.md | 326 --- .../autocomplete/autocomplete-ja.md | 326 --- .../autocomplete/autocomplete-ru.md | 326 --- .../pages/components/avatars/avatars-de.md | 65 - .../pages/components/avatars/avatars-es.md | 65 - .../pages/components/avatars/avatars-fr.md | 65 - .../pages/components/avatars/avatars-ja.md | 65 - .../pages/components/avatars/avatars-ru.md | 65 - .../pages/components/backdrop/backdrop-de.md | 25 - .../pages/components/backdrop/backdrop-es.md | 25 - .../pages/components/backdrop/backdrop-fr.md | 25 - .../pages/components/backdrop/backdrop-ja.md | 25 - .../pages/components/backdrop/backdrop-ru.md | 25 - docs/src/pages/components/badges/badges-de.md | 73 - docs/src/pages/components/badges/badges-es.md | 73 - docs/src/pages/components/badges/badges-fr.md | 73 - docs/src/pages/components/badges/badges-ja.md | 73 - docs/src/pages/components/badges/badges-ru.md | 73 - .../bottom-navigation/bottom-navigation-de.md | 36 - .../bottom-navigation/bottom-navigation-es.md | 36 - .../bottom-navigation/bottom-navigation-fr.md | 44 - .../bottom-navigation/bottom-navigation-ja.md | 36 - .../bottom-navigation/bottom-navigation-ru.md | 36 - docs/src/pages/components/box/box-de.md | 68 - docs/src/pages/components/box/box-es.md | 68 - docs/src/pages/components/box/box-fr.md | 68 - docs/src/pages/components/box/box-ja.md | 68 - docs/src/pages/components/box/box-ru.md | 68 - .../components/breadcrumbs/breadcrumbs-de.md | 58 - .../components/breadcrumbs/breadcrumbs-es.md | 58 - .../components/breadcrumbs/breadcrumbs-fr.md | 58 - .../components/breadcrumbs/breadcrumbs-ja.md | 58 - .../components/breadcrumbs/breadcrumbs-ru.md | 58 - .../button-group/button-group-de.md | 47 - .../button-group/button-group-es.md | 47 - .../button-group/button-group-fr.md | 47 - .../button-group/button-group-ja.md | 47 - .../button-group/button-group-ru.md | 47 - .../pages/components/buttons/buttons-de.md | 159 -- .../pages/components/buttons/buttons-es.md | 159 -- .../pages/components/buttons/buttons-fr.md | 159 -- .../pages/components/buttons/buttons-ja.md | 159 -- .../pages/components/buttons/buttons-ru.md | 159 -- docs/src/pages/components/cards/cards-de.md | 68 - docs/src/pages/components/cards/cards-es.md | 68 - docs/src/pages/components/cards/cards-fr.md | 68 - docs/src/pages/components/cards/cards-ja.md | 68 - docs/src/pages/components/cards/cards-ru.md | 68 - .../components/checkboxes/checkboxes-de.md | 94 - .../components/checkboxes/checkboxes-es.md | 94 - .../components/checkboxes/checkboxes-fr.md | 94 - .../components/checkboxes/checkboxes-ja.md | 94 - .../components/checkboxes/checkboxes-ru.md | 94 - docs/src/pages/components/chips/chips-de.md | 89 - docs/src/pages/components/chips/chips-es.md | 89 - docs/src/pages/components/chips/chips-fr.md | 89 - docs/src/pages/components/chips/chips-ja.md | 89 - docs/src/pages/components/chips/chips-ru.md | 89 - .../click-away-listener-de.md | 36 - .../click-away-listener-es.md | 36 - .../click-away-listener-fr.md | 36 - .../click-away-listener-ja.md | 36 - .../click-away-listener-ru.md | 36 - .../components/container/container-de.md | 33 - .../components/container/container-es.md | 33 - .../components/container/container-fr.md | 33 - .../components/container/container-ja.md | 33 - .../components/container/container-ru.md | 33 - .../css-baseline/css-baseline-de.md | 93 - .../css-baseline/css-baseline-es.md | 83 - .../css-baseline/css-baseline-fr.md | 97 - .../css-baseline/css-baseline-ja.md | 93 - .../css-baseline/css-baseline-ru.md | 93 - .../components/date-picker/date-picker-de.md | 113 - .../components/date-picker/date-picker-es.md | 113 - .../components/date-picker/date-picker-fr.md | 113 - .../components/date-picker/date-picker-ja.md | 113 - .../components/date-picker/date-picker-ru.md | 113 - .../date-range-picker/date-range-picker-de.md | 88 - .../date-range-picker/date-range-picker-es.md | 88 - .../date-range-picker/date-range-picker-fr.md | 88 - .../date-range-picker/date-range-picker-ja.md | 90 - .../date-range-picker/date-range-picker-ru.md | 88 - .../date-time-picker/date-time-picker-de.md | 79 - .../date-time-picker/date-time-picker-es.md | 79 - .../date-time-picker/date-time-picker-fr.md | 79 - .../date-time-picker/date-time-picker-ja.md | 79 - .../date-time-picker/date-time-picker-ru.md | 79 - .../pages/components/dialogs/dialogs-de.md | 130 -- .../pages/components/dialogs/dialogs-es.md | 130 -- .../pages/components/dialogs/dialogs-fr.md | 130 -- .../pages/components/dialogs/dialogs-ja.md | 130 -- .../pages/components/dialogs/dialogs-ru.md | 130 -- .../pages/components/dividers/dividers-de.md | 62 - .../pages/components/dividers/dividers-es.md | 62 - .../pages/components/dividers/dividers-fr.md | 62 - .../pages/components/dividers/dividers-ja.md | 62 - .../pages/components/dividers/dividers-ru.md | 62 - .../pages/components/drawers/drawers-de.md | 113 - .../pages/components/drawers/drawers-es.md | 113 - .../pages/components/drawers/drawers-fr.md | 113 - .../pages/components/drawers/drawers-ja.md | 113 - .../pages/components/drawers/drawers-ru.md | 113 - .../floating-action-button-de.md | 38 - .../floating-action-button-es.md | 38 - .../floating-action-button-fr.md | 38 - .../floating-action-button-ja.md | 38 - .../floating-action-button-ru.md | 38 - docs/src/pages/components/grid/grid-de.md | 170 -- docs/src/pages/components/grid/grid-es.md | 170 -- docs/src/pages/components/grid/grid-fr.md | 173 -- docs/src/pages/components/grid/grid-ja.md | 170 -- docs/src/pages/components/grid/grid-ru.md | 170 -- docs/src/pages/components/icons/icons-de.md | 323 --- docs/src/pages/components/icons/icons-es.md | 323 --- docs/src/pages/components/icons/icons-fr.md | 326 --- docs/src/pages/components/icons/icons-ja.md | 323 --- docs/src/pages/components/icons/icons-ru.md | 323 --- .../components/image-list/image-list-de.md | 60 - .../components/image-list/image-list-es.md | 60 - .../components/image-list/image-list-fr.md | 60 - .../components/image-list/image-list-ja.md | 60 - .../components/image-list/image-list-ru.md | 60 - docs/src/pages/components/links/links-de.md | 49 - docs/src/pages/components/links/links-es.md | 49 - docs/src/pages/components/links/links-fr.md | 49 - docs/src/pages/components/links/links-ja.md | 49 - docs/src/pages/components/links/links-ru.md | 49 - docs/src/pages/components/lists/lists-de.md | 108 - docs/src/pages/components/lists/lists-es.md | 108 - docs/src/pages/components/lists/lists-fr.md | 108 - docs/src/pages/components/lists/lists-ja.md | 108 - docs/src/pages/components/lists/lists-ru.md | 108 - .../material-icons/material-icons-de.md | 19 - .../material-icons/material-icons-es.md | 19 - .../material-icons/material-icons-fr.md | 19 - .../material-icons/material-icons-ja.md | 19 - .../material-icons/material-icons-ru.md | 19 - docs/src/pages/components/menus/menus-de.md | 89 - docs/src/pages/components/menus/menus-es.md | 89 - docs/src/pages/components/menus/menus-fr.md | 89 - docs/src/pages/components/menus/menus-ja.md | 89 - docs/src/pages/components/menus/menus-ru.md | 89 - docs/src/pages/components/modal/modal-de.md | 123 -- docs/src/pages/components/modal/modal-es.md | 123 -- docs/src/pages/components/modal/modal-fr.md | 123 -- docs/src/pages/components/modal/modal-ja.md | 123 -- docs/src/pages/components/modal/modal-ru.md | 123 -- docs/src/pages/components/no-ssr/no-ssr-de.md | 30 - docs/src/pages/components/no-ssr/no-ssr-es.md | 30 - docs/src/pages/components/no-ssr/no-ssr-fr.md | 30 - docs/src/pages/components/no-ssr/no-ssr-ja.md | 30 - docs/src/pages/components/no-ssr/no-ssr-ru.md | 30 - .../components/pagination/pagination-de.md | 79 - .../components/pagination/pagination-es.md | 79 - .../components/pagination/pagination-fr.md | 79 - .../components/pagination/pagination-ja.md | 79 - .../components/pagination/pagination-ru.md | 79 - docs/src/pages/components/paper/paper-de.md | 29 - docs/src/pages/components/paper/paper-es.md | 29 - docs/src/pages/components/paper/paper-fr.md | 29 - docs/src/pages/components/paper/paper-ja.md | 29 - docs/src/pages/components/paper/paper-ru.md | 29 - .../pages/components/pickers/pickers-de.md | 43 - .../pages/components/pickers/pickers-es.md | 43 - .../pages/components/pickers/pickers-fr.md | 43 - .../pages/components/pickers/pickers-ja.md | 43 - .../pages/components/pickers/pickers-ru.md | 43 - .../pages/components/popover/popover-de.md | 42 - .../pages/components/popover/popover-es.md | 42 - .../pages/components/popover/popover-fr.md | 42 - .../pages/components/popover/popover-ja.md | 42 - .../pages/components/popover/popover-ru.md | 42 - docs/src/pages/components/popper/popper-de.md | 67 - docs/src/pages/components/popper/popper-es.md | 67 - docs/src/pages/components/popper/popper-fr.md | 67 - docs/src/pages/components/popper/popper-ja.md | 67 - docs/src/pages/components/popper/popper-ru.md | 67 - docs/src/pages/components/portal/portal-de.md | 31 - docs/src/pages/components/portal/portal-es.md | 31 - docs/src/pages/components/portal/portal-fr.md | 31 - docs/src/pages/components/portal/portal-ja.md | 31 - docs/src/pages/components/portal/portal-ru.md | 31 - .../pages/components/progress/progress-de.md | 141 -- .../pages/components/progress/progress-es.md | 141 -- .../pages/components/progress/progress-fr.md | 141 -- .../pages/components/progress/progress-ja.md | 141 -- .../pages/components/progress/progress-ru.md | 141 -- .../radio-buttons/radio-buttons-de.md | 114 - .../radio-buttons/radio-buttons-es.md | 114 - .../radio-buttons/radio-buttons-fr.md | 114 - .../radio-buttons/radio-buttons-ja.md | 114 - .../radio-buttons/radio-buttons-ru.md | 114 - docs/src/pages/components/rating/rating-de.md | 68 - docs/src/pages/components/rating/rating-es.md | 68 - docs/src/pages/components/rating/rating-fr.md | 68 - docs/src/pages/components/rating/rating-ja.md | 68 - docs/src/pages/components/rating/rating-ru.md | 68 - .../pages/components/selects/selects-de.md | 136 -- .../pages/components/selects/selects-es.md | 136 -- .../pages/components/selects/selects-fr.md | 136 -- .../pages/components/selects/selects-ja.md | 166 -- .../pages/components/selects/selects-ru.md | 136 -- .../pages/components/skeleton/skeleton-de.md | 95 - .../pages/components/skeleton/skeleton-es.md | 95 - .../pages/components/skeleton/skeleton-fr.md | 89 - .../pages/components/skeleton/skeleton-ja.md | 89 - .../pages/components/skeleton/skeleton-ru.md | 89 - docs/src/pages/components/slider/slider-de.md | 158 -- docs/src/pages/components/slider/slider-es.md | 158 -- docs/src/pages/components/slider/slider-fr.md | 158 -- docs/src/pages/components/slider/slider-ja.md | 158 -- docs/src/pages/components/slider/slider-ru.md | 158 -- .../components/snackbars/snackbars-de.md | 89 - .../components/snackbars/snackbars-es.md | 89 - .../components/snackbars/snackbars-fr.md | 89 - .../components/snackbars/snackbars-ja.md | 89 - .../components/snackbars/snackbars-ru.md | 89 - .../components/speed-dial/speed-dial-de.md | 67 - .../components/speed-dial/speed-dial-es.md | 67 - .../components/speed-dial/speed-dial-fr.md | 67 - .../components/speed-dial/speed-dial-ja.md | 67 - .../components/speed-dial/speed-dial-ru.md | 67 - docs/src/pages/components/stack/stack-de.md | 51 - docs/src/pages/components/stack/stack-es.md | 51 - docs/src/pages/components/stack/stack-fr.md | 51 - docs/src/pages/components/stack/stack-ja.md | 51 - docs/src/pages/components/stack/stack-ru.md | 51 - .../pages/components/steppers/steppers-de.md | 105 - .../pages/components/steppers/steppers-es.md | 105 - .../pages/components/steppers/steppers-fr.md | 105 - .../pages/components/steppers/steppers-ja.md | 105 - .../pages/components/steppers/steppers-ru.md | 105 - .../pages/components/switches/switches-de.md | 74 - .../pages/components/switches/switches-es.md | 74 - .../pages/components/switches/switches-fr.md | 74 - .../pages/components/switches/switches-ja.md | 74 - .../pages/components/switches/switches-ru.md | 74 - docs/src/pages/components/tables/tables-de.md | 122 -- docs/src/pages/components/tables/tables-es.md | 122 -- docs/src/pages/components/tables/tables-fr.md | 122 -- docs/src/pages/components/tables/tables-ja.md | 122 -- docs/src/pages/components/tables/tables-ru.md | 122 -- docs/src/pages/components/tabs/tabs-de.md | 156 -- docs/src/pages/components/tabs/tabs-es.md | 156 -- docs/src/pages/components/tabs/tabs-fr.md | 158 -- docs/src/pages/components/tabs/tabs-ja.md | 156 -- docs/src/pages/components/tabs/tabs-ru.md | 156 -- .../components/text-fields/text-fields-de.md | 278 --- .../components/text-fields/text-fields-es.md | 278 --- .../components/text-fields/text-fields-fr.md | 278 --- .../components/text-fields/text-fields-ja.md | 278 --- .../components/text-fields/text-fields-ru.md | 278 --- .../textarea-autosize/textarea-autosize-de.md | 27 - .../textarea-autosize/textarea-autosize-es.md | 27 - .../textarea-autosize/textarea-autosize-fr.md | 27 - .../textarea-autosize/textarea-autosize-ja.md | 27 - .../textarea-autosize/textarea-autosize-ru.md | 27 - .../components/time-picker/time-picker-de.md | 88 - .../components/time-picker/time-picker-es.md | 88 - .../components/time-picker/time-picker-fr.md | 88 - .../components/time-picker/time-picker-ja.md | 88 - .../components/time-picker/time-picker-ru.md | 88 - .../pages/components/timeline/timeline-de.md | 54 - .../pages/components/timeline/timeline-es.md | 54 - .../pages/components/timeline/timeline-fr.md | 54 - .../pages/components/timeline/timeline-ja.md | 54 - .../pages/components/timeline/timeline-ru.md | 54 - .../toggle-button/toggle-button-de.md | 85 - .../toggle-button/toggle-button-es.md | 85 - .../toggle-button/toggle-button-fr.md | 85 - .../toggle-button/toggle-button-ja.md | 85 - .../toggle-button/toggle-button-ru.md | 85 - .../pages/components/tooltips/tooltips-de.md | 140 -- .../pages/components/tooltips/tooltips-es.md | 140 -- .../pages/components/tooltips/tooltips-fr.md | 138 -- .../pages/components/tooltips/tooltips-ja.md | 138 -- .../pages/components/tooltips/tooltips-ru.md | 138 -- .../transfer-list/transfer-list-de.md | 20 - .../transfer-list/transfer-list-es.md | 20 - .../transfer-list/transfer-list-fr.md | 20 - .../transfer-list/transfer-list-ja.md | 20 - .../transfer-list/transfer-list-ru.md | 20 - .../components/transitions/transitions-de.md | 93 - .../components/transitions/transitions-es.md | 93 - .../components/transitions/transitions-fr.md | 93 - .../components/transitions/transitions-ja.md | 93 - .../components/transitions/transitions-ru.md | 93 - .../components/trap-focus/trap-focus-de.md | 53 - .../components/trap-focus/trap-focus-es.md | 53 - .../components/trap-focus/trap-focus-fr.md | 53 - .../components/trap-focus/trap-focus-ja.md | 53 - .../components/trap-focus/trap-focus-ru.md | 53 - .../components/tree-view/tree-view-de.md | 109 - .../components/tree-view/tree-view-es.md | 107 - .../components/tree-view/tree-view-fr.md | 107 - .../components/tree-view/tree-view-ja.md | 107 - .../components/tree-view/tree-view-ru.md | 107 - .../components/typography/typography-de.md | 117 - .../components/typography/typography-es.md | 117 - .../components/typography/typography-fr.md | 115 - .../components/typography/typography-ja.md | 116 - .../components/typography/typography-ru.md | 117 - .../use-media-query/use-media-query-de.md | 219 -- .../use-media-query/use-media-query-es.md | 217 -- .../use-media-query/use-media-query-fr.md | 198 -- .../use-media-query/use-media-query-ja.md | 198 -- .../use-media-query/use-media-query-ru.md | 198 -- .../breakpoints/breakpoints-de.md | 214 -- .../breakpoints/breakpoints-es.md | 214 -- .../breakpoints/breakpoints-fr.md | 211 -- .../breakpoints/breakpoints-ja.md | 214 -- .../breakpoints/breakpoints-ru.md | 214 -- .../src/pages/customization/color/color-de.md | 109 - .../src/pages/customization/color/color-es.md | 109 - .../src/pages/customization/color/color-fr.md | 109 - .../src/pages/customization/color/color-ja.md | 109 - .../src/pages/customization/color/color-ru.md | 109 - .../default-theme/default-theme-de.md | 15 - .../default-theme/default-theme-es.md | 15 - .../default-theme/default-theme-fr.md | 15 - .../default-theme/default-theme-ja.md | 15 - .../default-theme/default-theme-ru.md | 15 - .../pages/customization/density/density-de.md | 119 -- .../pages/customization/density/density-es.md | 119 -- .../pages/customization/density/density-fr.md | 95 - .../pages/customization/density/density-ja.md | 119 -- .../pages/customization/density/density-ru.md | 119 -- .../how-to-customize/how-to-customize-de.md | 194 -- .../how-to-customize/how-to-customize-es.md | 194 -- .../how-to-customize/how-to-customize-fr.md | 181 -- .../how-to-customize/how-to-customize-ja.md | 194 -- .../how-to-customize/how-to-customize-ru.md | 194 -- .../pages/customization/palette/palette-de.md | 239 --- .../pages/customization/palette/palette-es.md | 243 --- .../pages/customization/palette/palette-fr.md | 229 -- .../pages/customization/palette/palette-ja.md | 233 -- .../pages/customization/palette/palette-ru.md | 239 --- .../pages/customization/spacing/spacing-de.md | 60 - .../pages/customization/spacing/spacing-es.md | 60 - .../pages/customization/spacing/spacing-fr.md | 60 - .../pages/customization/spacing/spacing-ja.md | 60 - .../pages/customization/spacing/spacing-ru.md | 60 - .../pages/customization/styled/styled-de.md | 70 - .../pages/customization/styled/styled-es.md | 70 - .../pages/customization/styled/styled-fr.md | 70 - .../pages/customization/styled/styled-ja.md | 70 - .../pages/customization/styled/styled-ru.md | 70 - .../theme-components/theme-components-de.md | 111 - .../theme-components/theme-components-es.md | 120 -- .../theme-components/theme-components-fr.md | 111 - .../theme-components/theme-components-ja.md | 111 - .../theme-components/theme-components-ru.md | 111 - .../pages/customization/theming/theming-de.md | 188 -- .../pages/customization/theming/theming-es.md | 188 -- .../pages/customization/theming/theming-fr.md | 188 -- .../pages/customization/theming/theming-ja.md | 188 -- .../pages/customization/theming/theming-ru.md | 188 -- .../transitions/transitions-de.md | 90 - .../transitions/transitions-es.md | 90 - .../transitions/transitions-fr.md | 90 - .../transitions/transitions-ja.md | 90 - .../transitions/transitions-ru.md | 89 - .../customization/typography/typography-de.md | 268 --- .../customization/typography/typography-es.md | 268 --- .../customization/typography/typography-fr.md | 267 --- .../customization/typography/typography-ja.md | 268 --- .../customization/typography/typography-ru.md | 268 --- .../pages/customization/z-index/z-index-de.md | 17 - .../pages/customization/z-index/z-index-es.md | 17 - .../pages/customization/z-index/z-index-fr.md | 17 - .../pages/customization/z-index/z-index-ja.md | 17 - .../pages/customization/z-index/z-index-ru.md | 17 - .../discover-more/changelog/changelog-de.md | 5 - .../discover-more/changelog/changelog-es.md | 5 - .../discover-more/changelog/changelog-fr.md | 5 - .../discover-more/changelog/changelog-ja.md | 5 - .../discover-more/changelog/changelog-ru.md | 5 - .../discover-more/languages/languages-de.md | 5 - .../discover-more/languages/languages-es.md | 5 - .../discover-more/languages/languages-fr.md | 5 - .../discover-more/languages/languages-ja.md | 5 - .../discover-more/languages/languages-ru.md | 5 - .../related-projects/related-projects-de.md | 92 - .../related-projects/related-projects-es.md | 92 - .../related-projects/related-projects-fr.md | 92 - .../related-projects/related-projects-ja.md | 92 - .../related-projects/related-projects-ru.md | 92 - .../discover-more/showcase/showcase-de.md | 13 - .../discover-more/showcase/showcase-es.md | 13 - .../discover-more/showcase/showcase-fr.md | 13 - .../discover-more/showcase/showcase-ja.md | 13 - .../discover-more/showcase/showcase-ru.md | 13 - docs/src/pages/discover-more/team/team-de.md | 11 - docs/src/pages/discover-more/team/team-es.md | 11 - docs/src/pages/discover-more/team/team-fr.md | 11 - docs/src/pages/discover-more/team/team-ja.md | 11 - docs/src/pages/discover-more/team/team-ru.md | 11 - .../pages/discover-more/vision/vision-de.md | 16 - .../pages/discover-more/vision/vision-es.md | 16 - .../pages/discover-more/vision/vision-fr.md | 16 - .../pages/discover-more/vision/vision-ja.md | 16 - .../pages/discover-more/vision/vision-ru.md | 16 - .../example-projects/example-projects-de.md | 89 - .../example-projects/example-projects-es.md | 89 - .../example-projects/example-projects-fr.md | 89 - .../example-projects/example-projects-ja.md | 89 - .../example-projects/example-projects-ru.md | 89 - docs/src/pages/getting-started/faq/faq-de.md | 422 ---- docs/src/pages/getting-started/faq/faq-es.md | 403 ---- docs/src/pages/getting-started/faq/faq-fr.md | 415 ---- docs/src/pages/getting-started/faq/faq-ja.md | 419 ---- docs/src/pages/getting-started/faq/faq-ru.md | 419 ---- .../installation/installation-de.md | 89 - .../installation/installation-es.md | 89 - .../installation/installation-fr.md | 85 - .../installation/installation-ja.md | 89 - .../installation/installation-ru.md | 89 - .../pages/getting-started/learn/learn-de.md | 56 - .../pages/getting-started/learn/learn-es.md | 56 - .../pages/getting-started/learn/learn-fr.md | 56 - .../pages/getting-started/learn/learn-ja.md | 56 - .../pages/getting-started/learn/learn-ru.md | 56 - .../getting-started/support/support-de.md | 107 - .../getting-started/support/support-es.md | 107 - .../getting-started/support/support-fr.md | 107 - .../getting-started/support/support-ja.md | 107 - .../getting-started/support/support-ru.md | 107 - .../supported-components-de.md | 108 - .../supported-components-es.md | 108 - .../supported-components-fr.md | 108 - .../supported-components-ja.md | 108 - .../supported-components-ru.md | 108 - .../supported-platforms-de.md | 55 - .../supported-platforms-es.md | 55 - .../supported-platforms-fr.md | 55 - .../supported-platforms-ja.md | 55 - .../supported-platforms-ru.md | 55 - .../getting-started/templates/templates-de.md | 23 - .../getting-started/templates/templates-es.md | 23 - .../getting-started/templates/templates-fr.md | 23 - .../getting-started/templates/templates-ja.md | 23 - .../getting-started/templates/templates-ru.md | 23 - .../pages/getting-started/usage/usage-de.md | 59 - .../pages/getting-started/usage/usage-es.md | 59 - .../pages/getting-started/usage/usage-fr.md | 59 - .../pages/getting-started/usage/usage-ja.md | 59 - .../pages/getting-started/usage/usage-ru.md | 59 - docs/src/pages/guides/api/api-de.md | 129 -- docs/src/pages/guides/api/api-es.md | 129 -- docs/src/pages/guides/api/api-fr.md | 129 -- docs/src/pages/guides/api/api-ja.md | 129 -- docs/src/pages/guides/api/api-ru.md | 130 -- .../guides/composition/composition-de.md | 174 -- .../guides/composition/composition-es.md | 174 -- .../guides/composition/composition-fr.md | 171 -- .../guides/composition/composition-ja.md | 174 -- .../guides/composition/composition-ru.md | 173 -- .../content-security-policy-de.md | 69 - .../content-security-policy-es.md | 69 - .../content-security-policy-fr.md | 69 - .../content-security-policy-ja.md | 69 - .../content-security-policy-ru.md | 69 - docs/src/pages/guides/flow/flow-de.md | 7 - docs/src/pages/guides/flow/flow-es.md | 7 - docs/src/pages/guides/flow/flow-fr.md | 7 - docs/src/pages/guides/flow/flow-ja.md | 7 - docs/src/pages/guides/flow/flow-ru.md | 7 - .../interoperability/interoperability-de.md | 600 ------ .../interoperability/interoperability-es.md | 600 ------ .../interoperability/interoperability-fr.md | 612 ------ .../interoperability/interoperability-ja.md | 600 ------ .../interoperability/interoperability-ru.md | 600 ------ .../guides/localization/localization-de.md | 87 - .../guides/localization/localization-es.md | 87 - .../guides/localization/localization-fr.md | 84 - .../guides/localization/localization-ja.md | 87 - .../guides/localization/localization-ru.md | 87 - .../guides/migration-v0x/migration-v0x-de.md | 188 -- .../guides/migration-v0x/migration-v0x-es.md | 188 -- .../guides/migration-v0x/migration-v0x-fr.md | 188 -- .../guides/migration-v0x/migration-v0x-ja.md | 188 -- .../guides/migration-v0x/migration-v0x-ru.md | 188 -- .../guides/migration-v3/migration-v3-de.md | 431 ---- .../guides/migration-v3/migration-v3-es.md | 431 ---- .../guides/migration-v3/migration-v3-fr.md | 431 ---- .../guides/migration-v3/migration-v3-ja.md | 431 ---- .../guides/migration-v3/migration-v3-ru.md | 431 ---- .../guides/migration-v4/migration-v4-de.md | 1904 ----------------- .../guides/migration-v4/migration-v4-es.md | 1902 ---------------- .../guides/migration-v4/migration-v4-fr.md | 1896 ---------------- .../guides/migration-v4/migration-v4-ja.md | 1902 ---------------- .../guides/migration-v4/migration-v4-ru.md | 1902 ---------------- .../minimizing-bundle-size-de.md | 202 -- .../minimizing-bundle-size-es.md | 207 -- .../minimizing-bundle-size-fr.md | 204 -- .../minimizing-bundle-size-ja.md | 209 -- .../minimizing-bundle-size-ru.md | 207 -- .../pickers-migration/pickers-migration-de.md | 123 -- .../pickers-migration/pickers-migration-es.md | 123 -- .../pickers-migration/pickers-migration-fr.md | 123 -- .../pickers-migration/pickers-migration-ja.md | 123 -- .../pickers-migration/pickers-migration-ru.md | 123 -- .../guides/responsive-ui/responsive-ui-de.md | 10 - .../guides/responsive-ui/responsive-ui-es.md | 10 - .../guides/responsive-ui/responsive-ui-fr.md | 10 - .../guides/responsive-ui/responsive-ui-ja.md | 10 - .../guides/responsive-ui/responsive-ui-ru.md | 10 - .../guides/right-to-left/right-to-left-de.md | 139 -- .../guides/right-to-left/right-to-left-es.md | 139 -- .../guides/right-to-left/right-to-left-fr.md | 141 -- .../guides/right-to-left/right-to-left-ja.md | 139 -- .../guides/right-to-left/right-to-left-ru.md | 139 -- docs/src/pages/guides/routing/routing-de.md | 119 -- docs/src/pages/guides/routing/routing-es.md | 119 -- docs/src/pages/guides/routing/routing-fr.md | 119 -- docs/src/pages/guides/routing/routing-ja.md | 119 -- docs/src/pages/guides/routing/routing-ru.md | 119 -- .../server-rendering/server-rendering-de.md | 221 -- .../server-rendering/server-rendering-es.md | 212 -- .../server-rendering/server-rendering-fr.md | 228 -- .../server-rendering/server-rendering-ja.md | 217 -- .../server-rendering/server-rendering-ru.md | 212 -- .../guides/styled-engine/styled-engine-de.md | 33 - .../guides/styled-engine/styled-engine-es.md | 33 - .../guides/styled-engine/styled-engine-fr.md | 33 - .../guides/styled-engine/styled-engine-ja.md | 33 - .../guides/styled-engine/styled-engine-ru.md | 33 - docs/src/pages/guides/testing/testing-de.md | 15 - docs/src/pages/guides/testing/testing-es.md | 15 - docs/src/pages/guides/testing/testing-fr.md | 15 - docs/src/pages/guides/testing/testing-ja.md | 15 - docs/src/pages/guides/testing/testing-ru.md | 15 - .../pages/guides/typescript/typescript-de.md | 326 --- .../pages/guides/typescript/typescript-es.md | 323 --- .../pages/guides/typescript/typescript-fr.md | 311 --- .../pages/guides/typescript/typescript-ja.md | 323 --- .../pages/guides/typescript/typescript-ru.md | 323 --- docs/src/pages/production-error/index-de.md | 7 - docs/src/pages/production-error/index-es.md | 7 - docs/src/pages/production-error/index-fr.md | 7 - docs/src/pages/production-error/index-ja.md | 7 - docs/src/pages/production-error/index-ru.md | 7 - docs/src/pages/styles/advanced/advanced-de.md | 537 ----- docs/src/pages/styles/advanced/advanced-es.md | 528 ----- docs/src/pages/styles/advanced/advanced-fr.md | 518 ----- docs/src/pages/styles/advanced/advanced-ja.md | 528 ----- docs/src/pages/styles/advanced/advanced-ru.md | 528 ----- docs/src/pages/styles/api/api-de.md | 367 ---- docs/src/pages/styles/api/api-es.md | 367 ---- docs/src/pages/styles/api/api-fr.md | 363 ---- docs/src/pages/styles/api/api-ja.md | 368 ---- docs/src/pages/styles/api/api-ru.md | 367 ---- docs/src/pages/styles/basics/basics-de.md | 222 -- docs/src/pages/styles/basics/basics-es.md | 222 -- docs/src/pages/styles/basics/basics-fr.md | 212 -- docs/src/pages/styles/basics/basics-ja.md | 222 -- docs/src/pages/styles/basics/basics-ru.md | 222 -- .../pages/styles/typescript/typescript-de.md | 13 - .../pages/styles/typescript/typescript-es.md | 13 - .../pages/styles/typescript/typescript-fr.md | 13 - .../pages/styles/typescript/typescript-ja.md | 13 - .../pages/styles/typescript/typescript-ru.md | 13 - docs/src/pages/system/advanced/advanced-de.md | 15 - docs/src/pages/system/advanced/advanced-es.md | 15 - docs/src/pages/system/advanced/advanced-fr.md | 15 - docs/src/pages/system/advanced/advanced-ja.md | 15 - docs/src/pages/system/advanced/advanced-ru.md | 15 - docs/src/pages/system/basics/basics-de.md | 382 ---- docs/src/pages/system/basics/basics-es.md | 382 ---- docs/src/pages/system/basics/basics-fr.md | 382 ---- docs/src/pages/system/basics/basics-ja.md | 382 ---- docs/src/pages/system/basics/basics-ru.md | 382 ---- docs/src/pages/system/borders/borders-de.md | 69 - docs/src/pages/system/borders/borders-es.md | 69 - docs/src/pages/system/borders/borders-fr.md | 69 - docs/src/pages/system/borders/borders-ja.md | 69 - docs/src/pages/system/borders/borders-ru.md | 69 - docs/src/pages/system/box/box-de.md | 68 - docs/src/pages/system/box/box-es.md | 68 - docs/src/pages/system/box/box-fr.md | 68 - docs/src/pages/system/box/box-ja.md | 68 - docs/src/pages/system/box/box-ru.md | 68 - docs/src/pages/system/display/display-de.md | 132 -- docs/src/pages/system/display/display-es.md | 132 -- docs/src/pages/system/display/display-fr.md | 132 -- docs/src/pages/system/display/display-ja.md | 132 -- docs/src/pages/system/display/display-ru.md | 132 -- docs/src/pages/system/flexbox/flexbox-de.md | 123 -- docs/src/pages/system/flexbox/flexbox-es.md | 123 -- docs/src/pages/system/flexbox/flexbox-fr.md | 123 -- docs/src/pages/system/flexbox/flexbox-ja.md | 123 -- docs/src/pages/system/flexbox/flexbox-ru.md | 123 -- docs/src/pages/system/grid/grid-de.md | 131 -- docs/src/pages/system/grid/grid-es.md | 131 -- docs/src/pages/system/grid/grid-fr.md | 142 -- docs/src/pages/system/grid/grid-ja.md | 131 -- docs/src/pages/system/grid/grid-ru.md | 131 -- docs/src/pages/system/palette/palette-de.md | 46 - docs/src/pages/system/palette/palette-es.md | 46 - docs/src/pages/system/palette/palette-fr.md | 46 - docs/src/pages/system/palette/palette-ja.md | 46 - docs/src/pages/system/palette/palette-ru.md | 46 - .../pages/system/positions/positions-de.md | 27 - .../pages/system/positions/positions-es.md | 27 - .../pages/system/positions/positions-fr.md | 27 - .../pages/system/positions/positions-ja.md | 27 - .../pages/system/positions/positions-ru.md | 27 - .../pages/system/properties/properties-de.md | 130 -- .../pages/system/properties/properties-es.md | 130 -- .../pages/system/properties/properties-fr.md | 130 -- .../pages/system/properties/properties-ja.md | 130 -- .../pages/system/properties/properties-ru.md | 130 -- .../screen-readers/screen-readers-de.md | 17 - .../screen-readers/screen-readers-es.md | 17 - .../screen-readers/screen-readers-fr.md | 17 - .../screen-readers/screen-readers-ja.md | 17 - .../screen-readers/screen-readers-ru.md | 17 - docs/src/pages/system/shadows/shadows-de.md | 26 - docs/src/pages/system/shadows/shadows-es.md | 26 - docs/src/pages/system/shadows/shadows-fr.md | 26 - docs/src/pages/system/shadows/shadows-ja.md | 26 - docs/src/pages/system/shadows/shadows-ru.md | 26 - docs/src/pages/system/sizing/sizing-de.md | 56 - docs/src/pages/system/sizing/sizing-es.md | 56 - docs/src/pages/system/sizing/sizing-fr.md | 56 - docs/src/pages/system/sizing/sizing-ja.md | 56 - docs/src/pages/system/sizing/sizing-ru.md | 56 - docs/src/pages/system/spacing/spacing-de.md | 124 -- docs/src/pages/system/spacing/spacing-es.md | 124 -- docs/src/pages/system/spacing/spacing-fr.md | 124 -- docs/src/pages/system/spacing/spacing-ja.md | 124 -- docs/src/pages/system/spacing/spacing-ru.md | 124 -- .../pages/system/typography/typography-de.md | 99 - .../pages/system/typography/typography-es.md | 99 - .../pages/system/typography/typography-fr.md | 99 - .../pages/system/typography/typography-ja.md | 99 - .../pages/system/typography/typography-ru.md | 99 - docs/src/pages/versions/versions-de.md | 71 - docs/src/pages/versions/versions-es.md | 71 - docs/src/pages/versions/versions-fr.md | 71 - docs/src/pages/versions/versions-ja.md | 71 - docs/src/pages/versions/versions-ru.md | 71 - 665 files changed, 82026 deletions(-) delete mode 100644 docs/src/pages/components/about-the-lab/about-the-lab-de.md delete mode 100644 docs/src/pages/components/about-the-lab/about-the-lab-es.md delete mode 100644 docs/src/pages/components/about-the-lab/about-the-lab-fr.md delete mode 100644 docs/src/pages/components/about-the-lab/about-the-lab-ja.md delete mode 100644 docs/src/pages/components/about-the-lab/about-the-lab-ru.md delete mode 100644 docs/src/pages/components/accordion/accordion-de.md delete mode 100644 docs/src/pages/components/accordion/accordion-es.md delete mode 100644 docs/src/pages/components/accordion/accordion-fr.md delete mode 100644 docs/src/pages/components/accordion/accordion-ja.md delete mode 100644 docs/src/pages/components/accordion/accordion-ru.md delete mode 100644 docs/src/pages/components/alert/alert-de.md delete mode 100644 docs/src/pages/components/alert/alert-es.md delete mode 100644 docs/src/pages/components/alert/alert-fr.md delete mode 100644 docs/src/pages/components/alert/alert-ja.md delete mode 100644 docs/src/pages/components/alert/alert-ru.md delete mode 100644 docs/src/pages/components/app-bar/app-bar-de.md delete mode 100644 docs/src/pages/components/app-bar/app-bar-es.md delete mode 100644 docs/src/pages/components/app-bar/app-bar-fr.md delete mode 100644 docs/src/pages/components/app-bar/app-bar-ja.md delete mode 100644 docs/src/pages/components/app-bar/app-bar-ru.md delete mode 100644 docs/src/pages/components/autocomplete/autocomplete-de.md delete mode 100644 docs/src/pages/components/autocomplete/autocomplete-es.md delete mode 100644 docs/src/pages/components/autocomplete/autocomplete-fr.md delete mode 100644 docs/src/pages/components/autocomplete/autocomplete-ja.md delete mode 100644 docs/src/pages/components/autocomplete/autocomplete-ru.md delete mode 100644 docs/src/pages/components/avatars/avatars-de.md delete mode 100644 docs/src/pages/components/avatars/avatars-es.md delete mode 100644 docs/src/pages/components/avatars/avatars-fr.md delete mode 100644 docs/src/pages/components/avatars/avatars-ja.md delete mode 100644 docs/src/pages/components/avatars/avatars-ru.md delete mode 100644 docs/src/pages/components/backdrop/backdrop-de.md delete mode 100644 docs/src/pages/components/backdrop/backdrop-es.md delete mode 100644 docs/src/pages/components/backdrop/backdrop-fr.md delete mode 100644 docs/src/pages/components/backdrop/backdrop-ja.md delete mode 100644 docs/src/pages/components/backdrop/backdrop-ru.md delete mode 100644 docs/src/pages/components/badges/badges-de.md delete mode 100644 docs/src/pages/components/badges/badges-es.md delete mode 100644 docs/src/pages/components/badges/badges-fr.md delete mode 100644 docs/src/pages/components/badges/badges-ja.md delete mode 100644 docs/src/pages/components/badges/badges-ru.md delete mode 100644 docs/src/pages/components/bottom-navigation/bottom-navigation-de.md delete mode 100644 docs/src/pages/components/bottom-navigation/bottom-navigation-es.md delete mode 100644 docs/src/pages/components/bottom-navigation/bottom-navigation-fr.md delete mode 100644 docs/src/pages/components/bottom-navigation/bottom-navigation-ja.md delete mode 100644 docs/src/pages/components/bottom-navigation/bottom-navigation-ru.md delete mode 100644 docs/src/pages/components/box/box-de.md delete mode 100644 docs/src/pages/components/box/box-es.md delete mode 100644 docs/src/pages/components/box/box-fr.md delete mode 100644 docs/src/pages/components/box/box-ja.md delete mode 100644 docs/src/pages/components/box/box-ru.md delete mode 100644 docs/src/pages/components/breadcrumbs/breadcrumbs-de.md delete mode 100644 docs/src/pages/components/breadcrumbs/breadcrumbs-es.md delete mode 100644 docs/src/pages/components/breadcrumbs/breadcrumbs-fr.md delete mode 100644 docs/src/pages/components/breadcrumbs/breadcrumbs-ja.md delete mode 100644 docs/src/pages/components/breadcrumbs/breadcrumbs-ru.md delete mode 100644 docs/src/pages/components/button-group/button-group-de.md delete mode 100644 docs/src/pages/components/button-group/button-group-es.md delete mode 100644 docs/src/pages/components/button-group/button-group-fr.md delete mode 100644 docs/src/pages/components/button-group/button-group-ja.md delete mode 100644 docs/src/pages/components/button-group/button-group-ru.md delete mode 100644 docs/src/pages/components/buttons/buttons-de.md delete mode 100644 docs/src/pages/components/buttons/buttons-es.md delete mode 100644 docs/src/pages/components/buttons/buttons-fr.md delete mode 100644 docs/src/pages/components/buttons/buttons-ja.md delete mode 100644 docs/src/pages/components/buttons/buttons-ru.md delete mode 100644 docs/src/pages/components/cards/cards-de.md delete mode 100644 docs/src/pages/components/cards/cards-es.md delete mode 100644 docs/src/pages/components/cards/cards-fr.md delete mode 100644 docs/src/pages/components/cards/cards-ja.md delete mode 100644 docs/src/pages/components/cards/cards-ru.md delete mode 100644 docs/src/pages/components/checkboxes/checkboxes-de.md delete mode 100644 docs/src/pages/components/checkboxes/checkboxes-es.md delete mode 100644 docs/src/pages/components/checkboxes/checkboxes-fr.md delete mode 100644 docs/src/pages/components/checkboxes/checkboxes-ja.md delete mode 100644 docs/src/pages/components/checkboxes/checkboxes-ru.md delete mode 100644 docs/src/pages/components/chips/chips-de.md delete mode 100644 docs/src/pages/components/chips/chips-es.md delete mode 100644 docs/src/pages/components/chips/chips-fr.md delete mode 100644 docs/src/pages/components/chips/chips-ja.md delete mode 100644 docs/src/pages/components/chips/chips-ru.md delete mode 100644 docs/src/pages/components/click-away-listener/click-away-listener-de.md delete mode 100644 docs/src/pages/components/click-away-listener/click-away-listener-es.md delete mode 100644 docs/src/pages/components/click-away-listener/click-away-listener-fr.md delete mode 100644 docs/src/pages/components/click-away-listener/click-away-listener-ja.md delete mode 100644 docs/src/pages/components/click-away-listener/click-away-listener-ru.md delete mode 100644 docs/src/pages/components/container/container-de.md delete mode 100644 docs/src/pages/components/container/container-es.md delete mode 100644 docs/src/pages/components/container/container-fr.md delete mode 100644 docs/src/pages/components/container/container-ja.md delete mode 100644 docs/src/pages/components/container/container-ru.md delete mode 100644 docs/src/pages/components/css-baseline/css-baseline-de.md delete mode 100644 docs/src/pages/components/css-baseline/css-baseline-es.md delete mode 100644 docs/src/pages/components/css-baseline/css-baseline-fr.md delete mode 100644 docs/src/pages/components/css-baseline/css-baseline-ja.md delete mode 100644 docs/src/pages/components/css-baseline/css-baseline-ru.md delete mode 100644 docs/src/pages/components/date-picker/date-picker-de.md delete mode 100644 docs/src/pages/components/date-picker/date-picker-es.md delete mode 100644 docs/src/pages/components/date-picker/date-picker-fr.md delete mode 100644 docs/src/pages/components/date-picker/date-picker-ja.md delete mode 100644 docs/src/pages/components/date-picker/date-picker-ru.md delete mode 100644 docs/src/pages/components/date-range-picker/date-range-picker-de.md delete mode 100644 docs/src/pages/components/date-range-picker/date-range-picker-es.md delete mode 100644 docs/src/pages/components/date-range-picker/date-range-picker-fr.md delete mode 100644 docs/src/pages/components/date-range-picker/date-range-picker-ja.md delete mode 100644 docs/src/pages/components/date-range-picker/date-range-picker-ru.md delete mode 100644 docs/src/pages/components/date-time-picker/date-time-picker-de.md delete mode 100644 docs/src/pages/components/date-time-picker/date-time-picker-es.md delete mode 100644 docs/src/pages/components/date-time-picker/date-time-picker-fr.md delete mode 100644 docs/src/pages/components/date-time-picker/date-time-picker-ja.md delete mode 100644 docs/src/pages/components/date-time-picker/date-time-picker-ru.md delete mode 100644 docs/src/pages/components/dialogs/dialogs-de.md delete mode 100644 docs/src/pages/components/dialogs/dialogs-es.md delete mode 100644 docs/src/pages/components/dialogs/dialogs-fr.md delete mode 100644 docs/src/pages/components/dialogs/dialogs-ja.md delete mode 100644 docs/src/pages/components/dialogs/dialogs-ru.md delete mode 100644 docs/src/pages/components/dividers/dividers-de.md delete mode 100644 docs/src/pages/components/dividers/dividers-es.md delete mode 100644 docs/src/pages/components/dividers/dividers-fr.md delete mode 100644 docs/src/pages/components/dividers/dividers-ja.md delete mode 100644 docs/src/pages/components/dividers/dividers-ru.md delete mode 100644 docs/src/pages/components/drawers/drawers-de.md delete mode 100644 docs/src/pages/components/drawers/drawers-es.md delete mode 100644 docs/src/pages/components/drawers/drawers-fr.md delete mode 100644 docs/src/pages/components/drawers/drawers-ja.md delete mode 100644 docs/src/pages/components/drawers/drawers-ru.md delete mode 100644 docs/src/pages/components/floating-action-button/floating-action-button-de.md delete mode 100644 docs/src/pages/components/floating-action-button/floating-action-button-es.md delete mode 100644 docs/src/pages/components/floating-action-button/floating-action-button-fr.md delete mode 100644 docs/src/pages/components/floating-action-button/floating-action-button-ja.md delete mode 100644 docs/src/pages/components/floating-action-button/floating-action-button-ru.md delete mode 100644 docs/src/pages/components/grid/grid-de.md delete mode 100644 docs/src/pages/components/grid/grid-es.md delete mode 100644 docs/src/pages/components/grid/grid-fr.md delete mode 100644 docs/src/pages/components/grid/grid-ja.md delete mode 100644 docs/src/pages/components/grid/grid-ru.md delete mode 100644 docs/src/pages/components/icons/icons-de.md delete mode 100644 docs/src/pages/components/icons/icons-es.md delete mode 100644 docs/src/pages/components/icons/icons-fr.md delete mode 100644 docs/src/pages/components/icons/icons-ja.md delete mode 100644 docs/src/pages/components/icons/icons-ru.md delete mode 100644 docs/src/pages/components/image-list/image-list-de.md delete mode 100644 docs/src/pages/components/image-list/image-list-es.md delete mode 100644 docs/src/pages/components/image-list/image-list-fr.md delete mode 100644 docs/src/pages/components/image-list/image-list-ja.md delete mode 100644 docs/src/pages/components/image-list/image-list-ru.md delete mode 100644 docs/src/pages/components/links/links-de.md delete mode 100644 docs/src/pages/components/links/links-es.md delete mode 100644 docs/src/pages/components/links/links-fr.md delete mode 100644 docs/src/pages/components/links/links-ja.md delete mode 100644 docs/src/pages/components/links/links-ru.md delete mode 100644 docs/src/pages/components/lists/lists-de.md delete mode 100644 docs/src/pages/components/lists/lists-es.md delete mode 100644 docs/src/pages/components/lists/lists-fr.md delete mode 100644 docs/src/pages/components/lists/lists-ja.md delete mode 100644 docs/src/pages/components/lists/lists-ru.md delete mode 100644 docs/src/pages/components/material-icons/material-icons-de.md delete mode 100644 docs/src/pages/components/material-icons/material-icons-es.md delete mode 100644 docs/src/pages/components/material-icons/material-icons-fr.md delete mode 100644 docs/src/pages/components/material-icons/material-icons-ja.md delete mode 100644 docs/src/pages/components/material-icons/material-icons-ru.md delete mode 100644 docs/src/pages/components/menus/menus-de.md delete mode 100644 docs/src/pages/components/menus/menus-es.md delete mode 100644 docs/src/pages/components/menus/menus-fr.md delete mode 100644 docs/src/pages/components/menus/menus-ja.md delete mode 100644 docs/src/pages/components/menus/menus-ru.md delete mode 100644 docs/src/pages/components/modal/modal-de.md delete mode 100644 docs/src/pages/components/modal/modal-es.md delete mode 100644 docs/src/pages/components/modal/modal-fr.md delete mode 100644 docs/src/pages/components/modal/modal-ja.md delete mode 100644 docs/src/pages/components/modal/modal-ru.md delete mode 100644 docs/src/pages/components/no-ssr/no-ssr-de.md delete mode 100644 docs/src/pages/components/no-ssr/no-ssr-es.md delete mode 100644 docs/src/pages/components/no-ssr/no-ssr-fr.md delete mode 100644 docs/src/pages/components/no-ssr/no-ssr-ja.md delete mode 100644 docs/src/pages/components/no-ssr/no-ssr-ru.md delete mode 100644 docs/src/pages/components/pagination/pagination-de.md delete mode 100644 docs/src/pages/components/pagination/pagination-es.md delete mode 100644 docs/src/pages/components/pagination/pagination-fr.md delete mode 100644 docs/src/pages/components/pagination/pagination-ja.md delete mode 100644 docs/src/pages/components/pagination/pagination-ru.md delete mode 100644 docs/src/pages/components/paper/paper-de.md delete mode 100644 docs/src/pages/components/paper/paper-es.md delete mode 100644 docs/src/pages/components/paper/paper-fr.md delete mode 100644 docs/src/pages/components/paper/paper-ja.md delete mode 100644 docs/src/pages/components/paper/paper-ru.md delete mode 100644 docs/src/pages/components/pickers/pickers-de.md delete mode 100644 docs/src/pages/components/pickers/pickers-es.md delete mode 100644 docs/src/pages/components/pickers/pickers-fr.md delete mode 100644 docs/src/pages/components/pickers/pickers-ja.md delete mode 100644 docs/src/pages/components/pickers/pickers-ru.md delete mode 100644 docs/src/pages/components/popover/popover-de.md delete mode 100644 docs/src/pages/components/popover/popover-es.md delete mode 100644 docs/src/pages/components/popover/popover-fr.md delete mode 100644 docs/src/pages/components/popover/popover-ja.md delete mode 100644 docs/src/pages/components/popover/popover-ru.md delete mode 100644 docs/src/pages/components/popper/popper-de.md delete mode 100644 docs/src/pages/components/popper/popper-es.md delete mode 100644 docs/src/pages/components/popper/popper-fr.md delete mode 100644 docs/src/pages/components/popper/popper-ja.md delete mode 100644 docs/src/pages/components/popper/popper-ru.md delete mode 100644 docs/src/pages/components/portal/portal-de.md delete mode 100644 docs/src/pages/components/portal/portal-es.md delete mode 100644 docs/src/pages/components/portal/portal-fr.md delete mode 100644 docs/src/pages/components/portal/portal-ja.md delete mode 100644 docs/src/pages/components/portal/portal-ru.md delete mode 100644 docs/src/pages/components/progress/progress-de.md delete mode 100644 docs/src/pages/components/progress/progress-es.md delete mode 100644 docs/src/pages/components/progress/progress-fr.md delete mode 100644 docs/src/pages/components/progress/progress-ja.md delete mode 100644 docs/src/pages/components/progress/progress-ru.md delete mode 100644 docs/src/pages/components/radio-buttons/radio-buttons-de.md delete mode 100644 docs/src/pages/components/radio-buttons/radio-buttons-es.md delete mode 100644 docs/src/pages/components/radio-buttons/radio-buttons-fr.md delete mode 100644 docs/src/pages/components/radio-buttons/radio-buttons-ja.md delete mode 100644 docs/src/pages/components/radio-buttons/radio-buttons-ru.md delete mode 100644 docs/src/pages/components/rating/rating-de.md delete mode 100644 docs/src/pages/components/rating/rating-es.md delete mode 100644 docs/src/pages/components/rating/rating-fr.md delete mode 100644 docs/src/pages/components/rating/rating-ja.md delete mode 100644 docs/src/pages/components/rating/rating-ru.md delete mode 100644 docs/src/pages/components/selects/selects-de.md delete mode 100644 docs/src/pages/components/selects/selects-es.md delete mode 100644 docs/src/pages/components/selects/selects-fr.md delete mode 100644 docs/src/pages/components/selects/selects-ja.md delete mode 100644 docs/src/pages/components/selects/selects-ru.md delete mode 100644 docs/src/pages/components/skeleton/skeleton-de.md delete mode 100644 docs/src/pages/components/skeleton/skeleton-es.md delete mode 100644 docs/src/pages/components/skeleton/skeleton-fr.md delete mode 100644 docs/src/pages/components/skeleton/skeleton-ja.md delete mode 100644 docs/src/pages/components/skeleton/skeleton-ru.md delete mode 100644 docs/src/pages/components/slider/slider-de.md delete mode 100644 docs/src/pages/components/slider/slider-es.md delete mode 100644 docs/src/pages/components/slider/slider-fr.md delete mode 100644 docs/src/pages/components/slider/slider-ja.md delete mode 100644 docs/src/pages/components/slider/slider-ru.md delete mode 100644 docs/src/pages/components/snackbars/snackbars-de.md delete mode 100644 docs/src/pages/components/snackbars/snackbars-es.md delete mode 100644 docs/src/pages/components/snackbars/snackbars-fr.md delete mode 100644 docs/src/pages/components/snackbars/snackbars-ja.md delete mode 100644 docs/src/pages/components/snackbars/snackbars-ru.md delete mode 100644 docs/src/pages/components/speed-dial/speed-dial-de.md delete mode 100644 docs/src/pages/components/speed-dial/speed-dial-es.md delete mode 100644 docs/src/pages/components/speed-dial/speed-dial-fr.md delete mode 100644 docs/src/pages/components/speed-dial/speed-dial-ja.md delete mode 100644 docs/src/pages/components/speed-dial/speed-dial-ru.md delete mode 100644 docs/src/pages/components/stack/stack-de.md delete mode 100644 docs/src/pages/components/stack/stack-es.md delete mode 100644 docs/src/pages/components/stack/stack-fr.md delete mode 100644 docs/src/pages/components/stack/stack-ja.md delete mode 100644 docs/src/pages/components/stack/stack-ru.md delete mode 100644 docs/src/pages/components/steppers/steppers-de.md delete mode 100644 docs/src/pages/components/steppers/steppers-es.md delete mode 100644 docs/src/pages/components/steppers/steppers-fr.md delete mode 100644 docs/src/pages/components/steppers/steppers-ja.md delete mode 100644 docs/src/pages/components/steppers/steppers-ru.md delete mode 100644 docs/src/pages/components/switches/switches-de.md delete mode 100644 docs/src/pages/components/switches/switches-es.md delete mode 100644 docs/src/pages/components/switches/switches-fr.md delete mode 100644 docs/src/pages/components/switches/switches-ja.md delete mode 100644 docs/src/pages/components/switches/switches-ru.md delete mode 100644 docs/src/pages/components/tables/tables-de.md delete mode 100644 docs/src/pages/components/tables/tables-es.md delete mode 100644 docs/src/pages/components/tables/tables-fr.md delete mode 100644 docs/src/pages/components/tables/tables-ja.md delete mode 100644 docs/src/pages/components/tables/tables-ru.md delete mode 100644 docs/src/pages/components/tabs/tabs-de.md delete mode 100644 docs/src/pages/components/tabs/tabs-es.md delete mode 100644 docs/src/pages/components/tabs/tabs-fr.md delete mode 100644 docs/src/pages/components/tabs/tabs-ja.md delete mode 100644 docs/src/pages/components/tabs/tabs-ru.md delete mode 100644 docs/src/pages/components/text-fields/text-fields-de.md delete mode 100644 docs/src/pages/components/text-fields/text-fields-es.md delete mode 100644 docs/src/pages/components/text-fields/text-fields-fr.md delete mode 100644 docs/src/pages/components/text-fields/text-fields-ja.md delete mode 100644 docs/src/pages/components/text-fields/text-fields-ru.md delete mode 100644 docs/src/pages/components/textarea-autosize/textarea-autosize-de.md delete mode 100644 docs/src/pages/components/textarea-autosize/textarea-autosize-es.md delete mode 100644 docs/src/pages/components/textarea-autosize/textarea-autosize-fr.md delete mode 100644 docs/src/pages/components/textarea-autosize/textarea-autosize-ja.md delete mode 100644 docs/src/pages/components/textarea-autosize/textarea-autosize-ru.md delete mode 100644 docs/src/pages/components/time-picker/time-picker-de.md delete mode 100644 docs/src/pages/components/time-picker/time-picker-es.md delete mode 100644 docs/src/pages/components/time-picker/time-picker-fr.md delete mode 100644 docs/src/pages/components/time-picker/time-picker-ja.md delete mode 100644 docs/src/pages/components/time-picker/time-picker-ru.md delete mode 100644 docs/src/pages/components/timeline/timeline-de.md delete mode 100644 docs/src/pages/components/timeline/timeline-es.md delete mode 100644 docs/src/pages/components/timeline/timeline-fr.md delete mode 100644 docs/src/pages/components/timeline/timeline-ja.md delete mode 100644 docs/src/pages/components/timeline/timeline-ru.md delete mode 100644 docs/src/pages/components/toggle-button/toggle-button-de.md delete mode 100644 docs/src/pages/components/toggle-button/toggle-button-es.md delete mode 100644 docs/src/pages/components/toggle-button/toggle-button-fr.md delete mode 100644 docs/src/pages/components/toggle-button/toggle-button-ja.md delete mode 100644 docs/src/pages/components/toggle-button/toggle-button-ru.md delete mode 100644 docs/src/pages/components/tooltips/tooltips-de.md delete mode 100644 docs/src/pages/components/tooltips/tooltips-es.md delete mode 100644 docs/src/pages/components/tooltips/tooltips-fr.md delete mode 100644 docs/src/pages/components/tooltips/tooltips-ja.md delete mode 100644 docs/src/pages/components/tooltips/tooltips-ru.md delete mode 100644 docs/src/pages/components/transfer-list/transfer-list-de.md delete mode 100644 docs/src/pages/components/transfer-list/transfer-list-es.md delete mode 100644 docs/src/pages/components/transfer-list/transfer-list-fr.md delete mode 100644 docs/src/pages/components/transfer-list/transfer-list-ja.md delete mode 100644 docs/src/pages/components/transfer-list/transfer-list-ru.md delete mode 100644 docs/src/pages/components/transitions/transitions-de.md delete mode 100644 docs/src/pages/components/transitions/transitions-es.md delete mode 100644 docs/src/pages/components/transitions/transitions-fr.md delete mode 100644 docs/src/pages/components/transitions/transitions-ja.md delete mode 100644 docs/src/pages/components/transitions/transitions-ru.md delete mode 100644 docs/src/pages/components/trap-focus/trap-focus-de.md delete mode 100644 docs/src/pages/components/trap-focus/trap-focus-es.md delete mode 100644 docs/src/pages/components/trap-focus/trap-focus-fr.md delete mode 100644 docs/src/pages/components/trap-focus/trap-focus-ja.md delete mode 100644 docs/src/pages/components/trap-focus/trap-focus-ru.md delete mode 100644 docs/src/pages/components/tree-view/tree-view-de.md delete mode 100644 docs/src/pages/components/tree-view/tree-view-es.md delete mode 100644 docs/src/pages/components/tree-view/tree-view-fr.md delete mode 100644 docs/src/pages/components/tree-view/tree-view-ja.md delete mode 100644 docs/src/pages/components/tree-view/tree-view-ru.md delete mode 100644 docs/src/pages/components/typography/typography-de.md delete mode 100644 docs/src/pages/components/typography/typography-es.md delete mode 100644 docs/src/pages/components/typography/typography-fr.md delete mode 100644 docs/src/pages/components/typography/typography-ja.md delete mode 100644 docs/src/pages/components/typography/typography-ru.md delete mode 100644 docs/src/pages/components/use-media-query/use-media-query-de.md delete mode 100644 docs/src/pages/components/use-media-query/use-media-query-es.md delete mode 100644 docs/src/pages/components/use-media-query/use-media-query-fr.md delete mode 100644 docs/src/pages/components/use-media-query/use-media-query-ja.md delete mode 100644 docs/src/pages/components/use-media-query/use-media-query-ru.md delete mode 100644 docs/src/pages/customization/breakpoints/breakpoints-de.md delete mode 100644 docs/src/pages/customization/breakpoints/breakpoints-es.md delete mode 100644 docs/src/pages/customization/breakpoints/breakpoints-fr.md delete mode 100644 docs/src/pages/customization/breakpoints/breakpoints-ja.md delete mode 100644 docs/src/pages/customization/breakpoints/breakpoints-ru.md delete mode 100644 docs/src/pages/customization/color/color-de.md delete mode 100644 docs/src/pages/customization/color/color-es.md delete mode 100644 docs/src/pages/customization/color/color-fr.md delete mode 100644 docs/src/pages/customization/color/color-ja.md delete mode 100644 docs/src/pages/customization/color/color-ru.md delete mode 100644 docs/src/pages/customization/default-theme/default-theme-de.md delete mode 100644 docs/src/pages/customization/default-theme/default-theme-es.md delete mode 100644 docs/src/pages/customization/default-theme/default-theme-fr.md delete mode 100644 docs/src/pages/customization/default-theme/default-theme-ja.md delete mode 100644 docs/src/pages/customization/default-theme/default-theme-ru.md delete mode 100644 docs/src/pages/customization/density/density-de.md delete mode 100644 docs/src/pages/customization/density/density-es.md delete mode 100644 docs/src/pages/customization/density/density-fr.md delete mode 100644 docs/src/pages/customization/density/density-ja.md delete mode 100644 docs/src/pages/customization/density/density-ru.md delete mode 100644 docs/src/pages/customization/how-to-customize/how-to-customize-de.md delete mode 100644 docs/src/pages/customization/how-to-customize/how-to-customize-es.md delete mode 100644 docs/src/pages/customization/how-to-customize/how-to-customize-fr.md delete mode 100644 docs/src/pages/customization/how-to-customize/how-to-customize-ja.md delete mode 100644 docs/src/pages/customization/how-to-customize/how-to-customize-ru.md delete mode 100644 docs/src/pages/customization/palette/palette-de.md delete mode 100644 docs/src/pages/customization/palette/palette-es.md delete mode 100644 docs/src/pages/customization/palette/palette-fr.md delete mode 100644 docs/src/pages/customization/palette/palette-ja.md delete mode 100644 docs/src/pages/customization/palette/palette-ru.md delete mode 100644 docs/src/pages/customization/spacing/spacing-de.md delete mode 100644 docs/src/pages/customization/spacing/spacing-es.md delete mode 100644 docs/src/pages/customization/spacing/spacing-fr.md delete mode 100644 docs/src/pages/customization/spacing/spacing-ja.md delete mode 100644 docs/src/pages/customization/spacing/spacing-ru.md delete mode 100644 docs/src/pages/customization/styled/styled-de.md delete mode 100644 docs/src/pages/customization/styled/styled-es.md delete mode 100644 docs/src/pages/customization/styled/styled-fr.md delete mode 100644 docs/src/pages/customization/styled/styled-ja.md delete mode 100644 docs/src/pages/customization/styled/styled-ru.md delete mode 100644 docs/src/pages/customization/theme-components/theme-components-de.md delete mode 100644 docs/src/pages/customization/theme-components/theme-components-es.md delete mode 100644 docs/src/pages/customization/theme-components/theme-components-fr.md delete mode 100644 docs/src/pages/customization/theme-components/theme-components-ja.md delete mode 100644 docs/src/pages/customization/theme-components/theme-components-ru.md delete mode 100644 docs/src/pages/customization/theming/theming-de.md delete mode 100644 docs/src/pages/customization/theming/theming-es.md delete mode 100644 docs/src/pages/customization/theming/theming-fr.md delete mode 100644 docs/src/pages/customization/theming/theming-ja.md delete mode 100644 docs/src/pages/customization/theming/theming-ru.md delete mode 100644 docs/src/pages/customization/transitions/transitions-de.md delete mode 100644 docs/src/pages/customization/transitions/transitions-es.md delete mode 100644 docs/src/pages/customization/transitions/transitions-fr.md delete mode 100644 docs/src/pages/customization/transitions/transitions-ja.md delete mode 100644 docs/src/pages/customization/transitions/transitions-ru.md delete mode 100644 docs/src/pages/customization/typography/typography-de.md delete mode 100644 docs/src/pages/customization/typography/typography-es.md delete mode 100644 docs/src/pages/customization/typography/typography-fr.md delete mode 100644 docs/src/pages/customization/typography/typography-ja.md delete mode 100644 docs/src/pages/customization/typography/typography-ru.md delete mode 100644 docs/src/pages/customization/z-index/z-index-de.md delete mode 100644 docs/src/pages/customization/z-index/z-index-es.md delete mode 100644 docs/src/pages/customization/z-index/z-index-fr.md delete mode 100644 docs/src/pages/customization/z-index/z-index-ja.md delete mode 100644 docs/src/pages/customization/z-index/z-index-ru.md delete mode 100644 docs/src/pages/discover-more/changelog/changelog-de.md delete mode 100644 docs/src/pages/discover-more/changelog/changelog-es.md delete mode 100644 docs/src/pages/discover-more/changelog/changelog-fr.md delete mode 100644 docs/src/pages/discover-more/changelog/changelog-ja.md delete mode 100644 docs/src/pages/discover-more/changelog/changelog-ru.md delete mode 100644 docs/src/pages/discover-more/languages/languages-de.md delete mode 100644 docs/src/pages/discover-more/languages/languages-es.md delete mode 100644 docs/src/pages/discover-more/languages/languages-fr.md delete mode 100644 docs/src/pages/discover-more/languages/languages-ja.md delete mode 100644 docs/src/pages/discover-more/languages/languages-ru.md delete mode 100644 docs/src/pages/discover-more/related-projects/related-projects-de.md delete mode 100644 docs/src/pages/discover-more/related-projects/related-projects-es.md delete mode 100644 docs/src/pages/discover-more/related-projects/related-projects-fr.md delete mode 100644 docs/src/pages/discover-more/related-projects/related-projects-ja.md delete mode 100644 docs/src/pages/discover-more/related-projects/related-projects-ru.md delete mode 100644 docs/src/pages/discover-more/showcase/showcase-de.md delete mode 100644 docs/src/pages/discover-more/showcase/showcase-es.md delete mode 100644 docs/src/pages/discover-more/showcase/showcase-fr.md delete mode 100644 docs/src/pages/discover-more/showcase/showcase-ja.md delete mode 100644 docs/src/pages/discover-more/showcase/showcase-ru.md delete mode 100644 docs/src/pages/discover-more/team/team-de.md delete mode 100644 docs/src/pages/discover-more/team/team-es.md delete mode 100644 docs/src/pages/discover-more/team/team-fr.md delete mode 100644 docs/src/pages/discover-more/team/team-ja.md delete mode 100644 docs/src/pages/discover-more/team/team-ru.md delete mode 100644 docs/src/pages/discover-more/vision/vision-de.md delete mode 100644 docs/src/pages/discover-more/vision/vision-es.md delete mode 100644 docs/src/pages/discover-more/vision/vision-fr.md delete mode 100644 docs/src/pages/discover-more/vision/vision-ja.md delete mode 100644 docs/src/pages/discover-more/vision/vision-ru.md delete mode 100644 docs/src/pages/getting-started/example-projects/example-projects-de.md delete mode 100644 docs/src/pages/getting-started/example-projects/example-projects-es.md delete mode 100644 docs/src/pages/getting-started/example-projects/example-projects-fr.md delete mode 100644 docs/src/pages/getting-started/example-projects/example-projects-ja.md delete mode 100644 docs/src/pages/getting-started/example-projects/example-projects-ru.md delete mode 100644 docs/src/pages/getting-started/faq/faq-de.md delete mode 100644 docs/src/pages/getting-started/faq/faq-es.md delete mode 100644 docs/src/pages/getting-started/faq/faq-fr.md delete mode 100644 docs/src/pages/getting-started/faq/faq-ja.md delete mode 100644 docs/src/pages/getting-started/faq/faq-ru.md delete mode 100644 docs/src/pages/getting-started/installation/installation-de.md delete mode 100644 docs/src/pages/getting-started/installation/installation-es.md delete mode 100644 docs/src/pages/getting-started/installation/installation-fr.md delete mode 100644 docs/src/pages/getting-started/installation/installation-ja.md delete mode 100644 docs/src/pages/getting-started/installation/installation-ru.md delete mode 100644 docs/src/pages/getting-started/learn/learn-de.md delete mode 100644 docs/src/pages/getting-started/learn/learn-es.md delete mode 100644 docs/src/pages/getting-started/learn/learn-fr.md delete mode 100644 docs/src/pages/getting-started/learn/learn-ja.md delete mode 100644 docs/src/pages/getting-started/learn/learn-ru.md delete mode 100644 docs/src/pages/getting-started/support/support-de.md delete mode 100644 docs/src/pages/getting-started/support/support-es.md delete mode 100644 docs/src/pages/getting-started/support/support-fr.md delete mode 100644 docs/src/pages/getting-started/support/support-ja.md delete mode 100644 docs/src/pages/getting-started/support/support-ru.md delete mode 100644 docs/src/pages/getting-started/supported-components/supported-components-de.md delete mode 100644 docs/src/pages/getting-started/supported-components/supported-components-es.md delete mode 100644 docs/src/pages/getting-started/supported-components/supported-components-fr.md delete mode 100644 docs/src/pages/getting-started/supported-components/supported-components-ja.md delete mode 100644 docs/src/pages/getting-started/supported-components/supported-components-ru.md delete mode 100644 docs/src/pages/getting-started/supported-platforms/supported-platforms-de.md delete mode 100644 docs/src/pages/getting-started/supported-platforms/supported-platforms-es.md delete mode 100644 docs/src/pages/getting-started/supported-platforms/supported-platforms-fr.md delete mode 100644 docs/src/pages/getting-started/supported-platforms/supported-platforms-ja.md delete mode 100644 docs/src/pages/getting-started/supported-platforms/supported-platforms-ru.md delete mode 100644 docs/src/pages/getting-started/templates/templates-de.md delete mode 100644 docs/src/pages/getting-started/templates/templates-es.md delete mode 100644 docs/src/pages/getting-started/templates/templates-fr.md delete mode 100644 docs/src/pages/getting-started/templates/templates-ja.md delete mode 100644 docs/src/pages/getting-started/templates/templates-ru.md delete mode 100644 docs/src/pages/getting-started/usage/usage-de.md delete mode 100644 docs/src/pages/getting-started/usage/usage-es.md delete mode 100644 docs/src/pages/getting-started/usage/usage-fr.md delete mode 100644 docs/src/pages/getting-started/usage/usage-ja.md delete mode 100644 docs/src/pages/getting-started/usage/usage-ru.md delete mode 100644 docs/src/pages/guides/api/api-de.md delete mode 100644 docs/src/pages/guides/api/api-es.md delete mode 100644 docs/src/pages/guides/api/api-fr.md delete mode 100644 docs/src/pages/guides/api/api-ja.md delete mode 100644 docs/src/pages/guides/api/api-ru.md delete mode 100644 docs/src/pages/guides/composition/composition-de.md delete mode 100644 docs/src/pages/guides/composition/composition-es.md delete mode 100644 docs/src/pages/guides/composition/composition-fr.md delete mode 100644 docs/src/pages/guides/composition/composition-ja.md delete mode 100644 docs/src/pages/guides/composition/composition-ru.md delete mode 100644 docs/src/pages/guides/content-security-policy/content-security-policy-de.md delete mode 100644 docs/src/pages/guides/content-security-policy/content-security-policy-es.md delete mode 100644 docs/src/pages/guides/content-security-policy/content-security-policy-fr.md delete mode 100644 docs/src/pages/guides/content-security-policy/content-security-policy-ja.md delete mode 100644 docs/src/pages/guides/content-security-policy/content-security-policy-ru.md delete mode 100644 docs/src/pages/guides/flow/flow-de.md delete mode 100644 docs/src/pages/guides/flow/flow-es.md delete mode 100644 docs/src/pages/guides/flow/flow-fr.md delete mode 100644 docs/src/pages/guides/flow/flow-ja.md delete mode 100644 docs/src/pages/guides/flow/flow-ru.md delete mode 100644 docs/src/pages/guides/interoperability/interoperability-de.md delete mode 100644 docs/src/pages/guides/interoperability/interoperability-es.md delete mode 100644 docs/src/pages/guides/interoperability/interoperability-fr.md delete mode 100644 docs/src/pages/guides/interoperability/interoperability-ja.md delete mode 100644 docs/src/pages/guides/interoperability/interoperability-ru.md delete mode 100644 docs/src/pages/guides/localization/localization-de.md delete mode 100644 docs/src/pages/guides/localization/localization-es.md delete mode 100644 docs/src/pages/guides/localization/localization-fr.md delete mode 100644 docs/src/pages/guides/localization/localization-ja.md delete mode 100644 docs/src/pages/guides/localization/localization-ru.md delete mode 100644 docs/src/pages/guides/migration-v0x/migration-v0x-de.md delete mode 100644 docs/src/pages/guides/migration-v0x/migration-v0x-es.md delete mode 100644 docs/src/pages/guides/migration-v0x/migration-v0x-fr.md delete mode 100644 docs/src/pages/guides/migration-v0x/migration-v0x-ja.md delete mode 100644 docs/src/pages/guides/migration-v0x/migration-v0x-ru.md delete mode 100644 docs/src/pages/guides/migration-v3/migration-v3-de.md delete mode 100644 docs/src/pages/guides/migration-v3/migration-v3-es.md delete mode 100644 docs/src/pages/guides/migration-v3/migration-v3-fr.md delete mode 100644 docs/src/pages/guides/migration-v3/migration-v3-ja.md delete mode 100644 docs/src/pages/guides/migration-v3/migration-v3-ru.md delete mode 100644 docs/src/pages/guides/migration-v4/migration-v4-de.md delete mode 100644 docs/src/pages/guides/migration-v4/migration-v4-es.md delete mode 100644 docs/src/pages/guides/migration-v4/migration-v4-fr.md delete mode 100644 docs/src/pages/guides/migration-v4/migration-v4-ja.md delete mode 100644 docs/src/pages/guides/migration-v4/migration-v4-ru.md delete mode 100644 docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-de.md delete mode 100644 docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-es.md delete mode 100644 docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-fr.md delete mode 100644 docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ja.md delete mode 100644 docs/src/pages/guides/minimizing-bundle-size/minimizing-bundle-size-ru.md delete mode 100644 docs/src/pages/guides/pickers-migration/pickers-migration-de.md delete mode 100644 docs/src/pages/guides/pickers-migration/pickers-migration-es.md delete mode 100644 docs/src/pages/guides/pickers-migration/pickers-migration-fr.md delete mode 100644 docs/src/pages/guides/pickers-migration/pickers-migration-ja.md delete mode 100644 docs/src/pages/guides/pickers-migration/pickers-migration-ru.md delete mode 100644 docs/src/pages/guides/responsive-ui/responsive-ui-de.md delete mode 100644 docs/src/pages/guides/responsive-ui/responsive-ui-es.md delete mode 100644 docs/src/pages/guides/responsive-ui/responsive-ui-fr.md delete mode 100644 docs/src/pages/guides/responsive-ui/responsive-ui-ja.md delete mode 100644 docs/src/pages/guides/responsive-ui/responsive-ui-ru.md delete mode 100644 docs/src/pages/guides/right-to-left/right-to-left-de.md delete mode 100644 docs/src/pages/guides/right-to-left/right-to-left-es.md delete mode 100644 docs/src/pages/guides/right-to-left/right-to-left-fr.md delete mode 100644 docs/src/pages/guides/right-to-left/right-to-left-ja.md delete mode 100644 docs/src/pages/guides/right-to-left/right-to-left-ru.md delete mode 100644 docs/src/pages/guides/routing/routing-de.md delete mode 100644 docs/src/pages/guides/routing/routing-es.md delete mode 100644 docs/src/pages/guides/routing/routing-fr.md delete mode 100644 docs/src/pages/guides/routing/routing-ja.md delete mode 100644 docs/src/pages/guides/routing/routing-ru.md delete mode 100644 docs/src/pages/guides/server-rendering/server-rendering-de.md delete mode 100644 docs/src/pages/guides/server-rendering/server-rendering-es.md delete mode 100644 docs/src/pages/guides/server-rendering/server-rendering-fr.md delete mode 100644 docs/src/pages/guides/server-rendering/server-rendering-ja.md delete mode 100644 docs/src/pages/guides/server-rendering/server-rendering-ru.md delete mode 100644 docs/src/pages/guides/styled-engine/styled-engine-de.md delete mode 100644 docs/src/pages/guides/styled-engine/styled-engine-es.md delete mode 100644 docs/src/pages/guides/styled-engine/styled-engine-fr.md delete mode 100644 docs/src/pages/guides/styled-engine/styled-engine-ja.md delete mode 100644 docs/src/pages/guides/styled-engine/styled-engine-ru.md delete mode 100644 docs/src/pages/guides/testing/testing-de.md delete mode 100644 docs/src/pages/guides/testing/testing-es.md delete mode 100644 docs/src/pages/guides/testing/testing-fr.md delete mode 100644 docs/src/pages/guides/testing/testing-ja.md delete mode 100644 docs/src/pages/guides/testing/testing-ru.md delete mode 100644 docs/src/pages/guides/typescript/typescript-de.md delete mode 100644 docs/src/pages/guides/typescript/typescript-es.md delete mode 100644 docs/src/pages/guides/typescript/typescript-fr.md delete mode 100644 docs/src/pages/guides/typescript/typescript-ja.md delete mode 100644 docs/src/pages/guides/typescript/typescript-ru.md delete mode 100644 docs/src/pages/production-error/index-de.md delete mode 100644 docs/src/pages/production-error/index-es.md delete mode 100644 docs/src/pages/production-error/index-fr.md delete mode 100644 docs/src/pages/production-error/index-ja.md delete mode 100644 docs/src/pages/production-error/index-ru.md delete mode 100644 docs/src/pages/styles/advanced/advanced-de.md delete mode 100644 docs/src/pages/styles/advanced/advanced-es.md delete mode 100644 docs/src/pages/styles/advanced/advanced-fr.md delete mode 100644 docs/src/pages/styles/advanced/advanced-ja.md delete mode 100644 docs/src/pages/styles/advanced/advanced-ru.md delete mode 100644 docs/src/pages/styles/api/api-de.md delete mode 100644 docs/src/pages/styles/api/api-es.md delete mode 100644 docs/src/pages/styles/api/api-fr.md delete mode 100644 docs/src/pages/styles/api/api-ja.md delete mode 100644 docs/src/pages/styles/api/api-ru.md delete mode 100644 docs/src/pages/styles/basics/basics-de.md delete mode 100644 docs/src/pages/styles/basics/basics-es.md delete mode 100644 docs/src/pages/styles/basics/basics-fr.md delete mode 100644 docs/src/pages/styles/basics/basics-ja.md delete mode 100644 docs/src/pages/styles/basics/basics-ru.md delete mode 100644 docs/src/pages/styles/typescript/typescript-de.md delete mode 100644 docs/src/pages/styles/typescript/typescript-es.md delete mode 100644 docs/src/pages/styles/typescript/typescript-fr.md delete mode 100644 docs/src/pages/styles/typescript/typescript-ja.md delete mode 100644 docs/src/pages/styles/typescript/typescript-ru.md delete mode 100644 docs/src/pages/system/advanced/advanced-de.md delete mode 100644 docs/src/pages/system/advanced/advanced-es.md delete mode 100644 docs/src/pages/system/advanced/advanced-fr.md delete mode 100644 docs/src/pages/system/advanced/advanced-ja.md delete mode 100644 docs/src/pages/system/advanced/advanced-ru.md delete mode 100644 docs/src/pages/system/basics/basics-de.md delete mode 100644 docs/src/pages/system/basics/basics-es.md delete mode 100644 docs/src/pages/system/basics/basics-fr.md delete mode 100644 docs/src/pages/system/basics/basics-ja.md delete mode 100644 docs/src/pages/system/basics/basics-ru.md delete mode 100644 docs/src/pages/system/borders/borders-de.md delete mode 100644 docs/src/pages/system/borders/borders-es.md delete mode 100644 docs/src/pages/system/borders/borders-fr.md delete mode 100644 docs/src/pages/system/borders/borders-ja.md delete mode 100644 docs/src/pages/system/borders/borders-ru.md delete mode 100644 docs/src/pages/system/box/box-de.md delete mode 100644 docs/src/pages/system/box/box-es.md delete mode 100644 docs/src/pages/system/box/box-fr.md delete mode 100644 docs/src/pages/system/box/box-ja.md delete mode 100644 docs/src/pages/system/box/box-ru.md delete mode 100644 docs/src/pages/system/display/display-de.md delete mode 100644 docs/src/pages/system/display/display-es.md delete mode 100644 docs/src/pages/system/display/display-fr.md delete mode 100644 docs/src/pages/system/display/display-ja.md delete mode 100644 docs/src/pages/system/display/display-ru.md delete mode 100644 docs/src/pages/system/flexbox/flexbox-de.md delete mode 100644 docs/src/pages/system/flexbox/flexbox-es.md delete mode 100644 docs/src/pages/system/flexbox/flexbox-fr.md delete mode 100644 docs/src/pages/system/flexbox/flexbox-ja.md delete mode 100644 docs/src/pages/system/flexbox/flexbox-ru.md delete mode 100644 docs/src/pages/system/grid/grid-de.md delete mode 100644 docs/src/pages/system/grid/grid-es.md delete mode 100644 docs/src/pages/system/grid/grid-fr.md delete mode 100644 docs/src/pages/system/grid/grid-ja.md delete mode 100644 docs/src/pages/system/grid/grid-ru.md delete mode 100644 docs/src/pages/system/palette/palette-de.md delete mode 100644 docs/src/pages/system/palette/palette-es.md delete mode 100644 docs/src/pages/system/palette/palette-fr.md delete mode 100644 docs/src/pages/system/palette/palette-ja.md delete mode 100644 docs/src/pages/system/palette/palette-ru.md delete mode 100644 docs/src/pages/system/positions/positions-de.md delete mode 100644 docs/src/pages/system/positions/positions-es.md delete mode 100644 docs/src/pages/system/positions/positions-fr.md delete mode 100644 docs/src/pages/system/positions/positions-ja.md delete mode 100644 docs/src/pages/system/positions/positions-ru.md delete mode 100644 docs/src/pages/system/properties/properties-de.md delete mode 100644 docs/src/pages/system/properties/properties-es.md delete mode 100644 docs/src/pages/system/properties/properties-fr.md delete mode 100644 docs/src/pages/system/properties/properties-ja.md delete mode 100644 docs/src/pages/system/properties/properties-ru.md delete mode 100644 docs/src/pages/system/screen-readers/screen-readers-de.md delete mode 100644 docs/src/pages/system/screen-readers/screen-readers-es.md delete mode 100644 docs/src/pages/system/screen-readers/screen-readers-fr.md delete mode 100644 docs/src/pages/system/screen-readers/screen-readers-ja.md delete mode 100644 docs/src/pages/system/screen-readers/screen-readers-ru.md delete mode 100644 docs/src/pages/system/shadows/shadows-de.md delete mode 100644 docs/src/pages/system/shadows/shadows-es.md delete mode 100644 docs/src/pages/system/shadows/shadows-fr.md delete mode 100644 docs/src/pages/system/shadows/shadows-ja.md delete mode 100644 docs/src/pages/system/shadows/shadows-ru.md delete mode 100644 docs/src/pages/system/sizing/sizing-de.md delete mode 100644 docs/src/pages/system/sizing/sizing-es.md delete mode 100644 docs/src/pages/system/sizing/sizing-fr.md delete mode 100644 docs/src/pages/system/sizing/sizing-ja.md delete mode 100644 docs/src/pages/system/sizing/sizing-ru.md delete mode 100644 docs/src/pages/system/spacing/spacing-de.md delete mode 100644 docs/src/pages/system/spacing/spacing-es.md delete mode 100644 docs/src/pages/system/spacing/spacing-fr.md delete mode 100644 docs/src/pages/system/spacing/spacing-ja.md delete mode 100644 docs/src/pages/system/spacing/spacing-ru.md delete mode 100644 docs/src/pages/system/typography/typography-de.md delete mode 100644 docs/src/pages/system/typography/typography-es.md delete mode 100644 docs/src/pages/system/typography/typography-fr.md delete mode 100644 docs/src/pages/system/typography/typography-ja.md delete mode 100644 docs/src/pages/system/typography/typography-ru.md delete mode 100644 docs/src/pages/versions/versions-de.md delete mode 100644 docs/src/pages/versions/versions-es.md delete mode 100644 docs/src/pages/versions/versions-fr.md delete mode 100644 docs/src/pages/versions/versions-ja.md delete mode 100644 docs/src/pages/versions/versions-ru.md 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 deleted file mode 100644 index 32e77ed8dfbbb9..00000000000000 --- a/docs/src/pages/components/about-the-lab/about-the-lab-de.md +++ /dev/null @@ -1,58 +0,0 @@ -# Über das Labor - -

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

- -Der Hauptunterschied zwischen dem Labor und dem Kern besteht darin, wie die Komponenten versioniert werden. Ein separates Labor-Paket erlaubt es uns, wenn es notwendig ist, nicht rückwärtskompatible Änderungen zu veröffentlichen, ohne die [langsamere Veröffentlichungsfrequenz](https://material-ui.com/versions/#release-frequency) des Kernpakets einzuschränken. - -Während Entwickler die Komponenten verwenden, testen und Probleme melden, erfahren die Betreuer (Maintainer) mehr über Mängel der Komponenten: fehlende Features, Barrierefreiheit, Fehler, API-Design usw. Je älter und mehr verwendet eine Komponente ist, desto weniger wahrscheinlich ist es, dass neue Probleme gefunden werden und in der Folge, große Änderungen eingeführt werden müssen. - -Damit eine Komponente zum Kern (Core) übergehen kann, werden folgende Kriterien berücksichtigt: - -- Folgendes sollte **verwendet werden**. The Material-UI team uses Google Analytics in the documentation (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 low demand for it. -- Sie muss der **Codequalität** der Kernkomponenten entsprechen. It doesn't have to be perfect to be part of the core, but the component should be reliable enough that developers can depend on it. - - Jede Komponente benötigt **Typdefinitionen**. Es ist derzeit nicht erforderlich, dass eine Test-Kompontente angegeben wird, aber sie muss angegeben werden, um in den Kern (Core) zu wechseln. - - Erfordert eine gute **Testabdeckung**. Einige der Test-Komponenten haben derzeit keine umfassenden Tests. -- Kann es ein **ausschlaggebender Punkt** sein, um Benutzer zu einem Upgrade auf die neueste Hauptversion zu bewegen? Je weniger zersplittert die Gemeinschaft ist, desto besser. -- Es muss eine geringe Wahrscheinlichkeit für eine **einschneidende Änderung** in der kurzen/mittleren Zukunft bestehen. Zum Beispiel, wenn es eine neue Funktion benötigt, die wahrscheinlich eine einschneidende Änderung erfordert, ist es vielleicht besser, seine Aufnahme in den Kern zu verschieben. - -## Installation - -Installieren Sie das Paket innerhalb des Projektordners mit: - -```sh -// mit npm -npm install @material-ui/lab - -// mit yarn -yarn add @material-ui/lab -``` - -Das Labor hat eine Peer-Abhängigkeit von den Kernkomponenten. Wenn Sie in Ihrem Projekt noch keine Material-UI verwenden, können Sie es mit folgendem installieren: - -```sh -// mit npm -npm install @material-ui/core - -// mit yarn -yarn add @material-ui/core -``` - -## TypeScript - -In order to benefit from the [CSS overrides](/customization/theme-components/#global-style-overrides) and [default prop customization](/customization/theme-components/#default-props) with the theme, TypeScript users need to import the following types. Internally, it uses [module augmentation](/guides/typescript/#customization-of-theme) to extend the default theme structure with the extension components available in the lab. - -```tsx -import '@material-ui/lab/themeAugmentation'; - -const theme = createTheme({ - components: { - MuiTimeline: { - styleOverrides: { - root: { - backgroundColor: 'red', - }, - }, - }, - }, -}); -``` diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-es.md b/docs/src/pages/components/about-the-lab/about-the-lab-es.md deleted file mode 100644 index fdf489a9aaeba2..00000000000000 --- a/docs/src/pages/components/about-the-lab/about-the-lab-es.md +++ /dev/null @@ -1,58 +0,0 @@ -# Acerca del laboratorio - -

Este paquete aloja componentes en incubación que todavía no están listos para estar en core.

- -La principal diferencia entre lab y core es la forma en que los componentes están versionados. Tener un paquete lab (laboratorio) nos permite la liberación de cambios dañinos cuando sea necesario, mientras que el paquete core (núcleo) sigue una [política de movimiento más lenta](https://material-ui.com/versions/#release-frequency). - -Mientras los desarrolladores usan y prueban los componentes y reportan problemas, los mantenedores aprendemos más acerca de las deficiencias de los componentes: características faltantes, problemas de accesibilidad, defectos, diseño de la API, etc. Entre más antiguo y utilizado un componente es, menos probable es que encuentren nuevos problemas y, posteriormente, se necesiten introducir cambios dañinos. - -Para que un componente esté listo para pasar al core, los siguientes criterios son considerados: - -- Tiene que ser **usado**. El equipo de Materia-UI utiliza estadísticas de Google Analytics, entre otras métricas, para evaluar el uso de cada componente. Un componente lab con bajo uso o bien significa que no está funcionando plenamente todavía, o que tiene una baja demanda. -- Necesita tener la misma **calidad de código** que los componentes del core. No tiene que ser perfecto para ser una parte del core, pero el componente debe ser lo suficientemente confiable que desarrolladores pueden depender de él. - - Cada componente necesita **definiciones de tipo**. Actualmente no es necesario un componente de lab tenga tipo, pero debe tenerlo para moverse al core. - - Requiere buena **cobertura de pruebas**. Algunos de los componentes de lab, actualmente no tienen pruebas exhaustivas. -- ¿Puede utilizarse como **palanca** para incentivar a los usuarios a actualizar a la última versión mayor? Cuanto menos fragmentada este la comunidad, mejor. -- Necesita tener una baja probabilidad de **cambio dañinos** en el corto/mediano plazo. Por ejemplo, si se necesita una nueva característica que probablemente va a requerir un cambio dañino, seria preferible retrasar su promoción al core. - -## Instalación - -Instala el paquete en el directorio de tu proyecto con: - -```sh -// usando npm -npm install @material-ui/lab - -// usando yarn -yarn add @material-ui/lab -``` - -Lab tiene como dependencia par a los componentes del core. Si aún no estás usando Material-UI en tu proyecto, puedes instalarlo con: - -```sh -// usando npm -npm install @material-ui/core - -// usando yarn -yarn add @material-ui/core -``` - -## TypeScript - -Con el fin de beneficiarse de la [sobrescritura de CSS](/customization/theme-components/#global-style-overrides) y de la [customización de las propiedades por defecto](/customization/theme-components/#default-props), los usuarios de TypeScript necesitan importar los siguientes tipos. Internamente, utiliza [ampliación de módulos](/guides/typescript/#customization-of-theme) para extender la estructura por defecto del tema con los componentes de extensión disponibles en el laboratorio. - -```tsx -import '@material-ui/lab/themeAugmentation'; - -const theme = createTheme({ - components: { - MuiTimeline: { - styleOverrides: { - root: { - backgroundColor: 'red', - }, - }, - }, - }, -}); -``` 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 deleted file mode 100644 index 53ab3e6e7c8f24..00000000000000 --- a/docs/src/pages/components/about-the-lab/about-the-lab-fr.md +++ /dev/null @@ -1,59 +0,0 @@ -# A propos du lab - -

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

- -La principale différence entre le laboratoire et le noyau est la façon dont les composants sont versionnés. Avoir un paquet laboratoire séparer nous permets de pouvoir effectuer des changements ou d'intégrer de nouvelles fonctionnalités tandis que le noyau suit une [politique plus lente](https://material-ui.com/versions/#release-frequency). - -Lorsque les développeur utilise et test les composant en signalant les éventuels problèmes, les contributeurs en apprennent plus sur se que le composant pourrait manquer, fonctionnalité manquante, problème d'accessibilité, bugs, API design, etc. Plus un composant est âgé, plus il est utilisé, moins il y aura de chances de trouver de nouveaux problèmes et par conséquent de devoir subir d'important changement. - -Pour qu'un composant soit prêt à être déplacer dans le noyau, les critères suivant doivent être remplis: - -- Il doit être **utilisé**. L'équipe de Material-UI utilise les données de Google Analytics et d'autres données, pour évaluer l'utilisation de chaque composant. Un composant du laboratoire avec très peu d'utilisation, veux soit dire qu'il n'est pas entièrement opérationnel, ou qu'il ni a pas suffisamment de demande. -- Il doit correspondre à la **qualité de code** des composants du noyau. Sa ne doit pas être parfait pour faire par du noyau, mais le composant doit être suffisamment fiable pour que les développeur puisse en dépendre. - - Chaque composant a besoin de **définitions de type**. Il n'est pas nécessaire qu'un composant du laboratoire soit typés mais pour être déplacer dans le noyau il devra l'être. - - Nécessite une bonne **couverture de tests**. Certains composant du laboratoire n'ont actuellement aucun tests. -- Peut-on l'utiliser comme **effet de levier** pour encourager les utilisateurs à passer à la dernière version majeure ? Moins la communauté est divisé mieux s'est. -- Il doit y avoir une faible probabilité de **changement majeur** dans un futur proche/moyen. Par exemple, si il y a besoin d'intégrer de nouvelle fonctionnalité induisant d'important changement, alors il serait préférable de retarder son déplacement vers le noyau. - -## Installation - -Installez le package dans votre répertoire de projet avec: - -```sh -// Avec npm -npm install @material-ui/lab@next - -// Avec yarn -yarn add @material-ui/lab@next -``` - -Le laboratoire dépend des composants du package principal. Si vous n'utilisez pas encore Material-UI dans votre projet, vous pouvez l'installer avec: - -```sh -// Avec npm -npm install @material-ui/core@next - -// Avec yarn -yarn add @material-ui/core@next -``` - -## TypeScript - -De manière à pouvoir [ outrepasser le CSS ](/customization/theme-components/#global-style-overrides) et [ à personnaliser les propriétés par défaut ](/customization/theme-components/#default-props) avec le thème, les utilisateurs de TypeScript devront importer les types suivant. En interne, il utilise [le module d'augmentation](/guides/typescript/#customization-of-theme) pour étendre la structure du thème par défaut avec l'extension de composant disponible dans le laboratoire. - -```tsx -import '@material-ui/lab/themeAugmentation'; - -const theme = createTheme({ - components: { - MuiTimeline: { - styleOverrides: { - root: { - backgroundColor: 'red', - }, - }, - }, - }, -}); - }) ; -``` diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-ja.md b/docs/src/pages/components/about-the-lab/about-the-lab-ja.md deleted file mode 100644 index d3557fdc61a410..00000000000000 --- a/docs/src/pages/components/about-the-lab/about-the-lab-ja.md +++ /dev/null @@ -1,59 +0,0 @@ -# ラボについて - -

このパッケージは、まだコアに移動する準備ができていないインキュベーター・コンポーネントをホストします。

- -Labパッケージとcoreパッケージの明確な違いはどのようにバージョン管理されるかです。 Labパッケージとcoreパッケージの明確な違いはどのようにバージョン管理されるかです。 Coreパッケージは[slower-moving policy](https://material-ui.com/versions/#release-frequency). - -開発者としてlabパッケージのコンポーネントをテスト/使用し、不具合や、使いにくさ、デザインなどについて報告する事ができます。そうする事によってLab パッケージのコンポーネントをより良くする事ができます。 みなさんが使ってくれれば使ってくれるほど、将来的に起きうる重大な問題を早期に発見・改善する事ができます。 - -Coreパッケージに移るためには以下の基準を考慮します。 - -- きちんと**使われている**必要があります。 Material-UI開発チームはドキュメントにGoogleAnalyticsを使用しています。それはそれぞれのコンポーネントがどれだけ使われているかを評価するためです。 A lab component with low usage either means that it isn't fully working yet, or that there is low demand for it. -- Coreコンポーネントと同じ**品質**である必要が あります。 It doesn't have to be perfect to be part of the core, but the component should be reliable enough that developers can depend on it. - - 各コンポーネントが**型定義**を持つことが必要です。 現在、Labパッケージのコンポーネントに型は必要ありませんが、Coreパッケージに移すためには必要です。 - - 十分な**コード網羅率**が必要です。 Labコンポーネントのいくつかは十分なテストコードが現在ありません。 -- ユーザーが最新のメジャーバージョンにアップデートすることに**魅力**を感じるか？ コミュニティが分断されないほど、良い。 -- 短/中期的に**破壊的変更**が起きる可能性が低いようにしてください。 たとえば、新しい機能を追加するのに破壊的変更が必要な可能性があれば、そのコンポーネントのCoreへの移動は遅らせた方がよい。 - -## インストール - -次を使用して、プロジェクトディレクトリにパッケージをインストールします。 - -```sh -// npmの場合 -npm install @material-ui/lab@next - -// yarnの場合 -yarn add @material-ui/lab@next -``` - -このラボには、コアコンポーネントへのピア依存関係があります。 プロジェクトでまだMaterial-UIを使用していない場合は、次のコマンドでインストールできます。 - -```sh -// npmの場合 -npm install @material-ui/core@next - -// yarnの場合 -yarn add @material-ui/core@next - -``` - -## TypeScript - -[CSSのオーバーライド](/customization/theme-components/#global-style-overrides)と[デフォルトのプロパティのカスタマイズ](/customization/theme-components/#default-props)をするには、TypeScriptユーザーは以下の型をインポートする必要があります。 内部的には、[module augmentation](/guides/typescript/#customization-of-theme)を使って、デフォルトのテーマ構造をLabで利用可能なコンポーネントに拡張します - -```tsx -import '@material-ui/lab/themeAugmentation'; - -const theme = createTheme({ - components: { - MuiTimeline: { - styleOverrides: { - root: { - backgroundColor: 'red', - }, - }, - }, - }, -}); -``` diff --git a/docs/src/pages/components/about-the-lab/about-the-lab-ru.md b/docs/src/pages/components/about-the-lab/about-the-lab-ru.md deleted file mode 100644 index a5b2290bbf0f68..00000000000000 --- a/docs/src/pages/components/about-the-lab/about-the-lab-ru.md +++ /dev/null @@ -1,58 +0,0 @@ -# О пакете lab - -

Этот пакет содержит инкубационные компоненты, которые еще не готовы к переходу в основной пакет.

- -Главное различие между пакетом lab и основным пакетом заключается в очерёдности выхода обновлений. Наличие отдельного пакета lab позволяет нам выпускать критические обновления по мере необходимости, в то время как основной пакет следует [политике "семь раз отмерь..."](https://material-ui.com/versions/#release-frequency). - -По мере использования и тестирования компонентов сторонними разработчиками, разработчики, поддерживающие пакет, узнают больше о недостатках компонентов: недостающих фичах, проблемах универсального доступа, багах, проблемах в дизайне API, и т.д. Чем старше компонент, и чем более интенсивно он используется, тем менее вероятно проявление новых проблем, требующих критических обновлений. - -Готовность компонента к перемещению в основной пакет определяется следующими критериями: - -- Он должен **использоваться**. Команда Material-UI, помимо прочих метрик, использует Google Analytics, чтобы оценить использование каждого компонента. Если компонент пакета lab используется редко, это может говорить о том, что он не полностью работоспособен, либо об отсутствии спроса на этот компонент. -- Он должен соответствовать **качеству кода** компонентов основного пакета. Он не обязан быть идеальным, чтобы стать частью основного пакета, но компонент должен быть достаточно надёжным, чтобы разработчики могли на него положиться. - - Для каждого компонента требуется **определение типов**. Компоненты пакета lab на данный момент не обязаны быть типизированными, но это понадобится для перемещения компонента в основной пакет. - - Требуется хорошее **покрытие тестами**. Некоторые компоненты пакета lab на данный момент не имеют всесторонних тестов. -- Может ли он использоваться как **рычаг**, стимулирующий пользователей к обновлению до последней мажорной версии? Чем менее разрозненно коммьюнити, тем лучше. -- Он должен иметь низкую вероятность **критических изменений** в обозримом будущем. К примеру, если ему не хватает новой фичи, которая скорее всего потребует критических изменений, предпочтительно будет отложить его добавление в основной пакет. - -## Инструкция по установке - -Установите пакет в каталог проекта командой: - -```sh -// npm -npm install @material-ui/lab - -// yarn -yarn add @material-ui/lab -``` - -Пакет lab зависит напрямую от пакета основных компонентов. Если Material-UI ещё не использовался вашем проекте, вы можете установить его командой: - -```sh -// для npm -npm install @material-ui/core - -// для yarn -yarn add @material-ui/core -``` - -## TypeScript - -Чтобы воспользоваться преимуществами [переопределения CSS](/customization/theme-components/#global-style-overrides) и [изменения свойств по умолчанию](/customization/theme-components/#default-props), разработчикам, использующим TypeScript, необходимо импортировать следующие типы. Чтобы расширить структуру темы по умолчанию для использования компонентов доступных в пакете lab, внутри используется [аугментация модулей](/guides/typescript/#customization-of-theme). - -```tsx -import '@material-ui/lab/themeAugmentation'; - -const theme = createTheme({ - components: { - MuiTimeline: { - styleOverrides: { - root: { - backgroundColor: 'red', - }, - }, - }, - }, -}); -``` diff --git a/docs/src/pages/components/accordion/accordion-de.md b/docs/src/pages/components/accordion/accordion-de.md deleted file mode 100644 index 8873b921f5f29b..00000000000000 --- a/docs/src/pages/components/accordion/accordion-de.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: React Accordion Komponente -components: Accordion, AccordionActions, AccordionDetails, AccordionSummary -githubLabel: 'component: Accordion' -materialDesign: https://material.io/archive/guidelines/components/expansion-panels.html -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#accordion' ---- - -# Accordion (Akkordeon) - -

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

- -[Ein Erweiterungspanel](https://material.io/archive/guidelines/components/expansion-panels.html) ist ein leichter container, der entweder alleinstehend verwendet werden kann oder mit einer größeren Oberfläche verbunden ist, beispielsweise einer Karte. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -> **Hinweis:** Diese Komponente ist zwar nicht mehr in den [Material-Design-Richtlinien](https://material.io/) dokumentiert, wird aber weiterhin von Material-UI unterstützt. Es war früher als "Erweiterungspanel" bekannt. - -## Einfaches Erweiterungspanel - -{{"demo": "pages/components/accordion/BasicAccordion.js", "bg": true}} - -## Kontrolliertes Akkordeon - -Erweitern Sie das Standardbedienfeldverhalten, um ein Akkordeon mit der Komponente `Accordion` zu erstellen. - -{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}} - -## Individuelles Erweiterungspanel - -Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/how-to-customize/). - -{{"demo": "pages/components/accordion/CustomizedAccordions.js"}} - -## Performance - -Der Inhalt von Accordions wird standardmäßig bereitgestellt, auch wenn das Panel nicht erweitert wird. Bei diesem Standardverhalten werden serverseitiges Rendering und SEO berücksichtigt. If you render expensive component trees inside your panels or simply render many panels it might be a good idea to change this default behavior by enabling the `unmountOnExit` in `TransitionProps`: - -```jsx - -``` - -Wie bei jeder Leistungsoptimierung ist dies keine Silberkugel. Stellen Sie sicher, dass Sie zuerst Engpässe erkennen und anschließend diese Optimierungsstrategien ausprobieren. - -## Barrierefreiheit - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion) - -Für eine optimale Erreichbarkeit empfehlen wir die Einstellung `id` und `aria-controls` in der `AccordionSummary`. Das `Accordion` leitet die notwendigen `aria-labelledby` und `id` für den Inhaltsbereich des Panels ab. diff --git a/docs/src/pages/components/accordion/accordion-es.md b/docs/src/pages/components/accordion/accordion-es.md deleted file mode 100644 index 3f63512ab30e6a..00000000000000 --- a/docs/src/pages/components/accordion/accordion-es.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: React Accordion component -components: Accordion, AccordionActions, AccordionDetails, AccordionSummary -githubLabel: 'component: Accordion' -materialDesign: https://material.io/archive/guidelines/components/expansion-panels.html -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#accordion' ---- - -# Accordion (panel de expansión) - -

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

- -Un [panel de expansión](https://material.io/archive/guidelines/components/expansion-panels.html) es un contenedor liviano que puede ser ya sea único o estar conectado a una superficie más grande, como una tarjeta. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -> **Note:** Expansion panels are no longer documented in the [Material Design guidelines](https://material.io/), but Material-UI will continue to support them. Antes era conocido como "panel de expansión". - -## Panel de expansión simple - -{{"demo": "pages/components/accordion/SimpleAccordion.js", "bg": true}} - -## Acordeón controlado - -Extiende el comportamiento por defecto del panel para crear un acordeón con el componente `Accordion`. - -{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}} - -## Customized accordions - -He aquí un ejemplo de personalización del componente. Puedes aprender más sobre esto en la [sección Personalizando Componentes de la documentación](/customization/how-to-customize/). - -{{"demo": "pages/components/accordion/CustomizedAccordions.js"}} - -## Rendimiento - -The content of Accordions is mounted by default even if the panel is not expanded. Este comportamiento por defecto tiene el renderizado del lado del servidor y SEO en mente. If you render expensive component trees inside your panels or simply render many panels it might be a good idea to change this default behavior by enabling the `unmountOnExit` in `TransitionProps`: - -```jsx - -``` - -Como en cualquier optimización de rendimiento esto no es una bala de plata. Be sure to identify bottlenecks first and then try out these optimization strategies. - -## Accesibilidad - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion) - -Para óptima accesibilidad recomendamos establecer `id` y `aria-controls` en `AccordionSummary`. El `Accordion` derivará los necesarios `aria-labelledby` y `id` para la región de contenido del panel. diff --git a/docs/src/pages/components/accordion/accordion-fr.md b/docs/src/pages/components/accordion/accordion-fr.md deleted file mode 100644 index 35ebee5524609b..00000000000000 --- a/docs/src/pages/components/accordion/accordion-fr.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Composant React Accordéon -components: Accordion, AccordionActions, AccordionDetails, AccordionSummary -githubLabel: 'component: Accordion' -materialDesign: https://material.io/archive/guidelines/components/expansion-panels.html -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#accordion' ---- - -# Accordéon (Panneau d'extension) - -

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

- -Un [panneau d'extension](https://material.io/archive/guidelines/components/expansion-panels.html) est un conteneur léger pouvant être autonome ou connecté à une surface plus grande, telle qu'une carte. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -> **Note:** Le panneau d'expansion n'est plus documenté dans le [Material Design guidelines](https://material.io/), mais Material-UI continue le support. Il était précédemment connus sous le nom de panneau d'expansion. - -## Panneau d'extension simple - -{{"demo": "pages/components/accordion/SimpleAccordion.js", "bg": true}} - -## Accordéon contrôlé - -Étendez le comportement du panneau par défaut pour créer un accordéon avec le composant `Accordion`. - -{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}} - -## Accordéon personnalisé - -Voici un exemple de personnalisation du composant. Vous pouvez en savoir plus dans la [page de documentation des overrides](/customization/how-to-customize/). - -{{"demo": "pages/components/accordion/CustomizedAccordions.js"}} - -## Performances - -Le contenu de l'accordéon est monter par défaut et se même si l'accordéon n'est pas ouvert. Se comportement à le "server-side rendrering" et le SEO comme objectif. Si vous devez rendre un lourd composant au niveau des détails de l'accordéon ou simplement rendre plusieurs accordéons, il serait une bonne idée de changer le comportement par défaut en activant le `unmountOnExit` dans le prop `TransitionProps`: - -```jsx - -``` - -Se n'est tout de même pas une solution miracle. Soyez sure de d'abord identifier les goulot d'étranglement et ensuite de considérer ses stratégies d'optimisation. - -## Accessibilité - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion) - -Pour une accessibilité optimal nous recommandons le paramètre `id` et `aria-controls` sur le `AccordionsSummary`. `Accordion` générera les nécessaires `aria-labelledby` et `id` pour le contenu régional de l'accordéon. diff --git a/docs/src/pages/components/accordion/accordion-ja.md b/docs/src/pages/components/accordion/accordion-ja.md deleted file mode 100644 index 2bcb2a836f9fff..00000000000000 --- a/docs/src/pages/components/accordion/accordion-ja.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: React アコーディオン コンポーネント -components: Accordion, AccordionActions, AccordionDetails, AccordionSummary -githubLabel: 'component: Accordion' -materialDesign: https://material.io/archive/guidelines/components/expansion-panels.html -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#accordion' ---- - -# Accordion (拡張パネル) - -

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

- -Reactアコーディオンコンポーネントは 単体で扱えるコンテナ、もしくはカードコンポーネントのようにより大きなコンポーネントと組み合わせて使います。 - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -> **注：** 拡張パネルについては、[Material Design guidelines](https://material.io/)では説明されていませんが、Material-UIでは引き続きサポートされます。 以前は"expansion panel"としてしられていたものです。 - -## 基本の Accordionコンポーネント - -{{"demo": "pages/components/accordion/BasicAccordion.js", "bg": true}} - -## Controlled Accordion - -パネルのデフォルトの動作を拡張し、`Accordion`コンポーネントを使用してアコーディオンを作成します。 - -{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}} - -## アコーディオンコンポーネントのカスタマイズ - -コンポーネントのカスタマイズ例を次に示します。 詳細については、 [こちら](/customization/how-to-customize/)を参照してください。 - -{{"demo": "pages/components/accordion/CustomizedAccordions.js"}} - -## パフォーマンス - -Accordionsのコンテンツは、パネルが展開されていない場合でもデフォルトでマウントされます。 このデフォルトの動作では、サーバー側のレンダリングとSEOが考慮されています。 パネルの中で高価なコンポーネント ツリーをレンダリングしたり、単に多くのパネルをレンダリングする場合は、`TransitionProps` の `unmountOnExit` を有効にして、このデフォルトの動作を変更するのが良いでしょう。 - -```jsx - -``` - -他のパフォーマンス最適化と同様、これは特効薬ではありません。 まずボトルネックを特定してから、これらの最適化戦略を試してください。 - -## アクセシビリティ - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion) - -最適なアクセシビリティのために、 `AccordionSummary``id` と `aria-controls` を設定することをお勧めします。 `Accordion` は、パネルのコンテンツ領域に必要な `aria-labelledby` および `id` を導き出します。 最適なアクセシビリティのために、 `AccordionSummary``id` と `aria-controls` を設定することをお勧めします。 `Accordion` は、パネルのコンテンツ領域に必要な `aria-labelledby` および `id` を導き出します。 diff --git a/docs/src/pages/components/accordion/accordion-ru.md b/docs/src/pages/components/accordion/accordion-ru.md deleted file mode 100644 index f6f741eeb23556..00000000000000 --- a/docs/src/pages/components/accordion/accordion-ru.md +++ /dev/null @@ -1,49 +0,0 @@ ---- -title: Компонент React Accordion -components: Accordion, AccordionActions, AccordionDetails, AccordionSummary -githubLabel: 'component: Accordion' -materialDesign: https://material.io/archive/guidelines/components/expansion-panels.html -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#accordion' ---- - -# Accordion - -

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

- -Аккордеон это простой контейнер, который может использоваться как самостоятельно, так и внутри более крупного компонента, такого как Card (карточка). - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -> **На заметку:** Аккордеоны больше не задокументированы в [руководствах Material Design](https://material.io/), но Material-UI будет продолжать поддерживать их. Ранее они были известны как "expansion panels". - -## Простой аккордеон - -{{"demo": "pages/components/accordion/BasicAccordion.js", "bg": true}} - -## Контролируемый аккордеон - -Используя компонент `Accordion`, расширив его поведение по умолчанию, можно получить "аккордеон". - -{{"demo": "pages/components/accordion/ControlledAccordions.js", "bg": true}} - -## Кастомизированные аккордеоны - -Ниже находится пример кастомизации компонента. Вы можете узнать об этом больше [в документации по переопределению свойств](/customization/how-to-customize/). - -{{"demo": "pages/components/accordion/CustomizedAccordions.js"}} - -## Производительность - -Содержимое аккордеонов монтируется по умолчанию, даже если панель не развернута. Это поведение подразумевает рендеринг на стороне сервера и SEO. Если внутри аккордеона находятся ресурсоемкие, для рендеринга, иерархии компонентов или просто на странице много аккордеонов, то возможно хорошей идеей будет изменить поведение по умолчанию включив `unmountOnExit` в `TransitionProps`: - -```jsx - -``` - -Как и при любой оптимизации производительности, эта функция не панацея. Сначала идентифицируйте узкие места и лишь затем пытайтесь применить эти стратегии. - -## Доступность - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#accordion) - -Для оптимальной доступности мы рекомендуем установить `id` и `aria-controls` на `AccordionSummary`. `Accordion` унаследует необходимые `aria-labelbyby` и `id` для области содержимого панели. diff --git a/docs/src/pages/components/alert/alert-de.md b/docs/src/pages/components/alert/alert-de.md deleted file mode 100644 index 3053de4c30aae5..00000000000000 --- a/docs/src/pages/components/alert/alert-de.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: React Hinweis Komponenten -components: Alert, AlertTitle -githubLabel: 'component: Alert' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert' ---- - -# Hinweis (Alert) - -

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

- -**Hinweis:** Diese Komponente ist nicht in den [Material-Design-Richtlinien](https://material.io/) dokumentiert, wird aber von Material-UI unterstützt. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Einfache Hinweise - -Der Hinweis bietet vier Schweregrade an, welche je ein eigenes Icon und eine eigene Farbe besitzen. - -{{"demo": "pages/components/alert/BasicAlerts.js"}} - -## Beschreibung - -Die `AlertTitle`-Komponente kann verwendet werden um einen formatierten Titel über dem Inhalt anzuzeigen. - -{{"demo": "pages/components/alert/DescriptionAlerts.js"}} - -## Aktionen - -Ein Hinweis kann eine Aktion wie zum Beispiel Schließen oder Zurücksetzen haben. Sie wird am Ende des Hinweises, hinter der Nachricht, angezeigt. - -Wenn ein `onClose` callback und kein `action` prop gesetzt ist, wird ein Schließ-Icon angezeigt. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. - -{{"demo": "pages/components/alert/ActionAlerts.js"}} - -### Transition - -You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. - -{{"demo": "pages/components/alert/TransitionAlerts.js"}} - -## Icons - -The `icon` prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity. - -You can change the default severity to icon mapping with the `iconMapping` prop. This can be defined globally using [theme customization](/customization/theme-components/#default-props). - -Setze das Symbol-Prop auf `false` wird das Symbol komplett entfernen. - -{{"demo": "pages/components/alert/IconAlerts.js"}} - -## Varianten - -Zwei weitere Varianten sind verfügbar – umrandet und ausgefüllt: - -### Umrandung - -{{"demo": "pages/components/alert/OutlinedAlerts.js"}} - -### Ausgefüllt - -{{"demo": "pages/components/alert/FilledAlerts.js"}} - -## Toast - -You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert. - -## Farbe (Color) - -The `color` prop will override the default color for the specified severity. - -{{"demo": "pages/components/alert/ColorAlerts.js"}} - -## Barrierefreiheit - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) - -When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads. - -Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text. - -Actions must have a tab index of 0 so that they can be reached by keyboard-only users. diff --git a/docs/src/pages/components/alert/alert-es.md b/docs/src/pages/components/alert/alert-es.md deleted file mode 100644 index 98c18f6669b22d..00000000000000 --- a/docs/src/pages/components/alert/alert-es.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: React Alert component -components: Alert, AlertTitle -githubLabel: 'component: Alert' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert' ---- - -# Alerta - -

Una Alerta (alert) muestra un mensaje corto e importante de una manera que atrae la atención del usuario sin interrumpir la tarea del usuario.

- -**Nota:** Este componente no está documentado en las [ pautas de Material Design](https://material.io/), pero Material-UI lo soporta. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Alertas simples - -La alerta ofrece cuatro niveles de severidad que distintivamente establecen un icono y un color. - -{{"demo": "pages/components/alert/BasicAlerts.js"}} - -## Descripción - -Puedes utilizar el componente `AlertTitle` para mostrar un título formateado encima del contenido. - -{{"demo": "pages/components/alert/DescriptionAlerts.js"}} - -## Acciones - -Una alerta puede tener una acción, como un botón para cerrar o deshacer. Es renderizado después del mensaje, al final de la alerta. - -Si se proporciona un callback `onClose` y no se establece una propiedad `action`, se muestra un icono de cierre. La propiedad `action` puede ser usada para proveer una acción alternativa, por ejemplo, usando un Button o un IconButton. - -{{"demo": "pages/components/alert/ActionAlerts.js"}} - -### Transición - -Puedes utilizar un [ componente de transition ](/components/transitions/) como `Collapse` para transicionar la apariencia de una alerta. - -{{"demo": "pages/components/alert/TransitionAlerts.js"}} - -## Iconos - -La propiedad `icon` te permite añadir un icono al inicio del componente alerta. Esto anulará el icono por defecto para la severidad especificada. - -Puedes cambiar el mapeo por defecto de severidad a ícono con la propiedad `iconMapping`. Esto puede ser definido globalmente usando [la personalización del tema](/customization/theme-components/#default-props). - -Al establecer la propiedad `icono` a falso, el icono se removerá completamente. - -{{"demo": "pages/components/alert/IconAlerts.js"}} - -## Variantes - -Dos variantes adicionales están disponibles – delineada y rellena: - -### Delineada - -{{"demo": "pages/components/alert/OutlinedAlerts.js"}} - -### Rellenada - -{{"demo": "pages/components/alert/FilledAlerts.js"}} - -## Mensaje emergente - -Puedes usar el Snackbar para [mostrar un mensaje emergente](/components/snackbars/#customized-snackbars) con la alerta. - -## Color - -La propiedad `color` anulará el color por defecto para la severidad especificada. - -{{"demo": "pages/components/alert/ColorAlerts.js"}} - -## Accesibilidad - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) - -Cuando el componente se muestra dinámicamente, el contenido es anunciado automáticamente por la mayoría de los lectores de pantalla. En este momento, los lectores de pantallas no informan a los usuarios de las alertas que están presentes cuando la página carga. - -El uso del color para agregar significado sólo proporciona una indicación visual, que no será transmitida a los usuarios de tecnologías de asistencia como lectores de pantalla. Asegurate que la información denotada por el color es u obvia por el contenido en sí mismo (por ejemplo, el texto visible), o es incluida a través de medios alternativos, tales como un texto oculto adicional. - -Las acciones deben tener un índice de pestañas de 0 para que puedan ser alcanzadas por usuarios con sólo teclado. diff --git a/docs/src/pages/components/alert/alert-fr.md b/docs/src/pages/components/alert/alert-fr.md deleted file mode 100644 index 1a493eba9a4af3..00000000000000 --- a/docs/src/pages/components/alert/alert-fr.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Composant React Alerte -components: Alert, AlertTitle -githubLabel: 'component: Alert' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert' ---- - -# Alert - -

Une alerte affiche un message court et important d'une manière qui attire l'attention de l'utilisateur sans interrompre sa tâche.

- -**Remarque :** Ce composant n'est pas documenté dans les [consignes de Material Design](https://material.io/), mais Material-UI le supporte. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Alertes simples - -L'alerte offre quatre niveaux de sévérité qui définissent une icône et une couleur distinctes. - -{{"demo": "pages/components/alert/BasicAlerts.js"}} - -## Description - -Vous pouvez utiliser le composant `AlertTitle` pour afficher un titre formaté au-dessus du contenu. - -{{"demo": "pages/components/alert/DescriptionAlerts.js"}} - -## Actions - -Une alerte peut avoir une action, comme un bouton de fermeture ou d'annulation. Il est affiché après le message, à la fin de l'alerte. - -Si une fonction de rappel `onClose` est fournie et qu'aucune propriété `action` n'est définie, une icône de fermeture s'affiche. La propriété `action` peut être utilisée pour fournir une action alternative, par exemple en utilisant un `Button` ou un `IconButton`. - -{{"demo": "pages/components/alert/ActionAlerts.js"}} - -### Transition - -Vous pouvez utiliser un [composant de transition](/components/transitions/) tel que `Collapse` pour faire la transition de l'apparence de l'alerte. - -{{"demo": "pages/components/alert/TransitionAlerts.js"}} - -## Icônes - -La propriété `icon` vous permet d'ajouter une icône au début du composant d'alerte. Cela remplacera l'icône par défaut pour la sévérité spécifiée. - -Vous pouvez changer la sévérité par défaut pour le mapping d'icône avec la propriété `iconMapping`. Cela peut être défini globalement en utilisant la [personnalisation du thème](/customization/theme-components/#default-props). - -Définir la propriété `icon` à `false` supprimera complètement l'icône. - -{{"demo": "pages/components/alert/IconAlerts.js"}} - -## Variants - -Deux variantes supplémentaires sont disponibles – `outlined` et `filled` : - -### Outlined - -{{"demo": "pages/components/alert/OutlinedAlerts.js"}} - -### Filled - -{{"demo": "pages/components/alert/FilledAlerts.js"}} - -## Toast - -Vous pouvez utiliser la `Snackbar` pour [afficher un toast](/components/snackbars/#customized-snackbars) avec l'alerte. - -## Couleur - -La propriété `color` remplacera la couleur par défaut pour la sévérité spécifiée. - -{{"demo": "pages/components/alert/ColorAlerts.js"}} - -## Accessibilité - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) - -Lorsque le composant est affiché dynamiquement, le contenu est automatiquement annoncé par la plupart des lecteurs d'écran. À l'heure actuelle, les lecteurs d'écran n'informent pas les utilisateurs des alertes présentes lors du chargement de la page. - -L'utilisation de la couleur pour ajouter de la signification ne fournit qu'une indication visuelle qui ne sera pas transmise aux utilisateurs de technologies d'assistance telles que les lecteurs d'écran. Assurez-vous que les informations indiquées par la couleur sont soit évidentes à partir du contenu lui-même (par exemple le texte visible), ou est inclus par d'autres moyens, tels que le texte caché supplémentaire. - -Les actions doivent avoir un index de tabulation de 0 pour être accessibles aux utilisateurs utilisant uniquement le clavier. diff --git a/docs/src/pages/components/alert/alert-ja.md b/docs/src/pages/components/alert/alert-ja.md deleted file mode 100644 index 5d3bb802572c97..00000000000000 --- a/docs/src/pages/components/alert/alert-ja.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: React アラート コンポーネント -components: Alert, AlertTitle -githubLabel: 'component: Alert' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert' ---- - -# アラート - -

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

- -**注意:** このコンポーネントは [マテリアルデザインのガイドライン](https://material.io/)に記載されていませんが、Material-UI ではサポートしています。 - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## 基本のアラートコンポーネント - -このアラートは、特徴的なアイコンと色を設定する4つの重要度レベルを提供します。 - -{{"demo": "pages/components/alert/BasicAlerts.js"}} - -## Description - -`アラートタイトル` コンポーネントを使用して、書式付きタイトルをコンテンツの上に表示することができます。 - -{{"demo": "pages/components/alert/DescriptionAlerts.js"}} - -## アクション - -アラートには、閉じるボタンや元に戻すボタンなどのアクションがあります。 これは、アラートの最後にメッセージの後にレンダリングされます。 これは、アラートの最後にメッセージの後にレンダリングされます。 - -`onClose` コールバックが指定されていて、 `アクション` プロパティが設定されていない場合は、閉じるアイコンが表示されます。 `アクション` プロパティは、ボタンや IconButtonなどの代替アクションを提供するために使用できます。 `アクション` プロパティは、ボタンや IconButtonなどの代替アクションを提供するために使用できます。 - -{{"demo": "pages/components/alert/ActionAlerts.js"}} - -### トランジション - -[Collapse](/components/transitions/) のような `トランジションコンポーネント` を使用して、アラートの外観を遷移することができます。 - -{{"demo": "pages/components/alert/TransitionAlerts.js"}} - -## Icons - -`アイコン` プロパティでは、アラートコンポーネントの先頭にアイコンを追加できます。 これは指定された重要度のデフォルトアイコンを上書きします。 これは指定された重要度のデフォルトアイコンを上書きします。 これは指定された重要度のデフォルトアイコンを上書きします。 これは指定された重要度のデフォルトアイコンを上書きします。 これは指定された重要度のデフォルトアイコンを上書きします。 - -`iconMapping` プロパティを使用して、デフォルトの重要度をアイコンマッピングに変更できます。 `iconMapping` プロパティを使用して、デフォルトの重要度をアイコンマッピングに変更できます。 [テーマカスタマイズ](/customization/globals/#default-props)を使用してグローバルに定義することができます。 `iconMapping` プロパティを使用して、デフォルトの重要度をアイコンマッピングに変更できます。 [テーマカスタマイズ](/customization/globals/#default-props)を使用してグローバルに定義することができます。 `iconMapping` プロパティを使用して、デフォルトの重要度をアイコンマッピングに変更できます。 [テーマカスタマイズ](/customization/globals/#default-props)を使用してグローバルに定義することができます。 [テーマをカスタマイズ](/customization/theme-components/#default-props)してグローバルに定義することができます。 - -icon プロパティ を `false` に設定すると、アイコンが全て削除されます。 - -{{"demo": "pages/components/alert/IconAlerts.js"}} - -## バリアント - -さらに2つのバリエーションがあります – アウトラインと塗りつぶし: - -### アウトライン (Outlined) - -{{"demo": "pages/components/alert/OutlinedAlerts.js"}} - -### 塗りつぶし - -{{"demo": "pages/components/alert/FilledAlerts.js"}} - -## トースト - -Snackbar を使ってアラートで [乾杯を表示](/components/snackbars/#customized-snackbars)できます。 - -## カラー - -`色` プロパティは、指定された重要度のデフォルトの色を上書きします。 - -{{"demo": "pages/components/alert/ColorAlerts.js"}} - -## アクセシビリティ - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) - -コンポーネントが動的に表示されると、ほとんどのスクリーンリーダーによってコンテンツが自動的に表示されます。 この時点で、スクリーンリーダーは、ページが読み込まれたときに存在するアラートをユーザーに知らせることはありません。 - -色を使って意味を加えることは視覚的な表示のみを提供し、スクリーンリーダーなどの支援技術の利用者には伝えられません。 色で示されている情報がコンテンツ自体から明らかになっていることを確認してください (例えば、目に見えるテキスト) または、隠されたテキストなどの代替手段によって含まれています。 - -アクションはキーボードのみのユーザーがアクセスできるように、タブインデックスが 0 である必要があります。 diff --git a/docs/src/pages/components/alert/alert-ru.md b/docs/src/pages/components/alert/alert-ru.md deleted file mode 100644 index 6e5843dd4a6173..00000000000000 --- a/docs/src/pages/components/alert/alert-ru.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Компонент React Alert -components: Alert, AlertTitle -githubLabel: 'component: Alert' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#alert' ---- - -# Alert - -

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

- -**Примечание:** Этот компонент не задокументирован в [руководствах Material Design](https://material.io/), но Material-UI поддерживает его. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Простые предупреждения - -Alert предлагает 4 уровня важности предупреждения с уникальными цветом и значком. - -{{"demo": "pages/components/alert/BasicAlerts.js"}} - -## Описание - -Вы можете использовать `AlertTitle`, чтобы отобразить отформатированный заголовок над содержимым. - -{{"demo": "pages/components/alert/DescriptionAlerts.js"}} - -## Действия - -Alert может иметь действие, например кнопку закрытия или отмены. Действие рендерится после сообщения, в конце Alert. - -If an `onClose` callback is provided and no `action` prop is set, a close icon is displayed. The `action` prop can be used to provide an alternative action, for example using a Button or IconButton. - -{{"demo": "pages/components/alert/ActionAlerts.js"}} - -### Transition - -You can use a [transition component](/components/transitions/) such as `Collapse` to transition the appearance of the alert. - -{{"demo": "pages/components/alert/TransitionAlerts.js"}} - -## Иконки - -The `icon` prop allows you to add an icon to the beginning of the alert component. This will override the default icon for the specified severity. - -You can change the default severity to icon mapping with the `iconMapping` prop. Это может быть определено глобально в [настройках темы](/customization/theme-components/#default-props). - -Присвоение свойству icon значения `false` полностью удалит иконку. - -{{"demo": "pages/components/alert/IconAlerts.js"}} - -## Variants - -Two additional variants are available – outlined, and filled: - -### Контурный стиль - -{{"demo": "pages/components/alert/OutlinedAlerts.js"}} - -### Заполненный стиль - -{{"demo": "pages/components/alert/FilledAlerts.js"}} - -## Toast - -You can use the Snackbar to [display a toast](/components/snackbars/#customized-snackbars) with the Alert. - -## Цвет - -The `color` prop will override the default color for the specified severity. - -{{"demo": "pages/components/alert/ColorAlerts.js"}} - -## Доступность - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#alert) - -When the component is dynamically displayed, the content is automatically announced by most screen readers. At this time, screen readers do not inform users of alerts that are present when the page loads. - -Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies such as screen readers. Ensure that information denoted by the color is either obvious from the content itself (for example the visible text), or is included through alternative means, such as additional hidden text. - -Actions must have a tab index of 0 so that they can be reached by keyboard-only users. diff --git a/docs/src/pages/components/app-bar/app-bar-de.md b/docs/src/pages/components/app-bar/app-bar-de.md deleted file mode 100644 index 802b54513cc97c..00000000000000 --- a/docs/src/pages/components/app-bar/app-bar-de.md +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: App Bar React-Komponente -components: AppBar, Toolbar, Menu -githubLabel: 'component: AppBar' -materialDesign: https://material.io/components/app-bars-top ---- - -# App Bar - -

In der App-Bar werden Informationen und Aktionen angezeigt, die sich auf den aktuellen Bildschirm beziehen.

- -Die [obere App-Bar](https://material.io/design/components/app-bars-top.html) liefert Inhalte und Aktionen auf dem aktuellen Bildschirm. It's used for branding, screen titles, navigation, and actions. - -It can transform into a contextual action bar or be used as a navbar. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Einfache App-Bar - -{{"demo": "pages/components/app-bar/ButtonAppBar.js", "bg": true}} - -## App-Bar mit einem Hauptsuchfeld - -Eine primäre Suchleiste. - -{{"demo": "pages/components/app-bar/PrimarySearchAppBar.js", "bg": true}} - -## App-Bar mit Menü - -{{"demo": "pages/components/app-bar/MenuAppBar.js", "bg": true}} - -## App-Bar mit Suchfeld - -Ein seitliches Suchfeld. - -{{"demo": "pages/components/app-bar/SearchAppBar.js", "bg": true}} - -## Kompakt (nur für Desktop) - -{{"demo": "pages/components/app-bar/DenseAppBar.js", "bg": true}} - -## Prominent - -A prominent app bar. - -{{"demo": "pages/components/app-bar/ProminentAppBar.js", "bg": true}} - -## Untere App-Bar - -{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} - -## Fixed placement - -When you render the app bar position fixed, the dimension of the element doesn't impact the rest of the page. This can cause some part of your content to be invisible, behind the app bar. Here are 3 possible solutions: - -1. You can use `position="sticky"` instead of fixed. ⚠️ sticky is not supported by IE11. -2. You can render a second `` component: - -```jsx -function App() { - return ( - - - {/* content */} - - - - ); -} -``` - -3. You can use `theme.mixins.toolbar` CSS: - -```jsx -const Offset = styled('div')(({ theme }) => theme.mixins.toolbar); - -function App() { - return ( - - - {/* content */} - - - - ); -} -``` - -## Scrollen - -Der Hook `useScrollTrigger()` kann verwendet werden, um auf Scrollen des Benutzers zu reagieren. - -### App-Bar verstecken - -The app bar hides on scroll down to leave more space for reading. - -{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} - -### App-Bar anheben - -The app bar elevates on scroll to communicate that the user is not at the top of the page. - -{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} - -### Zurück nach oben - -Beim Scrollen erscheint ein schwebender Button, um einfach wieder zum Seitenanfang zu gelangen. - -{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} - -### `useScrollTrigger([options]) => trigger` - -#### Parameter - -1. `options` (_object_ [optional]): - - - `options.disableHysteresis` (_bool_ [optional]): Defaults to `false`. Hysterese deaktivieren. Die Bildlaufrichtung wird beim Bestimmen des `trigger`-Werts ignoriert. - - `options.target` (*Node* [optional]): Standardwert `window`. - - `options.threshold` (*number* [optional]): Defaults to `100`. Change the `trigger` value when the vertical scroll strictly crosses this threshold (exclusive). - -#### Rückgabewerte - -`trigger`: Entspricht die Bildlaufposition den Kriterien? - -#### Beispiele - -```jsx -import useScrollTrigger from '@material-ui/core/useScrollTrigger'; - -function HideOnScroll(props) { - const trigger = useScrollTrigger(); - return ( - -
Hello
- - ); -} -``` - -## Enable Color on Dark - -Following the [Material Design guidelines](https://material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the AppBar in dark mode. You can override this behavior by setting the `enableColorOnDark` prop to `true`. - -```jsx -// Specific element via prop - - -// Affect all AppBars via theme - - - -``` diff --git a/docs/src/pages/components/app-bar/app-bar-es.md b/docs/src/pages/components/app-bar/app-bar-es.md deleted file mode 100644 index 8e7c29a43ab286..00000000000000 --- a/docs/src/pages/components/app-bar/app-bar-es.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: 'Componente React: App Bar' -components: AppBar, Toolbar, Menu -githubLabel: 'component: AppBar' -materialDesign: https://material.io/components/app-bars-top ---- - -# App Bar - -

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

- -La [top App Bar](https://material.io/design/components/app-bars-top.html) provee contenido y acciones relacionados a la pantalla actual. It's used for branding, screen titles, navigation, and actions. - -Se puede transformar en una barra de acción contextual o usarse como una barra de navegación. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## App Bar Simple - -{{"demo": "pages/components/app-bar/ButtonAppBar.js", "bg": true}} - -## App Bar con un campo de búsqueda principal - -Un campo de búsqueda principal. - -{{"demo": "pages/components/app-bar/PrimarySearchAppBar.js", "bg": true}} - -## App Bar con menú - -{{"demo": "pages/components/app-bar/MenuAppBar.js", "bg": true}} - -## App Bar con campo de búsqueda - -Un campo de búsqueda al costado. - -{{"demo": "pages/components/app-bar/SearchAppBar.js", "bg": true}} - -## Denso (sólo escritorio) - -{{"demo": "pages/components/app-bar/DenseAppBar.js", "bg": true}} - -## Prominente - -Un App Bar prominente. - -{{"demo": "pages/components/app-bar/ProminentAppBar.js", "bg": true}} - -## App bar en pie de página - -{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} - -## Posición Fija - -Cuando muestra la posición de la barra de App Bar fija, la dimensión de los elementos no tiene impacto sobre el resto de la página. Esto puede causar que alguna parte de su contenido no sea visible, detrás del App Bar. Aquí hay 3 posibles soluciones: - -1. Puedes usar `position = "sticky"` en lugar de fijo. ⚠️ sticky is not supported by IE11. -2. Puedes renderizar un segundo componente ``: - -```jsx -function App() { - return ( - - - {/* content */} - - - - ); -} -``` - -3. Puede usar `theme.mixins.toolbar` CSS: - -```jsx -const useStyles = makeStyles(theme => ({ - offset: theme.mixins.toolbar, -})) - -function App() { - const classes = useStyles(); - return ( - - - {/* contenido */} - -
- - ) -}; -``` - -## Desplazamiento - -Puede usar el `useScrollTrigger ()` para responder a las acciones de desplazamiento del usuario. - -### Ocultar App bar - -La barra de aplicaciones se oculta al desplazarse hacia abajo para dejar más espacio para leer. - -{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} - -### Elevar App Bar - -La barra de la aplicación se eleva al desplazarse para comunicar que el usuario no está en la parte superior de la página. - -{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} - -### Ir arriba - -Aparece un botón de acción flotante al desplazarse para que sea fácil volver a la parte superior de la página. - -{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} - -### `useScrollTrigger([options]) => trigger` - -#### Argumentos - -1. `options` (*Object* [optional]): - - - `options.disableHysteresis` (*Boolean* [optional]): Default `false`. Desactiva la histéresis. Ignora la dirección de desplazamiento cuando determina el valor del `trigger`. - - `options.target` (*Node* [optional]): Default `window`. - - `options.threshold` (*Number* [optional]): Default `100`. Cambia el valor de `trigger` cuando el desplazamiento vertical cruza estrictamente este umbral (exclusivo). - -#### Regresa - -`trigger`: ¿La posición de desplazamiento coincide con los criterios? - -#### Ejemplos - -```jsx -import useScrollTrigger from '@material-ui/core/useScrollTrigger'; - -function HideOnScroll(props) { - const trigger = useScrollTrigger(); - return ( - -
Hola
- - ); -} -``` - -## Enable Color on Dark - -Following the [Material Design guidelines](https://material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the AppBar in dark mode. You can override this behavior by setting the `enableColorOnDark` prop to `true`. - -```jsx -// Specific element via prop - - -// Affect all AppBars via theme - - - -``` diff --git a/docs/src/pages/components/app-bar/app-bar-fr.md b/docs/src/pages/components/app-bar/app-bar-fr.md deleted file mode 100644 index efce76d1f6de91..00000000000000 --- a/docs/src/pages/components/app-bar/app-bar-fr.md +++ /dev/null @@ -1,165 +0,0 @@ ---- -title: Composant React de barre d'application -components: AppBar, Toolbar, Menu -githubLabel: 'component: AppBar' -materialDesign: https://material.io/components/app-bars-top ---- - -# App Bar (Barre d'application) - -

La barre d'application affiche des informations et des actions relatives à l'écran actuel.

- -[La barre d'application](https://material.io/design/components/app-bars-top.html) de la page fournit le contenu et les actions liés à l'écran actuel. Elle est utilisée pour le marquage, les titres d'écran, la navigation et les actions. - -Il peut être utilisé en tant que barre d'action contextuel ou en tant que barre de navigation. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Barre d'application simple - -{{"demo": "pages/components/app-bar/ButtonAppBar.js", "bg": true}} - -## Barre d'application avec champ de recherche principal - -Une barre de recherche principale. - -{{"demo": "pages/components/app-bar/PrimarySearchAppBar.js", "bg": true}} - -## Barre d'application avec menu - -{{"demo": "pages/components/app-bar/MenuAppBar.js", "bg": true}} - -## Barre d'application avec champ de recherche - -Une barre de recherche latérale. - -{{"demo": "pages/components/app-bar/SearchAppBar.js", "bg": true}} - -## Dense (bureau uniquement) - -{{"demo": "pages/components/app-bar/DenseAppBar.js", "bg": true}} - -## Barre plus importante - -Barre d'application étendu. - -{{"demo": "pages/components/app-bar/ProminentAppBar.js", "bg": true}} - -## Barre inférieure - -{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} - -## Emplacement fixe - -Quand vous rendez la barre d'application en position fixe, les dimensions de l'élément n'impact pas le reste de page. Cela peut rendre certaine partie de votre contenu invisible, caché derrière la barre d'application. Voici 3 solutions possible: - -1. Vous pouvez utiliser `position="sticky"` au lieu de `position="fixed"`. ⚠️ sticky n'est pas supporté par IE11. -2. Vous pouvez rendre un deuxième composant `` : - -```jsx -function App() { - return ( - - - {/* content */} - - - - ); -} -``` - -3. Vous pouvez utiliser `theme.mixins.toolbar` CSS: - -```jsx -const useStyles = makeStyles(theme => ({ - offset: theme.mixins.toolbar, -})) - -function App() { - const classes = useStyles(); - return ( - - - {/* content */} - -
- - ) -}; -``` - -## Défilement - -Vous pouvez utiliser le `useScrollTrigger()` hook pour répondre au défilement déclencher par l'utilisateur. - -### Barre d'application masquable - -La barre d'application est caché lorsque l'utilisateur défile vers le bas de page lui conférant plus d'espace de lecture. - -{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} - -### Barre d'application élevable - -La barre d'application s'élève lorsque l'utilisateur fait défiler la page pour lui indiquer qu'il n'est plus au début de la page. - -{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} - -### Retour au sommet - -Au défilement un bouton d'action flottant apparaît pour faciliter le retour au sommet de la page. - -{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} - -### `useScrollTrigger([options]) => trigger` - -#### Paramètres - -1. `options` (*Object* [optional]): - - - `options.disableHysteresis` (*Boolean* [optional]): Valeur par défaut `false`. Désactive l'hystérésis. Ignore le sens de défilement lors de la détermination de la valeur `trigger`. - - `options.target` (_Nœud_ [optionnel]) : Valeur par défaut `window`. - - `options.threshold` (*Nombre* [optional]): Valeur par défaut `100`. Modifier la valeur de `déclenchement` quand lorsque le défilement vertical dépasse strictement ce seuil (exclusif). - -#### Valeur de retour - -`trigger`: Est-ce que la position de défilement respecte les critères ? - -#### Exemples - -```jsx -import useScrollTrigger from '@material-ui/core/useScrollTrigger'; - -function HideOnScroll(props) { - const trigger = useScrollTrigger(); - return ( - -
Hello
- - ); -} -``` - -## Enable Color on Dark - -Following the [Material Design guidelines](https://material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the AppBar in dark mode. You can override this behavior by setting the `enableColorOnDark` prop to `true`. - -```jsx -// Specific element via prop - - -// Affect all AppBars via theme - - - -``` diff --git a/docs/src/pages/components/app-bar/app-bar-ja.md b/docs/src/pages/components/app-bar/app-bar-ja.md deleted file mode 100644 index 01b7150ae882e3..00000000000000 --- a/docs/src/pages/components/app-bar/app-bar-ja.md +++ /dev/null @@ -1,162 +0,0 @@ ---- -title: App Bar コンポーネント -components: AppBar, Toolbar, Menu -githubLabel: 'component: AppBar' -materialDesign: https://material.io/components/app-bars-top ---- - -# App Bar - -

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

- -トップにあるApp Barは、現在の画面に関連するコンテンツとアクションを提供します。 それらはブランディング、画面タイトル、ナビゲーション、およびアクションに使用されます。 - -アクションバーに変換したり、ナビゲーションバーとして使うことができます。 - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## 基本的なApp Bar - -{{"demo": "pages/components/app-bar/ButtonAppBar.js", "bg": true}} - -## 基本的な検索フィールド付きApp Bar - -基本的な検索バー - -{{"demo": "pages/components/app-bar/PrimarySearchAppBar.js", "bg": true}} - -## メニュー付き App Bar - -{{"demo": "pages/components/app-bar/MenuAppBar.js", "bg": true}} - -## 検索フィールド付きApp Bar - -サイド検索バー - -{{"demo": "pages/components/app-bar/SearchAppBar.js", "bg": true}} - -## Dense App Bar (デスクトップのみ) - -{{"demo": "pages/components/app-bar/DenseAppBar.js", "bg": true}} - -## Prominent - -目立つアプリバー - -{{"demo": "pages/components/app-bar/ProminentAppBar.js", "bg": true}} - -## 下部アプリバー - -{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} - -## ラベルの配置 - -アプリバーの位置を固定してレンダリングすると、要素の寸法はページの残りの部分に影響しません。 これにより、コンテンツの一部がアプリバーの背後で見えなくなる可能性があります。 以下に3つの解決策を示します。 これにより、コンテンツの一部がアプリバーの背後で見えなくなる可能性があります。 以下に3つの解決策を示します。 これにより、コンテンツの一部がアプリバーの背後で見えなくなる可能性があります。 以下に3つの解決策を示します。 これにより、コンテンツの一部がアプリバーの背後で見えなくなる可能性があります。 以下に3つの解決策を示します。 これにより、コンテンツの一部がアプリバーの背後で見えなくなる可能性があります。 以下に3つの解決策を示します。 - -1. fixed の代わりに `position="sticky"` を使用できます。 ⚠️ stickyはIE11ではサポートされていません。 -2. 2番目の `` コンポーネントをレンダリングできます: - -```jsx -function App() { - return ( - - - {/* content */} - - - - ); -} -``` - -3. `theme.mixins.toolbar` CSSを使えます。: - -```jsx -const Offset = styled('div')(({ theme }) => theme.mixins.toolbar); - -function App() { - return ( - - - {/* content */} - - - - ); -} -``` - -## スクロール - -`useScrollTrigger()` hookを使用して、ユーザーのスクロールアクションに 対応できます。 - -### App Barを隠す - -アプリバーは下にスクロールすると非表示になり、読み込めるスペースが増えます。 - -{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} - -### App Barを固定する - -アプリバーはスクロール時に上昇し、ユーザーがページの上部にいないことを伝えます。 - -{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} - -### トップへ戻る - -スクロール時にフローティングアクションボタンが表示され、ページの上部に簡単に戻ることができます。 - -{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} - -### `useScrollTrigger([options]) => trigger` - -#### 引数 - -1. `options` (_object_ [optional]): - - - `options.disableHysteresis` (_bool_ [optional]): Defaults to `false`. ヒステリシスを無効にします。 ` trigger ` 値を決定するときにスクロール方向を無視します。 - - `options.target` (*Node* [optional]): デフォルト値: `window`. - - `options.threshold` (*number* [optional]): デフォルト値:`100`. 垂直スクロールがこのしきい値(排他的) を厳密に超えたときに`trigger` 値を変更します。 - -#### 戻り値 - -`trigger`：スクロール位置が基準に合っていますか？ - -#### 例 - -```jsx -import useScrollTrigger from '@material-ui/core/useScrollTrigger'; - -function HideOnScroll(props) { - const trigger = useScrollTrigger(); - return ( - -
Hello
- - ); -} -``` - -## Enable Color on Dark - -Following the [Material Design guidelines](https://material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the AppBar in dark mode. You can override this behavior by setting the `enableColorOnDark` prop to `true`. - -```jsx -// Specific element via prop - - -// Affect all AppBars via theme - - - -``` diff --git a/docs/src/pages/components/app-bar/app-bar-ru.md b/docs/src/pages/components/app-bar/app-bar-ru.md deleted file mode 100644 index b604c5323b169d..00000000000000 --- a/docs/src/pages/components/app-bar/app-bar-ru.md +++ /dev/null @@ -1,153 +0,0 @@ ---- -title: React-компонент Панель навигации -components: AppBar, Toolbar, Menu -githubLabel: 'component: AppBar' -materialDesign: https://material.io/components/app-bars-top ---- - -# Панель навигации - -

Панель навигации отображает информацию и действия, относящиеся к текущему экрану.

- -В [](https://material.io/design/components/app-bars-top.html)верхней панели приложений отображается содержимое и действия, связанные с текущим экраном. Она используется для брендинга, заголовков экрана, навигации и действий. - -Она может использоваться как контекстное меню или как навигационная панель. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Простая панель навигации - -{{"demo": "pages/components/app-bar/ButtonAppBar.js", "bg": true}} - -## Панель навигации с основным полем поиска - -Основная панель поиска. - -{{"demo": "pages/components/app-bar/PrimarySearchAppBar.js", "bg": true}} - -## Панель навигации с меню - -{{"demo": "pages/components/app-bar/MenuAppBar.js", "bg": true}} - -## Панель навигации с полем для поиска - -Боковая панель поиска. - -{{"demo": "pages/components/app-bar/SearchAppBar.js", "bg": true}} - -## Dense (Только для компьютеров) - -{{"demo": "pages/components/app-bar/DenseAppBar.js", "bg": true}} - -## Выступающая - -Выступающая панель навигации. - -{{"demo": "pages/components/app-bar/ProminentAppBar.js", "bg": true}} - -## Нижняя панели навигации - -{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}} - -## Фиксированное положение - -Когда вы рендерите навигационную панель с фиксированным положением, размер элемента не влияет на остальную часть страницы. Это может быть причиной того, что часть вашего содержимого может стать невидимой, скрываясь за навигационной панелью. Есть 3 варианта решения: - -1. Вы можете использовать `position="sticky"` вместо `"fixed"`. ⚠️ sticky не поддерживается в IE11. -2. Вы можете отрендерить второй `` компонент: - -```jsx -function App() { - return ( - - - {/* содержимое */} - - - - ); -} -``` - -3. Вы можете использовать `theme.mixins.toolbar` в CSS: - -```jsx -const Offset = styled('div')(({ theme }) => theme.mixins.toolbar); - -function App() { - return ( - - - {/* content */} - - - - ); -} -``` - -## Прокрутка - -Вы можете использовать `useScrollTrigger()` хук, отвечающий за механизм прокрутки. - -### Скрыть панель навигации - -Панель навигации прячется при прокрутке вниз, освобождая место для чтения. - -{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}} - -### Надвинуть панель навигации - -Панель навигации наползает на содержимое при прокрутке, сообщая пользователю, что он находится не в начале страницы. - -{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}} - -### Вернуться в начало страницы - -Плавающая кнопка появляется при прокрутке, позволяя легко вернуться в начало страницы. - -{{"demo": "pages/components/app-bar/BackToTop.js", "iframe": true}} - -### `useScrollTrigger ([options]) => триггер` - -#### Аргументы - -1. `options` (_object_ [optional]): - - - `options.disableHysteresis` (_bool_ [optional]): Defaults to `false`. Отключение запаздывания. Игнорирование направления прокрутки когда определено `trigger` значение. - - `options.target` (*Node* [optional]): По умолчанию `window`. - - `options.threshold` (*number* [optional]): По умолчанию `100`. Измените значение `trigger` когда вертикальная прокрутка строго первышает этот порог (исключительно). - -#### Возвращает - -`trigger`: Соответствует ли положение прокрутки критерию? - -#### Примеры - -```jsx -
-``` - -## Enable Color on Dark - -Following the [Material Design guidelines](https://material.io/design/color/dark-theme.html), the `color` prop has no effect on the appearance of the AppBar in dark mode. You can override this behavior by setting the `enableColorOnDark` prop to `true`. - -```jsx -// Specific element via prop - - -// Affect all AppBars via theme - - - -``` diff --git a/docs/src/pages/components/autocomplete/autocomplete-de.md b/docs/src/pages/components/autocomplete/autocomplete-de.md deleted file mode 100644 index aa56352c964690..00000000000000 --- a/docs/src/pages/components/autocomplete/autocomplete-de.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: React Autocomplete component -components: TextField, Popper, Autocomplete -githubLabel: 'component: Autocomplete' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#combobox' ---- - -# Autovervollständigung (Autocomplete) - -

Die Autovervollständigung ist eine normale Texteingabe, die durch ein Panel mit vorgeschlagenen Optionen ergänzt wird.

- -Das Widget ist nützlich, um den Wert eines einzeiligen Textfeldes in einem von zwei Arten von Szenarien zu setzen: - -1. Der Wert für das Textfeld muss aus einer vordefinierten Menge zulässiger Werte ausgewählt werden, z. B. ein Standortfeld, welches einen gültigen Standortnamen enthalten muss: [Combo Box](#combo-box). -2. Das Textfeld kann beliebige Werte enthalten, aber es ist vorteilhaft, dem Benutzer mögliche Werte vorzuschlagen, z. B ein Suchfeld, welches ähnliche oder frühere Suchen vorschlägt, um den Suchvorgang für den Benutzer zu beschleunigen: [free solo](#free-solo). - -It's meant to be an improved version of the "react-select" and "downshift" packages. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Combo box - -Der Wert muss aus einer vordefinierten Menge zulässiger Werte ausgewählt werden. - -{{"demo": "pages/components/autocomplete/ComboBox.js"}} - -### Spielwiese - -By default, the component accepts the following options structures: - -```ts -const filterOptions = createFilterOptions({ - matchFrom: 'start', - stringify: option => option.title, -}); - - -``` - -Wählen Sie eines der 248 Länder. - -```js -const options = [ - { label: 'The Godfather', id: 1 }, - { label: 'Pulp Fiction', id: 2 }, -]; -// or -const options = ['The Godfather', 'Pulp Fiction']; -``` - -However, you can use different structures by providing a `getOptionLabel` prop. - -### Spielwiese - -Each of the following examples demonstrates one feature of the Autocomplete component. - -{{"demo": "pages/components/autocomplete/Playground.js"}} - -### Länderauswahl - -Wählen Sie eines der 248 Länder. - -{{"demo": "pages/components/autocomplete/CountrySelect.js"}} - -### Controlled states - -The component has two states that can be controlled: - -1. the "value" state with the `value`/`onChange` props combination. This state represents the value selected by the user, for instance when pressing Enter. -2. the "input value" state with the `inputValue`/`onInputChange` props combination. This state represents the value displayed in the textbox. - -> ⚠️ These two states are isolated, they should be controlled independently. - -{{"demo": "pages/components/autocomplete/ControllableStates.js"}} - -## Free solo - -Set `freeSolo` to true so the textbox can contain any arbitrary value. - -### Search input - -The prop is designed to cover the primary use case of a **search input** with suggestions, e.g. Google search or react-autowhatever. - -{{"demo": "pages/components/autocomplete/FreeSolo.js"}} - -### Creatable - -If you intend to use this mode for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting: - -- `selectOnFocus` to helps the user clear the selected value. -- `clearOnBlur` to helps the user to enter a new value. -- `handleHomeEndKeys` to move focus inside the popup with the Home and End keys. -- A last option, for instance `Add "YOUR SEARCH"`. - -{{"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"}} - -## Grouped - -You can group the options with the `groupBy` prop. If you do so, make sure that the options are also sorted with the same dimension that they are grouped by, otherwise you will notice duplicate headers. - -{{"demo": "pages/components/autocomplete/Grouped.js"}} - -## Disabled options - -{{"demo": "pages/components/autocomplete/DisabledOptions.js"}} - -## `useAutocomplete` - -For advanced customization use cases, a headless `useAutocomplete()` hook is exposed. It accepts almost the same options as the Autocomplete component minus all the props related to the rendering of JSX. The Autocomplete component is built on this hook. - -```jsx -import useAutocomplete from '@material-ui/core/useAutocomplete'; -``` - -- 📦 [4.5 kB gzipped](/size-snapshot). - -{{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} - -### Customized hook - -{{"demo": "pages/components/autocomplete/CustomizedHook.js"}} - -Auch als Tags bekannt, darf der Benutzer mehr als einen Wert eingeben. - -## Asynchrone Anfragen - -The component supports two different asynchronous use-cases: - -- [Load on open](#load-on-open): it waits for the component to be interacted with to load the options. -- [Search as you type](#search-as-you-type): a new request is made for each keystroke. - -### Load on open - -It displays a progress state as long as the network request is pending. - -{{"demo": "pages/components/autocomplete/Asynchronous.js"}} - -### Search as you type - -If your logic is fetching new options on each keystroke and using the current value of the textbox to filter on the server, you may want to consider throttling requests. - -Additionally, you will need to disable the built-in filtering of the `Autocomplete` component by overriding the `filterOptions` prop: - -```jsx -import matchSorter from 'match-sorter'; - -const filterOptions = (options, { inputValue }) => - matchSorter(options, inputValue); - - -``` - -### Google Maps Ort - -Eine angepasste Oberfläche für Google Maps Places Autovervollständigung. - -{{"demo": "pages/components/autocomplete/GoogleMaps.js"}} - -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 - -Auch als Tags bekannt, darf der Benutzer mehr als einen Wert eingeben. - -{{"demo": "pages/components/autocomplete/Tags.js"}} - -### Feste Optionen - -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"}} - -### Kontrollkästchen - -{{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} - -### Limit tags - -You can use the `limitTags` prop to limit the number of displayed options when not focused. - -{{"demo": "pages/components/autocomplete/LimitTags.js"}} - -## Größen - -Fancy smaller inputs? Verwenden Sie die `size` Prop. - -{{"demo": "pages/components/autocomplete/Sizes.js"}} - -## Individuelle Anpassung - -### Custom input - -The `renderInput` prop allows you to customize the rendered input. The first argument of this render prop contains props that you need to forward. Pay specific attention to the `ref` and `inputProps` keys. - -{{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} - -### GitHub's picker - -Diese Demo reproduziert die Label-Auswahl von GitHub: - -{{"demo": "pages/components/autocomplete/GitHubLabel.js"}} - -Head to the [Customized hook](#customized-hook) section for a customization example with the `useAutocomplete` hook instead of the component. - -## Highlights - -The following demo relies on [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), a small (1 kB) utility for highlighting text in autosuggest and autocomplete components. - -{{"demo": "pages/components/autocomplete/Highlights.js"}} - -## Benutzerderfinierter Filter - -The component exposes a factory to create a filter method that can provided to the `filterOptions` prop. Sie können es verwenden, um das Standard-Filterverhalten der Option zu ändern. - -```js -import { createFilterOptions } from '@material-ui/core/Autocomplete'; -``` - -### `createFilterOptions(config) => filterOptions` - -#### Parameter - -1. `config` (_object_ [optional]): - -- `config.ignoreAccents` (_bool_ [optional]): Defaults to `true`. Remove diacritics. -- `config.ignoreCase` (_bool_ [optional]): Defaults to `true`. Alles in Kleinbuchstaben. -- `config.limit` (*number* [optional]): Default to null. Limit the number of suggested options to be shown. For example, if `config.limit` is `100`, only the first `100` matching options are shown. It can be useful if a lot of options match and virtualization wasn't set up. -- `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. -- `config.stringify` (*func* [optional]): Controls how an option is converted into a string so that it can be matched against the input text fragment. -- `config.trim` (_bool_ [optional]): Defaults to `false`. Abschließende Leerzeichen entfernen. - -#### 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: - -```jsx -const filterOptions = createFilterOptions({ - matchFrom: 'start', - stringify: (option) => option.title, -}); - -; -``` - -{{"demo": "pages/components/autocomplete/Filter.js", "defaultCodeOpen": false}} - -### Erweitert - -For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). Zum Beispiel: - -```jsx -import matchSorter from 'match-sorter'; - -const filterOptions = (options, { inputValue }) => matchSorter(options, inputValue); - -; -``` - -## Virtualisierung - -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"}} - -## Events - -If you would like to prevent the default key handler behavior, you can set the event's `defaultMuiPrevented` property to `true`: - -```jsx - { - if (event.key === 'Enter') { - // Prevent's default 'Enter' behavior. - event.defaultMuiPrevented = true; - // your handler code - } - }} -/> -``` - -## Einschränkungen - -### autocomplete/autofill - -Browsers have heuristics to help the user fill in form inputs. However, this can harm the UX of the component. - -By default, the component disables the input **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute. Google Chrome does not currently support this attribute setting ([Issue 587466](https://bugs.chromium.org/p/chromium/issues/detail?id=587466)). A possible workaround is to remove the `id` to have the component generate a random one. - -In addition to remembering past entered values, the browser might also propose **autofill** suggestions (saved login, address, or payment details). 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. -- Set `autoComplete="new-password"` (some browsers will suggest a strong password for inputs with this attribute setting): - - ```jsx - - ``` - -Read [the guide on MDN](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion) for more details. - -### iOS VoiceOver - -VoiceOver auf iOS Safari unterstützt das `aria-owns` Attribut nicht sehr gut. You can work around the issue with the `disablePortal` prop. - -### ListboxComponent - -If you provide a custom `ListboxComponent` prop, you need to make sure that the intended scroll container has the `role` attribute set to `listbox`. This ensures the correct behavior of the scroll, for example when using the keyboard to navigate. - -## Barrierefreiheit - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) - -Wir empfehlen die Verwendung eines Labels für die Textbox. Die Komponente implementiert die WAI-ARIA Autorenpraktiken. diff --git a/docs/src/pages/components/autocomplete/autocomplete-es.md b/docs/src/pages/components/autocomplete/autocomplete-es.md deleted file mode 100644 index bd7b530fafda1f..00000000000000 --- a/docs/src/pages/components/autocomplete/autocomplete-es.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: React Autocomplete component -components: TextField, Popper, Autocomplete -githubLabel: 'component: Autocomplete' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#combobox' ---- - -# Autocompletado - -

El autocompletado es una caja de texto normal mejorada por un panel de opciones sugeridas.

- -El widget es útil para establecer el valor de un cuadro de texto de una sola línea en uno de los dos tipos de escenarios: - -1. El valor para el cuadro de texto debe elegirse de un conjunto predefinido de valores permitidos, por ejemplo, un campo de ubicación debe contener un nombre de ubicación válido: [cuadro combinado](#combo-box). -2. El cuadro de texto puede contener cualquier valor arbitrario, pero es de gran ventaja sugerir posibles valores al usuario, por ejemplo, un campo de búsqueda puede sugerir búsquedas similares o anteriores para ahorrarle tiempo al usuario: [solo libre](#free-solo). - -Esto pretende ser una versión mejorada de los paquetes "react-select" y "downshift". - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Combo box - -El valor debe elegirse de un conjunto predefinido de valores permitidos. - -{{"demo": "pages/components/autocomplete/ComboBox.js"}} - -### Campo de pruebas - -Por defecto, el componente acepta la siguiente estructura de opciones: - -```ts -const filterOptions = createFilterOptions({ - matchFrom: 'start', - stringify: option => option.title, -}); - - -``` - -por ejemplo: - -```js -const options = [ - { label: 'The Godfather', id: 1 }, - { label: 'Pulp Fiction', id: 2 }, -]; -// or -const options = ['The Godfather', 'Pulp Fiction']; -``` - -However, you can use different structures by providing a `getOptionLabel` prop. - -### Campo de pruebas - -Cada uno de los siguientes ejemplos demuestran una característica del componente Autocompletado. - -{{"demo": "pages/components/autocomplete/Playground.js"}} - -### Selección de País - -Selecciona uno de los 248 países. - -{{"demo": "pages/components/autocomplete/CountrySelect.js"}} - -### Estados controlables - -El componente tiene dos estados que pueden ser controlados: - -1. el "valor" del estado con la combinación de props `value`/`onChange`. Este estado representa el valor seleccionado por el usuario, por ejemplo al pulsar Enter. -2. el estado "valor de entrada" con la combinación de props `inputValue`/`onInputChange`. Este estado representa el valor mostrado en el campo de texto. - -> ⚠️ Estos dos estados son aislados, deben ser controlados de forma independiente. - -{{"demo": "pages/components/autocomplete/ControllableStates.js"}} - -## Free solo - -Setear `freeSolo` a true, para que el cuadro de texto pueda contener cualquier valor arbitrario. - -### Campo de búsqueda - -También puedes mostrar un diálogo cuando el usuario quiere añadir un nuevo valor. - -{{"demo": "pages/components/autocomplete/FreeSolo.js"}} - -### Creable - -Si pretendes usar este modo para una experiencia similar a un [combo box](#combo-box) (una versión mejora de un selector de elementos) te recomendamos configurar: - -- `selectOnFocus` que ayuda al usuario a borrar el valor seleccionado. -- `clearOnBlur` que ayuda a que el usuario introduzca un nuevo valor. -- `handleHomeEndKeys` para mover el foco dentro de la ventana emergente con las claves Home y End. -- Una última opción, por ejemplo `Agregar "SU BÚSQUEDA"`. - -{{"demo": "pages/components/autocomplete/FreeSoloCreateOption.js"}} - -También puedes mostrar un diálogo cuando el usuario quiere añadir un nuevo valor. - -{{"demo": "pages/components/autocomplete/FreeSoloCreateOptionDialog.js"}} - -## Agrupado - -Puedes agrupar las opciones con el accesorio `groupBy`. Si lo haces, asegúrate de que las opciones también están ordenadas con la misma dimensión con la que están agrupadas, de lo contrario se crearan cabeceras duplicadas. - -{{"demo": "pages/components/autocomplete/Grouped.js"}} - -## Deshabilitar opciones - -{{"demo": "pages/components/autocomplete/DisabledOptions.js"}} - -## `useAutocomplete` - -For advanced customization use cases, we expose a headless `useAutocomplete()` hook. Acepta casi las mismas opciones que el componente Autocompletar menus las propiedades relacionadas al renderizado de JSX. El componente Autocompletar usa este hook internamente. - -```jsx -importar useAutocomplete de '@material-ui/core/useAutocomplete'; -``` - -- 📦 [4.5 kB comprimido](/size-snapshot). - -{{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} - -### Hook personalizado - -{{"demo": "pages/components/autocomplete/CustomizedHook.js"}} - -También conocidos como etiquetas, el usuario puede introducir más de un valor. - -## Peticiones asíncronas - -The component supports two different asynchronous use-cases: - -- [Load on open](#load-on-open): it waits for the component to be interacted with to load the options. -- [Search as you type](#search-as-you-type): a new request is made for each keystroke. - -### Load on open - -It displays a progress state as long as the network request is pending. - -{{"demo": "pages/components/autocomplete/Asynchronous.js"}} - -### Search as you type - -If your logic is fetching new options on each keystroke and using the current value of the textbox to filter on the server, you may want to consider throttling requests. - -Additionally, you will need to disable the built-in filtering of the `Autocomplete` component by overriding the `filterOptions` prop: - -```jsx -import matchSorter from 'match-sorter'; - -const filterOptions = (options, { inputValue }) => - matchSorter(options, inputValue); - - -``` - -### Lugar de Google Maps - -Una interfaz de usuario personalizado para el autocompletar de Google Maps Places. - -{{"demo": "pages/components/autocomplete/GoogleMaps.js"}} - -Para esta demostración, tenemos que cargar la API de [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial). - -> ⚠️ Antes de empezar a usar la API de Google Maps JavaScript, debes registrarte y crear una cuenta de facturación. - -## Valores múltiples - -También conocidos como etiquetas, el usuario puede introducir más de un valor. - -{{"demo": "pages/components/autocomplete/Tags.js"}} - -### Opciones fijas - -En caso de que necesites bloquear ciertas etiquetas de modo que no puedan ser removidas en la interfaz, se puede deshabilitar los chips. - -{{"demo": "pages/components/autocomplete/FixedTags.js"}} - -### Casillas de Verificación - -{{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} - -### Limitar las etiquetas - -Puedes utilizar la propiedad `limitTags` para limitar el número de opciones que aparecen cuando no se selecciona. - -{{"demo": "pages/components/autocomplete/LimitTags.js"}} - -## Tamaños - -Fancy smaller inputs? Use the `size` prop. - -{{"demo": "pages/components/autocomplete/Sizes.js"}} - -## Personalización - -### Input personalizado - -El apoyo `renderInput` te permite personalizar la entrada renderizada. El primer argumento de este apoyo renderizado contiene apoyos que necesitas para avanzar. Ponga atención específica a las claves `red` y `inputProps`. - -{{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} - -### Selector de GitHub - -Esta demo reproduce el selector de etiquetas de GitHub: - -{{"demo": "pages/components/autocomplete/GitHubLabel.js"}} - -Dirígete a la sección de [Hook personalizado](#customized-hook) para un ejemplo de personalización con el hook `useAutocomplete` en lugar del componente. - -## Destacados - -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"}} - -## Filtro personalizado - -El componente expone una factoría para crear un método de filtrado para proveer a la propiedad `filterOptions`. Puede usarse para cambiar el comportamiento de filtrado por defecto. - -```js -import { createFilterOptions } from '@material-ui/core/Autocomplete'; -``` - -### `createFilterOptions(config) => filterOptions` - -#### Argumentos - -1. `config` (*Object* [optional]): - -- `config.ignoreAccents` (*Boolean* [optional]): Por defecto a `true`. Elimina los acentos. -- `config.ignoreCase` (*Boolean* [optional]): Por defecto a `true`. En minúsculas todo. -- `config.limit` (*Number* [optional]): Por defecto a null. Limita el número de opciones sugeridas para ser mostrado. Por ejemplo, si `config.limit` es `100`, sólo las primeras `100` coincidencias se muestran. Esto puede ser útil si existe muchas coincidencias y la virtualización no estaba establecida. -- `config.matchFrom` (*'any' | 'start'* [optional]): Por defecto a `'any'`. -- `config.stringify` (*Func* [optional]): Controla cómo una opción se convierte en una cadena, de manera que se pueden combinar en contra de la entrada de texto del fragmento. -- `config.trim` (*Boolean* [optional]): Por defecto a `false`. Eliminar espacios en blanco. - -#### Regresa - -`filterOptions`: método de filtro devuelto puede ser provisto directamente a la propiedad `filterOptions` del componente `Autocompletar`, o el parámetro del mismo nombre para el hook. - -En la siguiente demostración, las opciones que se necesitan para iniciar con la consulta prefijo: - -```jsx -const filterOptions = createFilterOptions({ - matchFrom: 'start', - stringify: (option) => option.title, -}); - -; -``` - -{{"demo": "pages/components/autocomplete/Filter.js", "defaultCodeOpen": false}} - -### Avanzado - -Para mecanismos de filtrado más completos, como la coincidencia aproximada, se recomienda buscar en [match-sorter de](https://github.com/kentcdodds/match-sorter). Por ejemplo: - -```jsx -import matchSorter from 'match-sorter'; - -const filterOptions = (options, { inputValue }) => matchSorter(options, inputValue); - -; -``` - -## Virtualización - -Buscar entre 10.000 opciones generadas al azar. La lista está virtualizada gracias a [react-window](https://github.com/bvaughn/react-window). - -{{"demo": "pages/components/autocomplete/Virtualize.js"}} - -## Events - -If you would like to prevent the default key handler behavior, you can set the event's `defaultMuiPrevented` property to `true`: - -```jsx - { - if (event.key === 'Enter') { - // Prevent's default 'Enter' behavior. - event.defaultMuiPrevented = false; - // your handler code - } - }} -/> -``` - -## Limitaciones - -### autocompletar/autorellenar - -Browsers have heuristics to help the user fill in form inputs. However, this can harm the UX of the component. - -By default, the component disables the input **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute. Google Chrome does not currently support this attribute setting ([Issue 587466](https://bugs.chromium.org/p/chromium/issues/detail?id=587466)). A possible workaround is to remove the `id` to have the component generate a random one. - -In addition to remembering past entered values, the browser might also propose **autofill** suggestions (saved login, address, or payment details). En el caso de que desees evitar el autorellenar, puedes intentar lo siguiente: - -- Nombra la entrada sin filtrar ninguna información que el navegador pueda utilizar. p.e. `id="field1"` en vez de `id="country"`. Si dejas el id de vacío, el componente utiliza un identificador aleatorio. -- Set `autoComplete="new-password"` (some browsers will suggest a strong password for inputs with this attribute setting): - - ```jsx - - ``` - -Read [the guide on MDN](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion) for more details. - -### iOS VoiceOver - -VoiceOver en iOS Safari no soporta el atributo `aria-owns` especialmente bien. Puedes solucionar el problema con la propiedad `disablePortal`. - -### ListboxComponent - -Si proporciona un apoyo personalizado `ListboxComponent`, usted necesita asegurarse de que el contedenedor de desplazamiento destinado tiene el atributo `role` esta configurado `listbox`. Esto asegura el comportamiento correcto del desplazamiento, por ejemplo cuando usas el teclado para navegar. - -## Accesibilidad - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) - -Animamos el uso de una etiqueta para el cuadro de texto. El componente implementa las prácticas de creación de WAI-ARIA. diff --git a/docs/src/pages/components/autocomplete/autocomplete-fr.md b/docs/src/pages/components/autocomplete/autocomplete-fr.md deleted file mode 100644 index bd5aee1e482962..00000000000000 --- a/docs/src/pages/components/autocomplete/autocomplete-fr.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: Composant React Autocomplétion -components: TextField, Popper, Autocomplete -githubLabel: 'component: Autocomplete' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#combobox' ---- - -# Autocomplete (Auto-complétion) - -

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

- -Le widget est utile pour définir la valeur d'une zone de texte simple d'une seule ligne dans l'un des deux types de scénarios suivants: - -1. La valeur de la textbox doit être préalablement définit, ex: un champ de location doit contenir de valide nom de location: [combo box](#combo-box). -2. La zone de texte peut contenir n'importe quelle valeur arbitraire, mais il est avantageux de proposer des valeurs à l'utilisateur, par exemple, un champ de recherche peut suggérer similaires ou recherches antérieures pour gagner du temps aux utilisateurs: [gratuit solo](#free-solo). - -C'est censé être une version améliorée de la "react-select" et de "downshift". - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Combo box - -La valeur doit être choisie à partir d'un ensemble prédéfini de valeurs autorisées. - -{{"demo": "pages/components/autocomplete/ComboBox.js"}} - -### Structure des options - -Par défaut, le composant accepte les structures d'options suivantes : - -```ts -const filterOptions = createFilterOptions({ - matchFrom: 'start', - stringify: option => option.title, -}); - - -``` - -Par exemple : - -```js -const options = [ - { label: 'The Godfather', id: 1 }, - { label: 'Pulp Fiction', id: 2 }, -]; -// or -const options = ['The Godfather', 'Pulp Fiction']; -``` - -Cependant, vous pouvez utiliser différentes structures en fournissant une propriété `getOptionLabel`. - -### Playground - -Chacun des exemples suivants illustrent l'une des caractéristiques de la saisie semi-automatique de composant. - -{{"demo": "pages/components/autocomplete/Playground.js"}} - -### Sélection de pays - -Choisissez l'un des 248 pays. - -{{"demo": "pages/components/autocomplete/CountrySelect.js"}} - -### États contrôlables - -Le composant a deux états qui peuvent être contrôlés : - -1. l'état "valeur" avec la combinaison `valeur`/`onChange` props. Cet état représente la valeur sélectionnée par l'utilisateur, par exemple en appuyant sur Enter. -2. l'état "input value" avec la combinaison `inputValue`/`onInputChange`. Cet état représente la valeur affichée dans la zone de texte. - -> ⚠ Ces deux états sont isolés, ils doivent être contrôlés de manière indépendante. - -{{"demo": "pages/components/autocomplete/ControllableStates.js"}} - -## Free solo - -Définissez `freeSolo` à true pour que le textbox puisse contenir n'importe quelle valeur arbitraire. - -### Search input - -La propriété est conçue pour couvrir le cas d'utilisation principal d'une **entrée de recherche** avec des suggestions, par exemple la recherche Google ou le react-autowhatever. - -{{"demo": "pages/components/autocomplete/FreeSolo.js"}} - -### Créable - -Si vous avez l'intention d'utiliser ce mode pour une [combo box](#combo-box) comme expérience (une version améliorée d'un élément sélectionné) nous vous recommandons de régler : - -- `selectOnFocus` pour aider l'utilisateur à effacer la valeur sélectionnée. -- `clearOnBlur` pour aider l'utilisateur à entrer une nouvelle valeur. -- `handleHomeEndKeys` pour déplacer le focus à l'intérieur de la fenêtre pop-up avec les touches Accueil et Fin. -- Une dernière option, par exemple `Ajouter "VOTRE RECHERCH"`. - -{{"demo": "pages/components/autocomplete/FreeSoloCreateOption.js"}} - -Vous pouvez également afficher une boîte de dialogue lorsque l'utilisateur souhaite ajouter une nouvelle valeur. - -{{"demo": "pages/components/autocomplete/FreeSoloCreateOptionDialog.js"}} - -## Groupé - -Vous pouvez regrouper les options avec la propriété `groupBy`. Si vous le faites, assurez-vous que les options sont également triées avec la même dimension que celle par laquelle elles sont regroupées. Sinon vous remarquerez des en-têtes en double. - -{{"demo": "pages/components/autocomplete/Grouped.js"}} - -## Options désactivées - -{{"demo": "pages/components/autocomplete/DisabledOptions.js"}} - -## `useAutocomplete` - -For advanced customization use cases, we expose a headless `useAutocomplete()` hook. Il accepte presque les mêmes options que le composant de saisie automatique moins tous les props liés au rendu de JSX. Le composant Autocomplete utilise ce hook en interne. - -```jsx -import useAutocomplete from '@material-ui/core/useAutocomplete'; -``` - -- 📦 [4.5 kB gzippé](/size-snapshot). - -{{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} - -### Hook personnalisé - -{{"demo": "pages/components/autocomplete/CustomizedHook.js"}} - -Rendez-vous à la [section de personnalisation](#customization) pour un exemple avec le composant `Auto-complétion` au lieu du crochet. - -## Demandes asynchrones - -Le composant supporte deux cas d'utilisation asynchrones différents : - -- [Charge à l'ouverture](#load-on-open) : cela attend le composant avec lequel il doit interagir pour charger les options. -- [Recherche au fur et à mesure](#search-as-you-type) : une nouvelle requête est faite pour chaque changement. - -### Charger à l'ouverture - -Cela affiche un état de progression tant que la requête réseau est en attente. - -{{"demo": "pages/components/autocomplete/Asynchronous.js"}} - -### Rechercher au fur et à mesure - -Si votre logique consiste à récupérer de nouvelles options à chaque frappe et à utiliser la valeur actuelle de la zone de texte pour filtrer sur le serveur, vous pouvez envisager de limiter les requêtes. - -De plus, vous devrez désactiver le filtrage intégré du composant `Auto-complétion` en écrasant les propriétés `filterOptions` : - -```jsx -import matchSorter from 'match-sorter'; - -const filterOptions = (options, { inputValue }) => - matchSorter(options, inputValue); - - -``` - -### Lieu de Google Maps - -Une interface utilisateur personnalisée pour la saisie automatique des lieux Google Maps. - -{{"demo": "pages/components/autocomplete/GoogleMaps.js"}} - -Pour cette démo, nous avons besoin de charger l'API JavaScript [Google Maps](https://developers.google.com/maps/documentation/javascript/tutorial). - -> ⚠ Avant de pouvoir commencer à utiliser l'API JavaScript de Google Maps, vous devez vous inscrire et créer un compte de facturation. - -## Valeurs multiples - -Aussi connu sous le nom de tags, l'utilisateur est autorisé à entrer plus d'une valeur. - -{{"demo": "pages/components/autocomplete/Tags.js"}} - -### Options fixes - -Si vous avez besoin de verrouiller certaines balises pour qu'elles ne puissent pas être supprimées dans l'interface, vous pouvez désactiver les chip. - -{{"demo": "pages/components/autocomplete/FixedTags.js"}} - -### Cases à cocher - -{{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} - -### Limiter les tags - -Vous pouvez utiliser la prop `limitTags` pour limiter le nombre d'options affichées quand la cible n'est pas sélectionnée. - -{{"demo": "pages/components/autocomplete/LimitTags.js"}} - -## Tailles - -Fancy smaller inputs? Use the `size` prop. - -{{"demo": "pages/components/autocomplete/Sizes.js"}} - -## Personnalisation - -### Custom input - -La propriété `renderInput` vous permet de personnaliser l'entrée rendue. Le premier argument de cette prop de rendu contient des props que vous devez avancer. Faites une attention particulière aux clés `ref` et `inputProps`. - -{{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} - -### Sélecteur de GitHub - -Cette démo reproduit le sélecteur d'étiquettes de GitHub : - -{{"demo": "pages/components/autocomplete/GitHubLabel.js"}} - -Rendez-vous à la section [Crochet personnalisé](#customized-hook) pour un exemple de personnalisation avec le hook `useAutocomplete` au lieu du composant. - -## Highlights - -La démo suivante repose sur [autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight), un petit utilitaire (1 ko) pour mettre en évidence le texte dans les composants de suggestion automatique et la saisie automatique. - -{{"demo": "pages/components/autocomplete/Highlights.js"}} - -## Filtre personnalisé - -Le composant expose une usine pour créer une méthode de filtre qui peut être fournie à la propriété `filterOptions`. Vous pouvez l'utiliser pour modifier le comportement de filtre par défaut. - -```js -import { createFilterOptions } from '@material-ui/core/Autocomplete'; -``` - -### `createFilterOptions(config) => filterOptions` - -#### Paramètres - -1. `config` (*Object* [optional]): - -- `config.ignoreAccents` (*Boolean* [optional]): Defaults to `true`. Supprimer les diacritiques. -- `config.ignoreCase` (*Boolean* [optional]): Defaults to `true`. Tout en minuscule. -- `config.limit` (*Number* [optional]): Default to null. Limiter le nombre d'options suggérées à afficher. Par exemple, si `config.limite` est `100`, seule les premières `100` options correspondantes sont affichées. Cela peut être utile si beaucoup d'options de correspondance et de virtualisation n'ont pas été mises en place. -- `config.matchFrom` (_'any' | 'start'_ [optionnel]) : Valeur par défaut à `'any'`. -- `config.stringify` (*Func* [optional]): Controls how an option is converted into a string so that it can be matched against the input text fragment. -- `config.trim` (*Boolean* [optional]): Valeur par défaut `false`. Supprimer les espaces suivants. - -#### Valeur de retour - -`filterOptions`: la méthode de filtre retournée peut être fournie directement à la prop `filterOptions` du composant `Auto-complétion` , ou le paramètre du même nom pour le hook. - -Dans la démo suivante, les options doivent commencer par le préfixe de requête : - -```jsx -const filterOptions = createFilterOptions({ - matchFrom: 'start', - stringify: (option) => option.title, -}); - -; -``` - -{{"demo": "pages/components/autocomplete/Filter.js", "defaultCodeOpen": false}} - -### Avancé - -Pour les mécanismes de filtrage plus riches, comme les correspondances floues, il est recommandé de regarder [matchs-sorter](https://github.com/kentcdodds/match-sorter). Par exemple: - -```jsx -import matchSorter from 'match-sorter'; - -const filterOptions = (options, { inputValue }) => matchSorter(options, inputValue); - -; -``` - -## Virtualisation - -Recherchez dans 10 000 options générées aléatoirement. La liste est virtualisée grâce à [react-window](https://github.com/bvaughn/react-window). - -{{"demo": "pages/components/autocomplete/Virtualize.js"}} - -## Évènements - -Si vous souhaitez empêcher le comportement du gestionnaire de clés par défaut, vous pouvez définir la propriété `defaultMuiPrevented` de l'événement à `true` : - -```jsx - { - if (event.key === 'Enter') { - // Empêche le comportement par défaut 'Enter'. - event.defaultMuiPrevented = false; - // your handler code - } - }} -/> -``` - -## Limites - -### autocomplete/autofill - -Browsers have heuristics to help the user fill in form inputs. However, this can harm the UX of the component. - -By default, the component disables the input **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute. Google Chrome ne prend actuellement pas en charge ce paramètre d'attribut ([Problème 587466](https://bugs.chromium.org/p/chromium/issues/detail?id=587466)). Une solution possible consiste à supprimer l'`id` pour que le composant génère un code aléatoire. - -En plus de se souvenir des valeurs entrées précédemment, le navigateur peut également proposer des suggestions de **saisie automatique** (connexion, adresse ou détails de paiement enregistrés). Dans le cas où vous voulez le remplissage automatique, vous pouvez essayer ce qui suit : - -- Nommez l'input sans fuir les informations que le navigateur peut utiliser. par exemple `id="field1"` au lieu de `id="country"`. Si vous laissez l'id vide, le composant utilise un id aléatoire. -- Définissez `autoComplete="new-password"` (certains navigateurs suggèrent un mot de passe fort pour les entrées avec ce paramètre d'attribut) : - - ```jsx - - ``` - -Lisez le [guide sur MDN](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion) pour plus de détails. - -### voiceOver iOS - -VoiceOver sur iOS Safari ne supporte pas très bien l'attribut `aria-owns`. Vous pouvez contourner le problème avec la propriété `disablePortal`. - -### ListboxComponent - -Si vous fournissez une prop `ListboxComponent` personnalisée, vous devez vous assurer que le conteneur de défilement prévu a l'attribut `role` défini à `listbox`. Cela assure le comportement correct du défilement, par exemple lorsque vous utilisez le clavier pour naviguer. - -## Accessibilité - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) - -Nous encourageons l'utilisation d'un label pour la zone de texte. Le composant implémente les pratiques de création de WAI-ARIA. diff --git a/docs/src/pages/components/autocomplete/autocomplete-ja.md b/docs/src/pages/components/autocomplete/autocomplete-ja.md deleted file mode 100644 index dc3ac06581a6c3..00000000000000 --- a/docs/src/pages/components/autocomplete/autocomplete-ja.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: React 入力補完 コンポーネント -components: TextField, Popper, Autocomplete -githubLabel: 'component: Autocomplete' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#combobox' ---- - -# Autocomplete - -

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

- -ウィジェットは、単一行テキストボックスの値を設定する際に以下の2通りの状況で役に立ちます。 - -1. テキストボックスの値が、予め決められた許容値の中から選ばないといけない場合。 例えば、位置の欄は [combo box](#combo-box)の中から選ばなければなりません。 -2. テキストボックスが任意の値を含む可能性があるが、ユーザーに可能性のある値の提案をすることが有効な場合。例えば、検索欄で近い、又は、以前の検索結果を示してユーザーの時間を節約する。[free solo](#free-solo). - -"react-select"と"downshift"というパッケージの改良版であることを意識しています。 - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Combo box - -テキストボックスの値は、予め決められた許容値の中から選ばないといけない - -{{"demo": "pages/components/autocomplete/ComboBox.js"}} - -### オプション - -デフォルトでは、以下のオプションが設定可能です。 - -```ts -const filterOptions = createFilterOptions({ - matchFrom: 'start', - stringify: option => option.title, -}); - - -``` - -例えば： - -```js -const options = [ - { label: 'The Godfather', id: 1 }, - { label: 'Pulp Fiction', id: 2 }, -]; -// or -const options = ['The Godfather', 'Pulp Fiction']; -``` - -ただし、 `getOptionLabel` プロパティを使用することで、異なる構造を使用することができます。 - -### Playground - -Each of the following examples demonstrates one feature of the Autocomplete component. - -{{"demo": "pages/components/autocomplete/Playground.js"}} - -### Country select - -248の国から一つ選びます。 - -{{"demo": "pages/components/autocomplete/CountrySelect.js"}} - -### Controlled states - -コンポーネントは、操作できる二つのステートを持ちます。 - -1. "value"ステートは `value`/`onChange` を組み合わせて使用します。 ユーザーがEnterキーを押している場合、この値はEnterになります。 -2. "input value"ステートは`inputValue`/`onInputChange` を組み合わせて使用します。 この値は、テキストボックスに表示される値を示します。 この値は、テキストボックスに表示される値を示します。 この値は、テキストボックスに表示される値を示します。 この値は、テキストボックスに表示される値を示します。 - -> ⚠️ These two states are isolated, they should be controlled independently. - -{{"demo": "pages/components/autocomplete/ControllableStates.js"}} - -## Free solo - -`freeSolo`をtureにすることで、テキストボックスに任意の値を含むことができます。 - -### Search input - -Google searchやreact-autowhateverなどの検索候補が表示されるような**検索ボックス**に使われることを想定して設計されています。 - -{{"demo": "pages/components/autocomplete/FreeSolo.js"}} - -### Creatable - -このモードを[combo box](#combo-box)のような体験(selectの拡張版) に使う意図であれば、以下のような設定をお勧めします。 - -- `selectOnFocus`でユーザーが選択した値を消せるようにする。 -- `clearOnBlur` でユーザーが新しい値を入力できるようにする。 -- `handleHomeEndKeys`を使えば、ポップアップ内でHomeキーやEndキーを使ってフォーカスが移動できるようになります。 -- 最後の選択肢に, 例えば`Add "YOUR SEARCH"`を追加する。 - -{{"demo": "pages/components/autocomplete/FreeSoloCreateOption.js"}} - -ユーザーが新しい値を入力する時に、ダイアログを表示することもできます。 - -{{"demo": "pages/components/autocomplete/FreeSoloCreateOptionDialog.js"}} - -## Grouped - -`groupBy` プロパティを使えば、選択肢をグループ化できます。 これを使う場合、グループ化される選択肢は同じ順序でソートされたものにしてください。そうしないと、ヘッダーが重複してしまいます。 - -{{"demo": "pages/components/autocomplete/Grouped.js"}} - -## Disabled options - -{{"demo": "pages/components/autocomplete/DisabledOptions.js"}} - -## `useAutocomplete` - -For advanced customization use cases, a headless `useAutocomplete()` hook is exposed. JSXのレンダリングに関連する値以外は、Autocompleteコンポーネントとほぼ同じ値をとります。 Autocompleteコンポーネントは内部でこのhookを使用しています。 Autocompleteコンポーネントは内部でこのhookを使用しています。 The Autocomplete component is built on this hook. - -```jsx -import useAutocomplete from '@material-ui/core/useAutocomplete'; -``` - -- 📦 [4.5 kB gzipped](/size-snapshot). - -{{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} - -### Customized hook - -{{"demo": "pages/components/autocomplete/CustomizedHook.js"}} - -[Customized Autocomplete](#customized-autocomplete) 部分で、 hookの代わりに `Autocomplete`を使用したカスタマイズ例が見れます。 - -## 非同期リクエスト - -2つの異なる非同期のユースケースをサポートしています: - -- [開いてロード](#load-on-open): 選択肢をロードするのにコンポーネントが操作されるのを待ちます。 -- [入力して検索](#search-as-you-type): キーストロークごとに新しいリクエストが行われます。 - -### 開いてロード - -ネットワークリクエストがペンディング中であるとき、進行状況を表示します。 - -{{"demo": "pages/components/autocomplete/Asynchronous.js"}} - -### 入力して検索 - -キーストロークごとに新しい選択肢をフェッチし、現在のテキストボックスの値を使用してサーバー上でフィルタリングする場合、リクエストの抑制をしたいかもしれません。 - -さらに、 `filterOptions` プロパティを 上書きすることで、 `Autocomplete` コンポーネントの組み込みフィルタリングを無効にする必要があります。 - -```jsx -import matchSorter from 'match-sorter'; - -const filterOptions = (options, { inputValue }) => - matchSorter(options, inputValue); - - -``` - -### Google Maps place - -Google マップの位置の自動保管用のカスタムUI - -{{"demo": "pages/components/autocomplete/GoogleMaps.js"}} - -このデモでは、 [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) APIをロードする必要があります。 - -> Google Maps JavaScript APIを使用する前に、サインアップして、決済アカウントを作成する必要があります。 - -## Multiple values - -タグとも呼ばれ、ユーザーは複数の値を入力することができます。 - -{{"demo": "pages/components/autocomplete/Tags.js"}} - -### Fixed options - -インターフェースから削除されないように、特定のタグを固定する必要があるイベント中、チップスを無効化することができます。 - -{{"demo": "pages/components/autocomplete/FixedTags.js"}} - -### Checkboxes - -{{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} - -### Limit tags - -`limitTags` でフォーカスしていない時に表示する選択肢の数に上限を設けられます。 - -{{"demo": "pages/components/autocomplete/LimitTags.js"}} - -## サイズ - -小さい入力欄が好きですか？ `size`propを使用します。 - -{{"demo": "pages/components/autocomplete/Sizes.js"}} - -## カスタマイズ - -### Custom input - -`renderInput`でレンダリングされる入力をカスタマイズできます。 このrender propsの一つ目の引数は、継承する必要のあるpropsを含みます。 `ref` と `inputProps` の扱いに特に注意してください。 - -{{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} - -### GitHub's picker - -GitHubのラベルピッカーを再現したデモです。 - -{{"demo": "pages/components/autocomplete/GitHubLabel.js"}} - -[Customized hook](#customized-hook) 部分で、 コンポーネントの代わりに、`useAutocomplete`hookを使用したカスタマイズ例が見れます。 - -## Highlights - -以下のデモは[autosuggest-highlight](https://github.com/moroshko/autosuggest-highlight)に依存しています。提案されたテキストや自動保管コンポーネントをハイライトする小さいサイズの(1 kB)ユーティリティ - -{{"demo": "pages/components/autocomplete/Highlights.js"}} - -## Custom filter - -コンポーネントは `filterOptions` プロパティに提供できるフィルタメソッドを作成するためのファクトリを公開しています。 デフォルトのフィルター挙動を変更するのに使うことができます。 - -```js -import { createFilterOptions } from '@material-ui/core/Autocomplete'; -``` - -### `createFilterOptions(config) => filterOptions` - -#### 引数 - -1. `config` (_object_ [optional]): - -- `config.ignoreAccents` (_bool_ [optional]): Defaults to `true`. 発音記号を削除する -- `config.ignoreCase` (_bool_ [optional]): Defaults to `true`. すべて小文字にする。 -- `config.limit` (*number* [optional]): Default to null. 表示される推奨オプションの数を制限する。 例えば、 `config.limit` が `100`の時、頭の`100`個のマッチングオプションのみが表示されます。 バーチャライズせずに、大量の選択肢を扱うのに有効です。 -- `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. -- `config.stringify` (*func* [optional]): Controls how an option is converted into a string so that it can be matched against the input text fragment. -- `config.trim` (_bool_ [optional]): Defaults to `false`. 末尾のスペースを削除します。 - -#### 戻り値 - -`filterOptions`: 返り値のフィルターメソッドは、`Autocomplete`コンポーネントの`filterOptions`propに直接渡すことができます。hookにも渡すことができます。 - -以下のデモでは、選択肢が前方一致する必要があります。 - -```jsx -const filterOptions = createFilterOptions({ - matchFrom: 'start', - stringify: (option) => option.title, -}); - -; -``` - -{{"demo": "pages/components/autocomplete/Filter.js", "defaultCodeOpen": false}} - -### 高度な機能(Advanced) - -Fuzzy matchingのような高度なメカニズムについては [match-sorter](https://github.com/kentcdodds/match-sorter) を見ることをおすすめします。 例えば： - -```jsx -import matchSorter from 'match-sorter'; - -const filterOptions = (options, { inputValue }) => matchSorter(options, inputValue); - -; -``` - -## Virtualization - -10,000のランダム生成された選択肢内で検索します。 リストは [react-window](https://github.com/bvaughn/react-window) によって仮想化されています。 - -{{"demo": "pages/components/autocomplete/Virtualize.js"}} - -## イベント - -デフォルトのキーハンドラの動作を防止したい場合は、イベントの `defaultMuiPrevented` プロパティを `true` に設定します。 - -```jsx - { - if (event.key === 'Enter') { - // 'Enter' のデフォルトの動作を防止する。 - event.defaultMuiPrevented = true; - // your handler code - } - }} -/> -``` - -## 制限事項 - -### autocomplete/autofill - -Browsers have heuristics to help the user fill in form inputs. However, this can harm the UX of the component. - -By default, the component disables the input **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute. Google Chromeは現在、この属性設定をサポートしていません ([Issue 587466](https://bugs.chromium.org/p/chromium/issues/detail?id=587466)). 可能な回避策は、コンポーネントにランダムなものを生成させるために `id` を削除することです。 - -入力された過去の値を記憶することに加えて、ブラウザは **autofill** (保存されたログイン、アドレス、または支払いの詳細) をサジェストするかもしれません。 autofillを避けたい場合、以下の方法を取れます。 - -- ブラウザが判断できない命名を入力欄に使う。 例: `id="country"`の代わりに、`id="field1"`を使う idを空にした場合、コンポーネントはランダムなidを保管します。 -- `autoComplete="new-password"` に設定する。 (一部のブラウザはこの属性設定使うと入力用の強力なパスワードを提案します): - - ```jsx - - ``` - -詳細は [MDNのガイド](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion) を参照してください。 - -### iOS VoiceOver - -iOS Safariのボイスオーバーは`aria-owns` を十分にサポートしていません。 `disablePortal`を用いて、この問題を回避できます。 `disablePortal`を用いて、この問題を回避できます。 `disablePortal`を用いて、この問題を回避できます。 `disablePortal`を用いて、この問題を回避できます。 - -### ListBox コンポーネント - -`Listbox コンポーネント` のカスタムプロパティを提供する場合、意図するスクロールコンテナの `role` 属性として `listbox` が設定されていることを確認する必要があります。 これにより、例えばキーボードを使用して移動する場合など、スクロールの正しい動作が保証されます。 これにより、例えばキーボードを使用して移動する場合など、スクロールの正しい動作が保証されます。 これにより、例えばキーボードを使用して移動する場合など、スクロールの正しい動作が保証されます。 これにより、例えばキーボードを使用して移動する場合など、スクロールの正しい動作が保証されます。 これにより、例えばキーボードを使用して移動する場合など、スクロールの正しい動作が保証されます。 - -## アクセシビリティ - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#combobox) - -テキストボックスに対して、ラベルの使用を奨励しています。 コンポーネントは WAI-ARIA オーサリングを実装しています。 diff --git a/docs/src/pages/components/autocomplete/autocomplete-ru.md b/docs/src/pages/components/autocomplete/autocomplete-ru.md deleted file mode 100644 index 8138db53d27f85..00000000000000 --- a/docs/src/pages/components/autocomplete/autocomplete-ru.md +++ /dev/null @@ -1,326 +0,0 @@ ---- -title: Компонент React Autocomplete -components: TextField, Popper, Autocomplete -githubLabel: 'component: Autocomplete' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#combobox' ---- - -# Autocomplete (Автодополнение) - -

Автодополнение - это обычный ввод текста, дополненный панелью предлагаемых опций.

- -Этот виджет используется для установки значения однострочного текстового поля. Он полезен в одном из двух случев: - -1. Значение для текстового поля должно быть выбрано из предопределенного набора допустимых значений, например, поле местоположения должно содержать действительное имя местоположения: [поле со списком](#combo-box). -2. Текстовое поле может содержать любое произвольное значение, но целесообразно предлагать пользователю возможные значения. Например, поле поиска может предлагать аналогичные или предыдущие поиски, чтобы сэкономить время пользователя: [free solo](#free-solo). - -It's meant to be an improved version of the "react-select" and "downshift" packages. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Комбо-Бокс - -Значение должно быть выбрано из предопределенного набора допустимых значений. - -{{"demo": "pages/components/autocomplete/ComboBox.js"}} - -### Песочница - -По умолчанию, компонент принимает следующую структуру параметров: - -```ts -const filterOptions = createFilterOptions({ - matchFrom: 'start', - stringify: option => option.title, -}); - - -``` - -Например: - -```js -const options = [ - { label: 'The Godfather', id: 1 }, - { label: 'Pulp Fiction', id: 2 }, -]; -// or -const options = ['The Godfather', 'Pulp Fiction']; -``` - -Но, можно использовать разные структуры, добавив `getOptionLabel`. - -### Песочница - -Each of the following examples demonstrates one feature of the Autocomplete component. - -{{"demo": "pages/components/autocomplete/Playground.js"}} - -### Выбор страны - -Выберите одну из 248 стран. - -{{"demo": "pages/components/autocomplete/CountrySelect.js"}} - -### Controlled states - -The component has two states that can be controlled: - -1. the "value" state with the `value`/`onChange` props combination. Это состояние показывает значение, выбранное пользователем, для instance объекта при нажатии Enter. -2. the "input value" state with the `inputValue`/`onInputChange` props combination. This state represents the value displayed in the textbox. - -> ⚠️ These two states are isolated, they should be controlled independently. - -{{"demo": "pages/components/autocomplete/ControllableStates.js"}} - -## Произвольное значение - -Установите для `freeSolo` значение true, чтобы текстовое поле могло содержать любое произвольное значение. - -### Ввод для поиска - -Вы также можете показать диалоговое окно, если пользователь хочет добавить новое значение. - -{{"demo": "pages/components/autocomplete/FreeSolo.js"}} - -### Создаваемый - -If you intend to use this mode for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting: - -- `selectOnFocus` to helps the user clear the selected value. -- `clearOnBlur` to helps the user to enter a new value. -- `handleHomeEndKeys` , чтобы переместить фокус внутри всплывающего окна с помощью клавиш Home и End. -- A last option, for instance `Add "YOUR SEARCH"`. - -{{"demo": "pages/components/autocomplete/FreeSoloCreateOption.js"}} - -Вы также можете показать диалоговое окно, если пользователь хочет добавить новое значение. - -{{"demo": "pages/components/autocomplete/FreeSoloCreateOptionDialog.js"}} - -## Сгруппированные - -Вы можете сгруппировать параметры с помощью `groupBy`. Если вы это сделаете, убедитесь, что параметры также сортируются с одинаковым размером, который они сгруппированы, в противном случае будут повторяющиеся заголовки. - -{{"demo": "pages/components/autocomplete/Grouped.js"}} - -## Отключенные опции - -{{"demo": "pages/components/autocomplete/DisabledOptions.js"}} - -## `useAutocomplete` - -For advanced customization use cases, a headless `useAutocomplete()` hook is exposed. It accepts almost the same options as the Autocomplete component minus all the props related to the rendering of JSX. The Autocomplete component is built on this hook. - -```jsx -import useAutocomplete from '@material-ui/core/useAutocomplete'; -``` - -- 4.5 [4,5 кБ в сжатом виде](/size-snapshot). - -{{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}} - -### Customized hook - -{{"demo": "pages/components/autocomplete/CustomizedHook.js"}} - -Head to the [Customized Autocomplete](#customized-autocomplete) section for a customization example with the `Autocomplete` component instead of the hook. - -## Асинхронные запросы - -Компонент поддерживает два асинхронных варианта использования: - -- [Load on open](#load-on-open): it waits for the component to be interacted with to load the options. -- [Search as you type](#search-as-you-type): a new request is made for each keystroke. - -### Загрузить на открытие - -Он отображает состояние прогресса до тех пор, пока запрос находится в ожидании (pending). - -{{"demo": "pages/components/autocomplete/Asynchronous.js"}} - -### Поиск при вводе - -If your logic is fetching new options on each keystroke and using the current value of the textbox to filter on the server, you may want to consider throttling requests. - -Additionally, you will need to disable the built-in filtering of the `Autocomplete` component by overriding the `filterOptions` prop: - -```jsx -import matchSorter from 'match-sorter'; - -const filterOptions = (options, { inputValue }) => - matchSorter(options, inputValue); - - -``` - -### Места Google Maps - -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. - -> ⚠️ Перед началом использования API карт Google, JavaScript необходимо зарегистрировать и создать учетную запись для выставления счетов. - -## Множественные значения - -Also known as tags, the user is allowed to enter more than one value. - -{{"demo": "pages/components/autocomplete/Tags.js"}} - -### Фиксированные опции - -В случае, если вам нужно зафиксировать определенный тег (так что он не мог быть удалён через интерфейс), вы можете установить chips в состояние disabled. - -{{"demo": "pages/components/autocomplete/FixedTags.js"}} - -### Чекбоксы - -{{"demo": "pages/components/autocomplete/CheckboxesTags.js"}} - -### Limit tags - -You can use the `limitTags` prop to limit the number of displayed options when not focused. - -{{"demo": "pages/components/autocomplete/LimitTags.js"}} - -## Размеры - -Fancy smaller inputs? Use the `size` prop. - -{{"demo": "pages/components/autocomplete/Sizes.js"}} - -## Кастомизация - -### Custom input - -The `renderInput` prop allows you to customize the rendered input. The first argument of this render prop contains props that you need to forward. Pay specific attention to the `ref` and `inputProps` keys. - -{{"demo": "pages/components/autocomplete/CustomInputAutocomplete.js"}} - -### GitHub's picker - -Эта демо-версия показывает label picker с сайта GitHub: - -{{"demo": "pages/components/autocomplete/GitHubLabel.js"}} - -Перейдите в секцию [Кастомизированный хук](#customized-hook) для примера кастомизации хука ` useAutocomplete` вместо компонента - -## Основные моменты - -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. - -{{"demo": "pages/components/autocomplete/Highlights.js"}} - -## Пользовательский фильтр - -The component exposes a factory to create a filter method that can provided to the `filterOptions` prop. You can use it to change the default option filter behavior. - -```js -import { createFilterOptions } from '@material-ui/core/Autocomplete'; -``` - -### `createFilterOptions(config) => filterOptions` - -#### Аргументы - -1. `config` (_object_ [optional]): - -- `config.ignoreAccents` (_bool_ [optional]): Defaults to `true`. Remove diacritics. -- `config.ignoreCase` (_bool_ [optional]): Defaults to `true`. Lowercase everything. -- `config.limit` (*number* [optional]): Default to null. Limit the number of suggested options to be shown. For example, if `config.limit` is `100`, only the first `100` matching options are shown. It can be useful if a lot of options match and virtualization wasn't set up. -- `config.matchFrom` (*'any' | 'start'* [optional]): Defaults to `'any'`. -- `config.stringify` (*func* [optional]): Controls how an option is converted into a string so that it can be matched against the input text fragment. -- `config.trim` (_bool_ [optional]): Defaults to `false`. Remove trailing spaces. - -#### Возвращает - -`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: - -```jsx -const filterOptions = createFilterOptions({ - matchFrom: 'start', - stringify: (option) => option.title, -}); - -; -``` - -{{"demo": "pages/components/autocomplete/Filter.js", "defaultCodeOpen": false}} - -### Дополнительные параметры - -For richer filtering mechanisms, like fuzzy matching, it's recommended to look at [match-sorter](https://github.com/kentcdodds/match-sorter). Например: - -```jsx -import matchSorter from 'match-sorter'; - -const filterOptions = (options, { inputValue }) => matchSorter(options, inputValue); - -; -``` - -## Виртуализация - -Поиск в 10000 случайно сгенерированных опций. Список виртуализирован благодаря [реагирующему окну](https://github.com/bvaughn/react-window). - -{{"demo": "pages/components/autocomplete/Virtualize.js"}} - -## Events - -If you would like to prevent the default key handler behavior, you can set the event's `defaultMuiPrevented` property to `true`: - -```jsx - { - if (event.key === 'Enter') { - // Prevent's default 'Enter' behavior. - event.defaultMuiPrevented = true; - // your handler code - } - }} -/> -``` - -## Ограничения - -### Автозаполнение - -Browsers have heuristics to help the user fill in form inputs. However, this can harm the UX of the component. - -By default, the component disables the input **autocomplete** feature (remembering what the user has typed for a given field in a previous session) with the `autoComplete="off"` attribute. Google Chrome does not currently support this attribute setting ([Issue 587466](https://bugs.chromium.org/p/chromium/issues/detail?id=587466)). A possible workaround is to remove the `id` to have the component generate a random one. - -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: - -- Name the input without leaking any information the browser can use. e.g. `id="field1"` instead of `id="country"`. If you leave the id empty, the component uses a random id. -- Set `autoComplete="new-password"` (some browsers will suggest a strong password for inputs with this attribute setting): - - ```jsx - - ``` - -Read [the guide on MDN](https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Turning_off_form_autocompletion) for more details. - -### 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. - -### ListboxComponent - -If you provide a custom `ListboxComponent` prop, you need to make sure that the intended scroll container has the `role` attribute set to `listbox`. This ensures the correct behavior of the scroll, for example when using the keyboard to navigate. - -## Доступность - -(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. diff --git a/docs/src/pages/components/avatars/avatars-de.md b/docs/src/pages/components/avatars/avatars-de.md deleted file mode 100644 index 4bfbc5034bf427..00000000000000 --- a/docs/src/pages/components/avatars/avatars-de.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: React Avatar Komponente -components: Avatar, AvatarGroup, Badge -githubLabel: 'component: Avatar' ---- - -# Avatar - -

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

- -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Bild-Avatare - -Bild-Avatare können erstellt werden, indem reguläre `img` props `src` oder `srcSet` an die Komponente übergeben werden. - -{{"demo": "pages/components/avatars/ImageAvatars.js"}} - -## Buchstaben-Avatare - -Avatars containing simple characters can be created by passing a string as `children`. - -{{"demo": "pages/components/avatars/LetterAvatars.js"}} - -You can use different background colors for the avatar. The following demo generates the color based on the name of the person. - -{{"demo": "pages/components/avatars/BackgroundLetterAvatars.js"}} - -## Größen - -Die Größe des Avatars kann mit den `height`- und `width`-CSS-Eigenschaften verändert werden. - -{{"demo": "pages/components/avatars/SizeAvatars.js"}} - -## Icon-Avatare - -Icon-Avatare werden erstellt, indem man ein Icon als `children` übergibt. - -{{"demo": "pages/components/avatars/IconAvatars.js"}} - -## Varianten - -If you need square or rounded avatars, use the `variant` prop. - -{{"demo": "pages/components/avatars/VariantAvatars.js"}} - -## Fallbacks - -If there is an error loading the avatar image, the component falls back to an alternative in the following order: - -- die mitgegebenen children -- den ersten Buchstaben des `alt`-Textes -- ein generisches Avatar-Symbol - -{{"demo": "pages/components/avatars/FallbackAvatars.js"}} - -## Grouped - -`AvatarGroup` renders its children as a stack. - -{{"demo": "pages/components/avatars/GroupAvatars.js"}} - -## Mit Badge - -{{"demo": "pages/components/avatars/BadgeAvatars.js"}} diff --git a/docs/src/pages/components/avatars/avatars-es.md b/docs/src/pages/components/avatars/avatars-es.md deleted file mode 100644 index 079c93c7802cdc..00000000000000 --- a/docs/src/pages/components/avatars/avatars-es.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Componente de Avatar de React -components: Avatar, AvatarGroup, Badge -githubLabel: 'component: Avatar' ---- - -# Avatar - -

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

- -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Avatares de Imágenes - -Las imágenes de avatar pueden ser creadas pasándoles las propiedades estándar de `img`, `src` o `srcSet` al componente. - -{{"demo": "pages/components/avatars/ImageAvatars.js"}} - -## Avatares de Letras - -Los avatares que contengan carácteres simples pueden ser creados pasándoles un string como `children`. - -{{"demo": "pages/components/avatars/LetterAvatars.js"}} - -You can use different background colors for the avatar. The following demo generates the color based on the name of the person. - -{{"demo": "pages/components/avatars/BackgroundLetterAvatars.js"}} - -## Tamaños - -Puedes cambiar el tamaño del avatar con las propiedades de CSS `height` y `width`. - -{{"demo": "pages/components/avatars/SizeAvatars.js"}} - -## Avatares de iconos - -Los avatares de íconos son creados pasando un ícono como `children`. - -{{"demo": "pages/components/avatars/IconAvatars.js"}} - -## Variantes - -Si necesitas avatares cuadrados o redondeados, utiliza la prop `variant`. - -{{"demo": "pages/components/avatars/VariantAvatars.js"}} - -## Fallbacks - -Si hay un error cargando la imagen del avatar, el componente recurre a una alternativa en el siguiente orden: - -- los componentes hijos proporcionados -- la primera letra del texto `alt` -- una imagen de avatar generica - -{{"demo": "pages/components/avatars/FallbackAvatars.js"}} - -## Agrupado - -`AvatarGroup` renderiza sus componentes hijos como una pila. - -{{"demo": "pages/components/avatars/GroupAvatars.js"}} - -## Con Badge - -{{"demo": "pages/components/avatars/BadgeAvatars.js"}} diff --git a/docs/src/pages/components/avatars/avatars-fr.md b/docs/src/pages/components/avatars/avatars-fr.md deleted file mode 100644 index 2f60291d7112ea..00000000000000 --- a/docs/src/pages/components/avatars/avatars-fr.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Composant React Avatar -components: Avatar, AvatarGroup, Badge -githubLabel: 'component: Avatar' ---- - -# Avatar - -

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

- -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Avatars de l'image - -Les avatars d'image peuvent être créés en passant le standard `img` props `src` ou `srcSet` au composant. - -{{"demo": "pages/components/avatars/ImageAvatars.js"}} - -## Lettre avatars - -Les avatars contenant des caractères simples peuvent être créés en passant une chaîne en tant que `children`. - -{{"demo": "pages/components/avatars/LetterAvatars.js"}} - -You can use different background colors for the avatar. The following demo generates the color based on the name of the person. - -{{"demo": "pages/components/avatars/BackgroundLetterAvatars.js"}} - -## Tailles - -Vous pouvez modifier la taille de l'avatar avec les propriétés CSS `height` et `width`. - -{{"demo": "pages/components/avatars/SizeAvatars.js"}} - -## Avatars d'icônes - -Les avatars d'icônes sont créés en transmettant une icône à `children`. - -{{"demo": "pages/components/avatars/IconAvatars.js"}} - -## Variants - -Si vous avez besoin d'avatars carrés ou arrondis, utilisez la prop `variant`. - -{{"demo": "pages/components/avatars/VariantAvatars.js"}} - -## Fallbacks - -S'il y a une erreur lors du chargement de l'image d'avatar, le composant retombe vers une alternative dans l'ordre suivant : - -- les children fournis -- la première lettre du texte `alt` -- une icône générique d'avatar - -{{"demo": "pages/components/avatars/FallbackAvatars.js"}} - -## Groupé - -`L'avatarGroup` rend ses enfants comme une pile. - -{{"demo": "pages/components/avatars/GroupAvatars.js"}} - -## Avec badge - -{{"demo": "pages/components/avatars/BadgeAvatars.js"}} diff --git a/docs/src/pages/components/avatars/avatars-ja.md b/docs/src/pages/components/avatars/avatars-ja.md deleted file mode 100644 index fdebbbff8ed6a5..00000000000000 --- a/docs/src/pages/components/avatars/avatars-ja.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: React アバターコンポーネント -components: Avatar, AvatarGroup, Badge -githubLabel: 'component: Avatar' ---- - -# Avatar - -

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

- -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Image avatars(画像アバター) - -Image Avatars(画像アバター) は通常の`img` propsである、 `src` もしくは `srcSet`をコンポーネントに渡すことで作成できます。 - -{{"demo": "pages/components/avatars/ImageAvatars.js"}} - -## Letter avatars(文字アバター) - -`children`に文字列を渡すことで、シンプルな文字列を使ったアバターを作成することができます。 - -{{"demo": "pages/components/avatars/LetterAvatars.js"}} - -You can use different background colors for the avatar. The following demo generates the color based on the name of the person. - -{{"demo": "pages/components/avatars/BackgroundLetterAvatars.js"}} - -## サイズ - -アバターのサイズは、 `height` と `width` の CSS プロパティで変更できます。 - -{{"demo": "pages/components/avatars/SizeAvatars.js"}} - -## Icon avatars (アイコンアバター) - -アイコンアバターは、 `children(子要素)`としてアイコンを渡すことによって作成されます。 - -{{"demo": "pages/components/avatars/IconAvatars.js"}} - -## バリアント - -四角形や丸いアバターを作成したい場合は、`variant` propを指定することで実現できます。 - -{{"demo": "pages/components/avatars/VariantAvatars.js"}} - -## Fallbacks (エラー回避) - -アバター画像の読み込み時に問題が発生した場合、コンポーネントは以下の順序に沿って代替手段をとります。 - -- 指定された`children`(子要素) -- `alt`に指定された文字列の頭文字 -- 汎用アバターアイコン - -{{"demo": "pages/components/avatars/FallbackAvatars.js"}} - -## Grouped - -`AvatarGroup`は与えられた子要素をスタックとしてレンダリングします。 - -{{"demo": "pages/components/avatars/GroupAvatars.js"}} - -## バッジをつける - -{{"demo": "pages/components/avatars/BadgeAvatars.js"}} diff --git a/docs/src/pages/components/avatars/avatars-ru.md b/docs/src/pages/components/avatars/avatars-ru.md deleted file mode 100644 index 161ae4523570dc..00000000000000 --- a/docs/src/pages/components/avatars/avatars-ru.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -title: Компонент React Avatar -components: Avatar, AvatarGroup, Badge -githubLabel: 'component: Avatar' ---- - -# Avatar - -

Аватары встречаются в material design и используются во всем - от таблиц до диалоговых меню.

- -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Аватары изображений - -Аватары можно создать, передав стандартные свойства компонента `img`, такие как `src` или `srcSet`. - -{{"demo": "pages/components/avatars/ImageAvatars.js"}} - -## Буквенные аватары - -Аватары, содержащие простые символы, можно создать, передав вашу строку как `children`. - -{{"demo": "pages/components/avatars/LetterAvatars.js"}} - -Вы можете использовать другие фоновые цвета для аватара The following demo generates the color based on the name of the person. - -{{"demo": "pages/components/avatars/BackgroundLetterAvatars.js"}} - -## Размеры - -Вы можете изменить размер аватара используя `height` и `width` свойств CSS. - -{{"demo": "pages/components/avatars/SizeAvatars.js"}} - -## Иконочные аватары - -Аватары значков создаются путем передачи значка как `children`. - -{{"demo": "pages/components/avatars/IconAvatars.js"}} - -## Variants - -Если вам нужны квадратные или округлые аватары, используйте проп `variant`. - -{{"demo": "pages/components/avatars/VariantAvatars.js"}} - -## Запасные варианты - -Если при загрузке изображения аватара возникает ошибка, компонент возвращается к альтернативному варианту в следующем порядке: - -- the provided children -- the first letter of the `alt` text -- a generic avatar icon - -{{"demo": "pages/components/avatars/FallbackAvatars.js"}} - -## Сгруппированные - -`AvatarGroup` отображает дочерние элементы в виде стека. - -{{"demo": "pages/components/avatars/GroupAvatars.js"}} - -## Со значком - -{{"demo": "pages/components/avatars/BadgeAvatars.js"}} diff --git a/docs/src/pages/components/backdrop/backdrop-de.md b/docs/src/pages/components/backdrop/backdrop-de.md deleted file mode 100644 index 8b590d64dd5959..00000000000000 --- a/docs/src/pages/components/backdrop/backdrop-de.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Backdrop React Komponente -components: Backdrop, BackdropUnstyled -githubLabel: 'component: Backdrop' ---- - -# Hintergrund - -

Die Hintergrundkomponente wird verwendet, um ein bestimmtes Element oder Teile davon hervorzuheben.

- -The backdrop signals to the user of a state change within the application and can be used for creating loaders, dialogs, and more. In ihrer einfachsten Form fügt die Hintergrundkomponente eine abgeblendete Ebene über Ihrer Anwendung hinzu. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Beispiel - -{{"demo": "pages/components/backdrop/SimpleBackdrop.js"}} - -## Unstyled - -The backdrop also comes with the unstyled package. It's ideal for doing heavy customizations and minimizing bundle size. - -```js -import Backdrop from '@material-ui/unstyled/Backdrop'; -``` diff --git a/docs/src/pages/components/backdrop/backdrop-es.md b/docs/src/pages/components/backdrop/backdrop-es.md deleted file mode 100644 index 9b5e4031e2da49..00000000000000 --- a/docs/src/pages/components/backdrop/backdrop-es.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Backdrop React Componente -components: Backdrop, BackdropUnstyled -githubLabel: 'component: Backdrop' ---- - -# Backdrop - -

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

- -El backdrop señala al usuario de un cambio de estado dentro de una aplicación y puede ser usado para crear cargadores, diálogos y más. En su forma simple, el componente backdrop añade una capa de atenuado sobre su aplicación. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Ejemplo - -{{"demo": "pages/components/backdrop/SimpleBackdrop.js"}} - -## Unstyled - -The backdrop also comes with the unstyled package. It's ideal for doing heavy customizations and minimizing bundle size. - -```js -import Backdrop from '@material-ui/unstyled/Backdrop'; -``` diff --git a/docs/src/pages/components/backdrop/backdrop-fr.md b/docs/src/pages/components/backdrop/backdrop-fr.md deleted file mode 100644 index 2f5394fa9a62a7..00000000000000 --- a/docs/src/pages/components/backdrop/backdrop-fr.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Composant React Backdrop -components: Backdrop, BackdropUnstyled -githubLabel: 'component: Backdrop' ---- - -# Backdrop - -

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

- -Le Backdrop signale à l'utilisateur d'un changement d'état dans l'application et peuvent être utilisés pour créer des chargeurs, des dialogues et plus encore. Dans sa forme la plus simple, le composant Backdrop ajoutera une couche assombrie sur votre application. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Exemple - -{{"demo": "pages/components/backdrop/SimpleBackdrop.js"}} - -## Unstyled - -The backdrop also comes with the unstyled package. It's ideal for doing heavy customizations and minimizing bundle size. - -```js -import Backdrop from '@material-ui/unstyled/Backdrop'; -``` diff --git a/docs/src/pages/components/backdrop/backdrop-ja.md b/docs/src/pages/components/backdrop/backdrop-ja.md deleted file mode 100644 index bc94d160b8ed78..00000000000000 --- a/docs/src/pages/components/backdrop/backdrop-ja.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: 背景 React Component -components: Backdrop, BackdropUnstyled -githubLabel: 'component: Backdrop' ---- - -# 背景 - -

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

- -The backdrop signals to the user of a state change within the application and can be used for creating loaders, dialogs, and more. 最も簡単な形式では、backdrop コンポーネントはアプリケーションにdimmed レイヤーを追加します。 - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## 例 - -{{"demo": "pages/components/backdrop/SimpleBackdrop.js"}} - -## Unstyled - -The backdrop also comes with the unstyled package. It's ideal for doing heavy customizations and minimizing bundle size. - -```js -import Backdrop from '@material-ui/unstyled/Backdrop'; -``` diff --git a/docs/src/pages/components/backdrop/backdrop-ru.md b/docs/src/pages/components/backdrop/backdrop-ru.md deleted file mode 100644 index c94f0ec087c9f8..00000000000000 --- a/docs/src/pages/components/backdrop/backdrop-ru.md +++ /dev/null @@ -1,25 +0,0 @@ ---- -title: Backdrop React Component -components: Backdrop, BackdropUnstyled -githubLabel: 'component: Backdrop' ---- - -# Backdrop - -

Затемнение предназначено для акцентирования внимания пользователя на определенном элементе интерфейса.

- -The backdrop signals to the user of a state change within the application and can be used for creating loaders, dialogs, and more. Проще говоря, затемнение добавляет затемнённый слой поверх вашего приложения. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Пример - -{{"demo": "pages/components/backdrop/SimpleBackdrop.js"}} - -## Unstyled - -The backdrop also comes with the unstyled package. It's ideal for doing heavy customizations and minimizing bundle size. - -```js -import Backdrop from '@material-ui/unstyled/Backdrop'; -``` diff --git a/docs/src/pages/components/badges/badges-de.md b/docs/src/pages/components/badges/badges-de.md deleted file mode 100644 index be401b8722925f..00000000000000 --- a/docs/src/pages/components/badges/badges-de.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: React Badge Komponente -components: Badge, BadgeUnstyled -githubLabel: 'component: Badge' ---- - -# Badge - -

Badge generiert ein kleines Abzeichen an der oberen rechten Ecke seiner Kinder.

- -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Einfaches Abzeichen - -Beispiele für Text Badges in Primär- und Sekundärfarben. The badge is applied to its children. - -{{"demo": "pages/components/badges/SimpleBadge.js"}} - -## Benutzerdefinierte Badges - -Hier ist ein Beispiel zum Anpassen der Komponente. Weitere Informationen hierzu finden Sie auf der [Dokumentationsseite zu Overrides](/customization/how-to-customize/). - -{{"demo": "pages/components/badges/CustomizedBadges.js"}} - -## Badge Sichtbarkeit - -Die Sichtbarkeit von Badges kann über die Eigenschaft `invisible` gesteuert werden. - -{{"demo": "pages/components/badges/BadgeVisibility.js"}} - -The badge auto hides with badgeContent is zero. Sie können dies mit der Eigenschaft `showZero` überschreiben. - -{{"demo": "pages/components/badges/ShowZeroBadge.js"}} - -## Maximaler Wert - -Sie können die Eigenschaft `max` verwenden, um den Wert des Badge-Inhalts zu begrenzen. - -{{"demo": "pages/components/badges/BadgeMax.js"}} - -## Dot badge - -Die Eigenschaft `dot` verwandelt ein Badge in einen kleinen Punkt. This can be used as a notification that something has changed without giving a count. - -{{"demo": "pages/components/badges/DotBadge.js"}} - -## Badge overlap - -Du kannst dieser `overlap`, um das Badge relativ zur Ecke des umschlossenen Elements zu platzieren. - -{{"demo": "pages/components/badges/BadgeOverlap.js"}} - -## Badge alignment - -You can use the `anchorOrigin` prop to move the badge to any corner of the wrapped element. - -{{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}} - -## Unstyled - -The badge also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size. - -```js -import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled'; -``` - -{{"demo": "pages/components/badges/UnstyledBadge.js"}} - -## Barrierefreiheit - -You can't rely on the content of the badge to be announced correctly. You should provide a full description, for instance, with `aria-label`: - -{{"demo": "pages/components/badges/AccessibleBadges.js"}} diff --git a/docs/src/pages/components/badges/badges-es.md b/docs/src/pages/components/badges/badges-es.md deleted file mode 100644 index fd4bb62fc30565..00000000000000 --- a/docs/src/pages/components/badges/badges-es.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: React Badge component -components: Badge, BadgeUnstyled -githubLabel: 'component: Badge' ---- - -# Badge - -

El componente Badge genera un pequeño badge en la esquina superior derecha de su(s) hijo(s).

- -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Badges básicos - -Ejemplos de insignias que contienen texto, utilizando colores primarios y secundarios. La insignia se aplica a sus hijos. - -{{"demo": "pages/components/badges/SimpleBadge.js"}} - -## Placas personalizadas - -He aquí un ejemplo de personalización del componente. Puedes aprender más sobre esto en la [sección Personalizando Componentes de la documentación](/customization/how-to-customize/). - -{{"demo": "pages/components/badges/CustomizedBadges.js"}} - -## Visibilidad del Badge - -Usted puede usar la propiedad `overlap` para establecer el Badge relativo a la esquina del elemento envuelto. - -{{"demo": "pages/components/badges/BadgeVisibility.js"}} - -El badge se oculta automáticamente con `badgeContent` igual a cero. Usted puede sobrescribir esto con la propiedad `showZero`. - -{{"demo": "pages/components/badges/ShowZeroBadge.js"}} - -## Valor máximo - -Puedes usar la propiedad `max` para limitar el valor máximo del contenido del badge. - -{{"demo": "pages/components/badges/BadgeMax.js"}} - -## Badge de punto - -La propiedad `dot` cambia el badge a un pequeño punto. Esto se puede usar como una notificación de que algo ha cambiado sin contar. - -{{"demo": "pages/components/badges/DotBadge.js"}} - -## Superposición del Badge - -Usted puede usar la propiedad `anchorOrigin` para mover el Badge a cualquier esquina del elemento envuelto. - -{{"demo": "pages/components/badges/BadgeOverlap.js"}} - -## Alineación del Badge - -Puede usar la propiedad `overlap` para colocar la insignia relativa a la esquina del elemento envuelto. - -{{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}} - -## Unstyled - -The badge also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size. - -```js -import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled'; -``` - -{{"demo": "pages/components/badges/UnstyledBadge.js"}} - -## Accesibilidad - -You can't rely on the content of the badge to be announced correctly. You should provide a full description, for instance, with `aria-label`: - -{{"demo": "pages/components/badges/AccessibleBadges.js"}} diff --git a/docs/src/pages/components/badges/badges-fr.md b/docs/src/pages/components/badges/badges-fr.md deleted file mode 100644 index 82fe1666829f31..00000000000000 --- a/docs/src/pages/components/badges/badges-fr.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Composant React Badge -components: Badge, BadgeUnstyled -githubLabel: 'component: Badge' ---- - -# Badge - -

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

- -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Badges Basique - -Exemples de badges contenant du texte, utilisant les couleurs primaires et secondaires. Le badge est appliqué aux enfants. - -{{"demo": "pages/components/badges/SimpleBadge.js"}} - -## Badges personnalisés - -Voici un exemple de personnalisation du composant. Vous pouvez en apprendre plus à ce sujet dans la [page de documentation](/customization/how-to-customize/). - -{{"demo": "pages/components/badges/CustomizedBadges.js"}} - -## Visibilité du badge - -La visibilité des badges peut être contrôlée en utilisant le prop `invisible`. - -{{"demo": "pages/components/badges/BadgeVisibility.js"}} - -Le badge se cache automatiquement quand badgeContent est null. Vous pouvez la remplacer avec la propriété `showZero`. - -{{"demo": "pages/components/badges/ShowZeroBadge.js"}} - -## Valeur maximale - -Vous pouvez utiliser le prop `max` pour plafonner la valeur du contenu du badge. - -{{"demo": "pages/components/badges/BadgeMax.js"}} - -## Badge à points - -La propriété `dot` change un badge en petit point. Cela peut être utilisé comme une notification que quelque chose a changé sans donner de compte. - -{{"demo": "pages/components/badges/DotBadge.js"}} - -## Chevauchement des badges - -Vous pouvez utiliser le prop `overlap` pour placer le badge relatif au coin de l'élément enveloppé. - -{{"demo": "pages/components/badges/BadgeOverlap.js"}} - -## Alignement du badge - -Vous pouvez utiliser le prop `anchorOrigin` pour déplacer le badge dans n'importe quel coin de l'élément enveloppé. - -{{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}} - -## Unstyled - -The badge also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size. - -```js -import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled'; -``` - -{{"demo": "pages/components/badges/UnstyledBadge.js"}} - -## Accessibilité - -You can't rely on the content of the badge to be announced correctly. You should provide a full description, for instance, with `aria-label`: - -{{"demo": "pages/components/badges/AccessibleBadges.js"}} diff --git a/docs/src/pages/components/badges/badges-ja.md b/docs/src/pages/components/badges/badges-ja.md deleted file mode 100644 index b7cb044bc3c7ab..00000000000000 --- a/docs/src/pages/components/badges/badges-ja.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: React バッジコンポーネント -components: Badge, BadgeUnstyled -githubLabel: 'component: Badge' ---- - -# Badge - -

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

- -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## 基本的なバッジ - -プライマリー色とセカンダリーを使用した、テキストを含むバッジの例。 バッジが子要素に適用されます。 - -{{"demo": "pages/components/badges/SimpleBadge.js"}} - -## Customized badges （カスタマイズされたバッジ） - -コンポーネントのカスタマイズ例を次に示します。 詳細については、 [オーバーライドについてのドキュメント](/customization/how-to-customize/) を参照してください。 - -{{"demo": "pages/components/badges/CustomizedBadges.js"}} - -## バッジの表示設定 - -バッジの可視性は、 `invisible` プロパティを使用して制御できます。 - -{{"demo": "pages/components/badges/BadgeVisibility.js"}} - -BadgeContentが0の場合、バッジは自動的に非表示になります。 `showZero` プロパティでこれをオーバーライドできます。 - -{{"demo": "pages/components/badges/ShowZeroBadge.js"}} - -## 最大値 - -バッジコンテンツの値に上限を設定するには、 `max` プロパティを使用します。 - -{{"demo": "pages/components/badges/BadgeMax.js"}} - -## ドットバッジ - -`dot`プロパティは、バッジを小さなドットに変更します。 これは、何かが変更されたことをカウントせずに通知するために使用できます。 これは、何かが変更されたことをカウントせずに通知するために使用できます。 これは、何かが変更されたことをカウントせずに通知するために使用できます。 これは、何かが変更されたことをカウントせずに通知するために使用できます。 これは、何かが変更されたことをカウントせずに通知するために使用できます。 - -{{"demo": "pages/components/badges/DotBadge.js"}} - -## バッジの重複 - -`overlap` プロパティを使用して、ラップされた要素の角を基準にしてバッジを配置できます。 - -{{"demo": "pages/components/badges/BadgeOverlap.js"}} - -## バッジの配置 - -`anchorOrigin` プロパティを使用して、バッジをラップされた要素の隅に移動できます。 - -{{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}} - -## Unstyled - -The badge also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size. - -```js -import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled'; -``` - -{{"demo": "pages/components/badges/UnstyledBadge.js"}} - -## アクセシビリティ - -You can't rely on the content of the badge to be announced correctly. You should provide a full description, for instance, with `aria-label`: - -{{"demo": "pages/components/badges/AccessibleBadges.js"}} diff --git a/docs/src/pages/components/badges/badges-ru.md b/docs/src/pages/components/badges/badges-ru.md deleted file mode 100644 index cf9a5fe67f59eb..00000000000000 --- a/docs/src/pages/components/badges/badges-ru.md +++ /dev/null @@ -1,73 +0,0 @@ ---- -title: Компонент React Badge -components: Badge, BadgeUnstyled -githubLabel: 'component: Badge' ---- - -# Badge - -

Значок генерирует маленький значок в правом верхнем углу своего дочернего(их) элемента(ов).

- -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Простые значки - -Примеры значков, содержащих текст, с использованием первичных и вторичных цветов. Знак применяется к своим детям. - -{{"demo": "pages/components/badges/SimpleBadge.js"}} - -## Настраиваемые значки - -Ниже находится пример кастомизации компонента. You can learn more about this in the [overrides documentation page](/customization/how-to-customize/). - -{{"demo": "pages/components/badges/CustomizedBadges.js"}} - -## Видимость значка - -Видимость значков можно контролировать с помощью свойства `invisible`. - -{{"demo": "pages/components/badges/BadgeVisibility.js"}} - -Значок автоматически скрывается, когда свойство badgeContent равно нулю. Вы можете переопределить это с помощью пропа `showZero`. - -{{"demo": "pages/components/badges/ShowZeroBadge.js"}} - -## Максимальное значение - -Вы можете использовать проп `max`, чтобы ограничить значение значка. - -{{"demo": "pages/components/badges/BadgeMax.js"}} - -## Значок-точка - -Проп `dot` превращает значок в маленькую точку. Это можно использовать как уведомление о том, что что-то изменилось без количества. - -{{"demo": "pages/components/badges/DotBadge.js"}} - -## Наложение значка - -Вы можете использовать проп `overlap` для размещения значка относительно краев элемента. - -{{"demo": "pages/components/badges/BadgeOverlap.js"}} - -## Выравнивание значка - -Вы можете использовать проп `anchorOrigin` для перемещения значка в любой угол элемента. - -{{"demo": "pages/components/badges/BadgeAlignment.js", "hideToolbar": true}} - -## Unstyled - -The badge also comes with an unstyled version. It's ideal for doing heavy customizations and minimizing bundle size. - -```js -import BadgeUnstyled from '@material-ui/unstyled/BadgeUnstyled'; -``` - -{{"demo": "pages/components/badges/UnstyledBadge.js"}} - -## Доступность - -You can't rely on the content of the badge to be announced correctly. You should provide a full description, for instance, with `aria-label`: - -{{"demo": "pages/components/badges/AccessibleBadges.js"}} diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation-de.md b/docs/src/pages/components/bottom-navigation/bottom-navigation-de.md deleted file mode 100644 index 7df4b8b251e317..00000000000000 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation-de.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Bottom Navigation React-Komponente -components: BottomNavigation, BottomNavigationAction -githubLabel: 'component: BottomNavigation' -materialDesign: https://material.io/components/bottom-navigation ---- - -# Bottom Navigation (Untere Navigation) - -

Die unteren Navigationsleisten ermöglichen die Bewegung zwischen primären Zielen in einer App.

- -Die [untere Navigationsleiste](https://material.io/design/components/bottom-navigation.html) zeigt drei bis fünf Ziele am unteren Bildschirmrand an. Jedes Ziel wird durch ein Symbol und eine optionale Textbezeichnung dargestellt. Wenn Sie auf ein unteres Navigationssymbol tippen, wird der Benutzer zum Navigationsziel der obersten Ebene geführt, das diesem Symbol zugeordnet ist. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Bottom Navigation (Untere Navigation) - -Bei **4** oder **5** Aktionen werden inaktive Ansichten nur als Symbole angezeigt. - -{{"demo": "pages/components/bottom-navigation/SimpleBottomNavigation.js", "bg": true}} - -## Untere Navigation ohne Beschriftung - -Bei **4** oder **5** Aktionen werden inaktive Ansichten nur als Symbole angezeigt. - -{{"demo": "pages/components/bottom-navigation/LabelBottomNavigation.js", "bg": true}} - -## Fixed positioning - -This demo keeps bottom navigation fixed to the bottom, no matter the amount of content on-screen. - -{{"demo": "pages/components/bottom-navigation/FixedBottomNavigation.js", "bg": true, "iframe": true, "maxWidth": 600}} - -## Drittanbieter-Routing Bibliothek - -One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. The `BottomNavigationAction` component provides the `component` prop to handle this use case. Here is a [more detailed guide](/guides/routing). diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation-es.md b/docs/src/pages/components/bottom-navigation/bottom-navigation-es.md deleted file mode 100644 index 87e641f34fea92..00000000000000 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation-es.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Componente para navegación a pie de página -components: BottomNavigation, BottomNavigationAction -githubLabel: 'component: BottomNavigation' -materialDesign: https://material.io/components/bottom-navigation ---- - -# Barra de navegación inferior - -

Las barras de navegación inferiores permiten movimiento entre destinos primarios en una aplicación.

- -[La barra de Navegación Inferior](https://material.io/design/components/bottom-navigation.html) muestra de tres a cinco destinos en la parte inferior de una pantalla. Cada destino es representado por un icono y una etiqueta de texto opcional. Cuando un icono de navegación inferior es tocado, el usuario es llevado al destino de navegación superior asociado con ese icono. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Barra de navegación inferior - -Si hay **cuatro ** o **cinco** acciones, mostrar vistas inactivas solamente como iconos. - -{{"demo": "pages/components/bottom-navigation/SimpleBottomNavigation.js", "bg": true}} - -## Botón de navegación sin texto - -Si hay **cuatro ** o **cinco** acciones, mostrar vistas inactivas solamente como iconos. - -{{"demo": "pages/components/bottom-navigation/LabelBottomNavigation.js", "bg": true}} - -## Fixed positioning - -This demo keeps bottom navigation fixed to the bottom, no matter the amount of content on-screen. - -{{"demo": "pages/components/bottom-navigation/FixedBottomNavigation.js", "bg": true, "iframe": true, "maxWidth": 600}} - -## Librería externa de routing - -One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. The `BottomNavigationAction` component provides the `component` prop to handle this use case. Here is a [more detailed guide](/guides/routing). diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation-fr.md b/docs/src/pages/components/bottom-navigation/bottom-navigation-fr.md deleted file mode 100644 index 69e50c6828c90b..00000000000000 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation-fr.md +++ /dev/null @@ -1,44 +0,0 @@ ---- -title: Composant React de navigation inférieure -components: BottomNavigation, BottomNavigationAction -githubLabel: 'component: BottomNavigation' -materialDesign: https://material.io/components/bottom-navigation ---- - -# Bottom Navigation (Barre de navigation inférieure) - -

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

- -La barre de navigation inférieure affiche de de trois à cinq destinations en bas de l'écran. Chaque destination est représentée par une icône et une étiquette de texte optionnelle. Lorsqu'une icône de navigation en bas de page est enfoncée, l'utilisateur est dirigé vers la destination de navigation de niveau supérieur associée à cette icône.

- -{{"component": "modules/components/ComponentLinkHeader.js"}} - - - -## Bottom Navigation (Barre de navigation inférieure) - -Si il y a **quatre** ou **cinq** actions, affichage inactif points de vue uniquement sous forme d'icônes. - -{{"demo": "pages/components/bottom-navigation/SimpleBottomNavigation.js", "bg": true}} - - - -## Navigation du bas sans étiquette - -S'il y a **quatre actions** ou **cinq actions** , les vues inactives sont affichées uniquement sous forme d'icônes. - -{{"demo": "pages/components/bottom-navigation/LabelBottomNavigation.js", "bg": true}} - - - -## Position fixe - -Cette démo maintient la navigation de bas en bas, peu importe la quantité de contenu à l'écran. - -{{"demo": "pages/components/bottom-navigation/FixedBottomNavigation.js", "bg": true, "iframe": true, "maxWidth": 600}} - - - -## Bibliothèque de routage tierce - -One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. The `BottomNavigationAction` component provides the `component` prop to handle this use case. Here is a [more detailed guide](/guides/routing). diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation-ja.md b/docs/src/pages/components/bottom-navigation/bottom-navigation-ja.md deleted file mode 100644 index 050321fb9f808d..00000000000000 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation-ja.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Bottom Navigation React component -components: BottomNavigation, BottomNavigationAction -githubLabel: 'component: BottomNavigation' -materialDesign: https://material.io/components/bottom-navigation ---- - -# ボトムナビゲーション - -

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

- -ボトムナビゲーションバーは、画面下部に3〜5つの目的地を表示します。 各目的地は、アイコンとオプションのテキストラベルで表されます。 ボトムナビゲーションアイコンをタップすると、そのアイコンに関連付けられている最上位のナビゲーション先に移動します。 - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## ボトムナビゲーション - -**3 **アクションしかない場合は、アイコンとテキストラベルの両方を常に表示します。 - -{{"demo": "pages/components/bottom-navigation/SimpleBottomNavigation.js", "bg": true}} - -## ラベルなしのボトムナビゲーション - -**4** または **5** アクションがある場合は、非アクティブビューをアイコンとしてのみ表示します。 - -{{"demo": "pages/components/bottom-navigation/LabelBottomNavigation.js", "bg": true}} - -## 固定位置 - -このデモでは、画面上のコンテンツの量に関係なく、下部ナビゲーションを下部に固定します。 - -{{"demo": "pages/components/bottom-navigation/FixedBottomNavigation.js", "bg": true, "iframe": true, "maxWidth": 600}} - -## サードパーティ製ルーティングライブラリ - -One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. The `BottomNavigationAction` component provides the `component` prop to handle this use case. Here is a [more detailed guide](/guides/routing). diff --git a/docs/src/pages/components/bottom-navigation/bottom-navigation-ru.md b/docs/src/pages/components/bottom-navigation/bottom-navigation-ru.md deleted file mode 100644 index b375c39e02bfb9..00000000000000 --- a/docs/src/pages/components/bottom-navigation/bottom-navigation-ru.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -title: Нижняя панель навигации, компонент React -components: BottomNavigation, BottomNavigationAction -githubLabel: 'component: BottomNavigation' -materialDesign: https://material.io/components/bottom-navigation ---- - -# Bottom Navigation (Нижняя панель навигации) - -

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

- -[Нижняя панель навигации](https://material.io/design/components/bottom-navigation.html) отображает от трех до пяти элементов перехода внизу экрана. Каждый элемент перехода представлен значком и необязательной текстовой меткой. При нажатии на нижний значок навигации пользователь попадает на страницу, связанную с этим значком. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Bottom Navigation (Нижняя панель навигации) - -Если существует **четыре** или **пять** действий, стоит отображать неактивные элементы только в виде значков. - -{{"demo": "pages/components/bottom-navigation/SimpleBottomNavigation.js", "bg": true}} - -## Нижняя навигация без текста - -Если существует **четыре** или **пять** действий, стоит отображать неактивные элементы только в виде значков. - -{{"demo": "pages/components/bottom-navigation/LabelBottomNavigation.js", "bg": true}} - -## Fixed positioning (фиксированное позиционирование) - -В этом примере нижняя панель навигации остаётся зафиксированной снизу вне зависимости от количества контента на экране. - -{{"demo": "pages/components/bottom-navigation/FixedBottomNavigation.js", "bg": true, "iframe": true, "maxWidth": 600}} - -## Сторонняя библиотека маршрутизации - -One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. The `BottomNavigationAction` component provides the `component` prop to handle this use case. Here is a [more detailed guide](/guides/routing). diff --git a/docs/src/pages/components/box/box-de.md b/docs/src/pages/components/box/box-de.md deleted file mode 100644 index e2e4b14619dfcf..00000000000000 --- a/docs/src/pages/components/box/box-de.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: React Box component -githubLabel: 'component: Box' ---- - -# Box - -

Die Box-Komponente dient als Wrapper-Komponente für die meisten Anforderungen des CSS-Dienstprogramms.

- -Die Box-Komponente kombiniert [alle Stilfunktionen](/system/basics/#all-inclusive), die in `@material-ui/system` verfügbar sind. - -Die Style-Funktion der [Palette](/system/palette/). - -## Beispiel - -Die Style-Funktion der [Palette](/system/palette/). - -## The `sx` prop - -All system properties are available via the [`sx` prop](/system/basics/#the-sx-prop). In addition, the `sx` prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it: - -{{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }} - -## Material-UI-Komponenten überschreiben - -Die Box-Komponente umschließt Ihre Komponente. It creates a new DOM element, a `
` by default that can be changed with the `component` prop. Angenommen, stattdessen soll ein ``-Element verwendet werden: - -{{"demo": "pages/components/box/BoxComponent.js", "defaultCodeOpen": true }} - -Dies funktioniert hervorragend, wenn die Änderungen für ein neues DOM-Element isoliert werden können. Zum Beispiel kann der Rand auf diese Weise verändert werden. - -Manchmal müssen Sie jedoch das zugrunde liegende DOM-Element als Ziel festlegen. As an example, you may want to change the border of the Button. The Button component defines its own styles. CSS-Vererbung hilft hier nicht. To workaround the problem, you can use the [`sx`](/system/basics/#the-sx-prop) prop directly on the child if it is a Material-UI component. - -```diff -- -- -- -+ -``` - -For non-Material-UI components, use the `component` prop. - -```diff -- -- -- -+Save -``` - -## API - -```jsx -import Box from '@material-ui/core/Box'; -``` - -| Name | Typ | Standard | Beschreibung | -|:---------------------------------------- |:----------------------------------------------------------------------------------------------------------------------------- |:--------------------------------------- |:-------------------------------------------------------------------------------------------------------------------------- | -| children | node
 | | Box Render-Funktion oder Knoten. | -| component | union: string |
 func |
 object
 | 'div' | Die für den Wurzelknoten verwendete Komponente. Entweder ein String, um ein DOM-Element zu verwenden oder eine Komponente. | -| sx | object | {} | Accepts all system properties, as well as any valid CSS properties. | - -## System props - -As a CSS utility component, the `Box` also supports all [`system`](/system/properties/) properties. You can use them as prop directly on the component. For instance, a margin-top: - -```jsx - -``` diff --git a/docs/src/pages/components/box/box-es.md b/docs/src/pages/components/box/box-es.md deleted file mode 100644 index a3d747df6f5de8..00000000000000 --- a/docs/src/pages/components/box/box-es.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: React Box component -githubLabel: 'component: Box' ---- - -# Cuadro - -

El componente Box sirve como una envoltura para la mayoría de las necesidades CSS.

- -El componente Box recoge [todas las funciones de estilo](/system/basics/#all-inclusive) que están expuesta en `@material-ui/system`. - -[La función de estilo de la paleta](/system/palette/). - -## Ejemplo - -[La función de estilo de la paleta](/system/palette/). - -## The `sx` prop - -All system properties are available via the `sx` prop. In addition, this prop allows you to specify any other CSS rules you may need. Here's an example of how you can use it: - -{{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }} - -## Anulación de componentes de material-UI - -El componente Box envuelve su componente. Crea un nuevo elemento DOM, un `
` por defecto que se puede cambiar con la propiedad `componente`. Digamos que quiere usar un `` en lugar: - -{{"demo": "pages/components/box/BoxComponent.js", "defaultCodeOpen": true }} - -Esto funciona muy bien cuando los cambios se pueden aislar a un nuevo elemento DOM. Por ejemplo, puede cambiar el margen de esta manera. - -Sin embargo, a veces tienes que apuntar al elemento DOM subyacente. For instance, you want to change the border of the Button. The Button component defines its own styles. La herencia por CSS no ayuda. To workaround the problem, you can use the [`sx`](/system/basics/#the-sx-prop) prop directly on the child if it is a Material-UI component. - -```diff -- -- -- -+ -``` - -El componente Box tiene una propiedad `clone` para permitir el uso del método de elemento clon de React. - -```diff -- -- -- -+Save -``` - -## API - -```jsx -import Box from '@material-ui/core/Box'; -``` - -| Nombre | Tipo | Por defecto | Descripción | -|:------------------------------------------- |:----------------------------------------------------------------------------------------------------------------------------- |:--------------------------------------- |:-------------------------------------------------------------------------------------------------------- | -| hijos * | node
 | | Función de render de Box o nodo. | -| component | union: string |
 func |
 object
 | 'div' | El componente utilizado para el nodo raíz. Ya sea un 'string' para usar un elemento DOM o un componente. | -| sx | object | {} | Accepts all system properties, as well as any valid CSS properties. | - -## System props - -As a CSS utility component, the `Box` also supports all [`system`](/system/properties/) properties. You can use them as prop directly on the component. For instance, a margin-top: - -```jsx - -``` diff --git a/docs/src/pages/components/box/box-fr.md b/docs/src/pages/components/box/box-fr.md deleted file mode 100644 index 73fa5f50d533f7..00000000000000 --- a/docs/src/pages/components/box/box-fr.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Composant React Box -githubLabel: 'component: Box' ---- - -# Box (Boite) - -

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

- -Le composant Box contiens [toutes les fonctions de style](/system/basics/#all-inclusive) qui sont exposées dans `@material-ui/system`. - -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## Exemple - -[La palette](/system/palette/) de style fonction. - -## The `sx` prop - -All system properties are available via the `sx` prop. In addition, this prop allows you to specify any other CSS rules you may need. Voici un exemple de la façon dont vous pouvez l'utiliser : - -{{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }} - -## Remplacer les composants Material-UI - -Le composant Box enveloppe votre composant. Il crée un nouvel élément DOM, un `
` par défaut qui peut être modifié avec la propriété `component`. Disons que vous voulez utiliser un `` à la place : - -{{"demo": "pages/components/box/BoxComponent.js", "defaultCodeOpen": true }} - -Cela fonctionne très bien quand les changements peuvent être isolés dans un nouvel élément DOM. Par exemple, vous pouvez changer la marge de cette façon. - -Cependant, vous devez parfois cibler l'élément DOM sous-jacent. For instance, you want to change the border of the Button. Le composant Button définit ses propres styles. L'héritage CSS n'aide pas. To workaround the problem, you can use the [`sx`](/system/basics/#the-sx-prop) prop directly on the child if it is a Material-UI component. - -```diff -- -- -- -+ -``` - -The Box component has a `clone` property to enable the usage of the clone element method of React. - -```diff -- -- -- -+Save -``` - -## API - -```jsx -import Box from '@material-ui/core/Box'; -``` - -| Nom | Type | Défaut | Description | -|:---------------------------------------------- |:----------------------------------------------------------------------------------------------------------------------------- |:--------------------------------------- |:---------------------------------------------------------------------------------------------------------------------- | -| children * | node
 | | Fonction de rendu ou noeud de la boîte. | -| component | union: string |
 func |
 object
 | 'div' | Le composant utilisé pour le noeud racine. Soit une chaîne de caractères pour utiliser un élément DOM ou un composant. | -| sx | object | {} | Accepte toutes les propriétés du système, ainsi que toutes les propriétés CSS valides. | - -## System props - -As a CSS utility component, the `Box` also supports all [`system`](/system/properties/) properties. You can use them as prop directly on the component. For instance, a margin-top: - -```jsx - -``` diff --git a/docs/src/pages/components/box/box-ja.md b/docs/src/pages/components/box/box-ja.md deleted file mode 100644 index 2be1a1f37567f5..00000000000000 --- a/docs/src/pages/components/box/box-ja.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: React Box コンポーネント -githubLabel: 'component: Box' ---- - -# Box - -

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

- -Boxコンポーネントは、`@material-ui/system`で公開される[すべてのスタイル関数](/system/basics/#all-inclusive) をパッケージ化します。 - -[palette](/system/palette/) style関数。 - -## 例 - -[palette](/system/palette/) style関数。 - -## The `sx` prop - -All system properties are available via the [`sx` prop](/system/basics/#the-sx-prop). In addition, the `sx` prop allows you to specify any other CSS rules you may need. 使用方法の例を次に示します。 - -{{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }} - -## Material-UI componentsのオーバーライド - -The Box componentは、コンポーネントをラップします。 新しいDOM要素を作成します。 この要素はデフォルトで`
`であり、`component` プロパティを使用して変更できます。 代わりに `` を使用すると - -{{"demo": "pages/components/box/BoxComponent.js", "defaultCodeOpen": true }} - -これは、新しいDOM要素に分離する変更の場合に非常に有効です。 たとえば、この方法で余白を変更できます。 - -ただし、場合によっては基礎となるDOM要素をターゲットにする必要があります。 As an example, you may want to change the border of the Button. しかしButtonコンポーネントは独自のスタイルを定義しています。 CSS継承は役に立ちません。 To workaround the problem, you can use the [`sx`](/system/basics/#the-sx-prop) prop directly on the child if it is a Material-UI component. - -```diff -- -- -- -+ -``` - -For non-Material-UI components, use the `component` prop. - -```diff -- -- -- -+Save -``` - -## API - -```jsx -import Box from '@material-ui/core/Box'; -``` - -| Name | Type | Default | Description | -|:---------------------------------------- |:----------------------------------------------------------------------------------------------------------------------------- |:--------------------------------------- |:--------------------------------------------- | -| children | node
 | | ボックスレンダー関数またはノード。 | -| component | union: string |
 func |
 object
 | 'div' | ルートノードに使用されるコンポーネント。 DOM要素またはコンポーネントを使用する文字列。 | -| sx | object | {} | すべてのシステムプロパティと有効な CSS プロパティを受け入れます。 | - -## System props - -As a CSS utility component, the `Box` also supports all [`system`](/system/properties/) properties. You can use them as prop directly on the component. For instance, a margin-top: - -```jsx - -``` diff --git a/docs/src/pages/components/box/box-ru.md b/docs/src/pages/components/box/box-ru.md deleted file mode 100644 index 98697743b40267..00000000000000 --- a/docs/src/pages/components/box/box-ru.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Компонент React Box -githubLabel: 'component: Box' ---- - -# Box - -

Box компонент используется как обертка компонента для большинства используемых CSS свойств.

- -The Box component packages [all the style functions](/system/basics/#all-inclusive) that are exposed in `@material-ui/system`. - -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## Пример - -[The palette](/system/palette/) style function. - -## The `sx` prop - -All system properties are available via the [`sx` prop](/system/basics/#the-sx-prop). In addition, the `sx` prop allows you to specify any other CSS rules you may need. Вот пример того, как вы можете использовать его: - -{{"demo": "pages/components/box/BoxSx.js", "defaultCodeOpen": true }} - -## Переопределение Material-UI компонентов - -Box компонент оборачивает ваш компонент. Он создает новый DOM элемент: `
` по умолчанию, который можно изменить свойством `component`. Например если вы хотите использовать`` взамен: - -{{"demo": "pages/components/box/BoxComponent.js", "defaultCodeOpen": true }} - -Это работает превосходно когда изменения могут быть изолированы в новый DOM элемент. Для сущности, вы можете изменить margin(внешний отступ) таким образом. - -Тем не менее, иногда вам нужно ориентироваться на базовый элемент DOM. As an example, you may want to change the border of the Button. Этот компонент определяет свои собственные стили. Наследование CSS не помогает. To workaround the problem, you can use the [`sx`](/system/basics/#the-sx-prop) prop directly on the child if it is a Material-UI component. - -```diff -- -- -- -+ -``` - -For non-Material-UI components, use the `component` prop. - -```diff -- -- -- -+Save -``` - -## API - -```jsx -import Box from '@material-ui/core/Box'; -``` - -| Имя | Тип | По-умолчанию | Описание | -|:---------------------------------------- |:----------------------------------------------------------------------------------------------------------------------------- |:--------------------------------------- |:------------------------------------------------------------------------------------------ | -| children | node
 | | Box render function or node. | -| component | union: string |
 func |
 object
 | 'div' | The component used for the root node. Either a string to use a DOM element or a component. | -| sx | object | {} | Принимает все системные свойства, а также все допустимые CSS-свойства. | - -## System props - -As a CSS utility component, the `Box` also supports all [`system`](/system/properties/) properties. You can use them as prop directly on the component. For instance, a margin-top: - -```jsx - -``` diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-de.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-de.md deleted file mode 100644 index fb8e37e5fef11e..00000000000000 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-de.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: React Breadcrumbs Kompontente -components: Breadcrumbs, Link, Typography -githubLabel: 'component: Breadcrumbs' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#breadcrumb' ---- - -# Breadcrumbs - -

Breadcrumbs erlauben es Nutzern, eine Auswahl aus einer Reihe von Werten zu treffen.

- -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Einfache Breadcrumbs - -{{"demo": "pages/components/breadcrumbs/BasicBreadcrumbs.js"}} - -## Active last breadcrumb - -Keep the last breadcrumb interactive. - -{{"demo": "pages/components/breadcrumbs/ActiveLastBreadcrumb.js"}} - -## Benutzerdefiniertes Trennzeichen - -In the following examples, we are using two string separators and an SVG icon. - -{{"demo": "pages/components/breadcrumbs/CustomSeparator.js"}} - -## Breadcrumbs mit Icons - -{{"demo": "pages/components/breadcrumbs/IconBreadcrumbs.js"}} - -## Zusammengeklappte Breadcrumbs - -{{"demo": "pages/components/breadcrumbs/CollapsedBreadcrumbs.js"}} - -## Benutzerdefinierte Breadcrumbs - -Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/how-to-customize/). - -{{"demo": "pages/components/breadcrumbs/CustomizedBreadcrumbs.js"}} - -## Integration mit react-router - -{{"demo": "pages/components/breadcrumbs/RouterBreadcrumbs.js", "bg": true}} - -## Barrierefreiheit - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#breadcrumb) - -Stelle sicher, dass du ein `aria-label` mit einem Beschreibungstext zur `Breadcrumbs`-Komponente hinzufügst. - -Die Barrierefreiheit dieser Komponente setzt voraus: - -- Die Links sind in einer geordneten Liste strukturiert (`
    `-Element). -- Um zu verhindern, dass Screenreader die visuellen Trennzeichen zwischen den Links vorlesen, sind diese durch `aria-hidden` vor ihnen versteckt. -- Ein nav-Element, dass mit einem `aria-label` gelabelt ist, markiert die Struktur als einen Breadcrumb-Pfad und macht sie zu einer Navigations-Landmarke, so dass sie einfach auffindbar ist. diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-es.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-es.md deleted file mode 100644 index 42deac147c4a3d..00000000000000 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-es.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: React Breadcrumbs component -components: Breadcrumbs, Link, Typography -githubLabel: 'component: Breadcrumbs' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#breadcrumb' ---- - -# Migas de pan - -

    Las Migas de pan permiten a los usuarios realizar selecciones desde un rango de valores.

    - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Migas de pan simples - -{{"demo": "pages/components/breadcrumbs/SimpleBreadcrumbs.js"}} - -## Activa las últimas migas de pan - -Mantenga las últimas migas de pan interactivas. - -{{"demo": "pages/components/breadcrumbs/ActiveLastBreadcrumb.js"}} - -## Separador personalizado - -En los siguientes ejemplos, estamos usando dos cadenas como separadores, y un ícono SVG. - -{{"demo": "pages/components/breadcrumbs/CustomSeparator.js"}} - -## Migas de pan con íconos - -{{"demo": "pages/components/breadcrumbs/IconBreadcrumbs.js"}} - -## Migas de pan colapsadas - -{{"demo": "pages/components/breadcrumbs/CollapsedBreadcrumbs.js"}} - -## Migas de pan personalizadas - -He aquí un ejemplo de personalización del componente. Puedes aprender más sobre esto en la [sección Personalizando Componentes de la documentación](/customization/how-to-customize/). - -{{"demo": "pages/components/breadcrumbs/CustomizedBreadcrumbs.js"}} - -## Integración con react-router - -{{"demo": "pages/components/breadcrumbs/RouterBreadcrumbs.js", "bg": true}} - -## Accesibilidad - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#breadcrumb) - -Asegúrese de agregar una descripción `aria-label` en el componente `Breadcrumbs`. - -La accesibilidad de este componente se basa en: - -- El conjunto de vínculos está estructurado usando una lista ordenada (elemento `
      `). -- Para prevenir el anuncio del lector de pantalla de los separadores visuales entre los vínculos, se ocultan con `aria-hidden`. -- Un elemento de navegación con la etiqueta `aria-label` identifica la estructura como un rastro de migas de pan y la convierte en un punto de referencia para que sea fácil de ubicar. diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-fr.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-fr.md deleted file mode 100644 index 6881111da0ed32..00000000000000 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-fr.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Composant React Breadcrumbs -components: Breadcrumbs, Link, Typography -githubLabel: 'component: Breadcrumbs' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#breadcrumb' ---- - -# Breadcrumbs (Fil d'Ariane) - -

      Le fil d'Ariane permet aux utilisateurs d’effectuer des sélections dans une plage de valeurs.

      - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Fil d'Ariane simple - -{{"demo": "pages/components/breadcrumbs/SimpleBreadcrumbs.js"}} - -## Dernier fil d'Ariane actif - -Garder le dernier fil d'ariane interactif. - -{{"demo": "pages/components/breadcrumbs/ActiveLastBreadcrumb.js"}} - -## Séparateur personnalisé - -Dans les exemples qui suivent, nous utilisons deux chaînes de caractère et une icône SVG comme séparateurs. - -{{"demo": "pages/components/breadcrumbs/CustomSeparator.js"}} - -## Fil d'Ariane avec icônes - -{{"demo": "pages/components/breadcrumbs/IconBreadcrumbs.js"}} - -## Fil d'Ariane contracté - -{{"demo": "pages/components/breadcrumbs/CollapsedBreadcrumbs.js"}} - -## Fil d'Ariane personnalisé - -Voici un exemple de personnalisation du composant. Vous pouvez en savoir plus dans la [page de documentation des overrides](/customization/how-to-customize/). - -{{"demo": "pages/components/breadcrumbs/CustomizedBreadcrumbs.js"}} - -## Intégration avec react-router - -{{"demo": "pages/components/breadcrumbs/RouterBreadcrumbs.js", "bg": true}} - -## Accessibilité - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#breadcrumb) - -Assurez-vous d'ajouter l'attribut `aria-label` sur le composant `Breadcrumbs`. - -L'accessibilité de ce composant repose sur les points suivants : - -- La liste des liens est structurée en utilisant une liste ordonnée (balise `
        `). -- Afin de prévenir la lecture des séparateurs par les lecteurs d'écran, ils sont cachés en utilisant l'attribut `aria-hidden`. -- Un élément HTML `nav` avec l'attribut `aria-label` identifie la structure comme étant un fil d'Ariane et en fait un repère de navigation facile à trouver. diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-ja.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-ja.md deleted file mode 100644 index b60254b33a3cb6..00000000000000 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-ja.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: React Breadcrumbs コンポーネント -components: Breadcrumbs, Link, Typography -githubLabel: 'component: Breadcrumbs' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#breadcrumb' ---- - -# Breadcrumbs (パンくずリスト) - -

        Breadcrumbsを使用すると、値の範囲から選択できます。

        - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## シンプルな breadcurmbs - -{{"demo": "pages/components/breadcrumbs/BasicBreadcrumbs.js"}} - -## 最後のbreadcurmbsをアクティブにする - -最後のbreadcrumbをインタラクティブな状態にします。 - -{{"demo": "pages/components/breadcrumbs/ActiveLastBreadcrumb.js"}} - -## カスタムセパレーター (Custom separator） - -In the following examples, we are using two string separators and an SVG icon. - -{{"demo": "pages/components/breadcrumbs/CustomSeparator.js"}} - -## アイコン付きBreadcrumbs - -{{"demo": "pages/components/breadcrumbs/IconBreadcrumbs.js"}} - -## 折りたたみBreadcrumbs - -{{"demo": "pages/components/breadcrumbs/CollapsedBreadcrumbs.js"}} - -## カスタマイズされた breadcrumbs - -コンポーネントのカスタマイズ例を次に示します。 詳細については、 [こちら](/customization/how-to-customize/)を参照してください。 - -{{"demo": "pages/components/breadcrumbs/CustomizedBreadcrumbs.js"}} - -## react-routerとの統合 - -{{"demo": "pages/components/breadcrumbs/RouterBreadcrumbs.js", "bg": true}} - -## アクセシビリティ - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#breadcrumb) - -`Breadcrumbs`コンポーネントには、必ず`aria-label`を追加してください。 - -このコンポーネントのアクセシビリティは、 - -- リンクのセットは、順序付けられたリスト(`
          ` element) を使用して構造化されます。 -- リンク間のビジュアルセパレータがスクリーンリーダーから通知されないようにするには、 `aria-hidden`を使用します。 -- `aria-label` というラベルが付いたnav要素は、その構造をBreadcrumbs経路として識別し、それをナビゲーション用の目印にして、見つけやすくします。 diff --git a/docs/src/pages/components/breadcrumbs/breadcrumbs-ru.md b/docs/src/pages/components/breadcrumbs/breadcrumbs-ru.md deleted file mode 100644 index 9708199ac48365..00000000000000 --- a/docs/src/pages/components/breadcrumbs/breadcrumbs-ru.md +++ /dev/null @@ -1,58 +0,0 @@ ---- -title: Компонент React Breadcrumbs -components: Breadcrumbs, Link, Typography -githubLabel: 'component: Breadcrumbs' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#breadcrumb' ---- - -# Хлебные крошки - -

          Хлебные крошки позволяют пользователям выбирать из диапазона значений.

          - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Простые хлебные крошки - -{{"demo": "pages/components/breadcrumbs/BasicBreadcrumbs.js"}} - -## Active last breadcrumb - -Keep the last breadcrumb interactive. - -{{"demo": "pages/components/breadcrumbs/ActiveLastBreadcrumb.js"}} - -## Пользовательский разделитель - -In the following examples, we are using two string separators and an SVG icon. - -{{"demo": "pages/components/breadcrumbs/CustomSeparator.js"}} - -## Хлебные крошки с иконками - -{{"demo": "pages/components/breadcrumbs/IconBreadcrumbs.js"}} - -## Collapsed хлебные крошки - -{{"demo": "pages/components/breadcrumbs/CollapsedBreadcrumbs.js"}} - -## Пользовательские хлебные крошки - -Ниже находится пример кастомизации компонента. Вы можете узнать об этом больше [в документации по переопределению свойств](/customization/how-to-customize/). - -{{"demo": "pages/components/breadcrumbs/CustomizedBreadcrumbs.js"}} - -## Интеграция с react-router - -{{"demo": "pages/components/breadcrumbs/RouterBreadcrumbs.js", "bg": true}} - -## Доступность - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#breadcrumb) - -Убедитесь что добавили `aria-label` в описание `Breadcrumbs` компонента. - -Доступность этого компонента зависит от: - -- Набор ссылок структурирован с использованием упорядоченного списка (элемент`
            `). -- Для того, чтобы программа чтения с экрана не объявляла визуальные разделители между ссылками, они скрыты с `aria-hidden`. -- Элемент навигации, помеченный `aria-label` идентифицирует структуру как "след" хлебной крошки и делает ее навигационным ориентиром, чтобы ее можно было легко найти. diff --git a/docs/src/pages/components/button-group/button-group-de.md b/docs/src/pages/components/button-group/button-group-de.md deleted file mode 100644 index 7ba89dcead81e1..00000000000000 --- a/docs/src/pages/components/button-group/button-group-de.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: React ButtonGroup Komponente -components: Button, ButtonGroup -githubLabel: 'component: ButtonGroup' ---- - -# Button group - -

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

            - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Basic button group - -The buttons can be grouped by wrapping them with the `ButtonGroup` component. They need to be immediate children. - -{{"demo": "pages/components/button-group/BasicButtonGroup.js"}} - -## Button variants - -All the standard button variants are supported. - -{{"demo": "pages/components/button-group/VariantButtonGroup.js"}} - -## Größen und Farben - -The `size` and `color` props can be used to control the appearance of the button group. - -{{"demo": "pages/components/button-group/GroupSizesColors.js"}} - -## Vertikale Gruppe - -The button group can be displayed vertically using the `orientation` prop. - -{{"demo": "pages/components/button-group/GroupOrientation.js"}} - -## Split button - -`ButtonGroup` can also be used to create a split button. The dropdown can change the button action (as in this example) or be used to immediately trigger a related action. - -{{"demo": "pages/components/button-group/SplitButton.js"}} - -## Disabled elevation - -Die Erhöhung kann mit der `disableElevation`-Prop deaktiviert werden. - -{{"demo": "pages/components/button-group/DisableElevation.js"}} diff --git a/docs/src/pages/components/button-group/button-group-es.md b/docs/src/pages/components/button-group/button-group-es.md deleted file mode 100644 index d7992869a32991..00000000000000 --- a/docs/src/pages/components/button-group/button-group-es.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Componente ButtonGroup de React -components: Button, ButtonGroup -githubLabel: 'component: ButtonGroup' ---- - -# Grupo de botones - -

            El componente ButtonGroup puede ser usado para agrupar botones relacionados.

            - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Grupos de botones básicos - -The buttons can be grouped by wrapping them with the `ButtonGroup` component. They need to be immediate children. - -{{"demo": "pages/components/button-group/BasicButtonGroup.js"}} - -## Tamaños y colores - -The `size` and `color` props can be used to control the appearance of the ButtonGroup. - -{{"demo": "pages/components/button-group/VariantButtonGroup.js"}} - -## Tamaños y colores - -The ButtonGroup can be displayed veritcally using the `orientation` prop. - -{{"demo": "pages/components/button-group/GroupSizesColors.js"}} - -## Grupo Vertical - -The button group can be displayed vertically using the `orientation` prop. - -{{"demo": "pages/components/button-group/GroupOrientation.js"}} - -## Botón dividido - -`ButtonGroup` también puede ser empleado para crear un botón dividido. El menú desplegable puede cambiar la acción del botón (como en este ejemplo), o ser utilizado para ejecutar inmediatamente una acción relacionada. - -{{"demo": "pages/components/button-group/SplitButton.js"}} - -## Elevación deshabilitada - -Se puede eliminar la elevación con la prop `disableElevation`. - -{{"demo": "pages/components/button-group/DisableElevation.js"}} diff --git a/docs/src/pages/components/button-group/button-group-fr.md b/docs/src/pages/components/button-group/button-group-fr.md deleted file mode 100644 index 9449cb386d6364..00000000000000 --- a/docs/src/pages/components/button-group/button-group-fr.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Groupe de Boutons -components: Button, ButtonGroup -githubLabel: 'component: ButtonGroup' ---- - -# Groupe de boutons - -

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

            - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Groupe de boutons de base - -The buttons can be grouped by wrapping them with the `ButtonGroup` component. They need to be immediate children. - -{{"demo": "pages/components/button-group/BasicButtonGroup.js"}} - -## Tailles et couleurs - -The `size` and `color` props can be used to control the appearance of the ButtonGroup. - -{{"demo": "pages/components/button-group/VariantButtonGroup.js"}} - -## Tailles et couleurs - -The ButtonGroup can be displayed veritcally using the `orientation` prop. - -{{"demo": "pages/components/button-group/GroupSizesColors.js"}} - -## Groupe vertical - -The button group can be displayed vertically using the `orientation` prop. - -{{"demo": "pages/components/button-group/GroupOrientation.js"}} - -## Bouton Split - -`ButtonGroup` peut également être utilisé pour créer un bouton de séparation. La liste déroulante peut modifier l'action du bouton (comme dans cet exemple), ou être utilisée pour déclencher immédiatement une action connexe. - -{{"demo": "pages/components/button-group/SplitButton.js"}} - -## Désactivé élévation - -Vous pouvez supprimer l'élévation avec la propriété `disableElevation`. - -{{"demo": "pages/components/button-group/DisableElevation.js"}} diff --git a/docs/src/pages/components/button-group/button-group-ja.md b/docs/src/pages/components/button-group/button-group-ja.md deleted file mode 100644 index 68aaaa52ce8c14..00000000000000 --- a/docs/src/pages/components/button-group/button-group-ja.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: React ButtonGroup コンポーネント -components: Button, ButtonGroup -githubLabel: 'component: ButtonGroup' ---- - -# Button group - -

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

            - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## 基本的なbutton group - -The buttons can be grouped by wrapping them with the `ButtonGroup` component. They need to be immediate children. - -{{"demo": "pages/components/button-group/BasicButtonGroup.js"}} - -## Button variants - -All the standard button variants are supported. - -{{"demo": "pages/components/button-group/VariantButtonGroup.js"}} - -## サイズと色 - -The `size` and `color` props can be used to control the appearance of the button group. - -{{"demo": "pages/components/button-group/GroupSizesColors.js"}} - -## 縦のグループ - -The button group can be displayed vertically using the `orientation` prop. - -{{"demo": "pages/components/button-group/GroupOrientation.js"}} - -## Split button - -`ButtonGroup` で分割したボタンを作成することも可能です。 この例のようにドロップダウンでボタンの動作を変更することも、関連する動作をすぐに起動するために使用することもできます。 The dropdown can change the button action (as in this example) or be used to immediately trigger a related action. - -{{"demo": "pages/components/button-group/SplitButton.js"}} - -## 高さを無効化する - -`disableElevation`でシャドウを取り除けます。 - -{{"demo": "pages/components/button-group/DisableElevation.js"}} diff --git a/docs/src/pages/components/button-group/button-group-ru.md b/docs/src/pages/components/button-group/button-group-ru.md deleted file mode 100644 index edf60d6530f5ad..00000000000000 --- a/docs/src/pages/components/button-group/button-group-ru.md +++ /dev/null @@ -1,47 +0,0 @@ ---- -title: Компонент React ButtonGroup -components: Button, ButtonGroup -githubLabel: 'component: ButtonGroup' ---- - -# Группа кнопок - -

            Компонент ButtonGroup можно использовать для группирования связанных кнопок.

            - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Базовые свойства кнопок - -The buttons can be grouped by wrapping them with the `ButtonGroup` component. They need to be immediate children. - -{{"demo": "pages/components/button-group/BasicButtonGroup.js"}} - -## Button variants - -All the standard button variants are supported. - -{{"demo": "pages/components/button-group/VariantButtonGroup.js"}} - -## Sizes and colors - -The `size` and `color` props can be used to control the appearance of the button group. - -{{"demo": "pages/components/button-group/GroupSizesColors.js"}} - -## Vertical group - -The button group can be displayed vertically using the `orientation` prop. - -{{"demo": "pages/components/button-group/GroupOrientation.js"}} - -## Split button - -`ButtonGroup` can also be used to create a split button. The dropdown can change the button action (as in this example) or be used to immediately trigger a related action. - -{{"demo": "pages/components/button-group/SplitButton.js"}} - -## Disabled elevation - -Вы можете убрать эффект "всплытия" с помощью пропа `disableElevation`. - -{{"demo": "pages/components/button-group/DisableElevation.js"}} diff --git a/docs/src/pages/components/buttons/buttons-de.md b/docs/src/pages/components/buttons/buttons-de.md deleted file mode 100644 index 486bde41d9d71d..00000000000000 --- a/docs/src/pages/components/buttons/buttons-de.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: React Button component -components: Button, IconButton, ButtonBase -materialDesign: https://material.io/components/buttons -githubLabel: 'component: Button' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#button' ---- - -# Button - -

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

            - -[Buttons](https://material.io/design/components/buttons.html) (Schaltflächen / Knöpfe) geben Aktionen an, die ein Nutzer ausführen kann. Sie werden an verschiedenen Orten in Anwendungen verwendet, zum Beispiel: - -- Dialoge -- Modale Fenster -- Formulare -- Cards -- Toolbars - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Basic Button - -The `Button` comes with three variants: text (default), contained, and outlined. - -{{"demo": "pages/components/buttons/BasicButtons.js"}} - -### Text buttons - -[Text buttons](https://material.io/components/buttons#text-button) are typically used for less-pronounced actions, including those located: in dialogs, in cards. In Karten helfen Text-Buttons dabei, den Karteninhalt zu betonen. - -{{"demo": "pages/components/buttons/TextButtons.js"}} - -### Contained buttons - -[Contained buttons](https://material.io/design/components/buttons.html#contained-button) sind hervorgehoben und unterscheiden sich durch die Verwendung von Höhe und Füllung. Sie enthalten primäre Aktionen einer Anwendung. - -{{"demo": "pages/components/buttons/ContainedButtons.js"}} - -Die Erhöhung kann mit der `disableElevation`-Prop deaktiviert werden. - -{{"demo": "pages/components/buttons/DisableElevation.js"}} - -### Outlined buttons - -[Outlined buttons](https://material.io/components/buttons#outlined-button) are medium-emphasis buttons. They contain actions that are important but aren't the primary action in an app. - -Umrandete Buttons haben eine geringere Betonung als eigenständige Buttons, aber eine stärkere als Text-Buttons. - -{{"demo": "pages/components/buttons/OutlinedButtons.js"}} - -## Handling clicks - -All components accept an `onClick` handler that is applied to the root DOM element. - -```jsx - -``` - -Note that the documentation [avoids](/guides/api/#native-properties) mentioning native props (there are a lot) in the API section of the components. - -## Farbe (Color) - -{{"demo": "pages/components/buttons/ColorButtons.js"}} - -In addition to using the default button colors, you can add custom ones, or disable any you don't need. See the [Adding new colors](/customization/palette/#adding-new-colors) example for more info. - -## Größen - -For larger or smaller buttons, use the `size` prop. - -{{"demo": "pages/components/buttons/ButtonSizes.js"}} - -## Upload-Button - -{{"demo": "pages/components/buttons/UploadButtons.js"}} - -## Buttons mit Symbolen und Beschriftung - -Sometimes you might want to have icons for certain buttons to enhance the UX of the application as we recognize logos more easily than plain text. Wenn Sie beispielsweise eine Schaltfläche zum Löschen haben, können Sie sie mit einem Mülleimer-Symbol kennzeichnen. - -{{"demo": "pages/components/buttons/IconLabelButtons.js"}} - -## Icon button - -Icon Buttons finden Sie häufig in App-Bars und Toolbars. - -Icons eignen sich auch für Umschaltflächen, mit denen eine einzelne Auswahl ausgewählt oder die Auswahl auf z. B. das Hinzufügen oder Entfernen eines Sterns zu einem Element. - -{{"demo": "pages/components/buttons/IconButtons.js"}} - -### Größen - -For larger or smaller icon buttons, use the `size` prop. - -{{"demo": "pages/components/buttons/IconButtonSizes.js"}} - -## Benutzerdefinierte Buttons - -Hier einige Beispiele zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/how-to-customize/). - -{{"demo": "pages/components/buttons/CustomizedButtons.js", "defaultCodeOpen": false}} - -🎨 Wenn Sie nach Inspiration suchen, sehen sie sich [MUI Treasury's Anpassungs-Beispiele](https://mui-treasury.com/styles/button) an. - -## Komplexe Buttons - -The loading buttons can show loading state and disable interactions. - -{{"demo": "pages/components/buttons/LoadingButtons.js"}} - -Hier ist ein [Integrationsbeispiel mit react-router](/guides/composition/#button). - -{{"demo": "pages/components/buttons/LoadingButtonsTransition.js"}} - -## Complex buttons - -Die Text Buttons, die Contained Buttons, die Floatin Action Buttons und die Icon Buttons basieren auf derselben Komponente: der `ButtonBase`. You can take advantage of this lower-level component to build custom interactions. - -{{"demo": "pages/components/buttons/ButtonBase.js"}} - -## Drittanbieter-Routing Bibliothek - -One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. Ein häufig gebrauchtes Feature ist das Wechseln zu einer anderen Seite als Button-Aktion. Here is a [more detailed guide](/guides/routing/#button). - -## Einschränkungen - -### Cursor nicht erlaubt - -The ButtonBase component sets `pointer-events: none;` on disabled buttons, which prevents the appearance of a disabled cursor. - -If you wish to use `not-allowed`, you have two options: - -1. **Nur CSS**. You can remove the pointer-events style on the disabled state of the ` - -``` - -This has the advantage of supporting any element, for instance, a link `` element. diff --git a/docs/src/pages/components/buttons/buttons-es.md b/docs/src/pages/components/buttons/buttons-es.md deleted file mode 100644 index e9933025c8b0e4..00000000000000 --- a/docs/src/pages/components/buttons/buttons-es.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: React Button component -components: Button, IconButton, ButtonBase -materialDesign: https://material.io/components/buttons -githubLabel: 'component: Button' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#button' ---- - -# Button (Botón) - -

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

            - -[Los botones](https://material.io/design/components/buttons.html) comunican acciones que los usuarios pueden realizar. Usualmente están ubicados dentro de tu interfaz, en lugares como: - -- Diálogos -- Ventanas modal -- Formularios -- Tarjetas -- Barras de herramientas - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Botones Complejos - -The `Button` comes with three variants: text (default), contained, and outlined. - -{{"demo": "pages/components/buttons/BasicButtons.js"}} - -### Text buttons - -[Text buttons](https://material.io/components/buttons#text-button) are typically used for less-pronounced actions, including those located: in dialogs, in cards. En las tarjetas, los botones de texto ayudan a mantener un énfasis en el contenido de la tarjeta. - -{{"demo": "pages/components/buttons/TextButtons.js"}} - -### Contained buttons - -Los [Botones contenidos](https://material.io/design/components/buttons.html#contained-button) son de alto énfasis, distinguidos por el uso de elevación y relleno. Contienen acciones que son primarias para la aplicación. - -{{"demo": "pages/components/buttons/ContainedButtons.js"}} - -Se puede eliminar la elevación con la prop `disableElevation`. - -{{"demo": "pages/components/buttons/DisableElevation.js"}} - -### Outlined buttons - -[Botones con contorno (outlined)](https://material.io/design/components/buttons.html#outlined-button) son de énfasis medio. They contain actions that are important, but aren't the primary action in an app. - -Los botones delineados también son una alternativa de menos énfasis que los botones contenidos, o de mayor énfasis que los botones de texto. - -{{"demo": "pages/components/buttons/OutlinedButtons.js"}} - -## Controlador del click - -Todos los componentes aceptan un controlador `onClick` el cual se aplica al elemento raíz en el DOM. - -```jsx - -``` - -Ten en cuenta que la documentación [evita](/guides/api/#native-properties) mencionar las propiedades nativas (existen varias) en la sección API de los componentes. - -## Color - -Botones más grandes o más pequeños? Usa la propiedad `size`. - -In addition to using the default button colors, you can add custom ones, or disable any you don't need. See the [Adding new colors](/customization/palette/#adding-new-colors) example for more info. - -## Tamaños - -For larger or smaller buttons, use the `size` prop. - -{{"demo": "pages/components/buttons/ButtonSizes.js"}} - -## Botón de subida - -{{"demo": "pages/components/buttons/UploadButtons.js"}} - -## Botones con iconos y títulos - -Sometimes you might want to have icons for certain buttons to enhance the UX of the application as we recognize logos more easily than plain text. Por ejemplo, si se crea un botón para borrar se le puede poner un icono de papelera. - -{{"demo": "pages/components/buttons/IconLabelButtons.js"}} - -## Icon button - -Los botones de iconos suelen encontrarse en las barras de aplicaciones y las barras de herramientas. - -Los iconos son también apropiados para botones toggle que permiten marcar o desmarcar una sola opción, tal como poner o quitar una estrella de un elemento. - -{{"demo": "pages/components/buttons/IconButtons.js"}} - -### Tamaños - -For larger or smaller icon buttons, use the `size` prop. - -{{"demo": "pages/components/buttons/IconButtonSizes.js"}} - -## Botones Personalizados - -Here are some examples of customizing the component. Puedes aprender más sobre esto en la [sección Personalizando Componentes de la documentación](/customization/how-to-customize/). - -{{"demo": "pages/components/buttons/CustomizedButtons.js", "defaultCodeOpen": false}} - -🎨 Si estás buscando inspiración, puedes mirar [los ejemplos de MUI Treasury](https://mui-treasury.com/styles/button). - -## Botones Personalizados - -The loading buttons can show loading state and disable interactions. - -{{"demo": "pages/components/buttons/LoadingButtons.js"}} - -Toggle the switch to see the transition between the different states. - -{{"demo": "pages/components/buttons/LoadingButtonsTransition.js"}} - -## Complex buttons - -Los Botones de Texto, los Botones Contenidos, los Botones de Acción Flotantes y los Botones con Iconos se construyen sobre el mismo componente: el `ButtonBase`. You can take advantage of this lower-level component to build custom interactions. - -{{"demo": "pages/components/buttons/ButtonBase.js"}} - -## Librería externa de routing - -One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. Un caso de uso común es emplear el botón para iniciar la navegación hacia una nueva página. Here is a [more detailed guide](/guides/routing/#button). - -## Limitaciones - -### Cursor no permitido - -El componente ButtonBase define `pointer-events: none;` en los botones deshabilitados, lo que previene la aparición del cursor desactivado. - -Si deseas usar `not-allowed`, tienes dos opciones: - -1. **Mediante CSS**. Puedes eliminar los estilos del cursor aplicados cuando el elemento `             - -``` - -Este tiene la ventaja de permitir cualquier elemento, por ejemplo un enlace ``.

            diff --git a/docs/src/pages/components/buttons/buttons-fr.md b/docs/src/pages/components/buttons/buttons-fr.md deleted file mode 100644 index a6b3799e47336d..00000000000000 --- a/docs/src/pages/components/buttons/buttons-fr.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Composant React Bouton -components: Button, IconButton, ButtonBase -materialDesign: https://material.io/components/buttons -githubLabel: 'component: Button' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#button' ---- - -# Button - -

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

            - -Les boutons communiquent les actions que les utilisateurs peuvent faire. Ils sont généralement placés à travers votre interface utilisateur, dans des endroits tels que : - -- Dialogues -- Fenêtres modales -- Formulaires -- Cartes -- Barres d'outils - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Basic Button - -The `Button` comes with three variants: text (default), contained, and outlined. - -{{"demo": "pages/components/buttons/BasicButtons.js"}} - -### Boutons textuels - -[Text buttons](https://material.io/components/buttons#text-button) are typically used for less-pronounced actions, including those located: in dialogs, in cards. Dans les cartes, les boutons de texte aident à maintenir l’accent sur le contenu des cartes. - -{{"demo": "pages/components/buttons/TextButtons.js"}} - -### Boutons contenus (appelées "Contained buttons") - -[Les boutons contenus](https://material.io/design/components/buttons.html#contained-button) sont très accentués, ils se distinguent par leur utilisation de l'élévation et du remplissage. Ils contiennent des actions qui sont essentielles à votre application. - -{{"demo": "pages/components/buttons/ContainedButtons.js"}} - -Vous pouvez supprimer l'élévation avec la propriété `disableElevation`. - -{{"demo": "pages/components/buttons/DisableElevation.js"}} - -### Boutons à contours - -[boutons en surbrillance](https://material.io/design/components/buttons.html#outlined-button) sont des boutons à accent moyen. They contain actions that are important, but aren't the primary action in an app. - -Les boutons surbrillance sont également une alternative moins importante que les boutons contenus, ou une alternative plus importante aux boutons de texte. - -{{"demo": "pages/components/buttons/OutlinedButtons.js"}} - -## Gestion des clics - -Tous les composants acceptent un gestionnaire `onClick` qui est appliqué à l'élément DOM racine. - -```jsx - -``` - -Notez que la documentation [évite](/guides/api/#native-properties) de mentionner les props natifs (il y en a beaucoup) dans la section API des composants. - -## Couleur - -{{"demo": "pages/components/buttons/ColorButtons.js"}} - -In addition to using the default button colors, you can add custom ones, or disable any you don't need. See the [Adding new colors](/customization/palette/#adding-new-colors) example for more info. - -## Tailles - -Fancy larger or smaller buttons? Use the `size` property. - -{{"demo": "pages/components/buttons/ButtonSizes.js"}} - -## Bouton de téléchargement - -{{"demo": "pages/components/buttons/UploadButtons.js"}} - -## Boutons avec icônes et libellés - -Parfois vous aimeriez avoir des icônes pour certains boutons afin d'améliorer l'UX de l'application, car nous reconnaissons plus facilement les logos que le texte brut. Par exemple, si vous avez un bouton de suppression, vous pouvez l’étiqueter avec une icône de poubelle. - -{{"demo": "pages/components/buttons/IconLabelButtons.js"}} - -## Boutons avec icône - -Les boutons d'icônes se trouvent généralement dans les barres d'applications et les barres d'outils. - -Les icônes sont également appropriées pour les boutons de bascule qui permettent à un seul choix d'être sélectionné ou désélectionné, comme l'ajout ou la suppression d'une étoile à un objet. - -{{"demo": "pages/components/buttons/IconButtons.js"}} - -### Tailles - -Pour ajuster la taille des boutons, utilisez la propriété `size`. - -{{"demo": "pages/components/buttons/IconButtonSizes.js"}} - -## Boutons personnalisés - -Here are some examples of customizing the component. Vous pouvez en savoir plus dans la [page de documentation des overrides](/customization/how-to-customize/). - -{{"demo": "pages/components/buttons/CustomizedButtons.js", "defaultCodeOpen": false}} - -🎨 Si vous cherchez de l'inspiration, vous pouvez consulter les [exemples de personnalisation de MUI Treasury](https://mui-treasury.com/styles/button). - -## Boutons personnalisés - -Les boutons de chargement peuvent afficher l'état de celui-ci et désactiver les interactions. - -{{"demo": "pages/components/buttons/LoadingButtons.js"}} - -Activer/désactiver le commutateur pour voir la transition entre les différents états. - -{{"demo": "pages/components/buttons/LoadingButtonsTransition.js"}} - -## Boutons complexes - -Les boutons texte, les boutons contained, les bouton d'action flottante et les boutons icône sont tous basés sur le composant `ButtonBase`. Vous pouvez profiter de ce composant de niveau inférieur pour construire des interactions personnalisées. - -{{"demo": "pages/components/buttons/ButtonBase.js"}} - -## Bibliothèque de routage tierce - -One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. Le composant `ButtonBase` fournit la propriété `composante` pour gérer ce cas d'utilisation. Voici un [guide plus détaillé](/guides/routing/#button). - -## Limites - -### Curseur non autorisé - -Le composant ButtonBase définit `pointer-événements : none;` sur les boutons désactivés, ce qui empêche l'apparence d'un curseur désactivé. - -Si vous souhaitez utiliser `non-autorisé`, vous avez deux options : - -1. **CSS uniquement**. Vous pouvez supprimer le style d'événements du pointeur sur l'état désactivé de l'élément `             - -``` - -Ceci a l'avantage de supporter n'importe quel élément, par exemple, un élément de lien ``. diff --git a/docs/src/pages/components/buttons/buttons-ja.md b/docs/src/pages/components/buttons/buttons-ja.md deleted file mode 100644 index d76f8308f78270..00000000000000 --- a/docs/src/pages/components/buttons/buttons-ja.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: React Button コンポーネント -components: Button, IconButton, ButtonBase -materialDesign: https://material.io/components/buttons -githubLabel: 'component: Button' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#button' ---- - -# Button (ボタン) - -

            Buttonを使用すると、ユーザーは1回のタップでアクションを実行したり選択したりできます。

            - -ボタンは、ユーザーが実行できるアクションを伝達します。 これらは通常、UI全体の次のような場所に配置されます。 - -- Dialogs -- Modal window -- Form -- Card -- Toolbar - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Basic Button - -The `Button` comes with three variants: text (default), contained, and outlined. - -{{"demo": "pages/components/buttons/BasicButtons.js"}} - -### Text button - -[Text buttons](https://material.io/components/buttons#text-button) are typically used for less-pronounced actions, including those located: in dialogs, in cards. Cardでは、テキストボタンを使用することでCardの内容に重点を置くことができます。 - -{{"demo": "pages/components/buttons/TextButtons.js"}} - -### Contained button - -[Contained button](https://material.io/components/buttons#contained-button) は高さと塗りつぶしによって区別される、より強調されたボタンです。 アプリ内で強調すべきアクションを含みます。 - -{{"demo": "pages/components/buttons/ContainedButtons.js"}} - -`disableElevation`でシャドウを取り除けます。 - -{{"demo": "pages/components/buttons/DisableElevation.js"}} - -### Outlined button - -[Outlined buttons](https://material.io/components/buttons#outlined-button) are medium-emphasis buttons. They contain actions that are important but aren't the primary action in an app. - -Outlined buttonは、Contained buttonより弱く、 Text buttonよりは強い強調をします。 - -{{"demo": "pages/components/buttons/OutlinedButtons.js"}} - -## Handling clicks - -全てのコンポーネントは `onClick`を受け付けます。これはルートのDOM要素に適用されます。 - -```jsx - -``` - -ドキュメントでは(多すぎるので)ネイティブpropsに関しては [言及していない](/guides/api/#native-properties)ことに注意してください。 - -## カラー - -{{"demo": "pages/components/buttons/ColorButtons.js"}} - -In addition to using the default button colors, you can add custom ones, or disable any you don't need. See the [Adding new colors](/customization/palette/#adding-new-colors) example for more info. - -## サイズ - -For larger or smaller buttons, use the `size` prop. - -{{"demo": "pages/components/buttons/ButtonSizes.js"}} - -## Upload button - -{{"demo": "pages/components/buttons/UploadButtons.js"}} - -## Buttons with icons and label - -ロゴはプレーンテキストよりも認識しやすいため、ボタンにアイコンを追加してアプリケーションのUXを強化したい場合があります。 たとえば、削除ボタンにごみ箱アイコンを付けるような場合です。 たとえば、削除ボタンにごみ箱アイコンを付けるような場合です。 たとえば、削除ボタンにごみ箱アイコンを付けるような場合です。 たとえば、削除ボタンにごみ箱アイコンを付けるような場合です。 たとえば、削除ボタンにごみ箱アイコンを付けるような場合です。 たとえば、削除ボタンにごみ箱アイコンを付けるような場合です。 - -{{"demo": "pages/components/buttons/IconLabelButtons.js"}} - -## Icon button - -アイコンだけのボタンは、App BarやToolbarでよく使われます。 - -アイコンは、アイテムを一つ選択したり、アイテムに星を追加または削除するなど選択/解除できるトグルボタンにも適しています。 - -{{"demo": "pages/components/buttons/IconButtons.js"}} - -### サイズ - -他のサイズのボタンを表示したい場合は、 `size` プロパティを使用します。 - -{{"demo": "pages/components/buttons/IconButtonSizes.js"}} - -## カスタムButton - -コンポーネントのカスタマイズの例を次に示します。 詳細については、 [こちら](/customization/how-to-customize/)を参照してください。 - -{{"demo": "pages/components/buttons/CustomizedButtons.js", "defaultCodeOpen": false}} - -🎨 インスピレーションを求めている場合は、 [MUI Treasury's customization examples](https://mui-treasury.com/styles/button) を確認すると良いでしょう。 - -## ローディングボタン - -ローディングボタンは、読み込み中の状態を表示し、操作を無効にすることができます。 - -{{"demo": "pages/components/buttons/LoadingButtons.js"}} - -状態間の遷移を確認するにはトグルスイッチを切り替えてください。 - -{{"demo": "pages/components/buttons/LoadingButtonsTransition.js"}} - -## 複雑なボタン - -テキストボタン、コンテインボタン、フローティングアクションボタン、アイコンボタンは、同じコンポーネント(`ButtonBase`) を元に作成されています。 この低レベルのコンポーネントを利用して独自のインタラクションを構築できます。 - -{{"demo": "pages/components/buttons/ButtonBase.js"}} - -## サードパーティ製ルーティングライブラリ - -One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. `ButtonBase` コンポーネントはこういった使用法を扱うために`component` プロパティを提供します。 詳細は [こちら](/guides/routing/#button) です。 - -## 制限事項 - -### Cursor not-allowed - -ButtonBaseコンポーネントは無効化時に、 `pointer-events: none;` としています。無効化されたカーソルが出現することを抑制するためです。 - -`not-allowed`を意図的に使用したい場合、２つの選択肢があります。 - -1. **CSS のみ**。 You can remove the pointer-events style on the disabled state of the `             - -``` - -どのような要素でも対応できるメリットがあります。例えば、link `` 要素。 diff --git a/docs/src/pages/components/buttons/buttons-ru.md b/docs/src/pages/components/buttons/buttons-ru.md deleted file mode 100644 index c09f86b41d008d..00000000000000 --- a/docs/src/pages/components/buttons/buttons-ru.md +++ /dev/null @@ -1,159 +0,0 @@ ---- -title: Компонент React Button -components: Button, IconButton, ButtonBase -materialDesign: https://material.io/components/buttons -githubLabel: 'component: Button' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#button' ---- - -# Button - -

            Кнопки позволяют пользователям выполнять действия и делать выбор одним нажатием.

            - -[Кнопки](https://material.io/design/components/buttons.html) обозначают действия, которые могут выполнять пользователи. Они используются в таких местах пользовательского интерфейса, как: - -- Диалоги -- Всплывающие окно -- Формы -- Карточки -- Панели инструментов - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Basic Button - -The `Button` comes with three variants: text (default), contained, and outlined. - -{{"demo": "pages/components/buttons/BasicButtons.js"}} - -### Текстовые кнопки - -[Text buttons](https://material.io/components/buttons#text-button) are typically used for less-pronounced actions, including those located: in dialogs, in cards. В Карточках (Cards) текстовые кнопки помогают сохранить акцент на содержании карточки. - -{{"demo": "pages/components/buttons/TextButtons.js"}} - -### Блочные кнопки - -[Блочные кнопки](https://material.io/design/components/buttons.html#contained-button) имеют высокий акцент, отличаются использованием возвышения и заполнения. Они содержат действия, которые являются основными для вашего приложения. - -{{"demo": "pages/components/buttons/ContainedButtons.js"}} - -Вы можете убрать эффект "всплытия" с помощью пропа `disableElevation`. - -{{"demo": "pages/components/buttons/DisableElevation.js"}} - -### Контурные кнопки - -[Outlined buttons](https://material.io/components/buttons#outlined-button) are medium-emphasis buttons. They contain actions that are important but aren't the primary action in an app. - -Выделенные кнопки также являются альтернативой выделенным кнопкам или могут использоваться как альтернатива текстовым кнопкам. - -{{"demo": "pages/components/buttons/OutlinedButtons.js"}} - -## Handling clicks - -All components accept an `onClick` handler that is applied to the root DOM element. - -```jsx - -``` - -Note that the documentation [avoids](/guides/api/#native-properties) mentioning native props (there are a lot) in the API section of the components. - -## Цвет - -{{"demo": "pages/components/buttons/ColorButtons.js"}} - -In addition to using the default button colors, you can add custom ones, or disable any you don't need. See the [Adding new colors](/customization/palette/#adding-new-colors) example for more info. - -## Размеры - -For larger or smaller buttons, use the `size` prop. - -{{"demo": "pages/components/buttons/ButtonSizes.js"}} - -## Кнопка загрузки файла - -{{"demo": "pages/components/buttons/UploadButtons.js"}} - -## Кнопки с иконками и текстом - -Иногда вам нужно поместить иконку внутри кнопки, чтобы улучшить UX-состовляющую приложения, потому что мы легче распознаем иконки, чем простой текст. Например, если у вас есть кнопка удаления, вы можете пометить ее значком мусорной корзины. - -{{"demo": "pages/components/buttons/IconLabelButtons.js"}} - -## Кнопки с иконками - -Кнопки с иконками обычно находятся на панелях навигации и на панелях инструментов. - -Значки также подходят для кнопок переключения, которые позволяют выбрать элемент или отменить выбор, например, добавление или удаление звезды для элемента. - -{{"demo": "pages/components/buttons/IconButtons.js"}} - -### Размеры - -For larger or smaller icon buttons, use the `size` prop. - -{{"demo": "pages/components/buttons/IconButtonSizes.js"}} - -## Настраиваемые кнопки - -Ниже находятся примеры кастомизации компонента. Вы можете узнать об этом больше [в документации по переопределению свойств](/customization/how-to-customize/). - -{{"demo": "pages/components/buttons/CustomizedButtons.js", "defaultCodeOpen": false}} - -🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/styles/button). - -## Сложные кнопки - -The loading buttons can show loading state and disable interactions. - -{{"demo": "pages/components/buttons/LoadingButtons.js"}} - -Здесь можно ознакомится [с примером использования с react-router](/guides/composition/#button). - -Компонент ButtonBase устанавливает `pointer-events: none;` на отключенных (disabled) кнопках, что отменяет появление disabled-курсора. - -## Complex buttons - -Текстовые кнопки, плавающие кнопки действий, блочные кнопки построены на основе одного и того же компонента: `ButtonBase`. Вы можете воспользоваться этим более низкоуровневым компонентом для создания пользовательских взаимодействий. - -{{"demo": "pages/components/buttons/ButtonBase.js"}} - -## Сторонняя библиотека маршрутизации - -One frequent use case is to perform navigation on the client only, without an HTTP round-trip to the server. Одно из обыденных случаев использования кнопки - это навигация на другую страницу. Here is a [more detailed guide](/guides/routing/#button). - -## Ограничения - -### Cursor not-allowed - -Компонент ButtonBase устанавливает `pointer-events: none;` на отключенных (disabled) кнопках, что отменяет появление disabled-курсора. - -Есть два способа использовать `not-allowed` - -1. **Только CSS** You can remove the pointer-events style on the disabled state of the `             - -``` - -Этот способ работает для всех элементов, в том числе и для ``. diff --git a/docs/src/pages/components/cards/cards-de.md b/docs/src/pages/components/cards/cards-de.md deleted file mode 100644 index b57325b5c9fd5c..00000000000000 --- a/docs/src/pages/components/cards/cards-de.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: React Card component -components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper -githubLabel: 'component: Card' -materialDesign: https://material.io/components/cards ---- - -# Karte (Card) - -

            Karten enthalten Inhalte und Aktionen zu einem bestimmten Thema.

            - -[Karten](https://material.io/design/components/cards.html) sind Oberflächen, auf denen Inhalte und Aktionen zu einem einzelnen Thema angezeigt werden. - -They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Basic card - -Karten können zwar mehrere Aktionen, UI-Steuerelemente und ein Überlaufmenü unterstützen, seien Sie zurückhaltend und denken Sie daran, dass Karten Eintrittspunkte zu komplexeren und detaillierteren Informationen sind. - -{{"demo": "pages/components/cards/BasicCard.js", "bg": true}} - -### Outlined Card - -Set `variant="outlined"` to render an outlined card. - -{{"demo": "pages/components/cards/OutlinedCard.js", "bg": true}} - -## Komplexe Interaktion - -Auf dem Desktop können Karteninhalte erweitert werden. (Click the downward chevron to view the recipe.) - -{{"demo": "pages/components/cards/RecipeReviewCard.js", "bg": true}} - -## Medien - -Beispiel für eine Karte, die ein Bild verwendet, um den Inhalt zu verstärken. - -{{"demo": "pages/components/cards/MediaCard.js", "bg": true}} - -Standardmäßig verwenden wir die Kombination aus einem `
            `-Element und einem *Hintergrundbild*, um das Medium anzuzeigen. In manchen Situationen kann es problematisch sein. Sie möchten beispielsweise ein Video oder ein responsives Bild anzeigen. Verwenden Sie für diese Anwendungsfälle die Eigenschaft `component`: - -{{"demo": "pages/components/cards/ImgMediaCard.js", "bg": true}} - -> ⚠️ When `component="img"`, CardMedia relies on `object-fit` for centering the image. It's not supported by IE11. - -## Primary action - -Often a card allow users to interact with the entirety of its surface to trigger its main action, be it an expansion, a link to another screen or some other behavior. The action area of the card can be specified by wrapping its contents in a `CardActionArea` component. - -{{"demo": "pages/components/cards/ActionAreaCard.js", "bg": true}} - -A card can also offer supplemental actions which should stand detached from the main action area in order to avoid event overlap. - -{{"demo": "pages/components/cards/MultiActionAreaCard.js", "bg": true}} - -## Steuerelemente der Benutzeroberfläche - -Ergänzende Aktionen innerhalb der Karte werden explizit mit Symbolen, Text und UI-Steuerelementen aufgerufen, die sich normalerweise unten auf der Karte befinden. - -Hier ist ein Beispiel für eine Mediensteuerungskarte. - -{{"demo": "pages/components/cards/MediaControlCard.js", "bg": true}} - -## Individuelle Anpassung - -🎨 Wenn Sie nach Inspiration suchen, sehen sie sich [MUI Treasury's Anpassungs-Beispiele](https://mui-treasury.com/components/card) an. diff --git a/docs/src/pages/components/cards/cards-es.md b/docs/src/pages/components/cards/cards-es.md deleted file mode 100644 index f20ece50c09316..00000000000000 --- a/docs/src/pages/components/cards/cards-es.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: React Card component -components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper -githubLabel: 'component: Card' -materialDesign: https://material.io/components/cards ---- - -# Card (tarjeta) - -

            Las tarjetas contienen información y acciones sobre un tema.

            - -Las [Tarjetas](https://material.io/design/components/cards.html) son superficies que muestran contenido y acciones sobre un tema particular. - -Deberían ser fáciles de visualizar sus acciones e información relevante. Los elementos como textos e imágenes deberían ubicarse de forma que indiquen jerarquía. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Tarjeta simple - -Aunque las tarjetas pueden permitir múltiples acciones, controles de la interfaz y varios menús, debemos usarlas con precaución ya que son puntos de ingreso a información mas detallada. - -{{"demo": "pages/components/cards/SimpleCard.js", "bg": true}} - -### Tarjeta con bordes - -Usa `variant="outlined"` para mostrar una tarjeta con bordes. - -{{"demo": "pages/components/cards/OutlinedCard.js", "bg": true}} - -## Interacción compleja - -En desktop, el contenido de las tarjetas puede expandirse. (Click the downward chevron to view the recipe.) - -{{"demo": "pages/components/cards/RecipeReviewCard.js", "bg": true}} - -## Multimedia - -Un ejemplo de una tarjeta usando una imagen para reforzar contenido. - -{{"demo": "pages/components/cards/MediaCard.js", "bg": true}} - -Por defecto usamos una combinacion de un `
            ` y una *imagen de fondo* para mostrar contenido multimedia. Esto puede ser problemático en ciertas situaciones. Por ejemplo, tal vez queremos mostrar un vídeo o una imagen responsiva. En estos casos podemos usar la propiedad `component`: - -{{"demo": "pages/components/cards/ImgMediaCard.js", "bg": true}} - -> ⚠ Cuando `component="img"`, CardMedia depende de `object-fit` para centrar la imagen. It's not supported by IE11. - -## Primary action - -Often a card allow users to interact with the entirety of its surface to trigger its main action, be it an expansion, a link to another screen or some other behavior. The action area of the card can be specified by wrapping its contents in a `CardActionArea` component. - -{{"demo": "pages/components/cards/ActionAreaCard.js", "bg": true}} - -A card can also offer supplemental actions which should stand detached from the main action area in order to avoid event overlap. - -{{"demo": "pages/components/cards/MultiActionAreaCard.js", "bg": true}} - -## Controles de IU - -Acciones adicionales dentro de las tarjetas son iniciadas explícitamente usando iconos, texto y controles de IU, localizados de manera típica en el pie de la tarjeta. - -Acá un ejemplo de una tarjeta con control multimedia. - -{{"demo": "pages/components/cards/MediaControlCard.js", "bg": true}} - -## Personalización - -🎨 Si estás buscando inspiración, puedes revisar [los ejemplos de MUI Treasury](https://mui-treasury.com/components/card). diff --git a/docs/src/pages/components/cards/cards-fr.md b/docs/src/pages/components/cards/cards-fr.md deleted file mode 100644 index 3f674a83b9b491..00000000000000 --- a/docs/src/pages/components/cards/cards-fr.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Composant React Card -components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper -githubLabel: 'component: Card' -materialDesign: https://material.io/components/cards ---- - -# Card (carte) - -

            Les cartes contiennent du contenu et des actions sur un seul sujet.

            - -Les cartes sont des surfaces qui affichent le contenu et des actions sur un seul sujet. - -Ils devraient être faciles à analyser pour trouver des informations pertinentes et réalisables. Les éléments, comme le texte et les images, doivent être placés sur eux d'une manière qui indique clairement la hiérarchie. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Carte simple - -Bien que les cartes puissent prendre en charge plusieurs actions, des contrôles de l'interface utilisateur et un menu de dépassement, utilisez la retenue et rappelez-vous que les cartes sont des points d'entrée pour des informations plus complexes et détaillées. - -{{"demo": "pages/components/cards/SimpleCard.js", "bg": true}} - -### Cartes encadrées - -Définissez `variant="outlined"` pour afficher une carte encadrée. - -{{"demo": "pages/components/cards/OutlinedCard.js", "bg": true}} - -## Interaction complexe - -Sur le bureau, le contenu de la carte peut s’étendre. (Cliquez sur le chevron vers le bas pour voir la recette.) - -{{"demo": "pages/components/cards/RecipeReviewCard.js", "bg": true}} - -## Média - -Exemple de carte utilisant une image pour renforcer le contenu. - -{{"demo": "pages/components/cards/MediaCard.js", "bg": true}} - -Par défaut, nous utilisons la combinaison d'un élément `
            ` et *background-image* pour afficher le support. Cela peut être problématique dans certaines situations. Par exemple, vous voudrez peut-être afficher une vidéo ou une image sensible. Utilisez la propriété `component` pour ces cas d'utilisation: - -{{"demo": "pages/components/cards/ImgMediaCard.js", "bg": true}} - -> ⚠ Quand `component="img"`, CardMedia s'appuie sur `objet-fit` pour centrer l'image. Ce n'est pas supporté par IE11. - -## Action principale - -Une carte permet souvent aux utilisateurs d'interagir avec l'intégralité de sa surface pour déclencher son action principale, que ce soit une extension, un lien vers un autre écran ou un autre comportement. La zone d'action de la carte peut être spécifiée en enveloppant son contenu dans un composant `CardActionArea`. - -{{"demo": "pages/components/cards/ActionAreaCard.js", "bg": true}} - -Une carte peut également offrir des actions supplémentaires qui devraient être détachées du domaine d'action principal afin d'éviter les chevauchements d'événements. - -{{"demo": "pages/components/cards/MultiActionAreaCard.js", "bg": true}} - -## Contrôles d'UI - -Les actions supplémentaires au sein de la carte sont explicitement appelées à l'aide d'icônes, de texte et de contrôles d'interface utilisateur, généralement placés au bas de la carte. - -Voici un exemple de carte de contrôle multimédia. - -{{"demo": "pages/components/cards/MediaControlCard.js", "bg": true}} - -## Personnalisation - -🎨 Si vous cherchez de l'inspiration, vous pouvez consulter les [exemples de personnalisation de MUI Treasury](https://mui-treasury.com/components/card). diff --git a/docs/src/pages/components/cards/cards-ja.md b/docs/src/pages/components/cards/cards-ja.md deleted file mode 100644 index ea850a0b548508..00000000000000 --- a/docs/src/pages/components/cards/cards-ja.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: React Card コンポーネント -components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper -githubLabel: 'component: Card' -materialDesign: https://material.io/components/cards ---- - -# Card カード - -

            Cardは一つの主題に関してのコンテンツとアクションを含みます。

            - -Card は、1つのトピックに関するコンテンツとアクションを表示する面です。 - -関連する実行可能な情報を容易にスキャンできる必要があります。 テキストや画像などの要素は、階層を明確に示すように配置する必要があります。 - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Basic card - -Cardは複数のアクション、UIコントロール、およびオーバーフローメニューをサポートできますが制限してください。Cardがより複雑で詳細な情報への入り口であることを忘れてはいけません。 - -{{"demo": "pages/components/cards/BasicCard.js", "bg": true}} - -### Outlined Card - -Set `variant="outlined"` to render an outlined card. - -{{"demo": "pages/components/cards/OutlinedCard.js", "bg": true}} - -## 複雑なインタラクション - -デスクトップでは、Cardの内容が展開できる可能性があります。 (レシピを見るには下向きの矢印をクリックしてください。) - -{{"demo": "pages/components/cards/RecipeReviewCard.js", "bg": true}} - -## メディア - -内容を補助する為に画像を用いたCardの例。 - -{{"demo": "pages/components/cards/MediaCard.js", "bg": true}} - -デフォルトでは、メディアを表示する為に `
            ` 要素と *背景画像* の組み合わせを使用します。 しかし、これは例えばビデオやレスポンシブ画像を表​​示したい場合など、状況によっては問題が発生する可能性があります。 そのような場合は `component` プロパティを使用します。 - -{{"demo": "pages/components/cards/ImgMediaCard.js", "bg": true}} - -> `component="img"`の場合、CardMediaはイメージのセンタリングを`object-fit`に依存します。 これはIE11ではサポートされていません。 - -## プライマリーアクション - -よくそのカード全体をクリックすることによって、カードの拡張、別の画面へのリンク、その他の動作などのメインアクションを実行できるようにすることがあります。。 そのようなとき、`CardActionArea` コンポーネントでその内容をラップすることでカードのアクション領域を指定できます。 - -{{"demo": "pages/components/cards/ActionAreaCard.js", "bg": true}} - -カードは、イベントの重複を避けるために、メインアクションエリアから離れている補足アクションを提供することもできます。 - -{{"demo": "pages/components/cards/MultiActionAreaCard.js", "bg": true}} - -## UIコントロール - -Card内の補足的なアクションは、通常はカードの下部に配置されているアイコンとテキスト及びUIコントロールから明示的に呼び出されます。 - -これはメディアコントロール付きCardの例です。 - -{{"demo": "pages/components/cards/MediaControlCard.js", "bg": true}} - -## カスタマイズ - -🎨 インスピレーションを求めている場合は、 [MUI Treasury's customization examples](https://mui-treasury.com/components/card) を確認すると良いでしょう。 diff --git a/docs/src/pages/components/cards/cards-ru.md b/docs/src/pages/components/cards/cards-ru.md deleted file mode 100644 index 2eec62730b8a10..00000000000000 --- a/docs/src/pages/components/cards/cards-ru.md +++ /dev/null @@ -1,68 +0,0 @@ ---- -title: Компонент React Card -components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper -githubLabel: 'component: Card' -materialDesign: https://material.io/components/cards ---- - -# Card (карточка) - -

            Карточки содержат контент и действия, относящиеся к одной теме.

            - -[Карточки](https://material.io/design/components/cards.html) - это поверхности, которые отображают контент и действия относящиеся к одной теме / объекту. - -They should be easy to scan for relevant and actionable information. Elements, like text and images, should be placed on them in a way that clearly indicates hierarchy. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Basic card - -Несмотря на то, что на карточках можно располагать несколько действий, элементы управления и выпадающие меню, будьте сдержаны и помните, что карточки - это входные точки для более сложной и детальной информации. - -{{"demo": "pages/components/cards/BasicCard.js", "bg": true}} - -### Outlined Card - -Set `variant="outlined"` to render an outlined card. - -{{"demo": "pages/components/cards/OutlinedCard.js", "bg": true}} - -## Сложное взаимодействие - -В варианте для десктопа контент карточки может расширяться. (Click the downward chevron to view the recipe.) - -{{"demo": "pages/components/cards/RecipeReviewCard.js", "bg": true}} - -## Медиа - -Пример карточки, использующей изображение, дополняющее контент. - -{{"demo": "pages/components/cards/MediaCard.js", "bg": true}} - -По умолчанию мы используем комбинацию `
            ` элемента и *background image* для отображения медиа. Это может быть проблематично в некоторых ситуациях. Например, вам может понадобиться отобразить видео или адаптивное изображение. Используйте свойство `component` для этих случаев: - -{{"demo": "pages/components/cards/ImgMediaCard.js", "bg": true}} - -> ⚠️ When `component="img"`, CardMedia relies on `object-fit` for centering the image. Не поддерживается в IE11. - -## Primary action - -Часто карта позволяет пользователям взаимодействовать со всей ее поверхностью, чтобы вызвать ее основное действие, будь то расширение, ссылка на другой экран или какое-либо другое поведение. The action area of the card can be specified by wrapping its contents in a `CardActionArea` component. - -{{"demo": "pages/components/cards/ActionAreaCard.js", "bg": true}} - -A card can also offer supplemental actions which should stand detached from the main action area in order to avoid event overlap. - -{{"demo": "pages/components/cards/MultiActionAreaCard.js", "bg": true}} - -## Элементы управления - -Все доступные в пределах карточки дополнительные действия следует явно изображать с помощью иконок, текста и других элементов управления, обычно размещаемых в нижней части карточки. - -Вот пример карточки с элементами управления мультимедиа. - -{{"demo": "pages/components/cards/MediaControlCard.js", "bg": true}} - -## Кастомизация - -🎨 If you are looking for inspiration, you can check [MUI Treasury's customization examples](https://mui-treasury.com/components/card). diff --git a/docs/src/pages/components/checkboxes/checkboxes-de.md b/docs/src/pages/components/checkboxes/checkboxes-de.md deleted file mode 100644 index aa19ff77b73717..00000000000000 --- a/docs/src/pages/components/checkboxes/checkboxes-de.md +++ /dev/null @@ -1,94 +0,0 @@ ---- -title: React Checkbox component -components: Checkbox, FormControl, FormGroup, FormLabel, FormControlLabel -materialDesign: 'https://material.io/components/selection-controls#checkboxes' -githubLabel: 'component: Checkbox' -waiAria: 'https://www.w3.org/TR/wai-aria-practices/#checkbox' ---- - -# Checkbox - -

            Kontrollkästchen ermöglichen dem Benutzer die Auswahl eines oder mehrerer Elemente aus einem Satz.

            - -[Kontrollkästchen ](https://material.io/design/components/selection-controls.html#checkboxes) können eine Option aus- oder anschalten. - -Wenn in einer Liste mehrere Optionen erscheinen, können Sie durch Kontrollkästchen die Abstände erhalten statt Ein- / Aus - Schalter zu verwenden. Wenn Sie nur eine Option haben, vermeiden Sie die Verwendung eines Kontrollkästchens und verwenden Sie stattdessen einen Ein- / Ausschalter. - -{{"component": "modules/components/ComponentLinkHeader.js"}} - -## Basic checkboxes - -{{"demo": "pages/components/checkboxes/Checkboxes.js"}} - -## Kontrollkästchen mit FormGroup - -You can provide a label to the `Checkbox` thanks to the `FormControlLabel` component. - -{{"demo": "pages/components/checkboxes/CheckboxLabels.js"}} - -## Size - -Use the `size` prop or customize the font size of the svg icons to change the size of the checkboxes. - -{{"demo": "pages/components/checkboxes/SizeCheckboxes.js"}} - -## Farbe (Color) - -{{"demo": "pages/components/checkboxes/ColorCheckboxes.js"}} - -## Icon - -{{"demo": "pages/components/checkboxes/IconCheckboxes.js"}} - -## Controlled - -You can control the checkbox with the `checked` and `onChange` props: - -{{"demo": "pages/components/checkboxes/ControlledCheckbox.js"}} - -## Checkbox with FormControlLabel - -A checkbox input can only have two states in a form: checked or unchecked. It either submits its value or doesn't. Visually, there are **three** states a checkbox can be in: checked, unchecked, or indeterminate. - -{{"demo": "pages/components/checkboxes/IndeterminateCheckbox.js"}} - -> ⚠️ When indeterminate is set, the value of the `checked` prop only impacts the form submitted values. It has no accessibility or UX implications. - -## Etikettenplatzierung - -`FormGroup` is a helpful wrapper used to group selection control components. - -{{"demo": "pages/components/checkboxes/CheckboxesGroup.js"}} - -## Etikettenplatzierung - -Sie können die Platzierung des Etiketts ändern: - -{{"demo": "pages/components/checkboxes/FormControlLabelPosition.js"}} - -## Angepasstes Kontrollkästchen - -Hier ist ein Beispiel zum Anpassen der Komponente. Mehr dazu erfahren Sie auf der [Überschreibungsdokumentationsseite](/customization/how-to-customize/). - -{{"demo": "pages/components/checkboxes/CustomizedCheckbox.js"}} - -🎨 Wenn Sie nach Inspiration suchen, sehen sie sich [MUI Treasury's Anpassungs-Beispiele](https://mui-treasury.com/styles/checkbox) an. - -## When to use - -- [Kontrollkästchen vs. Optionsfeld (Radio Buttons)](https://www.nngroup.com/articles/checkboxes-vs-radio-buttons/) -- [Kontrollkästchen vs. Schalter](https://uxplanet.org/checkbox-vs-toggle-switch-7fc6e83f10b8) - -## Barrierefreiheit - -(WAI-ARIA: https://www.w3.org/TR/wai-aria-practices/#checkbox) - -- Alle Formularsteuerelemente sollten Beschriftungen haben. Dazu gehören Optionsfelder, Kontrollkästchen und Schalter. In den meisten Fällen wird dazu das Element `