ページヘッダー
ページのコンテンツの先頭に置くヘッダーです。ページのタイトルを見出しとして示し、何のページかを伝える文、ページについての短い情報を並べた行、ページ全体に対するアクションを添え、その上に、上の階層へ戻る経路を置きます。
- カテゴリ
- コンテインメント
- トークン
comp.page-header- レベル
- 基礎
- Web
tanrei-page-headerschedule - SwiftUI
TanreiPageHeaderradio_button_unchecked - Jetpack Compose
TanreiPageHeaderradio_button_unchecked - Flutter
TanreiPageHeaderradio_button_unchecked - React Native
PageHeaderradio_button_unchecked
生成元 docs/status/status.json, specs/page-header.spec.json
すべてのパーツがあるページのヘッダー
デザインシステム
デザインシステムをレイヤとして追加する
レイヤは値を変え、語彙を拡張することもあります。コンポーネントをフォークすることはありません。
Tanrei チーム8 分で読めます
ページヘッダーは、ページのコンテンツの先頭に置きます。ページのタイトル、何のページかを伝える 1、2 文、短い情報を並べた行、ページ全体に対するアクションを持ち、その上に、上の階層へ戻る経路を置けます。タイトル以外のパーツは、すべて省略できます。
ページヘッダーは、アプリバーではありません。アプリバーはウィンドウのバーで、上端にとどまり、プロダクトの名前とアイコンだけのボタンを置きます。ページヘッダーはコンテンツの中にあり、コンテンツと一緒にスクロールして見えなくなり、ラベルのあるボタンを置きます。
Web では、ページ自身の要素を <tanrei-page-header> で囲みます。この要素はシャドウルートを持ちません。タイトルは、利用者側で書いた h1 そのものです。クローラーにも、リーダーモードでも、スクリプトのないページでも見つけられ、スクリプトが届いてもレイアウトは動きません。ほかのプラットフォームはまだ実装していません。
（このページの例では、レベル 3 の見出しを使っています。このページには、すでにページ自身のタイトルがあるためです。）
<link rel="stylesheet" href="@tanrei/web/page-header.css" />
<tanrei-page-header>
<p data-part="eyebrow">お知らせ</p>
<h1>トークンは導出され、デザインシステムはレイヤになる</h1>
<p>1 つの値を 1 か所で変えれば、その上に作られたものすべてがそれに従います。</p>
<div data-part="meta">
<time datetime="2026-09-20">2026年9月20日</time>
<span>Tanrei チーム</span>
<span>4 分で読めます</span>
</div>
<div data-part="actions">
<tanrei-button variant="outlined">編集</tanrei-button>
<tanrei-button>共有</tanrei-button>
</div>
</tanrei-page-header>
<script type="module">
import '@tanrei/web/components/page-header';
</script>import { Button, PageHeader } from '@tanrei/react';
import '@tanrei/web/page-header.css';
<PageHeader divider>
<h1>{project.name}</h1>
<p>{project.summary}</p>
<div data-part="actions">
<Button onClick={invite}>招待</Button>
</div>
</PageHeader>パーツは、読む順に書きます。その順序が、どの幅でもフォーカスの順序になります。
| パーツ | Web での書き方 |
|---|---|
| パンくずリスト | <tanrei-breadcrumbs>。または、戻るためのリンク 1 つか、利用者側で作った経路を囲む <div data-part="breadcrumbs">。 |
| アイブロウ | <p data-part="eyebrow">。ふつうの表記で書きます。大文字にするのは、描くときです。 |
| タイトル | 見出し。ページなら h1、ページの一部なら h2、そのほかアウトラインに必要なレベルにします。 |
| 説明 | data-part を持たない最初の <p>。 |
| メタ | <div data-part="meta">。子の要素の 1 つひとつが項目になります。<time>、<span>、リンク、タグなどです。 |
| アクション | 利用者側のボタンやリンクを囲む <div data-part="actions">。 |
headline、description、eyebrow を指定すると、子の中にそのパーツの要素がないときに、要素が代わりに書き出します。level は見出しのレベルです。0（既定）にすると、サイズから決まります。
<tanrei-page-header headline="メンバー" description="このプロジェクトを開ける人。"></tanrei-page-header>この形が描かれるのは、スクリプトが動いた後です。コンテンツのページでは、要素を自分で書いてください。
3 つのサイズ
メンバー
このプロジェクトを開ける人。
タイポグラフィ
テキストスタイルの名前は、サイズではなくレベルで付けます。
1 つのシステム。5 つのプラットフォーム。
同じトークン、同じコンポーネント、同じアクセシビリティの契約を、それぞれの流儀で。
構成要素
| パーツ | 説明 |
|---|---|
1 container | The block that holds the head, as wide as its place in the layout and as tall as its parts, with no fill, no edge and no shape of its own: it is drawn on the surface the page is drawn on. It carries no state: nothing about it answers a pointer, a press or focus. |
2 breadcrumbs · 任意 | What stands above the title and leads back up: the product's Breadcrumbs, or one Link to the level above. It keeps its own look, its own landmark and its own behaviour; the page header only gives it a place. |
3 eyebrow · 任意 | A few words directly above the title that say what the page belongs to — a category, a product, a version — small, tracked wide and in capitals where the script has them. Text, not a heading and not a link. |
4 title | The page's title, and the heading of its level in the page's outline: level 1 for a page, level 2 for a part of one. It wraps onto as many lines as it needs and is never cut, hidden or drawn twice. |
5 description · 任意 | One or two sentences under the title that say what the page is: a lead, quieter than the title and no longer than a line of reading text. A paragraph, with the inline content the product gives it. |
6 meta · 任意 | A line of short facts about the page under the description — a date, an author's avatar and name, a reading time, a state, tags — each one item the product gives, in a row that wraps. |
7 separator · 任意 | The small dot the page header draws between two items that share a row of the meta line. Decorative, never at the start or the end of a row. |
8 actions · 任意 | The product's own Buttons and Links for the whole page: beside the title at the end edge while the head is wide, below the text while it is narrow or where the product asks. |
9 divider · 任意 | One hairline under the head, across its width, where the product asks for it: for a head above content that is not text (a table, a list of records, a set of tabs). |
プロパティ
| プロパティ | 型 | 既定値 | 説明 |
|---|---|---|---|
title | string | "" | The page's title, as plain text. The page header draws it as a heading (PGH-2). The title slot takes its place where the product gives its own heading: on the web that is the page's own heading element, which is how a content page should give it. |
description | string | "" | One or two sentences under the title that say what the page is. Empty draws none. The description slot takes its place where the sentence holds a link, inline code or other inline content. |
eyebrow | string | "" | A few words above the title that say what the page belongs to ("Announcements", "Design system"). Plain text; empty draws none. Written as ordinary words: the page header draws the capitals. |
size | small | medium | large | "medium" | What the head opens. medium: a page. small: a part of a page (a section of a settings page, one record in a list of records). large: a landing page, whose title is a statement. A size sets the title's and the description's text styles and the spaces that go with them, and the heading's level where level is 0; it changes no part's place. A design system may add values. |
level | number | 0 | The level of the heading the title is exposed as, 1 to 6, where the page header makes the heading itself. 0, the default, takes it from the size: 1 for medium and large, 2 for small. Ignored where the product gives its own heading in the title slot, whose level is the product's. |
actionsPlacement | end | below | "end" | Where the actions stand. end: beside the title at the end edge while the head is at least comp.page-header.wide.container-width wide, and below the text while it is narrower. below: under the text at every width, for an article's head and a landing page's, whose actions follow the sentence that leads to them. |
divider | boolean | false | Draws one hairline under the head. For a head above content that is not text — a table, a list of records, tabs — where the eye needs an edge to start from; above an article it is not needed. |
スロット
| スロット | 説明 |
|---|---|
breadcrumbs | What stands above the title: the product's Breadcrumbs, or one standalone Link back to the level above. The page header places it and does nothing else to it. A fixture's string is drawn as plain text in its place. |
title | The product's own heading in place of the title prop: the page's heading element with its text and any inline content (inline code, a word in another language). The page header draws it in the title's style and changes neither its role nor its level. |
description | The product's own description in place of the description prop: a paragraph with links, inline code or a keyboard shortcut. |
actions | The actions for the whole page: the product's own Buttons and Links. The page header lays them out and does nothing else to them. |
アイテム
このコンポーネントが繰り返すアイテムの種類です。フィクスチャはアイテムを順に並べ、各プラットフォームはそれぞれの流儀で種類ごとに名前を付けます。
meta-item
One fact of the meta line: a few words of text (a date, a reading time, a count), or the product's own content in its place — a Link, a Tag, an Avatar or a glyph followed by a name, a group of tags. The page header places it, gives its text the meta line's style and draws the dot between it and its neighbour; it has no props, no role and no states of its own.
| 仕様 | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| アイテム | [data-part="meta"] > * | meta | meta | meta | meta |
| 備考 | Not an element of its own: every element child of the meta part is one item, whatever it is (a time, a span, an a, a tanrei-tag, a ul of tags). | Each top-level view of the meta: view builder is one item (the layout's subviews). | Each composable emitted at the top level of the meta lambda is one item (the layout's measurables). | Each widget of the meta list is one item. | Each element of the meta array is one item; a string is drawn as text in the meta line's style. |
状態
振る舞い
EARS 記法による要件です。各プラットフォームの実装は、この ID に対応するテストで検証されます。要件の原文は仕様ファイルのものをそのまま掲載しています。
| ID | 要件 |
|---|---|
PGH-1 | THE page header SHALL lay out its parts from the top in this order, each at the start edge and each taking no room and no space while it is absent: what the breadcrumbs slot holds (PGH-5), with comp.page-header.breadcrumbs.gap below it; the eyebrow (PGH-6), with comp.page-header.eyebrow.gap below it; the title (PGH-2); the description (PGH-7), comp.page-header.description.gap.small, comp.page-header.description.gap.medium or comp.page-header.description.gap.large below the title by size; the meta line (PGH-8), comp.page-header.meta.gap below the part above it; and the actions (PGH-10, PGH-11). THE page header SHALL bring no space above its first part, and below its last part SHALL keep, inside its own box, comp.page-header.container.padding-block-end.small, comp.page-header.container.padding-block-end.medium or comp.page-header.container.padding-block-end.large by size. It SHALL draw no fill, no edge, no corner shape and no elevation: it stands on the surface its container is drawn on. |
PGH-2 | THE page header SHALL draw its title in the text style of its size — comp.page-header.title.typescale.small, comp.page-header.title.typescale.medium or comp.page-header.title.typescale.large — and in comp.page-header.title.color, and SHALL expose it as a heading: of the level the level prop gives, or WHILE level is 0 of level 1 for medium and large and of level 2 for small, on a platform whose headings have levels, and with the platform's heading trait on one whose headings have none. WHERE the title slot holds the product's own heading THE page header SHALL draw that heading in the title's place, style and color instead of the title prop and SHALL change neither its role nor its level. THE page header SHALL expose the title exactly once and as text: it SHALL NOT hide the title from sight or from assistive technology, SHALL NOT repeat it in another part, and SHALL NOT replace it with a picture. |
PGH-3 | THE page header SHALL wrap its title onto as many lines as it needs and SHALL never cut it, limit it to a number of lines or shrink its text to make it fit: lines break by the rules of the title's language (PRS-19: a line of Japanese or Chinese neither begins with closing punctuation or a small kana nor ends with opening punctuation), a string with no break opportunity that is longer than its line breaks anywhere rather than overflow, and the lines align to the start edge, never justified and never hyphenated unless the product asks. WHERE the platform can balance the lengths of a heading's lines THE page header SHALL ask it to, so that a title of two lines does not end in a single word. THE title SHALL take the whole width the head gives its text and SHALL NOT be limited by comp.page-header.description.measure. |
PGH-4 | THE page header SHALL set the title's and the eyebrow's letter-spacing by the script of their text, as PRS-20 sets a heading's: WHERE their language is Chinese, Japanese or Korean without a negative letter-spacing (the title's negative one is dropped; a positive one, as the eyebrow's, stays), and WHERE their script joins its letters or stacks marks on them (Arabic, Devanagari) at a letter-spacing of zero. No design system chooses this: it is not a token. |
PGH-5 | WHERE the breadcrumbs slot holds content THE page header SHALL place it first, at the start edge, across the head's whole width — above the actions too, which never stand beside it — and SHALL NOT restyle it, cut it, answer its presses or give it a role: Breadcrumbs keeps its own landmark, its own overflow and its own states, and a Link its own. It SHALL come first in the reading order and in the focus order of the head. |
PGH-6 | WHILE eyebrow is not empty THE page header SHALL draw it directly above the title in comp.page-header.eyebrow.typescale and comp.page-header.eyebrow.color, in capitals where its script has them, by the casing rules of its language, and unchanged where the script has none; the capitals SHALL be drawn only: assistive technology, a search of the page, a copy and a translation SHALL get the text as the product wrote it. THE eyebrow SHALL wrap and SHALL never be cut. It SHALL be exposed as text read before the title, SHALL NOT be a heading and SHALL NOT be part of the heading's text or of its accessible name. |
PGH-7 | WHILE description is not empty, or the description slot holds content, THE page header SHALL draw it below the title as a paragraph in the text style of its size — comp.page-header.description.typescale.small, comp.page-header.description.typescale.medium or comp.page-header.description.typescale.large — and in comp.page-header.description.color, no wider than comp.page-header.description.measure times its own font size, at the start edge and never centred; the slot's content SHALL take the description's place, style and color instead of the prop. THE description SHALL wrap by the rules of its language (PRS-19) and SHALL never be cut or limited to a number of lines. A link in it SHALL be underlined at rest (PRS-17), and an inline component in it (inline code, a keyboard shortcut) SHALL sit on its baseline without making its line taller. THE description SHALL be exposed as a paragraph that follows the heading: it is not a heading and not part of the heading's name. |
PGH-8 | WHERE the page header has meta items THE page header SHALL lay them out in the order given as a row that starts at the start edge and wraps, with comp.page-header.meta.item-gap between two items on one row and comp.page-header.meta.row-gap between two rows, the items of a row centred on that row's line of text. Text in an item SHALL take comp.page-header.meta.typescale and comp.page-header.meta.color where nothing inside sets another; WHERE an item holds a glyph or an Avatar followed by text THE page header SHALL centre the two on one line with comp.page-header.meta.icon.gap between them. THE page header SHALL keep an item whole on one row while the item is no wider than the head, SHALL let an item that is wider wrap inside itself, and SHALL cut nothing. It SHALL add no style to anything inside a component placed as an item — a Tag, a Link and an Avatar keep their own colors, sizes and states — SHALL give no item a role, and SHALL NOT reorder, sort or hide items. |
PGH-9 | THE page header SHALL draw, between two items that follow each other on one row of the meta line, a filled circle of comp.page-header.meta.separator.size in comp.page-header.meta.separator.color, centred in the space between them and on the row's line of text; it SHALL draw none before the first item of a row or after the last, whichever items a wrap puts there, and none where the meta line has one item. THE separator SHALL be kept from assistive technology, SHALL NOT be part of the text a person selects or copies, and SHALL NOT be mirrored. WHERE the product writes a separator of its own between items THE page header SHALL NOT remove it. |
PGH-10 | WHERE the actions slot holds content, WHILE actionsPlacement is end and the head is at least comp.page-header.wide.container-width wide, THE page header SHALL place the actions beside its text at the end edge: the eyebrow, the title, the description and the meta line form one column that takes the remaining width, and the actions stand comp.page-header.container.gap after that column, centred on the title's first line, however many lines the title has: one row of actions SHALL stay centred on that line however tall it is, standing out of the line by the same amount above and below and adding no height to the head; WHEN the actions wrap onto more than one row they SHALL instead start at the top of the title's first line and extend downward, never standing out of the head above or below, and the head SHALL be as tall as they need; the column SHALL keep at least half of the head's width, and actions that need more SHALL wrap inside their own box (PGH-11). WHILE actionsPlacement is below, or the head is narrower than that width, THE page header SHALL place the actions below the last part of the text, comp.page-header.actions.gap under it, starting at the start edge. THE width that decides is the head's own — the room its container gives it — never the window's, so a head in a pane beside a list and a head in a full page each lay themselves out for the room they have. |
PGH-11 | THE page header SHALL lay its actions out as a row in the order given, with comp.page-header.actions.item-gap between two actions along the row and between rows where they wrap; beside the text the row SHALL end at the head's end edge, and below the text it SHALL start at the start edge. An action's label SHALL NOT be cut to make the row fit. The actions are the product's own Buttons and Links: THE page header SHALL NOT restyle them, resize them or answer their presses. In the reading order and in the focus order they SHALL come after the meta line in both placements: the order — breadcrumbs, eyebrow, title, description, meta, actions — SHALL NOT change with the head's width. |
PGH-12 | WHILE size is large and the head is narrower than comp.page-header.wide.container-width THE page header SHALL draw its title in comp.page-header.title.typescale.medium and the space under it as comp.page-header.description.gap.medium, and everything else as a large head: a statement set for a wide page does not leave a narrow one two words a line. THE change SHALL be one step at that width, not a size that follows the width continuously, and SHALL change neither the heading's level nor the order of the parts. |
PGH-13 | WHILE divider is true THE page header SHALL draw one line comp.page-header.divider.thickness thick in comp.page-header.divider.color along the bottom edge of its box, across its whole width, below the space of PGH-1, without changing the head's height by more than the line or the place of any part; WHILE divider is false it SHALL draw none. THE line is decorative: it SHALL NOT be exposed as a separator, because the heading already says where the content begins. |
PGH-14 | THE page header SHALL lay itself out as a block in the flow of its container: it SHALL take the whole inline size the container gives it — the main region of an app shell inside its gutters (APS-8), a pane, a card, a dialog — with its start edge on the start edge of the content below it; it SHALL bring no outer space of its own (PRS-15), SHALL never be wider than its container, SHALL have no minimum width and no maximum width, and SHALL NOT scroll. THE page header SHALL scroll with the content it heads: it SHALL NOT stick to an edge, float over the content, collapse or change its size as the content scrolls. A title that stays at the top of the window is the app bar's. |
PGH-15 | THE page header SHALL have no state: it SHALL NOT answer a pointer, a press, a key or focus, SHALL draw no state layer, ripple or focus indicator of its own, SHALL take no place in the focus order and SHALL emit no event. Its text SHALL stay selectable where the platform lets text be selected. Input over a Button, a Link, a Tag or Breadcrumbs inside it reaches that component, which answers it by its own spec. |
PGH-16 | THE page header SHALL add no landmark, no region and no name of its own: it is not the page's banner, which is the frame's header (APS-21), and it is exposed as its parts in their order — what the breadcrumbs slot holds, the eyebrow's text, the heading, the description's paragraph, the meta items, the actions. THE heading SHALL be found by a person who moves by headings and by a machine that reads the document without running script, with the title's text and nothing else as its name. |
PGH-17 | WHEN the title, the description, the eyebrow, the size or what a slot holds changes while the page header is shown THE page header SHALL draw the new content at once, with no motion of its own, and SHALL NOT announce it or move focus: a page whose title changes without a navigation (a record renamed in place) is the product's to announce. |
PGH-18 | WHILE the text size is enlarged THE page header SHALL grow every text style and the description's measure with it, keep its gaps, wrap, and grow in height; the width of PGH-10 and PGH-12 SHALL grow with the text, so that a head whose text has doubled is one column up to twice that width; it SHALL set no fixed height on any part, SHALL cut nothing, SHALL lose no content when the reader raises line height, paragraph spacing, letter spacing or word spacing, and SHALL need no horizontal scrolling at a width of 320 points with text at 200 %. |
PGH-19 | WHERE the platform draws with a person's own forced colors (the web's forced-colors mode, and a platform's equivalent where it has one) THE page header SHALL draw the eyebrow, the title, the description and the text of the meta line in the platform's text color, links in the platform's link color and still underlined, and the separator and the line of PGH-13 in the platform's text color; it SHALL rely on no fill of its own, having none. |
PGH-20 | WHERE the layout direction is right-to-left THE page header SHALL mirror its layout and apply every space by logical start and end: every part starts at the right edge, the meta line runs from the right and wraps to the right edge, and actions beside the text stand at the left edge, their row ending there. THE separator is the same dot in the same place between two items. THE page header SHALL mirror nothing it holds: Breadcrumbs, a Button's glyph and a meta item's glyph are mirrored by their own components and by the icon helper. |
PGH-21 | THE page header 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 page header is shown THE page header SHALL draw itself for the new direction at once, without a motion of its own, keeping its content and the focus of anything inside it. |
PGH-22 | THE page header SHALL lay out the title, the eyebrow and the description, each given as text, as text of its own direction, isolated from the text around it: each takes the base direction of its first strong character, or the layout direction where it has none, so that a left-to-right product name, a version or a token's id keeps its own order in a right-to-left layout and reorders nothing beside it; THE page header SHALL still place each part and align its lines by the layout direction, not by the text's own. Each item of the meta line SHALL be a run of its own in the same way: the digits of a date, a time or a count SHALL NOT be reversed, and the order of the items is the layout's. |
PGH-23 | WHEN size names a value that the active design system does not have, or actionsPlacement names a value this spec does not have, THE page header SHALL render with the default value (the default size's tokens; end), and in debug builds report the unknown value; WHEN level is not 0 and not a whole number from 1 to 6 THE page header SHALL take the level of its size (PGH-2) and in debug builds report it. |
PGH-24 | IF the title is empty and the title slot holds nothing THE page header SHALL still draw the parts it has, SHALL expose no empty heading, and in debug builds SHALL report that a page header has no title: a head without a title names nothing. IF every part is empty THE page header SHALL draw nothing, take no space and expose nothing. WHERE the title slot holds content that is not a heading on a platform whose headings are elements of the content (the web) THE page header SHALL still draw it as the title and in debug builds report that the title is not a heading. |
プラットフォーム別の名前対応
パリティは API が同一であることを意味しません。同じ契約を、各プラットフォームの流儀で表現します。
| 仕様 | Web | SwiftUI | Jetpack Compose | Flutter | React Native |
|---|---|---|---|---|---|
| コンポーネント | tanrei-page-header | TanreiPageHeader | TanreiPageHeader | TanreiPageHeader | PageHeader |
title · プロパティ | headline | title | title | title | title |
description · プロパティ | description | description | description | description | description |
eyebrow · プロパティ | eyebrow | eyebrow | eyebrow | eyebrow | eyebrow |
size · プロパティ | size | size | size | size | size |
level · プロパティ | level | headingLevel | headingLevel | headingLevel | headingLevel |
actionsPlacement · プロパティ | actionsPlacement | actionsPlacement | actionsPlacement | actionsPlacement | actionsPlacement |
divider · プロパティ | divider | showsDivider | divider | divider | divider |
| 備考 | It is the form the figure and the description list take. <tanrei-page-header> is a custom element with **no shadow root**, wrapped around the page's own elements, which stay in the document: <tanrei-page-header><tanrei-breadcrumbs>…</tanrei-breadcrumbs><p data-part="eyebrow">Announcements</p><h1>Title</h1><p>Description</p><div data-part="meta"><time datetime="2026-09-21">21 September 2026</time><span><tanrei-avatar size="small" decorative …></tanrei-avatar> Name</span><tanrei-tag label="Tokens"></tanrei-tag></div><div data-part="actions"><tanrei-button>…</tanrei-button></div></tanrei-page-header>. Parts are found by what they are: the title is the first heading element among the children (h1 to h6; PGH-2: its level is the page's, never rewritten), the description the first p without a data-part, tanrei-breadcrumbs or [data-part="breadcrumbs"] the breadcrumbs slot, [data-part="eyebrow"], [data-part="meta"] (whose element children are the items) and [data-part="actions"] the rest; the spec's slots are these parts, and the element's children are written in the order of PGH-11, which is then the document's order and the focus order with no reordering in script. Everything drawn comes from one stylesheet, @tanrei/web/page-header.css, whose selectors start at tanrei-page-header and are wrapped in :where(); it styles the page before the element is defined and without script, so the title a crawler reads, the title a reader sees before the bundle arrives and the title afterwards are the same element in the same place, and nothing moves when the element is defined. Props are attributes of the wrapper: size, actions-placement, divider. headline (HTML's global title would show a tooltip over the whole head), description, eyebrow and level are conveniences for a head built by script or by the React wrapper: where a part is given as an attribute and no element for it is among the children, the element writes that element itself (an h1 to h6 by level and size); a content page writes the elements, and should. The host is display: block and a size container (container-type: inline-size), with no role; the wide layout of PGH-10 and PGH-12 is a container query at comp.page-header.wide.container-width expressed in rem, so it follows the head's own width and the reader's text size (PGH-18); beside the text the actions are placed by grid lines, not by order, and are centred on the title's first line by aligning to a first row as tall as that line (1lh of the title's style). The separator is a pseudo-element of each item but the first, drawn inside the gap, and the row's own start is clipped by one gap so the dot of an item that begins a row is not seen (PGH-9); it is not text, so it is neither read nor copied. The title takes text-wrap: balance and overflow-wrap: anywhere, line-break: strict under :lang(ja, zh), and letter-spacing: 0 under :lang(ja, zh, ko, ar, fa, ur, hi, mr, ne, bn, th) and the like (PGH-4), where the eyebrow also drops its tracking; the eyebrow's capitals are text-transform: uppercase (PGH-6). Text parts take unicode-bidi: plaintext with alignment by :dir() as productText() does (PGH-22). Under forced-colors: active the dot and the line are CanvasText. What the element adds once defined: the convenience parts above and the debug reports of PGH-23 and PGH-24 — nothing a reader sees. Inside prose the head is an island (tanrei-page-header is in the registry's tag names, PRS-16), so prose's heading and paragraph rules do not reach its h1 and p. The alternative form — a shadow root with a title slot — is still open. Whether the actions beside the title wrap onto more than one row (PGH-10) is measured by the element with a ResizeObserver on the actions box and written as the data-actions-wrapped state attribute on the head; the stylesheet alone keeps every row of actions centred on the title's first line, as one row is. | TanreiPageHeader(_ title: String, description:, eyebrow:, size:, headingLevel:, actionsPlacement:, showsDivider:) { actions } meta: { … } breadcrumbs: { … }, each slot a @ViewBuilder, with second initializers whose title and description are views (the title and description slots). The title carries .accessibilityAddTraits(.isHeader) and .accessibilityHeading(.h1 … .h6) by level. The width that decides the layout is the view's own, through ViewThatFits or a layout that measures its proposal, never the scene's size class. The platform's own large title is the navigation bar's (.navigationTitle with a large display mode): on a compact screen that shows it, the screen does not also draw a page header (the spec's accessibility notes). The meta line is a flow layout (Layout) that knows which item begins a row. | TanreiPageHeader(title, description, eyebrow, size, headingLevel, actionsPlacement, divider, breadcrumbs, titleContent, descriptionContent, meta, actions), the slots as composable lambdas. The title has semantics { heading() }; Compose's semantics have no heading level, so headingLevel is honoured where the platform gains one and is otherwise the trait alone. The layout reads its own constraints (BoxWithConstraints or a custom Layout), not the window size class. The meta line is a FlowRow with the dots drawn by the layout, which knows each row's first item. A screen whose top app bar is the platform's large, collapsing one shows the title there and draws no page header. | TanreiPageHeader(title: …, description:, eyebrow:, size:, headingLevel:, actionsPlacement:, divider:, breadcrumbs:, titleWidget:, descriptionWidget:, meta:, actions:), meta and actions as lists of widgets. The title is wrapped in Semantics(header: true, headingLevel:). The layout is a LayoutBuilder over the widget's own constraints; the meta line a custom multi-child layout that draws the dots between the items of one run. Text scaling is the framework's TextScaler; the width of PGH-10 is scaled by it. | <PageHeader title="…" description="…" eyebrow="…" size="medium" actions={…} meta={[…]} breadcrumbs={…} />; the title and description slots are the titleContent and descriptionContent props. The title has role="heading" (accessibilityRole="header"); a level is exposed where the platform has one (aria-level on the web target). The layout follows the view's own width from onLayout, with the narrow layout drawn first so nothing overlaps before the width is known. The eyebrow's capitals are textTransform: 'uppercase'. Follows the app's direction where an ancestor's is not known. |
トークン
| トークン | 参照先 | 解決値（ライト） |
|---|---|---|
--tanrei-comp-page-header-actions-gap | sys.space.space200 | 16px |
--tanrei-comp-page-header-actions-item-gap | sys.space.space100 | 8px |
--tanrei-comp-page-header-breadcrumbs-gap | sys.space.space150 | 12px |
--tanrei-comp-page-header-container-gap | sys.space.space300 | 24px |
--tanrei-comp-page-header-container-padding-block-end-large | sys.space.space400 | 32px |
--tanrei-comp-page-header-container-padding-block-end-medium | sys.space.space200 | 16px |
--tanrei-comp-page-header-container-padding-block-end-small | sys.space.space100 | 8px |
--tanrei-comp-page-header-description-color | sys.color.on-surface-variant | |
--tanrei-comp-page-header-description-gap-large | sys.space.space200 | 16px |
--tanrei-comp-page-header-description-gap-medium | sys.space.space100 | 8px |
--tanrei-comp-page-header-description-gap-small | sys.space.space50 | 4px |
--tanrei-comp-page-header-description-measure | — | 36 |
--tanrei-comp-page-header-divider-color | sys.color.outline-variant | |
--tanrei-comp-page-header-divider-thickness | sys.border.hairline | 1px |
--tanrei-comp-page-header-eyebrow-color | sys.color.on-surface-variant | |
--tanrei-comp-page-header-eyebrow-gap | sys.space.space50 | 4px |
--tanrei-comp-page-header-meta-color | sys.color.on-surface-variant | |
--tanrei-comp-page-header-meta-gap | sys.space.space150 | 12px |
--tanrei-comp-page-header-meta-icon-gap | sys.space.space75 | 6px |
--tanrei-comp-page-header-meta-item-gap | sys.space.space200 | 16px |
--tanrei-comp-page-header-meta-row-gap | sys.space.space50 | 4px |
--tanrei-comp-page-header-meta-separator-color | sys.color.on-surface-variant | |
--tanrei-comp-page-header-meta-separator-size | sys.space.space50 | 4px |
--tanrei-comp-page-header-title-color | sys.color.on-surface | |
--tanrei-comp-page-header-wide-container-width | — | 480px |
--tanrei-comp-page-header-description-typescale-large | sys.typescale.body-large | 400 16px/1.625 |
--tanrei-comp-page-header-description-typescale-medium | sys.typescale.body-large | 400 16px/1.625 |
--tanrei-comp-page-header-description-typescale-small | sys.typescale.body | 400 14px/1.5714 |
--tanrei-comp-page-header-eyebrow-typescale | sys.typescale.eyebrow | 500 12px/1.3333 |
--tanrei-comp-page-header-meta-typescale | sys.typescale.body-small | 400 13px/1.5385 |
--tanrei-comp-page-header-title-typescale-large | sys.typescale.display | 450 48px/1.0833 |
--tanrei-comp-page-header-title-typescale-medium | sys.typescale.heading-1 | 500 32px/1.25 |
--tanrei-comp-page-header-title-typescale-small | sys.typescale.heading-2 | 500 24px/1.3333 |
フィクスチャ
基準となる描画パターンです。全プラットフォームが同じ ID でスナップショットを撮り、結果を比較できるようにしています。
size: small (4)
small
title: Members description: People who can open this project. size: small small-actions
title: Access tokens size: small slots: actions small-divider
title: Access tokens description: Tokens let scripts act for you. Treat th… size: small divider: true slots: actions level
title: Danger zone description: Deleting a project cannot be undone. size: small level: 3 size: medium (23)
medium
title: Typography description: Text styles are named by level, never by… title-only
title: Typography eyebrow
title: Tokens are derived, and design systems a… eyebrow: Announcements breadcrumbs
title: Button slots: breadcrumbs meta
title: Tokens are derived, and design systems a… items: 3 meta-one
title: Roadmap items: 1 actions
title: Members description: People who can open this project. slots: actions actions-below
title: Members description: People who can open this project. actionsPlacement: below slots: actions divider
title: Typography description: Text styles are named by level, never by… divider: true title-slot
description: Every value a button reads, and what eac… slots: title description-slot
title: Status slots: description docs-page
title: Typography description: Text styles are named by level, never by… slots: breadcrumbs docs-component
title: Button description: Starts an action or leads to a destinati… items: 4 slots: breadcrumbs blog-post
title: Default typefaces and icons, choices of… description: Inter, Noto Sans JP, Roboto Mono and Mat… eyebrow: Announcements items: 4 long-title
title: Text styles by level, corner smoothing a… long-title-actions
title: Text styles by level, corner smoothing a… description: Text styles are named by level, never by… slots: actions unbroken-title
title: packages/web/src/components/navigation-d… everything
title: Add a design system as a layer description: A layer changes values and may extend th… eyebrow: Guides divider: true items: 3 slots: breadcrumbs, actions rtl
title: الرموز مشتقة وأنظمة التصميم طبقات description: قيمة واحدة تتغير في مكان واحد ويتبعها كل… eyebrow: الإعلانات direction: rtl items: 2 rtl-everything
title: أضف نظام تصميم كطبقة description: الطبقة تغيّر القيم وقد توسّع المفردات، و… eyebrow: الأدلة divider: true direction: rtl items: 3 slots: breadcrumbs, actions ltr-title-rtl
title: Tanrei 0.2 description: ملاحظات هذا الإصدار. direction: rtl items: 2 japanese
title: 階層で名付けたテキストスタイル、量としての角のスムージング、そして 4 つ減った… description: テキストスタイルは大きさではなく階層で名付けます。「見出し 2」はどのプロダクト… eyebrow: お知らせ items: 3 japanese-actions
title: メンバー description: このプロジェクトを開ける人。 slots: actions size: large (2)
large
title: One system. Five platforms. description: The same tokens, the same components and… size: large large-landing
title: One system. Five platforms. description: The same tokens, the same components and… eyebrow: Design system size: large actionsPlacement: below slots: actions 生成元 specs/page-header.spec.json, tokens/comp/page-header.tokens.json, design/tokens/
size |
タイトル | 説明 | 用途 | 見出しのレベル |
|---|---|---|---|---|
small |
24 | 14 | ページの一部：設定のセクションや、いくつかあるレコードの 1 つ。 | 2 |
medium（既定） |
32 | 16 | ページ。 | 1 |
large |
48 | 16 | ランディングページのメッセージ。 | 1 |
large のヘッダーを狭い場所に置くと、タイトルは medium の大きさで描かれます。変わるのはこの 1 段階だけで、幅に合わせて大きさが連続して変わるわけではありません。
- タイトルは、ページの見出しです。テキストとして 1 度だけ表示し、途中で切ることも、行数を制限することも、収めるために縮めることもありません。タイトルが長いと高さは増えますが、言葉が失われることはありません。
- ページのレベル 1 の見出しは 1 つで、それがこのタイトルです。ページの中の各部分には、
smallのヘッダーか、コンテンツの中の見出しを使います。 - 同じタイトルを、アプリバーとページヘッダーの両方に表示しないでください。ウィンドウクラスごとに、どちらか一方を選びます。
- パンくずリストは、階層を上へたどるためのものです。ヘッダーの幅いっぱいを使って、最初に置かれます。
- アイブロウは、カテゴリー、プロダクト、バージョンなど、ページが何に属するかを伝えます。テキストであって、リンクでも見出しでもありません。
- 1 つのヘッダーに、両方を置けます。
- 項目は、名前を付けなくても分かる短い情報です。日付、著者、読むのにかかる時間、状態などです。
- ページヘッダーは、同じ行に並んだ 2 つの項目の間に、小さな点を描きます。区切りを自分で書かないでください。
- 1 つの項目が、行をまたいで分かれることはありません。行がいっぱいになると、次の項目から折り返します。
- 著者は 1 つの項目で、装飾の小さなアバターと名前から成ります。
- 複数のタグは、ひとまとめにして 1 つの項目にします。こうすると、タグとタグの間に点は描かれません。
- 名前の付いた情報（「カテゴリー：アクション」など）は、メタの項目ではありません。ヘッダーの下に置く説明リストにします。
actionsPlacement |
ヘッダーの幅が 480 以上のとき | それより狭いとき |
|---|---|---|
end（既定） |
タイトルの横で、末尾側の端。タイトルの 1 行目に対して上下の中央にそろえます。1 段のアクションは、その行より背が高くても中央にそろえたままです。2 段目に折り返したアクションは、その行の上端からはじまり、ヘッダーはそれが収まるように高くなります。 | テキストの下で、先頭側の端。 |
below |
テキストの下。 | テキストの下。 |
- これを決めるのは、ウィンドウの幅ではなく、ヘッダー自身の幅です。ペインの中のヘッダーは、そのペインに合わせてレイアウトされます。
- アクションは、どこに描かれても、読む順序とフォーカスの順序では最後です。
- アクションは 1 つから 3 つまでにし、主なアクションを Filled にします。
divider を付けると、ヘッダーの下に細い線を 1 本描きます。テーブル、レコードのリスト、タブのように、テキストではないコンテンツの上で使います。記事の上では要りません。
- 説明は 1、2 文で書きます。それより長い文章は、コンテンツの側に置きます。
- 日付には、機械が読み取れる
datetimeを付けた<time>要素を使います。 - 別の言語のテキストには
langを付けます。中国語、日本語、韓国語では、タイトルはマイナスの字間を外して描かれます（アイブロウのプラスの字間は残ります）。文字をつなげて書いたり文字に記号を重ねたりする文字体系（アラビア文字、デーヴァナーガリー文字）では、タイトルとアイブロウは字間 0 で描かれます。こうした文字では、字間を広げても詰めても語が崩れるからです。
- ページヘッダーをウィンドウのバーとして使わない。それはアプリバーです。
- アイブロウを大文字で書かない。スクリーンリーダーによっては、大文字を 1 文字ずつ読み上げます。
- 状態を色だけで伝えない。ラベルで状態が分かるタグを使います。
- ロール
none- ラベル付け
- The page header has no role and no name of its own. Its title is a heading — of level 1 for a page (medium, large), of level 2 for a part of a page (small), or of the level the product gives — whose name is the title's text alone. The eyebrow is text read before it, the description a paragraph read after it; neither is part of the heading. Meta items are read in order as the product wrote them; the dots between them are hidden. Breadcrumbs keeps its own navigation landmark and name; actions are the product's own controls with their own names.
- 最小ターゲット
- 見た目のサイズが小さくても、ヒット領域は最小ターゲットサイズを満たします。 minimum 32px · pointer 44px · spacing 8px · touch 48px
キーボード操作
| キー | 動作 |
|---|---|
| Tab | Reaches, at the head's place in the page, the links of the breadcrumbs, then any link in the description, then the links and controls among the meta items, then the actions, in that order at every width (PGH-11). The page header itself is not a stop. |
備考
- Not interactive: the page header takes no input and no focus (PGH-15), so it has no target to size and minimumTarget holds trivially. The Buttons, Links and Breadcrumbs inside it are other components, each with its own target.
- One heading of level 1 per page or screen, and it is this title (WCAG 1.3.1, 2.4.6). The component cannot see the rest of the page, so that is the product's to keep: a page draws one medium or large page header; the heads of its parts are small, or headings of the content. The title should also be, or begin, the document's title, so that the tab, the history and the heading agree (WCAG 2.4.2).
- Do not show the same title twice. On a screen whose app bar already shows the page's title as its headline — a phone's screen, where the platform's own large title lives in the bar — the app bar's headline is the heading and the screen needs no page header; in a wide window, where the app bar holds the product's name and its search, the page header carries the page's title. Choose one per window class; never give both the heading role for the same words.
- No landmark (PGH-16). A head inside the main region is not a banner, and a region for every page head would be noise in the list of landmarks. People who use a screen reader reach it as the first heading of the main region; the skip link of the frame lands just before it (APS-19, APS-20).
- The eyebrow's capitals are drawn, not written (PGH-6): text written in capitals is spelled letter by letter by some screen readers and loses its meaning in translation. Write "Announcements".
- A date in the meta line is the product's text, formatted for the reader's language; on the web it is a time element with a machine-readable datetime. An author is a name in words; the avatar beside it is decorative, because the name is next to it (the avatar's decorative prop). A state is a Tag whose label says it in words (TAG-11): a status is never told by color alone (WCAG 1.4.1).
- Where the meta items are a set a person counts (three tags), the product groups them in its platform's list semantics as one item; the page header gives items no role (PGH-8).
- Reading order is fixed while the layout is not (PGH-11): in a wide head the actions are drawn level with the title and still come last. A person who tabs through a head with links in its meta line goes down the text and then to the actions at the far edge; that is the same order a narrow head has, which is what WCAG 2.4.3 asks when a layout changes with width.
- WCAG 1.4.3 (contrast) in the default system: the title is on-surface and the eyebrow, the description and the meta text are on-surface-variant, each held to 4.5:1 on every surface role by the token invariants. The page header brings no fill, so on a tinted band the product sets the four color tokens for that band and owns the contrast there. The dot and the line are decorative.
- WCAG 1.4.4, 1.4.10 and 1.4.12 (resize, reflow, text spacing): PGH-18. The title is never cut at any size (PGH-3), so a long title in a narrow window costs height, not words.
- Web: the title, the description, the eyebrow, the meta items and the actions are the page's own elements, children of `<tanrei-page-header>` in the document, and there is no shadow root: the heading is an `h1` a crawler, a reader mode, a page without script and a screen reader all find, and the head is drawn by a stylesheet before any script runs. Nothing is shown differently before the element is defined.
- The page header has no states, so no design system decides how one looks.
生成元 specs/page-header.spec.json, tokens/sys/measure.tokens.json
- タイトルは、利用者側で書いた見出しのままで、レベルも変わりません。見出しの名前は、タイトルのテキストだけです。
- アイブロウは見出しの前に、説明は見出しの後に読み上げられます。どちらも見出しの一部にはなりません。
- メタの項目の間の点は、読み上げられず、コピーもされません。
- ページヘッダーは、ランドマークを増やさず、フォーカスが止まる位置にもなりません。
- 読む順序とフォーカスの順序は、どの幅でも同じです。
- 幅 320 の場所でテキストを 200% にしても、すべての言葉、項目、アクションが表示され、横にスクロールするものはありません。
- 強制カラーモードでは、テキスト、点、線を、システムのテキストの色で描きます。
- 右から左のレイアウトでは、すべてのパーツが右から始まり、テキストの横のアクションは左に置かれます。左から右に書かれたタイトルは、その中の順序を保ちます。
- ページごとに、レベル 1 の見出しを 1 つ置きます。
- 文書のタイトルは、ページのタイトルと同じにするか、ページのタイトルで始めます。
- アクションに名前を付け、ヘッダーに置いた画像には代替テキストを付けます。