Skip to content

组件库【翻译】 #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
baoluojian123 wants to merge 2 commits into
base: master
Choose a base branch
from
Open

组件库【翻译】 #23

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
677cb82
组件库
baoluojian123 Mar 15, 2020
c6c2833
组件库
baoluojian123 Mar 15, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
61 changes: 29 additions & 32 deletions reference/styles/sections/components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
title: Components
description: In the Components tab, you can toggle the visibility of components, edit component properties, eject a component into layers, and define colors and typography groups.
标题: 组件库
描述: 在组件选项卡中，你可以切换组件的可见性，编辑组件的属性，从组件弹出图层以及定义颜色和字体排版。
prependJs:
- "import AppropriateImage from '../../../../components/appropriate-image';"
- "import Browser from '@mapbox/dr-ui/browser';"
Expand All @@ -14,15 +14,15 @@ prependJs:
- "import ColorsTab from '../../../../video/reference-styles-components-colors-tab.mp4';"
- "import ColorPalette from '../../../../video/reference-styles-components-color-palette.mp4';"
- "import TypographyTab from '../../../../video/reference-styles-components-typography-tab.mp4';"
contentType: reference
tag: beta
contentType: 参考
标签: 测试版
---

## Components
## 组件库

{{ <StyleComponentBetaNote /> }}

In the **Components** tab, you can toggle the visibility of components, edit component properties, eject a component into layers, and define colors and typography groups.
在**组件库**选项卡中，你可以切换组件的可见性，编辑组件的属性，从组件弹出图层以及定义颜色和字体排版。

{{
<Browser>
Expand All @@ -33,13 +33,13 @@ In the **Components** tab, you can toggle the visibility of components, edit com
</Browser>
}}

### Components list
### 组件库列表

All components in the current style are listed at the top of the Components tab. While there are over a dozen components used throughout Mapbox template styles, the exact list of components will depend on the template style you are editing.
当前样式的所有组件都列在组件库选项卡的顶部。虽然在整个Mapbox模板样式中使用了十几个组件，但是准确的组件列表将取决于你正在编辑的模板样式。

#### Hide and show components
#### 隐藏和显示组件

To hide the map features in a component, hover over the component name in the list. A {{ <Icon name="noeye" inline={true} /> }} will appear. Click the icon to hide the component. To show a hidden component, click the {{ <Icon name="eye" inline={true} /> }}.
要隐藏一个组件中的地图要素，请将鼠标悬停在列表中的组件名称上。一个 {{ <Icon name="noeye" inline={true} /> }} 将会出现。单击这个图标来隐藏组件。要显示隐藏的组件，请单击 {{ <Icon name="eye" inline={true} /> }}。

{{
<Browser>
Expand All @@ -50,12 +50,11 @@ To hide the map features in a component, hover over the component name in the li
</Browser>
}}

#### Edit component properties
#### 编辑组建属性

To edit the style of map features in a component, click on the name of the component in the list. A panel listing the available component properties will open.

There are a few component properties for each component, and the properties available vary between components. A single component property can control multiple layer properties across several layers. Values for component properties are often defined using a toggle (on or off), a dropdown menu with a few options, or a slider with several options along a scale.
要编辑组件中的地图要素的样式，请单击列表中组件的名称。将打开一个可用组件属性列表的弹窗。

每个组件都有一些组件属性，并且各个组件之间可用的属性有所不同。 单个组件属性可以控制不同图层的多个图层属性。通常使用切换（打开或关闭）、带有几个选项的下拉菜单、或带有刻度的带有多个选项的滑块定义组件属性的值。
{{
<AppropriateImage
imageId="reference-styles-components-component-properties"
Expand All @@ -64,17 +63,17 @@ There are a few component properties for each component, and the properties avai
<br />
}}

