Skip to content

Commit

Permalink
[docs] Synchronize translations (#20405)
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari authored Apr 4, 2020
1 parent c191471 commit da7faa3
Show file tree
Hide file tree
Showing 81 changed files with 238 additions and 238 deletions.
2 changes: 1 addition & 1 deletion docs/src/pages/components/alert/alert-zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ components: Alert, AlertTitle

{{"demo": "pages/components/alert/DescriptionAlerts.js"}}

## Actions(行为)
## 行为

一个「提醒」可以有一个行为,例如「关闭」或「撤销」按钮。 它在消息之后,「提醒」结束时被渲染。

Expand Down
30 changes: 15 additions & 15 deletions docs/src/pages/components/app-bar/app-bar-zh.md
Original file line number Diff line number Diff line change
@@ -1,15 +1,15 @@
---
title: React App Bar(应用栏)组件
title: React App Bar 应用栏组件
components: AppBar, Toolbar, Menu
---

# App Bar 应用栏

<p class="description">应用栏用来显示与当前屏幕相关的信息和操作。</p>
<p class="description">应用栏组件展示了与当前屏幕息息相关的信息和操作。</p>

[顶部应用栏](https://material.io/design/components/app-bars-top.html) 提供与当前屏幕相关的内容和操作。 它用于展示品牌、屏幕标题、导航和操作选项。
[顶部应用栏](https://material.io/design/components/app-bars-top.html)则提供与当前屏幕相关的内容和操作。 它可用于展示品牌、屏幕标题、导航和操作选项。

它可以转换为上下文相关的操作栏或直接用作导航栏
它既可以用作于转换为上下文相关的操作栏,又可以直接充当导航栏

## 简单的应用栏

Expand Down Expand Up @@ -37,20 +37,20 @@ components: AppBar, Toolbar, Menu

## 突出模式

一个突出模式的应用栏
一个突出的应用栏

{{"demo": "pages/components/app-bar/ProminentAppBar.js", "bg": true}}

## 底部应用栏

{{"demo": "pages/components/app-bar/BottomAppBar.js", "iframe": true, "maxWidth": 400}}

## 固定放置
## 固定的位置

当您固定放置应用栏时,元素的尺寸不会影响页面的其他部分。 这可能导致您的部分内容被挡在应用程序栏后面而看不见。 下面是3种可能的解决方案:
当渲染一个固定位置的应用栏时,元素的尺寸不会影响页面的其余内容。 这可能导致部分内容会被挡在应用程序栏后面,而无法可见。 下面是3种可能的解决方案:

1. 您可以使用 `position =“ sticky”` 代替 fixed。 ⚠️ IE 11不支持sticky
2. 您可以渲染第二个 `<Toolbar />` 组件:
1. 使用 `position =“ sticky”` 代替 fixed。 ⚠️ IE 11不支持 sticky
2. 可以渲染第二个 `<Toolbar />` 组件:

```jsx
function App() {
Expand All @@ -65,7 +65,7 @@ function App() {
}
```

3. 您可以使用 `theme.mixins.toolbar` CSS:
3. 也可以用 `theme.mixins.toolbar` CSS:

```jsx
const useStyles = makeStyles(theme => ({
Expand All @@ -85,19 +85,19 @@ function App() {
};
```

## 滚动
## Scrolling 滚动

您可以使用 `useScrollTrigger()` 挂钩来回应用户的滚动操作
您可以使用 `useScrollTrigger()` 这个 hook 来相应用户触发的滚动操作

### 隐藏应用栏

当向下滚动时,应用栏将会隐藏,这样一来会留有更多的空间进行阅读。
向下滚动会隐藏应用栏,这样一来会留有更多的空间进行阅读。

{{"demo": "pages/components/app-bar/HideAppBar.js", "iframe": true}}

### 变高的应用栏

The app bar elevates on scroll to communicate that the user is not at the top of the page.
应用栏会在滚动时提升,以表明用户还未到页面的顶部。

{{"demo": "pages/components/app-bar/ElevateAppBar.js", "iframe": true}}

Expand All @@ -119,7 +119,7 @@ The app bar elevates on scroll to communicate that the user is not at the top of

#### 返回结果

`trigger`: Does the scroll position match the criteria?
`trigger`: 此滚动的位置符合要求吗?

#### 例子

Expand Down
42 changes: 21 additions & 21 deletions docs/src/pages/components/autocomplete/autocomplete-pt.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,12 +7,12 @@ components: TextField, Popper, Autocomplete

<p class="description">O autocompletar é uma entrada de texto normal aprimorada por um painel de opções sugeridas.</p>

The widget is useful for setting the value of a single-line textbox in one of two types of scenarios:
Essa ferramenta é útil para configurar os valores de um campo de texto quando em um dos dois cenários abaixo:

1. The value for the textbox must be chosen from a predefined set of allowed values, e.g., a location field must contain a valid location name: [combo box](#combo-box).
2. The textbox may contain any arbitrary value, but it is advantageous to suggest possible values to the user, e.g., a search field may suggest similar or previous searches to save the user time: [free solo](#free-solo).
1. O valor para a caixa de texto deve ser escolhido a partir de um conjunto pré-definido de valores permitidos, por exemplo, um campo de localização deve conter um nome de localização válido: [combo box](#combo-box).
2. A caixa de texto pode conter qualquer valor arbitrário, mas é vantajoso porque pode sugerir possíveis valores para o usuário, por exemplo, um campo de pesquisa que pode sugerir pesquisas anteriores ou semelhantes para economizar o tempo do usuário: [solo livre](#free-solo).

It's meant to be an improved version of the "react-select" and "downshift" packages.
A ideia dessa ferramenta era para ser uma versão melhorada das bibliotecas "react-select" e "downshift".

## Combo box

Expand All @@ -28,39 +28,39 @@ Cada um dos exemplos a seguir demonstra uma funcionalidade do componente Autocom

### Country select

Choose one of the 248 countries.
Escolha um dos 248 países.

{{"demo": "pages/components/autocomplete/CountrySelect.js"}}

## Free solo

Set `freeSolo` to true so the textbox can contain any arbitrary value. The prop is designed to cover the primary use case of a search box with suggestions, e.g. Google search.
Coloque `freeSolo` como true para que o textbox contenha qualquer valor aleatório. Essa prop é focada em cobrir o principal caso de uso que é seria uma caixa de pesquisas com sugestões, e.g. Google search.

However, if you intend to use it for a [combo box](#combo-box) like experience (an enhanced version of a select element) we recommend setting `selectOnFocus` (it helps the user clear the selected value).
Entretanto, se você gostaria de usá-lo para trazer ao usuário a experiência de um [combo box](#combo-box) (equivalente a um select aprimorado) nós recomendamos passar `selectOnFocus` (isso ajuda o usuário limpando o valor selecionado).

{{"demo": "pages/components/autocomplete/FreeSolo.js"}}

### Helper message
### Mensagem de ajuda

Às vezes você quer tornar explícito ao usuário que ele pode adicionar qualquer valor que ele/ela quiser. The following demo adds a last option: `Add "YOUR SEARCH"`.
Às vezes você quer tornar explícito ao usuário que ele pode adicionar qualquer valor que ele/ela quiser. O exemplo a seguir adiciona a última opção: `Adicionar "SUA PESQUISA"`.

{{"demo": "pages/components/autocomplete/FreeSoloCreateOption.js"}}

You could also display a dialog when the user wants to add a new value.
Você pode também exibir um diálogo quando o usuário quiser adicionar um novo valor.

{{"demo": "pages/components/autocomplete/FreeSoloCreateOptionDialog.js"}}

## Grouped
## Agrupamento

{{"demo": "pages/components/autocomplete/Grouped.js"}}

## Disabled options
## Opções desabilitadas

{{"demo": "pages/components/autocomplete/DisabledOptions.js"}}

## `useAutocomplete`

For advanced customization use cases, we expose a `useAutocomplete()` hook. It accepts almost the same options as the Autocomplete component minus all the props related to the rendering of JSX. The Autocomplete component uses this hook internally.
Para casos de customização avançada nós expomos o `useAutocomplete()` hook. Ele aceita quase as mesmas opções do componente Autocompletar exceto todas as props relacionadas a renderização do JSX. O componente Autocompletar usa esse hook internamente.

```jsx
import useAutocomplete from '@material-ui/lab/useAutocomplete';
Expand All @@ -70,33 +70,33 @@ import useAutocomplete from '@material-ui/lab/useAutocomplete';

{{"demo": "pages/components/autocomplete/UseAutocomplete.js", "defaultCodeOpen": false}}

### Customized hook
### Hook customizado

{{"demo": "pages/components/autocomplete/CustomizedHook.js"}}

Head to the [Customized Autocomplete](#customized-autocomplete) section for a customization example with the `Autocomplete` component instead of the hook.
Indo para a seção de [Autocompletar customizado](#customized-autocomplete) vemos um exemplo de customização com o componente `Autocompletar` ao invés do hook.

## Asynchronous requests
## Requisições assíncronas

{{"demo": "pages/components/autocomplete/Asynchronous.js"}}

### Google Maps place
### Lugares com a API do Google Maps

A customized UI for Google Maps Places Autocomplete.
Uma customização de UI para o autocompletar de lugares do Google Maps.

{{"demo": "pages/components/autocomplete/GoogleMaps.js"}}

For this demo, we need to load the [Google Maps JavaScript](https://developers.google.com/maps/documentation/javascript/tutorial) API.
Para esse exemplo, nós precisamos carregar a API de Javascript do [Google Maps](https://developers.google.com/maps/documentation/javascript/tutorial).

> ⚠️ Before you can start using the Google Maps JavaScript API, you must sign up and create a billing account.
> ⚠️ Antes de você começar a usar a API Javascript do Google Maps você precisará estar cadastrado e ter uma conta.
## Múltiplos valores

Também conhecidos como tags, o usuário pode inserir mais de um valor.

{{"demo": "pages/components/autocomplete/Tags.js"}}

### Fixed options
### Opções fixas

In the event that you need to lock certain tag so that they can't be removed in the interface, you can set the chips disabled.

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/autocomplete/autocomplete-zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ A customized UI for Google Maps Places Autocomplete.

> 在你开始使用谷歌地图javascript API之前,你需要创建一个帐户 (用于使用谷歌地图api).
## Multiple values(多重值
## 多重值

这也称为标签,允许用户输入多个值。

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/avatars/avatars-pt.md
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ If there is an error loading the avatar image, the component falls back to an al

{{"demo": "pages/components/avatars/FallbackAvatars.js"}}

## Grouped
## Agrupamento

`AvatarGroup` renders its children as a stack.

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/backdrop/backdrop-ru.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,6 @@ components: Backdrop

<p class="description">Затемнение предназначено для акцентирования внимания пользователя на определенном элементе интерфейса.</p>

The backdrop signals to the user of a state change within the application and can be used for creating loaders, dialogs and more. Проще говоря, затемнение добавляет затемнённый слой поверх вашего приложения.
Затемнение сигнализирует пользователю об изменении состояния в приложении и может быть использован для создания загрузчиков, диалогов и многое другое. Проще говоря, затемнение добавляет затемнённый слой поверх вашего приложения.

{{"demo": "pages/components/backdrop/SimpleBackdrop.js"}}
2 changes: 1 addition & 1 deletion docs/src/pages/components/badges/badges-zh.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: React Badge 徽章组件
components: 徽章
components: Badge
---

# Badge 徽章
Expand Down
10 changes: 5 additions & 5 deletions docs/src/pages/components/box/box-zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -6,23 +6,23 @@ title: React Box分组组件

<p class="description">对于大多数 CSS 实用程序来说,Box 组件能够作为一个包装组件来使用。</p>

`@material-ui/system`中,您可以找到所述 Box 组件包的 [所有样式的功能](/system/basics/#all-inclusive)。 它是通过 `@material-ui/core/styles` 中的 [`styled()`](/styles/api/#styled-style-function-component) 函数来创建的。
`@material-ui/system`中,您可以找到所述 Box 组件包的 [所有的样式功能](/system/basics/#all-inclusive)。 它是通过 `@material-ui/core/styles` 中的 [`styled()`](/styles/api/#styled-style-function-component) 函数来创建的。

## 示例

[调色板](/system/palette/)样式功能。
查看[调色板](/system/palette/)样式功能。

## 覆盖 Material-UI 组件

Box 组件能够封装您的组件。 它创建了一个新的 DOM 元素,默认情况下为 `<div>`,并可以通过 `组件` 的属性进行更改。 假设您想使用 `<span>`
Box 组件能够封装您的组件。 它创建了一个新的 DOM 元素,默认情况下为 `<div>`,并可以通过 `组件` 的属性进行更改。 假设反之你想使用一个 `<span>`

```jsx
<Box component="span" m={1}>
<Button />
</Box>
```

当所需的更改能和新的 DOM 元素分离开来的时候,这样的方案很有效。 例如,您可以使用这个方法来更改边距。
当所需的更改与新的 DOM 元素分开时比较有效。 例如,您可以使用这个方法来更改边距。

但是,有时您必须针对到底层的 DOM 元素。 例如,您想要更改一个按钮的文本颜色。 Button 组件已经定义好了它自己的颜色。 CSS 继承于事无补。 要解决此问题,您有以下两种选择:

Expand All @@ -46,7 +46,7 @@ Box 组件有一个 `clone` 的属性,通过它您可以使用 React 克隆元
</Box>
```

> ⚠️CSS 的特异性依赖于导入的顺序。 如果您希望保证能够覆写包装组件的样式,则需要在最后才导入Box
> ⚠️CSS 的特异性依赖于导入的顺序。 如果您希望确保覆写包装组件的样式,则需要在最后才导入 Box
## API

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/components/buttons/buttons-zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,7 @@ components: Button, IconButton, ButtonBase

👑如果您还在寻找灵感,您可以查看一下 [MUI Treasury 自定义的例子](https://mui-treasury.com/components/button)

## Complex Buttons 复杂按钮
## 复杂按钮

文本按钮,包含按钮,浮动操作按钮和图标按钮都基于同一个组件:`ButtonBase`。 利用此较底层的组件,您可以创建一些自定义的交互操作。

Expand Down
30 changes: 15 additions & 15 deletions docs/src/pages/components/cards/cards-zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -5,50 +5,50 @@ components: Card, CardActionArea, CardActions, CardContent, CardHeader, CardMedi

# Card 卡片

<p class="description">卡片包含有关单个主题的内容和操作。</p>
<p class="description">卡片组件能够承载与单个主题相关的内容和操作。</p>

[卡片](https://material.io/design/components/cards.html) 是显示单个主题下内容和操作的容器
[卡片](https://material.io/design/components/cards.html) 是一个显示与单个主题相关的内容和操作的容器

通过卡片,我们应便捷地扫描相关的和可操作的信息。 像文本和图像这样的元素,则应按照清晰的布局来排列,以此呈现结构层次。
通过卡片组件,扫描相关的和可操作的信息更为便捷了。 像文本和图像这样的元素,则应按照清晰的布局来排列,以此呈现结构层次。

## 简单的卡片

尽管卡片支持多操作、多个 UI 控件和一个加长的菜单,但请不要滥用它,切记,卡片只是那些复杂且详细信息的一个入口
尽管卡片支持多操作、多个 UI 控件和一个加长的菜单,但请不要滥用它,切记,卡片只能作为那些复杂且详细信息的一个入口

{{"demo": "pages/components/cards/SimpleCard.js", "bg": true}}

### 描边卡片
### 描边卡片 Outlined Card

将 variant 的值设置为 outlined 以渲染描边卡片:`variant="outlined"`
设置 `variant="outlined"` 来渲染一个描边卡片。

{{"demo": "pages/components/cards/OutlinedCard.js", "bg": true}}

## 复杂交互
## 复杂的交互情况

在桌面上, 卡片内容可以展开
在桌面上,卡片内容是可以展开的

{{"demo": "pages/components/cards/RecipeReviewCard.js", "bg": true}}

## 多媒体内容
## Media 多媒体内容

下面是一个使用图像来增强内容的卡片示例
下面的例子则一个使用图像来增强内容的卡片

{{"demo": "pages/components/cards/MediaCard.js", "bg": true}}

默认情况下,我们使用给`<div>` 元素加一个 *背景图片* 的方式来显示多媒体元素。 但在某些情况下,可能会产生一些不可预知的问题。 例如,您可能希望显示一段视频或一张响应式图片。 对于这些用例,请使用 `component` 属性
默认情况下,我们结合`<div>` 元素和一个 *背景图片* 来展示多媒体元素。 但在某些情况下,可能会产生一些不可预知的问题。 譬如,你会有显示一个视频或一张响应式的图片的需求。 使用 `component` 属性可以解决这样的情况

{{"demo": "pages/components/cards/ImgMediaCard.js", "bg": true}}

> ⚠️ 当 `component="img"` 时,CardMedia 会依靠 `object-fit` 来居中图像。 IE 11不支持它
> ⚠️ 当 `component="img"` 时,CardMedia 通过 `object-fit` 来居中图像。 但是 IE 11不支持这一属性
## UI 控件

卡片中的次要操作由图标、文本或 UI 控件呈现。次要操作的按钮通常位于卡片底部
卡片内部的一些补充操作可使用图标、文本和 UI 控件显式调用,我们通常将其放在卡片组件的底部

下面是一个媒体控制卡片的例子
以下是一个多媒体内容控制的卡片的例子

{{"demo": "pages/components/cards/MediaControlCard.js", "bg": true}}

## Customization 个性化

👑如果您还在寻找灵感,请查看 [MUI Treasury 的自定义案例](https://mui-treasury.com/components/card)
👑如果您还在寻找灵感,您可以查看一下 [MUI Treasury 自定义的例子](https://mui-treasury.com/components/card)
2 changes: 1 addition & 1 deletion docs/src/pages/components/dialogs/dialogs-zh.md
Original file line number Diff line number Diff line change
Expand Up @@ -40,7 +40,7 @@ components: Dialog, DialogTitle, DialogContent, DialogContentText, DialogActions

{{"demo": "pages/components/dialogs/AlertDialog.js"}}

## Transitions(过渡动画
## 过渡动画

当然你也可以换掉过渡效果,下面的示例使用了 ` Slide(幻灯片)`

Expand Down
Loading

0 comments on commit da7faa3

Please sign in to comment.