私は udemy.com のビデオを扱っていますが、この質問を投稿しても回答が得られなかったので、ここに投稿して、私の問題について何らかの洞察を得られるかどうかを確認します。私は Lit-element 2.0rc を使用しており、個人の電話帳アプリの構築に取り組んでいます。
プロジェクトの範囲は、連絡先の追加リンクがクリックされたときにポップアップとして呼び出すことができるフォームがあることです。ポップアップのプロパティを設定しましたが、ボタンのクリックは機能しています。現時点で機能していないのは、ページにフォームがまだ表示されているため、ポップアップ自体であり、フォームをポップアッププロパティから呼び出すことができるようにフォームを非表示にする方法がわかりません。誰かに私のコードを見てもらい、ボタンをクリックしてポップアップとして表示されるまでフォームが非表示のままになるように変更する必要があるかどうかを教えてください。ここに私が取り組んでいるコードがあります
App.js
import {LitElement, html} from 'lit-element';
import SideMenu from './SideMenu.js';
import ContentArea from './ContentArea.js';
class PhoneBook extends LitElement{
constructor(){
super();
this.popupOpen = false;
}
togglePopup(){
console.log('clicked button');
console.log(this.popupOpen);
this.popupOpen = !this.popupOpen;
console.log(this.popupOpen);
this.requestUpdate();
}
render(){
return html `
<style>
.main-page{
display: grid;
grid-template-columns: 250px 1fr;
}
</style>
<div class="main-page">
<side-menu .togglePopup="${this.togglePopup}"></side-menu>
<content-area popupOpen="${this.popupOpen}" .togglePopup="${this.togglePopup}">
</content-area>
</div>
`;
}
}
customElements.define('phone-book', PhoneBook)
Sidemenu.js
import {LitElement, html} from 'lit-element'
export default class SideMenu extends LitElement{
constructor(){
super();
}
static get properties(){
return{
togglePopup: Function
}
}
render(){
return html `
<style>
@import './css/global.css';
#side-menu{
background: #323759;
height: 100vh;
padding: 50px 25px
}
.logo{
text-align:center;
}
.logo img{
width: 100px;
}
.title{
font-weight: 700;
color: #ccced7;
margin: 1rem 0;
}
#side-menu nav a {
color: #ccced7;
text-decoration: none;
text-transform: capitalize;
display: block;
padding: 10px 10px 10px 0;
}
#side-menu nav a span.icon{
padding: 10px 10px 10px 0;
}
</style>
<section id="side-menu">
<div class="logo"><img src="../images/logo.png"></div>
<div class="menu">
<div class="title">Contacts</div>
<nav>
<a href="#" @click="${this.togglePopup}"><span class="icon">+</span>Add
Contact</a>
<a href="#"><span class="icon">+</span>Add Contact</a>
<a href="#"><span class="icon">+</span>Add Contact</a>
<a href="#"><span class="icon">+</span>Add Contact</a>
</nav>
</div>
</section>
`;
}
}
customElements.define('side-menu', SideMenu)
contentArea.js
import {LitElement, html} from 'lit-element';
import ContactsList from '../components/ContactsList.js';
import FavoritesList from '../components/FavoritesList';
import FormPopup from '../components/FormPopup';
export default class ContentArea extends LitElement{
constructor(){
super();
}
static get properties(){
return{
popupOpen: Boolean,
togglePopup: Function
}
}
render(){
return html `
<style>
@import './css/global.css';
#content-area{
background: #fcfdff;
padding: 50px 80px;
}
</style>
<section id="content-area">
<form-popup .popupOpen="${this.popupOpen}" .togglePopup="${this.togglePopup}">
</form-popup>
<favorites-list></favorites-list>
<contacts-list></contacts-list>
</section>
`;
}
}
customElements.define('content-area', ContentArea)
Formpopup.js
import {LitElement, html} from 'lit-element'
import ContactsList from '../components/ContactsList.js'
import FavoritesList from '../components/FavoritesList'
export default class FormPopup extends LitElement{
constructor(){
super();
}
static get properties(){
return{
popupOpen: Boolean
}
}
render(){
return html `
<style>
@import './css/global.css';
.form-popup{
background: #2b304c;
height: 100vh;
width: 100vw;
position: fixed;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
visibility: hidden;
transition: all .4s ease-in-out;
opacity: 0
}
.form-popup.active{
visibility: visible;
opacity: 1;
}
form{
width: 400px;
background: white;
padding: 20px;
border-radius: 10px;
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-gap: 20px;
}
h2{
font-size: 1.4rem;
font-weight: 500;
grid-column: 1/5;
}
.form-group{
padding: 0;
}
label{
font-size: .7rem;
background: white;
position: relative;
top: 7px;
display: inline-block;
}
input[type="text"]{
padding: 10px;
display: block;
width: 100%;
}
.first-name{
grid-column: 1/3;
}
.last-name{
grid-column: 3/5;
}
.address-1{
grid-column: 1/5;
}
.address-2{
grid-column: 1/5;
}
.city{
grid-column: 1/3
}
.button{
justify-self: end;
grid-column: 4/5;
}
.button button{
cursor: pointer;
padding: 10px 25px;
background: #1e5799; /* Old browsers */
background: #00b7ea; /* Old browsers */
background: -moz-linear-gradient(top, #00b7ea 0%, #009ec3 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #00b7ea 0%,#009ec3 100%); /* Chrome10-
25,Safari5.1-6 */
background: linear-gradient(to bottom, #00b7ea 0%,#009ec3 100%); /* W3C, IE10+,
FF16+, Chrome26+, Opera12+, Safari7+ */
border: 1px solid rgba(0, 0, 0, .1);
color: white;
border-radius: 5px;
text-shadow: 0px 1px 2px rgba(0, 0, 0, 1)
}
.close-btn{
position: absolute;
z-index: 3;
right: 30px;
top: 0;
font-size: 2rem;
padding: 20px;
color:white;
}
.close-btn svg{
width: 24px;
height: 24px;
}
</style>
<section className="form-popup${(this.popupOpen) ? ' active' : ''}">
<form>
<div class="close-btn" @click="${this.togglePopup}"><svg
xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" data-
prefix="fas"
data-icon="times" class="svg-inline--fa fa-times fa-w-11" role="img"
viewBox="0 0 352 512"><path fill="currentColor"
d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-
22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28
75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-
12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28
12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176
322.72l100.07
100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19
0-44.48L242.72 256z"/></svg></div>
<h2>Add a new contact</h2>
<div class="form-group first-name">
<label for="first_name">First Name</label>
<input type="text" name="first_name">
</div>
<div class="form-group last-name">
<label for="first_name">Last Name</label>
<input type="text" name="last_name">
</div>
<div class="form-group address-1">
<label for="first_name">Address #1</label>
<input type="text" name="address_1">
</div>
<div class="form-group address-2">
<label for="first_name">Address #2</label>
<input type="text" name="address_2">
</div>
<div class="form-group city">
<label for="first_name">City</label>
<input type="text" name="city">
</div>
<div class="form-group state">
<label for="first_name">State</label>
<input type="text" name="state">
</div>
<div class="form-group zipcode">
<label for="first_name">zipcode</label>
<input type="text" name="zipcode">
</div>
<div class="form-group button">
<button type="submit">Add</button>
</div>
</form>
</section>
`;
}
}
customElements.define('form-popup', FormPopup)
ここでも、[新しい連絡先の追加] リンクをクリックして非表示のフォームを呼び出すことができると想定されていますが、フォーム自体がまだページに表示されており、本来あるべきように非表示になっていないため、これは発生しません。
助けてくれてありがとう。