![見出し画像](https://assets.st-note.com/production/uploads/images/126878226/rectangle_large_type_2_c7d4940a1f718ab663268d4e9fb2e1a3.png?width=800)
【よくあるUIパーツ収集】ステップバー(プログレスバー)
今回はステップバー(プログレスバー)です。
ナビゲーションタイトルとステップバーのタイトルが重複しているのがMeceになっていないような感覚が気になり、他のサービスを調べてみたのですが、なかなか使われているサービスを見つけられず苦戦しています🥲
見つかったサービスをとりあえずまとめてみました
Youtube
![](https://assets.st-note.com/img/1704593050362-at9uQTFTZk.png?width=800)
![](https://assets.st-note.com/img/1704593071308-tvW0kS4KAx.png?width=800)
![](https://assets.st-note.com/img/1704593084320-XKC019cYVB.png?width=800)
![](https://assets.st-note.com/img/1704593096339-GWcEdAgM8a.png?width=800)
ステップバーの下にナビゲーションタイトルが来る
ナビゲーションタイトルは動画タイトルのまま変わらない
ステップバーのタイトルとナビゲーションタイトルが一致
各ステップが完了しているのかどうかが分からない(白抜きの◯ってなんだ?)
ヨセッティ
![](https://assets.st-note.com/img/1704594094582-opO8yDXJFa.png?width=800)
![](https://assets.st-note.com/img/1704592806537-LhE5HPtfV4.png?width=800)
![](https://assets.st-note.com/img/1704594187731-nfRy94tFRd.png?width=800)
ステップバーの上にナビゲーションタイトルがある
ステップ1にナビゲーションタイトルがない(おそらく選択した色紙の名前がナビになっている?)
ステップ2のナビゲーションタイトルとステップバーのタイトルが異なる
ステップ3移行のステップバーがなくなる
スゴヨセ
![](https://assets.st-note.com/img/1704593851787-WbDyA1Nlz4.png?width=800)
![](https://assets.st-note.com/img/1704593831319-JFX7nGySEO.png?width=800)
![](https://assets.st-note.com/img/1704594044004-ONyDP1Rhdy.png?width=800)
![](https://assets.st-note.com/img/1704594152576-an1fxnXjWp.png?width=800)
ステップバーの下にナビゲーションタイトルがある
ステップ1にナビゲーションタイトルがない(おそらく選択した色紙の名前がナビになっている?)
ステップ2から3にかけて画面が変わっているが、ステップバーは変化がない(混乱しそう?)
その他
日本語の記事だとなかなか解説が見つからないため、英語の記事なども追加で探してみようと思います。(M1だけどマテリアルデザインのページも発見しました)
この記事が気に入ったらサポートをしてみませんか?