Microsoft Fluent Design прозрачность

Question

Как создать прозрачность Microsoft Fluent Design с помощью CSS или других инструментов? Мне нравится этот язык дизайна и я хочу добавить некоторые элементы на мою веб-страницу.

Answer 1

Используйте один из проектов Github, который реализует Fluent Design в ReactJS:

• Реагировать-UWP
• https://github.com/FluentFramework/

Например:

import * as React from "react";
import * as ReactDOM from "react-dom";
import { Theme as UWPThemeProvider, getTheme } from "react-uwp/Theme";
import MyComponent from "./MyComponent";

export class App extends React.Component<void, void> {
  render() {
    return (
      <UWPThemeProvider
        theme={getTheme({
 themeName: "dark", // set custom theme
 accent: "#0078D7", // set accent color
 useFluentDesign: true, // sure you want use new fluent design.
 desktopBackgroundImage: "http://127.0.0.1:8092/staticimages/jennifer-bailey-10753.jpg" // set global desktop background image
        })}
      >
        <MyComponent />
      </UWPThemeProvider>
    )
  }
}
ReactDOM.render(
  <App />,
  document.getElementById("app")
);

./MyComponent.js

import * as React from "react";
import Button from "react-uwp/Button";

export default class MyComponent extends React.Component<void, void> {
  render() {
    return (
      <Button tooltip="Mini Tooltip" />
    )
  }
}

Рекомендации

• Пример React-UWP
• Microsoft Fluent Материал

Answer 2

Вы можете использовать эту библиотеку для выявления эффекта в Fluent Design System. И вам нужно ждать backdrop-filter Поддержка CSS для эффекта размытия фона (поддержка Safari и Edge) -webkit-backdrop-filter).

https://github.com/d2phap/fluent-reveal-effect