This question already has answers here:
Microsoft Fluent Design for Web (CSS framework) [closed]
(7 answers)
Closed 4 years ago.
How to create a Microsoft Fluent Design transparency with CSS or other tools? I like this design language and want to add some elements to my webpage.
Use one of the Github projects that implement Fluent Design in ReactJS:
React-UWP
FluentFramework
For example:
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" />
)
}
}
References
React-UWP Example
Microsoft Fluent Material
You can use this library for Reveal Effect in Fluent Design System.
And you need to wait for the backdrop-filter CSS supported for background blur effect (Safari and Edge support -webkit-backdrop-filter).
https://github.com/d2phap/fluent-reveal-effect
Related
I'm trying to use vaadin badges in lit element.
The documentation is mentioning to "To use these classes in your application, enable them in your theme’s theme.json" but I don't have such a file so it is really confusing to me. Most of the documentation focuses on Java so I am guessing this is where the confusion comes from. So far I have only installed some components via NPM.
I tried to create a frontend/themes/common-theme/theme.json file anyways, but without success so far.
Here is how my element looks like at the moment :
import {LitElement, html} from 'lit';
import '#vaadin/vertical-layout';
import '#vaadin/horizontal-layout';
import '#vaadin/vaadin-lumo-styles/badge.js';
export class PaymentLink extends LitElement {
static properties = {
version: {},
link : { Object}
};
constructor() {
super();
}
render() {
return html`
<vaadin-horizontal-layout>
${this.link.id}
<span theme="badge">Pending</span>
</vaadin-horizontal-layout>
`;
}
}
customElements.define('payment-link', PaymentLink);
Could someone please show me the light? Here is a stackblitz example : https://stackblitz.com/edit/lit-element-jjzdpa?file=src/index.js
The #vaadin/vaadin-lumo-styles/badge.js module only exports the styles, just importing it will not automatically create a style tag with the respective CSS. With Vaadin Flow or Hilla applications that can done automatically by configuring said theme JSON file.
If you want to use badge standalone in a Lit app, the best approach is probably to add the badge styles to the styles of your root / application Lit component:
import { badge } from '#vaadin/vaadin-lumo-styles/badge.js';
class MyLitApp extends LitElement {
static get styles() {
return [badge, /* ...other app styles */]
}
}
Note that if one of your components using badge uses a shadow root, then you need to add the badge styles to that component in the same manner.
We are currently migrating our frontend from jQuery to Reactjs.NET. We are using React 16.8 which allows us to use React Hooks instead of classes.
We setup our project successfully and tried it first with classes and server side rendering which worked well, but my team rather use React Hooks. I tried using Webpack + Babel to transpile .jsx files since it didn't work anymore using only razor helper #Html.React(), but I still get the same error from my component.
We are using Asp.NET 4.x and NET framework 4.7.
This is my view children.cshtml
#Html.React("ChildrenForm", new {
familyTiesId = Model.FamilyTiesId
},
serverOnly:true
)
This is my ReactConfig.cs:
namespace Nop.Web
{
public static class ReactConfig
{
public static void Configure()
{
// If you want to use server-side rendering of React components,
// add all the necessary JavaScript files here. This includes
// your components as well as all of their dependencies.
// See http://reactjs.net/ for more information. Example:
ReactSiteConfiguration.Configuration
.AddScript("~/Scripts/Components/Customer/ChildrenForm.jsx");
JsEngineSwitcher.Current.DefaultEngineName = V8JsEngine.EngineName;
JsEngineSwitcher.Current.EngineFactories.AddV8();
}
}
}
My component:
import React, { useState, useEffect } from 'react';
const ChildrenForm = (props) => {
const [ familyTiesId, setFamilyTiesId ] = useState(props.familyTiesId);
...
}
It should work, but instead I get:
SyntaxError: Unexpected identifier
Line 20: #Html.React("ChildrenForm", new {
Line 21: ddtl = Model.DDTL,
Line 22: listFamilies = Model.ListFamilies,
...
[JsCompilationException: SyntaxError: Unexpected identifier
at ChildrenForm.jsx:6:8 -> import React, { useState, useEffect } from 'react';]
JavaScriptEngineSwitcher.V8.V8JsEngine.InnerExecute(String code, String documentName) +258
React.ReactEnvironment.EnsureUserScriptsLoaded() +548
It seems like we cannot import files when using razor helper #Html.React and server side rendering.
How can I do an import and use React Hooks while server side rendering?
Instead of having to import it, you can just use:
const [ familyTiesId, setFamilyTiesId ] = React.useState(props.familyTiesId);
Just call useState directly instead of importing.
In my vaadin application I need to implement a fixed header, that changes size depending on the scroll position of the UI.
While there are geters for scroll position in Vaadin 8, there seems to be no functionallity implemented to listen for scroll events. So I tried to implement a JavaScript connector, that just informs the server-side UI, that the user has scrolled, so the server-side UI can then notify the Header as a scrollListener.
So far thats what I planned, but I just can't find out, how to implement my connector in a way that it.
is active after the site got requested by a Client.
is able to call my server-side UI.onScrollEvent() method.
Does anyone know, how the described behavior could be implemented?
Thank you for your help in advance.
After I ran into a few issues with implementaton of a custom widget to achieve, I went for a different approach, using extensions in a vaadin-sense. Here is the truncated code for what I did.
(Vaadin requires the client-side connector code shown later in this post to be in a Widget package. I'm not entirely sure if the server-side component has to be in one too, but for conformity reasons with the usual widget-skeleton I put it into one)
So in the package for the widget:
package my.company.project.scrollUI;
import com.vaadin.server.AbstractExtension;
import com.vaadin.ui.UI;
import my.company.project.scrollUI.client.scrollUI.ScrollUIServerRpc;
public class ScrollUI extends AbstractExtension {
private ScrollUIServerRpc rpc = new ScrollUIServerRpc() {
#Override
public void onScroll() {
//do whatever you need for your implementation
...
}
};
public ScrollUI() {
registerRpc(rpc);
}
public void extend(UI ui) {
super.extend(ui);
}
}
as usual the .gwt.xml file in the package folder, nothing special here:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE module PUBLIC "-//Google Inc.//DTD Google Web Toolkit 2.5.1//EN" "http://google-web-toolkit.googlecode.com/svn/tags/2.5.1/distro-source/core/src/gwt-module.dtd">
<module>
<inherits name="com.vaadin.DefaultWidgetSet" />
</module>
In the package for the client-side code to be compiled to JavaScript:
package my.company.project.scrollUI.client.scrollUI;
import com.vaadin.shared.communication.ServerRpc;
public Interface ScrollUIServerRpc extends ServerRpc {
public void onScroll();
}
And finally the connector for the extension:
package my.company.project.scrollUI.client.scrollUI;
import com.google.gwt.event.dom.client.ScrollEvent;
import com.google.gwt.event.dom.client.ScrollHandler;
import com.google.gwt.user.client.ui.Widget;
import com.vaadin.client.ComponentConnector;
import com.vaadin.client.ServerConnector;
import com.vaadin.client.communication.RpcProxy;
import com.vaadin.client.extensions.AbstractExtensionConnector;
import com.vaadin.shared.ui.Connect;
#Connect(ScrollUI.class)
public class ScrollUIConnector extends AbstractExtensionConnector {
ScrollUIServerRpc rpc = RpcProxy.create(ScrollUIServerRpc.class, this);
#Override
protected void extend(ServerConnector target) {
final Widget ui = ((ComponentConnector) target).getWidget();
ui.addDomHandler(new ScrollHandler() {
#Override
public void onScroll(ScrollEvent event) {
rpc.onScroll();
}
}, ScrollEvent.getType());
}
}
Now don't forget to compile the Widgetset and everything is good to go to be used for your actual UI like all other vaadin extensions:
public class MyUI extends com.vaadin.ui.UI {
#Override
protected void init(VaadinRequest vaadinRequest) {
ScrollUI scrollUI = new ScrollUI();
scrollUI.extend(this);
//everything else that needs to be done
...
}
//everything else that Needs to be done
...
}
I hope this was helpfull for anyone with a similar issue.
I have done this once few years ago by extending the layout component that wrapped the part of UI where I needed this. In GWT there is gwtproject.org/javadoc/latest/com/google/gwt/event/dom/client/… which can be used in DOM handler. So yes, GWT provides suitable client side event. I then used RPC call to server side, where I triggered the corresponding server side event, which I could listen in other parts of the app. The code is not public, but there is LazyLayout add-on that has similar type of implementation, which you could check as reference for your implementation.
https://github.com/alump/LazyLayouts/blob/master/lazylayouts-addon/src/main/java/org/vaadin/alump/lazylayouts/client/LazyVerticalLayoutConnector.java
I have a dart app that contains a template with a material-checkbox which I am unable to use in my component. Here is a simple template to demonstrate the problem (two_boxes.html):
<!--
Simple HTML to test checkboxes
-->
<input type="checkbox" id="cb0">
<label>Standard Checkbox</label>
<material-checkbox label="Material Checkbox" id="cb1">
</material-checkbox>
<button (click)="doTest()">Test</button>
and the corresponding component in which I try to use the checkboxes (two_boxes.dart). I can use the standard checkbox in a cast as expected but cannot find a way to do the same with the material checkbox:
// Component for testing
import 'package:angular/angular.dart';
import 'package:angular_components/angular_components.dart';
import 'dart:html';
#Component(
selector: 'two-boxes',
templateUrl: 'two_boxes.html',
directives: const [MaterialCheckboxComponent],
pipes: const [
COMMON_PIPES
])
class TwoBoxes {
// Get the the two checkboxes and see if they are checked
void doTest() {
var checkbox_standard = querySelector("#cb0");
print(checkbox_standard.runtimeType.toString()); // InputElement
print((checkbox_standard as CheckboxInputElement).checked); // Succeeds
var checkbox_material = querySelector("#cb1");
print(checkbox_material.runtimeType.toString()); // HtmlElement
print((checkbox_material as MaterialCheckboxComponent).checked); // Error!
}
}
The last statement fails when I run the app in Dartium following a "pub serve" (no errors) with:
VM54:1 EXCEPTION: type 'HtmlElementImpl' is not a subtype of type
MaterialCheckboxComponent' in type cast where HtmlElementImpl is
from dart:html MaterialCheckboxComponent is from
package:angular_components/src/components/
material_checkbox/material_checkbox.dart
Clearly this way of casting does not work. I searched for hours how to solve this error and find the correct way to do this but obviously in the wrong places. What am I missing here? I am using Dart VM version 1.24.2.
There is no way to get the component instance from an element queried this way.
You can use #ViewChild()
class TwoBoxes implements AfterViewInit {
#ViewChild(MaterialCheckboxComponent) MaterialCheckboxComponent cb;
ngAfterViewInit() {
print(cb.checked);
}
to get a specific one if you have more than one, you can use a template variable
<material-checkbox #foo label="Material Checkbox">
with
#ViewChild('foo') MaterialCheckboxComponent cb;
You can find more information about this topic in this TypeScript answer angular 2 / typescript : get hold of an element in the template
The syntax is a bit different (type annotations on the right and {} around the optional read parameter, which are not used in Dart.
Is it possible to set HTML5 attribute autocomplete="off" on TextField in Vaadin 7?
I've searched but found no way to set attributes on text fields or just hint browser to disable native autocompletion on input fields in some other way in vaadin.
I think the only way if you use javascript:
TextField tf = new TextField();
tf.addStyleName("xyz");
JavaScript.getCurrent().execute(
"document.getElementsByClassName('xyz')[0].setAttribute('autocomplete', 'off')");
Extend the TextField...
package com.example;
import com.vaadin.ui.TextField;
public class MyTextField extends TextField {
// do other customization here as needed
}
...and - what's the key point here - its client-side Connector
package com.example.client;
import com.vaadin.client.ui.VTextField;
import com.vaadin.client.ui.textfield.TextFieldConnector;
import com.vaadin.shared.ui.Connect;
#Connect(com.example.MyTextField.class)
public class MyTextFieldConnector extends TextFieldConnector {
#Override
public VTextField getWidget() {
VTextField vTextField = super.getWidget();
vTextField.getElement().setAttribute("autocomplete","off");
return vTextField;
}
}
Don't forget to recompile the widget set.
If you use the Viritin add-on, you can now use the HtmlElementPropertySetter class to wrap your TextField component and use that to set the "autocomplete" element property to "off". You could also use the MTextField component that comes with Viritin and just create it as follows:
MTextField username = new MTextField("Username")
.withAutocompleteOff();
This is an extension to #Wojciech Marciniak's answer. His approach worked for me, but I want to note a couple or three modifications I had to do in order for it to work as of 2017/11/28.
1) autocomplete="off" don't seem to work anymore nowadays; at least not on Chrome. Instead, you can use autocomplete="new-password", which works on Chrome 62.0.3202.94 windows 64 bits. I also noticed some inconsistent behaviour with this attribute, as NOT always works - sometimes a list with choices for passwords will show up on the component (specially until you refresh a couple of times, etc.).
2a) Instead of extending the component, you may want to overwrite it by creating the com.vaadin.client.ui.(component)field package in your project, then put the modified (component)FieldConnector.java file in it (in my case I was modifying PasswordField) in case you want all your instances of this component to not remember passwords. The final class source should look like this:
package com.vaadin.client.ui.passwordfield;
import com.vaadin.client.ui.VPasswordField;
import com.vaadin.client.ui.textfield.TextFieldConnector;
import com.vaadin.shared.ui.Connect;
import com.vaadin.ui.PasswordField;
#Connect(PasswordField.class)
public class PasswordFieldConnector extends TextFieldConnector {
#Override
public VPasswordField getWidget() {
VPasswordField vTextField = (VPasswordField) super.getWidget();
vTextField.getElement().setAttribute("autocomplete","new-password");
return vTextField;
}
}
So this way you don't need any other class extending TextField (or PasswordField).
2b) If you want to allow some fields to remember passwords and other that don't, you can extend the component and use your preferred component accordingly. You can keep your connector class as in 2a) but remember to name it something like CustomPasswordFieldConnector, and it should also #Connect with that CustomPasswordField.class, put that class wherever it fits in your project and remember to add the proper import for it in the connector in case it's needed. This class is just a dummy one - you can leave its contents empty in case you don't need any extra functionality (but remember it should extend the proper (component)Field; PasswordField in the example).