i am trying to apply styles to the header vaadin grid component but nothing comes out what could be the problem
I have components in page
<script-loader-grid></script-loader-grid>
and inside it component I try implement styles
<style>
${styles}
:host {
height: 150px;
}
[part="header-cell"] {
background: red;
}
</style>
<vaadin-grid id="test" .items ="${test_data}">
<vaadin-grid-column path="company" header="Company" ы></vaadin-grid-column>
<vaadin-grid-column path="script" header="Script"></vaadin-grid-column>
<vaadin-grid-column path="stage" header="Stage"></vaadin-grid-column>
<vaadin-grid-column path="atributes" header="Atributes"></vaadin-grid-column>
</vaadin-grid>
`
I resolve my problem this way, just using registerStyles
import { registerStyles } from '#vaadin/vaadin-themable-mixin/register-styles.js'
import {css} from '#vaadin/vaadin-themable-mixin/register-styles'
class scriptLoaderGrid extends connect(store)(LitElement) {
static get properties() {
return {
opened: {type: Boolean},
}
}
constructor() {
super()
registerStyles('vaadin-grid', css`
:host [part~="header-cell"] ::slotted(vaadin-grid-cell-content), [part~="footer-cell"] ::slotted(vaadin-grid-cell-content), [part~="reorder-ghost"] {
background:red
}
`)
}
......
<vaadin-grid .items ="${test_data}" theme="special-field">
<vaadin-grid-column path="company" header="Company"></vaadin-grid-column>
.....
</vaadin-grid>
Related
I want to react on events started by elements placed in the data-grid rows.
Vaading data-grid prevents events from bubbling up to the parent component containing the grid. Having buttons placed in the grid column rendered for each row I cannot catch the click or any other event from the component that hosts the grid.
The examples from https://vaadin.com/components/vaadin-grid/html-examples are relying on js hooks being attached in the html file. I am working with Lit-element and trying to do the same at firstUpdated() callback. The problem is that apparently at this point the table is not available.
<vaadin-grid id="test" .items=${this.data} theme="compact">
<vaadin-grid-column width="40px" flex-grow="0">
<template class="header">#</template>
<template>
<vaadin-button style="font-size:10px;" theme="icon" focus-target #click="${(e) => { console.log(e) }}">
<iron-icon icon="icons:create"></iron-icon>
</vaadin-button>
</template>
</vaadin-grid-column>
</vaadin-grid>
I expected to have the log and nothing happens as the grid component prevents event from bubbling up to my component.
The code that tries to implement renderer property for vaadin-grid-column:
import { LitElement, html, css } from 'lit-element'
import {render} from 'lit-html';
import '#vaadin/vaadin-grid/vaadin-grid.js'
import '#vaadin/vaadin-grid/vaadin-grid-filter-column.js'
import '#vaadin/vaadin-grid/vaadin-grid-sort-column.js';
import '#vaadin/vaadin-grid/vaadin-grid-filter.js';
import '#vaadin/vaadin-grid/vaadin-grid-sorter.js'
export default class MyClass extends LitElement {
static get properties () {
return {
data: {
type: Array,
hasChanged: () => true
},
}
}
get grid() {
return this.shadowRoot.querySelector('vaadin-grid');
}
constructor () {
super()
this.data = []//is being assigned from super as a property to a custom element
}
render () {
return html`
<vaadin-grid id="test" .items=${this.data}>
<vaadin-grid-column .renderer=${this.columnRenderer} header="some header text"></vaadin-grid-column>
</vaadin-grid>
`
}
columnRenderer(root, column, rowData) {
render(html`test string`, root);
}
}
window.customElements.define('my-elem', MyClass)
When using vaadin-grid inside LitElement-based components you should use renderers
Here's how your code would look using renderers
import {LitElement, html} from 'lit-element';
// you need lit-html's render function
import {render} from 'lit-html';
class MyElement extends LitElement {
// we'll just assume the data array is defined to keep the sample short
render() {
return html`
<vaadin-grid id="test" .items=${this.data} theme="compact">
<vaadin-grid-column width="40px" flex-grow="0" .renderer=${this.columnRenderer} .headerRenderer=${this.columnHeaderRenderer}></vaadin-grid-column>
<vaadin-grid>
`;
}
columnHeaderRenderer(root) {
render(html`#`, root);
// you could also just do this
// root.textContent = '#'
// or actually just use the column's header property would be easier tbh
}
columnRenderer(root, column, rowData) {
render(
html`
<vaadin-button style="font-size: 10px;" theme="icon" focus-target #click="${(e) => { console.log(e) }}">
<iron-icon icon="icons:create"></iron-icon>
</vaadin-button>
`, root);
}
}
You can see this and more of vaadin-grid's features in action in LitElement in this Glitch created by one of the vaadin team members
I have parent Custom Element, BasicSwitcher, which has its shadow dom html template:
const template_basic_switcher = document.createElement('template');
template_basic_switcher.innerHTML = `
<style>
#import url("https://use.fontawesome.com/releases/v5.6.3/css/all.css")
</style>
<div id="controls-container">
<span>ON</span>
<span>OFF</span>
</div>
`;
Now I have another Custom Element, ModeSwitcher, inheriting from BasicSwitcher. It has completely different switches.
Is there a way to overwrite just the controls-container part of the template, while still utilizing other part? the element doesn't seem to support any kind of inheritance.
1) Create class for you Base Custom Element with a defaut render() method.
class BasicSwitcher extends HTMLElement {
render() {
this.shadowRoot.innerHTML = baseTemplate
}
}
2) Extend the above class for your inherited Custum Element, and redefine the render() method and use the reference to the new template.
class ModeSwicher extends BasicSwitch () {
render() {
this.shadowRoot.innerHTML = otherTemplate
}
}
Below is a working snippet:
class BasicSwitcher extends HTMLElement {
constructor() {
super()
this.attachShadow( { mode: 'open' } )
this.render()
}
render() {
this.shadowRoot.innerHTML = BS.innerHTML
}
}
customElements.define( 'basic-switch', BasicSwitcher )
class ModeSwitcher extends BasicSwitcher {
render() {
this.shadowRoot.innerHTML = MS.innerHTML
}
}
customElements.define( 'mode-switch', ModeSwitcher )
<template id=BS>
<style> :host { display: inline-block ; border: 1px solid gray } </style>
<span>Basic Switch</span>
</template>
<template id=MS>
<style> :host { display: inline-block ; border: 1px dotted blue ; color: red } </style>
<span>Mode Switch</span>
</template>
<basic-switch></basic-switch>
<mode-switch></mode-switch>
Does anyone know how to show the incomplete portion in material progress spinner when the mode is determinate.Now I'm getting like this
.
but I want like this
This can be done but it's mostly a hack. The idea is to use a div with a border that matches the spinner and place it behind the spinner.
Example on StackBlitz
<div class="spinner-container">
<div class="spinner-background">{{spinner.value}}%</div>
<mat-progress-spinner #spinner
color="primary"
mode="determinate"
value="75">
</mat-progress-spinner>
</div>
The trick is the div styling, which needs to be sized and positioned to match your spinner exactly:
.spinner-container {
position: relative;
}
.spinner-background {
position: absolute;
width: 80px;
height: 80px;
line-height: 80px;
text-align: center;
overflow: hidden;
border-color: rgba(103, 58, 183, 0.12);
border-radius: 50%;
border-style: solid;
border-width: 10px;
}
EDIT:
I built a simple wrapper component for this that handles sizing and theme coloring automatically:
StackBlitz
spinner-container.ts:
import { coerceNumberProperty } from '#angular/cdk/coercion';
import { AfterViewInit, Component, ElementRef, Input, SimpleChanges } from '#angular/core';
import { CanColor, mixinColor, ThemePalette } from '#angular/material/core';
const BASE_SIZE = 100;
const BASE_STROKE_WIDTH = 10;
export class SpinnerContainerBase {
constructor(public _elementRef: ElementRef) { }
}
export const _SpinnerContainerMixinBase = mixinColor(SpinnerContainerBase, 'primary');
/**
* #title Progress spinner container for spinner circle background and value display
*/
#Component({
selector: 'spinner-container',
templateUrl: 'spinner-container.html',
styleUrls: ['spinner-container.scss'],
host: {
'class': 'spinner-container',
'[style.width.px]': 'diameter',
'[style.height.px]': 'diameter',
'[style.line-height.px]': 'diameter'
}
})
export class SpinnerContainer extends _SpinnerContainerMixinBase implements AfterViewInit, CanColor {
constructor(public _elementRef: ElementRef) {
super(_elementRef);
}
#Input() color: ThemePalette = 'primary';
#Input()
get diameter(): number { return this._diameter; }
set diameter(size: number) {
this._diameter = coerceNumberProperty(size);
}
private _diameter: number = BASE_SIZE;
#Input() displayWith: (number) => string | number;
#Input()
get strokeWidth() { return this._strokeWidth; }
set strokeWidth(newValue: number) {
if (newValue) {
this._strokeWidth = Math.min(this.diameter / 2, coerceNumberProperty(newValue));
if (this._spinnerBackgroundElement) {
this._spinnerBackgroundElement.style.borderWidth = this.strokeWidth + 'px';
}
}
}
private _strokeWidth: number = BASE_STROKE_WIDTH;
#Input()
get value(): number { return this._value; }
set value(newValue: number) {
this._value = Math.max(0, Math.min(100, coerceNumberProperty(newValue)));
}
private _value: number = 0;
private _spinnerBackgroundElement: HTMLElement;
ngAfterViewInit() {
this._spinnerBackgroundElement = this._elementRef.nativeElement.querySelector('.spinner-background');
this._spinnerBackgroundElement.style.borderWidth = this.strokeWidth + 'px';
}
}
spinner-container.html
<div class="spinner-value" *ngIf="displayWith">{{displayWith(value)}}</div>
<div class="spinner-background"></div>
<mat-progress-spinner
[color]="color"
[diameter]="diameter"
mode="determinate"
[strokeWidth]="strokeWidth"
[value]="value">
</mat-progress-spinner>
spinner-container.scss
:host {
display: block;
position: relative;
.spinner-value, .spinner-background {
position: absolute;
width: inherit;
height: inherit;
}
.spinner-value {
text-align: center;
overflow: hidden;
}
.spinner-background {
opacity: .12;
box-sizing: border-box;
border-radius: 50%;
border-style: solid;
}
}
_spinner-container-theme.scss
#mixin spinner-container-theme($theme) {
$primary: map-get($theme, primary);
$accent: map-get($theme, accent);
$warn: map-get($theme, warn);
.spinner-background {
.spinner-container.mat-primary & {
color: mat-color($primary);
}
.spinner-container.mat-accent & {
color: mat-color($accent);
}
.spinner-container.mat-warn & {
color: mat-color($warn);
}
}
}
the code below is one of my component.
i am creating this with Ruby on Rails framework, with react_rails gem and webpacker, experimenting on Material UI.
as you can see, i am changing the Material UI default font theme with my own choice of font. below code is a success.
my question is, do i have to repeat this step for all my component?
importing createMuiTheme, stating the theme const, and wrapping <MuiThemeProvider /> in every render?
is there a single way to do this universally, without repeating in all component?
thanks for the advice.
import React from 'react';
import PropTypes from 'prop-types';
import Card from '#material-ui/core/Card';
import CardActions from '#material-ui/core/CardActions';
import CardContent from '#material-ui/core/CardContent';
import Button from '#material-ui/core/Button';
import Popover from '#material-ui/core/Popover';
import Typography from '#material-ui/core/Typography';
import List from '#material-ui/core/List';
import ListItem from '#material-ui/core/ListItem';
import ListItemText from '#material-ui/core/ListItemText';
import Avatar from '#material-ui/core/Avatar';
import EmailIcon from '#material-ui/icons/Email';
import HomeIcon from '#material-ui/icons/Home';
import PersonIcon from '#material-ui/icons/Person';
import { MuiThemeProvider, createMuiTheme, withStyles } from '#material-ui/core/styles';
const theme = createMuiTheme({
typography: {
fontFamily: 'Bebas',
},
});
export class SimpleCard extends React.Component {
render () {
return (
<div >
<MuiThemeProvider theme={theme}>
<Card raised="true">
<CardContent >
<List>
<ListItem>
<Avatar>
<EmailIcon />
</Avatar>
<ListItemText primary="Email" secondary={this.props.order.order_mail} />
</ListItem>
</List>
</CardContent>
</Card>
</MuiThemeProvider>
</div>
);
}
}
export default withStyles(styles)(SimpleCard);
Did you try wrapping the MuiThemeProvider around the entire site/app? This is what I do in React.js. I set up my theme in the root file and wrap it around the entire component
import React, { Component } from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
// Components
import Navbar from "./components/layout/Navbar";
import Footer from "./components/layout/Footer";
import Login from "./components/auth/Login";
import Dashboard from "./components/dashboard/Dashboard";
// Styles
import "./stylesheets/App.css";
import {
MuiThemeProvider,
createMuiTheme,
withTheme
} from "#material-ui/core/styles";
import { grey } from "#material-ui/core/colors";
import { withStyles } from "#material-ui/core";
const theme = createMuiTheme({
overrides: {
MuiGrid: {
container: {
width: "100%",
margin: "0"
}
}
},
palette: {
primary: {
light: "#c146b1",
main: "#8e0081",
dark: "#5c0054",
contrastText: "#ffffff"
},
secondary: {
light: "#6bffff",
main: "#00eae3",
dark: "#00b7b1",
contrastText: "#000000"
}
}
});
const drawerWidth = 240;
const styles = theme => ({
app: {
backgroundColor: grey[200]
},
drawerOpen: {
marginLeft: 0
},
drawerClosed: {
marginLeft: -drawerWidth
}
});
class App extends Component {
constructor() {
super();
this.state = {
navOpen: false
};
}
toggleDrawer = () => {
this.setState({
navOpen: !this.state.navOpen
});
};
render() {
const { classes } = this.props;
return (
<MuiThemeProvider theme={theme}>
<div className={classes.app}>
<Navbar
toggleDrawer={this.toggleDrawer}
navOpen={this.state.navOpen}
/>
<Route exact path="/" component={Dashboard} />
<Route exact path="/register" component={PatientRegister} />
<Route exact path="/login" component={Login} />
<Footer />
</div>
</Router>
</MuiThemeProvider>
);
}
}
export default withTheme(theme)(withStyles(styles)(App));
This is an example of my component that will be rendered in the root div (aka the entire application). Notice how wraps the entire app? I stripped a lot out to make it simpler to understand, but if you are using Redux (which is awesome) then I would recommend having that as your outer wrapper, and the rest inside of that. In other words:
<Provider store={store}>
<MuiThemeProvider theme={theme}>
<div class="App">
// Your App Here
</div>
</MuiThemeProvider>
</Provider>
I am trying to move an element using drag and drop. I want to be able to drag and element to a different location, and when I drop it, the element moves to the dropped location. Super basic, and nothing fancy. This is what I have so far:
html:
<input type='button' id='drag' class='draggable' value='drag me' draggable='true'>
Dart code:
Element drag = querySelector('.draggable');
drag.onDragEnd.listen((MouseEvent e) {
drag.style.left = '${e.client.x}px';
drag.style.top = '${e.client.y}px';
});
This doesn't quite do what I want it to do. The element is slightly off from where I drop it. I see examples in javascript with appendChild, clone(), parentNode, but none of the examples that I have seen can be reproduced in Dart. What is the best way to accomplish this? I don't want to use the DND package, since I am really trying to personally understand the concepts better.
index.html
<!doctype html>
<html>
<head>
<style>
#dropzone {
position: absolute;
top: 50px;
left: 50px;
width: 300px;
height: 150px;
border: solid 1px lightgreen;
}
#dropzone.droptarget {
background-color: lime;
}
</style>
</head>
<body>
<input type='button' id='drag' class='draggable' value='drag me'
draggable='true'>
<div id="dropzone"></div>
<script type="application/dart" src="index.dart"></script>
<script src="packages/browser/dart.js"></script>
</body>
</html>
index.dart
library _template.web;
import 'dart:html' as dom;
import 'dart:convert' show JSON;
main() async {
dom.Element drag = dom.querySelector('.draggable');
drag.onDragStart.listen((event) {
final startPos = (event.target as dom.Element).getBoundingClientRect();
final data = JSON.encode({
'id': (event.target as dom.Element).id,
'x': event.client.x - startPos.left,
'y': event.client.y - startPos.top
});
event.dataTransfer.setData('text', data);
});
dom.Element dropTarget = dom.querySelector('#dropzone');
dropTarget.onDragOver.listen((event) {
event.preventDefault();
dropTarget.classes.add('droptarget');
});
dropTarget.onDragLeave.listen((event) {
event.preventDefault();
dropTarget.classes.remove('droptarget');
});
dropTarget.onDrop.listen((event) {
event.preventDefault();
final data = JSON.decode(event.dataTransfer.getData('text'));
final drag = dom.document.getElementById(data['id']);
event.target.append(drag);
drag.style
..position = 'absolute'
..left = '${event.offset.x - data['x']}px'
..top = '${event.offset.y - data['y']}px';
dropTarget.classes.remove('droptarget');
});
}
The answer above is correct, and I didn't want to edit it for that reason. However, I wanted to also offer another answer that I derived from the above. It is a lot more basic compared to the above, and so easier to follow the basic concepts for beginners. As mentioned below, I don't think you can move elements unless they are within a droppable area.
index.html:
<!DOCTYPE html>
<html>
<head>
<style>
#dropzone {
position: absolute;
top: 100px;
left: 50px;
width: 300px;
height: 150px;
border: solid 1px;
color: lightgreen;
}</style>
</head>
<body>
<div id="dropzone">
<input type='button' id='drag' class='draggable' value='drag me'
draggable='true'>
</div>
<script type="application/dart" src="main.dart"></script>
</body>
</html>
main.dart:
import 'dart:html';
main() {
Element drag = querySelector('.draggable');
Element drop = querySelector('#dropzone');
drag.onDragStart.listen((MouseEvent e) {
var startPos = (e.target as Element).getBoundingClientRect();
String xPos = "${e.client.x - startPos.left}";
String yPos = "${e.client.y - startPos.top}";
e.dataTransfer.setData('x', xPos);
e.dataTransfer.setData('y', yPos);
});
drop.onDragOver.listen((MouseEvent e) {
e.preventDefault();
});
drop.onDrop.listen((MouseEvent e) {
e.stopPropagation();
String xPos = e.dataTransfer.getData('x');
String yPos = e.dataTransfer.getData('y');
int x = num.parse(xPos);
int y = num.parse(yPos);
drag.style.position = 'absolute';
drag.style
..left = '${e.offset.x - x}px'
..top = '${e.offset.y - y}px';
});
}
I had the same question and since the answers above did not meet my needs in:
Element drag-gable by itself(No drop zone)
Reusable
For a wrapper based solution, this package could be the answer:https://pub.dartlang.org/packages/dnd
Custom element based approach(Currently cursor styling is not working):
main(){
document.registerElement('draggable-element',
DraggableElement);
querySelector('body').append(new DraggableElement()..text='draggable');
}
class DraggableElement extends HtmlElement with Draggability{
DraggableElement.created():super.created(){
learn_custom_draggability();
}
factory DraggableElement(){
return new Element.tag('draggable-element');
}
}
class Draggability{
bool __custom_mouseDown = false;
//The Coordinates of the mouse click
//relative to the left top of the
//element.
Point<int> __custom_relative_mouse_position;
void learn_custom_draggability(){
if(this is! HtmlElement ){
throw ("Draggability mixin "
"is not compatible with"
' non-HtmlElement.');
}
var self = (this as HtmlElement);
self.onMouseDown.listen(mouseDownEventHandler);
self.onMouseUp.listen(mouseUpEventHandler);
//styling
self.style.position = 'absolute';
window.onMouseMove
.listen(mouseMoveEventHandler);
}
void mouseMoveEventHandler(MouseEvent e){
if(!__custom_mouseDown) return;
int xoffset = __custom_relative_mouse_position.x,
yoffset = __custom_relative_mouse_position.y;
var self = (this as HtmlElement);
int x = e.client.x-xoffset,
y = e.client.y-yoffset;
print(x);
if(y == 0) return;
self.style
..top = y.toString() +'px'
..left = x.toString()+'px';
}
void mouseDownEventHandler(MouseEvent e){
print('mouse down');
__custom_mouseDown = true;
var self = (this as HtmlElement);
self.style.cursor = 'grabbing';
__custom_relative_mouse_position =
e.offset;
}
void mouseUpEventHandler(MouseEvent e){
print('mouse up');
__custom_mouseDown = false;
var self = (this as HtmlElement);
self.style.cursor = 'default';
}
}
Edit:
Yay, Thank you Günter Zöchbauer for informing me about reflectable. It's so small and compiles fast.
A little off the topic but posting since mixins and the below pattern goes hand in hand.
import 'package:reflectable/reflectable.dart';
class Reflector extends Reflectable{
const Reflector():
super(
instanceInvokeCapability,
declarationsCapability
);
}
const reflector = const Reflector();
#reflector
class CustomBase extends HtmlElement{
CustomBase.created():super.created(){
learn();
}
learn(){
InstanceMirror selfMirror = reflector.reflect(this);
var methods = selfMirror.type.instanceMembers;
RegExp pattern = new RegExp('^learn_custom_.*bility\$');
for(var k in methods.keys){
if(pattern.firstMatch(k.toString()) != null){
selfMirror.invoke(k,[]);
}
}
}
}
Include: "reflectable: ^0.5.0" under dependencies and "- reflectable: entry_points: web/index.dart" etc under transformers
in the pubspec.yaml and extend a custom class like the above instead of a HtmlElement and selfMirror.invoke magically calls your initializer as long as their names match the given pattern. Useful when your classes have a quite few abilities.