如何使用 CSS 或其他工具创建 Microsoft Fluent Design 透明度?我喜欢这种设计语言,并想在我的网页中添加一些元素。
问问题
886 次
2 回答
1
使用在 ReactJS 中实现 Fluent Design 的 Github 项目之一:
例如:
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" />
)
}
}
参考
于 2017-08-10T17:12:32.903 回答
0
您可以将此库用于 Fluent Design System 中的显示效果。您需要等待backdrop-filter
背景模糊效果支持的 CSS(Safari 和 Edge 支持-webkit-backdrop-filter
)。
于 2018-06-13T06:25:28.547 回答