diff --git a/docs/src/modules/components/backers-de.md b/docs/src/modules/components/backers-de.md index dd5f49d0399e22..c41a847d76f648 100644 --- a/docs/src/modules/components/backers-de.md +++ b/docs/src/modules/components/backers-de.md @@ -1,6 +1,8 @@ ## 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 19a8f9b885beac..c41a847d76f648 100644 --- a/docs/src/modules/components/backers-es.md +++ b/docs/src/modules/components/backers-es.md @@ -1,6 +1,8 @@ ## 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 @@ -36,4 +38,4 @@ via [OpenCollective](https://opencollective.com/material-ui) ### There is more! -See the full list of [our backers](/discover-more/backers/). \ No newline at end of file +See the full list of [our backers](/discover-more/backers/). diff --git a/docs/src/modules/components/backers-fr.md b/docs/src/modules/components/backers-fr.md index 19a8f9b885beac..c41a847d76f648 100644 --- a/docs/src/modules/components/backers-fr.md +++ b/docs/src/modules/components/backers-fr.md @@ -1,6 +1,8 @@ ## 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 @@ -36,4 +38,4 @@ via [OpenCollective](https://opencollective.com/material-ui) ### There is more! -See the full list of [our backers](/discover-more/backers/). \ No newline at end of file +See the full list of [our backers](/discover-more/backers/). diff --git a/docs/src/modules/components/backers-pt.md b/docs/src/modules/components/backers-pt.md index 67807eb27d9f7e..c41a847d76f648 100644 --- a/docs/src/modules/components/backers-pt.md +++ b/docs/src/modules/components/backers-pt.md @@ -1,6 +1,8 @@ ## 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 @@ -36,5 +38,4 @@ 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 19a8f9b885beac..c41a847d76f648 100644 --- a/docs/src/modules/components/backers-ru.md +++ b/docs/src/modules/components/backers-ru.md @@ -1,6 +1,8 @@ ## 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 @@ -36,4 +38,4 @@ via [OpenCollective](https://opencollective.com/material-ui) ### There is more! -See the full list of [our backers](/discover-more/backers/). \ No newline at end of file +See the full list of [our backers](/discover-more/backers/). diff --git a/docs/src/modules/components/backers-zh.md b/docs/src/modules/components/backers-zh.md index 76cd4f0d2c6dbd..c41a847d76f648 100644 --- a/docs/src/modules/components/backers-zh.md +++ b/docs/src/modules/components/backers-zh.md @@ -1,6 +1,8 @@ ## 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 @@ -10,7 +12,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 57f86ae3df2e7f..98d0a3d9619888 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). -## Globales CSS +## Global 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 37c03e5767d306..98d0a3d9619888 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). -## CSS global +## Global 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-ru.md b/docs/src/pages/css-in-js/advanced/advanced-ru.md index 48af8e7ba1f27d..98d0a3d9619888 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-комментарий +### HTML comment 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; ``` -### Другой HTML-элемент +### Other HTML element [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). -## Глобальный CSS +## Global 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 525136f03710f0..57bfd41c1230c6 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(Component)(styles, [options]) => Component` +## `styled(styles, [options])(Component) => Component` Link a style sheet with a function component using the **styled components** pattern. #### Arguments -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]): +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]): - `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 525136f03710f0..57bfd41c1230c6 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(Component)(styles, [options]) => Component` +## `styled(styles, [options])(Component) => Component` Link a style sheet with a function component using the **styled components** pattern. #### Arguments -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]): +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]): - `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 525136f03710f0..57bfd41c1230c6 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(Component)(styles, [options]) => Component` +## `styled(styles, [options])(Component) => Component` Link a style sheet with a function component using the **styled components** pattern. #### Arguments -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]): +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]): - `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 525136f03710f0..57bfd41c1230c6 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(Component)(styles, [options]) => Component` +## `styled(styles, [options])(Component) => Component` Link a style sheet with a function component using the **styled components** pattern. #### Arguments -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]): +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]): - `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 a0baa44a2f9c72..bfef31517c8cdf 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(Component)(styles, [options]) => Component` +## `styled(styles, [options])(Component) => Component` Link a style sheet with a function component using the **styled components** pattern. #### Arguments -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]): +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]): - `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 08d2e54b751a75..57bfd41c1230c6 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. Это будет связано с компонентом. 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. 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]): - `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. Полезно для отладки. 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. 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). @@ -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(Component)(styles, [options]) => Component` +## `styled(styles, [options])(Component) => Component` Link a style sheet with a function component using the **styled components** pattern. #### Arguments -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]): +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]): - `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. Полезно для отладки. 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. 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 `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. Это будет связано с компонентом. 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. 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]): - `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. Полезно для отладки. 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. 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). @@ -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 5e91315d77ce48..449697bfac1d8e 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(Component)(styles, [options]) => Component` +## `styled(styles, [options])(Component) => Component` 链路的样式表中有一个功能组件的使用**styled components**的模式。 #### 参数 -1. `Component` ：将被包装的组件。 -2. ` styles `(* Function | Object *): 生成样式或样式对象的函数。 它将链接到组件。 如果需要访问主题, 请使用函数签名。 它作为第一个参数提供。 -3. `选项` (*Object* [optional]): +1. ` styles `(* Function | Object *): 生成样式或样式对象的函数。 它将链接到组件。 如果需要访问主题, 请使用函数签名。 它作为第一个参数提供。 +2. `选项` (*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` 相同。 -- 它将转发*非 React 的静态* 属性，以便 HOC 更 "透明"。 例如，它可用于定义 ` getInitialProps()` 静态方法 (next.js)。 +- 它添加了一个`classes`属性，因此您可以从外部覆盖注入的类名。 +- 它添加了一个`innerRef`属性，因此你可以从外部覆盖注入的类名。 ` innerRef ` 的用法与 ` ref ` 相同。 +- 它将转发 *non React static* 属性, 以便 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 213732cebb4a66..9fa0cde3806132 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 -

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

+

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 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 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. -## Die Styling-Lösung von Material-UI +## 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: -- [Eine vereinheitlichte Styling-Sprache](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) +- [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) 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 cf57408833976c..9fa0cde3806132 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). -## Instalación +## Installation -Para instalar y guardar en tu dependencias ` package.json `, ejecuta: +To install and save in your `package.json` dependencies, run: ```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 89bcfc7d658e4a..9fa0cde3806132 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 @@ -# Bases +# Basics -

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

+

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**. 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 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'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) -- [Conversion de SCSS (Sass) en CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js) +- [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/). @@ -23,7 +23,7 @@ Material-UI's styling solution is inspired by many other CSS-in-JS libraries lik ## Installation -Pour installer et enregistrer dans votre `package.json` dépendances, exécutez: +To install and save in your `package.json` dependencies, run: ```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 5321770f9a6095..9fa0cde3806132 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 -インストールして`package.json` のdependenciesに保存します。次を実行してください。 +To install and save in your `package.json` dependencies, run: ```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 b006706e9e103a..9fa0cde3806132 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 стремится обеспечить прочную основу для создания динамических интерфейсов. 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**. 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: -- [Унифицированный язык стилей](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) +- [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) 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 -Для установки и сохранения в вашем ` package.json ` зависимости, запустите: +To install and save in your `package.json` dependencies, run: ```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 e217e397f27673..9cc5f3ef619113 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，以及而后的自定义内嵌式来编写组件的样式。但是这些方法已被证明了其局限性。 最近，我们开始向*CSS-in-JS*解决方案方向转移。 它**解锁了许多很棒的功能**（主题嵌套、动态样式、自我支持等...） 我们认为这是未来： +在以前的版本中，Material-UI 使用 LESS，然后是自定义内嵌式的解决方案来编写组件的样式，但是这些方法已被证明是有限制的。 最近，我们[迁移](https://github.com/oliviertassinari/a-journey-toward-better-style)到*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 75f73b581cea03..f75afea3abb6ac 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 -

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

+

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

-> ⚠️ 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. +> ⚠️ 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. -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 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. -## Die Styling-Lösung von Material-UI +## 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.). Wir denken, das ist die Zukunft: +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: -- [Eine vereinheitlichte Styling-Sprache](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) +- [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) -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: +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: {{"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. Das folgende CSS wird nicht funktionieren: +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: ```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. 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: +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` - production: `.jss12` -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). +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). -### Globales CSS +### Global CSS -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: +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: -- Entwicklung: `.MuiAppBar-root` -- Produktion: `.MuiAppBar-root` +- development: `.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-fr.md b/docs/src/pages/customization/css-in-js/css-in-js-fr.md index 80180505c7f32a..f75afea3abb6ac 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 -

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

+

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

-> ⚠️ 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. +> ⚠️ 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. -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 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'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) -- [Conversion de SCSS (Sass) en CSS-in-JS](https://egghead.io/courses/convert-scss-sass-to-css-in-js) +- [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. Voici un exemple : +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: {{"demo": "pages/customization/css-in-js/CssInJs.js"}} ## JSS -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. +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. 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. Le CSS suivant ne fonctionnera pas: +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: ```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: -- développement: `.MuiAppBar-root-12` +- development: `.MuiAppBar-root-12` - production: `.jss12` -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) . +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). -### CSS global +### Global CSS -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: +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: -- développement: `.MuiAppBar-root` +- development: `.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 72baea770d87d3..ae970491f02706 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). 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: +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: -- desenvolvimento: `.MuiAppBar-root-` -- produção: `.MuiAppBar-root ` +- development: `.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-ru.md b/docs/src/pages/customization/css-in-js/css-in-js-ru.md index 6d5a3700088015..f75afea3abb6ac 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/). Это нестабильный проект (альфа-версия). 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/). It's an unstable project (alpha version). Hopefully, we will make it the default style implementation for the core components in Material-UI v4. -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 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'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: -- [Унифицированный язык стилей](https://medium.com/seek-blog/a-unified-styling-language-d0c208de2660) +- [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) @@ -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). -### Глобальный CSS +### Global 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-комментарий +### HTML comment 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; ``` -### Другой HTML-элемент +### Other HTML element [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. Есть разные варианты использования: +react-jss exposes a `JssProvider` component to configure JSS for the underlying child components. There are different use cases: - 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. Это будет связано с компонентом. 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. 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]): - `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. Полезно для отладки. 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. 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/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; ``` -## Альтернативные API +## Alternative APIs -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. Вот несколько примеров. +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. ### 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 03df2d00601934..2783b7b03a6ced 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 @@ -# JS 中的 CSS (CSS-in-JS) +# CSS in JS

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

