Flouent-UIのセットはFlouent Design Systemから啓発されたReactコンポーネントライブラリです.

1.はじめに
Website|Github
Reactコンポーネントライブラリはもうたくさんあります.中には高品質のサンプルもたくさんありますが、他のコンポーネントライブラリのデザインをたくさん見たら、Fluent-UIはユニークな選択をしてくれると信じています.
2.ハイライト
Acrylic
Acrylicの効果を実現するプロセスは、驚きの連続であり、最初の実装は親レベルのbackgroundを継承し、filterを介してボケの効果を付加するものであり、これはbackground-attachment: fixedに依存するだけでなく、backgroundが親レベル(例えば、body)に書いたらどうしようもない.
その後、backdrop-filterは上記の二つの問題を完璧に解決することができますが、最初はsafariのデフォルトサポートしかありませんでした.chromeはExperimental Web Platform Featuresを開けなければなりません.その後、chrome 77は突然デフォルトでサポートしましたか?これによりfilter案は「polyfill」になる.
Acrylicの効果を体験したいですが、Boxのコンポーネントを見ることができます.
ガラスの香りがとてもいいです
Reveal
性能の問題があるので、まだテスト中の機能です.体験したいのはCommand、Navigationを見ることができます.
特定のコンポーネントを使用する以外に、hooksの呼び出し方法も実装されている.

インストール

yarn add @fluent-ui/hooks

は

を使用します.

import { useReveal } from '@fluent-ui/hooks'

function App () {
  const [RevealWrapper] = useReveal(66)
  
  return (
    

      
1
      
2
      
3
    
  )
}

Icon
Flouent-UIのアイコンはRemixIconに基づいて二次開発されます.
すべてのアイコンはsvgに基づいています.このようにして、参照のアイコンだけをパッケージ化して、フォントファイル全体をロードするのではなくてもいいです.

インストール

yarn add @fluent-ui/icons

は

を使用します.

import BankFillIcon from '@fluent-ui/icons/BankFill'

function App () {
  return (
    
  )
}

Box+theme
Flouent-UIはreact-jss+styled-systemの組み合わせを採用しています.Boxコンポーネントはあなたのコンポーネントをカプセル化して、ほとんどのCSSのニーズを実現できます.
Boxで直接テーマ内のカラーシェアbreakpointなどを使えば、デフォルトのテーマを見たり、デフォルトのテーマを修正したりできます.

  Hello

また、AcrylicはBoxコンポーネントに実装されていますので、Command、Navigation、CardなどBoxベースのコンポーネントはAcrylic効果をデフォルトでサポートしています.
文書ページ
文書の枠組みは長い間調べましたが、最後にGatsbyJSを使いました.彼のMarkdownプラグインは本当に断りにくいです.同時に、豊かな生態が多くの穴を踏んでいます.
また、アムウェイの素敵な部署を提供します.ZEIT Now、Gatsbyはキーを押して展開します.興味のある仲間はお金が要らないことを知ることができます.
より良い体験をするために、わざわざホームページの編集コード、皮換え、画像交換、検索、言語交換機能を実現しました.
3.後の話
審査から4ヶ月の間、20＋個の部品を実現しました.文書ページの作成にも時間がかかりました.作者もこの過程からソースプロジェクトの様々な困難を経験しました.lerna、typescript、jss、包装の穴は連続的に踏み続けています.もちろん、収穫は大きいです.
長期メンテナンス!現在のバージョンは生産環境に適していないので、正式版が期待されます.
皆様の小さいパートナーissuesがバグを提起することを歓迎します.
他に何か問題がありますか?交流したいなら、スレの下にメッセージを書いてもいいです.またはWeChat chensmokeを入れてもいいです.
4.更新
最新バージョン1.0.0-alpha.1

1.0.0-alpha.1

reveal効果をcss var()に変更して実現しました.性能は明らかに改善されました.

文書のトップページのスタートボタンはもうそんなに長く待たないと注文できません.