サイズ変更できる枠
縁や角のハンドル、キーボード、または 1 回の押下で、人が幅と高さを変えられる箱です。Outlined なら、プレビューをスマートフォンの幅とノートパソコンの幅で確かめる場所になります。Plain なら、ナビゲーションドロワーやサイドバーの縁になります。
- カテゴリ
- コンテインメント
- トークン
comp.resizable-frame- レベル
- 合成
- 構成要素
- Handle
- Web
tanrei-resizable-frameclock_loader_40 - SwiftUI
TanreiResizableFrameradio_button_unchecked - Jetpack Compose
TanreiResizableFrameradio_button_unchecked - Flutter
TanreiResizableFrameradio_button_unchecked - React Native
ResizableFrameradio_button_unchecked
生成元 docs/status/status.json, specs/resizable-frame.spec.json
末尾側の縁、下の縁、角で人が大きさを変えるプレビュー
ハンドルをドラッグするか、Tab でハンドルに移動して矢印キーを使ってください。
サイズ変更できる枠は、中身に、人が変えられる幅と高さを与えます。ハンドルはハンドルです。ドラッグすると大きさが変わり、キーボードで動かすと 1 刻みずつ変わり、ドラッグせずに押すと最大の大きさと直前の大きさを行き来します。枠は大きさを保ち、人が大きさを変えたことを知らせ、支援技術が読めるように、各ハンドルに大きさを値として渡します。
見た目は 2 つあります。Outlined は角の丸い箱に細い線を 1 本引いたもので、ハンドルは何も隠さないように箱の外にあります。ページやコンポーネントが与えられた広さにどう応じるかを確かめる場所です。Plain は自分では何も描きません。中身が自分のサーフェスを描き、各ハンドルはその縁に付きます。長い名前のために人が広げるナビゲーションドロワーや、隣の作業のために狭めるサイドバーなどです。
Web では <tanrei-resizable-frame> です。ほかのプラットフォームはまだ実装していません。
<!-- スマートフォン、タブレット、ノートパソコンの幅で確かめるプレビュー。ドラッグはそれぞれの幅に吸い付きます。 -->
<tanrei-resizable-frame width="390" height="640" snap-widths="360 600 1024" width-label="プレビューの幅を変更">
<iframe title="プレビュー" src="/preview"></iframe>
</tanrei-resizable-frame>
<!-- レイアウトの末尾側にあるサイドバー。Plain で、先頭側の縁から大きさを変えます。 -->
<tanrei-resizable-frame id="side" variant="plain" handles="start" min-width="240" max-width="560" size-indicator="none" width-label="サイドバーの大きさを変更">
<aside>…</aside>
</tanrei-resizable-frame>
<script type="module">
import '@tanrei/web/components/resizable-frame';
const side = document.querySelector('#side');
// その人の幅を、次に訪れたときまで保ちます。
side.width = Number(localStorage.getItem('side-bar')) || 320;
side.addEventListener('change', (e) => localStorage.setItem('side-bar', String(e.detail.width)));
</script>import { ResizableFrame } from '@tanrei/react';
<ResizableFrame
variant="plain"
handles={['start']}
width={width}
minWidth={240}
maxWidth={560}
sizeIndicator="none"
widthLabel="サイドバーの大きさを変更"
onChange={(e) => setWidth(e.detail.width)}
>
<aside>…</aside>
</ResizableFrame>構成要素
| パーツ | 説明 |
|---|---|
1 container | The box the content is laid out in, as wide and as tall as the frame's size. Outlined, its corners rounded and edged with one hairline, and the content clipped to it; plain, nothing drawn. It gives the content no fill of its own. |
2 content | Whatever the product puts in the frame: a component, an embedded document, a layout, a navigation drawer. The frame gives it its width and its height and does nothing else to it. |
3 start-handle · 任意 | A Handle (axis horizontal) centred along the start edge: it changes the width from that edge (a side bar at the end of a layout). |
4 end-handle · 任意 | A Handle (axis horizontal) centred along the end edge: it changes the width. |
5 bottom-handle · 任意 | A Handle (axis vertical) centred along the bottom edge: it changes the height. |
6 corner-handle · 任意 | A Handle (axis both, corner bottom-end) at the bottom-end corner: it changes both. |
7 size-indicator · 任意 | A small label inside the box at its top-end corner that shows the size as width × height in pixels while a handle is held or has keyboard focus, or always. |
プロパティ
| プロパティ | 型 | 既定値 | 説明 |
|---|---|---|---|
variant | outlined | plain | "outlined" | outlined: a box with rounded corners and one hairline, its handles outside it so that they cover nothing — where a person checks how content responds to its room (a preview). plain: no edge and no corners of its own, the content drawing its own surface, and each handle centred on its edge — the edge of a pane (a navigation drawer, a side bar). |
handles | strings | end | Which handles the frame draws: any of start, end, bottom and bottom-end, in any combination. start is for content at the end of a layout, which grows toward the start (a side bar); end for content at its start (a preview, a navigation drawer). An empty list draws none, and the frame is a box of the size the product sets. |
width | number | null | The width of the box in pixels. Null takes the width the layout gives. A drag, a key or an activation changes it, and the frame keeps the width the person gave until the product sets another; a product that keeps a person's width (a drawer's, from one visit to the next) stores it from change and sets it again. |
height | number | null | The height of the box in pixels. Null takes the height the layout gives where it gives one (a row that stretches its items, a grid's cell, a pane beside the page), and the content's height where it does not, within minHeight and maxHeight. Changed as width is. |
minWidth | number | null | The least width a person can give. Null takes comp.resizable-frame.container.min-width (320 in the default system: the width at which content must reflow without scrolling sideways, WCAG 1.4.10). A pane sets its own (a navigation drawer's least). |
maxWidth | number | null | The greatest width. Null is the width the layout gives the frame. |
minHeight | number | null | The least height. Null takes comp.resizable-frame.container.min-height. |
maxHeight | number | null | The greatest height. Null is unlimited where the layout lets the frame grow. |
snapWidths | numbers | | Widths in whole pixels a drag of a handle that changes the width snaps to (360, 600, 1024: a common phone, a tablet, a small laptop). A width within comp.resizable-frame.snap-distance of one is taken as that one. |
step | number | 10 | How many pixels one arrow key changes a size by. |
largeStep | number | 100 | How many pixels Shift with an arrow key, Page Up or Page Down changes a size by. |
sizeIndicator | none | active | always | "active" | When the size indicator is drawn: never; while a handle is held or has keyboard focus; or all the time. A pane that is not checked for its size (a navigation drawer) sets none. |
widthLabel | string | "" | The accessible name of the start and the end handle ("Resize preview width", "Resize navigation"). Required while one of them is drawn. |
heightLabel | string | "" | The accessible name of the bottom handle ("Resize preview height"). Required while it is drawn. |
cornerLabel | string | "" | The accessible name of the corner handle ("Resize preview"). Required while it is drawn. |
スロット
| スロット | 説明 |
|---|---|
default | The content: a component, an embedded document, a layout, a navigation drawer. A fixture's string is drawn as plain text in it. |
イベント
| イベント | 説明 |
|---|---|
resize | The size changed during a drag; emitted in every frame it changes. Carries width and height in pixels. |
change | A person finished changing the size: a drag ended, a key changed it, or a handle was activated. Carries width and height. Not emitted when the product sets a size. |
状態
振る舞い
EARS 記法による要件です。各プラットフォームの実装は、この ID に対応するテストで検証されます。要件の原文は仕様ファイルのものをそのまま掲載しています。
| ID | 要件 |
|---|---|
RSF-1 | THE resizable frame SHALL lay out its container as a box of its width and its height — width while it is not null and otherwise the width the layout gives it, height while it is not null and otherwise the height the layout gives it or, where the layout gives none, its content's height — each kept within its least and greatest (minWidth or comp.resizable-frame.container.min-width, and the lesser of maxWidth and the layout's width; minHeight or comp.resizable-frame.container.min-height, and maxHeight), with no fill and no elevation of its own, placed at the start edge of the room the layout gives it, or at its end edge WHILE handles names start and not end, so that the edge a person drags is the one that moves. |
RSF-2 | WHILE variant is outlined THE resizable frame SHALL draw its container with comp.resizable-frame.container.shape corners eased by sys.shape.corner-smoothing, edged inside with a line comp.resizable-frame.outline.width wide in comp.resizable-frame.outline.color, SHALL lay its content out at the box's width and clip it to the box's shape, and WHILE the content is taller than the box SHALL scroll it inside the box and make the box one focus stop, so that a keyboard scrolls it; WHILE variant is plain THE resizable frame SHALL draw no edge and no corners, SHALL give the content the box's width and height to fill, and SHALL clip nothing: the content draws its own surface and scrolls itself. In both THE resizable frame SHALL style nothing inside the content. |
RSF-3 | THE resizable frame SHALL draw the handles that handles names and no other: for start and end a Handle with axis horizontal centred along that edge, for bottom a Handle with axis vertical centred along the bottom edge, for bottom-end a Handle with axis both and corner bottom-end at that corner, each at size medium, and each with a hit area that meets the minimum target by its own rule (HDL-5). WHILE variant is outlined each handle SHALL stand outside the box, its box comp.resizable-frame.handle.gap beyond the edge (beyond both edges for the corner), and THE resizable frame SHALL keep room for them outside the box, so that they never cover the content; WHILE variant is plain each handle SHALL be centred on its edge (its corner on the box's corner) and take no room. |
RSF-4 | WHILE a drag of a handle lasts THE resizable frame SHALL change its width by the inline distance of the end and the corner handle, and by that distance taken the other way for the start handle, and its height by the block distance of the bottom and the corner handle, from the size it had when the drag began, kept within its least and greatest, following the drag without a motion, and SHALL emit resize with the new width and height in every frame the size changes; WHEN the drag ends THE resizable frame SHALL keep the size and emit change once, and none WHERE the size did not change. |
RSF-5 | WHILE a drag of a handle that changes the width lasts and snapWidths names widths THE resizable frame SHALL take a width within comp.resizable-frame.snap-distance of one of them as that width, and SHALL let the width go on with the drag once it is farther than that. |
RSF-6 | WHILE a drag of a handle lasts THE resizable frame SHALL keep every embedded document in its content from taking pointer input, so that the drag is not lost when the pointer passes over it, and SHALL give it input again WHEN the drag ends. |
RSF-7 | WHEN a handle emits step THE resizable frame SHALL change the size the step's axis stands for — the width for the inline axis, the height for the block axis — by step pixels for amount one and by largeStep pixels for amount large, wider toward the edge the handle stands on (toward the end for the end and the corner handle, toward the start for the start handle) and taller downward, and to its least for amount limit with direction −1 (Home) and to its greatest with direction 1 (End), kept within its least and greatest, and SHALL emit change once WHERE the size changed; it SHALL move to the new size over comp.resizable-frame.motion.resize-duration with comp.resizable-frame.motion.resize-easing, and at once where motion is reduced. |
RSF-8 | WHEN the start or the end handle is activated THE resizable frame SHALL make its width its greatest WHILE it is narrower, and SHALL give it back the width it had before the person last made it the greatest WHILE it already is the greatest (the least width where it had none); the bottom handle SHALL do the same with the height, the content's height standing for the greatest WHILE maxHeight is null; the corner handle SHALL do both. Each SHALL move as RSF-7 says and emit change once, so that no size the frame offers depends on a drag (WCAG 2.5.7). |
RSF-9 | THE resizable frame SHALL give each handle the value its size stands for — the width in pixels for the start and the end handle, the height for the bottom and the corner handle — with its least and greatest as min and max, and SHALL name the start and the end handle by widthLabel, the bottom handle by heightLabel and the corner handle by cornerLabel; WHILE a drawn handle's label is empty THE resizable frame SHALL still render it, and in debug builds report that it has no accessible name. |
RSF-10 | WHILE sizeIndicator is always, or sizeIndicator is active and a handle is held by a press or a drag or has keyboard focus, THE resizable frame SHALL draw its size indicator inside the box, comp.resizable-frame.size-indicator.offset from its top and end edges, over the content: the width, the character ×, and the height, in whole pixels written with the platform's digits for the layout's language and without grouping, in comp.resizable-frame.size-indicator.label.typescale and comp.resizable-frame.size-indicator.label.color, on a container comp.resizable-frame.size-indicator.container.height high, padded by comp.resizable-frame.size-indicator.container.padding-inline at its sides, with comp.resizable-frame.size-indicator.container.shape corners, filled with comp.resizable-frame.size-indicator.container.color; it SHALL take no input, and SHALL be hidden from assistive technology, which reads each size as its handle's value. |
RSF-11 | WHEN the size indicator appears or goes THE resizable frame SHALL fade it in over comp.resizable-frame.motion.indicator-enter-duration with comp.resizable-frame.motion.indicator-enter-easing and out over comp.resizable-frame.motion.indicator-exit-duration with comp.resizable-frame.motion.indicator-exit-easing, and at once where motion is reduced; WHILE a drag lasts it SHALL update the numbers in every frame, without a motion. |
RSF-12 | WHEN the product sets width or height THE resizable frame SHALL draw the new size at once and SHALL NOT emit resize or change; WHEN the layout's width becomes narrower than the frame's width THE resizable frame SHALL be as wide as the layout allows and keep the width the person gave for when there is room again. |
RSF-13 | WHERE the layout direction is right-to-left THE resizable frame SHALL mirror its layout: the box at the right of its room (at its left WHILE it stands at the end edge, RSF-1), the end handle on the box's left edge and the start handle on its right, the corner handle at the bottom-left corner, so that a drag away from the box widens it, and the size indicator at the top-left, its numbers still written left to right, the width at the left of the height, as a size is written in every language. |
RSF-14 | THE resizable frame SHALL take its layout direction from where it is used — the direction of the nearest ancestor that sets one, and the platform's own where none does — and SHALL have no direction setting of its own; WHEN that direction changes while the frame is shown THE resizable frame SHALL draw itself for the new direction at once, without a motion of its own, keeping its size. |
RSF-15 | WHERE the platform draws with a person's own forced colors THE resizable frame SHALL draw the outlined box's edge in the platform's text color, and its size indicator's text in the platform's text color on the platform's canvas color, with an edge of comp.resizable-frame.outline.width in the text color around it. |
RSF-16 | IF handles names a value other than start, end, bottom and bottom-end, or variant or sizeIndicator a value the component does not define, THE resizable frame SHALL ignore that handle, draw the variant as outlined or treat the indicator as active, and in debug builds report the unknown value; IF a value of snapWidths is not a whole number of pixels above zero THE resizable frame SHALL ignore it and in debug builds report it. |
RSF-17 | THE resizable frame SHALL have no words of its own and SHALL read none of the product's words: widthLabel, heightLabel and cornerLabel are about this one frame, and the size indicator is made of digits and a mark. |
RSF-18 | THE resizable frame SHALL add to the focus order its handles after its content, in the order start, end, bottom, bottom-end, and no other stop of its own but the box while it scrolls (RSF-2). |
RSF-19 | WHILE variant is outlined and a fine pointer is over the frame — its box or a handle's target — THE resizable frame SHALL draw its handles at rest (the handle's revealed), so that a person who points at a preview sees where to take it; WHILE variant is plain THE resizable frame SHALL leave each handle out of sight until it is used, as the Handle does (HDL-23), so that a pane's edge stays quiet under a pointer that only passes over the pane. |
プラットフォーム別の名前対応
パリティは API が同一であることを意味しません。同じ契約を、各プラットフォームの流儀で表現します。
| 仕様 | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| コンポーネント | tanrei-resizable-frame | TanreiResizableFrame | TanreiResizableFrame | TanreiResizableFrame | ResizableFrame |
variant · プロパティ | variant | variant | variant | variant | variant |
handles · プロパティ | handles | handles | handles | handles | handles |
width · プロパティ | width | width | width | width | width |
height · プロパティ | height | height | height | height | height |
minWidth · プロパティ | minWidth | minWidth | minWidth | minWidth | minWidth |
maxWidth · プロパティ | maxWidth | maxWidth | maxWidth | maxWidth | maxWidth |
minHeight · プロパティ | minHeight | minHeight | minHeight | minHeight | minHeight |
maxHeight · プロパティ | maxHeight | maxHeight | maxHeight | maxHeight | maxHeight |
snapWidths · プロパティ | snapWidths | snapWidths | snapWidths | snapWidths | snapWidths |
step · プロパティ | step | step | step | step | step |
largeStep · プロパティ | largeStep | largeStep | largeStep | largeStep | largeStep |
sizeIndicator · プロパティ | sizeIndicator | sizeIndicator | sizeIndicator | sizeIndicator | sizeIndicator |
widthLabel · プロパティ | widthLabel | widthLabel | widthLabel | widthLabel | widthLabel |
heightLabel · プロパティ | heightLabel | heightLabel | heightLabel | heightLabel | heightLabel |
cornerLabel · プロパティ | cornerLabel | cornerLabel | cornerLabel | cornerLabel | cornerLabel |
resize · イベント | resize | onResize | onResize | onResize | onResize |
change · イベント | change | onChange | onChange | onChanged | onChange |
| 備考 | <tanrei-resizable-frame variant handles="end bottom-end" width height min-width max-width min-height max-height snap-widths="360 600 1024" step large-step size-indicator width-label height-label corner-label> with the content in the default slot. handles and snapWidths are array properties; their attributes are space-separated or a JSON array. The handles are <tanrei-handle> in the shadow root. RSF-6 sets pointer-events: none on every slotted <iframe>, <object> and <embed> (and every one inside the slotted content) between the handles' resizestart and resizeend. resize and change are composed, bubbling CustomEvents with { width, height }; the Handle's own events stay in the shadow root. | width and height are Binding<CGFloat?>; snapWidths is [CGFloat]. Content is the view builder. | snapWidths: List<Dp>; sizes in Dp. Content is the trailing composable. | snapWidths: List<double>. Content is child. | snapWidths: number[]. Content is children. |
トークン
| トークン | 参照先 | 解決値（ライト） |
|---|---|---|
--tanrei-comp-resizable-frame-container-min-height | — | 200px |
--tanrei-comp-resizable-frame-container-min-width | — | 320px |
--tanrei-comp-resizable-frame-container-shape | sys.shape.corner.large | 12px |
--tanrei-comp-resizable-frame-handle-gap | sys.space.space100 | 8px |
--tanrei-comp-resizable-frame-motion-indicator-enter-duration | sys.motion.role.appear.hint.enter | 250ms |
--tanrei-comp-resizable-frame-motion-indicator-enter-easing | sys.motion.easing.enter | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-resizable-frame-motion-indicator-exit-duration | sys.motion.role.appear.hint.exit | 200ms |
--tanrei-comp-resizable-frame-motion-indicator-exit-easing | sys.motion.easing.exit | cubic-bezier(0.3, 0, 1, 1) |
--tanrei-comp-resizable-frame-motion-resize-duration | sys.motion.role.resize.default | 300ms |
--tanrei-comp-resizable-frame-motion-resize-easing | sys.motion.easing.spatial | cubic-bezier(0.2, 0, 0, 1) |
--tanrei-comp-resizable-frame-outline-color | sys.color.outline-variant | |
--tanrei-comp-resizable-frame-outline-width | sys.border.hairline | 1px |
--tanrei-comp-resizable-frame-size-indicator-container-color | sys.color.inverse-surface | |
--tanrei-comp-resizable-frame-size-indicator-container-height | — | 24px |
--tanrei-comp-resizable-frame-size-indicator-container-padding-inline | sys.space.space100 | 8px |
--tanrei-comp-resizable-frame-size-indicator-container-shape | sys.shape.corner.small | 6px |
--tanrei-comp-resizable-frame-size-indicator-label-color | sys.color.inverse-on-surface | |
--tanrei-comp-resizable-frame-size-indicator-offset | sys.space.space100 | 8px |
--tanrei-comp-resizable-frame-snap-distance | sys.space.space100 | 8px |
--tanrei-comp-resizable-frame-size-indicator-label-typescale | sys.typescale.code-small | 400 12px/1.3333 |
フィクスチャ
基準となる描画パターンです。全プラットフォームが同じ ID でスナップショットを撮り、結果を比較できるようにしています。
default
width: 480 height: 240 widthLabel: Resize preview width slots: default all-handles
handles: ["end","bottom","bottom-end"] width: 480 height: 240 widthLabel: Resize preview width heightLabel: Resize preview height cornerLabel: Resize preview slots: default bottom-only
handles: ["bottom"] width: 480 height: 240 heightLabel: Resize preview height slots: default indicator-always
width: 390 height: 240 sizeIndicator: always widthLabel: Resize preview width slots: default no-handles
handles: [] width: 360 height: 200 slots: default plain
variant: plain width: 280 height: 240 minWidth: 200 sizeIndicator: none widthLabel: Resize navigation slots: default plain-start
variant: plain handles: ["start"] width: 280 height: 240 minWidth: 200 sizeIndicator: always widthLabel: Resize side bar slots: default rtl
handles: ["end","bottom-end"] width: 480 height: 240 sizeIndicator: always widthLabel: Resize preview width cornerLabel: Resize preview direction: rtl slots: default 生成元 specs/resizable-frame.spec.json, tokens/comp/resizable-frame.tokens.json, design/tokens/
人が欲しい広さを何かに与え、それがその広さでどうなるかを見るべきところで使います。別の幅で見るページやコンポーネントのプレビュー、メインのコンテンツの隣のペイン、ツールのパネルなどです。
| 必要なもの | 使うもの |
|---|---|
| フィールドの高さだけを、文字に合わせて伸ばす | テキストフィールド自身の角のハンドル。 |
| 下端からせり上がるシート | 自前のドラッグハンドルを描くボトムシート。 |
| いくつかの決まった大きさから選び、その間はない | 大きさを切り替えるセグメントボタン。 |
| 見せるものを、広さを減らすのではなく、絵のように縮小する | これではありません。サイズ変更できる枠が変えるのは広さで、中身の縮尺は決して変えません。 |
variant |
描くもの | 用途 |
|---|---|---|
outlined（既定） |
丸い角と細い線 1 本。ハンドルは箱の外の自分の場所にあります。マウスが枠に乗るとハンドルが見えます。 | プレビュー。中身全体が見え、枠のどの部分も中身を隠しません。 |
plain |
自分では何も描きません。中身が自分のサーフェスで箱を満たします。各ハンドルは縁に付き、ポインターが乗ったとき、フォーカスされたとき、押さえられている間だけ見えます。 | ペインの縁。ナビゲーションドロワー、サイドバー。 |
handles |
付く場所 | 変えるもの |
|---|---|---|
end（既定） |
末尾側の縁 | 幅。レイアウトの先頭側にある中身向けです。プレビュー、ナビゲーションドロワーなど。 |
start |
先頭側の縁 | 幅。先頭側に向かって広がります。レイアウトの末尾側にある中身向けです。サイドバーなど。このとき箱は、与えられた場所の末尾側に寄ります。 |
bottom |
下の縁 | 高さ。 |
bottom-end |
下の末尾側の角 | 両方を同時に。 |
どれをどう組み合わせて指定してもかまいません。空のリストではハンドルを 1 つも描かず、枠は指定した大きさの箱になります。start と end はページの方向に従います。右から左のレイアウトでは、末尾側の縁は左の縁です。
width と height は箱の大きさで、単位はピクセルです。null の間、箱はレイアウトが与える幅と、レイアウトが与える高さを取ります。レイアウトが高さを与えないところでは中身の高さを取ります。人がハンドルを動かすと、大きさはその人のものになり、利用者側が別の大きさを設定するまでそのまま保たれます。利用者側が設定した大きさはすぐに描かれ、イベントは発火しません。レイアウトが狭くなると箱も狭まり、また広さができると幅は元に戻ります。
最小の幅は minWidth で、設定しない間は 320 ピクセルです。中身が横スクロールなしで折り返さなければならない幅です。ペインには独自の値を設定します。ナビゲーションドロワーには、それ自身の最小の幅があります。最大の幅は maxWidth、またはレイアウトが与える広さです。snapWidths は、ドラッグが通り過ぎるときに吸い付く幅です。よくあるスマートフォン、タブレット、小さなノートパソコンの幅などを指定します。
| イベント | いつ |
|---|---|
resize |
ドラッグで大きさが変わる描画のたびに。width と height を運びます。 |
change |
人が大きさを変え終えたとき。ドラッグが終わった、キーで動かした、ドラッグせずにハンドルを押した、のいずれかです。その人の大きさを保つなら、ここで保存します。 |
ハンドルが押さえられている間や、キーボードのフォーカスがある間、箱の上の末尾側の角に小さなラベルが出て、「390 × 640」のように大きさを示します。sizeIndicator を always にすると常に表示し（大きさを確かめるためのプレビュー）、none にすると一度も表示しません（誰も大きさを読まないペイン）。数字はページの言語の数字で書かれ、どのレイアウトでも左から右に並びます。支援技術はこれを読まず、代わりに各ハンドルの値を読みます。
- 描くハンドルにはすべて、何の大きさを変えるかを言う名前を付けます。
widthLabel、heightLabel、cornerLabelです（「プレビューの幅を変更」「サイドバーの大きさを変更」）。 - 中身がまだ使える最小の幅と、ページのほかの部分が使えるままになる最大の幅を設定します。
- その人の大きさは、また戻ってくる場所に保ちます。ドロワーやサイドバーの幅を、
changeから保存します。
- 中身のまわりに、自前のサイズ変更のハンドルを描かない。この枠を使い、ペインの縁には
plainを使います。 - 中身を絵のように小さくするために使わない。変えるのは広さで、縮尺ではありません。
- 人が大きさを変えることになっているペインから、ハンドルを取り去らない。キーと押下は、ドラッグできない人が使う手段です。
- ロール
none (a group of the product's content and its handles); each handle is a focusable separator- ラベル付け
- Each handle is named by its label (widthLabel for the start and the end handle, heightLabel, cornerLabel) and tells its size as its value in pixels, with its least and greatest. The size indicator is hidden: it draws what the handles already tell.
- 最小ターゲット
- 見た目のサイズが小さくても、ヒット領域は最小ターゲットサイズを満たします。 minimum 32px · pointer 44px · spacing 8px · touch 48px
キーボード操作
| キー | 動作 |
|---|---|
| Tab | Moves through the content, then the handles: start, end, bottom, corner. |
| Arrow keys on a handle | Change the size by step pixels; with Shift, by largeStep (HDL-9, RSF-7). On the start handle the arrow toward the start widens. |
| Page Up / Page Down | Change the size by largeStep. |
| Home / End | Give the size its least or its greatest. |
| Enter / Space | Switch between the greatest size and the size before it (RSF-8). |
備考
- The default least width, 320, is the width at which content must reflow without a sideways scroll (WCAG 1.4.10), so that a person checking a design can reach that width and no narrower by accident; a product sets minWidth lower for a narrower check, and a pane sets its own.
- Dragging movements (WCAG 2.5.7): every size is also reachable by activating a handle (the greatest and the one before) and by its keys.
- The keys follow the window splitter pattern of the ARIA Authoring Practices: each handle is a separator with a value, Home and End give the least and the greatest.
生成元 specs/resizable-frame.spec.json, tokens/sys/measure.tokens.json
- 各ハンドルは、ラベルで名前の付いた、フォーカスできるセパレーターです（ARIA Authoring Practices のウィンドウスプリッター）。ピクセルでの大きさを値として、最小と最大を範囲として伝えます。
- フォーカス順では、ハンドルは中身の後に、先頭側、末尾側、下、角の順で並びます。Outlined の箱がフォーカスが止まる位置になるのは、中身が箱より高くてスクロールする間だけです。
- 矢印キーで
stepピクセル、Shift と矢印キーや Page Up と Page Down でlargeStepずつ大きさを変えます。Home と End で最小と最大になります。先頭側のハンドルでは、先頭側を向いた矢印キーで広がります。 - Enter、Space、またはドラッグしない押下で、最大の大きさと直前の大きさを行き来します。そのため、どの大きさにもドラッグせずに届きます。
- ドラッグの間は、中身に埋め込まれたドキュメントがポインターを取らないので、ポインターがその上を通ってもドラッグは途切れません。
- サイズ表示は支援技術から隠されています。ハンドルの値がすでに伝えていることを描いているだけだからです。動きを減らす設定がオンのときは、キーや押下による変化は即座に移ります。
- 強制カラーモードでは、Outlined の縁とサイズ表示の文字は文字色に、サイズ表示の地はキャンバスの色になります。
- 描く各ハンドルにラベルを付けます。ないとハンドルは描かれて動きますが、デバッグビルドで報告されます。
- 最小の幅から上の、許すどの大きさでも中身が使えることを確かめます。