Component behavior

コンポーネントの振る舞い

The following guidance describes how components behave, both in the grid and between breakpoints.

次のガイダンスでは、グリッド内とブレークポイント間の両方でコンポーネントがどのように動作するかについて説明します。

CONTENTS

Positioning terminology

ポジショニング用語

UI elements behave in different ways at each breakpoint range.

UI要素は、各ブレークポイント範囲で異なる動作をします。

Descriptors

ディスクリプタ

The position of UI elements elements, components, and surfaces in the grid can be described using the following terms: Descriptor Definition Above, below The y...

The position of UI elements elements, components, and surfaces in the grid can be described using the following terms:

グリッド内のUI要素、要素、コンポーネント、およびサーフェスの位置は、次の用語を使用して説明できます。

Descriptor	Definition
Above, below	The y position of an element
In front of, behind	The z position of an element
Left, right, centered	The x position of an element
Top, bottom	The y position of an element relative to a container or screen edge
Vertically centered	The x and y position of an element are centered relative to a container or screen edges
Sticky	An element that scrolls with the UI and locks at a certain point in the scroll position
Floating	A fixed element positioned in front of scrolling content

Component width

コンポーネント幅

Component width can remain the same across screen sizes, or it can change depending on the layout. Component width can be either:

コンポーネントの幅は画面サイズが変わっても変わらない場合もあれば、レイアウトに応じて変わる場合もあります。コンポーネントの幅は次のいずれかです。

Fixed
Fluid

Because fixed width elements retain their width during layout changes, their placement can change to accommodate new layouts. Their placement can be either:

固定幅要素はレイアウト変更中も幅を保持するため、新しいレイアウトに合わせて配置を変更できます。それらの配置は次のいずれかです。

Pushed
Overlaid

Fixed

固定

When an element has a fixed width, its width stays the same even across screen size changes.

要素の幅が固定されていると、画面サイズが変わっても要素の幅は変わりません。

This button component remains fixed against the right margin.

このボタンコンポーネントは右マージンに対して固定されたままです。

Fluid

流体

When an element has a fluid width, its width expands and contracts as the screen size changes.

要素が流動的な幅を持っているとき、その幅はスクリーンサイズが変化するにつれて伸縮します。

This button fluidly scales within the right two columns.

このボタンは、右側の2列内で流動的に拡大縮小されます。

Don’t.

Don’t use a container on fluid components if it’s too narrow to display elements and padding at smaller widths.

狭い幅の要素やパディングを表示するには幅が狭すぎる場合は、流体コンポーネントにコンテナを使用しないでください。

Caution.

Use caution when spanning a fluid component across several columns in a wide screen. Certain components, like buttons, might be overly emphasized on larger screen widths.

ワイドスクリーンで複数の列にまたがって流体コンポーネントを配置するときは注意が必要です。ボタンなどの特定のコンポーネントは、画面幅が広くなると強調されすぎる可能性があります。

Push

押し出し

When layout and screen size change, a component can be pushed from its original position. Component width remains the same, but its position changes horizontally,...

When layout and screen size change, a component can be pushed from its original position. Component width remains the same, but its position changes horizontally, moving left or right. When this occurs, it may be partially occluded by a screen’s edge if pushed off-screen.

レイアウトと画面サイズが変わると、コンポーネントは元の位置からプッシュされます。コンポーネントの幅は変わりませんが、その位置は水平方向に変わり、左右に移動します。このような場合、画面から外に押すと画面の端が部分的に隠れることがあります。

The content region is pushed off-screen by the navigation drawer.

コンテンツ領域は、ナビゲーションドロワーによって画面外にプッシュされます。

Overlaid

オーバーレイ

When a UI changes, a component can be overlaid by other elements that occlude it. When a component is overlaid, its width and position remain...

When a UI changes, a component can be overlaid by other elements that occlude it. When a component is overlaid, its width and position remain the same.

UIが変わると、コンポーネントはそれを隠す他の要素によってオーバーレイされる可能性があります。コンポーネントがオーバーレイされても、その幅と位置は変わりません。

The content UI region is covered by the navigational UI region.

Responsive patterns

レスポンシブパターン

Components can adapt their dimensions based on screen size and device type, using the following the following patterns. These dimension adaptations can include:

以下のパターンを使用して、コンポーネントは画面サイズとデバイスタイプに基づいて寸法を調整できます。これらの寸法適応は以下を含むことができる。

Using different components that fit the space better
スペースによく合うさまざまなコンポーネントを使用する
Altering the visibility of components to accommodate smaller spaces
狭いスペースに対応するためにコンポーネントの可視性を変更する
Changing to input methods
入力方法への変更

As screen space increases, the following responsive patterns may be applied.

スクリーンスペースが増加するにつれて、以下の反応パターンが適用され得る。

Reveal

出現

Parts of the UI hidden by smaller screens can be revealed when additional space becomes available at a designated breakpoint.

指定されたブレークポイントで追加のスペースが使用可能になると、小さい画面に隠れているUIの一部が明らかになります。

Elements, such as side navigation, can become visible when screen size increases.

サイドナビゲーションなどの要素は、画面サイズが大きくなると表示されることがあります。

A simple UI may reveal more robust or complex options.

単純なUIに、より堅牢なまたは複雑なオプションが隠されていることがあります。

Content that only appears after tapping on a small screen can be revealed by default when more space is available.

小さな画面をタップした後にのみ表示されるコンテンツは、より多くのスペースがある場合にデフォルトで表示されます。

Transform

変形（フォーマット変換）

A component can transform from one format to another at a designated breakpoint.

コンポーネントは指定されたブレークポイントであるフォーマットから別のフォーマットに変換できます。

Side navigation can transform into tabs on a larger screen.

サイドナビゲーションは、より大きな画面上でタブに変わることがあります。

A list can transform into an image list on a larger screen.

リストはより大きな画面上で画像リストに変換することができます。

Menu items can transform into icons in a toolbar on a larger screen.

メニュー項目は、大画面のツールバーのアイコンに変換できます。

Divide

分割

UIs with multiple layers can display all of those layers at once when more screen space is available. UI elements are divided across this newly...

UIs with multiple layers can display all of those layers at once when more screen space is available. UI elements are divided across this newly available space.

複数のレイヤーを持つUIでは、より多くの画面スペースが使用可能になると、それらすべてのレイヤーを一度に表示できます。 UI要素は、この新しく利用可能なスペースにまたがって分割されます。