Im using new Version of Vaadin which is 7.4.5+
package com.example.projnew;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.util.PropertysetItem;
import com.vaadin.server.Responsive;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.Button.ClickEvent;
import com.vaadin.ui.CssLayout;
import com.vaadin.ui.Form;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
#SuppressWarnings("serial")
#Theme("projnew")
public class ProjnewUI extends UI {
#WebServlet(value = "/*", asyncSupported = true)
#VaadinServletConfiguration(productionMode = false, ui = ProjnewUI.class)
public static class Servlet extends VaadinServlet {
}
#Override
protected void init(VaadinRequest request) {
CssLayout layout = new CssLayout();
layout.setSizeFull();
layout.setStyleName("flexwrap");
setContent(layout);
Responsive.makeResponsive(layout);
Label title = new Label("Space is big, Really big");
title.addStyleName("title");
layout.addComponent(title);
Label description = new Label("This is a "
+ "long description of the image shown "
+ "on the right or below, depending on the "
+ "screen width. The text here could continue long.");
description.addStyleName("itembox");
description.setSizeUndefined();
layout.addComponent(description);
}
}
My style
#import "addons.scss";
#import "projnew.scss";
/* This file prefixes all rules with the theme name to avoid causing conflicts with other themes. */
/* The actual styles should be defined in projnew.scss */
.projnew {
#include addons;
#include projnew;
.flexwrap {
background: black;
&[width-range~="0-300px"] {
background: red;
}
}
}
Why does my design cant respond to the width I supposed to..
I tried many examples at vaadin but it doesnt work also.
And why is it that some examples they use com.vaadin.addon.responsive.Responsive but in my Vaadin version which is already in the utility and I imported com.vaadin.server.Responsive
What I supposed to do ?
I know this is a bit late and you probably already solved it, but...
The reason why they use com.vaadin.addon.responsive.Responsive is because Responsive used to be an extension and later they integrated it in the framework.
Are you sure the component is getting the width-range attribute? Open your browser's inspector, look at the component and see if it's there. If it is, then you have an issue with your CSS. If it isn't, or it is somewhere else, be sure you have applied it to the proper element.
Related
see example below:
import React, { Component } from 'react';
import styles from './Button.module.css';
class Button extends Component {
let classNameVariable= "error-button"
render() {
return <button className={styles.classNameVariable}>Button</button>;
}
}
as you saw above example, I need to use variable instead of className, to add className.
so is there a way to do it?
Take a look at bracket notation: https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Operators/Property_Accessors
Instead of styles.clasNameVariable make it styles[classNameVariable]
Is there a way to import SCSS as CSS using Parcel Bundler + SASS + TypeScript?
I have a SCSS file called file.scss
div {
span: {
background: red
}
}
so I want to import it as a CSS string in TypeScript, I'm tryng something like this:
import cssString from "./file.scss"
console.log(cssString)
// ^^^^^^^^^ Expected value => div span: { background: red }
But isn't working properly.
So, i need to know, there is a way to do that?
Just invoke this method readFileSync directly
If you can't import fs in typescript, you can follow this question
import fs from 'fs';
const cssStr = fs.readFileSync('./file.scss', { encoding: 'utf8' });
console.log(cssStr.replace(/\s+/g, ''));
I asked the same question, in "discussions" in the Parcel github and Niklas Mischkulnig answered me, he told me that this can be done with Parcel 2, like this:
import cssString from "bundle-text:./file.scss;"
follow the link to the question I made in the discussion forum of the parcel github
We want to work with components from https://github.com/ing-bank/lion and style them to our needs. Their repo advertises with the components being extensible and minimally styled. However, I cannot seem to figure out how to actually style them. We tried using style element in the parent component, but we cant seem to style these components properly.
Could you give me an example of how to extend a component?
update after answer by #niiyeboah
After a very nice answer by #niiyeboah, I created the following class:
import {css, customElement} from 'lit-element'
import {LionButton} from '#lion/button'
#customElement('my-custom-button')
class MyCustomButton extends LionButton {
static get styles() {
return [
super.styles,
css`
:host {
background-color: red;
}
`,
]
}
constructor() {
super()
}
}
However, now it just shows be the button completely unstyled, i.e. only the text. Does anyone know whats happening?
They provide an example of how to extend and style their components on this page.
For tabs, the code will look something like this:
import { css } from 'lit-element';
import { LionTabs } from '#lion/tabs';
export class MyTabs extends LionTabs {
static get styles() {
return [
super.styles,
css`
/* my stylings */
`
];
}
}
customElements.define('my-tabs', MyTabs);
The ING Lion team has a Slack channel: https://www.polymer-project.org/slack-invite
for support questions.
It is the #lion sub-channel in the Polymer Project Slack
Consider a very simply custom element using shadow DOM:
customElements.define('shadow-element', class ShadowElement extends HTMLElement {
constructor() {
super();
this.styleTag = document.createElement('style');
this.styleTag.textContent= `
.root::before {
content: "root here!";
color: green;
}
`
this.shadow = this.attachShadow({mode: 'closed'});
this.root = null;
}
connectedCallback() {
this.root = document.createElement('div');
this.root.className = 'root';
this.shadow.append(this.root, this.styleTag);
}
})
<shadow-element></shadow-element>
To get the CSS into the shadow DOM, I create a style tag, which I append into the shadow root. This is all working fine so far.
Now for more complex CSS I would like to author it in a file shadow-element.css which is in the same folder as shadow-element.js. Besides seperation of concerns I also want IDE syntax highlighting and -completion for CSS authoring, so I really want the CSS in a separate, dedicated file.
I want to import the contents of that CSS file into a Javascript variable, like
import styles from './shadow-element.css'; // obviously doesn't work
On the project where this is being used we have a working webpack stack that allows importing CSS (and even SCSS), but unfortunately that imported CSS then becomes part of bundle.css - which obviously is not at all useful, because the element uses shadow DOM.
Does anyone have a solution to this? I'm also open to alternative solutions, as long it won't require me to author my CSS in a .js file.
Edit: I am aware of the option of using #import './shadow-elements.css'; inside the style tag, but I would much prefer a solution that bundles the imported CSS into my Javascript bundle (as part of the component code).
As you are using webpack, you can use raw-loader to import a text file (CSS in your case) into a string:
npm install raw-loader --save-dev
And you can use it inline in each file:
import css from 'raw-loader!./shadow-element.css';
customElements.define('shadow-element', class ShadowElement extends HTMLElement {
constructor() {
super();
this.styleTag = document.createElement('style');
this.styleTag.innerText = css;
this.shadow = this.attachShadow({mode: 'closed'});
this.root = null;
}
connectedCallback() {
this.root = document.createElement('div');
this.root.className = 'root';
this.shadow.append(this.root, this.styleTag);
}
})
The "import "Player.as" line throws the error: 1084: Syntax error: expecting rightbrace before semicolon.
package {
import "Player.as"; //ERROR
import "Card.as";
public class Game {
I was going great with Flex, until I tried to split up my code into separate files. Now I'm struggling.
Here are my files and their dependencies:
**poker.mxml**
include "fb.as";
<mx:Script source="Game.as"/>
**Game.as**
import "Player.as";
import "Card.as";
**fb.as**
**Card.as**
**Player.as**
I'm guessing Player.as and Card.as are in the same package as Game.as?
If they're in the same package, you don't need to import them. Also, import statements don't usually have the .as extension.
When importing, you don't use the file name, but the package and class, and no quotes needed:
package
{
import Player;
import Card;
public class Game {}
}
You don't actually have to import them if they're in the top level or the same package as the class you're editing, though. If your Player and Card classes are in packages other than the top level, then you need to include the package. Here's an example with some arbitrary package names that came off the top of my head:
package
{
import com.example.Player;
import com.example.deck.Card;
public class Game {}
}
In MXML, you don't include classes using the element's source parameter. You can import them in the same way, actually.
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
applicationComplete="applicationCompleteHandler(event)">
<mx:Script><![CDATA[
import com.example.Player;
import mx.events.FlexEvent;
private var _player:Player;
//this event handler is called once the application is fully created
//and drawn for the first time.
private function applicationCompleteHandler(event:FlexEvent):void
{
_player = new Player();
}
]]></mx:Script>
</mx:Application>
import declarations come before the package, IIRC.