From 0f3798a0cb5acce71c911b52ec9b26726a77889b Mon Sep 17 00:00:00 2001 From: MUI Bot Date: Wed, 6 Feb 2019 00:08:46 +0000 Subject: [PATCH] New Crowdin translations (#14426) * New translations --- docs/src/modules/components/backers-de.md | 4 +- docs/src/modules/components/backers-es.md | 6 +- docs/src/modules/components/backers-fr.md | 6 +- docs/src/modules/components/backers-pt.md | 5 +- docs/src/modules/components/backers-ru.md | 6 +- docs/src/modules/components/backers-zh.md | 6 +- .../pages/css-in-js/advanced/advanced-de.md | 2 +- .../pages/css-in-js/advanced/advanced-fr.md | 2 +- .../pages/css-in-js/advanced/advanced-ru.md | 8 +- docs/src/pages/css-in-js/api/api-de.md | 8 +- docs/src/pages/css-in-js/api/api-es.md | 8 +- docs/src/pages/css-in-js/api/api-fr.md | 8 +- docs/src/pages/css-in-js/api/api-ja.md | 8 +- docs/src/pages/css-in-js/api/api-pt.md | 8 +- docs/src/pages/css-in-js/api/api-ru.md | 36 +-- docs/src/pages/css-in-js/api/api-zh.md | 14 +- docs/src/pages/css-in-js/basics/basics-de.md | 8 +- docs/src/pages/css-in-js/basics/basics-es.md | 4 +- docs/src/pages/css-in-js/basics/basics-fr.md | 10 +- docs/src/pages/css-in-js/basics/basics-ja.md | 4 +- docs/src/pages/css-in-js/basics/basics-ru.md | 10 +- docs/src/pages/css-in-js/basics/basics-zh.md | 4 +- .../customization/css-in-js/css-in-js-de.md | 28 +- .../customization/css-in-js/css-in-js-fr.md | 24 +- .../customization/css-in-js/css-in-js-pt.md | 6 +- .../customization/css-in-js/css-in-js-ru.md | 34 +- .../customization/css-in-js/css-in-js-zh.md | 38 +-- .../pages/customization/themes/themes-ru.md | 6 +- .../pages/demos/app-bar/BottomAppBar-de.tsx | 154 +++++++++ .../pages/demos/app-bar/BottomAppBar-es.tsx | 154 +++++++++ .../pages/demos/app-bar/BottomAppBar-fr.tsx | 154 +++++++++ .../pages/demos/app-bar/BottomAppBar-ja.tsx | 154 +++++++++ .../pages/demos/app-bar/BottomAppBar-pt.tsx | 154 +++++++++ .../pages/demos/app-bar/BottomAppBar-ru.tsx | 154 +++++++++ .../pages/demos/app-bar/BottomAppBar-zh.tsx | 154 +++++++++ .../pages/demos/app-bar/ButtonAppBar-de.tsx | 49 +++ .../pages/demos/app-bar/ButtonAppBar-es.tsx | 49 +++ .../pages/demos/app-bar/ButtonAppBar-fr.tsx | 49 +++ .../pages/demos/app-bar/ButtonAppBar-ja.tsx | 49 +++ .../pages/demos/app-bar/ButtonAppBar-pt.tsx | 49 +++ .../pages/demos/app-bar/ButtonAppBar-ru.tsx | 49 +++ .../pages/demos/app-bar/ButtonAppBar-zh.tsx | 49 +++ .../pages/demos/app-bar/DenseAppBar-de.tsx | 44 +++ .../pages/demos/app-bar/DenseAppBar-es.tsx | 44 +++ .../pages/demos/app-bar/DenseAppBar-fr.tsx | 44 +++ .../pages/demos/app-bar/DenseAppBar-ja.tsx | 44 +++ .../pages/demos/app-bar/DenseAppBar-pt.tsx | 44 +++ .../pages/demos/app-bar/DenseAppBar-ru.tsx | 44 +++ .../pages/demos/app-bar/DenseAppBar-zh.tsx | 44 +++ .../src/pages/demos/app-bar/MenuAppBar-de.tsx | 117 +++++++ .../src/pages/demos/app-bar/MenuAppBar-es.tsx | 117 +++++++ .../src/pages/demos/app-bar/MenuAppBar-fr.tsx | 117 +++++++ .../src/pages/demos/app-bar/MenuAppBar-ja.tsx | 117 +++++++ .../src/pages/demos/app-bar/MenuAppBar-pt.tsx | 117 +++++++ .../src/pages/demos/app-bar/MenuAppBar-ru.tsx | 117 +++++++ .../src/pages/demos/app-bar/MenuAppBar-zh.tsx | 117 +++++++ .../demos/app-bar/PrimarySearchAppBar-de.tsx | 234 ++++++++++++++ .../demos/app-bar/PrimarySearchAppBar-es.tsx | 234 ++++++++++++++ .../demos/app-bar/PrimarySearchAppBar-fr.tsx | 234 ++++++++++++++ .../demos/app-bar/PrimarySearchAppBar-ja.tsx | 234 ++++++++++++++ .../demos/app-bar/PrimarySearchAppBar-pt.tsx | 234 ++++++++++++++ .../demos/app-bar/PrimarySearchAppBar-ru.tsx | 234 ++++++++++++++ .../demos/app-bar/PrimarySearchAppBar-zh.tsx | 234 ++++++++++++++ .../pages/demos/app-bar/SearchAppBar-de.tsx | 111 +++++++ .../pages/demos/app-bar/SearchAppBar-es.tsx | 111 +++++++ .../pages/demos/app-bar/SearchAppBar-fr.tsx | 111 +++++++ .../pages/demos/app-bar/SearchAppBar-ja.tsx | 111 +++++++ .../pages/demos/app-bar/SearchAppBar-pt.tsx | 111 +++++++ .../pages/demos/app-bar/SearchAppBar-ru.tsx | 111 +++++++ .../pages/demos/app-bar/SearchAppBar-zh.tsx | 111 +++++++ .../pages/demos/app-bar/SimpleAppBar-de.tsx | 36 +++ .../pages/demos/app-bar/SimpleAppBar-es.tsx | 36 +++ .../pages/demos/app-bar/SimpleAppBar-fr.tsx | 36 +++ .../pages/demos/app-bar/SimpleAppBar-ja.tsx | 36 +++ .../pages/demos/app-bar/SimpleAppBar-pt.tsx | 36 +++ .../pages/demos/app-bar/SimpleAppBar-ru.tsx | 36 +++ .../pages/demos/app-bar/SimpleAppBar-zh.tsx | 36 +++ docs/src/pages/demos/app-bar/app-bar-de.md | 6 +- docs/src/pages/demos/app-bar/app-bar-es.md | 4 +- docs/src/pages/demos/app-bar/app-bar-ja.md | 26 +- docs/src/pages/demos/app-bar/app-bar-pt.md | 4 +- docs/src/pages/demos/app-bar/app-bar-ru.md | 4 +- docs/src/pages/demos/app-bar/app-bar-zh.md | 10 +- .../demos/autocomplete/autocomplete-de.md | 14 +- .../demos/autocomplete/autocomplete-es.md | 14 +- .../demos/autocomplete/autocomplete-pt.md | 18 +- .../demos/autocomplete/autocomplete-ru.md | 14 +- docs/src/pages/demos/avatars/avatars-de.md | 18 +- docs/src/pages/demos/avatars/avatars-es.md | 18 +- docs/src/pages/demos/avatars/avatars-ru.md | 18 +- docs/src/pages/demos/badges/badges-de.md | 22 +- docs/src/pages/demos/badges/badges-es.md | 28 +- docs/src/pages/demos/badges/badges-ru.md | 30 +- docs/src/pages/demos/badges/badges-zh.md | 2 +- .../bottom-navigation/bottom-navigation-de.md | 4 +- .../bottom-navigation/bottom-navigation-es.md | 8 +- .../bottom-navigation/bottom-navigation-ja.md | 4 +- .../bottom-navigation/bottom-navigation-pt.md | 2 +- .../bottom-navigation/bottom-navigation-ru.md | 14 +- docs/src/pages/demos/buttons/buttons-de.md | 54 ++-- docs/src/pages/demos/buttons/buttons-es.md | 8 +- docs/src/pages/demos/buttons/buttons-fr.md | 12 +- docs/src/pages/demos/buttons/buttons-ja.md | 30 +- docs/src/pages/demos/buttons/buttons-ru.md | 40 +-- docs/src/pages/demos/buttons/buttons-zh.md | 16 +- docs/src/pages/demos/cards/cards-de.md | 26 +- docs/src/pages/demos/cards/cards-es.md | 12 +- docs/src/pages/demos/cards/cards-ru.md | 26 +- docs/src/pages/demos/chips/chips-es.md | 2 +- docs/src/pages/demos/chips/chips-fr.md | 2 +- docs/src/pages/demos/chips/chips-ru.md | 24 +- docs/src/pages/demos/dialogs/dialogs-de.md | 4 +- docs/src/pages/demos/dialogs/dialogs-es.md | 14 +- docs/src/pages/demos/dialogs/dialogs-fr.md | 20 +- docs/src/pages/demos/dialogs/dialogs-ja.md | 4 +- docs/src/pages/demos/dialogs/dialogs-pt.md | 12 +- docs/src/pages/demos/dialogs/dialogs-ru.md | 82 ++--- docs/src/pages/demos/dialogs/dialogs-zh.md | 4 +- docs/src/pages/demos/dividers/dividers-de.md | 2 +- docs/src/pages/demos/dividers/dividers-es.md | 2 +- docs/src/pages/demos/dividers/dividers-fr.md | 2 +- docs/src/pages/demos/dividers/dividers-ja.md | 2 +- docs/src/pages/demos/dividers/dividers-pt.md | 4 +- docs/src/pages/demos/dividers/dividers-ru.md | 14 +- docs/src/pages/demos/dividers/dividers-zh.md | 2 +- docs/src/pages/demos/drawers/drawers-ru.md | 4 +- docs/src/pages/demos/drawers/drawers-zh.md | 2 +- .../expansion-panels/expansion-panels-de.md | 2 +- .../expansion-panels/expansion-panels-es.md | 2 +- .../expansion-panels/expansion-panels-ru.md | 8 +- .../src/pages/demos/grid-list/grid-list-es.md | 24 +- docs/src/pages/demos/lists/lists-es.md | 40 +-- docs/src/pages/demos/lists/lists-fr.md | 2 +- docs/src/pages/demos/lists/lists-ru.md | 46 +-- docs/src/pages/demos/menus/menus-de.md | 4 +- docs/src/pages/demos/menus/menus-es.md | 8 +- docs/src/pages/demos/menus/menus-fr.md | 30 +- docs/src/pages/demos/menus/menus-ja.md | 4 +- docs/src/pages/demos/menus/menus-pt.md | 4 +- docs/src/pages/demos/menus/menus-ru.md | 14 +- docs/src/pages/demos/menus/menus-zh.md | 2 +- docs/src/pages/demos/paper/paper-zh.md | 2 +- docs/src/pages/demos/pickers/pickers-es.md | 4 +- docs/src/pages/demos/pickers/pickers-fr.md | 2 +- docs/src/pages/demos/pickers/pickers-pt.md | 2 +- docs/src/pages/demos/pickers/pickers-ru.md | 34 +- docs/src/pages/demos/pickers/pickers-zh.md | 4 +- docs/src/pages/demos/progress/progress-de.md | 2 +- docs/src/pages/demos/progress/progress-es.md | 2 +- docs/src/pages/demos/progress/progress-fr.md | 10 +- docs/src/pages/demos/progress/progress-ru.md | 4 +- .../selection-controls-de.md | 2 +- .../selection-controls-es.md | 2 +- .../selection-controls-fr.md | 12 +- .../selection-controls-ru.md | 2 +- docs/src/pages/demos/selects/selects-de.md | 4 +- docs/src/pages/demos/selects/selects-es.md | 8 +- docs/src/pages/demos/selects/selects-fr.md | 8 +- docs/src/pages/demos/selects/selects-pt.md | 2 +- docs/src/pages/demos/selects/selects-ru.md | 8 +- docs/src/pages/demos/selects/selects-zh.md | 2 +- .../src/pages/demos/snackbars/snackbars-de.md | 4 +- .../src/pages/demos/snackbars/snackbars-es.md | 6 +- .../src/pages/demos/snackbars/snackbars-fr.md | 18 +- .../src/pages/demos/snackbars/snackbars-ja.md | 2 +- .../src/pages/demos/snackbars/snackbars-pt.md | 4 +- .../src/pages/demos/snackbars/snackbars-ru.md | 6 +- .../src/pages/demos/snackbars/snackbars-zh.md | 2 +- docs/src/pages/demos/steppers/steppers-de.md | 2 +- docs/src/pages/demos/steppers/steppers-es.md | 2 +- docs/src/pages/demos/steppers/steppers-fr.md | 2 +- docs/src/pages/demos/steppers/steppers-ru.md | 2 +- docs/src/pages/demos/tables/tables-de.md | 42 +-- docs/src/pages/demos/tables/tables-es.md | 66 ++-- docs/src/pages/demos/tables/tables-fr.md | 8 +- docs/src/pages/demos/tables/tables-ru.md | 66 ++-- docs/src/pages/demos/tabs/tabs-de.md | 2 +- docs/src/pages/demos/tabs/tabs-es.md | 4 +- docs/src/pages/demos/tabs/tabs-ru.md | 4 +- .../text-fields/ComposedTextField-de.tsx | 107 +++++++ .../text-fields/ComposedTextField-es.tsx | 107 +++++++ .../text-fields/ComposedTextField-fr.tsx | 107 +++++++ .../text-fields/ComposedTextField-ja.tsx | 107 +++++++ .../text-fields/ComposedTextField-pt.tsx | 107 +++++++ .../text-fields/ComposedTextField-ru.tsx | 107 +++++++ .../text-fields/ComposedTextField-zh.tsx | 107 +++++++ .../demos/text-fields/CustomizedInputs-de.tsx | 168 ++++++++++ .../demos/text-fields/CustomizedInputs-es.tsx | 168 ++++++++++ .../demos/text-fields/CustomizedInputs-fr.tsx | 168 ++++++++++ .../demos/text-fields/CustomizedInputs-ja.tsx | 168 ++++++++++ .../demos/text-fields/CustomizedInputs-pt.tsx | 168 ++++++++++ .../demos/text-fields/CustomizedInputs-ru.tsx | 168 ++++++++++ .../demos/text-fields/CustomizedInputs-zh.tsx | 168 ++++++++++ .../text-fields/FilledInputAdornments-de.tsx | 154 +++++++++ .../text-fields/FilledInputAdornments-es.tsx | 154 +++++++++ .../text-fields/FilledInputAdornments-fr.tsx | 154 +++++++++ .../text-fields/FilledInputAdornments-ja.tsx | 154 +++++++++ .../text-fields/FilledInputAdornments-pt.tsx | 154 +++++++++ .../text-fields/FilledInputAdornments-ru.tsx | 154 +++++++++ .../text-fields/FilledInputAdornments-zh.tsx | 154 +++++++++ .../demos/text-fields/FilledTextFields-de.tsx | 297 ++++++++++++++++++ .../demos/text-fields/FilledTextFields-es.tsx | 297 ++++++++++++++++++ .../demos/text-fields/FilledTextFields-fr.tsx | 297 ++++++++++++++++++ .../demos/text-fields/FilledTextFields-ja.tsx | 297 ++++++++++++++++++ .../demos/text-fields/FilledTextFields-pt.tsx | 297 ++++++++++++++++++ .../demos/text-fields/FilledTextFields-ru.tsx | 297 ++++++++++++++++++ .../demos/text-fields/FilledTextFields-zh.tsx | 297 ++++++++++++++++++ .../demos/text-fields/FormattedInputs-de.tsx | 129 ++++++++ .../demos/text-fields/FormattedInputs-es.tsx | 129 ++++++++ .../demos/text-fields/FormattedInputs-fr.tsx | 129 ++++++++ .../demos/text-fields/FormattedInputs-ja.tsx | 129 ++++++++ .../demos/text-fields/FormattedInputs-pt.tsx | 129 ++++++++ .../demos/text-fields/FormattedInputs-ru.tsx | 129 ++++++++ .../demos/text-fields/FormattedInputs-zh.tsx | 129 ++++++++ .../demos/text-fields/InputAdornments-de.tsx | 158 ++++++++++ .../demos/text-fields/InputAdornments-es.tsx | 158 ++++++++++ .../demos/text-fields/InputAdornments-fr.tsx | 158 ++++++++++ .../demos/text-fields/InputAdornments-ja.tsx | 158 ++++++++++ .../demos/text-fields/InputAdornments-pt.tsx | 158 ++++++++++ .../demos/text-fields/InputAdornments-ru.tsx | 158 ++++++++++ .../demos/text-fields/InputAdornments-zh.tsx | 158 ++++++++++ .../demos/text-fields/InputWithIcon-de.tsx | 67 ++++ .../demos/text-fields/InputWithIcon-es.tsx | 67 ++++ .../demos/text-fields/InputWithIcon-fr.tsx | 67 ++++ .../demos/text-fields/InputWithIcon-ja.tsx | 67 ++++ .../demos/text-fields/InputWithIcon-pt.tsx | 67 ++++ .../demos/text-fields/InputWithIcon-ru.tsx | 67 ++++ .../demos/text-fields/InputWithIcon-zh.tsx | 67 ++++ .../src/pages/demos/text-fields/Inputs-de.tsx | 61 ++++ .../src/pages/demos/text-fields/Inputs-es.tsx | 61 ++++ .../src/pages/demos/text-fields/Inputs-fr.tsx | 61 ++++ .../src/pages/demos/text-fields/Inputs-ja.tsx | 61 ++++ .../src/pages/demos/text-fields/Inputs-pt.tsx | 61 ++++ .../src/pages/demos/text-fields/Inputs-ru.tsx | 61 ++++ .../src/pages/demos/text-fields/Inputs-zh.tsx | 61 ++++ .../OutlinedInputAdornments-de.tsx | 154 +++++++++ .../OutlinedInputAdornments-es.tsx | 154 +++++++++ .../OutlinedInputAdornments-fr.tsx | 154 +++++++++ .../OutlinedInputAdornments-ja.tsx | 154 +++++++++ .../OutlinedInputAdornments-pt.tsx | 154 +++++++++ .../OutlinedInputAdornments-ru.tsx | 154 +++++++++ .../OutlinedInputAdornments-zh.tsx | 154 +++++++++ .../text-fields/OutlinedTextFields-de.tsx | 297 ++++++++++++++++++ .../text-fields/OutlinedTextFields-es.tsx | 297 ++++++++++++++++++ .../text-fields/OutlinedTextFields-fr.tsx | 297 ++++++++++++++++++ .../text-fields/OutlinedTextFields-ja.tsx | 297 ++++++++++++++++++ .../text-fields/OutlinedTextFields-pt.tsx | 297 ++++++++++++++++++ .../text-fields/OutlinedTextFields-ru.tsx | 297 ++++++++++++++++++ .../text-fields/OutlinedTextFields-zh.tsx | 297 ++++++++++++++++++ .../demos/text-fields/TextFieldMargins-de.tsx | 57 ++++ .../demos/text-fields/TextFieldMargins-es.tsx | 57 ++++ .../demos/text-fields/TextFieldMargins-fr.tsx | 57 ++++ .../demos/text-fields/TextFieldMargins-ja.tsx | 57 ++++ .../demos/text-fields/TextFieldMargins-pt.tsx | 57 ++++ .../demos/text-fields/TextFieldMargins-ru.tsx | 57 ++++ .../demos/text-fields/TextFieldMargins-zh.tsx | 57 ++++ .../pages/demos/text-fields/TextFields-de.tsx | 266 ++++++++++++++++ .../pages/demos/text-fields/TextFields-es.tsx | 266 ++++++++++++++++ .../pages/demos/text-fields/TextFields-fr.tsx | 266 ++++++++++++++++ .../pages/demos/text-fields/TextFields-ja.tsx | 266 ++++++++++++++++ .../pages/demos/text-fields/TextFields-pt.tsx | 266 ++++++++++++++++ .../pages/demos/text-fields/TextFields-ru.tsx | 266 ++++++++++++++++ .../pages/demos/text-fields/TextFields-zh.tsx | 266 ++++++++++++++++ .../pages/demos/text-fields/text-fields-de.md | 8 +- .../pages/demos/text-fields/text-fields-es.md | 88 +++--- .../pages/demos/text-fields/text-fields-fr.md | 36 +-- .../pages/demos/text-fields/text-fields-pt.md | 48 +-- .../pages/demos/text-fields/text-fields-ru.md | 74 ++--- .../pages/demos/text-fields/text-fields-zh.md | 6 +- docs/src/pages/demos/tooltips/tooltips-de.md | 2 +- docs/src/pages/demos/tooltips/tooltips-es.md | 2 +- docs/src/pages/demos/tooltips/tooltips-ru.md | 28 +- .../discover-more/community/community-es.md | 10 +- .../related-projects/related-projects-es.md | 4 +- .../related-projects/related-projects-ru.md | 4 +- .../discover-more/showcase/showcase-de.md | 2 +- .../discover-more/showcase/showcase-es.md | 2 +- .../discover-more/showcase/showcase-fr.md | 2 +- .../discover-more/showcase/showcase-ja.md | 2 +- .../discover-more/showcase/showcase-pt.md | 2 +- .../discover-more/showcase/showcase-ru.md | 2 +- .../discover-more/showcase/showcase-zh.md | 2 +- .../comparison/comparison-es.md | 4 +- .../comparison/comparison-ja.md | 18 +- .../comparison/comparison-pt.md | 10 +- .../comparison/comparison-ru.md | 56 ++-- .../comparison/comparison-zh.md | 2 +- .../example-projects/example-projects-ru.md | 18 +- docs/src/pages/getting-started/faq/faq-ru.md | 18 +- .../installation/installation-es.md | 42 +-- .../installation/installation-ja.md | 42 +-- .../installation/installation-pt.md | 4 +- .../installation/installation-ru.md | 38 +-- .../pages/getting-started/learn/learn-ru.md | 4 +- .../supported-platforms-de.md | 2 +- .../supported-platforms-es.md | 2 +- .../supported-platforms-fr.md | 14 +- .../supported-platforms-ja.md | 2 +- .../supported-platforms-pt.md | 2 +- .../supported-platforms-ru.md | 2 +- .../supported-platforms-zh.md | 2 +- .../pages/getting-started/usage/usage-de.md | 4 +- .../pages/getting-started/usage/usage-es.md | 4 +- .../pages/getting-started/usage/usage-fr.md | 22 +- .../pages/getting-started/usage/usage-ja.md | 2 +- .../pages/getting-started/usage/usage-pt.md | 4 +- .../pages/getting-started/usage/usage-ru.md | 6 +- .../pages/getting-started/usage/usage-zh.md | 2 +- docs/src/pages/guides/api/api-fr.md | 2 +- .../guides/composition/composition-de.md | 7 +- .../guides/composition/composition-es.md | 7 +- .../guides/composition/composition-fr.md | 11 +- .../guides/composition/composition-ja.md | 7 +- .../guides/composition/composition-pt.md | 7 +- .../guides/composition/composition-ru.md | 8 +- .../guides/composition/composition-zh.md | 43 ++- docs/src/pages/guides/flow/flow-fr.md | 4 +- docs/src/pages/guides/flow/flow-ja.md | 6 +- .../interoperability/interoperability-de.md | 4 +- .../interoperability/interoperability-fr.md | 4 +- .../interoperability/interoperability-pt.md | 10 +- .../interoperability/interoperability-ru.md | 4 +- .../guides/migration-v0x/migration-v0x-de.md | 2 +- .../guides/migration-v0x/migration-v0x-es.md | 4 +- .../guides/migration-v0x/migration-v0x-ru.md | 4 +- .../minimizing-bundle-size-fr.md | 10 +- .../guides/right-to-left/right-to-left-fr.md | 14 +- .../server-rendering/server-rendering-fr.md | 14 +- .../server-rendering/server-rendering-ru.md | 36 +-- docs/src/pages/guides/testing/testing-ru.md | 12 +- .../pages/guides/typescript/typescript-fr.md | 6 +- .../pages/guides/typescript/typescript-zh.md | 20 +- docs/src/pages/lab/about/about-es.md | 6 +- docs/src/pages/lab/about/about-fr.md | 4 +- docs/src/pages/lab/about/about-ja.md | 6 +- docs/src/pages/lab/about/about-ru.md | 2 +- .../pages/lab/breadcrumbs/breadcrumbs-de.md | 45 +++ .../pages/lab/breadcrumbs/breadcrumbs-es.md | 45 +++ .../pages/lab/breadcrumbs/breadcrumbs-fr.md | 45 +++ .../pages/lab/breadcrumbs/breadcrumbs-ja.md | 45 +++ .../pages/lab/breadcrumbs/breadcrumbs-pt.md | 45 +++ .../pages/lab/breadcrumbs/breadcrumbs-ru.md | 45 +++ .../pages/lab/breadcrumbs/breadcrumbs-zh.md | 45 +++ docs/src/pages/lab/slider/slider-de.md | 6 +- docs/src/pages/lab/slider/slider-es.md | 6 +- docs/src/pages/lab/slider/slider-fr.md | 6 +- docs/src/pages/lab/slider/slider-ja.md | 6 +- docs/src/pages/lab/slider/slider-pt.md | 6 +- docs/src/pages/lab/slider/slider-ru.md | 6 +- docs/src/pages/lab/slider/slider-zh.md | 6 +- docs/src/pages/layout/basics/basics-fr.md | 22 +- .../layout/breakpoints/breakpoints-fr.md | 2 +- .../layout/breakpoints/breakpoints-ru.md | 10 +- .../layout/breakpoints/breakpoints-zh.md | 2 +- docs/src/pages/layout/grid/grid-fr.md | 20 +- docs/src/pages/layout/grid/grid-ru.md | 76 ++--- docs/src/pages/layout/hidden/hidden-fr.md | 2 +- docs/src/pages/layout/hidden/hidden-ru.md | 40 +-- .../use-media-query/use-media-query-de.md | 2 +- .../use-media-query/use-media-query-es.md | 2 +- .../use-media-query/use-media-query-fr.md | 2 +- .../use-media-query/use-media-query-ja.md | 2 +- .../use-media-query/use-media-query-pt.md | 2 +- .../use-media-query/use-media-query-ru.md | 26 +- .../use-media-query/use-media-query-zh.md | 12 +- docs/src/pages/style/color/color-ru.md | 2 +- .../style/css-baseline/css-baseline-de.md | 6 +- .../style/css-baseline/css-baseline-es.md | 2 +- .../style/css-baseline/css-baseline-pt.md | 4 +- docs/src/pages/style/icons/icons-es.md | 54 ++-- docs/src/pages/style/icons/icons-fr.md | 6 +- docs/src/pages/style/icons/icons-ja.md | 4 +- docs/src/pages/style/icons/icons-ru.md | 4 +- docs/src/pages/style/links/links-de.md | 4 +- docs/src/pages/style/links/links-es.md | 4 +- docs/src/pages/style/links/links-fr.md | 6 +- docs/src/pages/style/links/links-pt.md | 2 +- docs/src/pages/style/links/links-ru.md | 4 +- docs/src/pages/style/links/links-zh.md | 6 +- .../pages/style/typography/typography-fr.md | 2 +- docs/src/pages/system/basics/basics-es.md | 2 +- docs/src/pages/system/basics/basics-fr.md | 4 +- docs/src/pages/system/basics/basics-ja.md | 2 +- docs/src/pages/system/basics/basics-ru.md | 8 +- docs/src/pages/system/basics/basics-zh.md | 2 +- docs/src/pages/system/display/display-ru.md | 2 +- docs/src/pages/system/flexbox/flexbox-de.md | 8 +- docs/src/pages/system/spacing/spacing-fr.md | 2 +- docs/src/pages/system/spacing/spacing-ru.md | 2 +- docs/src/pages/utils/modal/modal-de.md | 8 +- docs/src/pages/utils/modal/modal-es.md | 8 +- docs/src/pages/utils/modal/modal-fr.md | 8 +- docs/src/pages/utils/modal/modal-ja.md | 8 +- docs/src/pages/utils/modal/modal-pt.md | 24 +- docs/src/pages/utils/modal/modal-ru.md | 10 +- docs/src/pages/utils/modal/modal-zh.md | 14 +- docs/src/pages/utils/popover/popover-es.md | 2 +- docs/src/pages/utils/popover/popover-fr.md | 2 +- docs/src/pages/utils/popover/popover-ru.md | 2 +- docs/src/pages/utils/popper/popper-es.md | 2 +- docs/src/pages/utils/popper/popper-fr.md | 2 +- docs/src/pages/utils/popper/popper-ru.md | 2 +- docs/src/pages/utils/portal/portal-ru.md | 6 +- .../pages/utils/transitions/transitions-zh.md | 6 +- docs/src/pages/versions/versions-es.md | 76 ++--- docs/src/pages/versions/versions-fr.md | 14 +- docs/translations/translations-de.json | 2 +- docs/translations/translations-es.json | 10 +- docs/translations/translations-fr.json | 8 +- docs/translations/translations-ja.json | 4 +- docs/translations/translations-pt.json | 6 +- docs/translations/translations-ru.json | 8 +- docs/translations/translations-zh.json | 14 +- 413 files changed, 20506 insertions(+), 1562 deletions(-) create mode 100644 docs/src/pages/demos/app-bar/BottomAppBar-de.tsx create mode 100644 docs/src/pages/demos/app-bar/BottomAppBar-es.tsx create mode 100644 docs/src/pages/demos/app-bar/BottomAppBar-fr.tsx create mode 100644 docs/src/pages/demos/app-bar/BottomAppBar-ja.tsx create mode 100644 docs/src/pages/demos/app-bar/BottomAppBar-pt.tsx create mode 100644 docs/src/pages/demos/app-bar/BottomAppBar-ru.tsx create mode 100644 docs/src/pages/demos/app-bar/BottomAppBar-zh.tsx create mode 100644 docs/src/pages/demos/app-bar/ButtonAppBar-de.tsx create mode 100644 docs/src/pages/demos/app-bar/ButtonAppBar-es.tsx create mode 100644 docs/src/pages/demos/app-bar/ButtonAppBar-fr.tsx create mode 100644 docs/src/pages/demos/app-bar/ButtonAppBar-ja.tsx create mode 100644 docs/src/pages/demos/app-bar/ButtonAppBar-pt.tsx create mode 100644 docs/src/pages/demos/app-bar/ButtonAppBar-ru.tsx create mode 100644 docs/src/pages/demos/app-bar/ButtonAppBar-zh.tsx create mode 100644 docs/src/pages/demos/app-bar/DenseAppBar-de.tsx create mode 100644 docs/src/pages/demos/app-bar/DenseAppBar-es.tsx create mode 100644 docs/src/pages/demos/app-bar/DenseAppBar-fr.tsx create mode 100644 docs/src/pages/demos/app-bar/DenseAppBar-ja.tsx create mode 100644 docs/src/pages/demos/app-bar/DenseAppBar-pt.tsx create mode 100644 docs/src/pages/demos/app-bar/DenseAppBar-ru.tsx create mode 100644 docs/src/pages/demos/app-bar/DenseAppBar-zh.tsx create mode 100644 docs/src/pages/demos/app-bar/MenuAppBar-de.tsx create mode 100644 docs/src/pages/demos/app-bar/MenuAppBar-es.tsx create mode 100644 docs/src/pages/demos/app-bar/MenuAppBar-fr.tsx create mode 100644 docs/src/pages/demos/app-bar/MenuAppBar-ja.tsx create mode 100644 docs/src/pages/demos/app-bar/MenuAppBar-pt.tsx create mode 100644 docs/src/pages/demos/app-bar/MenuAppBar-ru.tsx create mode 100644 docs/src/pages/demos/app-bar/MenuAppBar-zh.tsx create mode 100644 docs/src/pages/demos/app-bar/PrimarySearchAppBar-de.tsx create mode 100644 docs/src/pages/demos/app-bar/PrimarySearchAppBar-es.tsx create mode 100644 docs/src/pages/demos/app-bar/PrimarySearchAppBar-fr.tsx create mode 100644 docs/src/pages/demos/app-bar/PrimarySearchAppBar-ja.tsx create mode 100644 docs/src/pages/demos/app-bar/PrimarySearchAppBar-pt.tsx create mode 100644 docs/src/pages/demos/app-bar/PrimarySearchAppBar-ru.tsx create mode 100644 docs/src/pages/demos/app-bar/PrimarySearchAppBar-zh.tsx create mode 100644 docs/src/pages/demos/app-bar/SearchAppBar-de.tsx create mode 100644 docs/src/pages/demos/app-bar/SearchAppBar-es.tsx create mode 100644 docs/src/pages/demos/app-bar/SearchAppBar-fr.tsx create mode 100644 docs/src/pages/demos/app-bar/SearchAppBar-ja.tsx create mode 100644 docs/src/pages/demos/app-bar/SearchAppBar-pt.tsx create mode 100644 docs/src/pages/demos/app-bar/SearchAppBar-ru.tsx create mode 100644 docs/src/pages/demos/app-bar/SearchAppBar-zh.tsx create mode 100644 docs/src/pages/demos/app-bar/SimpleAppBar-de.tsx create mode 100644 docs/src/pages/demos/app-bar/SimpleAppBar-es.tsx create mode 100644 docs/src/pages/demos/app-bar/SimpleAppBar-fr.tsx create mode 100644 docs/src/pages/demos/app-bar/SimpleAppBar-ja.tsx create mode 100644 docs/src/pages/demos/app-bar/SimpleAppBar-pt.tsx create mode 100644 docs/src/pages/demos/app-bar/SimpleAppBar-ru.tsx create mode 100644 docs/src/pages/demos/app-bar/SimpleAppBar-zh.tsx create mode 100644 docs/src/pages/demos/text-fields/ComposedTextField-de.tsx create mode 100644 docs/src/pages/demos/text-fields/ComposedTextField-es.tsx create mode 100644 docs/src/pages/demos/text-fields/ComposedTextField-fr.tsx create mode 100644 docs/src/pages/demos/text-fields/ComposedTextField-ja.tsx create mode 100644 docs/src/pages/demos/text-fields/ComposedTextField-pt.tsx create mode 100644 docs/src/pages/demos/text-fields/ComposedTextField-ru.tsx create mode 100644 docs/src/pages/demos/text-fields/ComposedTextField-zh.tsx create mode 100644 docs/src/pages/demos/text-fields/CustomizedInputs-de.tsx create mode 100644 docs/src/pages/demos/text-fields/CustomizedInputs-es.tsx create mode 100644 docs/src/pages/demos/text-fields/CustomizedInputs-fr.tsx create mode 100644 docs/src/pages/demos/text-fields/CustomizedInputs-ja.tsx create mode 100644 docs/src/pages/demos/text-fields/CustomizedInputs-pt.tsx create mode 100644 docs/src/pages/demos/text-fields/CustomizedInputs-ru.tsx create mode 100644 docs/src/pages/demos/text-fields/CustomizedInputs-zh.tsx create mode 100644 docs/src/pages/demos/text-fields/FilledInputAdornments-de.tsx create mode 100644 docs/src/pages/demos/text-fields/FilledInputAdornments-es.tsx create mode 100644 docs/src/pages/demos/text-fields/FilledInputAdornments-fr.tsx create mode 100644 docs/src/pages/demos/text-fields/FilledInputAdornments-ja.tsx create mode 100644 docs/src/pages/demos/text-fields/FilledInputAdornments-pt.tsx create mode 100644 docs/src/pages/demos/text-fields/FilledInputAdornments-ru.tsx create mode 100644 docs/src/pages/demos/text-fields/FilledInputAdornments-zh.tsx create mode 100644 docs/src/pages/demos/text-fields/FilledTextFields-de.tsx create mode 100644 docs/src/pages/demos/text-fields/FilledTextFields-es.tsx create mode 100644 docs/src/pages/demos/text-fields/FilledTextFields-fr.tsx create mode 100644 docs/src/pages/demos/text-fields/FilledTextFields-ja.tsx create mode 100644 docs/src/pages/demos/text-fields/FilledTextFields-pt.tsx create mode 100644 docs/src/pages/demos/text-fields/FilledTextFields-ru.tsx create mode 100644 docs/src/pages/demos/text-fields/FilledTextFields-zh.tsx create mode 100644 docs/src/pages/demos/text-fields/FormattedInputs-de.tsx create mode 100644 docs/src/pages/demos/text-fields/FormattedInputs-es.tsx create mode 100644 docs/src/pages/demos/text-fields/FormattedInputs-fr.tsx create mode 100644 docs/src/pages/demos/text-fields/FormattedInputs-ja.tsx create mode 100644 docs/src/pages/demos/text-fields/FormattedInputs-pt.tsx create mode 100644 docs/src/pages/demos/text-fields/FormattedInputs-ru.tsx create mode 100644 docs/src/pages/demos/text-fields/FormattedInputs-zh.tsx create mode 100644 docs/src/pages/demos/text-fields/InputAdornments-de.tsx create mode 100644 docs/src/pages/demos/text-fields/InputAdornments-es.tsx create mode 100644 docs/src/pages/demos/text-fields/InputAdornments-fr.tsx create mode 100644 docs/src/pages/demos/text-fields/InputAdornments-ja.tsx create mode 100644 docs/src/pages/demos/text-fields/InputAdornments-pt.tsx create mode 100644 docs/src/pages/demos/text-fields/InputAdornments-ru.tsx create mode 100644 docs/src/pages/demos/text-fields/InputAdornments-zh.tsx create mode 100644 docs/src/pages/demos/text-fields/InputWithIcon-de.tsx create mode 100644 docs/src/pages/demos/text-fields/InputWithIcon-es.tsx create mode 100644 docs/src/pages/demos/text-fields/InputWithIcon-fr.tsx create mode 100644 docs/src/pages/demos/text-fields/InputWithIcon-ja.tsx create mode 100644 docs/src/pages/demos/text-fields/InputWithIcon-pt.tsx create mode 100644 docs/src/pages/demos/text-fields/InputWithIcon-ru.tsx create mode 100644 docs/src/pages/demos/text-fields/InputWithIcon-zh.tsx create mode 100644 docs/src/pages/demos/text-fields/Inputs-de.tsx create mode 100644 docs/src/pages/demos/text-fields/Inputs-es.tsx create mode 100644 docs/src/pages/demos/text-fields/Inputs-fr.tsx create mode 100644 docs/src/pages/demos/text-fields/Inputs-ja.tsx create mode 100644 docs/src/pages/demos/text-fields/Inputs-pt.tsx create mode 100644 docs/src/pages/demos/text-fields/Inputs-ru.tsx create mode 100644 docs/src/pages/demos/text-fields/Inputs-zh.tsx create mode 100644 docs/src/pages/demos/text-fields/OutlinedInputAdornments-de.tsx create mode 100644 docs/src/pages/demos/text-fields/OutlinedInputAdornments-es.tsx create mode 100644 docs/src/pages/demos/text-fields/OutlinedInputAdornments-fr.tsx create mode 100644 docs/src/pages/demos/text-fields/OutlinedInputAdornments-ja.tsx create mode 100644 docs/src/pages/demos/text-fields/OutlinedInputAdornments-pt.tsx create mode 100644 docs/src/pages/demos/text-fields/OutlinedInputAdornments-ru.tsx create mode 100644 docs/src/pages/demos/text-fields/OutlinedInputAdornments-zh.tsx create mode 100644 docs/src/pages/demos/text-fields/OutlinedTextFields-de.tsx create mode 100644 docs/src/pages/demos/text-fields/OutlinedTextFields-es.tsx create mode 100644 docs/src/pages/demos/text-fields/OutlinedTextFields-fr.tsx create mode 100644 docs/src/pages/demos/text-fields/OutlinedTextFields-ja.tsx create mode 100644 docs/src/pages/demos/text-fields/OutlinedTextFields-pt.tsx create mode 100644 docs/src/pages/demos/text-fields/OutlinedTextFields-ru.tsx create mode 100644 docs/src/pages/demos/text-fields/OutlinedTextFields-zh.tsx create mode 100644 docs/src/pages/demos/text-fields/TextFieldMargins-de.tsx create mode 100644 docs/src/pages/demos/text-fields/TextFieldMargins-es.tsx create mode 100644 docs/src/pages/demos/text-fields/TextFieldMargins-fr.tsx create mode 100644 docs/src/pages/demos/text-fields/TextFieldMargins-ja.tsx create mode 100644 docs/src/pages/demos/text-fields/TextFieldMargins-pt.tsx create mode 100644 docs/src/pages/demos/text-fields/TextFieldMargins-ru.tsx create mode 100644 docs/src/pages/demos/text-fields/TextFieldMargins-zh.tsx create mode 100644 docs/src/pages/demos/text-fields/TextFields-de.tsx create mode 100644 docs/src/pages/demos/text-fields/TextFields-es.tsx create mode 100644 docs/src/pages/demos/text-fields/TextFields-fr.tsx create mode 100644 docs/src/pages/demos/text-fields/TextFields-ja.tsx create mode 100644 docs/src/pages/demos/text-fields/TextFields-pt.tsx create mode 100644 docs/src/pages/demos/text-fields/TextFields-ru.tsx create mode 100644 docs/src/pages/demos/text-fields/TextFields-zh.tsx create mode 100644 docs/src/pages/lab/breadcrumbs/breadcrumbs-de.md create mode 100644 docs/src/pages/lab/breadcrumbs/breadcrumbs-es.md create mode 100644 docs/src/pages/lab/breadcrumbs/breadcrumbs-fr.md create mode 100644 docs/src/pages/lab/breadcrumbs/breadcrumbs-ja.md create mode 100644 docs/src/pages/lab/breadcrumbs/breadcrumbs-pt.md create mode 100644 docs/src/pages/lab/breadcrumbs/breadcrumbs-ru.md create mode 100644 docs/src/pages/lab/breadcrumbs/breadcrumbs-zh.md diff --git a/docs/src/modules/components/backers-de.md b/docs/src/modules/components/backers-de.md index c41a847d76f648..dd5f49d0399e22 100644 --- a/docs/src/modules/components/backers-de.md +++ b/docs/src/modules/components/backers-de.md @@ -1,8 +1,6 @@ ## Supporting Material-UI -Material-UI is an MIT-licensed open source project. -It's an independent project with ongoing development made possible entirely -thanks to the support of these awesome [backers](/discover-more/backers/). +Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development made possible entirely thanks to the support of these awesome [backers](/discover-more/backers/). ### Gold Sponsors diff --git a/docs/src/modules/components/backers-es.md b/docs/src/modules/components/backers-es.md index c41a847d76f648..19a8f9b885beac 100644 --- a/docs/src/modules/components/backers-es.md +++ b/docs/src/modules/components/backers-es.md @@ -1,8 +1,6 @@ ## Supporting Material-UI -Material-UI is an MIT-licensed open source project. -It's an independent project with ongoing development made possible entirely -thanks to the support of these awesome [backers](/discover-more/backers/). +Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development made possible entirely thanks to the support of these awesome [backers](/discover-more/backers/). ### Gold Sponsors @@ -38,4 +36,4 @@ via [OpenCollective](https://opencollective.com/material-ui) ### There is more! -See the full list of [our backers](/discover-more/backers/). +See the full list of [our backers](/discover-more/backers/). \ No newline at end of file diff --git a/docs/src/modules/components/backers-fr.md b/docs/src/modules/components/backers-fr.md index c41a847d76f648..19a8f9b885beac 100644 --- a/docs/src/modules/components/backers-fr.md +++ b/docs/src/modules/components/backers-fr.md @@ -1,8 +1,6 @@ ## Supporting Material-UI -Material-UI is an MIT-licensed open source project. -It's an independent project with ongoing development made possible entirely -thanks to the support of these awesome [backers](/discover-more/backers/). +Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development made possible entirely thanks to the support of these awesome [backers](/discover-more/backers/). ### Gold Sponsors @@ -38,4 +36,4 @@ via [OpenCollective](https://opencollective.com/material-ui) ### There is more! -See the full list of [our backers](/discover-more/backers/). +See the full list of [our backers](/discover-more/backers/). \ No newline at end of file diff --git a/docs/src/modules/components/backers-pt.md b/docs/src/modules/components/backers-pt.md index c41a847d76f648..67807eb27d9f7e 100644 --- a/docs/src/modules/components/backers-pt.md +++ b/docs/src/modules/components/backers-pt.md @@ -1,8 +1,6 @@ ## Supporting Material-UI -Material-UI is an MIT-licensed open source project. -It's an independent project with ongoing development made possible entirely -thanks to the support of these awesome [backers](/discover-more/backers/). +Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development made possible entirely thanks to the support of these awesome [backers](/discover-more/backers/). ### Gold Sponsors @@ -38,4 +36,5 @@ via [OpenCollective](https://opencollective.com/material-ui) ### There is more! +<<<<<<< HEAD See the full list of [our backers](/discover-more/backers/). diff --git a/docs/src/modules/components/backers-ru.md b/docs/src/modules/components/backers-ru.md index c41a847d76f648..19a8f9b885beac 100644 --- a/docs/src/modules/components/backers-ru.md +++ b/docs/src/modules/components/backers-ru.md @@ -1,8 +1,6 @@ ## Supporting Material-UI -Material-UI is an MIT-licensed open source project. -It's an independent project with ongoing development made possible entirely -thanks to the support of these awesome [backers](/discover-more/backers/). +Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development made possible entirely thanks to the support of these awesome [backers](/discover-more/backers/). ### Gold Sponsors @@ -38,4 +36,4 @@ via [OpenCollective](https://opencollective.com/material-ui) ### There is more! -See the full list of [our backers](/discover-more/backers/). +See the full list of [our backers](/discover-more/backers/). \ No newline at end of file diff --git a/docs/src/modules/components/backers-zh.md b/docs/src/modules/components/backers-zh.md index c41a847d76f648..76cd4f0d2c6dbd 100644 --- a/docs/src/modules/components/backers-zh.md +++ b/docs/src/modules/components/backers-zh.md @@ -1,8 +1,6 @@ ## Supporting Material-UI -Material-UI is an MIT-licensed open source project. -It's an independent project with ongoing development made possible entirely -thanks to the support of these awesome [backers](/discover-more/backers/). +Material-UI is an MIT-licensed open source project. It's an independent project with ongoing development made possible entirely thanks to the support of these awesome [backers](/discover-more/backers/). ### Gold Sponsors @@ -12,7 +10,7 @@ via [Patreon](https://www.patreon.com/oliviertassinari)

- creative-tim + creative-tim bitsrc diff --git a/docs/src/pages/css-in-js/advanced/advanced-de.md b/docs/src/pages/css-in-js/advanced/advanced-de.md index 98d0a3d9619888..57f86ae3df2e7f 100644 --- a/docs/src/pages/css-in-js/advanced/advanced-de.md +++ b/docs/src/pages/css-in-js/advanced/advanced-de.md @@ -235,7 +235,7 @@ const className = `${productionPrefix}-${identifier}`; If you don't like this default behavior, you can change it. JSS relies on the concept of [class name generator](https://cssinjs.org/jss-api/#generate-your-class-names). -## Global CSS +## Globales CSS We provide an option to make the class names **deterministic** with the [`dangerouslyUseGlobalCSS`](/css-in-js/api/#creategenerateclassname-options-class-name-generator) option. When turned on, the class names will look like this: diff --git a/docs/src/pages/css-in-js/advanced/advanced-fr.md b/docs/src/pages/css-in-js/advanced/advanced-fr.md index 98d0a3d9619888..37c03e5767d306 100644 --- a/docs/src/pages/css-in-js/advanced/advanced-fr.md +++ b/docs/src/pages/css-in-js/advanced/advanced-fr.md @@ -235,7 +235,7 @@ const className = `${productionPrefix}-${identifier}`; If you don't like this default behavior, you can change it. JSS relies on the concept of [class name generator](https://cssinjs.org/jss-api/#generate-your-class-names). -## Global CSS +## CSS global We provide an option to make the class names **deterministic** with the [`dangerouslyUseGlobalCSS`](/css-in-js/api/#creategenerateclassname-options-class-name-generator) option. When turned on, the class names will look like this: diff --git a/docs/src/pages/css-in-js/advanced/advanced-ru.md b/docs/src/pages/css-in-js/advanced/advanced-ru.md index 98d0a3d9619888..48af8e7ba1f27d 100644 --- a/docs/src/pages/css-in-js/advanced/advanced-ru.md +++ b/docs/src/pages/css-in-js/advanced/advanced-ru.md @@ -106,7 +106,7 @@ The CSS injected by Material-UI to style a component has the highest specificity You might, however, also want to override these styles, for example with styled-components. If you are experiencing a CSS injection order issue, JSS [provides a mechanism](https://github.com/cssinjs/jss/blob/master/docs/setup.md#specify-the-dom-insertion-point) to handle this situation. By adjusting the placement of the `insertionPoint` within your HTML head you can [control the order](https://cssinjs.org/jss-api#attach-style-sheets-in-a-specific-order) that the CSS rules are applied to your components. -### HTML comment +### HTML-комментарий The simplest approach is to add an HTML comment that determines where JSS will inject the styles: @@ -134,7 +134,7 @@ function App() { export default App; ``` -### Other HTML element +### Другой HTML-элемент [Create React App](https://github.com/facebook/create-react-app) strips HTML comments when creating the production build. To get around the issue, you can provide a DOM element (other than a comment) as the JSS insertion point. @@ -190,7 +190,7 @@ export default App; ## Server Side Rendering -## Class names +## Имена классов You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The class names are generated by [our class name generator](/css-in-js/api/#creategenerateclassname--options----class-name-generator) Let's take the following style as an example: @@ -235,7 +235,7 @@ const className = `${productionPrefix}-${identifier}`; If you don't like this default behavior, you can change it. JSS relies on the concept of [class name generator](https://cssinjs.org/jss-api/#generate-your-class-names). -## Global CSS +## Глобальный CSS We provide an option to make the class names **deterministic** with the [`dangerouslyUseGlobalCSS`](/css-in-js/api/#creategenerateclassname-options-class-name-generator) option. When turned on, the class names will look like this: diff --git a/docs/src/pages/css-in-js/api/api-de.md b/docs/src/pages/css-in-js/api/api-de.md index 57bfd41c1230c6..525136f03710f0 100644 --- a/docs/src/pages/css-in-js/api/api-de.md +++ b/docs/src/pages/css-in-js/api/api-de.md @@ -103,20 +103,20 @@ export default function MyComponent() { } ``` -## `styled(styles, [options])(Component) => Component` +## `styled(Component)(styles, [options]) => Component` Link a style sheet with a function component using the **styled components** pattern. #### Arguments -1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. -2. `options` (*Object* [optional]): +1. `Component`: The component that will be wrapped. +2. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. +3. `options` (*Object* [optional]): - `options.defaultTheme` (*Object* [optional]): The default theme to use if a theme isn't supplied through a Theme Provider. - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property. - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component. - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`. - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/jss-api/#create-style-sheet). -3. `Component`: The component that will be wrapped. #### Returns diff --git a/docs/src/pages/css-in-js/api/api-es.md b/docs/src/pages/css-in-js/api/api-es.md index 57bfd41c1230c6..525136f03710f0 100644 --- a/docs/src/pages/css-in-js/api/api-es.md +++ b/docs/src/pages/css-in-js/api/api-es.md @@ -103,20 +103,20 @@ export default function MyComponent() { } ``` -## `styled(styles, [options])(Component) => Component` +## `styled(Component)(styles, [options]) => Component` Link a style sheet with a function component using the **styled components** pattern. #### Arguments -1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. -2. `options` (*Object* [optional]): +1. `Component`: The component that will be wrapped. +2. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. +3. `options` (*Object* [optional]): - `options.defaultTheme` (*Object* [optional]): The default theme to use if a theme isn't supplied through a Theme Provider. - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property. - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component. - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`. - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/jss-api/#create-style-sheet). -3. `Component`: The component that will be wrapped. #### Returns diff --git a/docs/src/pages/css-in-js/api/api-fr.md b/docs/src/pages/css-in-js/api/api-fr.md index 57bfd41c1230c6..525136f03710f0 100644 --- a/docs/src/pages/css-in-js/api/api-fr.md +++ b/docs/src/pages/css-in-js/api/api-fr.md @@ -103,20 +103,20 @@ export default function MyComponent() { } ``` -## `styled(styles, [options])(Component) => Component` +## `styled(Component)(styles, [options]) => Component` Link a style sheet with a function component using the **styled components** pattern. #### Arguments -1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. -2. `options` (*Object* [optional]): +1. `Component`: The component that will be wrapped. +2. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. +3. `options` (*Object* [optional]): - `options.defaultTheme` (*Object* [optional]): The default theme to use if a theme isn't supplied through a Theme Provider. - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property. - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component. - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`. - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/jss-api/#create-style-sheet). -3. `Component`: The component that will be wrapped. #### Returns diff --git a/docs/src/pages/css-in-js/api/api-ja.md b/docs/src/pages/css-in-js/api/api-ja.md index 57bfd41c1230c6..525136f03710f0 100644 --- a/docs/src/pages/css-in-js/api/api-ja.md +++ b/docs/src/pages/css-in-js/api/api-ja.md @@ -103,20 +103,20 @@ export default function MyComponent() { } ``` -## `styled(styles, [options])(Component) => Component` +## `styled(Component)(styles, [options]) => Component` Link a style sheet with a function component using the **styled components** pattern. #### Arguments -1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. -2. `options` (*Object* [optional]): +1. `Component`: The component that will be wrapped. +2. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. +3. `options` (*Object* [optional]): - `options.defaultTheme` (*Object* [optional]): The default theme to use if a theme isn't supplied through a Theme Provider. - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property. - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component. - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`. - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/jss-api/#create-style-sheet). -3. `Component`: The component that will be wrapped. #### Returns diff --git a/docs/src/pages/css-in-js/api/api-pt.md b/docs/src/pages/css-in-js/api/api-pt.md index bfef31517c8cdf..a0baa44a2f9c72 100644 --- a/docs/src/pages/css-in-js/api/api-pt.md +++ b/docs/src/pages/css-in-js/api/api-pt.md @@ -103,20 +103,20 @@ export default function MyComponent() { } ``` -## `styled(styles, [options])(Component) => Component` +## `styled(Component)(styles, [options]) => Component` Link a style sheet with a function component using the **styled components** pattern. #### Arguments -1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. -2. `options` (*Object* [optional]): +1. `Component`: The component that will be wrapped. +2. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. +3. `options` (*Object* [optional]): - `options.defaultTheme` (*Object* [optional]): The default theme to use if a theme isn't supplied through a Theme Provider. - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property. - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component. - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`. - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/jss-api/#create-style-sheet). -3. `Component`: The component that will be wrapped. #### Returns diff --git a/docs/src/pages/css-in-js/api/api-ru.md b/docs/src/pages/css-in-js/api/api-ru.md index 57bfd41c1230c6..08d2e54b751a75 100644 --- a/docs/src/pages/css-in-js/api/api-ru.md +++ b/docs/src/pages/css-in-js/api/api-ru.md @@ -17,7 +17,7 @@ A function which returns [a class name generator function](http://cssinjs.org/js `class name generator`: The generator should be provided to JSS. -#### Examples +#### Примеры ```jsx import React from 'react'; @@ -47,7 +47,7 @@ This function doesn't really "do anything" at runtime, it's just the identity fu `styles`: A function generating the styles or a styles object. -#### Examples +#### Примеры ```jsx import { withStyles, createStyles } from '@material-ui/styles'; @@ -73,11 +73,11 @@ Link a style sheet with a function component using the **hook** pattern. #### Arguments -1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. +1. `styles` (*Function | Object*): A function generating the styles or a styles object. Это будет связано с компонентом. Use the function signature if you need to have access to the theme. It's provided as the first argument. 2. `options` (*Object* [optional]): - `options.defaultTheme` (*Object* [optional]): The default theme to use if a theme isn't supplied through a Theme Provider. - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property. - - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component. + - `options.name` (*String* [optional]): The name of the style sheet. Полезно для отладки. If the value isn't provided, it will try to fallback to the name of the component. - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`. - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/jss-api/#create-style-sheet). @@ -85,7 +85,7 @@ Link a style sheet with a function component using the **hook** pattern. `hook`: A hook. This hook can be used in a function component. It accepts one argument: the properties that will be used for "interpolation" in the style sheet. -#### Examples +#### Примеры ```jsx import React from 'react'; @@ -103,26 +103,26 @@ export default function MyComponent() { } ``` -## `styled(styles, [options])(Component) => Component` +## `styled(Component)(styles, [options]) => Component` Link a style sheet with a function component using the **styled components** pattern. #### Arguments -1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. -2. `options` (*Object* [optional]): +1. `Component`: The component that will be wrapped. +2. `styles` (*Function | Object*): A function generating the styles or a styles object. Это будет связано с компонентом. Use the function signature if you need to have access to the theme. It's provided as the first argument. +3. `options` (*Object* [optional]): - `options.defaultTheme` (*Object* [optional]): The default theme to use if a theme isn't supplied through a Theme Provider. - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property. - - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component. + - `options.name` (*String* [optional]): The name of the style sheet. Полезно для отладки. If the value isn't provided, it will try to fallback to the name of the component. - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`. - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/jss-api/#create-style-sheet). -3. `Component`: The component that will be wrapped. #### Returns `Component`: The new component created. -#### Examples +#### Примеры ```jsx import React from 'react'; @@ -143,7 +143,7 @@ This component allows you to change the behavior of the styling solution. It mak It should preferably be used at **the root of your component tree**. -#### Examples +#### Примеры ```jsx import React from 'react'; @@ -163,7 +163,7 @@ ReactDOM.render(, document.querySelector('#app')); This component takes a `theme` property, and makes the `theme` available down the React tree thanks to React context. It should preferably be used at **the root of your component tree**. -#### Examples +#### Примеры ```jsx import React from 'react'; @@ -189,7 +189,7 @@ This hook returns the `theme` object so it can be used inside a function compone `theme`: The theme object. -#### Examples +#### Примеры ```jsx import React from 'react'; @@ -214,11 +214,11 @@ Some implementation details that might be interesting to being aware of: #### Arguments -1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. +1. `styles` (*Function | Object*): A function generating the styles or a styles object. Это будет связано с компонентом. Use the function signature if you need to have access to the theme. It's provided as the first argument. 2. `options` (*Object* [optional]): - `options.defaultTheme` (*Object* [optional]): The default theme to use if a theme isn't supplied through a Theme Provider. - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property. - - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component. + - `options.name` (*String* [optional]): The name of the style sheet. Полезно для отладки. If the value isn't provided, it will try to fallback to the name of the component. - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`. - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/jss-api/#create-style-sheet). @@ -226,7 +226,7 @@ Some implementation details that might be interesting to being aware of: `higher-order component`: Should be used to wrap a component. -#### Examples +#### Примеры ```jsx import React from 'react'; @@ -281,7 +281,7 @@ Provide the `theme` object as a property of the input component so it can be use `Component`: The new component created. -#### Examples +#### Примеры ```jsx import React from 'react'; diff --git a/docs/src/pages/css-in-js/api/api-zh.md b/docs/src/pages/css-in-js/api/api-zh.md index 449697bfac1d8e..5e91315d77ce48 100644 --- a/docs/src/pages/css-in-js/api/api-zh.md +++ b/docs/src/pages/css-in-js/api/api-zh.md @@ -104,20 +104,20 @@ export default function MyComponent() { } ``` -## `styled(styles, [options])(Component) => Component` +## `styled(Component)(styles, [options]) => Component` 链路的样式表中有一个功能组件的使用**styled components**的模式。 #### 参数 -1. ` styles `(* Function | Object *): 生成样式或样式对象的函数。 它将链接到组件。 如果需要访问主题, 请使用函数签名。 它作为第一个参数提供。 -2. `选项` (*Object* [optional]): +1. `Component` ：将被包装的组件。 +2. ` styles `(* Function | Object *): 生成样式或样式对象的函数。 它将链接到组件。 如果需要访问主题, 请使用函数签名。 它作为第一个参数提供。 +3. `选项` (*Object* [optional]): - `options.defaultTheme`（*Object* [optional]）：如果未通过主题提供者提供主题，则使用默认主题。 - ` options.withTheme ` (*Boolean* [optional]): 默认值为 `false`。 将 ` theme ` 对象作为属性提供给组件。 - ` options.name ` (*String* [optional]): 样式表的名称。 用于调试。 如果未提供该值, 它将尝试回退到组件的名称。 - `options.flip` (*Boolean* [optional])：当设置为 `false` 时, 此工作表将选择退出 ` rtl ` 转换。 如果设置为 ` true `, 则会反转样式。 当设置为`null`，它跟随`theme.direction`。 - 其他键被转发到[jss.createStyleSheet([styles], [options])](http://cssinjs.org/jss-api/#create-style-sheet)。 -3. `Component` ：将被包装的组件。 #### 返回结果 @@ -209,9 +209,9 @@ export default function MyComponent() { 一些可能有趣的实现细节： -- 它添加了一个`classes`属性，因此您可以从外部覆盖注入的类名。 -- 它添加了一个`innerRef`属性，因此你可以从外部覆盖注入的类名。 ` innerRef ` 的用法与 ` ref ` 相同。 -- 它将转发 *non React static* 属性, 以便 HOC 更 "透明"。 例如, 它可用于定义 ` getInitialProps()` 静态方法 (next.js)。 +- 它添加了一个 `classes` 属性，因此您可以从外部覆盖注入的类名。 +- 它添加了一个 `innerRef` 属性，因此你可以从外部覆盖注入的类名。 ` innerRef ` 的用法与 `ref` 相同。 +- 它将转发*非 React 的静态* 属性，以便 HOC 更 "透明"。 例如，它可用于定义 ` getInitialProps()` 静态方法 (next.js)。 #### 参数 diff --git a/docs/src/pages/css-in-js/basics/basics-de.md b/docs/src/pages/css-in-js/basics/basics-de.md index 9fa0cde3806132..213732cebb4a66 100644 --- a/docs/src/pages/css-in-js/basics/basics-de.md +++ b/docs/src/pages/css-in-js/basics/basics-de.md @@ -1,16 +1,16 @@ # Basics -

You can leverage our styling solution, even if you are not using our components.

+

Sie können unsere Styling-Lösung auch nutzen, falls Sie unsere Komponenten nicht verwenden.

> ⚠️ `@material-ui/styles` is unstable (alpha version). Hopefully, we will make it the default style implementation for the core components in Material-UI v4. [Follow this path](/customization/css-in-js/) to read the documentation of the default style implementation. -Material-UI aims to provide strong foundations for building dynamic UIs. For the sake of simplicity, **we expose our styling solution to users**. You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions. +Material-UI hat das Ziel, eine solide Grundlage für dynamische UIs zu schaffen. Der Einfachheit halber **stellen wir unseren Nutzern unsere Styling-Lösung bereit**. Sie können sie benutzen, aber Sie müssen nicht. Diese Styling-Lösung [funktioniert mit](/guides/interoperability/) allen anderen bekannten Lösungen. -## Material-UI's styling solution +## Die Styling-Lösung von Material-UI In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style) a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). We think that this is the future: -- [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) +- [Eine vereinheitlichte Styling-Sprache](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) - [Convert SCSS (Sass) to CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js) Material-UI's styling solution is inspired by many other CSS-in-JS libraries like [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/). diff --git a/docs/src/pages/css-in-js/basics/basics-es.md b/docs/src/pages/css-in-js/basics/basics-es.md index 9fa0cde3806132..cf57408833976c 100644 --- a/docs/src/pages/css-in-js/basics/basics-es.md +++ b/docs/src/pages/css-in-js/basics/basics-es.md @@ -21,9 +21,9 @@ Material-UI's styling solution is inspired by many other CSS-in-JS libraries lik - ⚡️ It uses [JSS](https://github.com/cssinjs/jss) at its core. It's a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript to CSS compiler which works at runtime and server-side. - 📦 Less than [15 KB gzipped](https://bundlephobia.com/result?p=@material-ui/styles). -## Installation +## Instalación -To install and save in your `package.json` dependencies, run: +Para instalar y guardar en tu dependencias ` package.json `, ejecuta: ```sh // with npm diff --git a/docs/src/pages/css-in-js/basics/basics-fr.md b/docs/src/pages/css-in-js/basics/basics-fr.md index 9fa0cde3806132..89bcfc7d658e4a 100644 --- a/docs/src/pages/css-in-js/basics/basics-fr.md +++ b/docs/src/pages/css-in-js/basics/basics-fr.md @@ -1,17 +1,17 @@ -# Basics +# Bases -

You can leverage our styling solution, even if you are not using our components.

+

Vous pouvez exploiter notre solution de style, même si vous n'utilisez pas nos composants.

> ⚠️ `@material-ui/styles` is unstable (alpha version). Hopefully, we will make it the default style implementation for the core components in Material-UI v4. [Follow this path](/customization/css-in-js/) to read the documentation of the default style implementation. -Material-UI aims to provide strong foundations for building dynamic UIs. For the sake of simplicity, **we expose our styling solution to users**. You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions. +Material-UI aims to provide strong foundations for building dynamic UIs. For the sake of simplicity, **we expose our styling solution to users**. Vous pouvez l'utiliser, mais vous n'êtes pas obligé. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions. ## Material-UI's styling solution In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style) a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). We think that this is the future: - [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) -- [Convert SCSS (Sass) to CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js) +- [Conversion de SCSS (Sass) en CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js) Material-UI's styling solution is inspired by many other CSS-in-JS libraries like [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/). @@ -23,7 +23,7 @@ Material-UI's styling solution is inspired by many other CSS-in-JS libraries lik ## Installation -To install and save in your `package.json` dependencies, run: +Pour installer et enregistrer dans votre `package.json` dépendances, exécutez: ```sh // with npm diff --git a/docs/src/pages/css-in-js/basics/basics-ja.md b/docs/src/pages/css-in-js/basics/basics-ja.md index 9fa0cde3806132..5321770f9a6095 100644 --- a/docs/src/pages/css-in-js/basics/basics-ja.md +++ b/docs/src/pages/css-in-js/basics/basics-ja.md @@ -21,9 +21,9 @@ Material-UI's styling solution is inspired by many other CSS-in-JS libraries lik - ⚡️ It uses [JSS](https://github.com/cssinjs/jss) at its core. It's a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript to CSS compiler which works at runtime and server-side. - 📦 Less than [15 KB gzipped](https://bundlephobia.com/result?p=@material-ui/styles). -## Installation +## インストール -To install and save in your `package.json` dependencies, run: +インストールして`package.json` のdependenciesに保存します。次を実行してください。 ```sh // with npm diff --git a/docs/src/pages/css-in-js/basics/basics-ru.md b/docs/src/pages/css-in-js/basics/basics-ru.md index 9fa0cde3806132..b006706e9e103a 100644 --- a/docs/src/pages/css-in-js/basics/basics-ru.md +++ b/docs/src/pages/css-in-js/basics/basics-ru.md @@ -1,16 +1,16 @@ # Basics -

You can leverage our styling solution, even if you are not using our components.

+

Вы можете использовать наши стили, даже когда вы не используете компоненты.

> ⚠️ `@material-ui/styles` is unstable (alpha version). Hopefully, we will make it the default style implementation for the core components in Material-UI v4. [Follow this path](/customization/css-in-js/) to read the documentation of the default style implementation. -Material-UI aims to provide strong foundations for building dynamic UIs. For the sake of simplicity, **we expose our styling solution to users**. You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions. +Material-UI стремится обеспечить прочную основу для создания динамических интерфейсов. For the sake of simplicity, **we expose our styling solution to users**. You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions. ## Material-UI's styling solution In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style) a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). We think that this is the future: -- [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) +- [Унифицированный язык стилей](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) - [Convert SCSS (Sass) to CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js) Material-UI's styling solution is inspired by many other CSS-in-JS libraries like [styled-components](https://www.styled-components.com/) and [emotion](https://emotion.sh/). @@ -21,9 +21,9 @@ Material-UI's styling solution is inspired by many other CSS-in-JS libraries lik - ⚡️ It uses [JSS](https://github.com/cssinjs/jss) at its core. It's a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JavaScript to CSS compiler which works at runtime and server-side. - 📦 Less than [15 KB gzipped](https://bundlephobia.com/result?p=@material-ui/styles). -## Installation +## Инструкция по установке -To install and save in your `package.json` dependencies, run: +Для установки и сохранения в вашем ` package.json ` зависимости, запустите: ```sh // with npm diff --git a/docs/src/pages/css-in-js/basics/basics-zh.md b/docs/src/pages/css-in-js/basics/basics-zh.md index 9cc5f3ef619113..e217e397f27673 100644 --- a/docs/src/pages/css-in-js/basics/basics-zh.md +++ b/docs/src/pages/css-in-js/basics/basics-zh.md @@ -8,10 +8,10 @@ Material-UI 旨在为构建动态 UI 提供强大的基础。 为了简单起见 ## Material-UI 的样式解决方案 -在以前的版本中，Material-UI 使用 LESS，然后是自定义内嵌式的解决方案来编写组件的样式，但是这些方法已被证明是有限制的。 最近，我们[迁移](https://github.com/oliviertassinari/a-journey-toward-better-style)到*CSS-in-JS*的解决方案中去。 它**解锁了许多很棒的功能**（主题嵌套、动态样式、自我支持等...） 我们认为这是未来： +在以前的版本中，Material-UI 曾使用过 LESS，以及而后的自定义内嵌式来编写组件的样式。但是这些方法已被证明了其局限性。 最近，我们开始向*CSS-in-JS*解决方案方向转移。 它**解锁了许多很棒的功能**（主题嵌套、动态样式、自我支持等...） 我们认为这是未来： - [统一的样式语言](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) -- [将SCSS（Sass）转换为CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js) +- [将 SCSS（Sass）转换为 CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js) Material-UI的样式解决方案受到许多其他CSS-in-JS库的启发，例如 [styled-components](https://www.styled-components.com/) 和 [emotion](https://emotion.sh/)。 diff --git a/docs/src/pages/customization/css-in-js/css-in-js-de.md b/docs/src/pages/customization/css-in-js/css-in-js-de.md index f75afea3abb6ac..75f73b581cea03 100644 --- a/docs/src/pages/customization/css-in-js/css-in-js-de.md +++ b/docs/src/pages/customization/css-in-js/css-in-js-de.md @@ -1,20 +1,20 @@ # CSS in JS -

You can leverage our styling solution, even if you are not using our components.

+

Sie können unsere Styling-Lösung auch nutzen, falls Sie unsere Komponenten nicht verwenden.

-> ⚠️ We are working on extracting the styling solution into it's own package: [`@material-ui/styles`](/css-in-js/basics/). It's an unstable project (alpha version). Hopefully, we will make it the default style implementation for the core components in Material-UI v4. +> ⚠️ Wir arbeiten daran, die Styling-Lösung in ein eigenes Paket zu migrieren: [`@material-ui/styles`](/css-in-js/basics/). Es ist ein instabiles Projekt (Alpha-Version). Hopefully, we will make it the default style implementation for the core components in Material-UI v4. -Material-UI aims to provide strong foundations for building dynamic UIs. For the sake of simplicity, **we expose our styling solution to users**. You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions. +Material-UI hat das Ziel, eine solide Grundlage für dynamische UIs zu schaffen. Der Einfachheit halber **stellen wir unseren Nutzern unsere Styling-Lösung bereit**. Sie können sie benutzen, aber Sie müssen nicht. Diese Styling-Lösung [funktioniert mit](/guides/interoperability/) allen anderen bekannten Lösungen. -## Material-UI's styling solution +## Die Styling-Lösung von Material-UI -In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style) a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). We think that it's the future: +In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style) a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). Wir denken, das ist die Zukunft: -- [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) +- [Eine vereinheitlichte Styling-Sprache](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) - [The future of component-based styling](https://medium.freecodecamp.org/css-in-javascript-the-future-of-component-based-styling-70b161a79a32) - [Convert SCSS (Sass) to CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js) -So, you may have noticed in the demos what *CSS-in-JS* looks like. We use the higher-order component created by [`withStyles`](#api) to inject an array of styles into the DOM as CSS, using JSS. Here's an example: +So, you may have noticed in the demos what *CSS-in-JS* looks like. We use the higher-order component created by [`withStyles`](#api) to inject an array of styles into the DOM as CSS, using JSS. Hier ist ein Beispiel: {{"demo": "pages/customization/css-in-js/CssInJs.js"}} @@ -38,7 +38,7 @@ When only rendering on the client, that's not something you need to be aware of. ## Class names -You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The following CSS won't work: +You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. Das folgende CSS wird nicht funktionieren: ```css .MuiAppBar-root-12 { @@ -46,19 +46,19 @@ You may have noticed that the class names generated by our styling solution are } ``` -Instead, you have to use the `classes` property of a component to override them. On the other hand, thanks to the non-deterministic nature of our class names, we can implement optimizations for development and production. They are easy to debug in development and as short as possible in production: +Instead, you have to use the `classes` property of a component to override them. Andererseits erlaubt es uns die nicht-deterministische Natur der Klassennamen, Optimierungen für Entwicklung und Produktion zu implementieren. They are easy to debug in development and as short as possible in production: - development: `.MuiAppBar-root-12` - production: `.jss12` -If you don't like this default behavior, you can change it. JSS relies on the concept of [class name generator](http://cssinjs.org/js-api/#generate-your-own-class-names). +If you don't like this default behavior, you can change it. JSS basiert auf dem Konzept eines [Generators für Klassennamen](http://cssinjs.org/js-api/#generate-your-own-class-names). -### Global CSS +### Globales CSS -We provide a custom implementation of the class name generator for Material-UI needs: [`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator). As well as the option to make the class names **deterministic** with the `dangerouslyUseGlobalCSS` option. When turned on, the class names will look like this: +Wir bieten eine eigene Implementierung des Klassennamen-Generators, die an die Anforderungen von Material-UI angepasst ist: [`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator). As well as the option to make the class names **deterministic** with the `dangerouslyUseGlobalCSS` option. When turned on, the class names will look like this: -- development: `.MuiAppBar-root` -- production: `.MuiAppBar-root` +- Entwicklung: `.MuiAppBar-root` +- Produktion: `.MuiAppBar-root` ⚠️ **Be cautious when using `dangerouslyUseGlobalCSS`.** We provide this option as an escape hatch for quick prototyping. Relying on it for code running in production has the following implications: diff --git a/docs/src/pages/customization/css-in-js/css-in-js-fr.md b/docs/src/pages/customization/css-in-js/css-in-js-fr.md index f75afea3abb6ac..80180505c7f32a 100644 --- a/docs/src/pages/customization/css-in-js/css-in-js-fr.md +++ b/docs/src/pages/customization/css-in-js/css-in-js-fr.md @@ -1,10 +1,10 @@ # CSS in JS -

You can leverage our styling solution, even if you are not using our components.

+

Vous pouvez exploiter notre solution de style, même si vous n'utilisez pas nos composants.

-> ⚠️ We are working on extracting the styling solution into it's own package: [`@material-ui/styles`](/css-in-js/basics/). It's an unstable project (alpha version). Hopefully, we will make it the default style implementation for the core components in Material-UI v4. +> ⚠️ Nous travaillons actuellement à l'extraction de la solution de style dans son propre package: [` @ material-ui / styles `](/css-in-js/basics/) . Il s’agit d’un projet instable (version alpha). Hopefully, we will make it the default style implementation for the core components in Material-UI v4. -Material-UI aims to provide strong foundations for building dynamic UIs. For the sake of simplicity, **we expose our styling solution to users**. You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions. +Material-UI aims to provide strong foundations for building dynamic UIs. For the sake of simplicity, **we expose our styling solution to users**. Vous pouvez l'utiliser, mais vous n'êtes pas obligé. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions. ## Material-UI's styling solution @@ -12,15 +12,15 @@ In previous versions, Material-UI has used LESS, then a custom inline-style solu - [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) - [The future of component-based styling](https://medium.freecodecamp.org/css-in-javascript-the-future-of-component-based-styling-70b161a79a32) -- [Convert SCSS (Sass) to CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js) +- [Conversion de SCSS (Sass) en CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js) -So, you may have noticed in the demos what *CSS-in-JS* looks like. We use the higher-order component created by [`withStyles`](#api) to inject an array of styles into the DOM as CSS, using JSS. Here's an example: +So, you may have noticed in the demos what *CSS-in-JS* looks like. We use the higher-order component created by [`withStyles`](#api) to inject an array of styles into the DOM as CSS, using JSS. Voici un exemple : {{"demo": "pages/customization/css-in-js/CssInJs.js"}} ## JSS -Material-UI's styling solution uses [JSS](https://github.com/cssinjs/jss) at its core. It's a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JS to CSS compiler which works at runtime and server-side. It is about 8 kB (minified and gzipped) and is extensible via a [plugins](https://github.com/cssinjs/jss/blob/master/docs/plugins.md) API. +La solution de style de Material-UI est principalement basé sur [JSS](https://github.com/cssinjs/jss) . It's a [high performance](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JS to CSS compiler which works at runtime and server-side. It is about 8 kB (minified and gzipped) and is extensible via a [plugins](https://github.com/cssinjs/jss/blob/master/docs/plugins.md) API. If you end up using this styling solution in your codebase, you're going to need to *learn the API*. The best place to start is by looking at the features that each [plugin](https://cssinjs.org/plugins/) provides. Material-UI uses [few of them](#plugins). You can always add new plugins if needed with the [`JssProvider`](https://github.com/cssinjs/react-jss#custom-setup) helper. @@ -38,7 +38,7 @@ When only rendering on the client, that's not something you need to be aware of. ## Class names -You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The following CSS won't work: +You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. Le CSS suivant ne fonctionnera pas: ```css .MuiAppBar-root-12 { @@ -48,16 +48,16 @@ You may have noticed that the class names generated by our styling solution are Instead, you have to use the `classes` property of a component to override them. On the other hand, thanks to the non-deterministic nature of our class names, we can implement optimizations for development and production. They are easy to debug in development and as short as possible in production: -- development: `.MuiAppBar-root-12` +- développement: `.MuiAppBar-root-12` - production: `.jss12` -If you don't like this default behavior, you can change it. JSS relies on the concept of [class name generator](http://cssinjs.org/js-api/#generate-your-own-class-names). +If you don't like this default behavior, you can change it. JSS s'appuie sur le concept de [générateur de nom de classe](http://cssinjs.org/js-api/#generate-your-own-class-names) . -### Global CSS +### CSS global -We provide a custom implementation of the class name generator for Material-UI needs: [`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator). As well as the option to make the class names **deterministic** with the `dangerouslyUseGlobalCSS` option. When turned on, the class names will look like this: +We provide a custom implementation of the class name generator for Material-UI needs: [`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator). Ainsi que la possibilité de rendre les noms de classe **déterministes** avec l'option ` dangereusementUseGlobalCSS `. When turned on, the class names will look like this: -- development: `.MuiAppBar-root` +- développement: `.MuiAppBar-root` - production: `.MuiAppBar-root` ⚠️ **Be cautious when using `dangerouslyUseGlobalCSS`.** We provide this option as an escape hatch for quick prototyping. Relying on it for code running in production has the following implications: diff --git a/docs/src/pages/customization/css-in-js/css-in-js-pt.md b/docs/src/pages/customization/css-in-js/css-in-js-pt.md index ae970491f02706..72baea770d87d3 100644 --- a/docs/src/pages/customization/css-in-js/css-in-js-pt.md +++ b/docs/src/pages/customization/css-in-js/css-in-js-pt.md @@ -55,10 +55,10 @@ If you don't like this default behavior, you can change it. O JSS conta com o co ### Global CSS -Fornecemos uma implementação personalizada do gerador de nome de classe para as necessidades de Material-UI: [`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator). As well as the option to make the class names **deterministic** with the `dangerouslyUseGlobalCSS` option. When turned on, the class names will look like this: +Fornecemos uma implementação personalizada do gerador de nome de classe para as necessidades de Material-UI: [`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator). Assim como a opção de fazer os nomes de classes serem **determinísticos** com a opção `dangerouslyUseGlobalCSS`. When turned on, the class names will look like this: -- development: `.MuiAppBar-root` -- production: `.MuiAppBar-root` +- desenvolvimento: `.MuiAppBar-root-` +- produção: `.MuiAppBar-root ` ⚠️ **Be cautious when using `dangerouslyUseGlobalCSS`.** We provide this option as an escape hatch for quick prototyping. Relying on it for code running in production has the following implications: diff --git a/docs/src/pages/customization/css-in-js/css-in-js-ru.md b/docs/src/pages/customization/css-in-js/css-in-js-ru.md index f75afea3abb6ac..6d5a3700088015 100644 --- a/docs/src/pages/customization/css-in-js/css-in-js-ru.md +++ b/docs/src/pages/customization/css-in-js/css-in-js-ru.md @@ -1,16 +1,16 @@ # CSS in JS -

You can leverage our styling solution, even if you are not using our components.

+

Вы можете использовать наши стили, даже когда вы не используете компоненты.

-> ⚠️ We are working on extracting the styling solution into it's own package: [`@material-ui/styles`](/css-in-js/basics/). It's an unstable project (alpha version). Hopefully, we will make it the default style implementation for the core components in Material-UI v4. +> ⚠️ We are working on extracting the styling solution into it's own package: [`@material-ui/styles`](/css-in-js/basics/). Это нестабильный проект (альфа-версия). Hopefully, we will make it the default style implementation for the core components in Material-UI v4. -Material-UI aims to provide strong foundations for building dynamic UIs. For the sake of simplicity, **we expose our styling solution to users**. You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions. +Material-UI стремится обеспечить прочную основу для создания динамических интерфейсов. For the sake of simplicity, **we expose our styling solution to users**. You can use it, but you don't have to. This styling solution is [interoperable with](/guides/interoperability/) all the other major solutions. ## Material-UI's styling solution In previous versions, Material-UI has used LESS, then a custom inline-style solution to write the style of the components, but these approaches have proven to be limited. Most recently, we have [moved toward](https://github.com/oliviertassinari/a-journey-toward-better-style) a *CSS-in-JS* solution. It **unlocks many great features** (theme nesting, dynamic styles, self-support, etc.). We think that it's the future: -- [A Unified Styling Language](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) +- [Унифицированный язык стилей](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) - [The future of component-based styling](https://medium.freecodecamp.org/css-in-javascript-the-future-of-component-based-styling-70b161a79a32) - [Convert SCSS (Sass) to CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js) @@ -26,7 +26,7 @@ If you end up using this styling solution in your codebase, you're going to need If you wish to build your own instance of `jss` **and** support *rtl* make sure you also include the [jss-rtl](https://github.com/alitaheri/jss-rtl) plugin. Check the jss-rtl [readme](https://github.com/alitaheri/jss-rtl#simple-usage) to learn how. -## Sheets registry +## Реестр листов When rendering on the server, you will need to get all rendered styles as a CSS string. The `SheetsRegistry` class allows you to manually aggregate and stringify them. Read more about [Server Rendering](/guides/server-rendering/). @@ -36,7 +36,7 @@ The sheets manager uses a [reference counting](https://en.wikipedia.org/wiki/Ref When only rendering on the client, that's not something you need to be aware of. However, when rendering on the server you do. You can read more about [Server Rendering](/guides/server-rendering/). -## Class names +## Имена классов You may have noticed that the class names generated by our styling solution are **non-deterministic**, so you can't rely on them to stay the same. The following CSS won't work: @@ -53,7 +53,7 @@ Instead, you have to use the `classes` property of a component to override them. If you don't like this default behavior, you can change it. JSS relies on the concept of [class name generator](http://cssinjs.org/js-api/#generate-your-own-class-names). -### Global CSS +### Глобальный CSS We provide a custom implementation of the class name generator for Material-UI needs: [`createGenerateClassName()`](#creategenerateclassname-options-class-name-generator). As well as the option to make the class names **deterministic** with the `dangerouslyUseGlobalCSS` option. When turned on, the class names will look like this: @@ -77,7 +77,7 @@ The CSS injected by Material-UI to style a component has the highest specificity You might, however, also want to override these styles, for example with styled-components. If you are experiencing a CSS injection order issue, JSS [provides a mechanism](https://github.com/cssinjs/jss/blob/master/docs/setup.md#specify-dom-insertion-point) to handle this situation. By adjusting the placement of the `insertionPoint` within your HTML head you can [control the order](http://cssinjs.org/js-api/#attach-style-sheets-in-a-specific-order) that the CSS rules are applied to your components. -### HTML comment +### HTML-комментарий The simplest approach is to add an HTML comment that determines where JSS will inject the styles: @@ -111,7 +111,7 @@ function App() { export default App; ``` -### Other HTML element +### Другой HTML-элемент [Create React App](https://github.com/facebook/create-react-app) strips HTML comments when creating the production build. To get around the issue, you can provide a DOM element (other than a comment) as the JSS insertion point. @@ -179,7 +179,7 @@ export default App; ## JssProvider -react-jss exposes a `JssProvider` component to configure JSS for the underlying child components. There are different use cases: +react-jss exposes a `JssProvider` component to configure JSS for the underlying child components. Есть разные варианты использования: - Providing a class name generator. - [Providing a Sheets registry.](/customization/css-in-js/#sheets-registry) @@ -204,7 +204,7 @@ function App() { export default App; ``` -## Plugins +## Дополнения JSS uses the concept of plugins to extend its core, allowing people to cherry-pick the features they need. You pay the performance overhead for only what's you are using. Given `withStyles` is our internal styling solution, all the plugins aren't available by default. We have added the following list: @@ -231,10 +231,10 @@ Some implementation details that might be interesting to being aware of: #### Arguments -1. `styles` (*Function | Object*): A function generating the styles or a styles object. It will be linked to the component. Use the function signature if you need to have access to the theme. It's provided as the first argument. +1. `styles` (*Function | Object*): A function generating the styles or a styles object. Это будет связано с компонентом. Use the function signature if you need to have access to the theme. It's provided as the first argument. 2. `options` (*Object* [optional]): - `options.withTheme` (*Boolean* [optional]): Defaults to `false`. Provide the `theme` object to the component as a property. - - `options.name` (*String* [optional]): The name of the style sheet. Useful for debugging. If the value isn't provided, it will try to fallback to the name of the component. + - `options.name` (*String* [optional]): The name of the style sheet. Полезно для отладки. If the value isn't provided, it will try to fallback to the name of the component. - `options.flip` (*Boolean* [optional]): When set to `false`, this sheet will opt-out the `rtl` transformation. When set to `true`, the styles are inversed. When set to `null`, it follows `theme.direction`. - The other keys are forwarded to the options argument of [jss.createStyleSheet([styles], [options])](http://cssinjs.org/js-api/#create-style-sheet). @@ -242,7 +242,7 @@ Some implementation details that might be interesting to being aware of: `higher-order component`: Should be used to wrap a component. -#### Examples +#### Примеры ```jsx import { withStyles } from '@material-ui/core/styles'; @@ -298,7 +298,7 @@ A function which returns [a class name generator function](http://cssinjs.org/js `class name generator`: The generator should be provided to JSS. -#### Examples +#### Примеры ```jsx import JssProvider from 'react-jss/lib/JssProvider'; @@ -320,9 +320,9 @@ function App() { export default App; ``` -## Alternative APIs +## Альтернативные API -Do you think that [higher-order components are the new mixins](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)? Rest assured we don't, however because `withStyles()` is a higher-order component, it can be extended with just a **few lines of code** to match different patterns that are all idiomatic React. Here are a couple of examples. +Do you think that [higher-order components are the new mixins](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)? Rest assured we don't, however because `withStyles()` is a higher-order component, it can be extended with just a **few lines of code** to match different patterns that are all idiomatic React. Вот несколько примеров. ### Render props API (+11 lines) diff --git a/docs/src/pages/customization/css-in-js/css-in-js-zh.md b/docs/src/pages/customization/css-in-js/css-in-js-zh.md index 2783b7b03a6ced..03df2d00601934 100644 --- a/docs/src/pages/customization/css-in-js/css-in-js-zh.md +++ b/docs/src/pages/customization/css-in-js/css-in-js-zh.md @@ -1,4 +1,4 @@ -# CSS in JS +# JS 中的 CSS (CSS-in-JS)

即使您没有使用我们的组件, 您也可以利用我们的样式解决方案。

@@ -8,11 +8,11 @@ Material-UI 旨在为构建动态 UI 提供强大的基础。 为了简单起见 ## Material-UI 的样式解决方案 -在以前的版本中，Material-UI 使用 LESS，然后是自定义内嵌式的解决方案来编写组件的样式，但是这些方法已被证明是有限制的。 最近，我们[迁移](https://github.com/oliviertassinari/a-journey-toward-better-style)到*CSS-in-JS*的解决方案中去。 它**解锁了许多很棒的功能**（主题嵌套、动态样式、自我支持等...） 我们认为这是未来： +在以前的版本中，Material-UI 曾使用过 LESS，以及而后的自定义内嵌式来编写组件的样式。但是这些方法已被证明了其局限性。 最近，我们开始向*CSS-in-JS*解决方案方向转移。 它**解锁了许多很棒的功能**（主题嵌套、动态样式、自我支持等...） 我们认为这是未来： - [统一的样式语言](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) - [基于组件样式的未来](https://medium.freecodecamp.org/css-in-javascript-the-future-of-component-based-styling-70b161a79a32) -- [将SCSS（Sass）转换为CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js) +- [将 SCSS（Sass）转换为 CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js) 因此，你可能在演示中注意到*CSS-in-JS*的样子。 我们使用由[`wtihStyles`](#api)创建的高阶组件以CSS的形式注入到DOM中，使用JSS。 下面是一个例子： @@ -20,9 +20,9 @@ Material-UI 旨在为构建动态 UI 提供强大的基础。 为了简单起见 ## JSS -Material-UI 的样式解决方案的核心处是使用[JSS](https://github.com/cssinjs/jss)。 它是一个[高性能](https://github.com/cssinjs/jss/blob/master/docs/performance.md)JS到CSS编译器，它在运行时和服务器端工作。 它大约是8kb（缩小和压缩）并且可以通过[插件](https://github.com/cssinjs/jss/blob/master/docs/plugins.md)的API扩展。 +Material-UI 的样式解决方案的核心处是使用 [JSS](https://github.com/cssinjs/jss)。 它是一个在运行时和服务器端工作工作的，[高性能的](https://github.com/cssinjs/jss/blob/master/docs/performance.md) JS 到 CSS 编译器。 它大约是8kb（缩小和压缩）并且可以通过[插件](https://github.com/cssinjs/jss/blob/master/docs/plugins.md)的API扩展。 -如果您最终在代码库中使用此样式解决方案，则需要*学习API*。 最好的起点是查看每个[插件](https://cssinjs.org/plugins/)提供的功能。 Material-UI 使用了[其中的几个](#plugins)。 如果需要，您可以随时使用[`JssProvider`](https://github.com/cssinjs/react-jss#custom-setup)帮助程序添加新插件。 +如果您最终在代码库中使用此样式解决方案，则需要*学习这组 API*。 最好的开始是查看每个[插件](https://cssinjs.org/plugins/)提供的功能。 Material-UI 使用了[其中少数几个](#plugins)。 如果需要，您可以随时使用 [`JssProvider`](https://github.com/cssinjs/react-jss#custom-setup) 帮助程序添加新插件。 如果您希望构建自己的`jss`**和**支持*rtl*的实例，请确保您还包含[jss-rtl](https://github.com/alitaheri/jss-rtl)的插件。 请查阅jss-rtl的[Readme](https://github.com/alitaheri/jss-rtl#simple-usage)去了解如何使用。 @@ -38,7 +38,7 @@ Sheets 管理器使用[引用计数](https://en.wikipedia.org/wiki/Reference_cou ## Class names -您可能已经注意到我们的样式解决方案生成的类名称**不确定性**，所以你不能依赖它们保持不变。 以下CSS不起作用： +您可能已经注意到我们的样式解决方案生成的类名称**不确定性**，所以你不能依赖它们保持不变。 以下 CSS 不工作： ```css .MuiAppBar-root-12 { @@ -46,7 +46,7 @@ Sheets 管理器使用[引用计数](https://en.wikipedia.org/wiki/Reference_cou } ``` -相反, 您必须使用组件的 `classes`属性来重写它们。 另一方面, 由于类名的非确定性性质, 我们 可以实现对开发和生产的优化。 它们在开发中易于调试, 在生产中尽可能短: +相反，您必须使用组件的 `classes` 属性来覆盖它们。 另一方面, 由于类名的非确定性性质, 我们 可以实现对开发和生产的优化。 它们在开发中易于调试, 在生产中尽可能短: - 开发：`.MuiAppBar-root-12` - 生产：`.jss12` @@ -60,7 +60,7 @@ Sheets 管理器使用[引用计数](https://en.wikipedia.org/wiki/Reference_cou - 开发：`.MuiAppBar-root-` - 生产: `.MuiAppBar-root` -⚠️ ** 使用`dangerouslyUseGlobalCSS`时要格外小心. ** 我们提供此选项作为快速原型制作的孵化器。 依赖于它的代码在生产中运行有以下含义: +⚠️ **使用 `dangerouslyUseGlobalCSS` 时要格外小心。** 我们提供此选项作为快速原型制作的孵化器。 依赖于它的代码在生产中运行有以下含义: - 全局CSS本质上是很弱的 人们使用严格的方法, 如 [BEM](http://getbem.com/introduction/) 来解决问题。 - 很难跟踪`classes`API的更改。 @@ -215,7 +215,7 @@ JSS使用插件的概念来扩展其核心，允许人们挑选他们需要的 - [jss-vendor-prefixer](http://cssinjs.org/jss-vendor-prefixer/) - [jss-props-sort](http://cssinjs.org/jss-props-sort/) -它是[jss-preset-default](http://cssinjs.org/jss-preset-default/)的子集。 当然，你可以自由的添加新插件。 我们有一个[`jss-rtl`插件](/guides/right-to-left/#3--jss-rtl)的例子。 +它是 [jss-preset-default](http://cssinjs.org/jss-preset-default/) 的子集。 当然，你可以自由的添加新插件。 我们有一个[`jss-rtl`插件](/guides/right-to-left/#3--jss-rtl)的例子。 ## API @@ -225,9 +225,9 @@ JSS使用插件的概念来扩展其核心，允许人们挑选他们需要的 一些可能有趣的实现细节： -- 它添加了一个`classes`属性，因此您可以从外部覆盖注入的类名。 -- 它添加了一个`innerRef`属性，因此你可以从外部覆盖注入的类名。 ` innerRef ` 的用法与 ` ref ` 相同。 -- 它将转发 *non React static* 属性, 以便 HOC 更 "透明"。 例如, 它可用于定义 ` getInitialProps()` 静态方法 (next.js)。 +- 它添加了一个 `classes` 属性，因此您可以从外部覆盖注入的类名。 +- 它添加了一个 `innerRef` 属性，因此你可以从外部覆盖注入的类名。 ` innerRef ` 的用法与 `ref` 相同。 +- 它将转发*非 React 的静态* 属性，以便 HOC 更 "透明"。 例如，它可用于定义 ` getInitialProps()` 静态方法 (next.js)。 #### 参数 @@ -322,11 +322,11 @@ export default App; ## 备选方案 -你认为[高阶组件是新的mixins吗](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)？ 请放心，我们不会这样做，但是因为`withStyles()`是一个更高阶的组件，所以只需要**少量几行代码**就可以扩展来匹配不同的模式。这些都是通用的React。 以下有几个例子： +你认为[高阶组件是新的 mixins 吗](https://cdb.reacttraining.com/use-a-render-prop-50de598f11ce)？ 请放心，我们不会这样做，但是因为 `withStyles()` 是一个更高阶的组件，所以只需要**少量几行代码**就可以扩展来匹配不同的模式。这些都是通用的React。 以下有几个例子： -### 渲染道具 api (+ 11 行) +### Render props (+ 11 行) -术语[“render prop”](https://reactjs.org/docs/render-props.html)指的是使用其值为函数的prop来在React组件之间共享代码的简单技术。 +术语 [“render prop”](https://reactjs.org/docs/render-props.html) 指的是使用其值为函数的 prop 来在 React 组件之间共享代码的简单技术。 ```jsx //您将在演示源中找到`createStyled`实现。 @@ -369,13 +369,13 @@ const Styled = createStyled(theme => ({ [@jedwards1211 ](https://github.com/jedwards1211)花时间将此模块移动到包中：[ material-ui-render-props-styles ](https://github.com/jcoreio/material-ui-render-props-styles)。 随意使用它。 -### 样式组件 api (+ 15条线) +### styled-components API (+15 行) -styled-components的API删除了组件和样式之间的映射。 使用组件作为低级样式构造可以更简单。 +styled-components 的 API 删除了组件和样式之间的映射。 使用组件作为底层样式构造可以更简单。 ```jsx -//您将在演示中找到`styled`实现。 -/你甚至可以用https://github.com/cssinjs/jss-template编写CSS。 +// 您将在演示中找到 `styled` 实现。 +// 你甚至可以用 https://github.com/cssinjs/jss-template 编写 CSS。 const MyButton = styled(Button)({ background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)', borderRadius: 3, diff --git a/docs/src/pages/customization/themes/themes-ru.md b/docs/src/pages/customization/themes/themes-ru.md index 5e1cf78f5997ab..8c69d05c773d59 100644 --- a/docs/src/pages/customization/themes/themes-ru.md +++ b/docs/src/pages/customization/themes/themes-ru.md @@ -339,7 +339,7 @@ This component takes a `theme` property, and makes the `theme` available down th You can see the full properties API in [this dedicated page](/api/mui-theme-provider/). -#### Examples +#### Примеры ```jsx import React from 'react'; @@ -372,7 +372,7 @@ Generate a theme base on the options received. `theme` (*Object*): A complete, ready to use theme object. -#### Examples +#### Примеры ```js import { createMuiTheme } from '@material-ui/core/styles'; @@ -402,7 +402,7 @@ Provide the `theme` object as a property of the input component so it can be use `Component`: The new component created. -#### Examples +#### Примеры ```js import { withTheme } from '@material-ui/core/styles'; diff --git a/docs/src/pages/demos/app-bar/BottomAppBar-de.tsx b/docs/src/pages/demos/app-bar/BottomAppBar-de.tsx new file mode 100644 index 00000000000000..f2b34cc86143ff --- /dev/null +++ b/docs/src/pages/demos/app-bar/BottomAppBar-de.tsx @@ -0,0 +1,154 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import Paper from '@material-ui/core/Paper'; +import Fab from '@material-ui/core/Fab'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import Avatar from '@material-ui/core/Avatar'; +import MenuIcon from '@material-ui/icons/Menu'; +import AddIcon from '@material-ui/icons/Add'; +import SearchIcon from '@material-ui/icons/Search'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = (theme: Theme) => + createStyles({ + text: { + paddingTop: theme.spacing.unit * 2, + paddingLeft: theme.spacing.unit * 2, + paddingRight: theme.spacing.unit * 2, + }, + paper: { + paddingBottom: 50, + }, + list: { + marginBottom: theme.spacing.unit * 2, + }, + subHeader: { + backgroundColor: theme.palette.background.paper, + }, + appBar: { + top: 'auto', + bottom: 0, + }, + toolbar: { + alignItems: 'center', + justifyContent: 'space-between', + }, + fabButton: { + position: 'absolute', + zIndex: 1, + top: -30, + left: 0, + right: 0, + margin: '0 auto', + }, + }); + +const messages = [ + { + id: 1, + primary: 'Brunch this week?', + secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat", + person: '/static/images/avatar/5.jpg', + }, + { + id: 2, + primary: 'Birthday Gift', + secondary: `Do you have a suggestion for a good present for John on his work + anniversary. I am really confused & would love your thoughts on it.`, + person: '/static/images/avatar/1.jpg', + }, + { + id: 3, + primary: 'Recipe to try', + secondary: 'I am try out this new BBQ recipe, I think this might be amazing', + person: '/static/images/avatar/2.jpg', + }, + { + id: 4, + primary: 'Yes!', + secondary: 'I have the tickets to the ReactConf for this year.', + person: '/static/images/avatar/3.jpg', + }, + { + id: 5, + primary: "Doctor's Appointment", + secondary: 'My appointment for the doctor was rescheduled for next Saturday.', + person: '/static/images/avatar/4.jpg', + }, + { + id: 6, + primary: 'Discussion', + secondary: `Menus that are generated by the bottom app bar (such as a bottom + navigation drawer or overflow menu) open as bottom sheets at a higher elevation + than the bar.`, + person: '/static/images/avatar/5.jpg', + }, + { + id: 7, + primary: 'Summer BBQ', + secondary: `Who wants to have a cookout this weekend? I just got some furniture + for my backyard and would love to fire up the grill.`, + person: '/static/images/avatar/1.jpg', + }, +]; + +export interface Props extends WithStyles {} + +function BottomAppBar(props: Props) { + const { classes } = props; + return ( + + + + + Inbox + + + {messages.map(({ id, primary, secondary, person }) => ( + + {id === 1 && Today} + {id === 3 && Yesterday} + + + + + + ))} + + + + + + + + + + +
+ + + + + + +
+ + + + ); +} + +BottomAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(BottomAppBar); diff --git a/docs/src/pages/demos/app-bar/BottomAppBar-es.tsx b/docs/src/pages/demos/app-bar/BottomAppBar-es.tsx new file mode 100644 index 00000000000000..f2b34cc86143ff --- /dev/null +++ b/docs/src/pages/demos/app-bar/BottomAppBar-es.tsx @@ -0,0 +1,154 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import Paper from '@material-ui/core/Paper'; +import Fab from '@material-ui/core/Fab'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import Avatar from '@material-ui/core/Avatar'; +import MenuIcon from '@material-ui/icons/Menu'; +import AddIcon from '@material-ui/icons/Add'; +import SearchIcon from '@material-ui/icons/Search'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = (theme: Theme) => + createStyles({ + text: { + paddingTop: theme.spacing.unit * 2, + paddingLeft: theme.spacing.unit * 2, + paddingRight: theme.spacing.unit * 2, + }, + paper: { + paddingBottom: 50, + }, + list: { + marginBottom: theme.spacing.unit * 2, + }, + subHeader: { + backgroundColor: theme.palette.background.paper, + }, + appBar: { + top: 'auto', + bottom: 0, + }, + toolbar: { + alignItems: 'center', + justifyContent: 'space-between', + }, + fabButton: { + position: 'absolute', + zIndex: 1, + top: -30, + left: 0, + right: 0, + margin: '0 auto', + }, + }); + +const messages = [ + { + id: 1, + primary: 'Brunch this week?', + secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat", + person: '/static/images/avatar/5.jpg', + }, + { + id: 2, + primary: 'Birthday Gift', + secondary: `Do you have a suggestion for a good present for John on his work + anniversary. I am really confused & would love your thoughts on it.`, + person: '/static/images/avatar/1.jpg', + }, + { + id: 3, + primary: 'Recipe to try', + secondary: 'I am try out this new BBQ recipe, I think this might be amazing', + person: '/static/images/avatar/2.jpg', + }, + { + id: 4, + primary: 'Yes!', + secondary: 'I have the tickets to the ReactConf for this year.', + person: '/static/images/avatar/3.jpg', + }, + { + id: 5, + primary: "Doctor's Appointment", + secondary: 'My appointment for the doctor was rescheduled for next Saturday.', + person: '/static/images/avatar/4.jpg', + }, + { + id: 6, + primary: 'Discussion', + secondary: `Menus that are generated by the bottom app bar (such as a bottom + navigation drawer or overflow menu) open as bottom sheets at a higher elevation + than the bar.`, + person: '/static/images/avatar/5.jpg', + }, + { + id: 7, + primary: 'Summer BBQ', + secondary: `Who wants to have a cookout this weekend? I just got some furniture + for my backyard and would love to fire up the grill.`, + person: '/static/images/avatar/1.jpg', + }, +]; + +export interface Props extends WithStyles {} + +function BottomAppBar(props: Props) { + const { classes } = props; + return ( + + + + + Inbox + + + {messages.map(({ id, primary, secondary, person }) => ( + + {id === 1 && Today} + {id === 3 && Yesterday} + + + + + + ))} + + + + + + + + + + +
+ + + + + + +
+ + + + ); +} + +BottomAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(BottomAppBar); diff --git a/docs/src/pages/demos/app-bar/BottomAppBar-fr.tsx b/docs/src/pages/demos/app-bar/BottomAppBar-fr.tsx new file mode 100644 index 00000000000000..f2b34cc86143ff --- /dev/null +++ b/docs/src/pages/demos/app-bar/BottomAppBar-fr.tsx @@ -0,0 +1,154 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import Paper from '@material-ui/core/Paper'; +import Fab from '@material-ui/core/Fab'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import Avatar from '@material-ui/core/Avatar'; +import MenuIcon from '@material-ui/icons/Menu'; +import AddIcon from '@material-ui/icons/Add'; +import SearchIcon from '@material-ui/icons/Search'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = (theme: Theme) => + createStyles({ + text: { + paddingTop: theme.spacing.unit * 2, + paddingLeft: theme.spacing.unit * 2, + paddingRight: theme.spacing.unit * 2, + }, + paper: { + paddingBottom: 50, + }, + list: { + marginBottom: theme.spacing.unit * 2, + }, + subHeader: { + backgroundColor: theme.palette.background.paper, + }, + appBar: { + top: 'auto', + bottom: 0, + }, + toolbar: { + alignItems: 'center', + justifyContent: 'space-between', + }, + fabButton: { + position: 'absolute', + zIndex: 1, + top: -30, + left: 0, + right: 0, + margin: '0 auto', + }, + }); + +const messages = [ + { + id: 1, + primary: 'Brunch this week?', + secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat", + person: '/static/images/avatar/5.jpg', + }, + { + id: 2, + primary: 'Birthday Gift', + secondary: `Do you have a suggestion for a good present for John on his work + anniversary. I am really confused & would love your thoughts on it.`, + person: '/static/images/avatar/1.jpg', + }, + { + id: 3, + primary: 'Recipe to try', + secondary: 'I am try out this new BBQ recipe, I think this might be amazing', + person: '/static/images/avatar/2.jpg', + }, + { + id: 4, + primary: 'Yes!', + secondary: 'I have the tickets to the ReactConf for this year.', + person: '/static/images/avatar/3.jpg', + }, + { + id: 5, + primary: "Doctor's Appointment", + secondary: 'My appointment for the doctor was rescheduled for next Saturday.', + person: '/static/images/avatar/4.jpg', + }, + { + id: 6, + primary: 'Discussion', + secondary: `Menus that are generated by the bottom app bar (such as a bottom + navigation drawer or overflow menu) open as bottom sheets at a higher elevation + than the bar.`, + person: '/static/images/avatar/5.jpg', + }, + { + id: 7, + primary: 'Summer BBQ', + secondary: `Who wants to have a cookout this weekend? I just got some furniture + for my backyard and would love to fire up the grill.`, + person: '/static/images/avatar/1.jpg', + }, +]; + +export interface Props extends WithStyles {} + +function BottomAppBar(props: Props) { + const { classes } = props; + return ( + + + + + Inbox + + + {messages.map(({ id, primary, secondary, person }) => ( + + {id === 1 && Today} + {id === 3 && Yesterday} + + + + + + ))} + + + + + + + + + + +
+ + + + + + +
+ + + + ); +} + +BottomAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(BottomAppBar); diff --git a/docs/src/pages/demos/app-bar/BottomAppBar-ja.tsx b/docs/src/pages/demos/app-bar/BottomAppBar-ja.tsx new file mode 100644 index 00000000000000..f2b34cc86143ff --- /dev/null +++ b/docs/src/pages/demos/app-bar/BottomAppBar-ja.tsx @@ -0,0 +1,154 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import Paper from '@material-ui/core/Paper'; +import Fab from '@material-ui/core/Fab'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import Avatar from '@material-ui/core/Avatar'; +import MenuIcon from '@material-ui/icons/Menu'; +import AddIcon from '@material-ui/icons/Add'; +import SearchIcon from '@material-ui/icons/Search'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = (theme: Theme) => + createStyles({ + text: { + paddingTop: theme.spacing.unit * 2, + paddingLeft: theme.spacing.unit * 2, + paddingRight: theme.spacing.unit * 2, + }, + paper: { + paddingBottom: 50, + }, + list: { + marginBottom: theme.spacing.unit * 2, + }, + subHeader: { + backgroundColor: theme.palette.background.paper, + }, + appBar: { + top: 'auto', + bottom: 0, + }, + toolbar: { + alignItems: 'center', + justifyContent: 'space-between', + }, + fabButton: { + position: 'absolute', + zIndex: 1, + top: -30, + left: 0, + right: 0, + margin: '0 auto', + }, + }); + +const messages = [ + { + id: 1, + primary: 'Brunch this week?', + secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat", + person: '/static/images/avatar/5.jpg', + }, + { + id: 2, + primary: 'Birthday Gift', + secondary: `Do you have a suggestion for a good present for John on his work + anniversary. I am really confused & would love your thoughts on it.`, + person: '/static/images/avatar/1.jpg', + }, + { + id: 3, + primary: 'Recipe to try', + secondary: 'I am try out this new BBQ recipe, I think this might be amazing', + person: '/static/images/avatar/2.jpg', + }, + { + id: 4, + primary: 'Yes!', + secondary: 'I have the tickets to the ReactConf for this year.', + person: '/static/images/avatar/3.jpg', + }, + { + id: 5, + primary: "Doctor's Appointment", + secondary: 'My appointment for the doctor was rescheduled for next Saturday.', + person: '/static/images/avatar/4.jpg', + }, + { + id: 6, + primary: 'Discussion', + secondary: `Menus that are generated by the bottom app bar (such as a bottom + navigation drawer or overflow menu) open as bottom sheets at a higher elevation + than the bar.`, + person: '/static/images/avatar/5.jpg', + }, + { + id: 7, + primary: 'Summer BBQ', + secondary: `Who wants to have a cookout this weekend? I just got some furniture + for my backyard and would love to fire up the grill.`, + person: '/static/images/avatar/1.jpg', + }, +]; + +export interface Props extends WithStyles {} + +function BottomAppBar(props: Props) { + const { classes } = props; + return ( + + + + + Inbox + + + {messages.map(({ id, primary, secondary, person }) => ( + + {id === 1 && Today} + {id === 3 && Yesterday} + + + + + + ))} + + + + + + + + + + +
+ + + + + + +
+ + + + ); +} + +BottomAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(BottomAppBar); diff --git a/docs/src/pages/demos/app-bar/BottomAppBar-pt.tsx b/docs/src/pages/demos/app-bar/BottomAppBar-pt.tsx new file mode 100644 index 00000000000000..f2b34cc86143ff --- /dev/null +++ b/docs/src/pages/demos/app-bar/BottomAppBar-pt.tsx @@ -0,0 +1,154 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import Paper from '@material-ui/core/Paper'; +import Fab from '@material-ui/core/Fab'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import Avatar from '@material-ui/core/Avatar'; +import MenuIcon from '@material-ui/icons/Menu'; +import AddIcon from '@material-ui/icons/Add'; +import SearchIcon from '@material-ui/icons/Search'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = (theme: Theme) => + createStyles({ + text: { + paddingTop: theme.spacing.unit * 2, + paddingLeft: theme.spacing.unit * 2, + paddingRight: theme.spacing.unit * 2, + }, + paper: { + paddingBottom: 50, + }, + list: { + marginBottom: theme.spacing.unit * 2, + }, + subHeader: { + backgroundColor: theme.palette.background.paper, + }, + appBar: { + top: 'auto', + bottom: 0, + }, + toolbar: { + alignItems: 'center', + justifyContent: 'space-between', + }, + fabButton: { + position: 'absolute', + zIndex: 1, + top: -30, + left: 0, + right: 0, + margin: '0 auto', + }, + }); + +const messages = [ + { + id: 1, + primary: 'Brunch this week?', + secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat", + person: '/static/images/avatar/5.jpg', + }, + { + id: 2, + primary: 'Birthday Gift', + secondary: `Do you have a suggestion for a good present for John on his work + anniversary. I am really confused & would love your thoughts on it.`, + person: '/static/images/avatar/1.jpg', + }, + { + id: 3, + primary: 'Recipe to try', + secondary: 'I am try out this new BBQ recipe, I think this might be amazing', + person: '/static/images/avatar/2.jpg', + }, + { + id: 4, + primary: 'Yes!', + secondary: 'I have the tickets to the ReactConf for this year.', + person: '/static/images/avatar/3.jpg', + }, + { + id: 5, + primary: "Doctor's Appointment", + secondary: 'My appointment for the doctor was rescheduled for next Saturday.', + person: '/static/images/avatar/4.jpg', + }, + { + id: 6, + primary: 'Discussion', + secondary: `Menus that are generated by the bottom app bar (such as a bottom + navigation drawer or overflow menu) open as bottom sheets at a higher elevation + than the bar.`, + person: '/static/images/avatar/5.jpg', + }, + { + id: 7, + primary: 'Summer BBQ', + secondary: `Who wants to have a cookout this weekend? I just got some furniture + for my backyard and would love to fire up the grill.`, + person: '/static/images/avatar/1.jpg', + }, +]; + +export interface Props extends WithStyles {} + +function BottomAppBar(props: Props) { + const { classes } = props; + return ( + + + + + Inbox + + + {messages.map(({ id, primary, secondary, person }) => ( + + {id === 1 && Today} + {id === 3 && Yesterday} + + + + + + ))} + + + + + + + + + + +
+ + + + + + +
+ + + + ); +} + +BottomAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(BottomAppBar); diff --git a/docs/src/pages/demos/app-bar/BottomAppBar-ru.tsx b/docs/src/pages/demos/app-bar/BottomAppBar-ru.tsx new file mode 100644 index 00000000000000..f2b34cc86143ff --- /dev/null +++ b/docs/src/pages/demos/app-bar/BottomAppBar-ru.tsx @@ -0,0 +1,154 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import Paper from '@material-ui/core/Paper'; +import Fab from '@material-ui/core/Fab'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import Avatar from '@material-ui/core/Avatar'; +import MenuIcon from '@material-ui/icons/Menu'; +import AddIcon from '@material-ui/icons/Add'; +import SearchIcon from '@material-ui/icons/Search'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = (theme: Theme) => + createStyles({ + text: { + paddingTop: theme.spacing.unit * 2, + paddingLeft: theme.spacing.unit * 2, + paddingRight: theme.spacing.unit * 2, + }, + paper: { + paddingBottom: 50, + }, + list: { + marginBottom: theme.spacing.unit * 2, + }, + subHeader: { + backgroundColor: theme.palette.background.paper, + }, + appBar: { + top: 'auto', + bottom: 0, + }, + toolbar: { + alignItems: 'center', + justifyContent: 'space-between', + }, + fabButton: { + position: 'absolute', + zIndex: 1, + top: -30, + left: 0, + right: 0, + margin: '0 auto', + }, + }); + +const messages = [ + { + id: 1, + primary: 'Brunch this week?', + secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat", + person: '/static/images/avatar/5.jpg', + }, + { + id: 2, + primary: 'Birthday Gift', + secondary: `Do you have a suggestion for a good present for John on his work + anniversary. I am really confused & would love your thoughts on it.`, + person: '/static/images/avatar/1.jpg', + }, + { + id: 3, + primary: 'Recipe to try', + secondary: 'I am try out this new BBQ recipe, I think this might be amazing', + person: '/static/images/avatar/2.jpg', + }, + { + id: 4, + primary: 'Yes!', + secondary: 'I have the tickets to the ReactConf for this year.', + person: '/static/images/avatar/3.jpg', + }, + { + id: 5, + primary: "Doctor's Appointment", + secondary: 'My appointment for the doctor was rescheduled for next Saturday.', + person: '/static/images/avatar/4.jpg', + }, + { + id: 6, + primary: 'Discussion', + secondary: `Menus that are generated by the bottom app bar (such as a bottom + navigation drawer or overflow menu) open as bottom sheets at a higher elevation + than the bar.`, + person: '/static/images/avatar/5.jpg', + }, + { + id: 7, + primary: 'Summer BBQ', + secondary: `Who wants to have a cookout this weekend? I just got some furniture + for my backyard and would love to fire up the grill.`, + person: '/static/images/avatar/1.jpg', + }, +]; + +export interface Props extends WithStyles {} + +function BottomAppBar(props: Props) { + const { classes } = props; + return ( + + + + + Inbox + + + {messages.map(({ id, primary, secondary, person }) => ( + + {id === 1 && Today} + {id === 3 && Yesterday} + + + + + + ))} + + + + + + + + + + +
+ + + + + + +
+ + + + ); +} + +BottomAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(BottomAppBar); diff --git a/docs/src/pages/demos/app-bar/BottomAppBar-zh.tsx b/docs/src/pages/demos/app-bar/BottomAppBar-zh.tsx new file mode 100644 index 00000000000000..f2b34cc86143ff --- /dev/null +++ b/docs/src/pages/demos/app-bar/BottomAppBar-zh.tsx @@ -0,0 +1,154 @@ +import React, { Fragment } from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import CssBaseline from '@material-ui/core/CssBaseline'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import Paper from '@material-ui/core/Paper'; +import Fab from '@material-ui/core/Fab'; +import List from '@material-ui/core/List'; +import ListItem from '@material-ui/core/ListItem'; +import ListItemText from '@material-ui/core/ListItemText'; +import ListSubheader from '@material-ui/core/ListSubheader'; +import Avatar from '@material-ui/core/Avatar'; +import MenuIcon from '@material-ui/icons/Menu'; +import AddIcon from '@material-ui/icons/Add'; +import SearchIcon from '@material-ui/icons/Search'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = (theme: Theme) => + createStyles({ + text: { + paddingTop: theme.spacing.unit * 2, + paddingLeft: theme.spacing.unit * 2, + paddingRight: theme.spacing.unit * 2, + }, + paper: { + paddingBottom: 50, + }, + list: { + marginBottom: theme.spacing.unit * 2, + }, + subHeader: { + backgroundColor: theme.palette.background.paper, + }, + appBar: { + top: 'auto', + bottom: 0, + }, + toolbar: { + alignItems: 'center', + justifyContent: 'space-between', + }, + fabButton: { + position: 'absolute', + zIndex: 1, + top: -30, + left: 0, + right: 0, + margin: '0 auto', + }, + }); + +const messages = [ + { + id: 1, + primary: 'Brunch this week?', + secondary: "I'll be in the neighbourhood this week. Let's grab a bite to eat", + person: '/static/images/avatar/5.jpg', + }, + { + id: 2, + primary: 'Birthday Gift', + secondary: `Do you have a suggestion for a good present for John on his work + anniversary. I am really confused & would love your thoughts on it.`, + person: '/static/images/avatar/1.jpg', + }, + { + id: 3, + primary: 'Recipe to try', + secondary: 'I am try out this new BBQ recipe, I think this might be amazing', + person: '/static/images/avatar/2.jpg', + }, + { + id: 4, + primary: 'Yes!', + secondary: 'I have the tickets to the ReactConf for this year.', + person: '/static/images/avatar/3.jpg', + }, + { + id: 5, + primary: "Doctor's Appointment", + secondary: 'My appointment for the doctor was rescheduled for next Saturday.', + person: '/static/images/avatar/4.jpg', + }, + { + id: 6, + primary: 'Discussion', + secondary: `Menus that are generated by the bottom app bar (such as a bottom + navigation drawer or overflow menu) open as bottom sheets at a higher elevation + than the bar.`, + person: '/static/images/avatar/5.jpg', + }, + { + id: 7, + primary: 'Summer BBQ', + secondary: `Who wants to have a cookout this weekend? I just got some furniture + for my backyard and would love to fire up the grill.`, + person: '/static/images/avatar/1.jpg', + }, +]; + +export interface Props extends WithStyles {} + +function BottomAppBar(props: Props) { + const { classes } = props; + return ( + + + + + Inbox + + + {messages.map(({ id, primary, secondary, person }) => ( + + {id === 1 && Today} + {id === 3 && Yesterday} + + + + + + ))} + + + + + + + + + + +
+ + + + + + +
+ + + + ); +} + +BottomAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(BottomAppBar); diff --git a/docs/src/pages/demos/app-bar/ButtonAppBar-de.tsx b/docs/src/pages/demos/app-bar/ButtonAppBar-de.tsx new file mode 100644 index 00000000000000..f8baad446bb5a9 --- /dev/null +++ b/docs/src/pages/demos/app-bar/ButtonAppBar-de.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +export interface Props extends WithStyles {} + +function ButtonAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + News + + + + +
+ ); +} + +ButtonAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(ButtonAppBar); diff --git a/docs/src/pages/demos/app-bar/ButtonAppBar-es.tsx b/docs/src/pages/demos/app-bar/ButtonAppBar-es.tsx new file mode 100644 index 00000000000000..f8baad446bb5a9 --- /dev/null +++ b/docs/src/pages/demos/app-bar/ButtonAppBar-es.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +export interface Props extends WithStyles {} + +function ButtonAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + News + + + + +
+ ); +} + +ButtonAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(ButtonAppBar); diff --git a/docs/src/pages/demos/app-bar/ButtonAppBar-fr.tsx b/docs/src/pages/demos/app-bar/ButtonAppBar-fr.tsx new file mode 100644 index 00000000000000..f8baad446bb5a9 --- /dev/null +++ b/docs/src/pages/demos/app-bar/ButtonAppBar-fr.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +export interface Props extends WithStyles {} + +function ButtonAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + News + + + + +
+ ); +} + +ButtonAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(ButtonAppBar); diff --git a/docs/src/pages/demos/app-bar/ButtonAppBar-ja.tsx b/docs/src/pages/demos/app-bar/ButtonAppBar-ja.tsx new file mode 100644 index 00000000000000..f8baad446bb5a9 --- /dev/null +++ b/docs/src/pages/demos/app-bar/ButtonAppBar-ja.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +export interface Props extends WithStyles {} + +function ButtonAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + News + + + + +
+ ); +} + +ButtonAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(ButtonAppBar); diff --git a/docs/src/pages/demos/app-bar/ButtonAppBar-pt.tsx b/docs/src/pages/demos/app-bar/ButtonAppBar-pt.tsx new file mode 100644 index 00000000000000..f8baad446bb5a9 --- /dev/null +++ b/docs/src/pages/demos/app-bar/ButtonAppBar-pt.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +export interface Props extends WithStyles {} + +function ButtonAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + News + + + + +
+ ); +} + +ButtonAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(ButtonAppBar); diff --git a/docs/src/pages/demos/app-bar/ButtonAppBar-ru.tsx b/docs/src/pages/demos/app-bar/ButtonAppBar-ru.tsx new file mode 100644 index 00000000000000..f8baad446bb5a9 --- /dev/null +++ b/docs/src/pages/demos/app-bar/ButtonAppBar-ru.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +export interface Props extends WithStyles {} + +function ButtonAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + News + + + + +
+ ); +} + +ButtonAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(ButtonAppBar); diff --git a/docs/src/pages/demos/app-bar/ButtonAppBar-zh.tsx b/docs/src/pages/demos/app-bar/ButtonAppBar-zh.tsx new file mode 100644 index 00000000000000..ae046f79e2416b --- /dev/null +++ b/docs/src/pages/demos/app-bar/ButtonAppBar-zh.tsx @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import Button from '@material-ui/core/Button'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + 扩展: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +export interface Props extends WithStyles {} + +function ButtonAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + News + + + + +
+ ); +} + +ButtonAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(ButtonAppBar); diff --git a/docs/src/pages/demos/app-bar/DenseAppBar-de.tsx b/docs/src/pages/demos/app-bar/DenseAppBar-de.tsx new file mode 100644 index 00000000000000..0709fd96f6cc6c --- /dev/null +++ b/docs/src/pages/demos/app-bar/DenseAppBar-de.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -18, + marginRight: 10, + }, +}); + +export interface Props extends WithStyles {} + +function DenseAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + Photos + + + +
+ ); +} + +DenseAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(DenseAppBar); diff --git a/docs/src/pages/demos/app-bar/DenseAppBar-es.tsx b/docs/src/pages/demos/app-bar/DenseAppBar-es.tsx new file mode 100644 index 00000000000000..0709fd96f6cc6c --- /dev/null +++ b/docs/src/pages/demos/app-bar/DenseAppBar-es.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -18, + marginRight: 10, + }, +}); + +export interface Props extends WithStyles {} + +function DenseAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + Photos + + + +
+ ); +} + +DenseAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(DenseAppBar); diff --git a/docs/src/pages/demos/app-bar/DenseAppBar-fr.tsx b/docs/src/pages/demos/app-bar/DenseAppBar-fr.tsx new file mode 100644 index 00000000000000..0709fd96f6cc6c --- /dev/null +++ b/docs/src/pages/demos/app-bar/DenseAppBar-fr.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -18, + marginRight: 10, + }, +}); + +export interface Props extends WithStyles {} + +function DenseAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + Photos + + + +
+ ); +} + +DenseAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(DenseAppBar); diff --git a/docs/src/pages/demos/app-bar/DenseAppBar-ja.tsx b/docs/src/pages/demos/app-bar/DenseAppBar-ja.tsx new file mode 100644 index 00000000000000..0709fd96f6cc6c --- /dev/null +++ b/docs/src/pages/demos/app-bar/DenseAppBar-ja.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -18, + marginRight: 10, + }, +}); + +export interface Props extends WithStyles {} + +function DenseAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + Photos + + + +
+ ); +} + +DenseAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(DenseAppBar); diff --git a/docs/src/pages/demos/app-bar/DenseAppBar-pt.tsx b/docs/src/pages/demos/app-bar/DenseAppBar-pt.tsx new file mode 100644 index 00000000000000..0709fd96f6cc6c --- /dev/null +++ b/docs/src/pages/demos/app-bar/DenseAppBar-pt.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -18, + marginRight: 10, + }, +}); + +export interface Props extends WithStyles {} + +function DenseAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + Photos + + + +
+ ); +} + +DenseAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(DenseAppBar); diff --git a/docs/src/pages/demos/app-bar/DenseAppBar-ru.tsx b/docs/src/pages/demos/app-bar/DenseAppBar-ru.tsx new file mode 100644 index 00000000000000..0709fd96f6cc6c --- /dev/null +++ b/docs/src/pages/demos/app-bar/DenseAppBar-ru.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -18, + marginRight: 10, + }, +}); + +export interface Props extends WithStyles {} + +function DenseAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + Photos + + + +
+ ); +} + +DenseAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(DenseAppBar); diff --git a/docs/src/pages/demos/app-bar/DenseAppBar-zh.tsx b/docs/src/pages/demos/app-bar/DenseAppBar-zh.tsx new file mode 100644 index 00000000000000..0709fd96f6cc6c --- /dev/null +++ b/docs/src/pages/demos/app-bar/DenseAppBar-zh.tsx @@ -0,0 +1,44 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -18, + marginRight: 10, + }, +}); + +export interface Props extends WithStyles {} + +function DenseAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + Photos + + + +
+ ); +} + +DenseAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(DenseAppBar); diff --git a/docs/src/pages/demos/app-bar/MenuAppBar-de.tsx b/docs/src/pages/demos/app-bar/MenuAppBar-de.tsx new file mode 100644 index 00000000000000..6036d28fb13eaa --- /dev/null +++ b/docs/src/pages/demos/app-bar/MenuAppBar-de.tsx @@ -0,0 +1,117 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import Switch from '@material-ui/core/Switch'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormGroup from '@material-ui/core/FormGroup'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +export interface Props extends WithStyles {} + +export interface State { + auth: boolean; + anchorEl: null | HTMLElement; +} + +class MenuAppBar extends React.Component { + state: State = { + auth: true, + anchorEl: null, + }; + + handleChange = (event: React.ChangeEvent) => { + this.setState({ auth: event.target.checked }); + }; + + handleMenu = (event: React.MouseEvent) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleClose = () => { + this.setState({ anchorEl: null }); + }; + + render() { + const { classes } = this.props; + const { auth, anchorEl } = this.state; + const open = Boolean(anchorEl); + + return ( +
+ + + } + label={auth ? 'Logout' : 'Login'} + /> + + + + + + + + Photos + + {auth && ( +
+ + + + + Profile + My account + +
+ )} + + +
+ ); + } +} + +(MenuAppBar as React.ComponentClass).propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(MenuAppBar); diff --git a/docs/src/pages/demos/app-bar/MenuAppBar-es.tsx b/docs/src/pages/demos/app-bar/MenuAppBar-es.tsx new file mode 100644 index 00000000000000..6036d28fb13eaa --- /dev/null +++ b/docs/src/pages/demos/app-bar/MenuAppBar-es.tsx @@ -0,0 +1,117 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import Switch from '@material-ui/core/Switch'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormGroup from '@material-ui/core/FormGroup'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +export interface Props extends WithStyles {} + +export interface State { + auth: boolean; + anchorEl: null | HTMLElement; +} + +class MenuAppBar extends React.Component { + state: State = { + auth: true, + anchorEl: null, + }; + + handleChange = (event: React.ChangeEvent) => { + this.setState({ auth: event.target.checked }); + }; + + handleMenu = (event: React.MouseEvent) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleClose = () => { + this.setState({ anchorEl: null }); + }; + + render() { + const { classes } = this.props; + const { auth, anchorEl } = this.state; + const open = Boolean(anchorEl); + + return ( +
+ + + } + label={auth ? 'Logout' : 'Login'} + /> + + + + + + + + Photos + + {auth && ( +
+ + + + + Profile + My account + +
+ )} + + +
+ ); + } +} + +(MenuAppBar as React.ComponentClass).propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(MenuAppBar); diff --git a/docs/src/pages/demos/app-bar/MenuAppBar-fr.tsx b/docs/src/pages/demos/app-bar/MenuAppBar-fr.tsx new file mode 100644 index 00000000000000..6036d28fb13eaa --- /dev/null +++ b/docs/src/pages/demos/app-bar/MenuAppBar-fr.tsx @@ -0,0 +1,117 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import Switch from '@material-ui/core/Switch'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormGroup from '@material-ui/core/FormGroup'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +export interface Props extends WithStyles {} + +export interface State { + auth: boolean; + anchorEl: null | HTMLElement; +} + +class MenuAppBar extends React.Component { + state: State = { + auth: true, + anchorEl: null, + }; + + handleChange = (event: React.ChangeEvent) => { + this.setState({ auth: event.target.checked }); + }; + + handleMenu = (event: React.MouseEvent) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleClose = () => { + this.setState({ anchorEl: null }); + }; + + render() { + const { classes } = this.props; + const { auth, anchorEl } = this.state; + const open = Boolean(anchorEl); + + return ( +
+ + + } + label={auth ? 'Logout' : 'Login'} + /> + + + + + + + + Photos + + {auth && ( +
+ + + + + Profile + My account + +
+ )} + + +
+ ); + } +} + +(MenuAppBar as React.ComponentClass).propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(MenuAppBar); diff --git a/docs/src/pages/demos/app-bar/MenuAppBar-ja.tsx b/docs/src/pages/demos/app-bar/MenuAppBar-ja.tsx new file mode 100644 index 00000000000000..6036d28fb13eaa --- /dev/null +++ b/docs/src/pages/demos/app-bar/MenuAppBar-ja.tsx @@ -0,0 +1,117 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import Switch from '@material-ui/core/Switch'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormGroup from '@material-ui/core/FormGroup'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +export interface Props extends WithStyles {} + +export interface State { + auth: boolean; + anchorEl: null | HTMLElement; +} + +class MenuAppBar extends React.Component { + state: State = { + auth: true, + anchorEl: null, + }; + + handleChange = (event: React.ChangeEvent) => { + this.setState({ auth: event.target.checked }); + }; + + handleMenu = (event: React.MouseEvent) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleClose = () => { + this.setState({ anchorEl: null }); + }; + + render() { + const { classes } = this.props; + const { auth, anchorEl } = this.state; + const open = Boolean(anchorEl); + + return ( +
+ + + } + label={auth ? 'Logout' : 'Login'} + /> + + + + + + + + Photos + + {auth && ( +
+ + + + + Profile + My account + +
+ )} + + +
+ ); + } +} + +(MenuAppBar as React.ComponentClass).propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(MenuAppBar); diff --git a/docs/src/pages/demos/app-bar/MenuAppBar-pt.tsx b/docs/src/pages/demos/app-bar/MenuAppBar-pt.tsx new file mode 100644 index 00000000000000..6036d28fb13eaa --- /dev/null +++ b/docs/src/pages/demos/app-bar/MenuAppBar-pt.tsx @@ -0,0 +1,117 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import Switch from '@material-ui/core/Switch'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormGroup from '@material-ui/core/FormGroup'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +export interface Props extends WithStyles {} + +export interface State { + auth: boolean; + anchorEl: null | HTMLElement; +} + +class MenuAppBar extends React.Component { + state: State = { + auth: true, + anchorEl: null, + }; + + handleChange = (event: React.ChangeEvent) => { + this.setState({ auth: event.target.checked }); + }; + + handleMenu = (event: React.MouseEvent) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleClose = () => { + this.setState({ anchorEl: null }); + }; + + render() { + const { classes } = this.props; + const { auth, anchorEl } = this.state; + const open = Boolean(anchorEl); + + return ( +
+ + + } + label={auth ? 'Logout' : 'Login'} + /> + + + + + + + + Photos + + {auth && ( +
+ + + + + Profile + My account + +
+ )} + + +
+ ); + } +} + +(MenuAppBar as React.ComponentClass).propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(MenuAppBar); diff --git a/docs/src/pages/demos/app-bar/MenuAppBar-ru.tsx b/docs/src/pages/demos/app-bar/MenuAppBar-ru.tsx new file mode 100644 index 00000000000000..6036d28fb13eaa --- /dev/null +++ b/docs/src/pages/demos/app-bar/MenuAppBar-ru.tsx @@ -0,0 +1,117 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import Switch from '@material-ui/core/Switch'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormGroup from '@material-ui/core/FormGroup'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +export interface Props extends WithStyles {} + +export interface State { + auth: boolean; + anchorEl: null | HTMLElement; +} + +class MenuAppBar extends React.Component { + state: State = { + auth: true, + anchorEl: null, + }; + + handleChange = (event: React.ChangeEvent) => { + this.setState({ auth: event.target.checked }); + }; + + handleMenu = (event: React.MouseEvent) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleClose = () => { + this.setState({ anchorEl: null }); + }; + + render() { + const { classes } = this.props; + const { auth, anchorEl } = this.state; + const open = Boolean(anchorEl); + + return ( +
+ + + } + label={auth ? 'Logout' : 'Login'} + /> + + + + + + + + Photos + + {auth && ( +
+ + + + + Profile + My account + +
+ )} + + +
+ ); + } +} + +(MenuAppBar as React.ComponentClass).propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(MenuAppBar); diff --git a/docs/src/pages/demos/app-bar/MenuAppBar-zh.tsx b/docs/src/pages/demos/app-bar/MenuAppBar-zh.tsx new file mode 100644 index 00000000000000..14ba7a542a3c11 --- /dev/null +++ b/docs/src/pages/demos/app-bar/MenuAppBar-zh.tsx @@ -0,0 +1,117 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; +import IconButton from '@material-ui/core/IconButton'; +import MenuIcon from '@material-ui/icons/Menu'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import Switch from '@material-ui/core/Switch'; +import FormControlLabel from '@material-ui/core/FormControlLabel'; +import FormGroup from '@material-ui/core/FormGroup'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; + +const styles = createStyles({ + root: { + flexGrow: 1, + }, + 扩展: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, +}); + +export interface Props extends WithStyles {} + +export interface State { + auth: boolean; + anchorEl: null | HTMLElement; +} + +class MenuAppBar extends React.Component { + state: State = { + auth: true, + anchorEl: null, + }; + + handleChange = (event: React.ChangeEvent) => { + this.setState({ auth: event.target.checked }); + }; + + handleMenu = (event: React.MouseEvent) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleClose = () => { + this.setState({ anchorEl: null }); + }; + + render() { + const { classes } = this.props; + const { auth, anchorEl } = this.state; + const open = Boolean(anchorEl); + + return ( +
+ + + } + label={auth ? 'Logout' : 'Login'} + /> + + + + + + + + Photos + + {auth && ( +
+ + + + + Profile + My account + +
+ )} + + +
+ ); + } +} + +(MenuAppBar as React.ComponentClass).propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(MenuAppBar); diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar-de.tsx b/docs/src/pages/demos/app-bar/PrimarySearchAppBar-de.tsx new file mode 100644 index 00000000000000..56ee618b011979 --- /dev/null +++ b/docs/src/pages/demos/app-bar/PrimarySearchAppBar-de.tsx @@ -0,0 +1,234 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import Badge from '@material-ui/core/Badge'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import MailIcon from '@material-ui/icons/Mail'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginRight: theme.spacing.unit * 2, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit * 3, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('md')]: { + width: 200, + }, + }, + sectionDesktop: { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'flex', + }, + }, + sectionMobile: { + display: 'flex', + [theme.breakpoints.up('md')]: { + display: 'none', + }, + }, + }); + +export interface Props extends WithStyles {} + +interface State { + anchorEl: null | HTMLElement; + mobileMoreAnchorEl: null | HTMLElement; +} + +class PrimarySearchAppBar extends React.Component { + state: State = { + anchorEl: null, + mobileMoreAnchorEl: null, + }; + + handleProfileMenuOpen = (event: React.MouseEvent) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleMenuClose = () => { + this.setState({ anchorEl: null }); + this.handleMobileMenuClose(); + }; + + handleMobileMenuOpen = (event: React.MouseEvent) => { + this.setState({ mobileMoreAnchorEl: event.currentTarget }); + }; + + handleMobileMenuClose = () => { + this.setState({ mobileMoreAnchorEl: null }); + }; + + render() { + const { anchorEl, mobileMoreAnchorEl } = this.state; + const { classes } = this.props; + const isMenuOpen = Boolean(anchorEl); + const isMobileMenuOpen = Boolean(mobileMoreAnchorEl); + + const renderMenu = ( + + Profile + My account + + ); + + const renderMobileMenu = ( + + + + + + + +

Messages

+ + + + + + + +

Notifications

+ + + + + +

Profile

+ + + ); + + return ( +
+ + + + + + + Material-UI + +
+
+ +
+ +
+
+
+ + + + + + + + + + + + + +
+
+ + + +
+ + + {renderMenu} + {renderMobileMenu} +
+ ); + } +} + +(PrimarySearchAppBar as React.ComponentClass).propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(PrimarySearchAppBar); diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar-es.tsx b/docs/src/pages/demos/app-bar/PrimarySearchAppBar-es.tsx new file mode 100644 index 00000000000000..56ee618b011979 --- /dev/null +++ b/docs/src/pages/demos/app-bar/PrimarySearchAppBar-es.tsx @@ -0,0 +1,234 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import Badge from '@material-ui/core/Badge'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import MailIcon from '@material-ui/icons/Mail'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginRight: theme.spacing.unit * 2, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit * 3, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('md')]: { + width: 200, + }, + }, + sectionDesktop: { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'flex', + }, + }, + sectionMobile: { + display: 'flex', + [theme.breakpoints.up('md')]: { + display: 'none', + }, + }, + }); + +export interface Props extends WithStyles {} + +interface State { + anchorEl: null | HTMLElement; + mobileMoreAnchorEl: null | HTMLElement; +} + +class PrimarySearchAppBar extends React.Component { + state: State = { + anchorEl: null, + mobileMoreAnchorEl: null, + }; + + handleProfileMenuOpen = (event: React.MouseEvent) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleMenuClose = () => { + this.setState({ anchorEl: null }); + this.handleMobileMenuClose(); + }; + + handleMobileMenuOpen = (event: React.MouseEvent) => { + this.setState({ mobileMoreAnchorEl: event.currentTarget }); + }; + + handleMobileMenuClose = () => { + this.setState({ mobileMoreAnchorEl: null }); + }; + + render() { + const { anchorEl, mobileMoreAnchorEl } = this.state; + const { classes } = this.props; + const isMenuOpen = Boolean(anchorEl); + const isMobileMenuOpen = Boolean(mobileMoreAnchorEl); + + const renderMenu = ( + + Profile + My account + + ); + + const renderMobileMenu = ( + + + + + + + +

Messages

+ + + + + + + +

Notifications

+ + + + + +

Profile

+ + + ); + + return ( +
+ + + + + + + Material-UI + +
+
+ +
+ +
+
+
+ + + + + + + + + + + + + +
+
+ + + +
+ + + {renderMenu} + {renderMobileMenu} +
+ ); + } +} + +(PrimarySearchAppBar as React.ComponentClass).propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(PrimarySearchAppBar); diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar-fr.tsx b/docs/src/pages/demos/app-bar/PrimarySearchAppBar-fr.tsx new file mode 100644 index 00000000000000..56ee618b011979 --- /dev/null +++ b/docs/src/pages/demos/app-bar/PrimarySearchAppBar-fr.tsx @@ -0,0 +1,234 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import Badge from '@material-ui/core/Badge'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import MailIcon from '@material-ui/icons/Mail'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginRight: theme.spacing.unit * 2, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit * 3, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('md')]: { + width: 200, + }, + }, + sectionDesktop: { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'flex', + }, + }, + sectionMobile: { + display: 'flex', + [theme.breakpoints.up('md')]: { + display: 'none', + }, + }, + }); + +export interface Props extends WithStyles {} + +interface State { + anchorEl: null | HTMLElement; + mobileMoreAnchorEl: null | HTMLElement; +} + +class PrimarySearchAppBar extends React.Component { + state: State = { + anchorEl: null, + mobileMoreAnchorEl: null, + }; + + handleProfileMenuOpen = (event: React.MouseEvent) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleMenuClose = () => { + this.setState({ anchorEl: null }); + this.handleMobileMenuClose(); + }; + + handleMobileMenuOpen = (event: React.MouseEvent) => { + this.setState({ mobileMoreAnchorEl: event.currentTarget }); + }; + + handleMobileMenuClose = () => { + this.setState({ mobileMoreAnchorEl: null }); + }; + + render() { + const { anchorEl, mobileMoreAnchorEl } = this.state; + const { classes } = this.props; + const isMenuOpen = Boolean(anchorEl); + const isMobileMenuOpen = Boolean(mobileMoreAnchorEl); + + const renderMenu = ( + + Profile + My account + + ); + + const renderMobileMenu = ( + + + + + + + +

Messages

+ + + + + + + +

Notifications

+ + + + + +

Profile

+ + + ); + + return ( +
+ + + + + + + Material-UI + +
+
+ +
+ +
+
+
+ + + + + + + + + + + + + +
+
+ + + +
+ + + {renderMenu} + {renderMobileMenu} +
+ ); + } +} + +(PrimarySearchAppBar as React.ComponentClass).propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(PrimarySearchAppBar); diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar-ja.tsx b/docs/src/pages/demos/app-bar/PrimarySearchAppBar-ja.tsx new file mode 100644 index 00000000000000..56ee618b011979 --- /dev/null +++ b/docs/src/pages/demos/app-bar/PrimarySearchAppBar-ja.tsx @@ -0,0 +1,234 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import Badge from '@material-ui/core/Badge'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import MailIcon from '@material-ui/icons/Mail'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginRight: theme.spacing.unit * 2, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit * 3, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('md')]: { + width: 200, + }, + }, + sectionDesktop: { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'flex', + }, + }, + sectionMobile: { + display: 'flex', + [theme.breakpoints.up('md')]: { + display: 'none', + }, + }, + }); + +export interface Props extends WithStyles {} + +interface State { + anchorEl: null | HTMLElement; + mobileMoreAnchorEl: null | HTMLElement; +} + +class PrimarySearchAppBar extends React.Component { + state: State = { + anchorEl: null, + mobileMoreAnchorEl: null, + }; + + handleProfileMenuOpen = (event: React.MouseEvent) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleMenuClose = () => { + this.setState({ anchorEl: null }); + this.handleMobileMenuClose(); + }; + + handleMobileMenuOpen = (event: React.MouseEvent) => { + this.setState({ mobileMoreAnchorEl: event.currentTarget }); + }; + + handleMobileMenuClose = () => { + this.setState({ mobileMoreAnchorEl: null }); + }; + + render() { + const { anchorEl, mobileMoreAnchorEl } = this.state; + const { classes } = this.props; + const isMenuOpen = Boolean(anchorEl); + const isMobileMenuOpen = Boolean(mobileMoreAnchorEl); + + const renderMenu = ( + + Profile + My account + + ); + + const renderMobileMenu = ( + + + + + + + +

Messages

+ + + + + + + +

Notifications

+ + + + + +

Profile

+ + + ); + + return ( +
+ + + + + + + Material-UI + +
+
+ +
+ +
+
+
+ + + + + + + + + + + + + +
+
+ + + +
+ + + {renderMenu} + {renderMobileMenu} +
+ ); + } +} + +(PrimarySearchAppBar as React.ComponentClass).propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(PrimarySearchAppBar); diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar-pt.tsx b/docs/src/pages/demos/app-bar/PrimarySearchAppBar-pt.tsx new file mode 100644 index 00000000000000..56ee618b011979 --- /dev/null +++ b/docs/src/pages/demos/app-bar/PrimarySearchAppBar-pt.tsx @@ -0,0 +1,234 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import Badge from '@material-ui/core/Badge'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import MailIcon from '@material-ui/icons/Mail'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginRight: theme.spacing.unit * 2, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit * 3, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('md')]: { + width: 200, + }, + }, + sectionDesktop: { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'flex', + }, + }, + sectionMobile: { + display: 'flex', + [theme.breakpoints.up('md')]: { + display: 'none', + }, + }, + }); + +export interface Props extends WithStyles {} + +interface State { + anchorEl: null | HTMLElement; + mobileMoreAnchorEl: null | HTMLElement; +} + +class PrimarySearchAppBar extends React.Component { + state: State = { + anchorEl: null, + mobileMoreAnchorEl: null, + }; + + handleProfileMenuOpen = (event: React.MouseEvent) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleMenuClose = () => { + this.setState({ anchorEl: null }); + this.handleMobileMenuClose(); + }; + + handleMobileMenuOpen = (event: React.MouseEvent) => { + this.setState({ mobileMoreAnchorEl: event.currentTarget }); + }; + + handleMobileMenuClose = () => { + this.setState({ mobileMoreAnchorEl: null }); + }; + + render() { + const { anchorEl, mobileMoreAnchorEl } = this.state; + const { classes } = this.props; + const isMenuOpen = Boolean(anchorEl); + const isMobileMenuOpen = Boolean(mobileMoreAnchorEl); + + const renderMenu = ( + + Profile + My account + + ); + + const renderMobileMenu = ( + + + + + + + +

Messages

+ + + + + + + +

Notifications

+ + + + + +

Profile

+ + + ); + + return ( +
+ + + + + + + Material-UI + +
+
+ +
+ +
+
+
+ + + + + + + + + + + + + +
+
+ + + +
+ + + {renderMenu} + {renderMobileMenu} +
+ ); + } +} + +(PrimarySearchAppBar as React.ComponentClass).propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(PrimarySearchAppBar); diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar-ru.tsx b/docs/src/pages/demos/app-bar/PrimarySearchAppBar-ru.tsx new file mode 100644 index 00000000000000..56ee618b011979 --- /dev/null +++ b/docs/src/pages/demos/app-bar/PrimarySearchAppBar-ru.tsx @@ -0,0 +1,234 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import Badge from '@material-ui/core/Badge'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import MailIcon from '@material-ui/icons/Mail'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginRight: theme.spacing.unit * 2, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit * 3, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('md')]: { + width: 200, + }, + }, + sectionDesktop: { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'flex', + }, + }, + sectionMobile: { + display: 'flex', + [theme.breakpoints.up('md')]: { + display: 'none', + }, + }, + }); + +export interface Props extends WithStyles {} + +interface State { + anchorEl: null | HTMLElement; + mobileMoreAnchorEl: null | HTMLElement; +} + +class PrimarySearchAppBar extends React.Component { + state: State = { + anchorEl: null, + mobileMoreAnchorEl: null, + }; + + handleProfileMenuOpen = (event: React.MouseEvent) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleMenuClose = () => { + this.setState({ anchorEl: null }); + this.handleMobileMenuClose(); + }; + + handleMobileMenuOpen = (event: React.MouseEvent) => { + this.setState({ mobileMoreAnchorEl: event.currentTarget }); + }; + + handleMobileMenuClose = () => { + this.setState({ mobileMoreAnchorEl: null }); + }; + + render() { + const { anchorEl, mobileMoreAnchorEl } = this.state; + const { classes } = this.props; + const isMenuOpen = Boolean(anchorEl); + const isMobileMenuOpen = Boolean(mobileMoreAnchorEl); + + const renderMenu = ( + + Profile + My account + + ); + + const renderMobileMenu = ( + + + + + + + +

Messages

+ + + + + + + +

Notifications

+ + + + + +

Profile

+ + + ); + + return ( +
+ + + + + + + Material-UI + +
+
+ +
+ +
+
+
+ + + + + + + + + + + + + +
+
+ + + +
+ + + {renderMenu} + {renderMobileMenu} +
+ ); + } +} + +(PrimarySearchAppBar as React.ComponentClass).propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(PrimarySearchAppBar); diff --git a/docs/src/pages/demos/app-bar/PrimarySearchAppBar-zh.tsx b/docs/src/pages/demos/app-bar/PrimarySearchAppBar-zh.tsx new file mode 100644 index 00000000000000..a23679977d71c4 --- /dev/null +++ b/docs/src/pages/demos/app-bar/PrimarySearchAppBar-zh.tsx @@ -0,0 +1,234 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import Badge from '@material-ui/core/Badge'; +import MenuItem from '@material-ui/core/MenuItem'; +import Menu from '@material-ui/core/Menu'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; +import AccountCircle from '@material-ui/icons/AccountCircle'; +import MailIcon from '@material-ui/icons/Mail'; +import NotificationsIcon from '@material-ui/icons/Notifications'; +import MoreIcon from '@material-ui/icons/MoreVert'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + 扩展: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginRight: theme.spacing.unit * 2, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit * 3, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('md')]: { + width: 200, + }, + }, + sectionDesktop: { + display: 'none', + [theme.breakpoints.up('md')]: { + display: 'flex', + }, + }, + sectionMobile: { + display: 'flex', + [theme.breakpoints.up('md')]: { + display: 'none', + }, + }, + }); + +export interface Props extends WithStyles {} + +interface State { + anchorEl: null | HTMLElement; + mobileMoreAnchorEl: null | HTMLElement; +} + +class PrimarySearchAppBar extends React.Component { + state: State = { + anchorEl: null, + mobileMoreAnchorEl: null, + }; + + handleProfileMenuOpen = (event: React.MouseEvent) => { + this.setState({ anchorEl: event.currentTarget }); + }; + + handleMenuClose = () => { + this.setState({ anchorEl: null }); + this.handleMobileMenuClose(); + }; + + handleMobileMenuOpen = (event: React.MouseEvent) => { + this.setState({ mobileMoreAnchorEl: event.currentTarget }); + }; + + handleMobileMenuClose = () => { + this.setState({ mobileMoreAnchorEl: null }); + }; + + render() { + const { anchorEl, mobileMoreAnchorEl } = this.state; + const { classes } = this.props; + const isMenuOpen = Boolean(anchorEl); + const isMobileMenuOpen = Boolean(mobileMoreAnchorEl); + + const renderMenu = ( + + Profile + My account + + ); + + const renderMobileMenu = ( + + + + + + + +

Messages

+ + + + + + + +

Notifications

+ + + + + +

Profile

+ + + ); + + return ( +
+ + + + + + + Material-UI + +
+
+ +
+ +
+
+
+ + + + + + + + + + + + + +
+
+ + + +
+ + + {renderMenu} + {renderMobileMenu} +
+ ); + } +} + +(PrimarySearchAppBar as React.ComponentClass).propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(PrimarySearchAppBar); diff --git a/docs/src/pages/demos/app-bar/SearchAppBar-de.tsx b/docs/src/pages/demos/app-bar/SearchAppBar-de.tsx new file mode 100644 index 00000000000000..488d6d57c8c22a --- /dev/null +++ b/docs/src/pages/demos/app-bar/SearchAppBar-de.tsx @@ -0,0 +1,111 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('sm')]: { + width: 120, + '&:focus': { + width: 200, + }, + }, + }, + }); + +export interface Props extends WithStyles {} + +function SearchAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + Material-UI + +
+
+
+ +
+ +
+ + +
+ ); +} + +SearchAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SearchAppBar); diff --git a/docs/src/pages/demos/app-bar/SearchAppBar-es.tsx b/docs/src/pages/demos/app-bar/SearchAppBar-es.tsx new file mode 100644 index 00000000000000..488d6d57c8c22a --- /dev/null +++ b/docs/src/pages/demos/app-bar/SearchAppBar-es.tsx @@ -0,0 +1,111 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('sm')]: { + width: 120, + '&:focus': { + width: 200, + }, + }, + }, + }); + +export interface Props extends WithStyles {} + +function SearchAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + Material-UI + +
+
+
+ +
+ +
+ + +
+ ); +} + +SearchAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SearchAppBar); diff --git a/docs/src/pages/demos/app-bar/SearchAppBar-fr.tsx b/docs/src/pages/demos/app-bar/SearchAppBar-fr.tsx new file mode 100644 index 00000000000000..488d6d57c8c22a --- /dev/null +++ b/docs/src/pages/demos/app-bar/SearchAppBar-fr.tsx @@ -0,0 +1,111 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('sm')]: { + width: 120, + '&:focus': { + width: 200, + }, + }, + }, + }); + +export interface Props extends WithStyles {} + +function SearchAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + Material-UI + +
+
+
+ +
+ +
+ + +
+ ); +} + +SearchAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SearchAppBar); diff --git a/docs/src/pages/demos/app-bar/SearchAppBar-ja.tsx b/docs/src/pages/demos/app-bar/SearchAppBar-ja.tsx new file mode 100644 index 00000000000000..488d6d57c8c22a --- /dev/null +++ b/docs/src/pages/demos/app-bar/SearchAppBar-ja.tsx @@ -0,0 +1,111 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('sm')]: { + width: 120, + '&:focus': { + width: 200, + }, + }, + }, + }); + +export interface Props extends WithStyles {} + +function SearchAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + Material-UI + +
+
+
+ +
+ +
+ + +
+ ); +} + +SearchAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SearchAppBar); diff --git a/docs/src/pages/demos/app-bar/SearchAppBar-pt.tsx b/docs/src/pages/demos/app-bar/SearchAppBar-pt.tsx new file mode 100644 index 00000000000000..488d6d57c8c22a --- /dev/null +++ b/docs/src/pages/demos/app-bar/SearchAppBar-pt.tsx @@ -0,0 +1,111 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('sm')]: { + width: 120, + '&:focus': { + width: 200, + }, + }, + }, + }); + +export interface Props extends WithStyles {} + +function SearchAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + Material-UI + +
+
+
+ +
+ +
+ + +
+ ); +} + +SearchAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SearchAppBar); diff --git a/docs/src/pages/demos/app-bar/SearchAppBar-ru.tsx b/docs/src/pages/demos/app-bar/SearchAppBar-ru.tsx new file mode 100644 index 00000000000000..488d6d57c8c22a --- /dev/null +++ b/docs/src/pages/demos/app-bar/SearchAppBar-ru.tsx @@ -0,0 +1,111 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + grow: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('sm')]: { + width: 120, + '&:focus': { + width: 200, + }, + }, + }, + }); + +export interface Props extends WithStyles {} + +function SearchAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + Material-UI + +
+
+
+ +
+ +
+ + +
+ ); +} + +SearchAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SearchAppBar); diff --git a/docs/src/pages/demos/app-bar/SearchAppBar-zh.tsx b/docs/src/pages/demos/app-bar/SearchAppBar-zh.tsx new file mode 100644 index 00000000000000..8b4fe5c2c68ddf --- /dev/null +++ b/docs/src/pages/demos/app-bar/SearchAppBar-zh.tsx @@ -0,0 +1,111 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import IconButton from '@material-ui/core/IconButton'; +import Typography from '@material-ui/core/Typography'; +import InputBase from '@material-ui/core/InputBase'; +import { fade } from '@material-ui/core/styles/colorManipulator'; +import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles'; +import MenuIcon from '@material-ui/icons/Menu'; +import SearchIcon from '@material-ui/icons/Search'; + +const styles = (theme: Theme) => + createStyles({ + root: { + width: '100%', + }, + 扩展: { + flexGrow: 1, + }, + menuButton: { + marginLeft: -12, + marginRight: 20, + }, + title: { + display: 'none', + [theme.breakpoints.up('sm')]: { + display: 'block', + }, + }, + search: { + position: 'relative', + borderRadius: theme.shape.borderRadius, + backgroundColor: fade(theme.palette.common.white, 0.15), + '&:hover': { + backgroundColor: fade(theme.palette.common.white, 0.25), + }, + marginLeft: 0, + width: '100%', + [theme.breakpoints.up('sm')]: { + marginLeft: theme.spacing.unit, + width: 'auto', + }, + }, + searchIcon: { + width: theme.spacing.unit * 9, + height: '100%', + position: 'absolute', + pointerEvents: 'none', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + }, + inputRoot: { + color: 'inherit', + width: '100%', + }, + inputInput: { + paddingTop: theme.spacing.unit, + paddingRight: theme.spacing.unit, + paddingBottom: theme.spacing.unit, + paddingLeft: theme.spacing.unit * 10, + transition: theme.transitions.create('width'), + width: '100%', + [theme.breakpoints.up('sm')]: { + width: 120, + '&:focus': { + width: 200, + }, + }, + }, + }); + +export interface Props extends WithStyles {} + +function SearchAppBar(props: Props) { + const { classes } = props; + return ( +
+ + + + + + + Material-UI + +
+
+
+ +
+ +
+ + +
+ ); +} + +SearchAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SearchAppBar); diff --git a/docs/src/pages/demos/app-bar/SimpleAppBar-de.tsx b/docs/src/pages/demos/app-bar/SimpleAppBar-de.tsx new file mode 100644 index 00000000000000..b181e24de5a743 --- /dev/null +++ b/docs/src/pages/demos/app-bar/SimpleAppBar-de.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; + +const styles = { + root: { + flexGrow: 1, + }, +}; + +export interface Props extends WithStyles {} + +function SimpleAppBar(props: Props) { + const { classes } = props; + + return ( +
+ + + + Photos + + + +
+ ); +} + +SimpleAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SimpleAppBar); diff --git a/docs/src/pages/demos/app-bar/SimpleAppBar-es.tsx b/docs/src/pages/demos/app-bar/SimpleAppBar-es.tsx new file mode 100644 index 00000000000000..b181e24de5a743 --- /dev/null +++ b/docs/src/pages/demos/app-bar/SimpleAppBar-es.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; + +const styles = { + root: { + flexGrow: 1, + }, +}; + +export interface Props extends WithStyles {} + +function SimpleAppBar(props: Props) { + const { classes } = props; + + return ( +
+ + + + Photos + + + +
+ ); +} + +SimpleAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SimpleAppBar); diff --git a/docs/src/pages/demos/app-bar/SimpleAppBar-fr.tsx b/docs/src/pages/demos/app-bar/SimpleAppBar-fr.tsx new file mode 100644 index 00000000000000..b181e24de5a743 --- /dev/null +++ b/docs/src/pages/demos/app-bar/SimpleAppBar-fr.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; + +const styles = { + root: { + flexGrow: 1, + }, +}; + +export interface Props extends WithStyles {} + +function SimpleAppBar(props: Props) { + const { classes } = props; + + return ( +
+ + + + Photos + + + +
+ ); +} + +SimpleAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SimpleAppBar); diff --git a/docs/src/pages/demos/app-bar/SimpleAppBar-ja.tsx b/docs/src/pages/demos/app-bar/SimpleAppBar-ja.tsx new file mode 100644 index 00000000000000..b181e24de5a743 --- /dev/null +++ b/docs/src/pages/demos/app-bar/SimpleAppBar-ja.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; + +const styles = { + root: { + flexGrow: 1, + }, +}; + +export interface Props extends WithStyles {} + +function SimpleAppBar(props: Props) { + const { classes } = props; + + return ( +
+ + + + Photos + + + +
+ ); +} + +SimpleAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SimpleAppBar); diff --git a/docs/src/pages/demos/app-bar/SimpleAppBar-pt.tsx b/docs/src/pages/demos/app-bar/SimpleAppBar-pt.tsx new file mode 100644 index 00000000000000..b181e24de5a743 --- /dev/null +++ b/docs/src/pages/demos/app-bar/SimpleAppBar-pt.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; + +const styles = { + root: { + flexGrow: 1, + }, +}; + +export interface Props extends WithStyles {} + +function SimpleAppBar(props: Props) { + const { classes } = props; + + return ( +
+ + + + Photos + + + +
+ ); +} + +SimpleAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SimpleAppBar); diff --git a/docs/src/pages/demos/app-bar/SimpleAppBar-ru.tsx b/docs/src/pages/demos/app-bar/SimpleAppBar-ru.tsx new file mode 100644 index 00000000000000..b181e24de5a743 --- /dev/null +++ b/docs/src/pages/demos/app-bar/SimpleAppBar-ru.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; + +const styles = { + root: { + flexGrow: 1, + }, +}; + +export interface Props extends WithStyles {} + +function SimpleAppBar(props: Props) { + const { classes } = props; + + return ( +
+ + + + Photos + + + +
+ ); +} + +SimpleAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SimpleAppBar); diff --git a/docs/src/pages/demos/app-bar/SimpleAppBar-zh.tsx b/docs/src/pages/demos/app-bar/SimpleAppBar-zh.tsx new file mode 100644 index 00000000000000..b181e24de5a743 --- /dev/null +++ b/docs/src/pages/demos/app-bar/SimpleAppBar-zh.tsx @@ -0,0 +1,36 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { withStyles, WithStyles } from '@material-ui/core/styles'; +import AppBar from '@material-ui/core/AppBar'; +import Toolbar from '@material-ui/core/Toolbar'; +import Typography from '@material-ui/core/Typography'; + +const styles = { + root: { + flexGrow: 1, + }, +}; + +export interface Props extends WithStyles {} + +function SimpleAppBar(props: Props) { + const { classes } = props; + + return ( +
+ + + + Photos + + + +
+ ); +} + +SimpleAppBar.propTypes = { + classes: PropTypes.object.isRequired, +} as any; + +export default withStyles(styles)(SimpleAppBar); diff --git a/docs/src/pages/demos/app-bar/app-bar-de.md b/docs/src/pages/demos/app-bar/app-bar-de.md index 565a2668d6b42a..03907987156c35 100644 --- a/docs/src/pages/demos/app-bar/app-bar-de.md +++ b/docs/src/pages/demos/app-bar/app-bar-de.md @@ -6,11 +6,11 @@ components: AppBar, Toolbar, Menu

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

