Microsoft Fluent設計透明度

Question

如何使用CSS或其他工具創建Microsoft Fluent設計透明度？我喜歡這種設計語言，並希望在我的網頁中添加一些元素。

Answer 1

使用，在ReactJS實現流利的設計GitHub的項目之一：

• React-UWP
• 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 Example
• Microsoft Fluent Material