HTML:
<div class="picdiv">
<!-- <img src={backpic}> -->
<div class="picdivchild slds-text-heading_small">{checkNo}</div>
</div>
CSS:
.picdiv {
background-position: top right;
background-repeat: no-repeat;
background-size: 100%;
display: flex;
flex-flow: column;
align-items: center;
justify-content:space-between;
}
.picdivchild {
align-items: center;
margin-top: 60%;
margin-bottom: 5%;
}
JS:
import gymsimgs from '@salesforce/resourceUrl/gymsimgs';
hasRendered = false;
renderedCallback() {
if (this.hasRendered) return;
this.hasRendered = true;
const style = document.createElement('style');
style.innerText = `.picdiv { background-image:url(${this.backpic}) }`;
this.template.querySelector('.picdiv').appendChild(style);
}
get picb4() {
return gymsimgs + '/ver_b_4.png';
}
get backpic() {
return gymsimgs + '/ver_b_1.png';
}
css 参考URL
クリック、動きによって動的表示する。
HTML:
<div class="hidden">
表示/非表示する内容
</div>
<img style="width:35px" src={emojishowbtn} onclick={showmoji}>
CSS:
.hidden { display: none; }
.show { display: block; }
JS:
showmoji() {
this.showemojicss(true);
}
showemojicss(isShow) {
if(isShow) {
const secondDiv = this.template.querySelector('.hidden'); //
//スタイルを追加する例
secondDiv.classList.remove('hidden');
secondDiv.classList.add('show');
} else {
const secondDiv = this.template.querySelector('.show'); //
//スタイルを追加する例
secondDiv.classList.remove('show');
secondDiv.classList.add('hidden');
}
}