{{<Note title="Component properties and the Mapbox Style Specification">}}
Unlike layer properties, component properties are not directly related to the [Mapbox Style Specification](https://docs.mapbox.com/mapbox-gl-js/style-spec/) and cannot be edited outside Mapbox Studio (at runtime).
{{<Note title="组件属性和Mapbox样式规范">}}
与图层属性不同，组件属性与[Mapbox样式规范](https://docs.mapbox.com/mapbox-gl-js/style-spec/)不直接相关，并且不能在Mapbox Studio外部进行编辑（在运行时)
{{</Note>}}

#### More options
#### 更多选择

Toggle from **Edit** to **More options** in the component properties panel to **Eject component** and **View layers**.
从组件属性面板中的 **编辑** 切换到 **更多选项** ，**弹出组件** 和 **查看图层**。

Click **Eject component** to split the component into layers. When you eject a component, you are no longer able to edit the layers within that component as a single unit. After ejecting a component, the layers will continue to use the layer properties inherited from the initial component properties until they are manually edited. Going forward all layers _must_ be styled using layer properties directly.
单击 **弹出组件** 将组件拆分为多个图层。弹出组件时，您将无法再以一个单元的形式编辑该组件中的图层。弹出组件后，图层将继续使用从初始组件属性继承的图层属性，直到对其进行手动编辑。之后，必须直接使用图层属性设置所有图层的样式。

**Once a component is ejected, it can't be reversed.**
**组件一旦弹出为图层，图层将无法重新组成组件.**

{{
<Browser>
Expand All @@ -86,8 +85,7 @@ Click **Eject component** to split the component into layers. When you eject a c
<br />
}}

Click **View layers** to see all layers within the selected component. Clicking **View layers** will switch your current view from the **Components** tab to the **Layers** tab and select all the layers in the layer list.

单击**查看图层**来查看所选组件中的所有图层。单击**查看图层**会将当前视图从**组件库**选项卡切换到**图层**选项卡，然后在图层列表中选择所有图层。
{{
<Browser>
<Video
Expand All @@ -97,9 +95,9 @@ Click **View layers** to see all layers within the selected component. Clicking
</Browser>
}}

### Colors
### 颜色

The **Colors** tab displays colors used throughout the style. There are over a dozen **component color properties** you can define in Mapbox template styles. A component color property applies a single color to many features across components. _Greenspace_ is an example of a color category that applies to features in three different components (_Point of interest labels_, _Walking, cycling, etc._ and _Land & water_).
**颜色**选项卡显示整个样式使用的颜色。你可以在Mapbox模板样式中定义十几种**组件颜色属性**。 组件颜色属性对跨组件的许多元素应用一种颜色。_绿地空间_是一个应用于三个不同组件的颜色类别的例子 (_兴趣点标签_, _人行道, 自行车道, 等等._ 以及 _陆地 & 水域_).

{{
<Browser>
Expand All @@ -111,8 +109,7 @@ The **Colors** tab displays colors used throughout the style. There are over a d
<br />
}}

The **color palette** contains a list of possible component color properties. You can add and remove color properties in the color palette. After a color property is added to your palette, you can change the value by clicking the color square to open a color picker where you can define an RGBA, HSLA, or hex code.

**调色板**包含可能的组件颜色属性的列表。你可以在调色板中添加和删除颜色属性。将颜色属性添加到调色板后,您可以通过单击颜色方块来打开颜色选择器来修改值，你可以在其中定义RGBA值（R=红色，G=绿色，B=蓝色，A=透明度），HSLA值（H=色相，S=饱和度，L=亮度，A=透明度））或十六进制代码。
{{
<Video
src={ColorPalette}
Expand All @@ -121,17 +118,17 @@ The **color palette** contains a list of possible component color properties. Yo
<br />
}}

Not every color category has to be included in the color palette. If a color category is not included in the color palette (no color is assigned), it will fall back to the color defined for the _Base_ color category, which can’t be removed. This means you will always have a well-coordinated palette without needing to choose a value for every possible color category.
并非每种颜色类别都必须包含在调色板中。如果调色板中未包括颜色类别（颜色未被使用），它将退回到为基础颜色类别定义的颜色，该颜色无法删除。这意味着您你始终拥有协调良好的调色板，而无需为每种可能的颜色类别选择一个值。

For example, if the color assigned to _Base_ is purple and _Greenspace_ is green, green parks will be on top of a purple base. If you remove _Greenspace_ from the palette, your parks will turn a purple shade.
例如，如果分配给 _基础_ 的颜色是紫色，而 _绿地_ 是绿色，则绿色公园将位于紫色基础的顶部。如果从调色板中删除 _绿地_ ，公园将变成紫色阴影。

This is a pattern we use in our template styles. For example, the default color palette for Streets has 13 colors while Basic's default color palette has only 10 colors.
这是我们在模板样式中使用的模式。例如，“街道”的默认调色板具有13种颜色，而“基本”的默认调色板仅具有10种颜色。

### Typography
### 字体

The **Typography** tab displays fonts and text styles used throughout your style. There are up to eight component typography properties you can define in Mapbox template styles. A component typography property applies font and text styles to features in one or more components. _Minor cities_ is an example of a typography property that applies to a subset of features in the _Place labels_ component.
**字体**选项卡显示整个样式中使用的字体和文本样式。您最多可以在Mapbox模板样式中定义八个组件字体属性。组件字体属性将字体和文本样式应用于一个或多个组件中的元素中。 _小城市_ 是字体属性的一个示例，该属性应用于 _位置标签_ 组件中的部分要素。

You can define the font, set the text size, and transform the case (uppercase, lowercase) by clicking the item in the list to open a typography panel.
您可以通过点击列表中的项目来打开字体面板来定义字体，设置文本大小以及转换大小写（大写，小写）。

{{
<Browser>
Expand Down