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
Fluent UI BlazorのDataGridの使い方
Search
tomokusaba
October 27, 2023
Programming
0
910
Fluent UI BlazorのDataGridの使い方
.NETラボ勉強会2023年10月
Fluent UI BlazorのDataGridの使い方
https://dotnetlab.connpass.com/event/296773/
tomokusaba
October 27, 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
CSC307 Lecture 09
javiergs
PRO
1
500
コード生成を伴うLLMエージェント - 2024.07.18 Tokyo AI
smiyawaki0820
11
4.1k
CSC307 Lecture 07
javiergs
PRO
0
220
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
小さな開発会社を作った理由
polidog
0
1.9k
わかりやすい正解を捨てて、コトに向き合う - スクラムフェス金沢2024 スポンサーセッション
yusukekokubo
0
170
HMSコンペ 11th Solution (team : kansai-kaggler)
t88
1
680
Microservices rules (July 2024) : what good looks like
cer
PRO
0
1.6k
CSC307 Lecture 05
javiergs
PRO
0
210
Terraformテスト入門
msato
0
520
リハビリmruby
kishima
1
160
ドメイン駆動設計の実践
masuda220
PRO
17
5.1k
Featured
See All Featured
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
jQuery: Nuts, Bolts and Bling
dougneiner
61
7.4k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
155
14k
Building a Scalable Design System with Sketch
lauravandoore
458
32k
How to train your dragon (web standard)
notwaldorf
79
5.5k
A Philosophy of Restraint
colly
200
16k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
36
9.1k
GitHub's CSS Performance
jonrohan
1026
450k
Making Projects Easy
brettharned
111
5.7k
Bash Introduction
62gerente
607
210k
Design by the Numbers
sachag
277
18k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
502
140k
Transcript
Fluent UI Blazorの DataGridの使い方 株式会社SAKURUG プロダクトDiv 草場 友光 .NETラボ 2023年10月
自己紹介 • 普段は主にシステムをAzureにモダナ イズする仕事をしています。 • コミュニティ活動を通じて知識をアッ プデートしています。 • 2022/08-2024 Microsoft
MVP (Developer Technologies) • tomo_kusaba
宣伝 【VISION】ひとの可能性を開花させる企業であり続ける VISIONに共感できる仲間募集中。
注意 • 個人の見解・解釈が多分に入っています。 • 見解の相違・事実誤認などありましたらご指摘ください。 • FluentUIBlazor3.2.2の内容に基づいています。 • #dotnetlabでtweetすると左側に表示されます
今日の目的 • Fluent UI Blazor 3がリリースされました。 • 先月はコンポーネントの外観について見てみましたが今月は一番 よく使うと思われるDataGridに着目して見てましょう •
前提:Blazorの基本的な知識
本題の前にASP.NET Core in .NET8 RC2 • Blazor WebAssembly template update
• これまで.NETラボで何回か紹介してきたBlazor WASM Hostedのテンプレート廃止 • 認証のドキュメントも.NET8よりBlazor WASM Hostedにつ いての記述削除 • Blazor WASMはGithub PagesやAzure static Web Appsにホストするためのソリューション • Blazor WASM HostedはASP.NET Coreサーバが必要のた めBlazor Appsに移行が推奨
Fluent UIとは • Microsoftが提唱するUIデザインシステム • W3C準拠 • Fast上に構築されている • このFluent
UIの実装をするために用意されたMicrosoft 公 式のBlazorUIコンポーネントが Microsoft.Fast.Components.FluentUI • すべての主要なブラウザで動作する
なぜ、Fluent UI • Fluent UIには哲学がある! • コンポーネントを提供するのみならずその使用方法、配置方法、設 計原則が厳格に決められている。 • 他のデザインシステムでもコンポーネントの配置方法やデザインの
指針などは決められているが、その上位の指針までは余り見たこ とがない。
Fluent UIのすすめ • Fluent UIにはデザインシステムとしての設計ガイドラインがある • アクセシビリティの配慮、レウアウトの方法、色の使用法などUIコ ンポーネントを使用してそれらを配置する方法について語られて る •
これらを遵守することでシステム間をまたがった同等の操作性が 実現
Fluent UI設計原則 • 参考にしましょう →https://fluent2.microsoft.design/design- principles
Fluent UI Blazor 4について • 現在、Preview.1中 • 名前空間が Microsoft.FluentUI.AspNetCore.Componentsに変更 •
.NET 8以降のサポート • FASTプロジェクトから一旦独立
DataGrid • 内部的にはQuickGridのコードを流用して作成されている • 表形式のデータを表示するために使用される
DataGridの基本 • IQueryable<T>のデータ型を用意しよう • Itemsプロパティに指定 • カラムはPropertyColumnで
??セルにボタンを作りたい!! • PropertyColumnに代わりTemplateColumnを使う! • ポイント1 行を識別するキー情報をDataGridのItemsに入れ ておく。必ずしも表示する必要はない。 • ポイント2 OnClickイベントでキー情報をメソッドに渡してあげ
る • 2点でどの行をのボタンが押されたかを識別する
??条件によって色をつけたい • FluentDataGridのRowStyleプロパティまたはRowClass プロパティを使用する • TGridItemで指定した型(行の型)を引数としてstringを戻り値 として持つメソッドを定義してRowStyleまたはRowClassプロ パティに設定する • それぞれ、スタイルを変更する条件によって異なるスタイルシート
文字列またはクラス名を返すようにする
??条件によってセルの内容を変えたい • TemplateColumnを使用します。 • TemplateColumnの中は自由に条件式などを記述できるので if文などを記述し思いのままに。。。
??セルの内容が長文になるのを折り返 したい • Classにmultiline-textを設定する • (本当は用意した当初はTemplateColumnでdiv要素を使って スタイル設定するネタでしたが簡単にできる手段が用意されまし た👏)
??タイトルが長文になるのを折り返した い • TemplateColumn内のHeaderCellItemTempleteを使用 する • いままで、Titleプロパティで設定されていたものが HeaderCellItemTempleteがある場合テンプレートに代わり HeaderCellItemTemplete内に記述されたものがそのまま タイトルに出る
• div要素でスタイル設定すればよい→単なるスタイルシートの知識 があればあとはいける!!
まとめ • HTMLやスタイルシート書きたくないよって思ってUIコンポーネ ント使っているはずが細かいことやり出すとどうしてもHTMLや スタイルシートが顔を出す!! • やっぱり、知識としてはHTMLやスタイルシートを憶えておいて損 はないけどもUIコンポーネントでこれをいかに局所化できるかが 勝負
参考文献 • Welcome to the Fluent UI Blazor components library
• Microsoft Fluent UI Blazor components
おしまい おしまい