I am working on canvas with Konvajs. I have a circle layer which I want to animate. Is there a way to add a custom CSS to button to make it blink. Below is the code section for Konva config.
<div class="container">
<v-stage :config="stageConfig" >
<v-layer>
<v-image :config="imageConfig1"/>
<v-circle :config="{radius:13,fill:'red',x:20,y:29}"/>
<v-text :config="{text:'5G Camera', x:42, y:15, fontSize:35, fontStyle: 'bold', fill:'white', stroke:'black',strokeWidth:'2', shadowEnabled:'true'}"/>
</v-layer>
</v-stage>
</div>
You can't use CSS to style Konva shapes. CSS is for DOM elements, Konva nodes are not DOM elements.
If you want to style shapes, you need to set properties directly. Such as fill.
If you want to animation shape, you can use some Konva methods such as Konva.Tween, node.to() method or Konva.Animation.
Take a look into Konva.Animation + Vue demo
Related
my HTML is:
<div>
<img src="random image (doesn't matter)"></img>
</div>
How would I make my div draggable like setting draggable = "true"; in html but I am looking for a css only alternative.
What I have tried:
I had a look at https://css-tricks.com/books/greatest-css-tricks/draggable-elements/ but this answer seem too complex and I feel like there could be a better solution.
Another question (Setting html tag attributes from css) was looking at setting a HTML attribute in css (in this case draggable) and I don't believe that it is possible looking at the answers.
HTML elements can't be made draggable using CSS only. You will need to use JavaScript to make an element draggable. You can make use of the HTML5 draggable attribute for this:
<div draggable="true">Your Content Here</div>
You can also use JavaScript libraries such as jQuery UI to make elements draggable:
$( "#yourElement" ).draggable();
Or use vanilla JavaScript and interact with the HTML5 drag & drop API:
const yourElement = document.querySelector('#yourElement');
yourElement.addEventListener("dragstart", function(event) {
event.dataTransfer.setData("text", event.target.id);
});
Note: that there are many ways to make elements draggable and the exact implementation depends on your requirements and the complexity of the drag-and-drop interactions you want to support.
I defined a custom-element using web componenet:
<universal-form>
<slot name="inner-input">
</universal-form>
This custom-element itself is placed inside another shadow dom:
<my-dashboard>
#shadow-root
<div id="shadow-container">
<universal-form>
...
<input type="datepicker" id="to-be-exposed" slot="inner-input"/>
</universal-form>
</div>
...
</my-dashboard>
** note: for some of you might suggest putting the <universal-form> inside a slot of the <my-dashboard>, instead of placing it directly into the <my-dashboard> shadow-root, this route is ruled out because of some other implementation requirements.
Now I'd like to be able to style the input#to-be-exposed from the webpage's css file, so it needs to be accessible from the light dom when the document is rendered ready.
What is some best practice to achieve this?
An option would be to drop the shadowDom form the dashboard element in this case as an element that has a shadow attached doesn't have a light dom visible anymore.
The element won't mind that, things that are leaking in are exactly what you want, namely style from the parent window.
Implementation is simple, instead appending elements to the attached shadow append them directly in to the element.
Example of a shadowless element :
class MyElement extends HTMLElement {
constructor(){
super();
this.innerHTML = `elements here`;
}
}
I have created a p-tabview with each tab containing some content. For that I have modified my app.component.html by adding the following code:
<p-tabView class="tabmain" [style]="{'background-color': 'cyan', 'margin-left':'0'}">
<p-tabPanel header="Godfather I" leftIcon="pi pi-calendar" [style]="{'background-color': 'red'}">
<div [style]="{'background-color': 'red', 'margin-left':'0'}">
Hi. This is the content.
</div>
</p-tabPanel>
</p-tabView>
I intend to give a dark background as I have to create the tabview in dark theme. I tried to add styles above to check the background color and the result is:
As visible, the portion between the content and the tabview is white in color. I intend to style in such a manner that the entire grid becomes dark. Cyan and red are just sample colors to check where the background color is getting applied against each property.
How to change the background color(white currently) between content and tab view boundary?
Looking the docs
You should manipulate p-tabview-panels in your scss(or css) of your component our globaly in style.scss (or css).
So your css is something like this
:host ::ng-deep .p-tabview .p-tabview-panels{
'background-color': 'red'
}
Read more here in local styling section
https://www.primefaces.org/primeng/showcase/#/theming
I am trying to style an HTML element inside the component from the Fluent UI React library.
What I want to do is put the "On" / "Off" text to the left of the toggle rather than on the left. When I look at my "compiled" code I can see that the component is translated into:
<div>
<label></label>
<div id="target-me">
<button>
<span></span>
</button>
<label></label>
</div>
</div>
I want to add an inline-flex to the target-me div and set flex-flow property to row-reverse in order to get the button element to the right of the label element. The problem is, I can't manage to target the "target-me" div in my code.
How can I achieve this without rewriting a custom component ?
Thanks!
Ok, well I found the answer to my own question so here it is:
<Toggle styles={{ container: { flexFlow: "row-reverse" } }} />
Essentially you can target different parts of the component (root, container, label..) by using the styles property. Use VS Code's Intellisense to find out what elements you can target inside the component and then just give it some regular CSS-in-JS that you want.
I have finally figured out how to use the Twitter Bootstrap Tooltips, and I am trying to style it. I have asked similar questions about other plugins, and they all ended up being specific CSS selectors. For jScrollPane, the track's selector was .jspTrack.
Fiddle
My question is, what is the CSS selector for the Twitter Bootstrap tooltips?
The documentation linked in the comments shows you a sample of the markup that's produced when a tooltip is generated:
Markup
The generated markup of a tooltip is rather simple, though it does require a position (by default, set to top by the plugin).
<div class="tooltip">
<div class="tooltip-inner">
Tooltip!
</div>
<div class="tooltip-arrow"></div>
</div>
It should be fairly easy to determine the CSS selector based on this.
There are additional class names attached to .tooltip that you can see if you open your browser's DOM inspector and then hover your form element. The one in your example generates the following .tooltip element:
<div class="tooltip fade right in" style="…">
If you need to select only the tooltip belonging to a specific trigger element, that depends on where exactly the tooltip is placed in the DOM. The documentation says (just above the first section I quoted):
Usage
The tooltip plugin generates content and markup on demand, and by default places tooltips after their trigger element.
So the selector would be .mytrigger + .tooltip where .mytrigger is the form element triggering that tooltip. The DOM position is determined by the container option, otherwise it's the default as stated.