Как создать прозрачность Microsoft Fluent Design с помощью CSS или других инструментов? Мне нравится этот язык дизайна, и я хочу добавить некоторые элементы на свою веб-страницу.
Прозрачность Microsoft Fluent Design
Ответы (2)
Используйте один из проектов Github, реализующих Fluent Design в ReactJS:
Например:
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")
);
./МойКомпонент.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" />
)
}
}
Ссылки
person
Paul Sweatte
schedule
10.08.2017
Вы можете использовать эту библиотеку для Reveal Effect в Fluent Design System. И вам нужно дождаться backdrop-filter
CSS, поддерживаемого для эффекта размытия фона (Safari и Edge поддерживают -webkit-backdrop-filter
).
https://github.com/d2phap/fluent-reveal-effect
person
Phap Duong Dieu
schedule
13.06.2018
Пожалуйста, не публикуйте один и тот же ответ на несколько разных вопросов, например здесь. Вместо этого рассмотрите возможность голосования/отметки, чтобы закрыть один вопрос как дубликат другого.
- person Jean-François Corbett; 13.06.2018