Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
祝 Ver.3リリース Fluent UI Blazorのすすめ
Search
tomokusaba
September 22, 2023
Programming
0
820
祝 Ver.3リリース Fluent UI Blazorのすすめ
.NETラボ 勉強会 2023年9月
https://dotnetlab.connpass.com/event/294666/
#FluentUI
#Blazor
tomokusaba
September 22, 2023
Tweet
Share
More Decks by tomokusaba
See All by tomokusaba
Semantic Kernelの最新状況及び入門
tomokusaba
0
7
Fluent UI Blazor 最新Update
tomokusaba
1
200
アクセシビリティの観点からみたFluent UI Blazorのすすめ
tomokusaba
1
270
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
280
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
1.2k
プロンプトエンジニアリング入門
tomokusaba
2
1.5k
Sementic Kernelのネイティブ関数について
tomokusaba
0
1k
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
670
「インフラ初心者」…からのPlaywright Testing
tomokusaba
1
370
Other Decks in Programming
See All in Programming
継続的な活動で築く地方エンジニアの道
myamashii
2
350
さきがけから振り返るアーキテクチャ刷新 / Reflecting on the Architectural Renewal from the Vanguard
nrslib
2
770
CSC307 Lecture 08
javiergs
PRO
0
330
実用的かつリーズナブルな 「Azure × Gemini × LINE」~キャラクターBot 実装ライブデモ~
tomodo_ysys
1
170
【Go言語】golangci-lintの使い方
tomo1227
0
270
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
Rust.Nagoya #1
codemountains
0
170
유연한 Composable 설계
l2hyunwoo
0
380
CSC307 Lecture 05
javiergs
PRO
0
210
AWSでゲームサーバーを運用! Amazon GameLiftのお話
iriikeita
0
200
From Spring Boot 2 to Spring Boot 3 with Java 22 and Jakarta EE
ivargrimstad
0
1.9k
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
Featured
See All Featured
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Git: the NoSQL Database
bkeepers
PRO
423
64k
The World Runs on Bad Software
bkeepers
PRO
63
11k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
277
13k
Writing Fast Ruby
sferik
623
60k
The Mythical Team-Month
searls
217
43k
A Tale of Four Properties
chriscoyier
155
22k
Building an army of robots
kneath
301
42k
GraphQLとの向き合い方2022年版
quramy
36
13k
4 Signs Your Business is Dying
shpigford
178
21k
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Producing Creativity
orderedlist
PRO
340
39k
Transcript
祝 Ver.3リリース Fluent UI Blazorのすすめ 株式会社SAKURUG エンジニアリングユニット 草場 友光 .NETラボ
2023年9月
自己紹介 • 普段は主にシステムをAzureにモダナ イズする仕事をしています。 • コミュニティ活動を通じて知識をアッ プデートしています。 • 2022/08-2023 Microsoft
MVP (Developer Technologies) • tomo_kusaba
宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。
注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • 本日リリースの3.1.0の内容に基づいています。 • #dotnetlabでtweetすると左側に表示されます
今日の目的 • Fluent UI Blazor 3がリリースされました。 • 機能アップポイントや使いこなしポイントを見ていきましょう!
Fluent UIとは • Microsoftが提唱するUIデザインシステム • W3C準拠 • Fast上に構築されている • このFluent
UIの実装をするために用意されたMicrosoft 公 式のBlazorUIコンポーネントが Microsoft.Fast.Components.FluentUI • すべての主要なブラウザで動作する
<fluent-select> ... </fluent-select> Fastのタグを元にJavaScriptでDOM生成 <FluentSelect ... /> BlazorのUIコンポーネントとしてパラメータを受け取り、Fastのタグを出力 Fast上に構築とは? JSInterop
Fluent UIのCSS
Fluent UI Blazor導入方法 • パッケージを導入 dotnet add package Microsoft.Fast.Components.FluentUI •
スタイル • WebAssemblyの場合index.htmlにServerの場合_Layout.cshtmlに <link href="{PROJECT_NAME}.styles.css" rel="stylesheet" /> <link href="_content/Microsoft.Fast.Components.FluentUI/css/reboot.css" rel="stylesheet" /> • using • _Imports.razorにusingを追加 @using Microsoft.Fast.Components.FluentUI • Program.csに以下を追加 builder.Services.AddFluentUIComponents(options => { options.HostingModel = BlazorHostingModel.WebAssembly; });
デザイントークン • デザインのカスタマイズとパーソナライゼーションを自動的に行う ことができます。 • これは、デザイントークンを設定することで実現することができま す。 • 例えば、「ライトモード」や「ダークモード」と呼ばれるようなスタイ ル設定をデザイントークンの機能によって設定することができま
す。
アクセントカラー • アクセントカラーとはアプリケーションUIの中で象徴的な色を1つ 設定することができる • 例えば。。。。 • Excel→#107C41 • PowerPoint
→ #C43E1C • Word → #185ABD • Teams → #6264A7
レイアウトコンポーネント • Ver3よりレイアウトコンポーネントが追加されている • 今までBootstrapで行ってきたようなGridシステムのようなレ イアウトやスタックといったレイアウトが容易に行えるようになっ ています。 • これらの組み合わせによって容易に3ペインの画面などを作るこ とができます。
Grid • 12ポイントのグリッドシステム • 5種類のブレイクポイントを持っている • レイアウトをするのに最も多用するコンポーネント • BootstrapのGridから移行するのに違和感なく使うことができ ると思います。
Stack • 子コンポーネントを水平または垂直に配置する • 子コンポーネントがコンテナ内でどのように整列されるか? • 右より?左より?センタリング? • コンポーネント間の間隔を調整
入力コンポーネント • FluentInputBaseを継承している • FluentInputBaseはBlazorのComponentBaseを継承し ている • 従って、EditFormに用意されているデータ検証が使える!!
Text Field • string?型の入力をサポートする入力コンポーネント
Number Field • 数値の入力をサポートする入力コンポーネント • ただし、EditFormで入力検証時には小数値の入力には注意が必 要
DatePicker/TimePicker • 日付や時刻をドロップダウンで選択し入力する機能があります。
Checkbox • いわゆるチェックボックスのFluentUIデザイン実装
Search Field • 検索要素のテキスト入力要素
Listbox/Combobox/Selectbox • コード上はこの3つはほぼ共通。 • ComboboxとSelectboxの違いは複数選択が可能かどうか> Selectboxは複数選択のオプションあり
DataGrid • 内部的にはQuickGridのコードを流用して作成されている • 表形式のデータを表示するために使用される → 来月詳しい使い方をユースケース別に解説していきます!
他にもいろいろと便利なUI
Switch • bool値を入力する入力コンポーネント
Tabs • 水平方向と垂直方向のタブを実装することができる
Dialog • プライマリウィンドウまたは別のダイアログウィンドウにオーバー レイされるウィンドウ • 例えば、モーダルウィンドウとか・・・
CodeEditor • Monacoエディタのラッパー
Tooltip • ツールチップはマウスを合わせると情報を提示する部品
Panel • 画面の右側あるいは左側に表示されるダイアログ
AutoComplete • 3.1.0の新機能(new) • デモにて!!
テンプレートにFluent UIを導入した • BlazorテンプレートはHTML+Bootstrap+CSSで3ペインの 画面構成を行っている • しかし、せっかくBlazor使っているのだから基本HTMLは書きた くない!! • Fluent
UI Blazor 3よりLayout Componentsが入ってい る! • きっとこれで可能!
MainLayout.razor <FluentLayout Style="height: 100%"> <FluentHeader>header</FluentHeader> <FluentStack Orientation="Orientation.Horizontal" Width="100%" Style="height:stretch"> <NavMenu
/> <FluentBodyContent> <ChildContent> @Body </ChildContent> </FluentBodyContent> </FluentStack> <FluentFooter Style="bottom:auto;position:fixed;"> .NET Lab 2023/09 footer </FluentFooter> </FluentLayout> FluentLayout FluentHeader FluentStack(水平方向に) FluentFooter NavMen u FluentBodyContent
NavMenu.razor <FluentNavMenu Width="150"> <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.Home())" Text="Home" Href="/" /> <FluentNavMenuLink
Icon="@(new Icons.Regular.Size24.Calculator())" Text="Counter" Href="counter" /> <FluentNavMenuLink Icon="@(new Icons.Regular.Size24.Database())" Text="Fetch data" Href="fetchdata" /> </FluentNavMenu>
デモ
今回使用したソースコード • https://github.com/tomokusaba/FluentUI3Sample
参考文献 • Welcome to the Fluent UI Blazor components library
• Microsoft Fluent UI Blazor components
おしまい おしまい