The Portal component lets you render its children into a DOM node that exists outside of its own DOM hierarchy.
+The Portal component lets you render its children into a DOM node that exists outside of the Portal's own DOM hierarchy.
## Introduction @@ -45,7 +45,7 @@ According to [the React docs](https://reactjs.org/docs/portals.html), portals ar The Portal component accepts a `container` prop that passes a `ref` to the DOM node where its children will be mounted. -The following demo shows how a `` nested within a Portal can be appended to a node outside of its own DOM hierarchy—click **Mount children** to see how it behaves: +The following demo shows how a `` nested within a Portal can be appended to a node outside of the Portal's DOM hierarchy—click **Mount children** to see how it behaves: {{"demo": "SimplePortal.js"}} diff --git a/docs/data/material/components/click-away-listener/click-away-listener-pt.md b/docs/data/material/components/click-away-listener/click-away-listener-pt.md deleted file mode 100644 index 7f11e8db00b1f7..00000000000000 --- a/docs/data/material/components/click-away-listener/click-away-listener-pt.md +++ /dev/null @@ -1,65 +0,0 @@ ---- -product: material-ui -title: Componente React para Detectar clique fora -components: ClickAwayListener -githubLabel: 'component: ClickAwayListener' ---- - -# Click-away listener - -Detecta se um evento de clique ocorreu fora de um elemento. Ele ouve cliques que ocorrem em algum lugar no documento.
- -- 📦 [992 B gzipped](/size-snapshot/). -- ⚛️ Supports portals - -[A paleta](/system/palette/) com funções de estilo. - -## Exemplo - -Por exemplo, se você precisar ocultar um menu quando as pessoas clicarem em qualquer outro lugar da sua página: - -{{"demo": "ClickAway.js"}} - -Observe que o componente aceita apenas um elemento filho. You can find a more advanced demo on the [Menu documentation section](/material-ui/react-menu/#menulist-composition). - -## Portal - -The following demo uses [`Portal`](/material-ui/react-portal/) to render the dropdown into a new "subtree" outside of current DOM hierarchy. - -{{"demo": "PortalClickAway.js"}} - -## Eventos - -Por padrão, o componente responde aos eventos de clique e de toque final (click + touch end). No entanto, você pode configurá-lo para responder aos eventos de mouse pressionado e toque inicial (mouse down + touch start). - -{{"demo": "LeadingClickAway.js"}} - -:::warning -⚠️ In this mode, only interactions on the scrollbar of the document is ignored. -::: - -## Accessibility - -By default `用于检测点击事件是否发生在元素之外。 它可以监听文档中某处发生的点击事件。
- -- 📦 [992 B gzipped](/size-snapshot/). -- ⚛️ Supports portals - -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## 示例 - -例如，当用户在点击页面除菜单外的任何一处，您可能想隐藏一个下拉的菜单： - -{{"demo": "ClickAway.js"}} - -请注意，该组件仅接受一个子元素。 You can find a more advanced demo on the [Menu documentation section](/material-ui/react-menu/#menulist-composition). - -## Portal（传送门） - -The following demo uses [`Portal`](/material-ui/react-portal/) to render the dropdown into a new "subtree" outside of current DOM hierarchy. - -{{"demo": "PortalClickAway.js"}} - -## 前端（Leading edge） - -默认情况下，组件响应了尾随事件（trailing events）（点击 + 触摸结束）。 然而，您可以配置它来回应一些主要的事件（leading events）（鼠标按下 + 触摸开始）。 - -{{"demo": "LeadingClickAway.js"}} - -:::warning -⚠️ In this mode, only interactions on the scrollbar of the document is ignored. -::: - -## 无障碍设计 - -By default `The ClickAwayListener component detects when a click event happens outside of its child element.
+The Click-Away Listener component detects when a click event happens outside of its child element.
-- 📦 [992 B gzipped](/size-snapshot/). -- ⚛️ Supports portals +## MUI Base -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +:::info +Click-Away Listener is a part of the standalone [MUI Base](/base/getting-started/overview/) component library. +It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release. -## Example - -For instance, if you need to hide a menu dropdown when people click anywhere else on your page: - -{{"demo": "ClickAway.js"}} - -Notice that the component only accepts one child element. -You can find a more advanced demo on the [Menu documentation section](/material-ui/react-menu/#menulist-composition). - -## Portal - -The following demo uses [`Portal`](/material-ui/react-portal/) to render the dropdown into a new "subtree" outside of current DOM hierarchy. - -{{"demo": "PortalClickAway.js"}} - -## Leading edge - -By default, the component responds to the trailing events (click + touch end). -However, you can configure it to respond to the leading events (mouse down + touch start). - -{{"demo": "LeadingClickAway.js"}} - -:::warning -⚠️ In this mode, only interactions on the scrollbar of the document is ignored. +Please refer to the [Click-Away Listener](/base/react-click-away-listener/) component page in the MUI Base docs for examples and details on usage. ::: - -## Accessibility - -By default `O NoSsr remove intencionalmente componentes do contexto de Server Side Rendering (SSR).
- -Esse componente pode ser útil em várias situações: - -- Válvula de escape para dependências quebradas que não suportam SSR. -- Melhorar o tempo para a primeira pintura no cliente renderizando somente a primeira parte da página (above the fold). -- Reduzir o tempo de renderização no servidor. -- Sob carga de servidor muito pesada, você pode ativar a degradação do serviço. -- Melhorar o tempo de interação apenas renderizando o que é importante (com a propriedade `defer`). - -[A paleta](/system/palette/) com funções de estilo. - -## Client-side deferring - -{{"demo": "SimpleNoSsr.js"}} - -## Adiamento de quadros - -Em sua essência, o objetivo do componente NoSsr é **adiar a renderização**. Como está ilustrado na demonstração anterior, você pode usá-lo para adiar a renderização do servidor para o cliente. - -Mas você também pode usá-lo para adiar a renderização dentro do próprio cliente. Você pode **aguardar um quadro de tela** com a propriedade `defer` para renderizar o children. React faz [2 commits](https://pt-br.reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) em vez de 1. - -{{"demo": "FrameDeferring.js"}} - -## Unstyled - -- 📦 [362 B gzipped](https://bundlephobia.com/package/@mui/base@latest) - -As the component does not have any styles, it also comes with the Base package. - -```js -import NoSsr from '@mui/base/NoSsr'; -``` diff --git a/docs/data/material/components/no-ssr/no-ssr-zh.md b/docs/data/material/components/no-ssr/no-ssr-zh.md deleted file mode 100644 index e017ea8786d7d6..00000000000000 --- a/docs/data/material/components/no-ssr/no-ssr-zh.md +++ /dev/null @@ -1,41 +0,0 @@ ---- -product: material-ui -title: React No SSR（非服务端渲染）的组件 -components: NoSsr ---- - -# 非服务端渲染（SSR） - -NoSsr 的目的是从服务器端渲染（SSR）里删除组件。
- -该组件可用于各种情况： - -- 对于不支持服务端渲染的依赖包实施补救。 -- 通过仅在首屏上呈现，来改善客户端上的首次绘制时间。 -- 减少服务器上的渲染时间。 -- 在过重的服务器负载下，您可以打开服务降级。 -- 通过仅渲染重要的内容（使用 `defer` 属性），从而来改善交互时间。 - -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## Client-side deferring - -{{"demo": "SimpleNoSsr.js"}} - -## 延迟帧数 - -在其核心中，NoSr 组件的目的是 **推迟渲染**。 正如在前一个演示中所展示的那样，您可以使用它来将推迟从服务器到客户端的渲染。 - -但你也可以使用它来推迟客户端自身的渲染。 您可以使用 `defer` 属性来**等待一个屏幕帧**后，再渲染子组件。 React 会做 [2 次提交](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) 而不是 1 次。 - -{{"demo": "FrameDeferring.js"}} - -## Unstyled - -- 📦 [362 B gzipped](https://bundlephobia.com/package/@mui/base@latest) - -As the component does not have any styles, it also comes with the Base package. - -```js -import NoSsr from '@mui/base/NoSsr'; -``` diff --git a/docs/data/material/components/no-ssr/no-ssr.md b/docs/data/material/components/no-ssr/no-ssr.md index 8a26c7f5d44b98..e2df0fc310f65a 100644 --- a/docs/data/material/components/no-ssr/no-ssr.md +++ b/docs/data/material/components/no-ssr/no-ssr.md @@ -6,39 +6,13 @@ components: NoSsr # No SSR -NoSsr purposely removes components from the subject of Server Side Rendering (SSR).
+The No-SSR component defers the rendering of children components from the server to the client.
-This component can be useful in a variety of situations: +## MUI Base -- Escape hatch for broken dependencies not supporting SSR. -- Improve the time-to-first paint on the client by only rendering above the fold. -- Reduce the rendering time on the server. -- Under too heavy server load, you can turn on service degradation. -- Improve the time-to-interactive by only rendering what's important (with the `defer` property). +:::info +No-SSR is a part of the standalone [MUI Base](/base/getting-started/overview/) component library. +It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release. -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## Client-side deferring - -{{"demo": "SimpleNoSsr.js"}} - -## Frame deferring - -At its core, the NoSsr component's purpose is to **defer rendering**. -As it's illustrated in the previous demo, you can use it to defer the rendering from the server to the client. - -But you can also use it to defer the rendering within the client itself. -You can **wait a screen frame** with the `defer` property to render the children. -React does [2 commits](https://reactjs.org/docs/strict-mode.html#detecting-unexpected-side-effects) instead of 1. - -{{"demo": "FrameDeferring.js"}} - -## Unstyled - -- 📦 [362 B gzipped](https://bundlephobia.com/package/@mui/base@latest) - -As the component does not have any styles, it also comes with the Base package. - -```js -import NoSsr from '@mui/base/NoSsr'; -``` +Please refer to the [No-SSR](/base/react-no-ssr/) component page in the MUI Base docs for examples and details on usage. +::: diff --git a/docs/data/material/components/portal/portal-pt.md b/docs/data/material/components/portal/portal-pt.md deleted file mode 100644 index 8afe5ccf2d48a3..00000000000000 --- a/docs/data/material/components/portal/portal-pt.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -product: material-ui -title: Componente React Portal -components: Portal -githubLabel: 'component: Portal' ---- - -# Portal - -O componente portal renderiza seus elementos filho em uma nova "subárvore" fora da hierarquia do DOM atual.
- -O filho do componente portal será adicionado ao `container` especificado. The component is used internally by the [`Modal`](/material-ui/react-modal/) and [`Popper`](/material-ui/react-popper/) components. - -[A paleta](/system/palette/) com funções de estilo. - -## Exemplo - -{{"demo": "SimplePortal.js"}} - -## Do lado do servidor - -React [não suporta](https://github.com/facebook/react/issues/13097) a API [`createPortal()`](https://pt-br.reactjs.org/docs/portals.html) no servidor. Você deve esperar pelo lado do cliente fazer a hidratação para ver o filho. - -## Unstyled - -- 📦 [970 B gzipped](https://bundlephobia.com/package/@mui/base@latest) - -As the component does not have any styles, it also comes with the Base package. - -```js -import Portal from '@mui/base/Portal'; -``` diff --git a/docs/data/material/components/portal/portal-zh.md b/docs/data/material/components/portal/portal-zh.md deleted file mode 100644 index edf799fcc65f8a..00000000000000 --- a/docs/data/material/components/portal/portal-zh.md +++ /dev/null @@ -1,32 +0,0 @@ ---- -product: material-ui -title: React Portal（传送门）组件 -components: Portal -githubLabel: 'component: Portal' ---- - -# Portal - -传送门组件将其子节点渲染到当前 DOM 结构之外的新 "子类树" 当中。
- -传送门组件的子节点将被添加到指定的 `container` 中。 The component is used internally by the [`Modal`](/material-ui/react-modal/) and [`Popper`](/material-ui/react-popper/) components. - -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## 示例 - -{{"demo": "SimplePortal.js"}} - -## 服务器端 - -React [不支持](https://github.com/facebook/react/issues/13097)服务端渲染的 [`createPortal()`](https://reactjs.org/docs/portals.html) API。 您必须等到客户端的注水渲染（hydration）之后才能见到子节点。 - -## Unstyled - -- 📦 [970 B gzipped](https://bundlephobia.com/package/@mui/base@latest) - -As the component does not have any styles, it also comes with the Base package. - -```js -import Portal from '@mui/base/Portal'; -``` diff --git a/docs/data/material/components/portal/portal.md b/docs/data/material/components/portal/portal.md index b81d98d761efd3..c0d35e031f3a08 100644 --- a/docs/data/material/components/portal/portal.md +++ b/docs/data/material/components/portal/portal.md @@ -7,28 +7,13 @@ githubLabel: 'component: Portal' # Portal -The portal component renders its children into a new "subtree" outside of current DOM hierarchy.
+The Portal component lets you render its children into a DOM node that exists outside of the Portal's own DOM hierarchy.
-The children of the portal component will be appended to the `container` specified. -The component is used internally by the [`Modal`](/material-ui/react-modal/) and [`Popper`](/material-ui/react-popper/) components. +## MUI Base -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} +:::info +Portal is a part of the standalone [MUI Base](/base/getting-started/overview/) component library. +It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release. -## Example - -{{"demo": "SimplePortal.js"}} - -## Server-side - -React [doesn't support](https://github.com/facebook/react/issues/13097) the [`createPortal()`](https://reactjs.org/docs/portals.html) API on the server. -You have to wait for the client-side hydration to see the children. - -## Unstyled - -- 📦 [970 B gzipped](https://bundlephobia.com/package/@mui/base@latest) - -As the component does not have any styles, it also comes with the Base package. - -```js -import Portal from '@mui/base/Portal'; -``` +Please refer to the [Portal](/base/react-portal/) component page in the MUI Base docs for examples and details on usage. +::: diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize-pt.md b/docs/data/material/components/textarea-autosize/textarea-autosize-pt.md deleted file mode 100644 index 995d2c9c1319ed..00000000000000 --- a/docs/data/material/components/textarea-autosize/textarea-autosize-pt.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -product: material-ui -title: Componente React de texto autoajustável -components: TextareaAutosize -githubLabel: 'component: TextareaAutosize' ---- - -# Texto autoajustável - -Um componente de texto para React que se ajusta conforme o conteúdo.
- -- 📦 [1.5 kB gzipped](/size-snapshot/) - -O componente `TextareaAutosize` ajusta automaticamente a altura do textarea em eventos de teclado e redimensionamento de janela. - -[A paleta](/system/palette/) com funções de estilo. - -## Vazio - -{{"demo": "EmptyTextarea.js"}} - -## Altura mínima - -{{"demo": "MinHeightTextarea.js"}} - -## Altura máxima - -{{"demo": "MaxHeightTextarea.js"}} - -## Base - -The [TextareaAutosize](/base/react-textarea-autosize/) component is defined in the @mui/base package. It is reexported from @mui/material for convenience. In your application you may import it from either package. - -```js -import TextareaAutosize from '@mui/base/TextareaAutosize'; -``` diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize-zh.md b/docs/data/material/components/textarea-autosize/textarea-autosize-zh.md deleted file mode 100644 index a0028676b991c0..00000000000000 --- a/docs/data/material/components/textarea-autosize/textarea-autosize-zh.md +++ /dev/null @@ -1,36 +0,0 @@ ---- -product: material-ui -title: React Textarea Autosize（自适应文本框）组件 -components: TextareaAutosize -githubLabel: 'component: TextareaAutosize' ---- - -# Textarea Autosize 自适应文本框 - -一个自适应内容大小的 React 文本框组件。
- -- 📦 [1.5 kB gzipped](/size-snapshot/) - -当触发键盘和窗口大小事件的时候，`TextareaAutosize` 组件将自动调整的文本框的高度。 - -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## 空白的文本框 - -{{"demo": "EmptyTextarea.js"}} - -## 最小高度 - -{{"demo": "MinHeightTextarea.js"}} - -## 最大高度 - -{{"demo": "MaxHeightTextarea.js"}} - -## Base - -The [TextareaAutosize](/base/react-textarea-autosize/) component is defined in the @mui/base package. It is reexported from @mui/material for convenience. In your application you may import it from either package. - -```js -import TextareaAutosize from '@mui/base/TextareaAutosize'; -``` diff --git a/docs/data/material/components/textarea-autosize/textarea-autosize.md b/docs/data/material/components/textarea-autosize/textarea-autosize.md index eb5d499bb85e25..a4067908fe61af 100644 --- a/docs/data/material/components/textarea-autosize/textarea-autosize.md +++ b/docs/data/material/components/textarea-autosize/textarea-autosize.md @@ -7,32 +7,13 @@ githubLabel: 'component: TextareaAutosize' # Textarea Autosize -A textarea component for React which grows with content.
+The Textarea Autosize component gives you a textarea HTML element that automatically adjusts its height to match the length of the content within.
-- 📦 [1.5 kB gzipped](/size-snapshot/) +## MUI Base -The `TextareaAutosize` component automatically adjust the textarea height on keyboard and window resize events. +:::info +Textarea Autosize is a part of the standalone [MUI Base](/base/getting-started/overview/) component library. +It is currently re-exported from `@mui/material` for your convenience, but it will be removed from this package in a future major version, after `@mui/base` gets a stable release. -{{"component": "modules/components/ComponentLinkHeader.js", "design": false}} - -## Empty - -{{"demo": "EmptyTextarea.js"}} - -## Minimum height - -{{"demo": "MinHeightTextarea.js"}} - -## Maximum height - -{{"demo": "MaxHeightTextarea.js"}} - -## Base - -The [TextareaAutosize](/base/react-textarea-autosize/) component is defined in the @mui/base package. -It is reexported from @mui/material for convenience. -In your application you may import it from either package. - -```js -import TextareaAutosize from '@mui/base/TextareaAutosize'; -``` +Please refer to the [Textarea Autosize](/base/react-textarea-autosize/) component page in the MUI Base docs for examples and details on usage. +:::