hypersigプログレスとスケルトン
割合の分だけ塗りつぶされるバーと、読み込み中の内容の代わりに置くブロックです。
実行結果
progress.rs
use hypersig::html::{div, p};
use hypersig::style::Style;
use hypersig::style::pattern::{stack, wrap};
use hypersig::style::value::rem;
use hypersig::{Page, Signals};
use hypersig_ui::{ButtonSize, ButtonVariant, button, progress, skeleton};
use serde::{Deserialize, Serialize};
#[derive(Signals, Serialize, Deserialize)]
pub struct Upload {
percent: i32,
loading: bool,
}
pub fn page() -> Page<Upload> {
let percent = Upload::percent();
let loading = Upload::loading();
let initial = Upload {
percent: 40,
loading: true,
};
Page::new(
"アップロード",
initial,
)
.child(
div()
.css(stack(rem(1)).max_width(rem(24)))
.child(progress(
"アップロード",
percent,
))
.child(
div()
.css(wrap(rem(0.5)))
.child(
button(ButtonVariant::Secondary, ButtonSize::Sm)
.on_click(percent.set((percent - 10).max(0)))
.text("-10%"),
)
.child(
button(ButtonVariant::Secondary, ButtonSize::Sm)
.on_click(percent.set((percent + 10).min(100)))
.text("+10%"),
)
.child(
button(ButtonVariant::Outline, ButtonSize::Sm)
.on_click(loading.toggle())
.text("読み込み中の表示を切り替える"),
),
)
.child(
div()
.attr("aria-busy", "true")
.css(stack(rem(0.5)))
.show(loading)
.child(skeleton().css(Style::new().height(rem(1)).width(rem(16))))
.child(skeleton().css(Style::new().height(rem(1)).width(rem(12)))),
)
.child(p().show(!loading).text("レポートの準備ができました。")),
)
}アクセシビリティ
バーは role="progressbar" を持ち、aria-valuenow が常に値と同じになるので、スクリーンリーダーはラベルと割合を読み上げます。0 未満や 100 を超える値は、0 や 100 として描かれ、読み上げられます。
スケルトンは支援技術から隠してあります。内容を読み込み中であることは、別の場所でスクリーンリーダーに伝えてください。デモではスケルトンを置いた領域に aria-busy を付けています。