VStack
Last updated
Last updated
๐ฐ CSS โฉ Layout โฉ System โฉ ๐ธ code โๅ้ก
Every Layout โฉ Stack /โญ๏ธ
SwiftUI โฉ VStack
MDN โฉ
HTMLElement โฉ dataset (: DOMStringMap) - get/set "data-xxx" attributes โญ๏ธ
Element โฉ
CSS โฉ
@import - import styles from other style sheets.
Using data attributes ("data-xxx" attributes) โญ๏ธ
attr() - use element's attributes in CSS โญ๏ธ
Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry - ้ๅ้กๅธธๅบ็พๅจ CodeSandbox ไธใ
็จๅชๅๅฅฝ๏ผ <vstack-> ๆ <i-vstack> โ(้ๅ ฉๅ้ฝๆฏๅๆณ็ๅๅญ) ๐พ replit โฉ <vstack-> valid name?
// 0.0.5 + helpers
import {attr} from './helpers.mjs';
// VStack
export default class VStack extends HTMLElement {
// this.render()
render() {
const {spacing, alignment} = this;
const attrs = [spacing, alignment].filter(attr => !!attr); // remove empty attributes
// if no specific settings, use default values and return.
if (attrs.length === 0) return;
// style ID for this element
const styleID = `VStack-${attrs.join('_')}`;
// put vstack style ID in "data-xxx" attribute
this.dataset.style = styleID;
// if no such <style> with this ID, create it.
if (!document.getElementById(styleID)) {
// create <style>
let style = document.createElement('style');
style.id = styleID;
// concate css rules
const rules = [
// spacing between items
`${spacing ? `[data-style="${styleID}"] > * + :not(i-spacer) {margin-top: ${spacing};}` : ''}`,
// stack alignmentment
`${alignment ? `[data-style="${styleID}"] {align-items: ${alignment};}` : ''}`,
]
.filter(rule => rule !== '') // remove empty rules
.join('\n');
style.innerHTML = `${rules}`;
document.head.appendChild(style);
}
}
// -------------- getters/setters -------------------------
// this.spacing (= '30px')
get spacing() { return attr(this, 'spacing') }
set spacing(val) { return attr(this, 'spacing', val) }
// this.alignment (= 'flex-start' | 'center' | 'flex-end')
get alignment() { return attr(this, 'alignment') }
set alignment(val) { return attr(this, 'alignment', val) }
// -------------- lifecycle callbacks -------------------------
// โญ connected to document
connectedCallback() {
this.render();
}
// โญ observed attributes
static get observedAttributes() {
return ['spacing', 'alignment'];
}
// re-renders whenever one of attributes changes.
attributeChangedCallback() {
this.render();
}
}
// โญ๏ธ register <vstack->
customElements.get('vstack-') || customElements.define('vstack-', VStack);
/* 0.1.0 - align-items: center -> stretch */
/* VStack */
vstack- {
display: flex;
flex-direction: column;
align-items: stretch;
}
/* VStack ๅ
ง้ spacer ็้้ */
vstack- > * + :not(spacer-) {
margin-top: var(--spacing);
}
/*
ๅฆๆๅชๆๅฏไธไธๅ VStack๏ผๅฐฑ่ฎๅฎ็้ซๅบฆ็บ 100%๏ผ
้ๆจฃ่ฃก้ข็ spacer ๆ่ฝ็ผ็ไฝ็จใ
โญ๏ธ ๆณจๆ๏ผ
ๆญค่จญๅฎไธๅฎ่ฆใๆฏ็ฉไปถใๆใๆ็ขบ่จญๅฎใheight ๆๆๆโ๏ธ
ๆฏ็ฉไปถ่จญๅฎ min-height ๆฒๆไปปไฝๅนซๅฉๅโ๏ธ
*/
vstack-:only-child {
height: 100%;
}
replit โฉ layout 0.1.0 - align-items: center โ stretch
/* โญ๏ธ HStack */
.hstack {
display: flex;
flex-direction: row;
}
/* โญ๏ธ VStack */
.vstack {
display: flex;
flex-direction: column;
}
/* โญ๏ธ Spacer */
.hstack > .spacer {
margin-left: auto;
width: 0;
border: none;
}
.vstack > .spacer {
margin-top: auto;
height: 0;
border: none;
}
ๅฏซไธๅ <spacer> ไพไปฃๆฟ splitAfterโ(ๅฏ่ก)
<i-vstack align="right" class="container">
็ถๅจ custom element <i-vstack> ไธญ่ผธๅ ฅๅฑฌๆง align="right"๏ผ็ซ็ถๆๅผ็ผ browser ่ชๅๅฐๅฎ่ฝ็บ๏ผ(๐ค align="..." ็ซ็ถๅฐ custom element ไนๆๆโ)
i-vstack[Attributes Style] {
text-align: right;
}
ๅฐ่ดๅ ง้จ็ๆๆๅญๅ ็ด ้ฝ็นผๆฟๅฐๆญค text-align ๆง่ณช๏ผ
HTML align attribute supports col, colgroup, tbody, td, tfoot, th, thead, tr elements. Usage of align attribute for any other HTML elements is deprecated. You must use CSS for those. ๐ w3resource โฉ HTML align attribute
่งฃๆฑบๆนๆก๏ผ ๅ่ฉฆๅฐ align="..." ๆน็บ alignment="..." ็็ใ(็ตๆ OK โ )
Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry - ้ๅ้กๅธธๅบ็พๅจ CodeSandbox ไธใ
่งฃๆฑบๆนๆก๏ผ
// โญ๏ธ register new tag <i-vstack>
customElements.get('i-vstack') ||
customElements.define('i-vstack', VStack);
In order for a % value to work for height, the parent's height must be determined. ๐ฃ Why doesn't height: 100% working?
ๅฆๆ้ฝๆฏ็จ็พๅๆฏ๏ผๅไธ่ทฏๅพ html โฉ body โฉ .... โฉ ๅฐ่ชๅทฑ็็ดๅฑฌๆฏ็ฉไปถ้ฝ่ฆๆๆ็ขบ่จญๅฎ %๏ผๅฆๅๅช่ฆไธญ้ๆไธๅฑคๆทๆไนๆฏๆฒ็จใ
/*
็ถๆๅ่จญๅฎ height: 100% ๆ๏ผๆญค่จญๅฎไธฆไธๆ็ๆญฃ็ผ็ไฝ็จ๏ผ
้ค้ๅฎ็ๆฏ็ฉไปถๆใๆ็ขบ่จญๅฎใheightใ
โญ๏ธ ๆณจๆ๏ผ่จญๅฎๆฏ็ฉไปถ็ min-height ไธฆๆฒๆๅนซๅฉโ๏ธ
*/
i-vstack:only-child {
height: 100%;
}
TutorialPublic โฉ How to set the height of a div to 100% using CSS
MDN โฉ CSS โฉ
Failed to execute 'define' on 'CustomElementRegistry': this name has already been used with this registry - ้ๅ้กๅธธๅบ็พๅจ CodeSandbox ไธใ