@@ -8,11 +8,11 @@ Material-UI 旨在为构建动态 UI 提供强大的基础。 为了简单起见 ## Material-UI 的样式解决方案 -在以前的版本中，Material-UI 曾使用过 LESS，以及而后的自定义内嵌式来编写组件的样式。但是这些方法已被证明了其局限性。 最近，我们开始向*CSS-in-JS*解决方案方向转移。 它**解锁了许多很棒的功能**（主题嵌套、动态样式、自我支持等...） 我们认为这是未来： +在以前的版本中，Material-UI 使用 LESS，然后是自定义内嵌式的解决方案来编写组件的样式，但是这些方法已被证明是有限制的。 最近，我们[迁移](https://github.com/oliviertassinari/a-journey-toward-better-style)到*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` 相同。 -- 它将转发*非 React 的静态* 属性，以便 HOC 更 "透明"。 例如，它可用于定义 ` getInitialProps()` 静态方法 (next.js)。 +- 它添加了一个`classes`属性，因此您可以从外部覆盖注入的类名。 +- 它添加了一个`innerRef`属性，因此你可以从外部覆盖注入的类名。 ` innerRef ` 的用法与 ` ref ` 相同。 +- 它将转发 *non React static* 属性, 以便 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。 以下有几个例子： -### Render props (+ 11 行) +### 渲染道具 api (+ 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)。 随意使用它。 -### styled-components API (+15 行) +### 样式组件 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 8c69d05c773d59..5e1cf78f5997ab 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 deleted file mode 100644 index f2b34cc86143ff..00000000000000 --- a/docs/src/pages/demos/app-bar/BottomAppBar-de.tsx +++ /dev/null @@ -1,154 +0,0 @@ -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 deleted file mode 100644 index f2b34cc86143ff..00000000000000 --- a/docs/src/pages/demos/app-bar/BottomAppBar-es.tsx +++ /dev/null @@ -1,154 +0,0 @@ -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 deleted file mode 100644 index f2b34cc86143ff..00000000000000 --- a/docs/src/pages/demos/app-bar/BottomAppBar-fr.tsx +++ /dev/null @@ -1,154 +0,0 @@ -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 deleted file mode 100644 index f2b34cc86143ff..00000000000000 --- a/docs/src/pages/demos/app-bar/BottomAppBar-ja.tsx +++ /dev/null @@ -1,154 +0,0 @@ -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 deleted file mode 100644 index f2b34cc86143ff..00000000000000 --- a/docs/src/pages/demos/app-bar/BottomAppBar-pt.tsx +++ /dev/null @@ -1,154 +0,0 @@ -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 deleted file mode 100644 index f2b34cc86143ff..00000000000000 --- a/docs/src/pages/demos/app-bar/BottomAppBar-ru.tsx +++ /dev/null @@ -1,154 +0,0 @@ -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 deleted file mode 100644 index f2b34cc86143ff..00000000000000 --- a/docs/src/pages/demos/app-bar/BottomAppBar-zh.tsx +++ /dev/null @@ -1,154 +0,0 @@ -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 deleted file mode 100644 index f8baad446bb5a9..00000000000000 --- a/docs/src/pages/demos/app-bar/ButtonAppBar-de.tsx +++ /dev/null @@ -1,49 +0,0 @@ -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 deleted file mode 100644 index f8baad446bb5a9..00000000000000 --- a/docs/src/pages/demos/app-bar/ButtonAppBar-es.tsx +++ /dev/null @@ -1,49 +0,0 @@ -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 deleted file mode 100644 index f8baad446bb5a9..00000000000000 --- a/docs/src/pages/demos/app-bar/ButtonAppBar-fr.tsx +++ /dev/null @@ -1,49 +0,0 @@ -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 deleted file mode 100644 index f8baad446bb5a9..00000000000000 --- a/docs/src/pages/demos/app-bar/ButtonAppBar-ja.tsx +++ /dev/null @@ -1,49 +0,0 @@ -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 deleted file mode 100644 index f8baad446bb5a9..00000000000000 --- a/docs/src/pages/demos/app-bar/ButtonAppBar-pt.tsx +++ /dev/null @@ -1,49 +0,0 @@ -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 deleted file mode 100644 index f8baad446bb5a9..00000000000000 --- a/docs/src/pages/demos/app-bar/ButtonAppBar-ru.tsx +++ /dev/null @@ -1,49 +0,0 @@ -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 deleted file mode 100644 index ae046f79e2416b..00000000000000 --- a/docs/src/pages/demos/app-bar/ButtonAppBar-zh.tsx +++ /dev/null @@ -1,49 +0,0 @@ -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 deleted file mode 100644 index 0709fd96f6cc6c..00000000000000 --- a/docs/src/pages/demos/app-bar/DenseAppBar-de.tsx +++ /dev/null @@ -1,44 +0,0 @@ -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 deleted file mode 100644 index 0709fd96f6cc6c..00000000000000 --- a/docs/src/pages/demos/app-bar/DenseAppBar-es.tsx +++ /dev/null @@ -1,44 +0,0 @@ -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 deleted file mode 100644 index 0709fd96f6cc6c..00000000000000 --- a/docs/src/pages/demos/app-bar/DenseAppBar-fr.tsx +++ /dev/null @@ -1,44 +0,0 @@ -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 deleted file mode 100644 index 0709fd96f6cc6c..00000000000000 --- a/docs/src/pages/demos/app-bar/DenseAppBar-ja.tsx +++ /dev/null @@ -1,44 +0,0 @@ -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 deleted file mode 100644 index 0709fd96f6cc6c..00000000000000 --- a/docs/src/pages/demos/app-bar/DenseAppBar-pt.tsx +++ /dev/null @@ -1,44 +0,0 @@ -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 deleted file mode 100644 index 0709fd96f6cc6c..00000000000000 --- a/docs/src/pages/demos/app-bar/DenseAppBar-ru.tsx +++ /dev/null @@ -1,44 +0,0 @@ -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 deleted file mode 100644 index 0709fd96f6cc6c..00000000000000 --- a/docs/src/pages/demos/app-bar/DenseAppBar-zh.tsx +++ /dev/null @@ -1,44 +0,0 @@ -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 deleted file mode 100644 index 6036d28fb13eaa..00000000000000 --- a/docs/src/pages/demos/app-bar/MenuAppBar-de.tsx +++ /dev/null @@ -1,117 +0,0 @@ -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 deleted file mode 100644 index 6036d28fb13eaa..00000000000000 --- a/docs/src/pages/demos/app-bar/MenuAppBar-es.tsx +++ /dev/null @@ -1,117 +0,0 @@ -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 deleted file mode 100644 index 6036d28fb13eaa..00000000000000 --- a/docs/src/pages/demos/app-bar/MenuAppBar-fr.tsx +++ /dev/null @@ -1,117 +0,0 @@ -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 deleted file mode 100644 index 6036d28fb13eaa..00000000000000 --- a/docs/src/pages/demos/app-bar/MenuAppBar-ja.tsx +++ /dev/null @@ -1,117 +0,0 @@ -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 deleted file mode 100644 index 6036d28fb13eaa..00000000000000 --- a/docs/src/pages/demos/app-bar/MenuAppBar-pt.tsx +++ /dev/null @@ -1,117 +0,0 @@ -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 deleted file mode 100644 index 6036d28fb13eaa..00000000000000 --- a/docs/src/pages/demos/app-bar/MenuAppBar-ru.tsx +++ /dev/null @@ -1,117 +0,0 @@ -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 deleted file mode 100644 index 14ba7a542a3c11..00000000000000 --- a/docs/src/pages/demos/app-bar/MenuAppBar-zh.tsx +++ /dev/null @@ -1,117 +0,0 @@ -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 deleted file mode 100644 index 56ee618b011979..00000000000000 --- a/docs/src/pages/demos/app-bar/PrimarySearchAppBar-de.tsx +++ /dev/null @@ -1,234 +0,0 @@ -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 deleted file mode 100644 index 56ee618b011979..00000000000000 --- a/docs/src/pages/demos/app-bar/PrimarySearchAppBar-es.tsx +++ /dev/null @@ -1,234 +0,0 @@ -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 deleted file mode 100644 index 56ee618b011979..00000000000000 --- a/docs/src/pages/demos/app-bar/PrimarySearchAppBar-fr.tsx +++ /dev/null @@ -1,234 +0,0 @@ -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 deleted file mode 100644 index 56ee618b011979..00000000000000 --- a/docs/src/pages/demos/app-bar/PrimarySearchAppBar-ja.tsx +++ /dev/null @@ -1,234 +0,0 @@ -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 deleted file mode 100644 index 56ee618b011979..00000000000000 --- a/docs/src/pages/demos/app-bar/PrimarySearchAppBar-pt.tsx +++ /dev/null @@ -1,234 +0,0 @@ -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 deleted file mode 100644 index 56ee618b011979..00000000000000 --- a/docs/src/pages/demos/app-bar/PrimarySearchAppBar-ru.tsx +++ /dev/null @@ -1,234 +0,0 @@ -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 deleted file mode 100644 index a23679977d71c4..00000000000000 --- a/docs/src/pages/demos/app-bar/PrimarySearchAppBar-zh.tsx +++ /dev/null @@ -1,234 +0,0 @@ -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 deleted file mode 100644 index 488d6d57c8c22a..00000000000000 --- a/docs/src/pages/demos/app-bar/SearchAppBar-de.tsx +++ /dev/null @@ -1,111 +0,0 @@ -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 deleted file mode 100644 index 488d6d57c8c22a..00000000000000 --- a/docs/src/pages/demos/app-bar/SearchAppBar-es.tsx +++ /dev/null @@ -1,111 +0,0 @@ -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 deleted file mode 100644 index 488d6d57c8c22a..00000000000000 --- a/docs/src/pages/demos/app-bar/SearchAppBar-fr.tsx +++ /dev/null @@ -1,111 +0,0 @@ -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 deleted file mode 100644 index 488d6d57c8c22a..00000000000000 --- a/docs/src/pages/demos/app-bar/SearchAppBar-ja.tsx +++ /dev/null @@ -1,111 +0,0 @@ -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 deleted file mode 100644 index 488d6d57c8c22a..00000000000000 --- a/docs/src/pages/demos/app-bar/SearchAppBar-pt.tsx +++ /dev/null @@ -1,111 +0,0 @@ -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 deleted file mode 100644 index 488d6d57c8c22a..00000000000000 --- a/docs/src/pages/demos/app-bar/SearchAppBar-ru.tsx +++ /dev/null @@ -1,111 +0,0 @@ -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 deleted file mode 100644 index 8b4fe5c2c68ddf..00000000000000 --- a/docs/src/pages/demos/app-bar/SearchAppBar-zh.tsx +++ /dev/null @@ -1,111 +0,0 @@ -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 deleted file mode 100644 index b181e24de5a743..00000000000000 --- a/docs/src/pages/demos/app-bar/SimpleAppBar-de.tsx +++ /dev/null @@ -1,36 +0,0 @@ -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 deleted file mode 100644 index b181e24de5a743..00000000000000 --- a/docs/src/pages/demos/app-bar/SimpleAppBar-es.tsx +++ /dev/null @@ -1,36 +0,0 @@ -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 deleted file mode 100644 index b181e24de5a743..00000000000000 --- a/docs/src/pages/demos/app-bar/SimpleAppBar-fr.tsx +++ /dev/null @@ -1,36 +0,0 @@ -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 deleted file mode 100644 index b181e24de5a743..00000000000000 --- a/docs/src/pages/demos/app-bar/SimpleAppBar-ja.tsx +++ /dev/null @@ -1,36 +0,0 @@ -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 deleted file mode 100644 index b181e24de5a743..00000000000000 --- a/docs/src/pages/demos/app-bar/SimpleAppBar-pt.tsx +++ /dev/null @@ -1,36 +0,0 @@ -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 deleted file mode 100644 index b181e24de5a743..00000000000000 --- a/docs/src/pages/demos/app-bar/SimpleAppBar-ru.tsx +++ /dev/null @@ -1,36 +0,0 @@ -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 deleted file mode 100644 index b181e24de5a743..00000000000000 --- a/docs/src/pages/demos/app-bar/SimpleAppBar-zh.tsx +++ /dev/null @@ -1,36 +0,0 @@ -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 03907987156c35..565a2668d6b42a 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 [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. +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. Es kann sich in eine kontextabhängige Aktionsleiste verwandeln oder als Navigationsleiste verwendet werden. -## App Bar mit Schaltflächen +## App Bar mit Tasten {{"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 -Eine primäre Suchleiste. +A primary searchbar. {{"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 87e431d443d88a..d2446d4fd5b13b 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 React: App Bar' +title: Componente de 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) provee contenido y acciones relacionados a la pantalla actual. Es usada para mostrar logotipos de marcas, títulos de pantalla, navegación y acciones. +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. 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 04c83b02422844..5ddf33a9ca4f43 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 -

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

