エピソード

Fluent UI React トレーニング: スタイルのベスト プラクティスとアイコン

代入 Oleksandr Fediashov

Fluent UI React のインサイトとトレーニング

このチュートリアルでは、2 つの異なるトピックについて説明します。 最初のトピックでは、Fluent UI コンポーネントの有無にかかわらず Griffel CSS-in-JS を使用するベスト プラクティスをいくつか紹介します。 Griffel を使用する場合の一般的な開発パターンと、それらを実装する最適な方法について説明します。 2 番目のトピックでは、Fluent UI に用意されているさまざまなアイコンのバリエーションと、それらを効果的に使用する方法について詳しく説明します。

章

  • 00:00 - 概要
  • 00:11 - スタイル ハンドブック
  • 01:00 - Griffel ランタイム スタイルの制限事項
  • 01:12 - 不適切なスタイル設定の例
  • 02:03 - すべてのスタイルの組み合わせを列挙する
  • 03:17 - インライン スタイル
  • 03:52 - インライン CSS 変数
  • 05:19 - スタイル定義の構成
  • 07:09 - デザイン トークンとテーマ
  • 09:22 - 使用しないでください!重要
  • 11:38 - 入れ子になった結合子
  • 16:37 - アイコンの要約
  • 17:25 - 標準および塗りつぶされたアイコンのバリエーション
  • 18:05 - バンドル アイコン
  • 19:31 - ホバー時にアイコンのバリエーションを切り替える
  • 20:17 - Fluent UI コンポーネント アイコンの処理
  • 21:15 - Outro

開発者