diff --git a/docs/pages/components/hidden.js b/docs/pages/components/hidden.js deleted file mode 100644 index 260edf0c2013ed..00000000000000 --- a/docs/pages/components/hidden.js +++ /dev/null @@ -1,20 +0,0 @@ -import * as React from 'react'; -import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs'; -import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown'; - -const pageFilename = 'components/hidden'; -const requireDemo = require.context('docs/src/pages/components/hidden', false, /\.(js|tsx)$/); -const requireRaw = require.context( - '!raw-loader!../../src/pages/components/hidden', - false, - /\.(js|md|tsx)$/, -); - -export default function Page({ demos, docs }) { - return ; -} - -Page.getInitialProps = () => { - const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw }); - return { demos, docs }; -}; diff --git a/docs/src/modules/branding/ComparisonTable.tsx b/docs/src/modules/branding/ComparisonTable.tsx index c0dd4a2ad9ce45..8f106e9053cecd 100644 --- a/docs/src/modules/branding/ComparisonTable.tsx +++ b/docs/src/modules/branding/ComparisonTable.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import { experimentalStyled as styled, alpha } from '@material-ui/core/styles'; +import { experimentalStyled as styled, alpha, useTheme } from '@material-ui/core/styles'; +import useMediaQuery from '@material-ui/core/useMediaQuery'; import Table from '@material-ui/core/Table'; import Box from '@material-ui/core/Box'; import TableBody from '@material-ui/core/TableBody'; @@ -10,7 +11,6 @@ import Button from '@material-ui/core/Button'; import Link from 'docs/src/modules/components/Link'; import Typography from '@material-ui/core/Typography'; import NavigateNextIcon from '@material-ui/icons/NavigateNext'; -import Hidden from '@material-ui/core/Hidden'; import Grid from '@material-ui/core/Grid'; import CheckIcon from 'docs/src/modules/branding/icons/Check'; import CloseIcon from 'docs/src/modules/branding/icons/Close'; @@ -301,42 +301,39 @@ const rows = [ variant="body3" sx={{ color: 'grey87' }} />, - - - , - - - , - - - , + , + , + , ), ]; @@ -355,9 +352,12 @@ const tableHeader = [ ]; export default function ComparisonTable() { + const theme = useTheme(); + const isSmUp = useMediaQuery(theme.breakpoints.up('sm')); + return ( - + {isSmUp ? null : ( {tableHeader.map((header) => ( @@ -368,7 +368,7 @@ export default function ComparisonTable() { ))} - + )} diff --git a/docs/src/modules/components/AppNavDrawer.js b/docs/src/modules/components/AppNavDrawer.js index 630c41d3dd9d4e..aab2ceff381113 100644 --- a/docs/src/modules/components/AppNavDrawer.js +++ b/docs/src/modules/components/AppNavDrawer.js @@ -6,7 +6,6 @@ import List from '@material-ui/core/List'; import Drawer from '@material-ui/core/Drawer'; import SwipeableDrawer from '@material-ui/core/SwipeableDrawer'; import Divider from '@material-ui/core/Divider'; -import Hidden from '@material-ui/core/Hidden'; import useMediaQuery from '@material-ui/core/useMediaQuery'; import Box from '@material-ui/core/Box'; import { unstable_useEnhancedEffect as useEnhancedEffect } from '@material-ui/utils'; @@ -207,19 +206,18 @@ function AppNavDrawer(props) { ) : null} {disablePermanent || mobile ? null : ( - - - - {drawer} - - - + + + {drawer} + + )} ); diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.js b/docs/src/pages/components/drawers/ResponsiveDrawer.js index dfb2309e93627a..76e25c21dde7d5 100644 --- a/docs/src/pages/components/drawers/ResponsiveDrawer.js +++ b/docs/src/pages/components/drawers/ResponsiveDrawer.js @@ -4,7 +4,6 @@ import AppBar from '@material-ui/core/AppBar'; import CssBaseline from '@material-ui/core/CssBaseline'; import Divider from '@material-ui/core/Divider'; import Drawer from '@material-ui/core/Drawer'; -import Hidden from '@material-ui/core/Hidden'; import IconButton from '@material-ui/core/IconButton'; import InboxIcon from '@material-ui/icons/MoveToInbox'; import List from '@material-ui/core/List'; @@ -113,33 +112,31 @@ function ResponsiveDrawer(props) {
diff --git a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx index c95db2ae78ed7a..a88aad1ebbe0ff 100644 --- a/docs/src/pages/components/drawers/ResponsiveDrawer.tsx +++ b/docs/src/pages/components/drawers/ResponsiveDrawer.tsx @@ -3,7 +3,6 @@ import AppBar from '@material-ui/core/AppBar'; import CssBaseline from '@material-ui/core/CssBaseline'; import Divider from '@material-ui/core/Divider'; import Drawer from '@material-ui/core/Drawer'; -import Hidden from '@material-ui/core/Hidden'; import IconButton from '@material-ui/core/IconButton'; import InboxIcon from '@material-ui/icons/MoveToInbox'; import List from '@material-ui/core/List'; @@ -120,33 +119,31 @@ export default function ResponsiveDrawer(props: Props) {
diff --git a/docs/src/pages/components/hidden/BreakpointDown.js b/docs/src/pages/components/hidden/BreakpointDown.js deleted file mode 100644 index befbe0fb253517..00000000000000 --- a/docs/src/pages/components/hidden/BreakpointDown.js +++ /dev/null @@ -1,60 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; -import Hidden from '@material-ui/core/Hidden'; -import withWidth from '@material-ui/core/withWidth'; -import Typography from '@material-ui/core/Typography'; - -const useStyles = makeStyles((theme) => ({ - root: { - flexGrow: 1, - }, - container: { - display: 'flex', - flexWrap: 'wrap', - }, - paper: { - padding: theme.spacing(2), - textAlign: 'center', - color: theme.palette.text.secondary, - flex: '1 0 auto', - margin: theme.spacing(1), - }, -})); - -function BreakpointDown(props) { - const classes = useStyles(); - const { width } = props; - - return ( -
- - Current width: {width} - -
- - xsDown - - - smDown - - - mdDown - - - lgDown - - - xlDown - -
-
- ); -} - -BreakpointDown.propTypes = { - width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired, -}; - -export default withWidth()(BreakpointDown); diff --git a/docs/src/pages/components/hidden/BreakpointDown.tsx b/docs/src/pages/components/hidden/BreakpointDown.tsx deleted file mode 100644 index 59156d9896bb27..00000000000000 --- a/docs/src/pages/components/hidden/BreakpointDown.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; -import Hidden from '@material-ui/core/Hidden'; -import withWidth, { WithWidth } from '@material-ui/core/withWidth'; -import Typography from '@material-ui/core/Typography'; - -const useStyles = makeStyles((theme: Theme) => ({ - root: { - flexGrow: 1, - }, - container: { - display: 'flex', - flexWrap: 'wrap', - }, - paper: { - padding: theme.spacing(2), - textAlign: 'center', - color: theme.palette.text.secondary, - flex: '1 0 auto', - margin: theme.spacing(1), - }, -})); - -function BreakpointDown(props: WithWidth) { - const classes = useStyles(); - const { width } = props; - - return ( -
- - Current width: {width} - -
- - xsDown - - - smDown - - - mdDown - - - lgDown - - - xlDown - -
-
- ); -} - -export default withWidth()(BreakpointDown); diff --git a/docs/src/pages/components/hidden/BreakpointOnly.js b/docs/src/pages/components/hidden/BreakpointOnly.js deleted file mode 100644 index b8ebed79dd0174..00000000000000 --- a/docs/src/pages/components/hidden/BreakpointOnly.js +++ /dev/null @@ -1,54 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; -import Hidden from '@material-ui/core/Hidden'; -import withWidth from '@material-ui/core/withWidth'; -import Typography from '@material-ui/core/Typography'; - -const useStyles = makeStyles((theme) => ({ - root: { - flexGrow: 1, - }, - container: { - display: 'flex', - flexWrap: 'wrap', - }, - paper: { - padding: theme.spacing(2), - textAlign: 'center', - color: theme.palette.text.secondary, - flex: '1 0 auto', - margin: theme.spacing(1), - }, -})); - -function BreakpointOnly(props) { - const classes = useStyles(); - const { width } = props; - - return ( -
- - Current width: {width} - -
- - Hidden on lg - - - Hidden on sm - - - Hidden on sm and lg - -
-
- ); -} - -BreakpointOnly.propTypes = { - width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired, -}; - -export default withWidth()(BreakpointOnly); diff --git a/docs/src/pages/components/hidden/BreakpointOnly.tsx b/docs/src/pages/components/hidden/BreakpointOnly.tsx deleted file mode 100644 index c4bb5466874c54..00000000000000 --- a/docs/src/pages/components/hidden/BreakpointOnly.tsx +++ /dev/null @@ -1,49 +0,0 @@ -import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; -import Hidden from '@material-ui/core/Hidden'; -import withWidth, { WithWidth } from '@material-ui/core/withWidth'; -import Typography from '@material-ui/core/Typography'; - -const useStyles = makeStyles((theme: Theme) => ({ - root: { - flexGrow: 1, - }, - container: { - display: 'flex', - flexWrap: 'wrap', - }, - paper: { - padding: theme.spacing(2), - textAlign: 'center', - color: theme.palette.text.secondary, - flex: '1 0 auto', - margin: theme.spacing(1), - }, -})); - -function BreakpointOnly(props: WithWidth) { - const classes = useStyles(); - const { width } = props; - - return ( -
- - Current width: {width} - -
- - Hidden on lg - - - Hidden on sm - - - Hidden on sm and lg - -
-
- ); -} - -export default withWidth()(BreakpointOnly); diff --git a/docs/src/pages/components/hidden/BreakpointUp.js b/docs/src/pages/components/hidden/BreakpointUp.js deleted file mode 100644 index 603bec7311a0c0..00000000000000 --- a/docs/src/pages/components/hidden/BreakpointUp.js +++ /dev/null @@ -1,60 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; -import Hidden from '@material-ui/core/Hidden'; -import withWidth from '@material-ui/core/withWidth'; -import Typography from '@material-ui/core/Typography'; - -const useStyles = makeStyles((theme) => ({ - root: { - flexGrow: 1, - }, - container: { - display: 'flex', - flexWrap: 'wrap', - }, - paper: { - padding: theme.spacing(2), - textAlign: 'center', - color: theme.palette.text.secondary, - flex: '1 0 auto', - margin: theme.spacing(1), - }, -})); - -function BreakpointUp(props) { - const classes = useStyles(); - const { width } = props; - - return ( -
- - Current width: {width} - -
- - xsUp - - - smUp - - - mdUp - - - lgUp - - - xlUp - -
-
- ); -} - -BreakpointUp.propTypes = { - width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired, -}; - -export default withWidth()(BreakpointUp); diff --git a/docs/src/pages/components/hidden/BreakpointUp.tsx b/docs/src/pages/components/hidden/BreakpointUp.tsx deleted file mode 100644 index a31ff2a196f97d..00000000000000 --- a/docs/src/pages/components/hidden/BreakpointUp.tsx +++ /dev/null @@ -1,55 +0,0 @@ -import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; -import Hidden from '@material-ui/core/Hidden'; -import withWidth, { WithWidth } from '@material-ui/core/withWidth'; -import Typography from '@material-ui/core/Typography'; - -const useStyles = makeStyles((theme: Theme) => ({ - root: { - flexGrow: 1, - }, - container: { - display: 'flex', - flexWrap: 'wrap', - }, - paper: { - padding: theme.spacing(2), - textAlign: 'center', - color: theme.palette.text.secondary, - flex: '1 0 auto', - margin: theme.spacing(1), - }, -})); - -function BreakpointUp(props: WithWidth) { - const classes = useStyles(); - const { width } = props; - - return ( -
- - Current width: {width} - -
- - xsUp - - - smUp - - - mdUp - - - lgUp - - - xlUp - -
-
- ); -} - -export default withWidth()(BreakpointUp); diff --git a/docs/src/pages/components/hidden/GridIntegration.js b/docs/src/pages/components/hidden/GridIntegration.js deleted file mode 100644 index f662c17204056c..00000000000000 --- a/docs/src/pages/components/hidden/GridIntegration.js +++ /dev/null @@ -1,65 +0,0 @@ -import * as React from 'react'; -import PropTypes from 'prop-types'; -import { makeStyles } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; -import Grid from '@material-ui/core/Grid'; -import Hidden from '@material-ui/core/Hidden'; -import withWidth from '@material-ui/core/withWidth'; -import Typography from '@material-ui/core/Typography'; - -const useStyles = makeStyles((theme) => ({ - root: { - flexGrow: 1, - }, - paper: { - padding: theme.spacing(2), - textAlign: 'center', - color: theme.palette.text.secondary, - }, -})); - -function GridIntegration(props) { - const classes = useStyles(); - const { width } = props; - - return ( -
- - Current width: {width} - - - - - xsUp - - - - - smUp - - - - - mdUp - - - - - lgUp - - - - - xlUp - - - -
- ); -} - -GridIntegration.propTypes = { - width: PropTypes.oneOf(['lg', 'md', 'sm', 'xl', 'xs']).isRequired, -}; - -export default withWidth()(GridIntegration); diff --git a/docs/src/pages/components/hidden/GridIntegration.tsx b/docs/src/pages/components/hidden/GridIntegration.tsx deleted file mode 100644 index dc325858527121..00000000000000 --- a/docs/src/pages/components/hidden/GridIntegration.tsx +++ /dev/null @@ -1,60 +0,0 @@ -import * as React from 'react'; -import { makeStyles, Theme } from '@material-ui/core/styles'; -import Paper from '@material-ui/core/Paper'; -import Grid from '@material-ui/core/Grid'; -import Hidden from '@material-ui/core/Hidden'; -import withWidth, { WithWidth } from '@material-ui/core/withWidth'; -import Typography from '@material-ui/core/Typography'; - -const useStyles = makeStyles((theme: Theme) => ({ - root: { - flexGrow: 1, - }, - paper: { - padding: theme.spacing(2), - textAlign: 'center', - color: theme.palette.text.secondary, - }, -})); - -function GridIntegration(props: WithWidth) { - const classes = useStyles(); - const { width } = props; - - return ( -
- - Current width: {width} - - - - - xsUp - - - - - smUp - - - - - mdUp - - - - - lgUp - - - - - xlUp - - - -
- ); -} - -export default withWidth()(GridIntegration); diff --git a/docs/src/pages/components/hidden/hidden-de.md b/docs/src/pages/components/hidden/hidden-de.md deleted file mode 100644 index 7c8149d1002d8e..00000000000000 --- a/docs/src/pages/components/hidden/hidden-de.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: React Hidden component -components: Hidden -githubLabel: 'component: Hidden' ---- - -# Hidden - -

Quickly and responsively toggle the visibility value of components and more with the hidden utilities.

- -Alle Elemente sind sichtbar, außer **sie explizit versteckt**. To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with the [`Grid`](/components/grid/) component. - -Die Style-Funktion der [Palette](/system/palette/). - -## So funktioniert es - -Hidden funktioniert mit einem Bereich von Haltepunkten, z. `xsUp` oder `mdDown`, oder einem oder mehreren Haltepunkten, z. `only='sm'` oder `only {['md','xl']}`. Bereiche und individuelle Haltepunkte können gleichzeitig verwendet werden, um ein sehr benutzerdefiniertes Verhalten zu erreichen. Die Bereiche enthalten die angegebenen Haltepunkte. - -```js -innerWidth |xs sm md lg xl - |--------|--------|--------|--------|--------> -width | xs | sm | md | lg | xl - -smUp | show | hide -mdDown | hide | show - -``` - -## Implementierungen - -### js - -Standardmäßig wird die `js` Implementierung verwendet, die den Inhalt basierend auf der [`withWidth()`](/customization/breakpoints/#withwidth)-Komponente höherer Ordnung, die die Bildschirmgröße überwacht, ansprechend versteckt. Dies hat den Vorteil, dass überhaupt kein Inhalt dargestellt wird, wenn der Haltepunkt nicht erreicht wird. - -### css - -Wenn Sie serverseitiges Rendering verwenden, können Sie `implementation="css"` festlegen, wenn der Browser Ihren Inhalt nicht erneut auf dem Bildschirm anzeigen soll. - -## Haltepunkte Up - -Unter Verwendung einer beliebigen Haltepunkte `down` Eigenschaft, werden die angegebenen *Kinder* ausgeblendet *bei oder unter* dem Haltepunkt. - -{{"demo": "pages/components/hidden/BreakpointUp.js", "bg": true}} - -## Haltepunkte Down - -Unter Verwendung der Haltepunkt `only` Eigenschaft, werden die angegebenen *Kinder* *bei* dem Haltepunkt(en) ausgeblendet. - -{{"demo": "pages/components/hidden/BreakpointDown.js", "bg": true}} - -## Haltepunkte einzeln - -Die `only` Eigenschaft kann auf zwei Arten verwendet werden: - -The `only` prop can be used in two ways: - -- Einzelnen Haltepunkt auflisten -- Listen Sie ein Array von Haltepunkten auf - -{{"demo": "pages/components/hidden/BreakpointOnly.js", "bg": true}} - -## Integration mit Grid - -Es ist üblich, das`Grid` an verschiedenen Haltepunkten zu ändern, und in vielen Fällen möchten Sie einige dieser Elemente ausblenden. - -{{"demo": "pages/components/hidden/GridIntegration.js", "bg": true}} diff --git a/docs/src/pages/components/hidden/hidden-es.md b/docs/src/pages/components/hidden/hidden-es.md deleted file mode 100644 index 765a571a6e5819..00000000000000 --- a/docs/src/pages/components/hidden/hidden-es.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: React Hidden component -components: Hidden -githubLabel: 'component: Hidden' ---- - -# Hidden - -

Hidden: Cambia rápida y de manera responsiva el valor de visibilidad de los componentes y más con nuestras utilidades ocultas.

- -Todos los elementos son visibles a menos que **estén explícitamente ocultos**. Para facilitar la integración con [interrupción responsivas](/customization/breakpoints/) de Material-UI, éste componente se puede usar para ocultar cualquier contenido, o puede usarlo junto con el componente [`Grid`](/components/grid/). - -[La función de estilo de la paleta](/system/palette/). - -## Cómo funciona - -Hidden funciona con un rango de puntos de interrupción, por ejemplo, `xsUp` o `mdDown`, o uno o más puntos de interrupción, por ejemplo, `only = 'sm'` o `only = {['md', 'xl']}`. Los rangos y los puntos de interrupción individuales se pueden usar simultáneamente para lograr un comportamiento muy personalizado. Los rangos son inclusivas de los puntos de interrupción. - -```js -innerWidth |xs sm md lg xl - |--------|--------|--------|--------|--------> -width | xs | sm | md | lg | xl - -smUp | show | hide -mdDown | hide | show - -``` - -## Implementación - -### js - -By default, the `js` implementation is used, responsively hiding content based on using the [`withWidth()`](/customization/breakpoints/#withwidth) higher-order component that watches screen size. This has the benefit of not rendering any content at all unless the breakpoint is met. - -### css - -If you are using server-side rendering, you can set `implementation="css"` if you don't want the browser to re-flow your content on the screen. - -## Breakpoint up - -Using any breakpoint `up` property, the given *children* will be hidden *at or above* the breakpoint. - -{{"demo": "pages/components/hidden/BreakpointUp.js", "bg": true}} - -## Breakpoint down - -Using any breakpoint `down` property, the given *children* will be hidden *at or below* the breakpoint. - -{{"demo": "pages/components/hidden/BreakpointDown.js", "bg": true}} - -## Breakpoint only - -The `only` property can be used in two ways: - -The `only` prop can be used in two ways: - -- list a single breakpoint -- list an array of breakpoints - -{{"demo": "pages/components/hidden/BreakpointOnly.js", "bg": true}} - -## Integration with Grid - -It is quite common to alter `Grid` at different responsive breakpoints, and in many cases, you want to hide some of those elements. - -{{"demo": "pages/components/hidden/GridIntegration.js", "bg": true}} diff --git a/docs/src/pages/components/hidden/hidden-fr.md b/docs/src/pages/components/hidden/hidden-fr.md deleted file mode 100644 index fe2d539e224fad..00000000000000 --- a/docs/src/pages/components/hidden/hidden-fr.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: React Hidden component -components: Hidden -githubLabel: 'component: Hidden' ---- - -# Hidden - -

Quickly and responsively toggle the visibility value of components and more with the hidden utilities.

- -Tous les éléments sont visibles à moins **qu'ils soient explicitement cachés**. To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with the [`Grid`](/components/grid/) component. - -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## Comment ça marche - -Hidden works with a range of breakpoints e.g. `xsUp` or `mdDown`, or one or more breakpoints e.g. `only='sm'` or `only={['md', 'xl']}`. Ranges and individual breakpoints can be used simultaneously to achieve very customized behavior. The ranges are inclusive of the specified breakpoints. - -```js -innerWidth |xs sm md lg xl - |--------|--------|--------|--------|--------> -width | xs | sm | md | lg | xl - -smUp | show | hide -mdDown | hide | show - -``` - -## Implementations - -### js - -By default, the `js` implementation is used, responsively hiding content based on using the [`withWidth()`](/customization/breakpoints/#withwidth) higher-order component that watches screen size. This has the benefit of not rendering any content at all unless the breakpoint is met. - -### css - -If you are using server-side rendering, you can set `implementation="css"` if you don't want the browser to re-flow your content on the screen. - -## Breakpoint up - -Using any breakpoint `up` property, the given *children* will be hidden *at or above* the breakpoint. - -{{"demo": "pages/components/hidden/BreakpointUp.js", "bg": true}} - -## Breakpoint down - -Using any breakpoint `down` property, the given *children* will be hidden *at or below* the breakpoint. - -{{"demo": "pages/components/hidden/BreakpointDown.js", "bg": true}} - -## Breakpoint only - -The `only` property can be used in two ways: - -The `only` prop can be used in two ways: - -- list a single breakpoint -- list an array of breakpoints - -{{"demo": "pages/components/hidden/BreakpointOnly.js", "bg": true}} - -## Integration with Grid - -It is quite common to alter `Grid` at different responsive breakpoints, and in many cases, you want to hide some of those elements. - -{{"demo": "pages/components/hidden/GridIntegration.js", "bg": true}} diff --git a/docs/src/pages/components/hidden/hidden-ja.md b/docs/src/pages/components/hidden/hidden-ja.md deleted file mode 100644 index 60c3e38e8c67ce..00000000000000 --- a/docs/src/pages/components/hidden/hidden-ja.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: React Hidden component -components: Hidden -githubLabel: 'component: Hidden' ---- - -# Hidden - -

Quickly and responsively toggle the visibility value of components and more with the hidden utilities.

- -**明示的に非表示にしない限り**、すべての要素が表示されます。 **明示的に非表示にしない限り**、すべての要素が表示されます。 **明示的に非表示にしない限り**、すべての要素が表示されます。 **明示的に非表示にしない限り**、すべての要素が表示されます。 To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), this component can be used to hide any content, or you can use it in conjunction with the [`Grid`](/components/grid/) component. - -[The palette](/system/palette/) style関数。 - -## 仕組み - -Hiddenは、`xsUp`または`mdDown` などのブレークポイントの範囲、 `{['sm','md','xl']}`などのブレークポイントで機能します。 範囲と個々のブレークポイントを同時に使用して、非常にカスタマイズされた動作を実現できます。 範囲には、指定したブレークポイントが含まれます。 - -```js -innerWidth |xs sm md lg xl - |--------|--------|--------|--------|--------> -width | xs | sm | md | lg | xl - -smUp | show | hide -mdDown | hide | show - -``` - -## 実装 - -### js - -デフォルトでは、`js`実装が使用され、画面サイズを監視する [`withWidth()`](/customization/breakpoints/#withwidth)高次コンポーネントの使用に基づいて、応答的にコンテンツが非表示にされます これには、ブレークポイントに到達しない限りコンテンツをまったくレンダリングしないという利点があります。 - -### css - -サーバ側レンダリングを使用している場合、ブラウザで画面上のコンテンツを再フローしないようにするには、`implementation="css"`と設定します。 - -## ブレイクポイント - -ブレークポイントの`down`プロパティを使用すると、指定した*children*がブレークポイントの位置またはその上*at or below*になります。 - -{{"demo": "pages/components/hidden/BreakpointUp.js", "bg": true}} - -## ブレイクポイント - -ブレークポイントの `only`プロパティを使用すると、指定した*children*がブレークポイントの位置またはその上*at*>になります。 - -{{"demo": "pages/components/hidden/BreakpointDown.js", "bg": true}} - -## ブレークポイントのみ - -`only` プロパティは、次の2つの方法で使用できます。 - -The `only` prop can be used in two ways: - -- 単一のブレークポイントをリストする -- ブレークポイントの配列をリストします - -{{"demo": "pages/components/hidden/BreakpointOnly.js", "bg": true}} - -## グリッドとの統合 - -さまざまな応答ブレークポイントで`Grid` を変更することはよくあり、多くの場合、これらの要素の一部を非表示にする必要があります。 - -{{"demo": "pages/components/hidden/GridIntegration.js", "bg": true}} diff --git a/docs/src/pages/components/hidden/hidden-pt.md b/docs/src/pages/components/hidden/hidden-pt.md deleted file mode 100644 index 38d8dc414ac1cd..00000000000000 --- a/docs/src/pages/components/hidden/hidden-pt.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Componente React Hidden -components: Hidden -githubLabel: 'component: Hidden' ---- - -# Hidden - -

Modifique rapidamente e de forma responsiva a visibilidade dos componentes e faça muito mais com o utilitário hidden.

- -Todos os elementos são visíveis a menos que **estejam explicitamente ocultos**. Para facilitar a integração com [pontos de quebra responsivos](/customization/breakpoints/) do Material-UI, este componente pode ser utilizado para ocultar qualquer conteúdo, ou você pode usa-lo de forma conjunta com um componente [`Grid`](/components/grid/). - -[A paleta](/system/palette/) com funções de estilo. - -## Como funciona - -Hidden trabalha com um intervalo de pontos de quebra, por exemplo, `xsUp` ou `mdDown`, ou com um ou mais pontos de quebra, por exemplo, `only='sm'` ou `only={['md', 'xl']}`. Intervalos e pontos de quebra individuais podem ser usados simultaneamente para obter um comportamento muito mais customizado. Os intervalos são inclusivos com os pontos de quebra especificados. - -```js -innerWidth |xs sm md lg xl - |--------|--------|--------|--------|--------> -width | xs | sm | md | lg | xl - -smUp | show | hide -mdDown | hide | show - -``` - -## Implementações - -### js - -Por padrão, a implementação `js` é usada, responsivamente oculta o conteúdo baseando-se no uso de [`withWidth()`](/customization/breakpoints/#withwidth), componente de ordem elevada (higher-order) que observa o tamanho da tela. Isso tem o benefício de não renderizar nenhum conteúdo, a menos que o ponto de quebra seja atingido. - -### css - -Se você estiver usando a renderização do lado do servidor, poderá definir `implementation="css"` se não quer que o navegador reprocesse seu conteúdo na tela. - -## Ponto de quebra acima - -Usando qualquer propriedade de ponto de quebra com `down`, o componente *children* será ocultado *em ou abaixo* do ponto de quebra. - -{{"demo": "pages/components/hidden/BreakpointUp.js", "bg": true}} - -## Ponto de quebra abaixo - -Usando a propriedade de ponto de quebra `only`, o componente *children* será ocultado *no(s) ponto(s) de quebra* especificado(s). - -{{"demo": "pages/components/hidden/BreakpointDown.js", "bg": true}} - -## Ponto de quebra somente - -A propriedade `only` pode ser usada de duas maneiras: - -A propriedade `only` pode ser usada de duas maneiras: - -- com um único ponto de quebra -- com um array de pontos de quebra - -{{"demo": "pages/components/hidden/BreakpointOnly.js", "bg": true}} - -## Integração com Grade - -É bastante comum alterar um `Grid` em pontos de quebra responsivos diferentes e, em muitos casos, você deseja ocultar alguns desses elementos. - -{{"demo": "pages/components/hidden/GridIntegration.js", "bg": true}} diff --git a/docs/src/pages/components/hidden/hidden-ru.md b/docs/src/pages/components/hidden/hidden-ru.md deleted file mode 100644 index 9ba0977425116b..00000000000000 --- a/docs/src/pages/components/hidden/hidden-ru.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: Компонент React Hidden -components: Hidden -githubLabel: 'component: Hidden' ---- - -# Hidden - -

Быстро и адаптивно изменяйте видимость компонент и многое другое с помощью наших утилит управления видимостью.

- -Все элементы видны, если **они явно не скрыты**. Чтобы упростить интеграцию с [ точками остановки](/customization/breakpoints/) Material-UI, этот компонент можно использовать для скрытия любого контента, или использовать его в сочетании с нашим компонентом [`Grid`](/components/grid/). - -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## Как это работает - -Скрытие работает с диапазоном точек остановки, например, `xsUp` или `mdDown`, или использует одну или несколько точек остановки, например, `only='sm'` или `only={['md', 'xl']}`. Диапазоны и отдельные точки остановки могут использоваться одновременно для достижения индивидуального поведения. Диапазоны включают указанные точки остановки. - -```js -innerWidth |xs sm md lg xl - |--------|--------|--------|--------|--------> -width | xs | sm | md | lg | xl - -smUp | show | hide -mdDown | hide | show - -``` - -## Реализации - -### js - -По умолчанию используется реализация `js`, которая быстро скрывает контент, используя компонент высшего порядка [`withWidth()`](/customization/breakpoints/#withwidth), который следит за размером экрана. Преимущество этого заключается в том, что контент вообще не отображается, если не достигнута точка остановки. - -### css - -Если вы используете рендеринг на стороне сервера, вы можете установить `implementation="css"`, если вы не хотите, чтобы браузер повторно выводил ваш контент на экран. - -## Точка остановки Вверх (up) - -Используя любое свойство точки остановки от `down`, данные *дочерних элементов* будут скрыты *на уровне или ниже* точки остановки. - -{{"demo": "pages/components/hidden/BreakpointUp.js", "bg": true}} - -## Точка остановки Вниз - -Используя свойство точки остановки `only`, данные *дочерних элементов* будут скрыты *на* указанной точке (точках) остановки. - -{{"demo": "pages/components/hidden/BreakpointDown.js", "bg": true}} - -## Точка остановки Только (only) - -Свойство `only` можно использовать двумя способами: - -The `only` prop can be used in two ways: - -- указать одну точку остановки -- перечислить массив точек остановки - -{{"demo": "pages/components/hidden/BreakpointOnly.js", "bg": true}} - -## Интеграция с Grid (Сеткой) - -Весьма обычным является изменение `Grid` в разных точках остановки, и во многих случаях вы хотите скрыть некоторые из этих элементов. - -{{"demo": "pages/components/hidden/GridIntegration.js", "bg": true}} diff --git a/docs/src/pages/components/hidden/hidden-zh.md b/docs/src/pages/components/hidden/hidden-zh.md deleted file mode 100644 index 7762af4c36d80a..00000000000000 --- a/docs/src/pages/components/hidden/hidden-zh.md +++ /dev/null @@ -1,66 +0,0 @@ ---- -title: React Hidden（隐藏）组件 -components: Hidden -githubLabel: 'component: Hidden' ---- - -# Hidden 隐藏组件 - -

您可以使用隐藏组件来实现快速并响应式地控制元素的显隐。

- -除非**明确指定是隐藏的**，否则所有元素默认都是可见的。 为了简化与 [响应式断点](/customization/breakpoints/) 的集成，此组件可用于隐藏任何内容，或者您可以将它与我们的 [`栅格（Grid）`](/components/grid/) 组件结合使用。 - -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## 工作原理 - -通常我们将隐藏组件和一系列 breakpoint（断点）放在一起使用。例如 `xsUp` 或 `mdDown`，或一个或多个断点，例如 `only='sm'` 或 `only={['md', 'xl']}`。 可以同时使用范围（Ranges）和单独的断点（breakpoints）来实现极其定制的行为。 范围包括指定的断点。 - -```js -innerWidth |xs sm md lg xl - |--------|--------|--------|--------|--------> -width | xs | sm | md | lg | xl - -smUp | show | hide -mdDown | hide | show - -``` - -## 实现 - -### js - -默认情况下，使用 `js` 实现，响应性的隐藏内容基于 [`withWidth()`](/customization/breakpoints/#withwidth) 这个高阶组件所观察到的屏幕大小。 这样的好处是，除非达到断点，否则根本不会呈现任何内容。 - -### css - -如果您正在使用服务器端渲染，如果您不希望浏览器在屏幕上重新过一遍您的内容，则可以设置 `implementation="css"` 。 - -## 断点之上（Breakpoint up） - -使用任何断点的 `up` 属性，所给定的_子代_将在断点处或其之上_隐藏_。 - -{{"demo": "pages/components/hidden/BreakpointUp.js", "bg": true}} - -## 断点之下（Breakpoint down） - -使用任何断点的 `down` 属性，所给定的_子代_将在断点_处或其之下_隐藏。 - -{{"demo": "pages/components/hidden/BreakpointDown.js", "bg": true}} - -## 仅限断点 - -当使用断点 `only` 属性，给定的_子元素_将在 _在_ 指定的断点（们）被隐藏。 - -`only` 属性可以通过以下两种方式来调用： - -- 列出单独一个断点 -- 列出一个断点数组 - -{{"demo": "pages/components/hidden/BreakpointOnly.js", "bg": true}} - -## 与栅格（Grid）整合 - -在不同的响应断点处更改 `Grid` 是很常见的，并且在许多情况下，您会希望隐藏其中一些元素。 - -{{"demo": "pages/components/hidden/GridIntegration.js", "bg": true}} diff --git a/docs/src/pages/components/hidden/hidden.md b/docs/src/pages/components/hidden/hidden.md deleted file mode 100644 index 6c82137706a133..00000000000000 --- a/docs/src/pages/components/hidden/hidden.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: React Hidden component -components: Hidden -githubLabel: 'component: Hidden' ---- - -# Hidden - -

Quickly and responsively toggle the visibility value of components and more with the hidden utilities.

- -All elements are visible unless **they are explicitly hidden**. -To ease integration with Material-UI's [responsive breakpoints](/customization/breakpoints/), -this component can be used to hide any content, -or you can use it in conjunction with the [`Grid`](/components/grid/) component. - -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## How it works - -Hidden works with a range of breakpoints e.g. `xsUp` or `mdDown`, or one or more breakpoints e.g. `only='sm'` or `only={['md', 'xl']}`. -Ranges and individual breakpoints can be used simultaneously to achieve very customized behavior. -The ranges are inclusive of the specified breakpoints. - -```js -innerWidth |xs sm md lg xl - |--------|--------|--------|--------|--------> -width | xs | sm | md | lg | xl - -smUp | show | hide -mdDown | hide | show - -``` - -## Implementations - -### js - -By default, the `js` implementation is used, responsively hiding content based on using the [`withWidth()`](/customization/breakpoints/#withwidth) higher-order component that watches screen size. -This has the benefit of not rendering any content at all unless the breakpoint is met. - -### css - -If you are using server-side rendering, you can set `implementation="css"` if you don't want the browser to re-flow your content on the screen. - -## Breakpoint up - -Using any breakpoint `up` prop, the given _children_ will be hidden _at or above_ the breakpoint. - -{{"demo": "pages/components/hidden/BreakpointUp.js", "bg": true}} - -## Breakpoint down - -Using any breakpoint `down` prop, the given _children_ will be hidden _at or below_ the breakpoint. - -{{"demo": "pages/components/hidden/BreakpointDown.js", "bg": true}} - -## Breakpoint only - -Using the breakpoint `only` prop, the given _children_ will be hidden _at_ the specified breakpoint(s). - -The `only` prop can be used in two ways: - -- list a single breakpoint -- list an array of breakpoints - -{{"demo": "pages/components/hidden/BreakpointOnly.js", "bg": true}} - -## Integration with Grid - -It is quite common to alter `Grid` at different responsive breakpoints, and in many cases, you want to hide some of those elements. - -{{"demo": "pages/components/hidden/GridIntegration.js", "bg": true}} diff --git a/docs/src/pages/components/use-media-query/use-media-query.md b/docs/src/pages/components/use-media-query/use-media-query.md index 60b4bd3dde5809..5a366466b3ef5a 100644 --- a/docs/src/pages/components/use-media-query/use-media-query.md +++ b/docs/src/pages/components/use-media-query/use-media-query.md @@ -125,7 +125,7 @@ For instance, you could use: - [``](/system/display/#hiding-elements) - [`themes.breakpoints.up(x)`](/customization/breakpoints/#css-media-queries) -- or [``](/components/hidden/#css) +- or [`xs prop`](/system/basics/#heading-the-sx-prop) If none of the above alternatives are an option, you can proceed reading this section of the documentation. diff --git a/docs/src/pages/getting-started/templates/blog/FeaturedPost.js b/docs/src/pages/getting-started/templates/blog/FeaturedPost.js index 421e82d19a8f10..c2ae3c080b8372 100644 --- a/docs/src/pages/getting-started/templates/blog/FeaturedPost.js +++ b/docs/src/pages/getting-started/templates/blog/FeaturedPost.js @@ -6,7 +6,6 @@ import Card from '@material-ui/core/Card'; import CardActionArea from '@material-ui/core/CardActionArea'; import CardContent from '@material-ui/core/CardContent'; import CardMedia from '@material-ui/core/CardMedia'; -import Hidden from '@material-ui/core/Hidden'; function FeaturedPost(props) { const { post } = props; @@ -29,13 +28,11 @@ function FeaturedPost(props) { Continue reading... - - - + diff --git a/docs/src/pages/getting-started/templates/blog/FeaturedPost.tsx b/docs/src/pages/getting-started/templates/blog/FeaturedPost.tsx index 76c7a35a1accc0..440916fffb5370 100644 --- a/docs/src/pages/getting-started/templates/blog/FeaturedPost.tsx +++ b/docs/src/pages/getting-started/templates/blog/FeaturedPost.tsx @@ -5,7 +5,6 @@ import Card from '@material-ui/core/Card'; import CardActionArea from '@material-ui/core/CardActionArea'; import CardContent from '@material-ui/core/CardContent'; import CardMedia from '@material-ui/core/CardMedia'; -import Hidden from '@material-ui/core/Hidden'; interface FeaturedPostProps { post: { @@ -38,13 +37,11 @@ export default function FeaturedPost(props: FeaturedPostProps) { Continue reading... - - - + diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index f866ba4c7cd891..ee2eeb47dabe45 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -860,6 +860,27 @@ As the core components use emotion as a styled engine, the props used by emotion + ``` +### Hidden + +- This component was removed because its functionality can be created with the [`sx`](/system/basics/#the-sx-prop) prop or the [`useMediaQuery`](/components/use-media-query) hook. + + Use the `sx` prop to replace `implementation="css"`: + + ```diff + - + -
- - -
- call to action - + +
+ call to action
- - -
- call to action - + +
+ call to action