Microsoft Fluent Design transparency

Question

CSSまたは他のツールを使用してMicrosoft Fluent Designの透明度を作成するにはどうすればよいですか？私はこのデザイン言語が好きで、私のウェブページにいくつかの要素を追加したい。

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