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