-Die [Top-App Bar](https://material.io/design/components/app-bars-top.html) liefert Inhalte und Aktionen auf dem aktuellen Bildschirm. Es wird für Branding, Bildschirmtitel, Navigation und Aktionen verwendet. +Die [obere App Leiste](https://material.io/design/components/app-bars-top.html) liefert Inhalte und Aktionen auf dem aktuellen Bildschirm. Es wird für Branding, Bildschirmtitel, Navigation und Aktionen verwendet. Es kann sich in eine kontextabhängige Aktionsleiste verwandeln oder als Navigationsleiste verwendet werden. -## App Bar mit Tasten +## App Bar mit Schaltflächen {{"demo": "pages/demos/app-bar/ButtonAppBar.js"}} @@ -20,7 +20,7 @@ Es kann sich in eine kontextabhängige Aktionsleiste verwandeln oder als Navigat ## App-Bar mit einem Hauptsuchfeld -A primary searchbar. +Eine primäre Suchleiste. {{"demo": "pages/demos/app-bar/PrimarySearchAppBar.js"}} diff --git a/docs/src/pages/demos/app-bar/app-bar-es.md b/docs/src/pages/demos/app-bar/app-bar-es.md index d2446d4fd5b13b..87e431d443d88a 100644 --- a/docs/src/pages/demos/app-bar/app-bar-es.md +++ b/docs/src/pages/demos/app-bar/app-bar-es.md @@ -1,12 +1,12 @@ --- -title: Componente de React App Bar +title: 'Componente React: App Bar' components: AppBar, Toolbar, Menu --- # App Bar

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

-La [top App Bar](https://material.io/design/components/app-bars-top.html) proveé contenido y acciones relacionadas a la pantalla actual. Es usada para mostrar logotipos de marcas, titulos de pantalla, navegacion y acciones. +La [top App Bar](https://material.io/design/components/app-bars-top.html) provee contenido y acciones relacionados a la pantalla actual. Es usada para mostrar logotipos de marcas, títulos de pantalla, navegación y acciones. Puede transformarse en una barra de acción contextual o ser usada como una barra de navegación. diff --git a/docs/src/pages/demos/app-bar/app-bar-ja.md b/docs/src/pages/demos/app-bar/app-bar-ja.md index 5ddf33a9ca4f43..04c83b02422844 100644 --- a/docs/src/pages/demos/app-bar/app-bar-ja.md +++ b/docs/src/pages/demos/app-bar/app-bar-ja.md @@ -2,42 +2,42 @@ title: App Bar React component components: AppBar, Toolbar, Menu --- -# App Bar +# アプリバー -

The App Bar displays information and actions relating to the current screen.

+

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

-The [top App Bar](https://material.io/design/components/app-bars-top.html) provides content and actions related to the current screen. It’s used for branding, screen titles, navigation, and actions. +[top App Bar](https://material.io/design/components/app-bars-top.html) は、現在の画面に関連するコンテンツとアクションを提供します。 ブランディング、画面タイトル、ナビゲーション、およびアクションに使用されます。 -It can transform into a contextual action bar or used as a navbar. +状況に応じて変化するアクションバーや、ナビゲーションバーとして使用することができます。 -## App Bar with buttons +## ボタン付き App Bar {{"demo": "pages/demos/app-bar/ButtonAppBar.js"}} -## Simple App Bar +## シンプルアプリバー {{"demo": "pages/demos/app-bar/SimpleAppBar.js"}} -## App Bar with a primary search field +## 基本的な検索フィールド付きApp Bar -A primary searchbar. +基本的な検索バー {{"demo": "pages/demos/app-bar/PrimarySearchAppBar.js"}} -## App Bar with menu +## メニュー付き App Bar {{"demo": "pages/demos/app-bar/MenuAppBar.js"}} -## App Bar with search field +## 検索フィールド付きApp Bar -A side searchbar. +サイド検索バー {{"demo": "pages/demos/app-bar/SearchAppBar.js"}} -## Dense (desktop only) +## Dense App Bar (デスクトップのみ) {{"demo": "pages/demos/app-bar/DenseAppBar.js"}} -## Bottom App Bar +## 下部アプリバー {{"demo": "pages/demos/app-bar/BottomAppBar.js", "iframe": true}} \ No newline at end of file diff --git a/docs/src/pages/demos/app-bar/app-bar-pt.md b/docs/src/pages/demos/app-bar/app-bar-pt.md index e0e4f2f2060260..ce940fba6f500b 100644 --- a/docs/src/pages/demos/app-bar/app-bar-pt.md +++ b/docs/src/pages/demos/app-bar/app-bar-pt.md @@ -14,7 +14,7 @@ Ele pode se transformar em uma barra de ações contextual ou utilizado como uma {{"demo": "pages/demos/app-bar/ButtonAppBar.js"}} -## App Bar simples +## Barra de Aplicativos simples {{"demo": "pages/demos/app-bar/SimpleAppBar.js"}} @@ -34,7 +34,7 @@ Uma barra de pesquisa na lateral. {{"demo": "pages/demos/app-bar/SearchAppBar.js"}} -## Denso (apenas para desktop) +## Barra de Aplicativos densa (apenas para desktop) {{"demo": "pages/demos/app-bar/DenseAppBar.js"}} diff --git a/docs/src/pages/demos/app-bar/app-bar-ru.md b/docs/src/pages/demos/app-bar/app-bar-ru.md index fd10ce4bc67021..8c91565bd3a847 100644 --- a/docs/src/pages/demos/app-bar/app-bar-ru.md +++ b/docs/src/pages/demos/app-bar/app-bar-ru.md @@ -1,5 +1,5 @@ --- -title: App Bar React component +title: React-компонент Панель навигации components: AppBar, Toolbar, Menu --- # Панель навигации @@ -34,7 +34,7 @@ components: AppBar, Toolbar, Menu {{"demo": "pages/demos/app-bar/SearchAppBar.js"}} -## Dense (desktop only) +## Dense (Только для компьютеров) {{"demo": "pages/demos/app-bar/DenseAppBar.js"}} diff --git a/docs/src/pages/demos/app-bar/app-bar-zh.md b/docs/src/pages/demos/app-bar/app-bar-zh.md index 703234daa0295c..affd63b8634717 100644 --- a/docs/src/pages/demos/app-bar/app-bar-zh.md +++ b/docs/src/pages/demos/app-bar/app-bar-zh.md @@ -1,6 +1,6 @@ --- -title: React 顶部应用栏组件 -components: AppBar, Toolbar, Menu +title: React的应用栏组件 +components: 应用栏（AppBar）、工具栏(ToolBar)、菜单(Menu) --- # 应用栏 @@ -18,13 +18,13 @@ components: AppBar, Toolbar, Menu {{"demo": "pages/demos/app-bar/SimpleAppBar.js"}} -## 搜索输入框居中的应用栏 +## 带一个主搜索输入框的应用栏 一个主搜索栏 {{"demo": "pages/demos/app-bar/PrimarySearchAppBar.js"}} -## 带菜单的应用栏 +## 带有菜单的应用栏 {{"demo": "pages/demos/app-bar/MenuAppBar.js"}} @@ -34,7 +34,7 @@ components: AppBar, Toolbar, Menu {{"demo": "pages/demos/app-bar/SearchAppBar.js"}} -## 紧凑模式 (仅限桌面) +## 紧凑模式 (仅限桌面模式) {{"demo": "pages/demos/app-bar/DenseAppBar.js"}} diff --git a/docs/src/pages/demos/autocomplete/autocomplete-de.md b/docs/src/pages/demos/autocomplete/autocomplete-de.md index ef44457b150768..5d748a1c587fd5 100644 --- a/docs/src/pages/demos/autocomplete/autocomplete-de.md +++ b/docs/src/pages/demos/autocomplete/autocomplete-de.md @@ -1,18 +1,18 @@ --- -title: Autocomplete React component +title: Autovervollständigungs React-Komponente components: TextField, Paper, MenuItem, Popper --- -# Autocomplete +# Autovervollständigung -

The autocomplete is a normal text input enhanced by a panel of suggested options.

+

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

-Material-UI doesn't provide any high-level API for solving this problem. We encourage people relying on the solutions the React community has built. +Material-UI bietet keine High-Level-API zur Lösung dieses Problems. Wir unterstützen Menschen, die sich auf die Lösungen verlassen, die die React-Community entwickelt hat. ## downshift ![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) -In the following example, we demonstrate how to use [downshift](https://github.com/paypal/downshift). +Im folgenden Beispiel demonstrieren wir, wie man einen [downshift](https://github.com/paypal/downshift) benutzt. {{"demo": "pages/demos/autocomplete/IntegrationDownshift.js"}} @@ -20,7 +20,7 @@ In the following example, we demonstrate how to use [downshift](https://github.c ![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) -In the following example, we demonstrate how to use [react-select](https://github.com/JedWatson/react-select). +Im folgenden Beispiel demonstrieren wir, wie man [react-select](https://github.com/JedWatson/react-select) benutzt. {{"demo": "pages/demos/autocomplete/IntegrationReactSelect.js"}} @@ -28,6 +28,6 @@ In the following example, we demonstrate how to use [react-select](https://githu ![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) -In the following example, we demonstrate how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It's also using [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. +Im folgenden Beispiel demonstrieren wir, wie man [react-autosuggest](https://github.com/moroshko/react-autosuggest) verwendet. Es verwendet auch [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) für die Highlighting-Logik. {{"demo": "pages/demos/autocomplete/IntegrationAutosuggest.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/autocomplete/autocomplete-es.md b/docs/src/pages/demos/autocomplete/autocomplete-es.md index ef44457b150768..0a8f171f815a76 100644 --- a/docs/src/pages/demos/autocomplete/autocomplete-es.md +++ b/docs/src/pages/demos/autocomplete/autocomplete-es.md @@ -1,18 +1,18 @@ --- -title: Autocomplete React component +title: Componente de Autocompletado de React components: TextField, Paper, MenuItem, Popper --- -# Autocomplete +# Autocompletado -

The autocomplete is a normal text input enhanced by a panel of suggested options.

+

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

-Material-UI doesn't provide any high-level API for solving this problem. We encourage people relying on the solutions the React community has built. +Material-UI no provee ninguna API de alto nivel para resolver este problema. Alentamos a las personas a confiar en las soluciones que la comunidad de React ha construido. ## downshift ![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) -In the following example, we demonstrate how to use [downshift](https://github.com/paypal/downshift). +En el siguiente ejemplo se muestra como usar [downshift](https://github.com/paypal/downshift). {{"demo": "pages/demos/autocomplete/IntegrationDownshift.js"}} @@ -20,7 +20,7 @@ In the following example, we demonstrate how to use [downshift](https://github.c ![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) -In the following example, we demonstrate how to use [react-select](https://github.com/JedWatson/react-select). +En el siguiente ejemplo se muestra como usar [react-select](https://github.com/JedWatson/react-select). {{"demo": "pages/demos/autocomplete/IntegrationReactSelect.js"}} @@ -28,6 +28,6 @@ In the following example, we demonstrate how to use [react-select](https://githu ![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) -In the following example, we demonstrate how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It's also using [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. +En el siguiente ejemplo se muestra como usar [react-select](https://github.com/moroshko/react-autosuggest). It's also using [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. {{"demo": "pages/demos/autocomplete/IntegrationAutosuggest.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/autocomplete/autocomplete-pt.md b/docs/src/pages/demos/autocomplete/autocomplete-pt.md index 6a5c200fcfa14a..66d8493f2184ce 100644 --- a/docs/src/pages/demos/autocomplete/autocomplete-pt.md +++ b/docs/src/pages/demos/autocomplete/autocomplete-pt.md @@ -1,33 +1,33 @@ --- -title: Autocomplete React component +title: Componente React Autocomplete components: TextField, Paper, MenuItem, Popper --- # Autocomplete (Autocompletar) -

The autocomplete is a normal text input enhanced by a panel of suggested options.

+

O autocomplete é uma entrada de texto normal aprimorada por um painel de opções sugeridas.

-Material-UI doesn't provide any high-level API for solving this problem. We encourage people relying on the solutions the React community has built. +O Material-UI não fornece nenhuma API de alto nível para resolver esse problema. Encorajamos as pessoas a confiar nas soluções que a comunidade React construiu. ## downshift -![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) +![estrelas](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) -In the following example, we demonstrate how to use [downshift](https://github.com/paypal/downshift). +No exemplo a seguir, demonstramos como usar [downshift](https://github.com/paypal/downshift). {{"demo": "pages/demos/autocomplete/IntegrationDownshift.js"}} ## react-select -![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) +![estrelas](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) -In the following example, we demonstrate how to use [react-select](https://github.com/JedWatson/react-select). +No exemplo a seguir, demonstramos como usar [react-select](https://github.com/JedWatson/react-select). {{"demo": "pages/demos/autocomplete/IntegrationReactSelect.js"}} ## react-autosuggest -![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) +![estrelas](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) -In the following example, we demonstrate how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It's also using [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. +No exemplo a seguir, demonstramos como usar [react-autosuggest](https://github.com/moroshko/react-autosuggest). Também está sendo usado [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) para a lógica de destaque. {{"demo": "pages/demos/autocomplete/IntegrationAutosuggest.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/autocomplete/autocomplete-ru.md b/docs/src/pages/demos/autocomplete/autocomplete-ru.md index ef44457b150768..236e504f26bb46 100644 --- a/docs/src/pages/demos/autocomplete/autocomplete-ru.md +++ b/docs/src/pages/demos/autocomplete/autocomplete-ru.md @@ -1,18 +1,18 @@ --- -title: Autocomplete React component +title: React-компонент Автозаполнение components: TextField, Paper, MenuItem, Popper --- -# Autocomplete +# Автодополнение -

The autocomplete is a normal text input enhanced by a panel of suggested options.

+

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

-Material-UI doesn't provide any high-level API for solving this problem. We encourage people relying on the solutions the React community has built. +Material-UI не предоставляет высокоуровневый API для решения этой проблемы. Мы призываем людей полагаться на решения, разработанные сообществом React. ## downshift ![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) -In the following example, we demonstrate how to use [downshift](https://github.com/paypal/downshift). +В следующем примере мы демонстрируем как использовать библиотеку [downshift](https://github.com/paypal/downshift). {{"demo": "pages/demos/autocomplete/IntegrationDownshift.js"}} @@ -20,7 +20,7 @@ In the following example, we demonstrate how to use [downshift](https://github.c ![stars](https://img.shields.io/github/stars/JedWatson/react-select.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-select.svg) -In the following example, we demonstrate how to use [react-select](https://github.com/JedWatson/react-select). +В следующем примере мы демонстрируем как использовать библиотеку [react-select](https://github.com/JedWatson/react-select). {{"demo": "pages/demos/autocomplete/IntegrationReactSelect.js"}} @@ -28,6 +28,6 @@ In the following example, we demonstrate how to use [react-select](https://githu ![stars](https://img.shields.io/github/stars/moroshko/react-autosuggest.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/react-autosuggest.svg) -In the following example, we demonstrate how to use [react-autosuggest](https://github.com/moroshko/react-autosuggest). It's also using [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) for the highlighting logic. +В следующем примере мы демонстрируем как использовать библиотеку [react-autosuggest](https://github.com/moroshko/react-autosuggest). Она также использует [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) для подсветки значений. {{"demo": "pages/demos/autocomplete/IntegrationAutosuggest.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/avatars/avatars-de.md b/docs/src/pages/demos/avatars/avatars-de.md index 2ac2fcfd8d3077..dbde7357f4c8ca 100644 --- a/docs/src/pages/demos/avatars/avatars-de.md +++ b/docs/src/pages/demos/avatars/avatars-de.md @@ -1,25 +1,25 @@ --- -title: Avatar React component +title: Avatar React-Komponente components: Avatar --- -# Avatars +# Avatare -

Avatars are found throughout material design with uses in everything from tables to dialog menus.

+

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

-## Image avatars +## Bild Avatare -Image avatars can be created by passing standard `img` props `src` or `srcSet` into the component. +Bild Avatare können erstellt werden, indem Standard `img` props `src` oder `srcSet` in die Komponente übergeben werden. {{"demo": "pages/demos/avatars/ImageAvatars.js"}} -## Letter avatars +## Buchstaben Avatare -Avatars containing simple characters can be created by passing your string as `children`. +Avatare mit einfachen Zeichen können erstellt werden, indem man einen String als `children` übergibt. {{"demo": "pages/demos/avatars/LetterAvatars.js"}} -## Icon avatars +## Icon Avatare -Icon avatars are created by passing an icon as `children`. +Icon Avatare werden erstellt, indem man ein Icon als `children` übergibt. {{"demo": "pages/demos/avatars/IconAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/avatars/avatars-es.md b/docs/src/pages/demos/avatars/avatars-es.md index 2ac2fcfd8d3077..c828b309eed85d 100644 --- a/docs/src/pages/demos/avatars/avatars-es.md +++ b/docs/src/pages/demos/avatars/avatars-es.md @@ -1,25 +1,25 @@ --- -title: Avatar React component +title: Componente Avatar de React components: Avatar --- -# Avatars +# Avatares -

Avatars are found throughout material design with uses in everything from tables to dialog menus.

+

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

-## Image avatars +## Avatares de Imágenes -Image avatars can be created by passing standard `img` props `src` or `srcSet` into the component. +Las imágenes de avatares son creadas por medio de la etiqueta `img` y su propiedad `src` o por medio de `srcSet` dentro del componente. {{"demo": "pages/demos/avatars/ImageAvatars.js"}} -## Letter avatars +## Avatares de Letras -Avatars containing simple characters can be created by passing your string as `children`. +Los avatares que contienen letras simples pueden crearse pasando su cadena como `children`. {{"demo": "pages/demos/avatars/LetterAvatars.js"}} -## Icon avatars +## Avatares de íconos -Icon avatars are created by passing an icon as `children`. +Los avatares de íconos son creados pasando un ícono como `children`. {{"demo": "pages/demos/avatars/IconAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/avatars/avatars-ru.md b/docs/src/pages/demos/avatars/avatars-ru.md index 2ac2fcfd8d3077..b63f9fc2c83234 100644 --- a/docs/src/pages/demos/avatars/avatars-ru.md +++ b/docs/src/pages/demos/avatars/avatars-ru.md @@ -1,25 +1,25 @@ --- -title: Avatar React component +title: React-компонент Аватар components: Avatar --- -# Avatars +# Аватары -

Avatars are found throughout material design with uses in everything from tables to dialog menus.

+

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

-## Image avatars +## Аватары изображений -Image avatars can be created by passing standard `img` props `src` or `srcSet` into the component. +Аватары можно создать, передав стандартные свойства компонента `img`, такие как `src` или `srcSet`. {{"demo": "pages/demos/avatars/ImageAvatars.js"}} -## Letter avatars +## Буквенные аватары -Avatars containing simple characters can be created by passing your string as `children`. +Аватары, содержащие простые символы, можно создать, передав вашу строку как `children`. {{"demo": "pages/demos/avatars/LetterAvatars.js"}} -## Icon avatars +## Иконочные аватары -Icon avatars are created by passing an icon as `children`. +Аватары значков создаются путем передачи значка как `children`. {{"demo": "pages/demos/avatars/IconAvatars.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/badges/badges-de.md b/docs/src/pages/demos/badges/badges-de.md index ddca7a3522d7ff..82a2147a1cc294 100644 --- a/docs/src/pages/demos/badges/badges-de.md +++ b/docs/src/pages/demos/badges/badges-de.md @@ -1,38 +1,38 @@ --- -title: Badge React component +title: Badge React-Komponente components: Badge --- # Badges -

Badge generates a small badge to the top-right of its child(ren).

+

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

## Emblemas Simples -Examples of badges containing text, using primary and secondary colors. The badge is applied to its children. +Beispiele für Badges, die Text enthalten, mit Primär- und Sekundärfarben. Das Abzeichen wird an seinen Kindern angebracht. {{"demo": "pages/demos/badges/SimpleBadge.js"}} -## Maximum Value +## Maximalwert -You can use the `max` property to cap the value of the badge content. +Sie können die Eigenschaft `max` verwenden, um den Wert des Badge-Inhalts zu begrenzen. {{"demo": "pages/demos/badges/BadgeMax.js"}} -## Dot Badge +## Punkt-Badge -The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count. +Die Eigenschaft `dot` verwandelt ein Badge in einen kleinen Punkt. Dies kann als Benachrichtigung verwendet werden, dass sich etwas geändert hat, ohne eine Zählung vorzunehmen. {{"demo": "pages/demos/badges/DotBadge.js"}} -## Badge visibility +## Badge Sichtbarkeit -The visibility of badges can be controlled using the `invisible` property. +Die Sichtbarkeit von Badges kann über die Eigenschaft `invisible` gesteuert werden. -The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. +Das Badge versteckt sich automatisch, wenn `badgeContent` null ist. Dies kann mit der Eigenschaft `showZero` überschrieben werden. {{"demo": "pages/demos/badges/BadgeVisibility.js"}} -## Customized Badge +## Benutzerdefinierte Badges If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can change the badge position. diff --git a/docs/src/pages/demos/badges/badges-es.md b/docs/src/pages/demos/badges/badges-es.md index ddca7a3522d7ff..6e400d825c30d1 100644 --- a/docs/src/pages/demos/badges/badges-es.md +++ b/docs/src/pages/demos/badges/badges-es.md @@ -1,41 +1,41 @@ --- -title: Badge React component +title: Componente Badge components: Badge --- -# Badges +# Placas -

Badge generates a small badge to the top-right of its child(ren).

+

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

## Emblemas Simples -Examples of badges containing text, using primary and secondary colors. The badge is applied to its children. +Ejemplos de badges que contienen texto, usando los colores primarios y secundarios de la paleta de colores. {{"demo": "pages/demos/badges/SimpleBadge.js"}} -## Maximum Value +## Valor Máximo -You can use the `max` property to cap the value of the badge content. +Puedes usar la propiedad `max` para limitar el valor máximo del contenido del badge. {{"demo": "pages/demos/badges/BadgeMax.js"}} -## Dot Badge +## Badge de punto -The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count. +La propiedad `dot` cambia el aspecto del badge a un punto pequeño y puede ser usado como notificación de que algo a cambiado sin mostrar más información. {{"demo": "pages/demos/badges/DotBadge.js"}} -## Badge visibility +## Visibilidad del Badge -The visibility of badges can be controlled using the `invisible` property. +La visibilidad del badge puede ser controlada usando la propiedad `invisible`. -The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. +El badge se auto oculta usando la propiedad `badgeContent={0}`. Puedes sobreescribir este comportamiento usando la propiedad `showZero`. {{"demo": "pages/demos/badges/BadgeVisibility.js"}} -## Customized Badge +## Badge Personalizado -If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can change the badge position. +Si has leído la [documentación sobre cómo sobreescribir](/customization/overrides/) pero no te sientes seguro de como hacerlo, aquí hay un ejemplo de como cambiar la posición del badge. -⚠️ While the material design specification encourages theming, this example is off the beaten path. +⚠️ A pesar de que la especificación de material design anima a usar temas, este ejemplo no es común. {{"demo": "pages/demos/badges/CustomizedBadge.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/badges/badges-ru.md b/docs/src/pages/demos/badges/badges-ru.md index ddca7a3522d7ff..d6789ff0e85d61 100644 --- a/docs/src/pages/demos/badges/badges-ru.md +++ b/docs/src/pages/demos/badges/badges-ru.md @@ -1,41 +1,41 @@ --- -title: Badge React component +title: React-компонент Значок components: Badge --- -# Badges +# Значки -

Badge generates a small badge to the top-right of its child(ren).

+

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

-## Emblemas Simples +## Простые значки -Examples of badges containing text, using primary and secondary colors. The badge is applied to its children. +Примеры значков, содержащих текст, с использованием основного и дополнительного цветов. Значок применяется к дочерним элементам. {{"demo": "pages/demos/badges/SimpleBadge.js"}} -## Maximum Value +## Максимальное значение -You can use the `max` property to cap the value of the badge content. +Вы можете использовать свойство `max` чтобы ограничить значение содержимого значка. {{"demo": "pages/demos/badges/BadgeMax.js"}} -## Dot Badge +## Точечный значок -The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count. +Свойство `dot` превращает значок в маленькую точку. Это можно использовать как уведомление о том, что что-то изменилось без счетчика. {{"demo": "pages/demos/badges/DotBadge.js"}} -## Badge visibility +## Видимость значка -The visibility of badges can be controlled using the `invisible` property. +Видимость значков можно контролировать с помощью свойства `invisible`. -The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. +Значок автоматически скрывается, если badgeContent равен нулю. Вы можете переопределить это с помощью свойства `showZero`. {{"demo": "pages/demos/badges/BadgeVisibility.js"}} -## Customized Badge +## Кастомизированный значок -If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can change the badge position. +Если вы читали [страницу документации о переопределениях](/customization/overrides/) но не уверены, что можете войти в курс этого, вот один из примеров того, как вы можете изменить положение значка. -⚠️ While the material design specification encourages theming, this example is off the beaten path. +⚠️ Хотя спецификации материал дизайна поощряют использование тем, эти примеры не соответствуют требованиям. {{"demo": "pages/demos/badges/CustomizedBadge.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/badges/badges-zh.md b/docs/src/pages/demos/badges/badges-zh.md index 3dd446b8c267b4..271c667093b7cb 100644 --- a/docs/src/pages/demos/badges/badges-zh.md +++ b/docs/src/pages/demos/badges/badges-zh.md @@ -2,7 +2,7 @@ title: React 徽章组件 components: Badge --- -# Badges +# 徽章

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

diff --git a/docs/src/pages/demos/bottom-navigation/bottom-navigation-de.md b/docs/src/pages/demos/bottom-navigation/bottom-navigation-de.md index 6db231d5722fcd..2dc28e7889a247 100644 --- a/docs/src/pages/demos/bottom-navigation/bottom-navigation-de.md +++ b/docs/src/pages/demos/bottom-navigation/bottom-navigation-de.md @@ -2,13 +2,13 @@ title: Bottom Navigation React component components: BottomNavigation, BottomNavigationAction --- -# Bottom Navigation (Navegação Inferior) +# Bottom Navigation (Untere Navigation)

Bottom navigation bars allow movement between primary destinations in an app.

[Bottom navigation](https://material.io/design/components/bottom-navigation.html) bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon. -## Bottom Navigation (Navegação Inferior) +## Bottom Navigation (Untere Navigation) When there are only **three** actions, display both icons and text labels at all times. diff --git a/docs/src/pages/demos/bottom-navigation/bottom-navigation-es.md b/docs/src/pages/demos/bottom-navigation/bottom-navigation-es.md index 6db231d5722fcd..1b5b7da3ad71a3 100644 --- a/docs/src/pages/demos/bottom-navigation/bottom-navigation-es.md +++ b/docs/src/pages/demos/bottom-navigation/bottom-navigation-es.md @@ -4,18 +4,18 @@ components: BottomNavigation, BottomNavigationAction --- # Bottom Navigation (Navegação Inferior) -

Bottom navigation bars allow movement between primary destinations in an app.

+

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

-[Bottom navigation](https://material.io/design/components/bottom-navigation.html) bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon. +[Navegación Inferior](https://material.io/design/components/bottom-navigation.html) bars 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. ## Bottom Navigation (Navegação Inferior) -When there are only **three** actions, display both icons and text labels at all times. +Cuando sólo hay **tres** acciones, muestra las dos cosas, iconos y etiquetas de texto en todo momento. {{"demo": "pages/demos/bottom-navigation/SimpleBottomNavigation.js"}} ## Bottom Navigation with no label -If there are **four** or **five** actions, display inactive views as icons only. +Si hay **cuatro ** o **cinco** acciones, mostrar vistas inactivas solamente como iconos. {{"demo": "pages/demos/bottom-navigation/LabelBottomNavigation.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/bottom-navigation/bottom-navigation-ja.md b/docs/src/pages/demos/bottom-navigation/bottom-navigation-ja.md index 6db231d5722fcd..f9cb2a80cc2f76 100644 --- a/docs/src/pages/demos/bottom-navigation/bottom-navigation-ja.md +++ b/docs/src/pages/demos/bottom-navigation/bottom-navigation-ja.md @@ -2,13 +2,13 @@ title: Bottom Navigation React component components: BottomNavigation, BottomNavigationAction --- -# Bottom Navigation (Navegação Inferior) +# Bottom Navigation

Bottom navigation bars allow movement between primary destinations in an app.

[Bottom navigation](https://material.io/design/components/bottom-navigation.html) bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon. -## Bottom Navigation (Navegação Inferior) +## Bottom Navigation When there are only **three** actions, display both icons and text labels at all times. diff --git a/docs/src/pages/demos/bottom-navigation/bottom-navigation-pt.md b/docs/src/pages/demos/bottom-navigation/bottom-navigation-pt.md index 6db231d5722fcd..9563bc72864243 100644 --- a/docs/src/pages/demos/bottom-navigation/bottom-navigation-pt.md +++ b/docs/src/pages/demos/bottom-navigation/bottom-navigation-pt.md @@ -10,7 +10,7 @@ components: BottomNavigation, BottomNavigationAction ## Bottom Navigation (Navegação Inferior) -When there are only **three** actions, display both icons and text labels at all times. +Quando existem apenas **três** ações, exibir ambos os ícones e rótulos de texto em todos os momentos. {{"demo": "pages/demos/bottom-navigation/SimpleBottomNavigation.js"}} diff --git a/docs/src/pages/demos/bottom-navigation/bottom-navigation-ru.md b/docs/src/pages/demos/bottom-navigation/bottom-navigation-ru.md index 6db231d5722fcd..b00b70c07bc31d 100644 --- a/docs/src/pages/demos/bottom-navigation/bottom-navigation-ru.md +++ b/docs/src/pages/demos/bottom-navigation/bottom-navigation-ru.md @@ -2,20 +2,20 @@ title: Bottom Navigation React component components: BottomNavigation, BottomNavigationAction --- -# Bottom Navigation (Navegação Inferior) +# Bottom Navigation (Нижняя панель навигации) -

Bottom navigation bars allow movement between primary destinations in an app.

+

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

-[Bottom navigation](https://material.io/design/components/bottom-navigation.html) bars display three to five destinations at the bottom of a screen. Each destination is represented by an icon and an optional text label. When a bottom navigation icon is tapped, the user is taken to the top-level navigation destination associated with that icon. +[Нижняя панель навигации](https://material.io/design/components/bottom-navigation.html) отображает от трех до пяти элементов перехода внизу экрана. Каждый элемент перехода представлен значком и необязательной текстовой меткой. При нажатии на нижний значок навигации пользователь попадает на страницу, связанную с этим значком. -## Bottom Navigation (Navegação Inferior) +## Bottom Navigation (Нижняя панель навигации) -When there are only **three** actions, display both icons and text labels at all times. +Если есть только **три действия**, стоит всегда отображать и значки и текстовые метки. {{"demo": "pages/demos/bottom-navigation/SimpleBottomNavigation.js"}} -## Bottom Navigation with no label +## Нижняя навигация без текста -If there are **four** or **five** actions, display inactive views as icons only. +Если существует **четыре** или **пять** действий, стоит отображать неактивные элементы только в виде значков. {{"demo": "pages/demos/bottom-navigation/LabelBottomNavigation.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/buttons/buttons-de.md b/docs/src/pages/demos/buttons/buttons-de.md index 42fcac6369d974..2b98c3d87ef8dd 100644 --- a/docs/src/pages/demos/buttons/buttons-de.md +++ b/docs/src/pages/demos/buttons/buttons-de.md @@ -9,8 +9,8 @@ components: Button, Fab, IconButton, ButtonBase, Zoom [Buttons](https://material.io/design/components/buttons.html) kommunizieren Aktionen, die Benutzer ausführen können. Sie werden normalerweise in der gesamten Benutzeroberfläche platziert, beispielsweise an folgenden Orten: - Dialogs -- Modal windows -- Forms +- Modale Fenster +- Formulare - Cards - Toolbars @@ -26,78 +26,78 @@ Das letzte Beispiel dieser Demo zeigt, wie Sie eine Schaltfläche zum Hochladen [Text buttons](https://material.io/design/components/buttons.html#text-button) werden normalerweise für weniger ausgeprägte Aktionen verwendet, darunter auch solche, die Folgendes enthalten: -- In dialogs -- In cards +- In Dialogen +- In Karten -In cards, text buttons help maintain an emphasis on card content. +In Karten helfen Text Buttons dabei, den Karteninhalt hervorzuheben. {{"demo": "pages/demos/buttons/TextButtons.js"}} ## Outlined Buttons -[Outlined buttons](https://material.io/design/components/buttons.html#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app. +[Outlined Buttons](https://material.io/design/components/buttons.html#outlined-button) sind Buttons mit mittlerer Betonung. Sie enthalten wichtige Aktionen, aber nicht die primäre Aktion in einer App. -### Alternatives +### Alternativen -Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons. +Outlined Buttons sind auch eine Alternative mit geringerer Betonung als Contained Buttons, oder eine Alternative mit höherer Betonung als Text Buttons. {{"demo": "pages/demos/buttons/OutlinedButtons.js"}} ## Floating Action Buttons -A [floating action button](https://material.io/design/components/buttons-floating-action-button.html) (FAB) performs the primary, or most common, action on a screen. It appears in front of all screen content, typically as a circular shape with an icon in its center. FABs come in two types: regular, and extended. +Ein [Floating Action Button](https://material.io/design/components/buttons-floating-action-button.html) (FAB) führt die primäre oder gebräuchlichste Aktion auf einem Bildschirm aus. Es wird vor allen Bildschirminhalten angezeigt, normalerweise als Kreisform mit einem Symbol in der Mitte. Es gibt zwei Arten von FABs: normal und erweitert. -Only use a FAB if it is the most suitable way to present a screen’s primary action. +Verwenden Sie eine FAB nur, wenn dies für die Darstellung der Hauptaktion eines Bildschirms am besten geeignet ist. -Only one floating action button is recommended per screen to represent the most common action. +Es wird nur eine Floating Action Button pro Bildschirm empfohlen, um die am häufigsten verwendete Aktion darzustellen. {{"demo": "pages/demos/buttons/FloatingActionButtons.js"}} -The floating action button animates onto the screen as an expanding piece of material, by default. +Der floating-action-button, wird standardmäßig als expandierendes Material auf dem Bildschirm animiert. -A floating action button that spans multiple lateral screens (such as tabbed screens) should briefly disappear, then reappear if its action changes. +Ein floating-action-button, der sich über mehrere seitliche Bildschirme (wie tabbed-screens) erstreckt, sollte kurz verschwinden und dann wieder erscheinen, wenn sich seine Aktion ändert. -The Zoom transition can be used to achieve this. Note that since both the exiting and entering animations are triggered at the same time, we use `enterDelay` to allow the outgoing Floating Action Button's animation to finish before the new one enters. +Hierzu kann der Zoom-Übergang verwendet werden. Da sowohl die vorhandenen als auch die eingegebenen Animationen gleichzeitig ausgelöst werden, verwenden wir `enterDelay`, um die Animation der ausgehenden Floating Action Buttons zu beenden, bevor die neue Animation eintritt. {{"demo": "pages/demos/buttons/FloatingActionButtonZoom.js"}} -## Sizes +## Größen -Fancy larger or smaller buttons? Use the `size` property. +Lust auf größere oder kleinere Schaltflächen? Verwenden Sie die Eigenschaft `size`. {{"demo": "pages/demos/buttons/ButtonSizes.js"}} -## Buttons with icons and label +## Buttons mit Symbolen und Beschriftung -Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon. +Manchmal möchten Sie möglicherweise Symbole für bestimmte Schaltflächen, um die UX der Anwendung zu verbessern, da Logos leichter als einfacher Text erkannt werden. Wenn Sie beispielsweise eine Schaltfläche zum Löschen haben, können Sie sie mit einem Mülleimer-Symbol kennzeichnen. {{"demo": "pages/demos/buttons/IconLabelButtons.js"}} ## Icon Buttons -Icon buttons are commonly found in app bars and toolbars. +Icon Buttons finden Sie häufig in App-Bars und Toolbars. -Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. +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/demos/buttons/IconButtons.js"}} ## Customized Buttons -If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here are examples of how you can change the main color of a Button using classes, and using a theme; and of a Bootstrap style Button. +Wenn Sie die Seite [overrides documentation page](/customization/overrides/) gelesen haben, aber Sie sich nicht sicher sind, dann finden Sie hier Beispiele dafür wie Sie die Hauptfarbe eines Buttons mit Klassen ändern können und für die Verwendung eines Themes. -⚠️ While the material design specification encourages theming, these examples are off the beaten path. +⚠️ Auch wenn die material design Spezifikation zur Verwendung von Themes ermutigt, liegen diese Beispiele außerhalb der üblichen Pfade. {{"demo": "pages/demos/buttons/CustomizedButtons.js"}} ## Complex Buttons -The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. You can take advantage of this lower level component to build custom interactions. +Die Text Buttons, die Contained Buttons, die Floatin Action Buttons und die Icon Buttons basieren auf derselben Komponente: der `ButtonBase`. Sie können die Vorteile dieser grundlegenden Komponente zum erstellen von benutzerdefinierten Interaktionen nutzen. {{"demo": "pages/demos/buttons/ButtonBases.js"}} -## Third-party routing library +## Drittanbieter-Routing Bibliothek -One common use case is to use the button to trigger a navigation to a new page. The `ButtonBase` component provides a property to handle this use case: `component`. Given that a lot of our interactive components rely on `ButtonBase`, you should be able to take advantage of it everywhere: +Ein häufiger Anwendungsfall ist die Verwendung eines Buttons, um eine Navigation zu einer neuen Seite auszulösen. Die `ButtonBase` Komponente stellt eine Eigenschaft für diesen Anwendungsfall bereit: `component`. Da eine Menge unserer interaktiven Komponenten auf der `ButtonBase` basieren, sollten Sie diese überall nutzen zu können: ```jsx import { Link } from 'react-router-dom' @@ -108,7 +108,7 @@ import Button from '@material-ui/core/Button'; ``` -or if you want to avoid properties collision: +oder wenn Sie die Kollision von Eigenschaften vermeiden möchten: ```jsx import { Link } from 'react-router-dom' @@ -121,4 +121,4 @@ const MyLink = props => ``` -*Note: Creating `MyLink` is necessary to prevent unexpected unmounting. You can read more about it in our [component property guide](/guides/composition/#component-property).* \ No newline at end of file +*Hinweis: Das Erstellen von `MyLink` ist erforderlich, um ein unerwartetes Aushängen zu verhindern. Weitere Informationen dazu finden Sie in unserem [Guide über Komponenten-Eigenschaften ](/guides/composition/#component-property).* \ No newline at end of file diff --git a/docs/src/pages/demos/buttons/buttons-es.md b/docs/src/pages/demos/buttons/buttons-es.md index 6ae38b26db1342..4542d710132de7 100644 --- a/docs/src/pages/demos/buttons/buttons-es.md +++ b/docs/src/pages/demos/buttons/buttons-es.md @@ -1,14 +1,14 @@ --- -title: Botón componente React +title: Componente de React Botón components: Button, Fab, IconButton, ButtonBase, Zoom --- # Botones -

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

+

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

Los [botones](https://material.io/design/components/buttons.html) indican acciones que los usuarios pueden tomar. Suelen ponerse a lo largo de la interfaz, en lugares como: -- Dialogs +- Diálogos - Ventanas modal - Formularios - Tarjetas @@ -83,7 +83,7 @@ Iconos son también apropiados para botones de cambio que permiten marcar o desm ## Botones personalizados -Si has leído la [página de documentación de anulación](/customization/overrides/) pero no te sientes cómodo intentándolo, a continuación hay ejemplos de como cambiar el color principal de un Botón usandos clases, y usando un tema; y de un Botón estilo Bootstrap. +Si has estado leyendo la [página de documentación sobre overrides](/customization/overrides/) pero aún no te sientes cómodo intentándolo, a continuación hay ejemplos de como cambiar el color principal de un Botón usandos clases, y usando un tema; y de un Botón estilo Bootstrap. ⚠️ A pesar de que la especificación de material design anima a usar temas, estos ejemplos no son comunes. diff --git a/docs/src/pages/demos/buttons/buttons-fr.md b/docs/src/pages/demos/buttons/buttons-fr.md index 0c244ecbffa22d..e0c2817f71b3aa 100644 --- a/docs/src/pages/demos/buttons/buttons-fr.md +++ b/docs/src/pages/demos/buttons/buttons-fr.md @@ -83,15 +83,15 @@ Les icônes sont également appropriés pour les boutons à bascule qui permette ## Boutons personnalisés -If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here are examples of how you can change the main color of a Button using classes, and using a theme; and of a Bootstrap style Button. +Si vous avez lu [la page de la documentation sur les personnalisation](/customization/overrides/) mais que vous n'êtes pas prêt pour vous lancer, voici des exemples pour changer la couleur principale d'un bouton en utilisant des classes, et en utilisant un thème; et d'un bouton de style Bootstrap. -⚠️ Bien que les spécifications de conception des matériaux encouragent la thématisation, ces exemples sortent des sentiers battus. +⚠️ Bien que les spécifications Material Design encouragent la thématisation, ces exemples sortent des sentiers battus. {{"demo": "pages/demos/buttons/CustomizedButtons.js"}} -## Complex Buttons +## Boutons complexes -The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. You can take advantage of this lower level component to build custom interactions. +The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. Vous pouvez tirer parti de ce composant de niveau inférieur pour créer des interactions personnalisées. {{"demo": "pages/demos/buttons/ButtonBases.js"}} @@ -108,7 +108,7 @@ import Button from '@material-ui/core/Button'; ``` -or if you want to avoid properties collision: +ou si vous souhaitez éviter les collisions de propriétés : ```jsx import { Link } from 'react-router-dom' @@ -121,4 +121,4 @@ const MyLink = props => ``` -*Note: Creating `MyLink` is necessary to prevent unexpected unmounting. You can read more about it in our [component property guide](/guides/composition/#component-property).* \ No newline at end of file +*Remarque: la création de `MyLink` est nécessaire pour éviter un démontage inattendu. Vous en saurez plus à ce sujet dans notre [guide des propriétés des composants](/guides/composition/#component-property).* \ No newline at end of file diff --git a/docs/src/pages/demos/buttons/buttons-ja.md b/docs/src/pages/demos/buttons/buttons-ja.md index e1427d5c11ca27..2ab04d8ebbe60a 100644 --- a/docs/src/pages/demos/buttons/buttons-ja.md +++ b/docs/src/pages/demos/buttons/buttons-ja.md @@ -2,44 +2,44 @@ title: Button React component components: Button, Fab, IconButton, ButtonBase, Zoom --- -# Buttons +# ボタン -

Buttons allow users to take actions, and make choices, with a single tap.

+

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

-[Buttons](https://material.io/design/components/buttons.html) communicate actions that users can take. They are typically placed throughout your UI, in places like: +[Button](https://material.io/design/components/buttons.html)は、ユーザが取りうるアクションを伝達します。一般的に次のようなUIのなかに配置されます。 - Dialogs -- Modal windows -- Forms +- Modal window +- Form - Cards -- Toolbars +- Toolbar ## Contained Buttons -[Contained buttons](https://material.io/design/components/buttons.html#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app. +[Contained button](https://material.io/design/components/buttons.html#contained-button)は、力強く、強調と塗りつぶしによって区別されるようなボタンです。 アプリケーションの初歩的なアクションが含まれます。 -The last example of this demo show how to use an upload button. +一番最後のデモは、アップロード用のボタンの例になっています。 {{"demo": "pages/demos/buttons/ContainedButtons.js"}} ## Text Buttons -[Text buttons](https://material.io/design/components/buttons.html#text-button) are typically used for less-pronounced actions, including those located: +[Text button](https://material.io/design/components/buttons.html#text-button)は、一般的にそれほど目立たせる必要のないアクションに対して用いられます。例えば、次のようなコンポーネントの中で用いられます。 -- In dialogs -- In cards +- Dialog +- Card -In cards, text buttons help maintain an emphasis on card content. +Cardの中でText Buttonを用いることで、Cardの内容に重点を置くことができます。 {{"demo": "pages/demos/buttons/TextButtons.js"}} ## Outlined Buttons -[Outlined buttons](https://material.io/design/components/buttons.html#outlined-button) are medium-emphasis buttons. They contain actions that are important, but aren’t the primary action in an app. +[Outlined button](https://material.io/design/components/buttons.html#outlined-button)は、強調度合いが中くらいのボタンです。 重要なアクションを含みますが、アプリ内では最も重要ではない、といった場合に使われます。 -### Alternatives +### 代替手段 -Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons. +Outlined buttonは、Contained buttonと比べると強調が弱く、 Text buttonと比べると強調の強いボタンです。 {{"demo": "pages/demos/buttons/OutlinedButtons.js"}} diff --git a/docs/src/pages/demos/buttons/buttons-ru.md b/docs/src/pages/demos/buttons/buttons-ru.md index 43ce56ddc571d0..cdaf454156bf39 100644 --- a/docs/src/pages/demos/buttons/buttons-ru.md +++ b/docs/src/pages/demos/buttons/buttons-ru.md @@ -1,5 +1,5 @@ --- -title: Button React component +title: React-компонент Кнопка components: Button, Fab, IconButton, ButtonBase, Zoom --- # Кнопки @@ -8,10 +8,10 @@ components: Button, Fab, IconButton, ButtonBase, Zoom [Кнопки](https://material.io/design/components/buttons.html) сообщают о действиях, которые могут выполнять пользователи. Они обычно размещаются в вашем интерфейсе, например: -- Dialogs +- Диалоги - Всплывающие окно - Формы -- Карты +- Карточки - Панели инструментов ## Блочные кнопки @@ -27,25 +27,25 @@ components: Button, Fab, IconButton, ButtonBase, Zoom [Текстовые кнопки](https://material.io/design/components/buttons.html#text-button) обычно используются для менее выраженных действий, в том числе расположенных: - В диалогах -- В cards +- В карточках - Cards -В Cards текстовые кнопки помогают сохранить акцент на содержании карточки. +В Карточках (Cards) текстовые кнопки помогают сохранить акцент на содержании карточки. {{"demo": "pages/demos/buttons/TextButtons.js"}} ## Контурные кнопки -[Контурные кнопки](https://material.io/design/components/buttons.html#outlined-button) - это кнопки со средним акцентом. Они содержат действия, которые важны, но не являются основными действиеми в приложении. +[Контурные кнопки](https://material.io/design/components/buttons.html#outlined-button) - это кнопки со средним акцентом. Они содержат действия, которые важны, но не являются основными в приложении. ### Альтернатива -Выделенные кнопки также являются альтернативой выделенным кнопкам или более высокая альтернатива текстовым кнопкам. +Выделенные кнопки также являются альтернативой выделенным кнопкам или могут использоваться как альтернатива текстовым кнопкам. {{"demo": "pages/demos/buttons/OutlinedButtons.js"}} ## Плавающие кнопки действий -[Плавающие кнопки действий](https://material.io/design/components/buttons-floating-action-button.html) выполняет основное или наиболее распространенное действие на экране. Они отображаются над всем содержимым экрана, обычно в виде круглой формы со значком в центре. FABs бывают двух типов: обычные и расширенные. +[Плавающая кнопка действия](https://material.io/design/components/buttons-floating-action-button.html) выполняет основное или наиболее распространенное действие на экране. Они отображаются над всем содержимым экрана, обычно в виде закрашенного круга со значком в центре. FABs бывают двух типов: обычные и расширенные. Используйте плавающую кнопку действий (FAB) только в том случае, если это наиболее подходящий способ представить основное действие экрана. @@ -53,11 +53,11 @@ components: Button, Fab, IconButton, ButtonBase, Zoom {{"demo": "pages/demos/buttons/FloatingActionButtons.js"}} -По умолчанию анимация кнопки с плавающим действием на экране является expanding. +По умолчанию анимация кнопки с плавающим действием на экране является расширяющейся. -Кнопка с плавающим действием, которая охватывает несколько боковых экранов (например, экраны с вкладками), должна анимироватьза при пререходах. +Кнопка с плавающим действием, которая охватывает несколько боковых экранов (например, экраны с вкладками), должна анимироваться при переходах. -Переход Zoom может быть использован для достижения этой цели. Обратите внимание, что так как выход и вход анимации запускаются одновременно, мы используем ` enterDelay `, чтобы разрешить исходящим кнопкам плавающего действия анимироватьза постепенно. +Переход масштабирование (Zoom) может быть использован для достижения этой цели. Обратите внимание, что так как выход и вход анимации запускаются одновременно, мы используем ` enterDelay `, чтобы разрешить исходящим кнопкам плавающего действия анимироваться постепенно. {{"demo": "pages/demos/buttons/FloatingActionButtonZoom.js"}} @@ -77,27 +77,27 @@ components: Button, Fab, IconButton, ButtonBase, Zoom Кнопки с иконками обычно находятся на панелях навигации и на панелях инструментов. -Icons are also appropriate for toggle buttons that allow a single choice to be selected or deselected, such as adding or removing a star to an item. +Значки также подходят для кнопок переключения, которые позволяют выбрать элемент или отменить выбор, например, добавление или удаление звезды для элемента. {{"demo": "pages/demos/buttons/IconButtons.js"}} ## Индивидуальные кнопки -Если вы читали [overrides documentation page](/customization/overrides/) но вы не уверены, вот примеры того, как вы можете изменить основной цвет кнопки, используя классы, и используя тему; и кнопки в стиле Bootstrap. +Если вы читали [документацию по переопределению стилей(Overrides)](/customization/overrides/) но вы не уверены, вот примеры того, как вы можете изменить основной цвет кнопки, используя классы, и используя тему; и кнопки в стиле Bootstrap. -⚠️ While the material design specification encourages theming, these examples are off the beaten path. +⚠️ Хотя спецификации материал дизайна поощряют использование тем, эти примеры не соответствуют требованиям. {{"demo": "pages/demos/buttons/CustomizedButtons.js"}} -## Complex Buttons +## Сложные кнопки -The Text Buttons, Contained Buttons, Floating Action Buttons and Icon Buttons are built on top of the same component: the `ButtonBase`. You can take advantage of this lower level component to build custom interactions. +Текстовые кнопки, плавающие кнопки действий, блочные кнопки построены на основе одного и того же компонента: `ButtonBase`. Вы можете воспользоваться этим более низкоуровневым компонентом для создания пользовательских взаимодействий. {{"demo": "pages/demos/buttons/ButtonBases.js"}} -## Third-party routing library +## Сторонняя библиотека маршрутизации -One common use case is to use the button to trigger a navigation to a new page. The `ButtonBase` component provides a property to handle this use case: `component`. Given that a lot of our interactive components rely on `ButtonBase`, you should be able to take advantage of it everywhere: +Одним из распространенных вариантов использования кнопки является переход на новую страницу. `ButtonBase` компонент предоставляет свойство для обработки этого варианта использования: `component`. Учитывая, что многие наши интерактивные компоненты используют `ButtonBase`, у вас есть возможность воспользоваться этим: ```jsx import { Link } from 'react-router-dom' @@ -108,7 +108,7 @@ import Button from '@material-ui/core/Button'; ``` -or if you want to avoid properties collision: +или если вы хотите избежать столкновения свойств: ```jsx import { Link } from 'react-router-dom' @@ -121,4 +121,4 @@ const MyLink = props => ``` -*Note: Creating `MyLink` is necessary to prevent unexpected unmounting. You can read more about it in our [component property guide](/guides/composition/#component-property).* \ No newline at end of file +*Примечание: Создание `MyLink` необходимо для предотвращения неожиданного отключения. Вы можете прочитать больше об этом в нашем [руководстве по свойствам компонента](/guides/composition/#component-property).* \ No newline at end of file diff --git a/docs/src/pages/demos/buttons/buttons-zh.md b/docs/src/pages/demos/buttons/buttons-zh.md index c1e94b19e24113..8fc07094298f06 100644 --- a/docs/src/pages/demos/buttons/buttons-zh.md +++ b/docs/src/pages/demos/buttons/buttons-zh.md @@ -4,9 +4,9 @@ components: Button, Fab, IconButton, ButtonBase, Zoom --- # 按钮 -

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

+

用户只需一按按钮组件，就可以触发动作并作出选择。

-[按钮](https://material.io/design/components/buttons.html) 传达了用户可以采取的行动，它们一般被放置在你的界面中的以下位置： +[按钮](https://material.io/design/components/buttons.html) 传达了用户可以触发的动作。通常，按钮被放置在界面中的以下位置： - 对话框 - 模态窗口 @@ -16,20 +16,20 @@ components: Button, Fab, IconButton, ButtonBase, Zoom ## 实心按钮 -[实心按钮](https://material.io/design/components/buttons.html#contained-button) 表示高度强调, 按照不同的填充颜色和立体效果来表示强调程度。 它们包含对应用程序具有主要作用的操作。 +[实心按钮](https://material.io/design/components/buttons.html#contained-button) 表示高度强调, 按照不同的填充颜色和立体效果来表示强调程度。 它们用于触发应用程序所具有的主要功能。 -此演示的最后一个示例显示了如何使用上传按钮。 +此演示的最后一个示例演示了如何使用上传按钮。 {{"demo": "pages/demos/buttons/ContainedButtons.js"}} ## 文本按钮 -[文本按钮](https://material.io/design/components/buttons.html#text-button) 通常用于不太明显的操作, 包括那些位于: +[文本按钮](https://material.io/design/components/buttons.html#text-button) 通常用于不太醒目的操作, 包括那些位于: - 在对话框中 - 在卡片 -在卡片中，文本按钮有助于在卡片内容之上强调按钮的存在。 +在卡片中，使用文本按钮有助于保持卡片内容的醒目程度。 {{"demo": "pages/demos/buttons/TextButtons.js"}} @@ -108,7 +108,7 @@ import Button from '@material-ui/core/Button'; ``` -or if you want to avoid properties collision: +或者如果你想避免属性碰撞： ```jsx import { Link } from 'react-router-dom' @@ -121,4 +121,4 @@ const MyLink = props => ``` -*Note: Creating `MyLink` is necessary to prevent unexpected unmounting. You can read more about it in our [component property guide](/guides/composition/#component-property).* \ No newline at end of file +*注意：创建 `MyLink` 是必要的，以防止意外卸载。您可以在我们的 [组件属性指南](/guides/composition/#component-property)阅读更多相关信息。* \ No newline at end of file diff --git a/docs/src/pages/demos/cards/cards-de.md b/docs/src/pages/demos/cards/cards-de.md index 32630c321d9054..d08f4afc218bf4 100644 --- a/docs/src/pages/demos/cards/cards-de.md +++ b/docs/src/pages/demos/cards/cards-de.md @@ -1,41 +1,41 @@ --- -title: Card React component +title: Card React Komponente components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper --- # Cards -

Cards contain content and actions about a single subject.

+

Cards enthalten Inhalte und Aktionen zu einem bestimmten Thema.

-[Cards](https://material.io/design/components/cards.html) are surfaces that display content and actions on a single topic. +[Cards](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. +Sie sollten leicht nach relevanten und umsetzbaren Informationen durchsucht werden können. Elemente wie Text und Bilder sollten so platziert werden, dass die Hierarchie deutlich erkennbar ist. ## Simple Card -Although cards can support multiple actions, UI controls, and an overflow menu, use restraint and remember that cards are entry points to more complex and detailed information. +Cards 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/demos/cards/SimpleCard.js"}} -## Complex Interaction +## Komplexe Interaktion -On desktop, card content can expand. +Auf dem Desktop können Karteninhalte erweitert werden. {{"demo": "pages/demos/cards/RecipeReviewCard.js"}} -## Media +## Medien -Example of a card using an image to reinforce the content. +Beispiel für eine Karte, die ein Bild verwendet, um den Inhalt zu verstärken. {{"demo": "pages/demos/cards/MediaCard.js"}} -By default, we use the combination of a `
` element and a *background image* to display the media. It can be problematic in some situations. For instance, you might want to display a video or a responsive image. Use the `component` property for these use cases: +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/demos/cards/ImgMediaCard.js"}} -## UI Controls +## Steuerelemente der Benutzeroberfläche -Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card. +Ergänzende Aktionen innerhalb der Karte werden explizit mit Symbolen, Text und UI-Steuerelementen aufgerufen, die sich normalerweise unten auf der Karte befinden. -Here's an example of a media control card. +Hier ist ein Beispiel für eine Mediensteuerungskarte. {{"demo": "pages/demos/cards/MediaControlCard.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/cards/cards-es.md b/docs/src/pages/demos/cards/cards-es.md index ed5e5a112d282c..b0e36e72a0571c 100644 --- a/docs/src/pages/demos/cards/cards-es.md +++ b/docs/src/pages/demos/cards/cards-es.md @@ -1,5 +1,5 @@ --- -title: Componente de Card(Tarjetas) +title: Componente de React Card (Tarjeta) components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper --- # Tarjetas @@ -8,11 +8,11 @@ components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedi Las [Tarjetas](https://material.io/design/components/cards.html) son superficies que muestran contenido y acciones sobre un tema particular. -Deben se fáciles de leer y la información que muestran debe ser relevante y accionable. Elementos como texto e imagenes deben ser colocados sobre tarjetas de manera lógica y jerarquica. +Deben ser fáciles de leer y la información que muestran debe ser relevante y accionable. Elementos como texto e imágenes deben ser colocados sobre tarjetas de manera lógica y jerárquica. ## Tarjeta simple -Aunque las tarjetas pueden soportar multiples acciones, controles de la interfaz y varios menus debemos usarlas con precaución ya que son puntos de ingreso a información mas detallada. +Aunque las tarjetas pueden permitir múltiples acciones, controles de la interfaz y varios menus, debemos usarlas con precaución ya que son puntos de ingreso a información mas detallada. {{"demo": "pages/demos/cards/SimpleCard.js"}} @@ -28,14 +28,14 @@ Un ejemplo de una tarjeta usando una imagen para reforzar contenido. {{"demo": "pages/demos/cards/MediaCard.js"}} -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, cuando queremos mostrar un video o una imagen responsiva. En estos casos podemos usar la propiedad `component`: +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 video o una imagen responsiva. En estos casos podemos usar la propiedad `component`: {{"demo": "pages/demos/cards/ImgMediaCard.js"}} ## Controles de IU -Acciones adicionales dentro de las tarjetas son iniciadas explícitamente usando iconos, texto, controles de IU, localizados de manera típica en el pie de la tarjeta. +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. -Aca un ejemplo de una tarjeta con control multimedia. +Acá un ejemplo de una tarjeta con control multimedia. {{"demo": "pages/demos/cards/MediaControlCard.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/cards/cards-ru.md b/docs/src/pages/demos/cards/cards-ru.md index 05ca30f8d9d937..b69a4f860325ad 100644 --- a/docs/src/pages/demos/cards/cards-ru.md +++ b/docs/src/pages/demos/cards/cards-ru.md @@ -1,41 +1,41 @@ --- -title: Card React component +title: Компонент Card React components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper --- -# Карты +# Карточки -

Карты содержат контент и действия по одной теме.

+

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

-[Карты](https://material.io/design/components/cards.html) - это поверхности, которые отображают контент и действия по одной тематике. +[Карточки](https://material.io/design/components/cards.html) - это поверхности, которые отображают контент и действия по одной тематике. -Их должно быть легко сканировать для получения актуальной и выполнимой информации. Элементы, такие как тест и изображения, должны быть расположены на них так, чтобы четко отображать иерархию. +Их должно быть легко сканировать для получения актуальной и выполнимой информации. Элементы, такие как текст и изображения, должны быть расположены на них так, чтобы четко отображать иерархию. -## Простая Карта +## Простая Карточка -Хотя карты могут поддерживать множество действий, UI-контролов и всплывающее меню, будьте сдержаны и помните, что карты - это входные точки для более сложной и детальной информации. +Хотя карточки и могут поддерживать множество действий, таких как элементы управления пользовательского интерфейса и всплывающее меню, будьте сдержаны и помните, что карточки - это входные точки для более сложной и детальной информации. {{"demo": "pages/demos/cards/SimpleCard.js"}} ## Сложное взаимодействие -На десктопе контент карты может быть расширяемым. +На рабочем столе контент карточки может быть расширяемым. {{"demo": "pages/demos/cards/RecipeReviewCard.js"}} ## Медиа -Пример карты, использующей медиа для подчеркивания контента. +Пример карточки, использующей изображение для выделения контента. {{"demo": "pages/demos/cards/MediaCard.js"}} -По умолчанию мы используем комбинацию `
` элемента и *background image* для отображения медиа. Это может быть проблематичным в некоторых ситуациях. Например, вы можете захотеть отобразить видео и отзывчивое изображение. Используйте свойство `component` для этих случаев: +По умолчанию мы используем комбинацию `
` элемента и *background image* для отображения информации. Это может быть проблематично в некоторых ситуациях. Например, вы можете захотеть отобразить видео или адаптивное изображение. Используйте свойство `component` для этих случаев: {{"demo": "pages/demos/cards/ImgMediaCard.js"}} -## UI контролы +## Элементы управления пользовательского интерфейса -Дополнительные действия внутри карты явно вызываются с помощью иконок, текста и UI контролов, обычно расположенных внизу карты. +Дополнительные действия внутри карточки явно вызываются с помощью иконок, текста и элементов управления пользовательского интерфейса, обычно размещаемых в нижней части карточки. -Вот пример карты управления медиа. +Вот пример карточки с элементами управления мультимедиа. {{"demo": "pages/demos/cards/MediaControlCard.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/chips/chips-es.md b/docs/src/pages/demos/chips/chips-es.md index 35bc5d49f4e380..407d6a613dfcd1 100644 --- a/docs/src/pages/demos/chips/chips-es.md +++ b/docs/src/pages/demos/chips/chips-es.md @@ -1,5 +1,5 @@ --- -title: Chip React component +title: "Chips son elementos compactos que representan una entrada, atributo, o accion.\nChips le permiten a los usuarios entrar informacion, escoger de una seleccion, filtrar contenido, o activar acciones.\nAunque incluido como un componente individual, el uso mas comun sera en algun tipo de entrada de formulario, por lo cual parte del comportamiento demostrado aqui no se muestra en el contexto" components: Chip --- # Chips diff --git a/docs/src/pages/demos/chips/chips-fr.md b/docs/src/pages/demos/chips/chips-fr.md index 180acdd9a169ad..a9ee4239398c3f 100644 --- a/docs/src/pages/demos/chips/chips-fr.md +++ b/docs/src/pages/demos/chips/chips-fr.md @@ -27,7 +27,7 @@ Outlined chips offer an alternative style. ## Tableau de puce -An example of rendering multiple Chips from an array of values. Supprimer une puce la supprime du tablea. Notez que puisqu'aucun `onClick` propriété est définie, la puce peut être concentré, mais ne pas profondeur de gain tandis que vous cliquez dessus ou touché. +Un exemple de rendu de plusieurs puces à partir d'un tableau de valeurs. Supprimer une puce la supprime du tablea. Notez que puisqu'aucun `onClick` propriété est définie, la puce peut être concentré, mais ne pas profondeur de gain tandis que vous cliquez dessus ou touché. {{"demo": "pages/demos/chips/ChipsArray.js"}} diff --git a/docs/src/pages/demos/chips/chips-ru.md b/docs/src/pages/demos/chips/chips-ru.md index 35bc5d49f4e380..04c0be6fa5e6ee 100644 --- a/docs/src/pages/demos/chips/chips-ru.md +++ b/docs/src/pages/demos/chips/chips-ru.md @@ -2,32 +2,32 @@ title: Chip React component components: Chip --- -# Chips +# Фишки -

Chips are compact elements that represent an input, attribute, or action.

+

Фишки - это компактные элементы, представляющие входные данные, атрибут или действие.

-[Chips](https://material.io/design/components/chips.html) allow users to enter information, make selections, filter content, or trigger actions. +[Фишки](https://material.io/design/components/chips.html) позволяют пользователям вводить информацию, делать выбор, фильтровать контент или инициировать действия. -While included here as a standalone component, the most common use will be in some form of input, so some of the behaviour demonstrated here is not shown in context. +Несмотря на то, что он включен здесь как автономный компонент, наиболее распространенное использование будет в той или иной форме ввода, поэтому некоторые из продемонстрированных здесь действий не показаны в контексте. -## Chip +## Фишка -Examples of Chips, using an image Avatar, SVG Icon Avatar, "Letter" and (string) Avatar. +Примеры фишек, использующих изображения, SVG-иконку, «Символ» и строку в качестве аватара. -- Chips with the `onClick` property defined change appearance on focus, hover, and click. -- Chips with the `onDelete` property defined will display a delete icon which changes appearance on hover. +- Фишки с заданным свойством `onClick` могут изменять внешний вид при фокусировке, наведении курсора и клике. +- Фишки с определенным свойством `onDelete` будут отображать значок удаления который меняет внешний вид при наведении курсора. {{"demo": "pages/demos/chips/Chips.js"}} -### Outlined Chips +### Контурные фишки -Outlined chips offer an alternative style. +Контурные фишки предлагают альтернативный стиль. {{"demo": "pages/demos/chips/OutlinedChips.js"}} -## Chip array +## Массив фишек -An example of rendering multiple Chips from an array of values. Deleting a chip removes it from the array. Note that since no `onClick` property is defined, the Chip can be focused, but does not gain depth while clicked or touched. +Пример рендеринга нескольких фишек из массива значений. Удаление фишки удаляет ее из массива. Обратите внимание, что поскольку свойство `onClick` не определено, фишка может быть сфокусирована, но не получает глубины при щелчке или касании. {{"demo": "pages/demos/chips/ChipsArray.js"}} diff --git a/docs/src/pages/demos/dialogs/dialogs-de.md b/docs/src/pages/demos/dialogs/dialogs-de.md index bb9b00fef6edd6..389b2226ca95c7 100644 --- a/docs/src/pages/demos/dialogs/dialogs-de.md +++ b/docs/src/pages/demos/dialogs/dialogs-de.md @@ -45,7 +45,7 @@ You can also swap out the transition, the next example uses `Slide`. ## Form dialogs -Form dialogs allow users to fill out form fields within a dialog. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit' +Form dialogs allow users to fill out form fields within a dialog. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit'. {{"demo": "pages/demos/dialogs/FormDialog.js"}} @@ -75,7 +75,7 @@ You may make a dialog responsively full screen the dialog using `withMobileDialo ## Confirmation dialogs -Confirmation dialogs require users to explicitly confirm their choice before an option is committed. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK.” +Confirmation dialogs require users to explicitly confirm their choice before an option is committed. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK”. Touching “Cancel” in a confirmation dialog, or pressing Back, cancels the action, discards any changes, and closes the dialog. diff --git a/docs/src/pages/demos/dialogs/dialogs-es.md b/docs/src/pages/demos/dialogs/dialogs-es.md index bb9b00fef6edd6..4bc3581358e0a5 100644 --- a/docs/src/pages/demos/dialogs/dialogs-es.md +++ b/docs/src/pages/demos/dialogs/dialogs-es.md @@ -2,13 +2,13 @@ title: Dialog React component components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Slide --- -# Dialogs +# Diálogos -

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

+

Los diálogos informan a los usuarios sobre una acción y pueden contener información importante, o varias acciones.

-A [Dialog](https://material.io/design/components/dialogs.html) is a type of [modal](/utils/modal/) window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken. +Un [Diálogo](https://material.io/design/components/dialogs.html)es una clase de [ventana modal](/utils/modal/) que aparece encima del contenido para proveer información importante o pedir que el usuario tome una decision. Los diálogos deshabilitan todas las funcciones del app cuando aparecen, y se quedan visibles hasta que se confirman, se despedan, o se toma alguna acción necesario. -Dialogs are purposefully interruptive, so they should be used sparingly. +Los diálogos están diseñados a interrumpir el usuario, por eso, deben usarse solo cuando estén necesarios. ## Simple Dialogs @@ -45,7 +45,7 @@ You can also swap out the transition, the next example uses `Slide`. ## Form dialogs -Form dialogs allow users to fill out form fields within a dialog. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit' +Form dialogs allow users to fill out form fields within a dialog. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit'. {{"demo": "pages/demos/dialogs/FormDialog.js"}} @@ -53,7 +53,7 @@ Form dialogs allow users to fill out form fields within a dialog. For example, i If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the `DialogTitle` to support a close button. -⚠️ While the material design specification encourages theming, this example is off the beaten path. +⚠️ A pesar de que la especificación de material design anima a usar temas, este ejemplo no es común. {{"demo": "pages/demos/dialogs/CustomizedDialog.js"}} @@ -75,7 +75,7 @@ You may make a dialog responsively full screen the dialog using `withMobileDialo ## Confirmation dialogs -Confirmation dialogs require users to explicitly confirm their choice before an option is committed. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK.” +Confirmation dialogs require users to explicitly confirm their choice before an option is committed. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK”. Touching “Cancel” in a confirmation dialog, or pressing Back, cancels the action, discards any changes, and closes the dialog. diff --git a/docs/src/pages/demos/dialogs/dialogs-fr.md b/docs/src/pages/demos/dialogs/dialogs-fr.md index 9f01c70c057d6f..f0c7e1d8a7175a 100644 --- a/docs/src/pages/demos/dialogs/dialogs-fr.md +++ b/docs/src/pages/demos/dialogs/dialogs-fr.md @@ -34,24 +34,24 @@ Utilisez les alertes de la barre de titre uniquement dans les situations à haut Si un titre est requis: -- Use a clear question or statement with an explanation in the content area, such as "Erase USB storage?". -- Avoid apologies, ambiguity, or questions, such as “Warning!” or “Are you sure?” +- Utilisez une question ou une déclaration claire avec une explication dans la zone de contenu, telle que "Effacer le stockage USB?". +- Évitez les excuses, les ambiguïtés ou les questions telles que "Attention" {{"demo": "pages/demos/dialogs/AlertDialog.js"}} -You can also swap out the transition, the next example uses `Slide`. +Vous pouvez également permuter la transition. L’exemple suivant utilise `Slide`. {{"demo": "pages/demos/dialogs/AlertDialogSlide.js"}} ## Dialogues de formulaire -Form dialogs allow users to fill out form fields within a dialog. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit' +Les boîtes de dialogue de formulaire permettent aux utilisateurs de remplir des champs de formulaire dans une boîte de dialogue. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit'. {{"demo": "pages/demos/dialogs/FormDialog.js"}} ## Dialogue personnalisé -If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the `DialogTitle` to support a close button. +Si vous avez lu la page de documentation [sur les personnalisation](/customization/overrides/) mais que vous n'êtes pas prêt à vous lancer, voici un exemple de la façon dont vous pouvez personnaliser le `DialogTitle` pour ajouter un bouton de fermeture. ⚠️ Bien que la spécification material encouragent la thématisation, cet exemple sort des sentiers battus. @@ -63,7 +63,7 @@ If you have been reading the [overrides documentation page](/customization/overr ## Tailles en option -You can set a dialog maximum width by using the `maxWidth` enumerable in combination with the `fullWidth` boolean. When the `fullWidth` property is true, the dialog will adapt based on the `maxWidth` value. +Vous pouvez définir une largeur maximale dans la boîte de dialogue à l’aide de la valeur `maxWidth`, associée à la valeur `fullWidth`. Lorsque la propriété `fullWidth` est définie sur true, la boîte de dialogue s'adapte en fonction de la valeur `maxWidth`. {{"demo": "pages/demos/dialogs/MaxWidthDialog.js"}} @@ -75,15 +75,15 @@ You may make a dialog responsively full screen the dialog using `withMobileDialo ## Dialogues de confirmation -Confirmation dialogs require users to explicitly confirm their choice before an option is committed. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK.” +Les dialogues de confirmation demandent aux utilisateurs de confirmer explicitement leur choix avant la validation d'une option. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK”. -Touching “Cancel” in a confirmation dialog, or pressing Back, cancels the action, discards any changes, and closes the dialog. +Appuyer sur “Annuler” dans une boîte de dialogue de confirmation ou appuyer sur Retour annule l'action, annule les modifications et ferme la boîte de dialogue. {{"demo": "pages/demos/dialogs/ConfirmationDialog.js"}} ## Accessibilité -Be sure to add `aria-labelledby="id..."`, referencing the modal title, to the `Dialog`. Additionally, you may give a description of your modal dialog with the `aria-describedby="id..."` property on the `Dialog`. +Assurez-vous d’ajouter `aria-labelledby = "id ..."`, faisant référence au titre modal, dans le composant `Dialog`. De plus, vous pouvez donner une description de votre dialogue avec la propriété `aria-describeby="id ..."` du composant `Dialog`. ## Défiler de longues contenu @@ -98,7 +98,7 @@ Essayez la démo ci-dessous pour voir ce que nous voulons dire: ## Dialogue glissable -You can create a draggable dialog by using [react-draggable](https://github.com/mzabriskie/react-draggable). To do so, you can pass the the imported `Draggable` component as the `PaperComponent` of the `Dialog` component. This will make the entire dialog draggable. +Vous pouvez créer une boîte de dialogue déplaçable à l’aide de [react-draggable](https://github.com/mzabriskie/react-draggable). Pour ce faire, vous pouvez passer le composant importé `Draggable` en tant que proprieté `PaperComponent` du composant `Dialog`. Cela rend la totalité de la boîte de dialogue déplaçable. {{"demo": "pages/demos/dialogs/DraggableDialog.js"}} diff --git a/docs/src/pages/demos/dialogs/dialogs-ja.md b/docs/src/pages/demos/dialogs/dialogs-ja.md index bb9b00fef6edd6..389b2226ca95c7 100644 --- a/docs/src/pages/demos/dialogs/dialogs-ja.md +++ b/docs/src/pages/demos/dialogs/dialogs-ja.md @@ -45,7 +45,7 @@ You can also swap out the transition, the next example uses `Slide`. ## Form dialogs -Form dialogs allow users to fill out form fields within a dialog. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit' +Form dialogs allow users to fill out form fields within a dialog. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit'. {{"demo": "pages/demos/dialogs/FormDialog.js"}} @@ -75,7 +75,7 @@ You may make a dialog responsively full screen the dialog using `withMobileDialo ## Confirmation dialogs -Confirmation dialogs require users to explicitly confirm their choice before an option is committed. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK.” +Confirmation dialogs require users to explicitly confirm their choice before an option is committed. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK”. Touching “Cancel” in a confirmation dialog, or pressing Back, cancels the action, discards any changes, and closes the dialog. diff --git a/docs/src/pages/demos/dialogs/dialogs-pt.md b/docs/src/pages/demos/dialogs/dialogs-pt.md index deb89c4a2346fc..ae7f871092cae1 100644 --- a/docs/src/pages/demos/dialogs/dialogs-pt.md +++ b/docs/src/pages/demos/dialogs/dialogs-pt.md @@ -4,13 +4,13 @@ components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions --- # Dialogs (Diálogos) -

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

+

As caixas de diálogo informam os usuários sobre uma tarefa e podem conter informações críticas, exigir decisões ou envolver várias tarefas.

-A [Dialog](https://material.io/design/components/dialogs.html) is a type of [modal](/utils/modal/) window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken. +Uma caixa de [Diálogo](https://material.io/design/components/dialogs.html) é um tipo de janela [modal](/utils/modal/) que aparece na frente do conteúdo do aplicativo para fornecer informações críticas ou solicitar uma decisão. As caixas de diálogo desativam toda a funcionalidade do aplicativo quando elas são exibidas e permanecem na tela até que sejam confirmadas, rejeitadas ou que uma ação necessária tenha sido executada. -Dialogs are purposefully interruptive, so they should be used sparingly. +As caixas de diálogo são intencionalmente interruptivas, portanto devem ser usadas com moderação. -## Simple Dialogs +## Caixas de diálogo simples Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account). @@ -45,7 +45,7 @@ You can also swap out the transition, the next example uses `Slide`. ## Form dialogs -Form dialogs allow users to fill out form fields within a dialog. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit' +Form dialogs allow users to fill out form fields within a dialog. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit'. {{"demo": "pages/demos/dialogs/FormDialog.js"}} @@ -75,7 +75,7 @@ You may make a dialog responsively full screen the dialog using `withMobileDialo ## Confirmation dialogs -Confirmation dialogs require users to explicitly confirm their choice before an option is committed. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK.” +Confirmation dialogs require users to explicitly confirm their choice before an option is committed. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK”. Touching “Cancel” in a confirmation dialog, or pressing Back, cancels the action, discards any changes, and closes the dialog. diff --git a/docs/src/pages/demos/dialogs/dialogs-ru.md b/docs/src/pages/demos/dialogs/dialogs-ru.md index bb9b00fef6edd6..4a8b001119e1bc 100644 --- a/docs/src/pages/demos/dialogs/dialogs-ru.md +++ b/docs/src/pages/demos/dialogs/dialogs-ru.md @@ -2,106 +2,106 @@ title: Dialog React component components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions, Slide --- -# Dialogs +# Диалоги -

Dialogs inform users about a task and can contain critical information, require decisions, or involve multiple tasks.

+

Диалоги информируют пользователей о задаче и могут содержать критическую информацию, требовать решения или включать несколько задач.

-A [Dialog](https://material.io/design/components/dialogs.html) is a type of [modal](/utils/modal/) window that appears in front of app content to provide critical information or ask for a decision. Dialogs disable all app functionality when they appear, and remain on screen until confirmed, dismissed, or a required action has been taken. +[Диалог](https://material.io/design/components/dialogs.html) представляет собой тип [модальных](/utils/modal/) окон, который появляется над приложением, чтобы предоставить важную информацию или для предоставления решения. Диалоги отключают все функции приложения, когда они появляются, и остаются на экране до тех пор, пока не будут подтверждены, отклонены или пока не будут предприняты необходимые действия. -Dialogs are purposefully interruptive, so they should be used sparingly. +Диалоги целенаправленно останавливают, поэтому их следует использовать с осторожностью. -## Simple Dialogs +## Простые диалоги -Simple dialogs can provide additional details or actions about a list item. For example, they can display avatars, icons, clarifying subtext, or orthogonal actions (such as adding an account). +Простые диалоги могут предоставить дополнительные детали или действия по элементу списка. Например, они могут отображать аватары, значки, уточняющий подтекст или ортогональные действия (например, добавление учетной записи). Touch mechanics: -- Choosing an option immediately commits the option and closes the menu -- Touching outside of the dialog, or pressing Back, cancels the action and closes the dialog +- Выбор опции немедленно фиксирует ее и закрывает меню +- Касание за пределами диалога или нажатие Назад отменяет действие и закрывает диалоговое окно {{"demo": "pages/demos/dialogs/SimpleDialog.js"}} -## Alerts +## Оповещения -Alerts are urgent interruptions, requiring acknowledgement, that inform the user about a situation. +Оповещения - это срочные сообщения, требующие подтверждения, которые информируют пользователя о ситуации. -Most alerts don't need titles. They summarize a decision in a sentence or two by either: +Большинству оповещений не нужны названия. Они суммируют решение в предложении или два: -- Asking a question (e.g. "Delete this conversation?") -- Making a statement related to the action buttons +- Задать вопрос (например, «Удалить этот разговор?») +- Создать заявления, связанное с кнопками действий -Use title bar alerts only for high-risk situations, such as the potential loss of connectivity. Users should be able to understand the choices based on the title and button text alone. +Используйте предупреждения в строке заголовка только для ситуаций с высоким риском, таких как потенциальная потеря подключения. Пользователи должны уметь понимать варианты, основываясь только на заголовке и тексте кнопки. -If a title is required: +Если требуется название: -- Use a clear question or statement with an explanation in the content area, such as "Erase USB storage?". -- Avoid apologies, ambiguity, or questions, such as “Warning!” or “Are you sure?” +- Используйте четкий вопрос или утверждение с пояснением в области содержимого, например «Очистить USB-накопитель?». +- Избегайте извинений, двусмысленности или вопросов, таких как «Предупреждение!» Или «Вы уверены?» {{"demo": "pages/demos/dialogs/AlertDialog.js"}} -You can also swap out the transition, the next example uses `Slide`. +Вы также можете поменять анимацию, в следующем примере используется `Slide`. {{"demo": "pages/demos/dialogs/AlertDialogSlide.js"}} -## Form dialogs +## Диалоги с формой -Form dialogs allow users to fill out form fields within a dialog. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit' +Диалоги с формой позволяют пользователям заполнять поля формы внутри диалога. For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit'. {{"demo": "pages/demos/dialogs/FormDialog.js"}} -## Customized dialog +## Кастомизированные диалоги -If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the `DialogTitle` to support a close button. +Если вы уже читали страницу документации [о переопределении](/customization/overrides/) но не уверены, что готовы это применить, вот один из примеров того, как можно настроить `DialogTitle` для поддержки кнопки закрытия. -⚠️ While the material design specification encourages theming, this example is off the beaten path. +⚠️ Хотя спецификации материал дизайна поощряют использование тем, эти примеры не соответствуют требованиям. {{"demo": "pages/demos/dialogs/CustomizedDialog.js"}} -## Full-screen dialogs +## Полноэкранные диалоги {{"demo": "pages/demos/dialogs/FullScreenDialog.js"}} -## Optional sizes +## Опциональные размеры -You can set a dialog maximum width by using the `maxWidth` enumerable in combination with the `fullWidth` boolean. When the `fullWidth` property is true, the dialog will adapt based on the `maxWidth` value. +Вы можете установить максимальную ширину диалога с помощью числового значения `maxWidth` в сочетании с булевым значением `fullWidth`. Когда свойство `fullWidth` имеет значение true, диалоговое окно будет адаптировано на основе значения `maxWidth`. {{"demo": "pages/demos/dialogs/MaxWidthDialog.js"}} -## Responsive full-screen +## Отзывчивый полноэкранный режим -You may make a dialog responsively full screen the dialog using `withMobileDialog`. By default, `withMobileDialog()(Dialog)` responsively full screens *at or below* the `sm` [screen size](/layout/basics/). You can choose your own breakpoint for example `xs` by passing the `breakpoint` argument: `withMobileDialog({breakpoint: 'xs'})(Dialog)`. +Вы можете сделать диалог в полноэкранном режиме, используя `withMobileDialog`. По умолчанию `withMobileDialog () (Dialog)` переходит в полноэкранный режим когда [размер экрана](/layout/basics/) *равен или ниже* значения `sm`. Вы можете выбрать собственную точку остановки, например `xs`, передав аргумент `breakpoint`: `withMobileDialog({breakpoint: 'xs'})(Dialog)`. {{"demo": "pages/demos/dialogs/ResponsiveDialog.js"}} -## Confirmation dialogs +## Диалоги подтверждения -Confirmation dialogs require users to explicitly confirm their choice before an option is committed. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK.” +Диалоги подтверждения требуют, чтобы пользователи явно подтвердили свой выбор, прежде чем их выбор будет сохранен. For example, users can listen to multiple ringtones but only make a final selection upon touching “OK”. -Touching “Cancel” in a confirmation dialog, or pressing Back, cancels the action, discards any changes, and closes the dialog. +Нажатие кнопки «Отмена» в диалоговом окне подтверждения или нажатие «Назад» отменяет действие, отменяет любые изменения и закрывает диалоговое окно. {{"demo": "pages/demos/dialogs/ConfirmationDialog.js"}} ## Accessibility -Be sure to add `aria-labelledby="id..."`, referencing the modal title, to the `Dialog`. Additionally, you may give a description of your modal dialog with the `aria-describedby="id..."` property on the `Dialog`. +Не забудьте добавить `aria-labelledby="id..."`, ссылаясь на заголовок модального окна, в `Dialog`. Кроме того, вы можете создать описание вашего модального диалога с помощью свойства `aria-describedby="id..."` в `Dialog`. -## Scrolling long content +## Прокрутка длинного контента -When dialogs become too long for the user’s viewport or device, they scroll. +Когда диалоги становятся слишком длинными для окна просмотра или устройства пользователя, они их прокручивают. -- `scroll=paper` the content of the dialog scrolls within the paper element. -- `scroll=body` the content of the dialog scrolls within the body element. +- `scroll = paper` содержимое диалогового окна прокручивается внутри элемента paper. +- `scroll = body` содержимое диалога прокручивается внутри элемента body. -Try the demo below to see what we mean: +Попробуйте демо ниже, чтобы увидеть, что мы имеем в виду: {{"demo": "pages/demos/dialogs/ScrollDialog.js"}} -## Draggable dialog +## Перетаскиваемый диалог -You can create a draggable dialog by using [react-draggable](https://github.com/mzabriskie/react-draggable). To do so, you can pass the the imported `Draggable` component as the `PaperComponent` of the `Dialog` component. This will make the entire dialog draggable. +Вы можете создать перетаскиваемый диалог, используя [react-draggable](https://github.com/mzabriskie/react-draggable). Для этого вы можете передать импортированный компонент `Draggable` как компонент `PaperComponent` компонента `Dialog`. Это сделает весь диалог перетаскиваемым. {{"demo": "pages/demos/dialogs/DraggableDialog.js"}} -## Performance +## Производительность -Follow the [Modal performance section](/utils/modal/#performance). \ No newline at end of file +Перейдите в раздел [Modal performance section](/utils/modal/#performance). \ No newline at end of file diff --git a/docs/src/pages/demos/dialogs/dialogs-zh.md b/docs/src/pages/demos/dialogs/dialogs-zh.md index 87ec2b929476bd..c681e2b63ad633 100644 --- a/docs/src/pages/demos/dialogs/dialogs-zh.md +++ b/docs/src/pages/demos/dialogs/dialogs-zh.md @@ -45,7 +45,7 @@ components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions ## 表单对话框 -表单对话框允许用户通过一个弹出的对话框，对表单进行填写。 在下面的例子中，你的网站提示那些潜在用户填写他们的电子邮箱，他们可以在点击之后填写email区域，并点击'提交'按钮以提交。 +表单对话框允许用户通过一个弹出的对话框，对表单进行填写。 For example, if your site prompts for potential subscribers to fill in their email address, they can fill out the email field and touch 'Submit'. {{"demo": "pages/demos/dialogs/FormDialog.js"}} @@ -75,7 +75,7 @@ components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions ## 确认对话框 -确认对话框要求用户在提交选项之前显式确认他们的选择。 例如, 用户可以聆听多个铃声, 但只在触摸 "OK" 时进行最后的选择。 +确认对话框要求用户在提交选项之前显式确认他们的选择。 For example, users can listen to multiple ringtones but only make a final selection upon touching “OK”. 在确认对话框中触摸 "取消", 或按后退, 将会取消当前操作, 放弃任何更改, 并关闭对话框。 diff --git a/docs/src/pages/demos/dividers/dividers-de.md b/docs/src/pages/demos/dividers/dividers-de.md index 2f5e62a96ed58f..a8cc8e5cafaee0 100644 --- a/docs/src/pages/demos/dividers/dividers-de.md +++ b/docs/src/pages/demos/dividers/dividers-de.md @@ -20,7 +20,7 @@ We need to make sure the `Divider` is rendered as a `li` to match the HTML5 spec ## Inset Dividers -The `inset` property has now been deprecated. You should now use `variant="inset"` +Die `inset`-Eigenschaft ist von nun an veraltet. Sie sollten nun `variant="inset"` benutzen. {{"demo": "pages/demos/dividers/InsetDividers.js"}} diff --git a/docs/src/pages/demos/dividers/dividers-es.md b/docs/src/pages/demos/dividers/dividers-es.md index 2f5e62a96ed58f..7f8b4cb9eb4cad 100644 --- a/docs/src/pages/demos/dividers/dividers-es.md +++ b/docs/src/pages/demos/dividers/dividers-es.md @@ -20,7 +20,7 @@ We need to make sure the `Divider` is rendered as a `li` to match the HTML5 spec ## Inset Dividers -The `inset` property has now been deprecated. You should now use `variant="inset"` +The `inset` property has now been deprecated. You should now use `variant="inset"`. {{"demo": "pages/demos/dividers/InsetDividers.js"}} diff --git a/docs/src/pages/demos/dividers/dividers-fr.md b/docs/src/pages/demos/dividers/dividers-fr.md index 7dfaf6a582e04c..4170fcf105e324 100644 --- a/docs/src/pages/demos/dividers/dividers-fr.md +++ b/docs/src/pages/demos/dividers/dividers-fr.md @@ -20,7 +20,7 @@ Nous devons nous assurer que le `Divider` est rendu en tant que `li` pour corres ## Encart De Diviseurs -The `inset` property has now been deprecated. You should now use `variant="inset"` +The `inset` property has now been deprecated. You should now use `variant="inset"`. {{"demo": "pages/demos/dividers/InsetDividers.js"}} diff --git a/docs/src/pages/demos/dividers/dividers-ja.md b/docs/src/pages/demos/dividers/dividers-ja.md index 2f5e62a96ed58f..7f8b4cb9eb4cad 100644 --- a/docs/src/pages/demos/dividers/dividers-ja.md +++ b/docs/src/pages/demos/dividers/dividers-ja.md @@ -20,7 +20,7 @@ We need to make sure the `Divider` is rendered as a `li` to match the HTML5 spec ## Inset Dividers -The `inset` property has now been deprecated. You should now use `variant="inset"` +The `inset` property has now been deprecated. You should now use `variant="inset"`. {{"demo": "pages/demos/dividers/InsetDividers.js"}} diff --git a/docs/src/pages/demos/dividers/dividers-pt.md b/docs/src/pages/demos/dividers/dividers-pt.md index 11dc6fe5b35e15..c264ac4652ae19 100644 --- a/docs/src/pages/demos/dividers/dividers-pt.md +++ b/docs/src/pages/demos/dividers/dividers-pt.md @@ -6,7 +6,7 @@ components: Divider

Um divisor é uma linha fina que agrupa conteúdo em listas e layouts.

-[Dividers](https://material.io/design/components/dividers.html) separate content into clear groups. +[Dividers (Divisores)](https://material.io/design/components/dividers.html) separam grupos de conteúdos. ## Divisores de lista @@ -20,7 +20,7 @@ We need to make sure the `Divider` is rendered as a `li` to match the HTML5 spec ## Divisores de inserção -The `inset` property has now been deprecated. You should now use `variant="inset"` +A propriedade `inset` está obsoleta e em desuso. Você deve usar agora `variant="inset"`. {{"demo": "pages/demos/dividers/InsetDividers.js"}} diff --git a/docs/src/pages/demos/dividers/dividers-ru.md b/docs/src/pages/demos/dividers/dividers-ru.md index 2f5e62a96ed58f..101027c7dc6364 100644 --- a/docs/src/pages/demos/dividers/dividers-ru.md +++ b/docs/src/pages/demos/dividers/dividers-ru.md @@ -2,25 +2,25 @@ title: Divider React component components: Divider --- -# Dividers +# Разделитель -

A divider is a thin line that groups content in lists and layouts.

+

Разделитель - это тонкая линия, которая группирует содержимое (контент) в списки и макеты (слои).

-[Dividers](https://material.io/design/components/dividers.html) separate content into clear groups. +[Разелители](https://material.io/design/components/dividers.html) делят содержимое (контент) на явные (четкие) группы. -## List Dividers +## Разделители списков -The divider renders as a `
` by default. You can save rendering this DOM element by using the `divider` property on the `ListItem` component. +По умолчанию разделитель отображается как `
`. Вместо этого Вы можете сформировать отображение этого DOM-элемента, используя свойство `divider` в компоненте `ListItem`. {{"demo": "pages/demos/dividers/ListDividers.js"}} -## HTML5 Specification +## Спецификации HTML5 We need to make sure the `Divider` is rendered as a `li` to match the HTML5 specification. The examples below show two ways of achieving this. ## Inset Dividers -The `inset` property has now been deprecated. You should now use `variant="inset"` +Свойство `inset` является устаревшим. Сейчас вам следует использовать `variant="inset"`. {{"demo": "pages/demos/dividers/InsetDividers.js"}} diff --git a/docs/src/pages/demos/dividers/dividers-zh.md b/docs/src/pages/demos/dividers/dividers-zh.md index 26cdd625213844..e42a5ac5d9d361 100644 --- a/docs/src/pages/demos/dividers/dividers-zh.md +++ b/docs/src/pages/demos/dividers/dividers-zh.md @@ -20,7 +20,7 @@ components: Divider ## 内嵌分隔线 -现在已弃用 `inset` 属性。你现在应该使用 `variant="inset"` +现在已弃用 `inset` 属性。你现在应该使用 `variant="inset"`. {{"demo": "pages/demos/dividers/InsetDividers.js"}} diff --git a/docs/src/pages/demos/drawers/drawers-ru.md b/docs/src/pages/demos/drawers/drawers-ru.md index ecade9afc9a99e..f67c2f543ce5c8 100644 --- a/docs/src/pages/demos/drawers/drawers-ru.md +++ b/docs/src/pages/demos/drawers/drawers-ru.md @@ -4,9 +4,9 @@ components: Drawer, SwipeableDrawer --- # Drawer -

Navigation drawers provide access to destinations in your app. Side sheets are surfaces containing supplementary content that are anchored to the left or right edge of the screen.

+

Навигационная панель предоставляет доступ к DESTINATIONS в вашем приложении. Такие панели предназначены для отображения вспомогательной информации, они располагаются, привязываясь к левому или правому краю экрана.

-[Navigation drawers](https://material.io/design/components/navigation-drawer.html) provide access to destinations and app functionality, such as switching accounts. They can either be permanently on-screen or controlled by a navigation menu icon. +[Навигационные панели](https://material.io/design/components/navigation-drawer.html) позволяют реализовывать такую функциональность как, например, переключение между аккаунтами. Их можно быстро открыть, нажимая на иконку в меню. [Side sheets](https://material.io/design/components/sheets-side.html) are supplementary surfaces primarily used on tablet and desktop. diff --git a/docs/src/pages/demos/drawers/drawers-zh.md b/docs/src/pages/demos/drawers/drawers-zh.md index 232f3b7361431a..21b8c1f1284561 100644 --- a/docs/src/pages/demos/drawers/drawers-zh.md +++ b/docs/src/pages/demos/drawers/drawers-zh.md @@ -1,5 +1,5 @@ --- -title: 抽屉React组件 +title: React抽屉组件 components: Drawer, SwipeableDrawer --- # 抽屉 diff --git a/docs/src/pages/demos/expansion-panels/expansion-panels-de.md b/docs/src/pages/demos/expansion-panels/expansion-panels-de.md index e540ebd32fb097..32316e0c4b657d 100644 --- a/docs/src/pages/demos/expansion-panels/expansion-panels-de.md +++ b/docs/src/pages/demos/expansion-panels/expansion-panels-de.md @@ -30,6 +30,6 @@ Multiple columns can be used to structure the content, and a helper text may be If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the background color of the `ExpansionPanelSummary` and padding of `ExpansionPanelDetails`. -⚠️ While the material design specification encourages theming, these examples are off the beaten path. +⚠️ Auch wenn die material design Spezifikation zur Verwendung von Themes ermutigt, liegen diese Beispiele außerhalb der üblichen Pfade. {{"demo": "pages/demos/expansion-panels/CustomizedExpansionPanel.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/expansion-panels/expansion-panels-es.md b/docs/src/pages/demos/expansion-panels/expansion-panels-es.md index e540ebd32fb097..523be710632e8d 100644 --- a/docs/src/pages/demos/expansion-panels/expansion-panels-es.md +++ b/docs/src/pages/demos/expansion-panels/expansion-panels-es.md @@ -30,6 +30,6 @@ Multiple columns can be used to structure the content, and a helper text may be If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the background color of the `ExpansionPanelSummary` and padding of `ExpansionPanelDetails`. -⚠️ While the material design specification encourages theming, these examples are off the beaten path. +⚠️ A pesar de que la especificación de material design anima a usar temas, estos ejemplos no son comunes. {{"demo": "pages/demos/expansion-panels/CustomizedExpansionPanel.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/expansion-panels/expansion-panels-ru.md b/docs/src/pages/demos/expansion-panels/expansion-panels-ru.md index e540ebd32fb097..3a9d229817c44e 100644 --- a/docs/src/pages/demos/expansion-panels/expansion-panels-ru.md +++ b/docs/src/pages/demos/expansion-panels/expansion-panels-ru.md @@ -1,10 +1,10 @@ --- -title: Expansion Panel React component +title: Панель расширения (Компонент React) components: ExpansionPanel, ExpansionPanelActions, ExpansionPanelDetails, ExpansionPanelSummary --- -# Expansion Panels +# Панель расширения -

Expansion panels contain creation flows and allow lightweight editing of an element.

+

Панель расширения содержит потоки создания и позволяет легко редактировать элементы.

[An expansion panel](https://material.io/archive/guidelines/components/expansion-panels.html) is a lightweight container that may either stand alone or be connected to a larger surface, such as a card. @@ -30,6 +30,6 @@ Multiple columns can be used to structure the content, and a helper text may be If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the background color of the `ExpansionPanelSummary` and padding of `ExpansionPanelDetails`. -⚠️ While the material design specification encourages theming, these examples are off the beaten path. +⚠️ Хотя спецификации материал дизайна поощряют использование тем, эти примеры не соответствуют требованиям. {{"demo": "pages/demos/expansion-panels/CustomizedExpansionPanel.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/grid-list/grid-list-es.md b/docs/src/pages/demos/grid-list/grid-list-es.md index 1bf03fd2e44d9d..c7ffa05e221c51 100644 --- a/docs/src/pages/demos/grid-list/grid-list-es.md +++ b/docs/src/pages/demos/grid-list/grid-list-es.md @@ -1,33 +1,33 @@ --- -title: Grid List React component +title: Componente React para Lista cuadriculada components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton --- -# Grid List +# Lista cuadriculada -

Grid lists display a collection of images in an organized grid.

+

Las listas cuadriculadas muestran una colección de imágenes organizadas en una cuadrícula.

-[Grid lists](https://material.io/design/components/image-lists.html) represent a collection of items in a repeated pattern. They help improve the visual comprehension of the content they hold. +Las [Listas cuadriculadas](https://material.io/design/components/image-lists.html) representan una colección de ítems con un patrón repetitivo. Ayudan a mejorar la comprensión visual del contenido que tienen. -## Image-only Grid list +## Lista cuadriculada sólo con imágenes -A simple example of a scrollable image `GridList`. +Un ejemplo simple de una lista cuadriculada (`GridList`) con imágenes desplazables. {{"demo": "pages/demos/grid-list/ImageGridList.js", "hideEditButton": true}} -## Grid list with titlebars +## Lista cuadriculada con barras de título -This example demonstrates the use of the `GridListTileBar` to add an overlay to each `GridListTile`. The overlay can accommodate a `title`, `subtitle` and secondary action - in this example an `IconButton`. +Este ejemplo demuestra el uso de una barra para cuadro de lista cuadriculada (`GridListTileBar`) que agrega una capa sobrepuesta a cada cuadro en una lista cuadriculada (`GridListTile`). La capa sobrepuesta puede acomodar un título (`title`), subtítulo (`subtitle`), y acción secundaria (en este ejemplo un `IconButton`). {{"demo": "pages/demos/grid-list/TitlebarGridList.js", "hideEditButton": true}} -## Single line Grid list +## Lista cuadriculada con una línea -This example demonstrates a horizontal scrollable single-line grid list of images. Horizontally scrolling grid lists are discouraged because the scrolling interferes with typical reading patterns, affecting comprehension. One notable exception is a horizontally-scrolling, single-line grid list of images, such as a gallery. +Este ejemplo muestra una lista cuadrícula con una sola línea desplazable horizontalmente. Se desaconseja usar listas cuadriculadas con desplazamiento horizontal ya que estas interfieren con los patrones típicos de lectura, afectando la comprensión. Una excepción notable es una lista cuadriculada que desplaza imágenes horizontalmente en una sola línea, como una galería. {{"demo": "pages/demos/grid-list/SingleLineGridList.js", "hideEditButton": true}} -## Advanced Grid list +## Lista cuadriculada avanzada -This example demonstrates "featured" tiles, using the `rows` and `cols` props to adjust the size of the tile, and the `padding` prop to adjust the spacing. The tiles have a customized titlebar, positioned at the top and with a custom gradient `titleBackground`. The secondary action `IconButton` is positioned on the left. +Este ejemplo muestra cuadros "destacados" usando los props filas (`rows`) y columnas (`cols`) para ajustar el tamaño del cuadro, y la prop relleno (`padding`) para ajustar el espaciado. Los cuadros tienen una barra de título personalizada, ubicada en la parte superior y un fondo de titulo (`titleBackground`) con degradado personalizado. La acción secundaria `IconButton` está ubicada a la izquierda. {{"demo": "pages/demos/grid-list/AdvancedGridList.js", "hideEditButton": true}} \ No newline at end of file diff --git a/docs/src/pages/demos/lists/lists-es.md b/docs/src/pages/demos/lists/lists-es.md index 21d42bda7badaf..5ee14087df734d 100644 --- a/docs/src/pages/demos/lists/lists-es.md +++ b/docs/src/pages/demos/lists/lists-es.md @@ -2,17 +2,17 @@ title: List React component components: Collapse, Divider, List, ListItem, ListItemAvatar, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader --- -# Lists +# Listas -

Lists are continuous, vertical indexes of text or images.

+

Las listas son índices continuos y verticales de texto o imágenes.

-[Lists](https://material.io/design/components/lists.html) are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text. +Las [listas](https://material.io/design/components/lists.html) son un grupo continuo de texto o imágenes. Se componen de elementos que contienen acciones primarias y complementarias, que se representan mediante iconos y texto. -## Simple List +## Lista Simple {{"demo": "pages/demos/lists/SimpleList.js"}} -The last item of the previous demo shows how you can render a link: +El último elemento del demo anterior muestra cómo se puede representar un enlace: ```jsx function ListItemLink(props) { @@ -26,13 +26,13 @@ function ListItemLink(props) { ``` -You can find a [demo with React Router following this section](/guides/composition/#react-router) of the documentation. +Puedes encontrar una demostración [usando React Router siguiendo esta sección](/guides/composition/#react-router) de la documentación. -## Nested List +## Lista Anidada {{"demo": "pages/demos/lists/NestedList.js"}} -## Folder List +## Lista de carpetas {{"demo": "pages/demos/lists/FolderList.js"}} @@ -42,44 +42,44 @@ Below is an interactive demo that lets you explore the visual results of the dif {{"demo": "pages/demos/lists/InteractiveList.js"}} -## Selected ListItem +## Elemento de la lista seleccionado {{"demo": "pages/demos/lists/SelectedListItem.js"}} -## Align list items +## Alineación de los elementos de la lista You should change the list item alignment when displaying 3 lines or more, set the `alignItems="flex-start"` property. {{"demo": "pages/demos/lists/AlignItemsList.js"}} -## List Controls +## Controles de lista -### Checkbox +### Casilla de selección -A checkbox can either be a primary action or a secondary action. +Un checkbox puede ser una acción primaria o una acción secundaria. -The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target. +El checkbox es la acción principal y el indicador de estado para el elemento de la lista. El botón de comentario es una acción secundaria y un objetivo separado. {{"demo": "pages/demos/lists/CheckboxList.js"}} -The checkbox is the secondary action for the list item and a separate target. +El checkbox es la acción secundaria para el elemento de la lista y un objetivo separado. {{"demo": "pages/demos/lists/CheckboxListSecondary.js"}} ### Switch -The switch is the secondary action and a separate target. +El switch es la acción secundaria y un objetivo separado. {{"demo": "pages/demos/lists/SwitchListSecondary.js"}} -## Pinned Subheader List +## Lista de subencabezados fijados -Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader. +Al desplazarse, los subencabezados permanecen anclados en la parte superior de la pantalla hasta que el siguiente subencabezado los saque de la pantalla. -This feature is relying on the CSS sticky positioning. Unfortunately it's [not implemented](https://caniuse.com/#search=sticky) by all the browsers we are supporting. We default to `disableSticky` when not supported. +Esta característica se basa en el posicionamiento adhesivo CSS. Desafortunadamente, [no está implementado](https://caniuse.com/#search=sticky) por todos los navegadores que soportamos. La propiedad `disableSticky` se aplicará por defecto cuando no sea soportado por el navegador. {{"demo": "pages/demos/lists/PinnedSubheaderList.js"}} -## Inset List +## Lista con margen {{"demo": "pages/demos/lists/InsetList.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/lists/lists-fr.md b/docs/src/pages/demos/lists/lists-fr.md index 191ef023c295a7..9e3764b413e98d 100644 --- a/docs/src/pages/demos/lists/lists-fr.md +++ b/docs/src/pages/demos/lists/lists-fr.md @@ -38,7 +38,7 @@ You can find a [demo with React Router following this section](/guides/compositi ## Interactif -Below is an interactive demo that lets you explore the visual results of the different settings: +Vous trouverez ci-dessous une démo interactive vous permettant d'explorer les résultats visuels des différents paramètres: {{"demo": "pages/demos/lists/InteractiveList.js"}} diff --git a/docs/src/pages/demos/lists/lists-ru.md b/docs/src/pages/demos/lists/lists-ru.md index 21d42bda7badaf..98fedaec601132 100644 --- a/docs/src/pages/demos/lists/lists-ru.md +++ b/docs/src/pages/demos/lists/lists-ru.md @@ -2,17 +2,17 @@ title: List React component components: Collapse, Divider, List, ListItem, ListItemAvatar, ListItemIcon, ListItemSecondaryAction, ListItemText, ListSubheader --- -# Lists +# Списки -

Lists are continuous, vertical indexes of text or images.

+

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

-[Lists](https://material.io/design/components/lists.html) are a continuous group of text or images. They are composed of items containing primary and supplemental actions, which are represented by icons and text. +[Списки](https://material.io/design/components/lists.html) представляют собой непрерывную группу из текста или изображений. Они состоят из элементов, содержащих основные и дополнительные действия, которые представлены значками и текстом. -## Simple List +## Простой список {{"demo": "pages/demos/lists/SimpleList.js"}} -The last item of the previous demo shows how you can render a link: +Последний элемент предыдущего примера показывает, как вы можете отрисовать ссылку: ```jsx function ListItemLink(props) { @@ -26,60 +26,60 @@ function ListItemLink(props) { ``` -You can find a [demo with React Router following this section](/guides/composition/#react-router) of the documentation. +Вы можете [посмотреть демо с React Router](/guides/composition/#react-router). -## Nested List +## Вложенный список {{"demo": "pages/demos/lists/NestedList.js"}} -## Folder List +## Список папок {{"demo": "pages/demos/lists/FolderList.js"}} -## Interactive +## Интерактивность -Below is an interactive demo that lets you explore the visual results of the different settings: +Ниже приведена интерактивная демонстрация, которая позволяет вам увидеть результаты различных настроек: {{"demo": "pages/demos/lists/InteractiveList.js"}} -## Selected ListItem +## Выбранный ListItem {{"demo": "pages/demos/lists/SelectedListItem.js"}} -## Align list items +## Выравнивание элементов списка -You should change the list item alignment when displaying 3 lines or more, set the `alignItems="flex-start"` property. +Вы должны изменить выравнивание элементов списка при отображении 3 или более элементов. Для этого установите свойство `alignItems = "flex-start"` {{"demo": "pages/demos/lists/AlignItemsList.js"}} -## List Controls +## Элементы управления списком ### Checkbox -A checkbox can either be a primary action or a secondary action. +Checkbox может быть основным или второстепенным действием. -The checkbox is the primary action and the state indicator for the list item. The comment button is a secondary action and a separate target. +В этом примере checkbox является основным действием и индикатором состояния для элемента списка. Кнопка комментария является второстепенным действием. {{"demo": "pages/demos/lists/CheckboxList.js"}} -The checkbox is the secondary action for the list item and a separate target. +Тут checkbox является второстепенным действием для элемента списка. {{"demo": "pages/demos/lists/CheckboxListSecondary.js"}} -### Switch +### Switch (переключатель) -The switch is the secondary action and a separate target. +Switch является второстепенным действием. {{"demo": "pages/demos/lists/SwitchListSecondary.js"}} -## Pinned Subheader List +## Закрепленный подзаголовок -Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader. +При прокрутке подзаголовки остаются закрепленными в верхней части экрана, пока следующий подзаголовок не оттеснит предыдущий. -This feature is relying on the CSS sticky positioning. Unfortunately it's [not implemented](https://caniuse.com/#search=sticky) by all the browsers we are supporting. We default to `disableSticky` when not supported. +Эта функция опирается на фиксированное позиционирование CSS. К сожалению эта функциональность, [не реализована](https://caniuse.com/#search=sticky) всеми браузерами, которые мы поддерживаем. Мы по умолчанию выключаем закрепление - `disableSticky` когда оно не поддерживается. {{"demo": "pages/demos/lists/PinnedSubheaderList.js"}} -## Inset List +## Вставленный список {{"demo": "pages/demos/lists/InsetList.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/menus/menus-de.md b/docs/src/pages/demos/menus/menus-de.md index 5479184bbc5898..efcab8d6bbad25 100644 --- a/docs/src/pages/demos/menus/menus-de.md +++ b/docs/src/pages/demos/menus/menus-de.md @@ -56,7 +56,7 @@ It is a [render props](https://reactjs.org/docs/render-props.html) demo that kee ## Limitations -There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipse` from working in a flexbox layout. You can use the `Typography` component to workaround this issue: +There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: {{"demo": "pages/demos/menus/TypographyMenu.js"}} @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of: There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. -{{"demo": "pages/demos/menus/MenuPopupState.js"}} +{{"demo": "pages/demos/menus/MenuPopupState.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/menus/menus-es.md b/docs/src/pages/demos/menus/menus-es.md index 5479184bbc5898..7d3f99ebd4c3d5 100644 --- a/docs/src/pages/demos/menus/menus-es.md +++ b/docs/src/pages/demos/menus/menus-es.md @@ -36,7 +36,7 @@ The primary responsibility of the `MenuList` component is to handle the focus. If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the `MenuItem`. -⚠️ While the material design specification encourages theming, this example is off the beaten path. +⚠️ A pesar de que la especificación de material design anima a usar temas, este ejemplo no es común. {{"demo": "pages/demos/menus/ListItemComposition.js"}} @@ -56,7 +56,7 @@ It is a [render props](https://reactjs.org/docs/render-props.html) demo that kee ## Limitations -There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipse` from working in a flexbox layout. You can use the `Typography` component to workaround this issue: +There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: {{"demo": "pages/demos/menus/TypographyMenu.js"}} @@ -66,7 +66,7 @@ Use a different transition. {{"demo": "pages/demos/menus/FadeMenu.js"}} -## Complementary projects +## Proyectos relacionados For more advanced use cases you might be able to take advantage of: @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of: There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. -{{"demo": "pages/demos/menus/MenuPopupState.js"}} +{{"demo": "pages/demos/menus/MenuPopupState.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/menus/menus-fr.md b/docs/src/pages/demos/menus/menus-fr.md index c17e9ded421594..74e07d67f81c8a 100644 --- a/docs/src/pages/demos/menus/menus-fr.md +++ b/docs/src/pages/demos/menus/menus-fr.md @@ -6,21 +6,21 @@ components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper

Les menus affichent une liste de choix sur des surfaces temporaires.

-A [Menu](https://material.io/design/components/menus.html) displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control. +Un [Menu](https://material.io/design/components/menus.html) affiche une liste de choix sur une surface temporaire. Ils apparaissent lorsque les utilisateurs interagissent avec un bouton, une action ou un autre contrôle. ## Menu simple -Simple menus open over the anchor element by default (this option can be changed via props). When close to a screen edge, simple menus vertically realign to make sure that all menu items are completely visible. +Les menus simples s'ouvrent par défaut sur l'élément d'ancrage (cette option peut être modifiée via les propriétés). When close to a screen edge, simple menus vertically realign to make sure that all menu items are completely visible. -Choosing an option should immediately ideally commit the option and close the menu. +Le choix d'une option doit idéalement être validé immédiatement et fermer le menu. -**Disambiguation**: In contrast to simple menus, simple dialogs can present additional detail related to the options available for a list item or provide navigational or orthogonal actions related to the primary task. Although they can display the same content, simple menus are preferred over simple dialogs because simple menus are less disruptive to the user’s current context. +**Désambiguïsation**: Contrairement aux menus simples, les boîtes de dialogue simples peuvent présenter des détails supplémentaires relatifs aux options disponibles pour un élément de la liste ou proposer des actions de navigation ou orthogonales liées à la tâche principale. Bien qu'ils puissent afficher le même contenu, les menus simples sont préférables aux simples dialogues, car les menus simples perturbent moins le contexte actuel de l'utilisateur. {{"demo": "pages/demos/menus/SimpleMenu.js"}} ## Menus sélectionnés -If used for item selection, when opened, simple menus attempt to vertically align the currently selected menu item with the anchor element. The currently selected menu item is set using the `selected` property (from [ListItem](/api/list-item/)). +S'ils sont utilisés pour la sélection d'éléments, les menus simples, une fois ouverts, tentent d'aligner verticalement l'élément de menu sélectionné avec l'élément d'ancrage. L'élément de menu actuellement sélectionné est défini à l'aide de la propriété `selected` (à partir de [ListItem](/api/list-item/)). {{"demo": "pages/demos/menus/SimpleListMenu.js"}} @@ -32,17 +32,17 @@ The primary responsibility of the `MenuList` component is to handle the focus. {{"demo": "pages/demos/menus/MenuListComposition.js"}} -## Customized MenuItem +## MenuItem personnalisé -If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the `MenuItem`. +Si vous avez lu la page de documentation [sur les personnalisations](/customization/overrides/) mais que vous n'êtes pas prêt à vous lancer, voici un exemple de la façon dont vous pouvez personnaliser le `MenuItem`. ⚠️ Bien que la spécification material encouragent la thématisation, cet exemple sort des sentiers battus. {{"demo": "pages/demos/menus/ListItemComposition.js"}} -The `MenuItem` is a wrapper around `ListItem` with some additional styles. You can use the same list composition features with the `MenuItem` component: +Le `MenuItem` est un wrapper autour de `ListItem` avec quelques styles supplémentaires. Vous pouvez utiliser les mêmes fonctionnalités de composition de liste avec le composant `MenuItem`: -## Max height menus +## Hauteur maximale des menus If the height of a menu prevents all menu items from being displayed, the menu can scroll internally. @@ -56,22 +56,22 @@ It is a [render props](https://reactjs.org/docs/render-props.html) demo that kee ## Limites -There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipse` from working in a flexbox layout. You can use the `Typography` component to workaround this issue: +There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: {{"demo": "pages/demos/menus/TypographyMenu.js"}} ## Changer la transition -Use a different transition. +Utilisez une transition différente. {{"demo": "pages/demos/menus/FadeMenu.js"}} ## Projets complémentaires -For more advanced use cases you might be able to take advantage of: +Pour un usage plus avancé cas, vous pourriez être en mesure de prendre avantage de: -### PopupState helper +### Assistant PopupState -There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. +Il existe un package tiers [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) qui gère l’état du menu pour vous dans la plupart des cas. -{{"demo": "pages/demos/menus/MenuPopupState.js"}} +{{"demo": "pages/demos/menus/MenuPopupState.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/menus/menus-ja.md b/docs/src/pages/demos/menus/menus-ja.md index 5479184bbc5898..efcab8d6bbad25 100644 --- a/docs/src/pages/demos/menus/menus-ja.md +++ b/docs/src/pages/demos/menus/menus-ja.md @@ -56,7 +56,7 @@ It is a [render props](https://reactjs.org/docs/render-props.html) demo that kee ## Limitations -There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipse` from working in a flexbox layout. You can use the `Typography` component to workaround this issue: +There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: {{"demo": "pages/demos/menus/TypographyMenu.js"}} @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of: There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. -{{"demo": "pages/demos/menus/MenuPopupState.js"}} +{{"demo": "pages/demos/menus/MenuPopupState.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/menus/menus-pt.md b/docs/src/pages/demos/menus/menus-pt.md index c3d97570f8c48d..5d7cf8af223515 100644 --- a/docs/src/pages/demos/menus/menus-pt.md +++ b/docs/src/pages/demos/menus/menus-pt.md @@ -56,7 +56,7 @@ It is a [render props](https://reactjs.org/docs/render-props.html) demo that kee ## Limitations -There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipse` from working in a flexbox layout. You can use the `Typography` component to workaround this issue: +There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: {{"demo": "pages/demos/menus/TypographyMenu.js"}} @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of: There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. -{{"demo": "pages/demos/menus/MenuPopupState.js"}} +{{"demo": "pages/demos/menus/MenuPopupState.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/menus/menus-ru.md b/docs/src/pages/demos/menus/menus-ru.md index 5479184bbc5898..34b616a456c944 100644 --- a/docs/src/pages/demos/menus/menus-ru.md +++ b/docs/src/pages/demos/menus/menus-ru.md @@ -2,13 +2,13 @@ title: Menu React component components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper --- -# Menus +# Меню

Menus display a list of choices on temporary surfaces.

A [Menu](https://material.io/design/components/menus.html) displays a list of choices on a temporary surface. They appear when users interact with a button, action, or other control. -## Simple Menu +## Простое меню Simple menus open over the anchor element by default (this option can be changed via props). When close to a screen edge, simple menus vertically realign to make sure that all menu items are completely visible. @@ -36,7 +36,7 @@ The primary responsibility of the `MenuList` component is to handle the focus. If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the `MenuItem`. -⚠️ While the material design specification encourages theming, this example is off the beaten path. +⚠️ Хотя спецификации материал дизайна поощряют использование тем, эти примеры не соответствуют требованиям. {{"demo": "pages/demos/menus/ListItemComposition.js"}} @@ -54,9 +54,9 @@ It is a [render props](https://reactjs.org/docs/render-props.html) demo that kee {{"demo": "pages/demos/menus/RenderPropsMenu.js"}} -## Limitations +## Ограничения -There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipse` from working in a flexbox layout. You can use the `Typography` component to workaround this issue: +There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: {{"demo": "pages/demos/menus/TypographyMenu.js"}} @@ -66,7 +66,7 @@ Use a different transition. {{"demo": "pages/demos/menus/FadeMenu.js"}} -## Complementary projects +## Дополнительные проекты For more advanced use cases you might be able to take advantage of: @@ -74,4 +74,4 @@ For more advanced use cases you might be able to take advantage of: There is a 3rd party package [`material-ui-popup-state`](https://github.com/jcoreio/material-ui-popup-state) that takes care of menu state for you in most cases. -{{"demo": "pages/demos/menus/MenuPopupState.js"}} +{{"demo": "pages/demos/menus/MenuPopupState.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/menus/menus-zh.md b/docs/src/pages/demos/menus/menus-zh.md index b74ca15e6d3deb..a08750ec123b31 100644 --- a/docs/src/pages/demos/menus/menus-zh.md +++ b/docs/src/pages/demos/menus/menus-zh.md @@ -56,7 +56,7 @@ components: Menu, MenuItem, MenuList, ClickAwayListener, Popover, Popper ## 局限性 -这里有 [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437)，这个bug会让`text-overflow: ellipse`在 flexbox 布局中失去效果 你可以使用`Typography`组件做替代方案绕过这个问题： +There is [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437) that prevents `text-overflow: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: {{"demo": "pages/demos/menus/TypographyMenu.js"}} diff --git a/docs/src/pages/demos/paper/paper-zh.md b/docs/src/pages/demos/paper/paper-zh.md index 757a8437d195ab..2e5f59a37bf9d9 100644 --- a/docs/src/pages/demos/paper/paper-zh.md +++ b/docs/src/pages/demos/paper/paper-zh.md @@ -4,7 +4,7 @@ components: Paper --- # Paper -

在“材质设计”中，纸张的物理属性将转换为屏幕。

+

在“材料设计”中，纸张的物理属性在屏幕上被体现出来。

应用程序的中元素的背景像纸张一样平坦、不透明，其行为也像纸张一样，能够改变大小、与其他纸张绑定或者调换顺序。 diff --git a/docs/src/pages/demos/pickers/pickers-es.md b/docs/src/pages/demos/pickers/pickers-es.md index 4ee7c9aa7619fe..9d12b7484e40d6 100644 --- a/docs/src/pages/demos/pickers/pickers-es.md +++ b/docs/src/pages/demos/pickers/pickers-es.md @@ -4,7 +4,7 @@ components: TextField --- # Pickers -

Pickers provide a simple way to select a single value from a pre-determined set.

+

Pickers proporcionan una manera sencilla de elegir un valor de un conjunto predeterminado.

- On mobile, pickers are best suited for display in confirmation dialog. - For inline display, such as on a form, consider using compact controls such as segmented dropdown buttons. @@ -33,7 +33,7 @@ A native time picker example with `type="time"`. {{"demo": "pages/demos/pickers/TimePickers.js"}} -## Complementary projects +## Proyectos relacionados For more advanced use cases you might be able to take advantage of. diff --git a/docs/src/pages/demos/pickers/pickers-fr.md b/docs/src/pages/demos/pickers/pickers-fr.md index 8157bcc19637cb..2098d8c04d5aca 100644 --- a/docs/src/pages/demos/pickers/pickers-fr.md +++ b/docs/src/pages/demos/pickers/pickers-fr.md @@ -7,7 +7,7 @@ components: TextField

Les sélecteurs constituent un moyen simple de sélectionner une valeur unique dans un ensemble prédéterminé.

- Sur mobile, les sélecteurs conviennent mieux à l’affichage dans la boîte de dialogue de confirmation. -- For inline display, such as on a form, consider using compact controls such as segmented dropdown buttons. +- Pour un affichage en ligne, par exemple sur un formulaire, envisagez d'utiliser des contrôles compacts tels que des boutons déroulants segmentés. #### Avis diff --git a/docs/src/pages/demos/pickers/pickers-pt.md b/docs/src/pages/demos/pickers/pickers-pt.md index c5687c20d83fad..02a75063d3b3a3 100644 --- a/docs/src/pages/demos/pickers/pickers-pt.md +++ b/docs/src/pages/demos/pickers/pickers-pt.md @@ -39,7 +39,7 @@ For more advanced use cases you might be able to take advantage of. ### material-ui-pickers -![stars](https://img.shields.io/github/stars/dmtrKovalenko/material-ui-pickers.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/material-ui-pickers.svg) +![estrelas](https://img.shields.io/github/stars/dmtrKovalenko/material-ui-pickers.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/material-ui-pickers.svg) [material-ui-pickers](https://material-ui-pickers.firebaseapp.com/) provides date and time controls that follow the Material Design spec. diff --git a/docs/src/pages/demos/pickers/pickers-ru.md b/docs/src/pages/demos/pickers/pickers-ru.md index 281eca9dafb5ac..fb6f7eaeb3c992 100644 --- a/docs/src/pages/demos/pickers/pickers-ru.md +++ b/docs/src/pages/demos/pickers/pickers-ru.md @@ -1,51 +1,51 @@ --- -title: Date Picker, Time Picker React components +title: Date Picker, Time Picker React компоненты components: TextField --- -# Пикеры +# Поля выбора -

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

+

Поля выбора предоставляют возможность выбрать единственное значение из заранее заданного множества.

- На мобильном устройстве лучше всего отображать в модальном окне. - Для инлайн-отображения, например в формах стоит рассмотреть возможность использования более компактных элементов управления, таких как сегментированные выпадающие кнопки. -#### Внимание +#### Примечание Мы поддерживаем только **нативные типы полей ввода**. -⚠️ Native input controls support by browsers [isn't perfect](https://caniuse.com/#feat=input-datetime). Have a look at the [complementary projects](#complementary-projects) for richer solutions. +⚠️ Поддержка нативных типов полей ввода [не идеальна](https://caniuse.com/#feat=input-datetime). Рассмотрите [дополнительные проекты](#complementary-projects) для более сложных решений. -## Date pickers +## Поля выбора даты -A native date picker example with `type="date"`, it can be used as a calendar too. +Пример нативного поля выбора даты с помощью `type="date"`, можно использовать как календарь. {{"demo": "pages/demos/pickers/DatePickers.js"}} -## Date & Time pickers +## Поля выбора даты & времени -A native date & time picker example with `type="datetime-local"`. +Нативное поля выбора даты и времени с помощью `type="datetime-local"`. {{"demo": "pages/demos/pickers/DateAndTimePickers.js"}} -## Time pickers +## Поля выбора времени -A native time picker example with `type="time"`. +Нативное поле выбора времени с помощью `type="time"`. {{"demo": "pages/demos/pickers/TimePickers.js"}} -## Complementary projects +## Дополнительные проекты -For more advanced use cases you might be able to take advantage of. +Для более сложных вариантов использования вы можете воспользоваться. ### material-ui-pickers ![stars](https://img.shields.io/github/stars/dmtrKovalenko/material-ui-pickers.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/material-ui-pickers.svg) -[material-ui-pickers](https://material-ui-pickers.firebaseapp.com/) provides date and time controls that follow the Material Design spec. +[material-ui-pickers](https://material-ui-pickers.firebaseapp.com/) предоставляет поля ввода даты и времени, в соответствии c Material Design спецификацией. {{"demo": "pages/demos/pickers/MaterialUIPickers.js"}} -### Other +### Прочее -- [material-ui-time-picker](https://github.com/TeamWertarbyte/material-ui-time-picker): time pickers. -- [material-ui-next-pickers](https://github.com/chingyawhao/material-ui-next-pickers): date pickers and time pickers. \ No newline at end of file +- [material-ui-time-picker](https://github.com/TeamWertarbyte/material-ui-time-picker): поле выбора времени. +- [material-ui-next-pickers](https://github.com/chingyawhao/material-ui-next-pickers): поле выбора даты и времени. \ No newline at end of file diff --git a/docs/src/pages/demos/pickers/pickers-zh.md b/docs/src/pages/demos/pickers/pickers-zh.md index cf75ac29db4551..cab01c61260f72 100644 --- a/docs/src/pages/demos/pickers/pickers-zh.md +++ b/docs/src/pages/demos/pickers/pickers-zh.md @@ -1,5 +1,5 @@ --- -title: Date Picker, Time Picker React components +title: 日期选择器，时间选择器反应组件 components: TextField --- # 选择器 @@ -13,7 +13,7 @@ components: TextField 我们回归到 **原生输入控件**。 -⚠️ 浏览器原生输入控件[并不完美](https://caniuse.com/#feat=input-datetime)。 Have a look at the [complementary projects](#complementary-projects) for richer solutions. +⚠️ 浏览器原生输入控件[并不完美](https://caniuse.com/#feat=input-datetime)。 看看 [补充项目](#complementary-projects) 以获得更丰富的解决方案。 ## 日期选择器 diff --git a/docs/src/pages/demos/progress/progress-de.md b/docs/src/pages/demos/progress/progress-de.md index 8a717471c6d75b..3324bc4f735e1d 100644 --- a/docs/src/pages/demos/progress/progress-de.md +++ b/docs/src/pages/demos/progress/progress-de.md @@ -84,7 +84,7 @@ function Progress(props) { If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the components. The last demo demonstrates how you can build a Facebook like spinner. -⚠️ While the material design specification encourages theming, these examples are off the beaten path. +⚠️ Auch wenn die material design Spezifikation zur Verwendung von Themes ermutigt, liegen diese Beispiele außerhalb der üblichen Pfade. {{"demo": "pages/demos/progress/CustomizedProgress.js"}} diff --git a/docs/src/pages/demos/progress/progress-es.md b/docs/src/pages/demos/progress/progress-es.md index 8a717471c6d75b..0109e2aef68a0a 100644 --- a/docs/src/pages/demos/progress/progress-es.md +++ b/docs/src/pages/demos/progress/progress-es.md @@ -84,7 +84,7 @@ function Progress(props) { If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the components. The last demo demonstrates how you can build a Facebook like spinner. -⚠️ While the material design specification encourages theming, these examples are off the beaten path. +⚠️ A pesar de que la especificación de material design anima a usar temas, estos ejemplos no son comunes. {{"demo": "pages/demos/progress/CustomizedProgress.js"}} diff --git a/docs/src/pages/demos/progress/progress-fr.md b/docs/src/pages/demos/progress/progress-fr.md index 26a211ae7bbdfc..b2d813b0aaec92 100644 --- a/docs/src/pages/demos/progress/progress-fr.md +++ b/docs/src/pages/demos/progress/progress-fr.md @@ -4,7 +4,7 @@ components: CircularProgress, LinearProgress --- # Progress -

Progress indicators express an unspecified wait time or display the length of a process.

+

Les indicateurs de progression expriment un temps d'attente non spécifié ou affichent la durée d'un processus.

[Progress indicators](https://material.io/design/components/progress-indicators.html) inform users about the status of ongoing processes, such as loading an app, submitting a form, or saving updates. They communicate an app’s state and indicate available actions, such as whether users can navigate away from the current screen. @@ -84,13 +84,13 @@ function Progress(props) { If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the components. The last demo demonstrates how you can build a Facebook like spinner. -⚠️ Bien que les spécifications de conception des matériaux encouragent la thématisation, ces exemples sortent des sentiers battus. +⚠️ Bien que les spécifications Material Design encouragent la thématisation, ces exemples sortent des sentiers battus. {{"demo": "pages/demos/progress/CustomizedProgress.js"}} -## Delaying appearance +## Retarder l'apparition -There are [3 important limits](https://www.nngroup.com/articles/response-times-3-important-limits/) to know around response time. The ripple effect of the `ButtonBase` component ensures that the user feels that the system is reacting instantaneously. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second. After 1.0 second, you can display a loader to keep user's flow of thought uninterrupted. +Il y a [3 limites importantes](https://www.nngroup.com/articles/response-times-3-important-limits/) à connaître sur les temps de réponse. The ripple effect of the `ButtonBase` component ensures that the user feels that the system is reacting instantaneously. Normally, no special feedback is necessary during delays of more than 0.1 but less than 1.0 second. After 1.0 second, you can display a loader to keep user's flow of thought uninterrupted. {{"demo": "pages/demos/progress/DelayingAppearance.js"}} @@ -100,6 +100,6 @@ Under heavy load, you might lose the stroke dash animation or see random Circula ![heavy load](/static/images/progress/heavy-load.gif) -When it's not possible, you can leverage the `disableShrink` property to mitigate the issue. See https://github.com/mui-org/material-ui/issues/10327 +Lorsque ce n'est pas possible, vous pouvez utiliser la propriété `disableShrink` pour atténuer le problème. Voir https://github.com/mui-org/material-ui/issues/10327 {{"demo": "pages/demos/progress/CircularUnderLoad.js"}} \ No newline at end of file diff --git a/docs/src/pages/demos/progress/progress-ru.md b/docs/src/pages/demos/progress/progress-ru.md index 8a717471c6d75b..da8515f1054c9f 100644 --- a/docs/src/pages/demos/progress/progress-ru.md +++ b/docs/src/pages/demos/progress/progress-ru.md @@ -84,7 +84,7 @@ function Progress(props) { If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here is one example of how you can customize the components. The last demo demonstrates how you can build a Facebook like spinner. -⚠️ While the material design specification encourages theming, these examples are off the beaten path. +⚠️ Хотя спецификации материал дизайна поощряют использование тем, эти примеры не соответствуют требованиям. {{"demo": "pages/demos/progress/CustomizedProgress.js"}} @@ -94,7 +94,7 @@ There are [3 important limits](https://www.nngroup.com/articles/response-times-3 {{"demo": "pages/demos/progress/DelayingAppearance.js"}} -## Limitations +## Ограничения Under heavy load, you might lose the stroke dash animation or see random CircularProgress ring widths. You should run processor intensive operations in a web worker or by batch in order not to block the main rendering thread. diff --git a/docs/src/pages/demos/selection-controls/selection-controls-de.md b/docs/src/pages/demos/selection-controls/selection-controls-de.md index 24fe4d651b7fb0..24c7e3f8989bb7 100644 --- a/docs/src/pages/demos/selection-controls/selection-controls-de.md +++ b/docs/src/pages/demos/selection-controls/selection-controls-de.md @@ -72,7 +72,7 @@ The option that the switch controls, as well as the state it’s in, should be m If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here's an example of how you can change the color of a Switch, and an iOS style Switch. -⚠️ While the material design specification encourages theming, these examples are off the beaten path. +⚠️ Auch wenn die material design Spezifikation zur Verwendung von Themes ermutigt, liegen diese Beispiele außerhalb der üblichen Pfade. {{"demo": "pages/demos/selection-controls/CustomizedSwitches.js"}} diff --git a/docs/src/pages/demos/selection-controls/selection-controls-es.md b/docs/src/pages/demos/selection-controls/selection-controls-es.md index 24fe4d651b7fb0..f8af5c4391883c 100644 --- a/docs/src/pages/demos/selection-controls/selection-controls-es.md +++ b/docs/src/pages/demos/selection-controls/selection-controls-es.md @@ -72,7 +72,7 @@ The option that the switch controls, as well as the state it’s in, should be m If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here's an example of how you can change the color of a Switch, and an iOS style Switch. -⚠️ While the material design specification encourages theming, these examples are off the beaten path. +⚠️ A pesar de que la especificación de material design anima a usar temas, estos ejemplos no son comunes. {{"demo": "pages/demos/selection-controls/CustomizedSwitches.js"}} diff --git a/docs/src/pages/demos/selection-controls/selection-controls-fr.md b/docs/src/pages/demos/selection-controls/selection-controls-fr.md index cbb096d1d30626..31019cfc7e8c20 100644 --- a/docs/src/pages/demos/selection-controls/selection-controls-fr.md +++ b/docs/src/pages/demos/selection-controls/selection-controls-fr.md @@ -2,9 +2,9 @@ title: Checkbox, Radio, Switch React component components: FormControl, FormGroup, FormLabel, FormControlLabel, RadioGroup, Checkbox, Radio, Switch --- -# Selection Controls +# Contrôles de sélection -

Selection controls allow the user to select options.

+

Les contrôles de sélection permettent à l'utilisateur de sélectionner des options.

[Selection controls](https://material.io/design/components/selection-controls.html) allow users to complete tasks that involve making choices such as selecting options, or switching settings on or off. Selection controls are found on screens that ask users to make decisions or declare preferences such as settings or dialogs. @@ -30,7 +30,7 @@ Radio buttons should have the most commonly used option selected by default. {{"demo": "pages/demos/selection-controls/RadioButtons.js"}} -## Checkboxes +## Cases à cocher [Checkboxes](https://material.io/design/components/selection-controls.html#checkboxes) allow the user to select one or more items from a set. Checkboxes can be used to turn an option on or off. @@ -42,7 +42,7 @@ If you have multiple options appearing in a list, you can preserve space by usin {{"demo": "pages/demos/selection-controls/CheckboxLabels.js"}} -## Checkboxes with FormGroup +## Cases à cocher avec FormGroup `FormGroup` is a helpful wrapper used to group selection controls components that provides an easier API. @@ -72,7 +72,7 @@ The option that the switch controls, as well as the state it’s in, should be m If you have been reading the [overrides documentation page](/customization/overrides/) but you are not confident jumping in, here's an example of how you can change the color of a Switch, and an iOS style Switch. -⚠️ Bien que les spécifications de conception des matériaux encouragent la thématisation, ces exemples sortent des sentiers battus. +⚠️ Bien que les spécifications Material Design encouragent la thématisation, ces exemples sortent des sentiers battus. {{"demo": "pages/demos/selection-controls/CustomizedSwitches.js"}} @@ -82,7 +82,7 @@ You can change the placement of the label: {{"demo": "pages/demos/selection-controls/FormControlLabelPosition.js"}} -## Accessibility +## Accessibilité All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the `