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
640
祝 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
Webアプリをできるだけコードを手書きしないで作ってみる
tomokusaba
2
190
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
910
プロンプトエンジニアリング入門
tomokusaba
2
1.2k
Sementic Kernelのネイティブ関数について
tomokusaba
0
930
C#でのPlaywrightを使ったE2Eテストの実際
tomokusaba
0
410
「インフラ初心者」…からのPlaywright Testing
tomokusaba
1
330
Fluent UI Blazorの新しいComponentについて
tomokusaba
0
290
「インフラ初心者の私がAzure VMで.NETアプリをホストするまでサンタを帰さない」の続き!
tomokusaba
1
310
Sementic Kernelのネイティブ関数について
tomokusaba
0
270
Other Decks in Programming
See All in Programming
MicrosoftのPlatform Engineeringガイドを読んで実際になにかやってみた
ymd65536
1
520
冗長なエラーログを削減し、スタックトレースを手に入れる / Reducing Verbose Error Logs and Obtaining Stack Traces
upamune
0
1.1k
雑に思考を整理する技術と効能
konifar
64
31k
Netty Chicago Java User Group 2024-04-17
sullis
0
210
Polars入門
daikikatsuragawa
1
190
MetricKitで予期せぬ終了を検知する話 / Detect unexpected termination with MetricKit
nekowen
1
200
SIMD Parallel Programming with the Vector API
josepaumard
0
240
Ruby on Fails - effective error handling with Rails conventions
talyssonoc
0
110
Code Reviews
bkuhlmann
4
900
初心者のためのRubyKaigi入門/RubyKaigi Introduction
a_matsuda
10
1.6k
“Seeing Like a Programmer”—Resiliency, Limits, and Moral Hazards in Software Engineering (LambdaConf 2024)
chriskrycho
0
150
Introducing Kotlin Multiplatform in an existing mobile app - Workshop Edition | AndroidMakers Paris
prof18
0
160
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
20
1.8k
4 Signs Your Business is Dying
shpigford
176
21k
jQuery: Nuts, Bolts and Bling
dougneiner
60
7.2k
ParisWeb 2013: Learning to Love: Crash Course in Emotional UX Design
dotmariusz
104
6.6k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Stop Working from a Prison Cell
hatefulcrawdad
267
19k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
A better future with KSS
kneath
231
16k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
228
16k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
21
1.6k
Optimising Largest Contentful Paint
csswizardry
13
2.4k
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
おしまい おしまい