追従告知バーStickyNoticeBarExperimental
アクションにつなげたいサイト告知を、明示的に選んだ上端または下端の一方へ追従表示します。
プレビュー
状態とバリエーション
下端・疑似ブラウザ内
下端はホームインジケータ用の safe-area-inset-bottom を含みます。
スクロールして追従を確認
この領域をスクロールしても、告知バーは選択した端に残ります。
変更点
レビュー項目にアクセシビリティとダークモードの確認を追加しました。
上端・画面いっぱい
既定の placement は viewport で、body へ portal して fixed で置きます。祖先の overflow に切られないので、どの画面から呼んでも上端に付きます。上端は safe-area-inset-top を含みます。
長い告知を狭い画面で読む
本文は省略しません。狭い画面では本文が折り返し、リンクと閉じるボタンが次の行に落ちます。1行に収めるために文章を削らなくて済みます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| edge | 'top' | 'bottom' | - | 表示する端です。既定値はなく、必ず一方を選びます。 |
| children | React.ReactNode | - | 告知本文です。長文は省略せず折り返します。 |
| icon | React.ReactNode | - | 装飾扱いの先頭アイコンです。 |
| action | React.ReactNode | - | 閉じるボタンより前に置くリンクまたはボタンです。 |
| onDismiss | () => void | - | 指定すると44pxの閉じるボタンを表示します。表示状態は利用側で管理します。 |
| dismissLabel | string | 'Dismiss announcement' | 閉じるボタンの aria-label とツールチップです。 |
| placement | 'viewport' | 'container' | 'viewport' | 通常は fixed。疑似ブラウザ内では container を使います。 |
| portalContainer | HTMLElement | null | - | container 配置の portal 先です。位置決めの基準を持つ要素を渡します。 |
使い方
import * as React from "react"
import { Button, StickyNoticeBar, TextLink } from "@gunjo/ui"
import { IconSpeakerphone as Speakerphone } from "@tabler/icons-react"
export function SiteAnnouncement() {
const [visible, setVisible] = React.useState(true)
return (
<main className="h-screen overflow-hidden bg-background text-foreground">
{visible ? (
<StickyNoticeBar
edge="top"
icon={<Speakerphone className="h-5 w-5" />}
action={<TextLink href="#release-notes">変更点を見る</TextLink>}
dismissLabel="告知を閉じる"
onDismiss={() => setVisible(false)}
>
デザインレビュー用チェックリストを更新しました。長い告知は狭い画面で折り返します。
</StickyNoticeBar>
) : null}
<div className="h-full overflow-y-auto px-6 pb-24 pt-28">
{!visible ? (
<Button size="touch" onClick={() => setVisible(true)}>
告知をもう一度表示
</Button>
) : null}
<section id="release-notes" className="mt-[36rem] scroll-mt-28">
<h2>変更点</h2>
</section>
</div>
</main>
)
}