+

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

-[top App Bar](https://material.io/design/components/app-bars-top.html) は、現在の画面に関連するコンテンツとアクションを提供します。 ブランディング、画面タイトル、ナビゲーション、およびアクションに使用されます。 +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. -状況に応じて変化するアクションバーや、ナビゲーションバーとして使用することができます。 +It can transform into a contextual action bar or used as a navbar. -## ボタン付き App Bar +## App Bar with buttons {{"demo": "pages/demos/app-bar/ButtonAppBar.js"}} -## シンプルアプリバー +## Simple App Bar {{"demo": "pages/demos/app-bar/SimpleAppBar.js"}} -## 基本的な検索フィールド付きApp Bar +## App Bar with a primary search field -基本的な検索バー +A primary searchbar. {{"demo": "pages/demos/app-bar/PrimarySearchAppBar.js"}} -## メニュー付き App Bar +## App Bar with menu {{"demo": "pages/demos/app-bar/MenuAppBar.js"}} -## 検索フィールド付きApp Bar +## App Bar with search field -サイド検索バー +A side searchbar. {{"demo": "pages/demos/app-bar/SearchAppBar.js"}} -## Dense App Bar (デスクトップのみ) +## Dense (desktop only) {{"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 ce940fba6f500b..e0e4f2f2060260 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"}} -## Barra de Aplicativos simples +## App Bar 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"}} -## Barra de Aplicativos densa (apenas para desktop) +## Denso (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 8c91565bd3a847..fd10ce4bc67021 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: React-компонент Панель навигации +title: App Bar React component components: AppBar, Toolbar, Menu --- # Панель навигации @@ -34,7 +34,7 @@ components: AppBar, Toolbar, Menu {{"demo": "pages/demos/app-bar/SearchAppBar.js"}} -## Dense (Только для компьютеров) +## Dense (desktop only) {{"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 affd63b8634717..703234daa0295c 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 5d748a1c587fd5..ef44457b150768 100644 --- a/docs/src/pages/demos/autocomplete/autocomplete-de.md +++ b/docs/src/pages/demos/autocomplete/autocomplete-de.md @@ -1,18 +1,18 @@ --- -title: Autovervollständigungs React-Komponente +title: Autocomplete React component components: TextField, Paper, MenuItem, Popper --- -# Autovervollständigung +# Autocomplete -

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

+

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

-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. +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. ## 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) -Im folgenden Beispiel demonstrieren wir, wie man einen [downshift](https://github.com/paypal/downshift) benutzt. +In the following example, we demonstrate how to use [downshift](https://github.com/paypal/downshift). {{"demo": "pages/demos/autocomplete/IntegrationDownshift.js"}} @@ -20,7 +20,7 @@ Im folgenden Beispiel demonstrieren wir, wie man einen [downshift](https://githu ![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) -Im folgenden Beispiel demonstrieren wir, wie man [react-select](https://github.com/JedWatson/react-select) benutzt. +In the following example, we demonstrate how to use [react-select](https://github.com/JedWatson/react-select). {{"demo": "pages/demos/autocomplete/IntegrationReactSelect.js"}} @@ -28,6 +28,6 @@ Im folgenden Beispiel demonstrieren wir, wie man [react-select](https://github.c ![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) -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. +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. {{"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 0a8f171f815a76..ef44457b150768 100644 --- a/docs/src/pages/demos/autocomplete/autocomplete-es.md +++ b/docs/src/pages/demos/autocomplete/autocomplete-es.md @@ -1,18 +1,18 @@ --- -title: Componente de Autocompletado de React +title: Autocomplete React component components: TextField, Paper, MenuItem, Popper --- -# Autocompletado +# Autocomplete -

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

+

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

-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. +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. ## 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) -En el siguiente ejemplo se muestra como usar [downshift](https://github.com/paypal/downshift). +In the following example, we demonstrate how to use [downshift](https://github.com/paypal/downshift). {{"demo": "pages/demos/autocomplete/IntegrationDownshift.js"}} @@ -20,7 +20,7 @@ En el siguiente ejemplo se muestra como usar [downshift](https://github.com/payp ![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) -En el siguiente ejemplo se muestra como usar [react-select](https://github.com/JedWatson/react-select). +In the following example, we demonstrate how to use [react-select](https://github.com/JedWatson/react-select). {{"demo": "pages/demos/autocomplete/IntegrationReactSelect.js"}} @@ -28,6 +28,6 @@ En el siguiente ejemplo se muestra como usar [react-select](https://github.com/J ![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) -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. +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. {{"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 66d8493f2184ce..6a5c200fcfa14a 100644 --- a/docs/src/pages/demos/autocomplete/autocomplete-pt.md +++ b/docs/src/pages/demos/autocomplete/autocomplete-pt.md @@ -1,33 +1,33 @@ --- -title: Componente React Autocomplete +title: Autocomplete React component components: TextField, Paper, MenuItem, Popper --- # Autocomplete (Autocompletar) -

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

+

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

-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. +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. ## downshift -![estrelas](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) +![stars](https://img.shields.io/github/stars/paypal/downshift.svg?style=social&label=Stars) ![npm downloads](https://img.shields.io/npm/dm/downshift.svg) -No exemplo a seguir, demonstramos como usar [downshift](https://github.com/paypal/downshift). +In the following example, we demonstrate how to use [downshift](https://github.com/paypal/downshift). {{"demo": "pages/demos/autocomplete/IntegrationDownshift.js"}} ## react-select -![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) +![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) -No exemplo a seguir, demonstramos como usar [react-select](https://github.com/JedWatson/react-select). +In the following example, we demonstrate how to use [react-select](https://github.com/JedWatson/react-select). {{"demo": "pages/demos/autocomplete/IntegrationReactSelect.js"}} ## react-autosuggest -![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) +![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) -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. +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. {{"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 236e504f26bb46..ef44457b150768 100644 --- a/docs/src/pages/demos/autocomplete/autocomplete-ru.md +++ b/docs/src/pages/demos/autocomplete/autocomplete-ru.md @@ -1,18 +1,18 @@ --- -title: React-компонент Автозаполнение +title: Autocomplete React component components: TextField, Paper, MenuItem, Popper --- -# Автодополнение +# Autocomplete -

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

+

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

-Material-UI не предоставляет высокоуровневый API для решения этой проблемы. Мы призываем людей полагаться на решения, разработанные сообществом React. +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. ## 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) -В следующем примере мы демонстрируем как использовать библиотеку [downshift](https://github.com/paypal/downshift). +In the following example, we demonstrate how to use [downshift](https://github.com/paypal/downshift). {{"demo": "pages/demos/autocomplete/IntegrationDownshift.js"}} @@ -20,7 +20,7 @@ Material-UI не предоставляет высокоуровневый API ![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) -В следующем примере мы демонстрируем как использовать библиотеку [react-select](https://github.com/JedWatson/react-select). +In the following example, we demonstrate how to use [react-select](https://github.com/JedWatson/react-select). {{"demo": "pages/demos/autocomplete/IntegrationReactSelect.js"}} @@ -28,6 +28,6 @@ Material-UI не предоставляет высокоуровневый API ![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) -В следующем примере мы демонстрируем как использовать библиотеку [react-autosuggest](https://github.com/moroshko/react-autosuggest). Она также использует [autosuggest-highlight](https://www.npmjs.com/package/autosuggest-highlight) для подсветки значений. +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. {{"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 dbde7357f4c8ca..2ac2fcfd8d3077 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-Komponente +title: Avatar React component components: Avatar --- -# Avatare +# Avatars -

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

+

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

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

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

+

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

-## Avatares de Imágenes +## Image avatars -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. +Image avatars can be created by passing standard `img` props `src` or `srcSet` into the component. {{"demo": "pages/demos/avatars/ImageAvatars.js"}} -## Avatares de Letras +## Letter avatars -Los avatares que contienen letras simples pueden crearse pasando su cadena como `children`. +Avatars containing simple characters can be created by passing your string as `children`. {{"demo": "pages/demos/avatars/LetterAvatars.js"}} -## Avatares de íconos +## Icon avatars -Los avatares de íconos son creados pasando un ícono como `children`. +Icon avatars are created by passing an icon as `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 b63f9fc2c83234..2ac2fcfd8d3077 100644 --- a/docs/src/pages/demos/avatars/avatars-ru.md +++ b/docs/src/pages/demos/avatars/avatars-ru.md @@ -1,25 +1,25 @@ --- -title: React-компонент Аватар +title: Avatar React component components: Avatar --- -# Аватары +# Avatars -

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

+

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

-## Аватары изображений +## Image avatars -Аватары можно создать, передав стандартные свойства компонента `img`, такие как `src` или `srcSet`. +Image avatars can be created by passing standard `img` props `src` or `srcSet` into the component. {{"demo": "pages/demos/avatars/ImageAvatars.js"}} -## Буквенные аватары +## Letter avatars -Аватары, содержащие простые символы, можно создать, передав вашу строку как `children`. +Avatars containing simple characters can be created by passing your string as `children`. {{"demo": "pages/demos/avatars/LetterAvatars.js"}} -## Иконочные аватары +## Icon avatars -Аватары значков создаются путем передачи значка как `children`. +Icon avatars are created by passing an icon as `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 82a2147a1cc294..ddca7a3522d7ff 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-Komponente +title: Badge React component components: Badge --- # Badges -

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

+

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

## Emblemas Simples -Beispiele für Badges, die Text enthalten, mit Primär- und Sekundärfarben. Das Abzeichen wird an seinen Kindern angebracht. +Examples of badges containing text, using primary and secondary colors. The badge is applied to its children. {{"demo": "pages/demos/badges/SimpleBadge.js"}} -## Maximalwert +## Maximum Value -Sie können die Eigenschaft `max` verwenden, um den Wert des Badge-Inhalts zu begrenzen. +You can use the `max` property to cap the value of the badge content. {{"demo": "pages/demos/badges/BadgeMax.js"}} -## Punkt-Badge +## Dot Badge -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. +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. {{"demo": "pages/demos/badges/DotBadge.js"}} -## Badge Sichtbarkeit +## Badge visibility -Die Sichtbarkeit von Badges kann über die Eigenschaft `invisible` gesteuert werden. +The visibility of badges can be controlled using the `invisible` property. -Das Badge versteckt sich automatisch, wenn `badgeContent` null ist. Dies kann mit der Eigenschaft `showZero` überschrieben werden. +The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. {{"demo": "pages/demos/badges/BadgeVisibility.js"}} -## Benutzerdefinierte Badges +## 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. diff --git a/docs/src/pages/demos/badges/badges-es.md b/docs/src/pages/demos/badges/badges-es.md index 6e400d825c30d1..ddca7a3522d7ff 100644 --- a/docs/src/pages/demos/badges/badges-es.md +++ b/docs/src/pages/demos/badges/badges-es.md @@ -1,41 +1,41 @@ --- -title: Componente Badge +title: Badge React component components: Badge --- -# Placas +# Badges -

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

+

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

## Emblemas Simples -Ejemplos de badges que contienen texto, usando los colores primarios y secundarios de la paleta de colores. +Examples of badges containing text, using primary and secondary colors. The badge is applied to its children. {{"demo": "pages/demos/badges/SimpleBadge.js"}} -## Valor Máximo +## Maximum Value -Puedes usar la propiedad `max` para limitar el valor máximo del contenido del badge. +You can use the `max` property to cap the value of the badge content. {{"demo": "pages/demos/badges/BadgeMax.js"}} -## Badge de punto +## Dot Badge -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. +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. {{"demo": "pages/demos/badges/DotBadge.js"}} -## Visibilidad del Badge +## Badge visibility -La visibilidad del badge puede ser controlada usando la propiedad `invisible`. +The visibility of badges can be controlled using the `invisible` property. -El badge se auto oculta usando la propiedad `badgeContent={0}`. Puedes sobreescribir este comportamiento usando la propiedad `showZero`. +The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. {{"demo": "pages/demos/badges/BadgeVisibility.js"}} -## Badge Personalizado +## Customized Badge -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. +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. -⚠️ A pesar de que la especificación de material design anima a usar temas, este ejemplo no es común. +⚠️ 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-ru.md b/docs/src/pages/demos/badges/badges-ru.md index d6789ff0e85d61..ddca7a3522d7ff 100644 --- a/docs/src/pages/demos/badges/badges-ru.md +++ b/docs/src/pages/demos/badges/badges-ru.md @@ -1,41 +1,41 @@ --- -title: React-компонент Значок +title: Badge React component 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 -Вы можете использовать свойство `max` чтобы ограничить значение содержимого значка. +You can use the `max` property to cap the value of the badge content. {{"demo": "pages/demos/badges/BadgeMax.js"}} -## Точечный значок +## Dot Badge -Свойство `dot` превращает значок в маленькую точку. Это можно использовать как уведомление о том, что что-то изменилось без счетчика. +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. {{"demo": "pages/demos/badges/DotBadge.js"}} -## Видимость значка +## Badge visibility -Видимость значков можно контролировать с помощью свойства `invisible`. +The visibility of badges can be controlled using the `invisible` property. -Значок автоматически скрывается, если badgeContent равен нулю. Вы можете переопределить это с помощью свойства `showZero`. +The badge auto hides with badgeContent is zero. You can override this with the `showZero` property. {{"demo": "pages/demos/badges/BadgeVisibility.js"}} -## Кастомизированный значок +## Customized Badge -Если вы читали [страницу документации о переопределениях](/customization/overrides/) но не уверены, что можете войти в курс этого, вот один из примеров того, как вы можете изменить положение значка. +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. -⚠️ Хотя спецификации материал дизайна поощряют использование тем, эти примеры не соответствуют требованиям. +⚠️ 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 271c667093b7cb..3dd446b8c267b4 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 2dc28e7889a247..6db231d5722fcd 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 (Untere Navigation) +# Bottom Navigation (Navegação Inferior)

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 (Untere Navigation) +## Bottom Navigation (Navegação Inferior) 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 1b5b7da3ad71a3..6db231d5722fcd 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) -

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

+

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

-[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](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) -Cuando sólo hay **tres** acciones, muestra las dos cosas, iconos y etiquetas de texto en todo momento. +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 -Si hay **cuatro ** o **cinco** acciones, mostrar vistas inactivas solamente como iconos. +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/bottom-navigation/bottom-navigation-ja.md b/docs/src/pages/demos/bottom-navigation/bottom-navigation-ja.md index f9cb2a80cc2f76..6db231d5722fcd 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 +# Bottom Navigation (Navegação Inferior)

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 +## Bottom Navigation (Navegação Inferior) 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 9563bc72864243..6db231d5722fcd 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) -Quando existem apenas **três** ações, exibir ambos os ícones e rótulos de texto em todos os momentos. +When there are only **three** actions, display both icons and text labels at all times. {{"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 b00b70c07bc31d..6db231d5722fcd 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 (Нижняя панель навигации) +# Bottom Navigation (Navegação Inferior) -

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

+

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

-[Нижняя панель навигации](https://material.io/design/components/bottom-navigation.html) отображает от трех до пяти элементов перехода внизу экрана. Каждый элемент перехода представлен значком и необязательной текстовой меткой. При нажатии на нижний значок навигации пользователь попадает на страницу, связанную с этим значком. +[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 (Нижняя панель навигации) +## Bottom Navigation (Navegação Inferior) -Если есть только **три действия**, стоит всегда отображать и значки и текстовые метки. +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 2b98c3d87ef8dd..42fcac6369d974 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 -- Modale Fenster -- Formulare +- Modal windows +- Forms - 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 Dialogen -- In Karten +- In dialogs +- In cards -In Karten helfen Text Buttons dabei, den Karteninhalt hervorzuheben. +In cards, text buttons help maintain an emphasis on card content. {{"demo": "pages/demos/buttons/TextButtons.js"}} ## Outlined Buttons -[Outlined Buttons](https://material.io/design/components/buttons.html#outlined-button) sind Buttons mit mittlerer Betonung. Sie enthalten wichtige Aktionen, aber nicht die primäre Aktion in einer App. +[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. -### Alternativen +### Alternatives -Outlined Buttons sind auch eine Alternative mit geringerer Betonung als Contained Buttons, oder eine Alternative mit höherer Betonung als Text Buttons. +Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons. {{"demo": "pages/demos/buttons/OutlinedButtons.js"}} ## Floating Action Buttons -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. +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. -Verwenden Sie eine FAB nur, wenn dies für die Darstellung der Hauptaktion eines Bildschirms am besten geeignet ist. +Only use a FAB if it is the most suitable way to present a screen’s primary action. -Es wird nur eine Floating Action Button pro Bildschirm empfohlen, um die am häufigsten verwendete Aktion darzustellen. +Only one floating action button is recommended per screen to represent the most common action. {{"demo": "pages/demos/buttons/FloatingActionButtons.js"}} -Der floating-action-button, wird standardmäßig als expandierendes Material auf dem Bildschirm animiert. +The floating action button animates onto the screen as an expanding piece of material, by default. -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. +A floating action button that spans multiple lateral screens (such as tabbed screens) should briefly disappear, then reappear if its action changes. -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. +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. {{"demo": "pages/demos/buttons/FloatingActionButtonZoom.js"}} -## Größen +## Sizes -Lust auf größere oder kleinere Schaltflächen? Verwenden Sie die Eigenschaft `size`. +Fancy larger or smaller buttons? Use the `size` property. {{"demo": "pages/demos/buttons/ButtonSizes.js"}} -## Buttons mit Symbolen und Beschriftung +## Buttons with icons and label -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. +Sometimes you might want to have icons for certain button to enhance the UX of the application as we recognize logos more easily than plain text. For example, if you have a delete button you can label it with a dustbin icon. {{"demo": "pages/demos/buttons/IconLabelButtons.js"}} ## Icon Buttons -Icon Buttons finden Sie häufig in App-Bars und Toolbars. +Icon buttons are commonly found in app bars and toolbars. -Icons eignen sich auch für Umschaltflächen, mit denen eine einzelne Auswahl ausgewählt oder die Auswahl auf z. B. das Hinzufügen oder Entfernen eines Sterns zu einem Element. +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"}} ## Customized Buttons -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. +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. -⚠️ Auch wenn die material design Spezifikation zur Verwendung von Themes ermutigt, liegen diese Beispiele außerhalb der üblichen Pfade. +⚠️ While the material design specification encourages theming, these examples are off the beaten path. {{"demo": "pages/demos/buttons/CustomizedButtons.js"}} ## Complex Buttons -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. +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. {{"demo": "pages/demos/buttons/ButtonBases.js"}} -## Drittanbieter-Routing Bibliothek +## Third-party routing library -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: +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: ```jsx import { Link } from 'react-router-dom' @@ -108,7 +108,7 @@ import Button from '@material-ui/core/Button'; ``` -oder wenn Sie die Kollision von Eigenschaften vermeiden möchten: +or if you want to avoid properties collision: ```jsx import { Link } from 'react-router-dom' @@ -121,4 +121,4 @@ const MyLink = props => ``` -*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 +*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 diff --git a/docs/src/pages/demos/buttons/buttons-es.md b/docs/src/pages/demos/buttons/buttons-es.md index 4542d710132de7..6ae38b26db1342 100644 --- a/docs/src/pages/demos/buttons/buttons-es.md +++ b/docs/src/pages/demos/buttons/buttons-es.md @@ -1,14 +1,14 @@ --- -title: Componente de React Botón +title: Botón componente React components: Button, Fab, IconButton, ButtonBase, Zoom --- # Botones -

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

+

Los botones permiten a los usuarios ejecutar acciones, y tomar decisiones, con un solo 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: -- Diálogos +- Dialogs - 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 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. +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. ⚠️ 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 e0c2817f71b3aa..0c244ecbffa22d 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 -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. +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. -⚠️ Bien que les spécifications Material Design encouragent la thématisation, ces exemples sortent des sentiers battus. +⚠️ Bien que les spécifications de conception des matériaux encouragent la thématisation, ces exemples sortent des sentiers battus. {{"demo": "pages/demos/buttons/CustomizedButtons.js"}} -## Boutons complexes +## Complex Buttons -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. +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. {{"demo": "pages/demos/buttons/ButtonBases.js"}} @@ -108,7 +108,7 @@ import Button from '@material-ui/core/Button'; ``` -ou si vous souhaitez éviter les collisions de propriétés : +or if you want to avoid properties collision: ```jsx import { Link } from 'react-router-dom' @@ -121,4 +121,4 @@ const MyLink = props => ``` -*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 +*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 diff --git a/docs/src/pages/demos/buttons/buttons-ja.md b/docs/src/pages/demos/buttons/buttons-ja.md index 2ab04d8ebbe60a..e1427d5c11ca27 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 -

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

+

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

-[Button](https://material.io/design/components/buttons.html)は、ユーザが取りうるアクションを伝達します。一般的に次のようなUIのなかに配置されます。 +[Buttons](https://material.io/design/components/buttons.html) communicate actions that users can take. They are typically placed throughout your UI, in places like: - Dialogs -- Modal window -- Form +- Modal windows +- Forms - Cards -- Toolbar +- Toolbars ## Contained Buttons -[Contained button](https://material.io/design/components/buttons.html#contained-button)は、力強く、強調と塗りつぶしによって区別されるようなボタンです。 アプリケーションの初歩的なアクションが含まれます。 +[Contained buttons](https://material.io/design/components/buttons.html#contained-button) are high-emphasis, distinguished by their use of elevation and fill. They contain actions that are primary to your app. -一番最後のデモは、アップロード用のボタンの例になっています。 +The last example of this demo show how to use an upload button. {{"demo": "pages/demos/buttons/ContainedButtons.js"}} ## Text Buttons -[Text button](https://material.io/design/components/buttons.html#text-button)は、一般的にそれほど目立たせる必要のないアクションに対して用いられます。例えば、次のようなコンポーネントの中で用いられます。 +[Text buttons](https://material.io/design/components/buttons.html#text-button) are typically used for less-pronounced actions, including those located: -- Dialog -- Card +- In dialogs +- In cards -Cardの中でText Buttonを用いることで、Cardの内容に重点を置くことができます。 +In cards, text buttons help maintain an emphasis on card content. {{"demo": "pages/demos/buttons/TextButtons.js"}} ## Outlined Buttons -[Outlined button](https://material.io/design/components/buttons.html#outlined-button)は、強調度合いが中くらいのボタンです。 重要なアクションを含みますが、アプリ内では最も重要ではない、といった場合に使われます。 +[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. -### 代替手段 +### Alternatives -Outlined buttonは、Contained buttonと比べると強調が弱く、 Text buttonと比べると強調の強いボタンです。 +Outlined buttons are also a lower emphasis alternative to contained buttons, or a higher emphasis alternative to text buttons. {{"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 cdaf454156bf39..43ce56ddc571d0 100644 --- a/docs/src/pages/demos/buttons/buttons-ru.md +++ b/docs/src/pages/demos/buttons/buttons-ru.md @@ -1,5 +1,5 @@ --- -title: React-компонент Кнопка +title: Button React component 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)](/customization/overrides/) но вы не уверены, вот примеры того, как вы можете изменить основной цвет кнопки, используя классы, и используя тему; и кнопки в стиле Bootstrap. +Если вы читали [overrides documentation page](/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 -Текстовые кнопки, плавающие кнопки действий, блочные кнопки построены на основе одного и того же компонента: `ButtonBase`. Вы можете воспользоваться этим более низкоуровневым компонентом для создания пользовательских взаимодействий. +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. {{"demo": "pages/demos/buttons/ButtonBases.js"}} -## Сторонняя библиотека маршрутизации +## Third-party routing library -Одним из распространенных вариантов использования кнопки является переход на новую страницу. `ButtonBase` компонент предоставляет свойство для обработки этого варианта использования: `component`. Учитывая, что многие наши интерактивные компоненты используют `ButtonBase`, у вас есть возможность воспользоваться этим: +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: ```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 => ``` -*Примечание: Создание `MyLink` необходимо для предотвращения неожиданного отключения. Вы можете прочитать больше об этом в нашем [руководстве по свойствам компонента](/guides/composition/#component-property).* \ No newline at end of file +*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 diff --git a/docs/src/pages/demos/buttons/buttons-zh.md b/docs/src/pages/demos/buttons/buttons-zh.md index 8fc07094298f06..c1e94b19e24113 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 => ``` -*注意：创建 `MyLink` 是必要的，以防止意外卸载。您可以在我们的 [组件属性指南](/guides/composition/#component-property)阅读更多相关信息。* \ No newline at end of file +*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 diff --git a/docs/src/pages/demos/cards/cards-de.md b/docs/src/pages/demos/cards/cards-de.md index d08f4afc218bf4..32630c321d9054 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 Komponente +title: Card React component components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedia, Collapse, Paper --- # Cards -

Cards enthalten Inhalte und Aktionen zu einem bestimmten Thema.

+

Cards contain content and actions about a single subject.

-[Cards](https://material.io/design/components/cards.html) sind Oberflächen, auf denen Inhalte und Aktionen zu einem einzelnen Thema angezeigt werden. +[Cards](https://material.io/design/components/cards.html) are surfaces that display content and actions on a single topic. -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. +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. ## Simple Card -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. +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. {{"demo": "pages/demos/cards/SimpleCard.js"}} -## Komplexe Interaktion +## Complex Interaction -Auf dem Desktop können Karteninhalte erweitert werden. +On desktop, card content can expand. {{"demo": "pages/demos/cards/RecipeReviewCard.js"}} -## Medien +## Media -Beispiel für eine Karte, die ein Bild verwendet, um den Inhalt zu verstärken. +Example of a card using an image to reinforce the content. {{"demo": "pages/demos/cards/MediaCard.js"}} -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`: +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: {{"demo": "pages/demos/cards/ImgMediaCard.js"}} -## Steuerelemente der Benutzeroberfläche +## UI Controls -Ergänzende Aktionen innerhalb der Karte werden explizit mit Symbolen, Text und UI-Steuerelementen aufgerufen, die sich normalerweise unten auf der Karte befinden. +Supplemental actions within the card are explicitly called out using icons, text, and UI controls, typically placed at the bottom of the card. -Hier ist ein Beispiel für eine Mediensteuerungskarte. +Here's an example of a media control card. {{"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 b0e36e72a0571c..ed5e5a112d282c 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 React Card (Tarjeta) +title: Componente de Card(Tarjetas) 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 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. +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. ## Tarjeta simple -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. +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. {{"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, tal vez 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, cuando 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 y 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, controles de IU, localizados de manera típica en el pie de la tarjeta. -Acá un ejemplo de una tarjeta con control multimedia. +Aca 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 b69a4f860325ad..05ca30f8d9d937 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 +title: Card React component 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 407d6a613dfcd1..35bc5d49f4e380 100644 --- a/docs/src/pages/demos/chips/chips-es.md +++ b/docs/src/pages/demos/chips/chips-es.md @@ -1,5 +1,5 @@ --- -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" +title: Chip React component components: Chip --- # Chips diff --git a/docs/src/pages/demos/chips/chips-fr.md b/docs/src/pages/demos/chips/chips-fr.md index a9ee4239398c3f..180acdd9a169ad 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 -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é. +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é. {{"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 04c0be6fa5e6ee..35bc5d49f4e380 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.

-[Фишки](https://material.io/design/components/chips.html) позволяют пользователям вводить информацию, делать выбор, фильтровать контент или инициировать действия. +[Chips](https://material.io/design/components/chips.html) allow users to enter information, make selections, filter content, or trigger actions. -Несмотря на то, что он включен здесь как автономный компонент, наиболее распространенное использование будет в той или иной форме ввода, поэтому некоторые из продемонстрированных здесь действий не показаны в контексте. +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 -Примеры фишек, использующих изображения, SVG-иконку, «Символ» и строку в качестве аватара. +Examples of Chips, using an image Avatar, SVG Icon Avatar, "Letter" and (string) Avatar. -- Фишки с заданным свойством `onClick` могут изменять внешний вид при фокусировке, наведении курсора и клике. -- Фишки с определенным свойством `onDelete` будут отображать значок удаления который меняет внешний вид при наведении курсора. +- 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. {{"demo": "pages/demos/chips/Chips.js"}} -### Контурные фишки +### Outlined Chips -Контурные фишки предлагают альтернативный стиль. +Outlined chips offer an alternative style. {{"demo": "pages/demos/chips/OutlinedChips.js"}} -## Массив фишек +## Chip array -Пример рендеринга нескольких фишек из массива значений. Удаление фишки удаляет ее из массива. Обратите внимание, что поскольку свойство `onClick` не определено, фишка может быть сфокусирована, но не получает глубины при щелчке или касании. +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. {{"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 389b2226ca95c7..bb9b00fef6edd6 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 4bc3581358e0a5..bb9b00fef6edd6 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 --- -# Diálogos +# Dialogs -

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

+

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

-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. +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. -Los diálogos están diseñados a interrumpir el usuario, por eso, deben usarse solo cuando estén necesarios. +Dialogs are purposefully interruptive, so they should be used sparingly. ## 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. -⚠️ A pesar de que la especificación de material design anima a usar temas, este ejemplo no es común. +⚠️ While the material design specification encourages theming, this example is off the beaten path. {{"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 f0c7e1d8a7175a..9f01c70c057d6f 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: -- 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" +- 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?” {{"demo": "pages/demos/dialogs/AlertDialog.js"}} -Vous pouvez également permuter la transition. L’exemple suivant utilise `Slide`. +You can also swap out the transition, the next example uses `Slide`. {{"demo": "pages/demos/dialogs/AlertDialogSlide.js"}} ## Dialogues de formulaire -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'. +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"}} ## Dialogue personnalisé -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. +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. ⚠️ Bien que la spécification material encouragent la thématisation, cet exemple sort des sentiers battus. @@ -63,7 +63,7 @@ Si vous avez lu la page de documentation [sur les personnalisation](/customizati ## Tailles en option -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`. +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. {{"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 -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”. +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.” -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. +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"}} ## Accessibilité -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`. +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`. ## Défiler de longues contenu @@ -98,7 +98,7 @@ Essayez la démo ci-dessous pour voir ce que nous voulons dire: ## Dialogue glissable -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. +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. {{"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 389b2226ca95c7..bb9b00fef6edd6 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 ae7f871092cae1..deb89c4a2346fc 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) -

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.

+

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

-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. +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. -As caixas de diálogo são intencionalmente interruptivas, portanto devem ser usadas com moderação. +Dialogs are purposefully interruptive, so they should be used sparingly. -## Caixas de diálogo simples +## 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). @@ -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 4a8b001119e1bc..bb9b00fef6edd6 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.

-[Диалог](https://material.io/design/components/dialogs.html) представляет собой тип [модальных](/utils/modal/) окон, который появляется над приложением, чтобы предоставить важную информацию или для предоставления решения. Диалоги отключают все функции приложения, когда они появляются, и остаются на экране до тех пор, пока не будут подтверждены, отклонены или пока не будут предприняты необходимые действия. +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. -Диалоги целенаправленно останавливают, поэтому их следует использовать с осторожностью. +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: -- Используйте четкий вопрос или утверждение с пояснением в области содержимого, например «Очистить USB-накопитель?». -- Избегайте извинений, двусмысленности или вопросов, таких как «Предупреждение!» Или «Вы уверены?» +- 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?” {{"demo": "pages/demos/dialogs/AlertDialog.js"}} -Вы также можете поменять анимацию, в следующем примере используется `Slide`. +You can also swap out the transition, the next example uses `Slide`. {{"demo": "pages/demos/dialogs/AlertDialogSlide.js"}} -## Диалоги с формой +## Form dialogs -Диалоги с формой позволяют пользователям заполнять поля формы внутри диалога. 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"}} -## Кастомизированные диалоги +## Customized dialog -Если вы уже читали страницу документации [о переопределении](/customization/overrides/) но не уверены, что готовы это применить, вот один из примеров того, как можно настроить `DialogTitle` для поддержки кнопки закрытия. +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. {{"demo": "pages/demos/dialogs/CustomizedDialog.js"}} -## Полноэкранные диалоги +## Full-screen dialogs {{"demo": "pages/demos/dialogs/FullScreenDialog.js"}} -## Опциональные размеры +## Optional sizes -Вы можете установить максимальную ширину диалога с помощью числового значения `maxWidth` в сочетании с булевым значением `fullWidth`. Когда свойство `fullWidth` имеет значение true, диалоговое окно будет адаптировано на основе значения `maxWidth`. +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. {{"demo": "pages/demos/dialogs/MaxWidthDialog.js"}} -## Отзывчивый полноэкранный режим +## Responsive full-screen -Вы можете сделать диалог в полноэкранном режиме, используя `withMobileDialog`. По умолчанию `withMobileDialog () (Dialog)` переходит в полноэкранный режим когда [размер экрана](/layout/basics/) *равен или ниже* значения `sm`. Вы можете выбрать собственную точку остановки, например `xs`, передав аргумент `breakpoint`: `withMobileDialog({breakpoint: 'xs'})(Dialog)`. +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)`. {{"demo": "pages/demos/dialogs/ResponsiveDialog.js"}} -## Диалоги подтверждения +## Confirmation dialogs -Диалоги подтверждения требуют, чтобы пользователи явно подтвердили свой выбор, прежде чем их выбор будет сохранен. 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. {{"demo": "pages/demos/dialogs/ConfirmationDialog.js"}} ## Accessibility -Не забудьте добавить `aria-labelledby="id..."`, ссылаясь на заголовок модального окна, в `Dialog`. Кроме того, вы можете создать описание вашего модального диалога с помощью свойства `aria-describedby="id..."` в `Dialog`. +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`. -## Прокрутка длинного контента +## Scrolling long content -Когда диалоги становятся слишком длинными для окна просмотра или устройства пользователя, они их прокручивают. +When dialogs become too long for the user’s viewport or device, they scroll. -- `scroll = paper` содержимое диалогового окна прокручивается внутри элемента paper. -- `scroll = body` содержимое диалога прокручивается внутри элемента body. +- `scroll=paper` the content of the dialog scrolls within the paper element. +- `scroll=body` the content of the dialog scrolls within the body element. -Попробуйте демо ниже, чтобы увидеть, что мы имеем в виду: +Try the demo below to see what we mean: {{"demo": "pages/demos/dialogs/ScrollDialog.js"}} -## Перетаскиваемый диалог +## Draggable dialog -Вы можете создать перетаскиваемый диалог, используя [react-draggable](https://github.com/mzabriskie/react-draggable). Для этого вы можете передать импортированный компонент `Draggable` как компонент `PaperComponent` компонента `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. {{"demo": "pages/demos/dialogs/DraggableDialog.js"}} -## Производительность +## Performance -Перейдите в раздел [Modal performance section](/utils/modal/#performance). \ No newline at end of file +Follow the [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 c681e2b63ad633..87ec2b929476bd 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 ## 表单对话框 -表单对话框允许用户通过一个弹出的对话框，对表单进行填写。 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'. +表单对话框允许用户通过一个弹出的对话框，对表单进行填写。 在下面的例子中，你的网站提示那些潜在用户填写他们的电子邮箱，他们可以在点击之后填写email区域，并点击'提交'按钮以提交。 {{"demo": "pages/demos/dialogs/FormDialog.js"}} @@ -75,7 +75,7 @@ components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions ## 确认对话框 -确认对话框要求用户在提交选项之前显式确认他们的选择。 For example, users can listen to multiple ringtones but only make a final selection upon touching “OK”. +确认对话框要求用户在提交选项之前显式确认他们的选择。 例如, 用户可以聆听多个铃声, 但只在触摸 "OK" 时进行最后的选择。 在确认对话框中触摸 "取消", 或按后退, 将会取消当前操作, 放弃任何更改, 并关闭对话框。 diff --git a/docs/src/pages/demos/dividers/dividers-de.md b/docs/src/pages/demos/dividers/dividers-de.md index a8cc8e5cafaee0..2f5e62a96ed58f 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 -Die `inset`-Eigenschaft ist von nun an veraltet. Sie sollten nun `variant="inset"` benutzen. +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-es.md b/docs/src/pages/demos/dividers/dividers-es.md index 7f8b4cb9eb4cad..2f5e62a96ed58f 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 4170fcf105e324..7dfaf6a582e04c 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 7f8b4cb9eb4cad..2f5e62a96ed58f 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 c264ac4652ae19..11dc6fe5b35e15 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 (Divisores)](https://material.io/design/components/dividers.html) separam grupos de conteúdos. +[Dividers](https://material.io/design/components/dividers.html) separate content into clear groups. ## 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 -A propriedade `inset` está obsoleta e em desuso. Você deve usar agora `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-ru.md b/docs/src/pages/demos/dividers/dividers-ru.md index 101027c7dc6364..2f5e62a96ed58f 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.

-[Разелители](https://material.io/design/components/dividers.html) делят содержимое (контент) на явные (четкие) группы. +[Dividers](https://material.io/design/components/dividers.html) separate content into clear groups. -## Разделители списков +## List Dividers -По умолчанию разделитель отображается как `
`. Вместо этого Вы можете сформировать отображение этого DOM-элемента, используя свойство `divider` в компоненте `ListItem`. +The divider renders as a `
` by default. You can save rendering this DOM element by using the `divider` property on the `ListItem` component. {{"demo": "pages/demos/dividers/ListDividers.js"}} -## Спецификации HTML5 +## HTML5 Specification 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 -Свойство `inset` является устаревшим. Сейчас вам следует использовать `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-zh.md b/docs/src/pages/demos/dividers/dividers-zh.md index e42a5ac5d9d361..26cdd625213844 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 f67c2f543ce5c8..ecade9afc9a99e 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 -

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

+

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.

-[Навигационные панели](https://material.io/design/components/navigation-drawer.html) позволяют реализовывать такую функциональность как, например, переключение между аккаунтами. Их можно быстро открыть, нажимая на иконку в меню. +[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. [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 21b8c1f1284561..232f3b7361431a 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 32316e0c4b657d..e540ebd32fb097 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`. -⚠️ Auch wenn die material design Spezifikation zur Verwendung von Themes ermutigt, liegen diese Beispiele außerhalb der üblichen Pfade. +⚠️ 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/expansion-panels/expansion-panels-es.md b/docs/src/pages/demos/expansion-panels/expansion-panels-es.md index 523be710632e8d..e540ebd32fb097 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`. -⚠️ A pesar de que la especificación de material design anima a usar temas, estos ejemplos no son comunes. +⚠️ 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/expansion-panels/expansion-panels-ru.md b/docs/src/pages/demos/expansion-panels/expansion-panels-ru.md index 3a9d229817c44e..e540ebd32fb097 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: Панель расширения (Компонент React) +title: Expansion Panel React component 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 c7ffa05e221c51..1bf03fd2e44d9d 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: Componente React para Lista cuadriculada +title: Grid List React component components: GridList, GridListTile, GridListTileBar, ListSubheader, IconButton --- -# Lista cuadriculada +# Grid List -

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

+

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

-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. +[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. -## Lista cuadriculada sólo con imágenes +## Image-only Grid list -Un ejemplo simple de una lista cuadriculada (`GridList`) con imágenes desplazables. +A simple example of a scrollable image `GridList`. {{"demo": "pages/demos/grid-list/ImageGridList.js", "hideEditButton": true}} -## Lista cuadriculada con barras de título +## Grid list with titlebars -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`). +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`. {{"demo": "pages/demos/grid-list/TitlebarGridList.js", "hideEditButton": true}} -## Lista cuadriculada con una línea +## Single line Grid list -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. +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. {{"demo": "pages/demos/grid-list/SingleLineGridList.js", "hideEditButton": true}} -## Lista cuadriculada avanzada +## Advanced Grid list -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. +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. {{"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 5ee14087df734d..21d42bda7badaf 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 --- -# Listas +# Lists -

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

+

Lists are continuous, vertical indexes of text or images.

-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. +[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. -## Lista Simple +## Simple List {{"demo": "pages/demos/lists/SimpleList.js"}} -El último elemento del demo anterior muestra cómo se puede representar un enlace: +The last item of the previous demo shows how you can render a link: ```jsx function ListItemLink(props) { @@ -26,13 +26,13 @@ function ListItemLink(props) { ``` -Puedes encontrar una demostración [usando React Router siguiendo esta sección](/guides/composition/#react-router) de la documentación. +You can find a [demo with React Router following this section](/guides/composition/#react-router) of the documentation. -## Lista Anidada +## Nested List {{"demo": "pages/demos/lists/NestedList.js"}} -## Lista de carpetas +## Folder List {{"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"}} -## Elemento de la lista seleccionado +## Selected ListItem {{"demo": "pages/demos/lists/SelectedListItem.js"}} -## Alineación de los elementos de la lista +## Align list items 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"}} -## Controles de lista +## List Controls -### Casilla de selección +### Checkbox -Un checkbox puede ser una acción primaria o una acción secundaria. +A checkbox can either be a primary action or a secondary action. -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. +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. {{"demo": "pages/demos/lists/CheckboxList.js"}} -El checkbox es la acción secundaria para el elemento de la lista y un objetivo separado. +The checkbox is the secondary action for the list item and a separate target. {{"demo": "pages/demos/lists/CheckboxListSecondary.js"}} ### Switch -El switch es la acción secundaria y un objetivo separado. +The switch is the secondary action and a separate target. {{"demo": "pages/demos/lists/SwitchListSecondary.js"}} -## Lista de subencabezados fijados +## Pinned Subheader List -Al desplazarse, los subencabezados permanecen anclados en la parte superior de la pantalla hasta que el siguiente subencabezado los saque de la pantalla. +Upon scrolling, subheaders remain pinned to the top of the screen until pushed off screen by the next subheader. -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. +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. {{"demo": "pages/demos/lists/PinnedSubheaderList.js"}} -## Lista con margen +## Inset List {{"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 9e3764b413e98d..191ef023c295a7 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 -Vous trouverez ci-dessous une démo interactive vous permettant d'explorer les résultats visuels des différents paramètres: +Below is an interactive demo that lets you explore the visual results of the different settings: {{"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 98fedaec601132..21d42bda7badaf 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.

-[Списки](https://material.io/design/components/lists.html) представляют собой непрерывную группу из текста или изображений. Они состоят из элементов, содержащих основные и дополнительные действия, которые представлены значками и текстом. +[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. -## Простой список +## 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) { ``` -Вы можете [посмотреть демо с React Router](/guides/composition/#react-router). +You can find a [demo with React Router following this section](/guides/composition/#react-router) of the documentation. -## Вложенный список +## 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"}} -## Выбранный ListItem +## Selected ListItem {{"demo": "pages/demos/lists/SelectedListItem.js"}} -## Выравнивание элементов списка +## Align list items -Вы должны изменить выравнивание элементов списка при отображении 3 или более элементов. Для этого установите свойство `alignItems = "flex-start"` +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 ### Checkbox -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. {{"demo": "pages/demos/lists/CheckboxList.js"}} -Тут checkbox является второстепенным действием для элемента списка. +The checkbox is the secondary action for the list item and a separate target. {{"demo": "pages/demos/lists/CheckboxListSecondary.js"}} -### Switch (переключатель) +### Switch -Switch является второстепенным действием. +The switch is the secondary action and a separate target. {{"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. -Эта функция опирается на фиксированное позиционирование CSS. К сожалению эта функциональность, [не реализована](https://caniuse.com/#search=sticky) всеми браузерами, которые мы поддерживаем. Мы по умолчанию выключаем закрепление - `disableSticky` когда оно не поддерживается. +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. {{"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 efcab8d6bbad25..5479184bbc5898 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: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: +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: {{"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"}} \ No newline at end of file +{{"demo": "pages/demos/menus/MenuPopupState.js"}} diff --git a/docs/src/pages/demos/menus/menus-es.md b/docs/src/pages/demos/menus/menus-es.md index 7d3f99ebd4c3d5..5479184bbc5898 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`. -⚠️ A pesar de que la especificación de material design anima a usar temas, este ejemplo no es común. +⚠️ While the material design specification encourages theming, this example is off the beaten path. {{"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: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: +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: {{"demo": "pages/demos/menus/TypographyMenu.js"}} @@ -66,7 +66,7 @@ Use a different transition. {{"demo": "pages/demos/menus/FadeMenu.js"}} -## Proyectos relacionados +## 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"}} \ No newline at end of file +{{"demo": "pages/demos/menus/MenuPopupState.js"}} diff --git a/docs/src/pages/demos/menus/menus-fr.md b/docs/src/pages/demos/menus/menus-fr.md index 74e07d67f81c8a..c17e9ded421594 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.

-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. +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. ## Menu simple -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. +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. -Le choix d'une option doit idéalement être validé immédiatement et fermer le menu. +Choosing an option should immediately ideally commit the option and close the menu. -**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. +**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. {{"demo": "pages/demos/menus/SimpleMenu.js"}} ## Menus sélectionnés -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/)). +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/)). {{"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"}} -## MenuItem personnalisé +## Customized 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`. +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`. ⚠️ Bien que la spécification material encouragent la thématisation, cet exemple sort des sentiers battus. {{"demo": "pages/demos/menus/ListItemComposition.js"}} -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`: +The `MenuItem` is a wrapper around `ListItem` with some additional styles. You can use the same list composition features with the `MenuItem` component: -## Hauteur maximale des menus +## Max height 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: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: +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: {{"demo": "pages/demos/menus/TypographyMenu.js"}} ## Changer la transition -Utilisez une transition différente. +Use a different transition. {{"demo": "pages/demos/menus/FadeMenu.js"}} ## Projets complémentaires -Pour un usage plus avancé cas, vous pourriez être en mesure de prendre avantage de: +For more advanced use cases you might be able to take advantage of: -### Assistant PopupState +### PopupState helper -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. +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"}} \ No newline at end of file +{{"demo": "pages/demos/menus/MenuPopupState.js"}} diff --git a/docs/src/pages/demos/menus/menus-ja.md b/docs/src/pages/demos/menus/menus-ja.md index efcab8d6bbad25..5479184bbc5898 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: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: +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: {{"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"}} \ No newline at end of file +{{"demo": "pages/demos/menus/MenuPopupState.js"}} diff --git a/docs/src/pages/demos/menus/menus-pt.md b/docs/src/pages/demos/menus/menus-pt.md index 5d7cf8af223515..c3d97570f8c48d 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: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: +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: {{"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"}} \ No newline at end of file +{{"demo": "pages/demos/menus/MenuPopupState.js"}} diff --git a/docs/src/pages/demos/menus/menus-ru.md b/docs/src/pages/demos/menus/menus-ru.md index 34b616a456c944..5479184bbc5898 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: ellipsis` from working in a flexbox layout. You can use the `Typography` component with `noWrap` to workaround this issue: +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: {{"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"}} \ No newline at end of file +{{"demo": "pages/demos/menus/MenuPopupState.js"}} diff --git a/docs/src/pages/demos/menus/menus-zh.md b/docs/src/pages/demos/menus/menus-zh.md index a08750ec123b31..b74ca15e6d3deb 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 ## 局限性 -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: +这里有 [a flexbox bug](https://bugs.chromium.org/p/chromium/issues/detail?id=327437)，这个bug会让`text-overflow: ellipse`在 flexbox 布局中失去效果 你可以使用`Typography`组件做替代方案绕过这个问题： {{"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 2e5f59a37bf9d9..757a8437d195ab 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 9d12b7484e40d6..4ee7c9aa7619fe 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 proporcionan una manera sencilla de elegir un valor de un conjunto predeterminado.

+

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

- 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"}} -## Proyectos relacionados +## Complementary projects 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 2098d8c04d5aca..8157bcc19637cb 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. -- 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. +- For inline display, such as on a form, consider using compact controls such as segmented dropdown buttons. #### Avis diff --git a/docs/src/pages/demos/pickers/pickers-pt.md b/docs/src/pages/demos/pickers/pickers-pt.md index 02a75063d3b3a3..c5687c20d83fad 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 -![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) +![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. diff --git a/docs/src/pages/demos/pickers/pickers-ru.md b/docs/src/pages/demos/pickers/pickers-ru.md index fb6f7eaeb3c992..281eca9dafb5ac 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 компоненты +title: Date Picker, Time Picker React components components: TextField --- -# Поля выбора +# Пикеры -

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

+

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

- На мобильном устройстве лучше всего отображать в модальном окне. - Для инлайн-отображения, например в формах стоит рассмотреть возможность использования более компактных элементов управления, таких как сегментированные выпадающие кнопки. -#### Примечание +#### Внимание Мы поддерживаем только **нативные типы полей ввода**. -⚠️ Поддержка нативных типов полей ввода [не идеальна](https://caniuse.com/#feat=input-datetime). Рассмотрите [дополнительные проекты](#complementary-projects) для более сложных решений. +⚠️ 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. -## Поля выбора даты +## Date pickers -Пример нативного поля выбора даты с помощью `type="date"`, можно использовать как календарь. +A native date picker example with `type="date"`, it can be used as a calendar too. {{"demo": "pages/demos/pickers/DatePickers.js"}} -## Поля выбора даты & времени +## Date & Time pickers -Нативное поля выбора даты и времени с помощью `type="datetime-local"`. +A native date & time picker example with `type="datetime-local"`. {{"demo": "pages/demos/pickers/DateAndTimePickers.js"}} -## Поля выбора времени +## Time pickers -Нативное поле выбора времени с помощью `type="time"`. +A native time picker example with `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/) предоставляет поля ввода даты и времени, в соответствии c Material Design спецификацией. +[material-ui-pickers](https://material-ui-pickers.firebaseapp.com/) provides date and time controls that follow the Material Design spec. {{"demo": "pages/demos/pickers/MaterialUIPickers.js"}} -### Прочее +### Other -- [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 +- [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 diff --git a/docs/src/pages/demos/pickers/pickers-zh.md b/docs/src/pages/demos/pickers/pickers-zh.md index cab01c61260f72..cf75ac29db4551 100644 --- a/docs/src/pages/demos/pickers/pickers-zh.md +++ b/docs/src/pages/demos/pickers/pickers-zh.md @@ -1,5 +1,5 @@ --- -title: 日期选择器，时间选择器反应组件 +title: Date Picker, Time Picker React components components: TextField --- # 选择器 @@ -13,7 +13,7 @@ components: TextField 我们回归到 **原生输入控件**。 -⚠️ 浏览器原生输入控件[并不完美](https://caniuse.com/#feat=input-datetime)。 看看 [补充项目](#complementary-projects) 以获得更丰富的解决方案。 +⚠️ 浏览器原生输入控件[并不完美](https://caniuse.com/#feat=input-datetime)。 Have a look at the [complementary projects](#complementary-projects) for richer solutions. ## 日期选择器 diff --git a/docs/src/pages/demos/progress/progress-de.md b/docs/src/pages/demos/progress/progress-de.md index 3324bc4f735e1d..8a717471c6d75b 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. -⚠️ Auch wenn die material design Spezifikation zur Verwendung von Themes ermutigt, liegen diese Beispiele außerhalb der üblichen Pfade. +⚠️ While the material design specification encourages theming, these examples are off the beaten path. {{"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 0109e2aef68a0a..8a717471c6d75b 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. -⚠️ A pesar de que la especificación de material design anima a usar temas, estos ejemplos no son comunes. +⚠️ While the material design specification encourages theming, these examples are off the beaten path. {{"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 b2d813b0aaec92..26a211ae7bbdfc 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 -

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

+

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

[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 Material Design encouragent la thématisation, ces exemples sortent des sentiers battus. +⚠️ Bien que les spécifications de conception des matériaux encouragent la thématisation, ces exemples sortent des sentiers battus. {{"demo": "pages/demos/progress/CustomizedProgress.js"}} -## Retarder l'apparition +## Delaying appearance -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. +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. {{"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) -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 +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 {{"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 da8515f1054c9f..8a717471c6d75b 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 24c7e3f8989bb7..24fe4d651b7fb0 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. -⚠️ Auch wenn die material design Spezifikation zur Verwendung von Themes ermutigt, liegen diese Beispiele außerhalb der üblichen Pfade. +⚠️ While the material design specification encourages theming, these examples are off the beaten path. {{"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 f8af5c4391883c..24fe4d651b7fb0 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. -⚠️ A pesar de que la especificación de material design anima a usar temas, estos ejemplos no son comunes. +⚠️ While the material design specification encourages theming, these examples are off the beaten path. {{"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 31019cfc7e8c20..cbb096d1d30626 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 --- -# Contrôles de sélection +# Selection Controls -

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

+

Selection controls allow the user to select 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"}} -## Cases à cocher +## Checkboxes [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"}} -## Cases à cocher avec FormGroup +## Checkboxes with 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 Material Design encouragent la thématisation, ces exemples sortent des sentiers battus. +⚠️ Bien que les spécifications de conception des matériaux 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"}} -## Accessibilité +## Accessibility All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the `