I'm Trying to add animations to my angular 2 application but it's not working, i tried using an example i got from the internet and i researched a bit but i didn't find anything, please anyone help me.
import {Component, trigger, state, animate, transition, style} from '#angular/core';
#Component({
selector: 'app-root',
styles: [`
.container {
background-color: white;
border: 10px solid black;
width: 200px;
text-align: center;
font-size: 50px;
box-sizing: border-box;
overflow: hidden;
}
`],
animations: [
trigger('openClose', [
state('collapsed', style({ height: '0px', color: 'red' })),
state('expanded', style({ height: '100px', color: 'lightgreen' })),
transition('expanded <=> collapsed', animate(500))
])
],
template: `
<button (click)="expand()">Expand</button>
<button (click)="collapse()">Collapse</button>
<hr />
<div class="container" [#openClose]="animationState">
Look at this box
</div>
`
})
export class AppComponent {
animationState: string;
constructor() {
this.collapse();
}
expand() {
this.animationState = 'expanded';
}
collapse() {
this.animationState = 'collapsed';
}
}
From angular Animations docs:
Angular animations are built on top of the standard Web Animations API and run natively on browsers that support it.
For other browsers, a polyfill is required. Grab web-animations.min.js from GitHub and add it to your page.
You can see browsers that support it here: http://caniuse.com/#feat=web-animation
For all other browsers (including Safari) download and install polyfill
[edit]On how to install polyfill in angular see this answer
Related
i have working scss styles
.alert {
::v-deep .v-alert__border {
top: 8px;
bottom: 8px;
border-radius: 200px;
}
&:not(&--rtl) {
// styles
}
}
I want to redo these styles like this.
.alert {
:deep(.v-alert__border) {
top: 8px;
bottom: 8px;
border-radius: 200px;
}
&:not(&--rtl) {
// styles
}
}
The problem is that it doesn't work.
I use
"vue": "^2.6.11",
Found information that this functionality is not supported in "vue": "^2.6.11",.
Is it really not supported or am I doing something wrong?
Looking at the discussion found here: https://github.com/vuejs/core/issues/4745
Every example starts with :deep and never nested?
:deep(.alert.v-alert__border) {
top: 8px;
bottom: 8px;
border-radius: 200px;
}
:deep(.alert) {
.v-alert__border {
top: 8px;
bottom: 8px;
border-radius: 200px;
}
}
Perhaps one of those two works?
I tested these codes and they works for me. I am using vue version 2.6.11 and vue cli version 4.5 and sass version 1.26.5:
parent component:
<template>
<section>
<div class="myParent">
<ChildAlert></ChildAlert>
</div>
<ChildAlert></ChildAlert>
</section>
</template>
<script>
import ChildAlert from "./ChildAlert";
export default {
name: "AlertCompo",
components: {
ChildAlert
}
}
</script>
<style scoped lang="scss">
.myParent {
background-color: #000;
:deep(.myTitle) {
color: red;
}
}
</style>
child component:
<template>
<section>
<h1 class="myTitle">this is Child component</h1>
</section>
</template>
<script>
export default {
name: "ChildAlert"
}
</script>
<style scoped>
</style>
I'm using Electron React Boilerplate and i'm trying to make beautiful rounded corners but instead i'm getting white square corners. Do someone know any solution?
This is what my app corners looks like
This is my BrowserWindow code:
mainWindow = new BrowserWindow({
show: false,
width: 396,
height: 520,
transparent: true,
frame: false,
resizable: false,
webPreferences: {...preferences}
});
Edit: Here is more code
import React from 'react';
import styles from './Home.css';
import Titlebar from './FirstOpenScreen/Titlebar';
export default function Home(): JSX.Element {
return (
<div className={styles.home}>
<Titlebar />
<h1 className={styles.h1}>Hello, world.</h1>
</div>
);
}
And my CSS:
div.home {
width: 100%;
height: 100vh;
background-color: #252525;
color: white;
border-radius: 10px;
overflow: hidden;
}
Thanks everyone for the help. I was analyzing my own code and tried a CSS property that I saw on the internet, and it ended up helping me.
The solution is simply to add overflow: hidden to the CSS file to work.
body {
border-radius: 10px;
overflow: hidden;
}
I want my app to have no title bar but still be closeable, draggable, minimizable, maximizable, and resizable like a regular window. I can do this in OS X since there is a [titleBarStyle] 1 option called hidden-inset that I can use but unfortunately, it's not available for Windows, which is the platform that I'm developing for. How would I go about doing something like this in Windows?
Above is an example of what I'm talking about.
Assuming you don't want window chrome, you can accomplish this by removing the frame around Electron and filling the rest in with html/css/js. I wrote an article that achieves what you are looking for on my blog here: http://mylifeforthecode.github.io/making-the-electron-shell-as-pretty-as-the-visual-studio-shell/. Code to get you started is also hosted here: https://github.com/srakowski/ElectronLikeVS
To summarize, you need to pass frame: false when you create the BrowserWindow:
mainWindow = new BrowserWindow({width: 800, height: 600, frame: false});
Then create and add control buttons for your title bar:
<div id="title-bar">
<div id="title">My Life For The Code</div>
<div id="title-bar-btns">
<button id="min-btn">-</button>
<button id="max-btn">+</button>
<button id="close-btn">x</button>
</div>
</div>
Bind in the max/min/close functions in js:
(function () {
var remote = require('remote');
var BrowserWindow = remote.require('browser-window');
function init() {
document.getElementById("min-btn").addEventListener("click", function (e) {
var window = BrowserWindow.getFocusedWindow();
window.minimize();
});
document.getElementById("max-btn").addEventListener("click", function (e) {
var window = BrowserWindow.getFocusedWindow();
window.maximize();
});
document.getElementById("close-btn").addEventListener("click", function (e) {
var window = BrowserWindow.getFocusedWindow();
window.close();
});
};
document.onreadystatechange = function () {
if (document.readyState == "complete") {
init();
}
};
})();
Styling the window can be tricky, but the key use to use special properties from webkit. Here is some minimal CSS:
body {
padding: 0px;
margin: 0px;
}
#title-bar {
-webkit-app-region: drag;
height: 24px;
background-color: darkviolet;
padding: none;
margin: 0px;
}
#title {
position: fixed;
top: 0px;
left: 6px;
}
#title-bar-btns {
-webkit-app-region: no-drag;
position: fixed;
top: 0px;
right: 6px;
}
Note that these are important:
-webkit-app-region: drag;
-webkit-app-region: no-drag;
-webkit-app-region: drag on your 'title bar' region will make it so that you can drag it around as is common with windows. The no-drag is applied to the buttons so that they do not cause dragging.
I was inspired by Shawn's article and apps like Hyper Terminal to figure out how to exactly replicate the Windows 10 style look as a seamless title bar, and wrote this tutorial (please note: as of 2022 this tutorial is somewhat outdated in terms of Electron).
It includes a fix for the resizing issue Shawn mentioned, and also switches between the maximise and restore buttons, even when e.g. the window is maximised by dragging the it to the top of the screen.
Quick reference
Title bar height: 32px
Title bar title font-size: 12px
Window control buttons: 46px wide, 32px high
Window control button assets from font Segoe MDL2 Assets (docs here), size: 10px
Minimise:
Maximise:
Restore:
Close:
Window control button colours: varies between UWP apps, but seems to be
Dark mode apps (white window controls): #FFF
Light mode apps (black window controls): #171717
Close button colours
Hover (:hover): background #E81123, colour #FFF
Pressed (:active): background #F1707A, colour #000 or #171717
Note: in the tutorial I have switched to PNG icons with different sizes for pixel-perfect scaling, but I leave the Segoe MDL2 Assets font characters above as an alternative
I use this in my apps:
const { remote } = require("electron");
var win = remote.BrowserWindow.getFocusedWindow();
var title = document.querySelector("title").innerHTML;
document.querySelector("#titleshown").innerHTML = title;
var minimize = document.querySelector("#minimize");
var maximize = document.querySelector("#maximize");
var quit = document.querySelector("#quit");
minimize.addEventListener("click", () => {
win.minimize();
});
maximize.addEventListener("click", () => {
win.setFullScreen(!win.isFullScreen());
});
quit.addEventListener("click", () => {
win.close();
});
nav {
display: block;
width: 100%;
height: 30px;
background-color: #333333;
-webkit-app-region: drag;
-webkit-user-select: none;
position: fixed;
z-index: 1;
}
nav #titleshown {
width: 30%;
height: 100%;
line-height: 30px;
color: #f7f7f7;
float: left;
padding: 0 0 0 1em;
}
nav #buttons {
float: right;
width: 150px;
height: 100%;
line-height: 30px;
background-color: #222222;
-webkit-app-region: no-drag;
}
nav #buttons #minimize,
nav #buttons #maximize,
nav #buttons #quit {
float: left;
height: 100%;
width: 33%;
text-align: center;
color: #f7f7f7;
cursor: default;
}
nav #buttons #minimize:hover {
background-color: #333333aa;
}
nav #buttons #maximize:hover {
background-color: #333333aa;
}
nav #buttons #quit:hover {
background-color: #ff0000dd;
}
main {
padding-top: 30px;
overflow: auto;
height: calc(100vh - 30px);
position: absolute;
top: 30px;
left: 0;
padding: 0;
width: 100%;
}
<html>
<head>
<meta charset="UTF-8">
<title>Hello World!</title>
</head>
<body>
<nav>
<div id="titleshown"></div>
<div id="buttons">
<div id="minimize"><span>‐</span></div>
<div id="maximize"><span>□</span></div>
<div id="quit"><span>×</span></div>
</div>
</nav>
<main>
<div class="container">
<h1>Hello World!</h1>
</div>
</main>
</body>
</html>
Ran into this problem and my solution was to keep the frame but set the title to blank i.e.
document.querySelector("title").innerHTML ="";
That solved my problem i.e. I got a window which can be closed, maximized or minimized without a title on it.
After learning JS for about a month now and completing around 4 courses I am still unable to work out how to change an image when clicking a thumbnail! What I want to do is simple, I just want to change the Main Image when a thumbnail is clicked! In this example there are two thumbnail images in a div and a main image above them. I just want to change the main image when a thumbnail is clicked. I know this is DOM Manipulation and think it is: document.getElementById.....?
I have make a small page so that I can learn / try different things and and finally giving up and asking for help! The code is as follows:
#MainContainer {
position: relative;
margin:0px auto;
width: 500px;
height: 400px;
border: 1px solid black;
}
#MainImage {
position: absolute;
top: 10px;
left: 50px;
width: 398px;
height: 265px;
background: url(MainImage01.jpg);
border: 1px solid black;
}
#TNBodyContainer {
position: absolute;
top: 290px;
left: 100px;
border: 1px solid black;
width: 268px;
height: 88px;
}
#TNOne {
position: relative;
width: 133px;
height: 88px;
background: url(SmallImage01.jpg);
}
#TNTwo {
position: relative;
left:135px;
width: 133px;
height: 88px;
background: url(SmallImage02.jpg);
}
<body>
<div id="MainContainer">
<div id="MainImage"></div>
<div id="TNBodyContainer">
<div id="TNOne">
<div id="TNTwo"></div>
</div>
</div>
Thank you very much for any help.
Margate
You need to add some scripting to change the image when either of the thumbnails are clicked. This function is called when the page is loaded. Change the image names to suit.
This should be placed in the section of the html page.
<script>
window.onload = function() {
var mainImg = document.getElementById('Main');
document.getElementById('TNOne').onclick = function() {
mainImg.src = 'main1.jpg';
//alert('one clicked');
};
document.getElementById('TNTwo').onclick = function() {
mainImg.src = 'main2.jpg';
//alert('two clicked');
};
};
</script>
The two thumbnail divs become <img> tags with the same IDs.
Similarly the main <img> is defined also (with id="Main"). Now the elements
are clickable.
<div id="MainContainer">
<div id="MainImage">
<img id="Main" src="MainImage01.jpg"</img>
</div>
<div id="TNBodyContainer">
<img id="TNOne" src="thumb1.jpg"></img>
<img id="TNTwo" src="thumb2.jpg"></img>
</div>
</div>
Finally CSS for the thumbnails, here float is used to keep the thumbnails in the same line within the TNBodyContainer div.
TNOne {
width: 133px;
height: 88px;
float:left;
}
#TNTwo {
width: 133px;
height: 88px;
float:left;
}
To change the image in the CSS background property, you need to use
document.getElementById("MainImage").style.background
The right way to go is to add event listeners:
document.getElementById("TNOne").addEventListener("click", function (event) {
setImage(event);
}, false);
document.getElementById("TNTwo").addEventListener("click", function (event) {
setImage(event);
}, false);
}
They both call the same function, but with event it is possible to see which one "clicked" with "event.target.id".
You can then decide what you want to do with for instance a switch statement. basically saying: if event.target.id == "TNOne".
You can see all this I made you a fiddle: http://jsfiddle.net/djwave28/32pQD/3/
There are some slight changes in your HTML and CSS too.
In my kendo mobile app I have some listviews that require more than one action. I need something like what is show in the Link Items & Detail Buttons demo but more flexible. In my case, I need to cover the following scenarios (all sections clickable):
[icon][text of the item]
[text of the item][icon]
[icon][text of the item][icon]
...where [icon] is some font icon.
I've started on a solution but before I go any further, I want some feedback to make sure I am not overlooking a better approach or something already built into Kendo.
Each "part" of the <LI> needs to perform a distinct action when clicked. To handle this, I have a click binding on the <UL>. I also have a data-command-name attribute on each element in the <LI> template so that I know what the user tapped/clicked.
I have put together a fiddle but jsFiddle is reformatting the HTML part when it loads (I think because of the template script tags). Once you load the fiddle please replace the HTML with the following to get it working:
HTML
<div id="itemsView" data-role="view" data-model="vm">
The red, silver and blue sections along with the X & Y are not part of the design, they are there just to make my intent more obvious.
<ul data-role="listview" data-bind="source: items, click: clickHandler"
data-template="itemsTemplate"></ul>
<script id="itemsTemplate" type="text/x-kendo-template">
<div class = "left-column" data-command-name="left (red)" > X </div>
<div class="right-column" data-command-name="right (blue)">Y</div >
<div class = "content-column" data-command-name="content (silver)"> #=Name# </div>
</script>
</div>
CSS
div.left-column {
float: left;
width: 25px;
margin-top: -5px;
padding-top: 5px;
margin-left: -5px;
padding-left: 5px;
cursor: default;
background-color: red;
}
.content-column {
margin-top: -5px;
margin-left: 25px;
margin-bottom: 0;
margin-right: 25px;
padding-top: 5px;
cursor: default;
background-color: silver;
}
.right-column {
float: right;
width: 25px;
margin-top: -5px;
padding-top: 5px;
cursor: default;
background-color: blue;
}
JavaScript
var vm = kendo.observable({
items: [{
Selected: false,
Name: "Item1"
}, {
Selected: false,
Name: "Item2"
}, {
Selected: false,
Name: "Item2"
}],
clickHandler: function (e) {
var cmd = e.target.context.attributes["data-command-name"]
if (cmd) {
alert(cmd.value);
}
},
});
kendoApp = new kendo.mobile.Application(document.body, {
transition: "slide",
platform: 'android'
});
Here is the fiddle: http://jsfiddle.net/8Kydw/
So to summarize my questions:
1) Is there a better/built-in way of doing this?
2) If not, any tips on the CSS? For instance, why in Android is the height of the list items smaller than prior to my customization?
1) I think the strategy that you are using is completely fine and acceptable for Kendo UI Mobile.
2) Kendo UI Mobile applies some pretty specific styling in the way of line-height and a few other items that will affect how the list item is displayed if you then customize margin or padding with your own CSS. I wouldn't worry too much about it though.