chore: update flex reference and prune examples
This commit is contained in:
Kinneyzhang
parent
dd7541e535
commit
cdefca440e
@ -1,7 +0,0 @@
|
||||
# Ebox Playground examples
|
||||
|
||||
The `.ebox` files in this directory are the concrete layouts consumed by the generic `ebox-playground` runner. They are intentionally ordinary, reader-valid Ebox DSL forms so authors can copy, edit, and open them directly.
|
||||
|
||||
The file itself is the data form: structural forms stay unquoted, while literal list and symbol property values use quote just as they do in `etaf-view` (for example, `:gap '(1 (16))` and `:justify-content 'center`). An unquoted property value is an executable Elisp expression and is evaluated by the runner. The reader itself keeps read-time evaluation disabled.
|
||||
|
||||
`public-layout-gallery.ebox` is the default fixture used by `M-x ebox-playground-open`. The migrated low-level references live directly beside it: `basic.ebox`, `comprehensive.ebox`, `flex-reference.ebox`, `responsive-reference.ebox`, and `grid-reference.ebox`. The Flex reference owns its document viewport with a root `:overflow 'scroll` box: keyboard line scrolling follows the cursor's innermost scroll owner, mouse wheel scrolling follows the pointer, and residual movement bubbles through nested owners before native buffer scrolling. It keeps its original complete-content semantics during splitter resize. The Grid reference is the complete public property/value gallery: track templates (`auto`, `NFR`, `(fr FACTOR)`, `minmax`, and `repeat`), implicit tracks, row/column auto-flow, gap shorthand/longhands/aliases, placement and spans, and every supported item/content alignment value. It also documents that Ebox supports `row` and `column` auto-flow rather than browser `dense` variants. To render another fixture, visit it and press `C-c C-c`, or call `ebox-playground-open-file`.
|
||||
@ -1,7 +0,0 @@
|
||||
# Ebox Playground 示例
|
||||
|
||||
此目录下的 `.ebox` 文件是通用 `ebox-playground` 运行器读取的具体布局。它们保持为普通、可读、可被 reader 读取的 Ebox DSL form，便于直接复制、编辑和打开。
|
||||
|
||||
文件本身就是 data form：结构表单保持不加 quote；list 和 symbol 类型的字面量属性值要和 `etaf-view` 一样加 quote，例如 `:gap '(1 (16))`、`:justify-content 'center`。未加 quote 的属性值会被运行器当作可执行的 Elisp 表达式求值；读取器本身仍然关闭 reader 求值。
|
||||
|
||||
`public-layout-gallery.ebox` 是 `M-x ebox-playground-open` 使用的默认 fixture。迁移来的低层参考和它并列放在 `examples/` 下：`basic.ebox`、`comprehensive.ebox`、`flex-reference.ebox`、`responsive-reference.ebox` 和 `grid-reference.ebox`。Flex 参考由根部 `:overflow 'scroll` 盒子拥有文档 viewport：键盘逐行作用于光标所在的最内层滚动 owner，鼠标滚轮按指针位置路由，剩余滚动量沿嵌套 owner 向外冒泡，最后才交给普通 buffer；splitter resize 时仍保持原有的完整内容语义。Grid 参考是完整的公共属性/值画廊：轨道模板（`auto`、`NFR`、`(fr FACTOR)`、`minmax`、`repeat`）、隐式轨道、row/column auto-flow、gap 简写/长写/别名、placement 与 span，以及所有受支持的 item/content 对齐值；同时注明 Ebox 支持 `row` 和 `column` auto-flow，不支持浏览器的 `dense` 变体。要渲染其他 fixture，可以访问该文件后按 `C-c C-c`，或调用 `ebox-playground-open-file`。
|
||||
@ -1,3 +0,0 @@
|
||||
(box :box-sizing 'border-box :padding '(1 (12)) :border "#2563EB"
|
||||
:bgcolor "#EFF6FF" :color "#1E3A8A"
|
||||
"Playground file")
|
||||
@ -1,29 +0,0 @@
|
||||
(column
|
||||
(box :padding '(1 (16)) :border "#334155" :bgcolor "#F8FAFC" :color
|
||||
"#0F172A" :text-align 'center
|
||||
"Ebox comprehensive DSL showcase\nThe outer sections omit :width so Playground viewport sizing drives the layout.")
|
||||
(box :width '(viewport) :height 1 :bgcolor "#F8FAFC")
|
||||
(box :padding '(0 (14)) :border "#64748B" :bgcolor "#F8FAFC" :color
|
||||
"#111827" :wrap-mode 'word
|
||||
"Width rule in this file\nContainer sections use auto width. Fixed widths remain only where the example demonstrates exact item sizing, basis, min-width, or max-width.")
|
||||
(box :width '(viewport) :height 1 :bgcolor "#F8FAFC")
|
||||
(flex :margin '(1 0 0 1) :padding '(1 (8)) :border "#475569" :bgcolor
|
||||
"#F8FAFC" :flex-flow '(row wrap) :justify-content
|
||||
'space-between :align-items 'center :align-content 'flex-start
|
||||
:row-gap 1 :column-gap '(12)
|
||||
(box :order -1 :flex-basis '(270) :align-self 'flex-start
|
||||
:width '(270) :padding '(0 (8)) :border "#BE185D"
|
||||
:bgcolor "#FCE7F3" :color "#831843" :wrap-mode 'word
|
||||
"Box order -1\n:flex-basis 270\nalign-self start")
|
||||
(box :flex '(1 1 (220)) :width '(220) :height 4 :padding
|
||||
'(0 (8)) :border "#1D4ED8" :bgcolor "#DBEAFE" :color
|
||||
"#111827" :wrap-mode 'word
|
||||
"Box :flex (1 1 220)\ngrow shrink basis")
|
||||
(box :flex-grow 2 :flex-shrink 1 :flex-basis '(240) :align-self
|
||||
'center :width '(240) :height 4 :padding '(0 (8)) :border
|
||||
"#B45309" :bgcolor "#FEF3C7" :color "#78350F" :wrap-mode
|
||||
'word "Box grow 2\nshrink 1\nbasis 240")
|
||||
(box :flex-shrink 3 :flex-basis '(190) :align-self 'flex-end
|
||||
:width '(190) :height 4 :padding '(0 (8)) :border
|
||||
"#15803D" :bgcolor "#DCFCE7" :color "#14532D" :wrap-mode
|
||||
'word "Box shrink 3\nbasis 190\nalign-self flex-end")))
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,64 +0,0 @@
|
||||
(column
|
||||
(box :width '(720) :padding '(1 (18)) :border "#8F432F" :color
|
||||
"#252A2E" :bgcolor "#FFFDF8" :font-weight 'bold :text-align 'center
|
||||
"Ebox Playground\nPixel-precise layout, composed only from public nodes.")
|
||||
(box :width '(720) :height 1 :bgcolor "#FAF7F0")
|
||||
(box :width '(720) :padding '(0 (16)) :border-top "#C97252"
|
||||
:border-right "#C97252" :border-left "#C97252"
|
||||
:color "#252A2E" :bgcolor "#F1D4C9"
|
||||
:wrap-mode 'word
|
||||
"01 FIXED + FRACTIONAL\nA definite Grid width divides into one exact track and one flexible track.")
|
||||
(grid :width '(720) :grid-template-columns '((220) (fr 1)) :gap
|
||||
'(1 (12)) :border "#C97252" :bgcolor "#FFF9F5"
|
||||
(box :width '(220) :padding '(1 0) :text-align 'center :color
|
||||
"#252A2E" :bgcolor "#F1D4C9"
|
||||
"FIXED TRACK\n220 px stays exact")
|
||||
(box :width '(486) :padding '(1 0) :text-align 'center :color
|
||||
"#252A2E" :bgcolor "#F9E8E0"
|
||||
"FRACTIONAL TRACK\n1fr receives the remaining width")
|
||||
(box :grid-column '(1 :span 2) :width '(718) :padding '(1 0)
|
||||
:color "#663322" :bgcolor "#FFFDF8" :text-align 'center
|
||||
:wrap-mode 'word
|
||||
"The Grid owns one definite width; its tracks divide that space without competing viewport calculations."))
|
||||
(box :width '(720) :height 1 :bgcolor "#FAF7F0")
|
||||
(box :width '(720) :padding '(0 (16)) :border-top "#6D8A73"
|
||||
:border-right "#6D8A73" :border-left "#6D8A73"
|
||||
:color "#252A2E" :bgcolor "#DCEBDD"
|
||||
:wrap-mode 'word
|
||||
"02 EXPLICIT PLACEMENT\nSpan columns, target cells, and leave the remaining nodes to auto placement.")
|
||||
(grid :width '(720) :grid-template-columns '((210) (210) (fr 1)) :gap
|
||||
'(1 (10)) :border "#6D8A73" :bgcolor "#F7FBF7"
|
||||
(box :grid-column '(1 :span 2) :width '(430) :padding '(1 0)
|
||||
:text-align 'center :color "#24422D" :bgcolor "#DCEBDD"
|
||||
"SPAN 1 → 3")
|
||||
(box :grid-column 3 :grid-row 1 :width '(278) :padding '(1 0)
|
||||
:text-align 'center :color "#24422D" :bgcolor "#C8DDCB"
|
||||
"COLUMN 3")
|
||||
(box :grid-column 1 :grid-row 2 :width '(210) :padding '(1 0)
|
||||
:text-align 'center :color "#24422D" :bgcolor "#EDF5EE"
|
||||
"ROW 2 / COL 1")
|
||||
(box :width '(210) :padding '(1 0) :text-align 'center :color
|
||||
"#24422D" :bgcolor "#E3F0E5" "AUTO PLACED")
|
||||
(box :width '(278) :padding '(1 0) :text-align 'center :color
|
||||
"#24422D" :bgcolor "#D4E6D7" "STABLE CELLS"))
|
||||
(box :width '(720) :height 1 :bgcolor "#FAF7F0")
|
||||
(box :width '(720) :padding '(0 (16)) :border-top "#4E7890"
|
||||
:border-right "#4E7890" :border-left "#4E7890"
|
||||
:color "#252A2E" :bgcolor "#D9EAF2"
|
||||
:wrap-mode 'word
|
||||
"03 PUBLIC COMPOSITION\nColumn, Flex, and Grid share the same public node contract.")
|
||||
(flex :width '(720) :flex-flow '(row wrap) :gap '(1 (12)) :padding
|
||||
'(1 (12)) :border "#4E7890" :bgcolor "#F7FAFC"
|
||||
(box :flex-grow 1 :flex-shrink 1 :flex-basis '(200) :min-width
|
||||
'(180) :padding '(1 (12)) :color "#193846" :bgcolor
|
||||
"#D9EAF2" "COLUMN\nvertical composition")
|
||||
(box :flex-grow 1 :flex-shrink 1 :flex-basis '(200) :min-width
|
||||
'(180) :padding '(1 (12)) :color "#3F3655" :bgcolor
|
||||
"#E7E2F1" "FLEX\nwrap and distribute")
|
||||
(box :flex-grow 1 :flex-shrink 1 :flex-basis '(200) :min-width
|
||||
'(180) :padding '(1 (12)) :color "#6B3020" :bgcolor
|
||||
"#F1D4C9" "GRID\nplace in two dimensions"))
|
||||
(box :width '(720) :height 1 :bgcolor "#FAF7F0")
|
||||
(box :width '(720) :padding '(0 (16)) :border "#8D887F" :color
|
||||
"#4D5651" :bgcolor "#EEEAE2" :wrap-mode 'word
|
||||
"AUTHOR FORMS String · text · box · row · column · flex · grid"))
|
||||
@ -1,59 +0,0 @@
|
||||
(column :margin-left 1 :margin-top 1 :padding '(1 2 1 2) :bgcolor
|
||||
"linen"
|
||||
(box :padding '(1 (18)) :border "#334155" :text-align 'center
|
||||
:color "#000" :bgcolor "ghost white"
|
||||
"Ebox Responsive Layout\nDrag the preview window: sections stretch to the current viewport, cards reflow, and text wraps without changing the window layout.")
|
||||
(box :height 1)
|
||||
(box :padding '(0 (16)) :border "#0F766E" :bgcolor "#F0FDFA"
|
||||
:color "#134E4A" :wrap-mode 'word
|
||||
"No explicit viewport width here\nThis page mostly omits :width. The Playground binds the current preview width while rendering, so auto width behaves like a responsive container.")
|
||||
(box :height 1)
|
||||
(box :padding '(0 (16)) :border-top "#EA580C"
|
||||
:border-right "#EA580C" :border-left "#EA580C"
|
||||
:bgcolor "#FFF7ED" :color "#431407" :wrap-mode 'word
|
||||
"Adaptive toolbar\nButtons below keep stable sizes. The row packs as many as fit and then wraps.")
|
||||
(flex :flex-flow '(row wrap) :column-gap '(8) :row-gap 1
|
||||
:padding '(1 (8)) :border "#FDBA74" :bgcolor "#FFFBF5"
|
||||
(box :width '(96) :padding '(0 (8)) :border "#EA580C"
|
||||
:bgcolor "#FED7AA" :color "#111827" :text-align
|
||||
'center "Render")
|
||||
(box :width '(88) :padding '(0 (8)) :border "#D97706"
|
||||
:bgcolor "#FEF3C7" :color "#111827" :text-align
|
||||
'center "Save")
|
||||
(box :width '(96) :padding '(0 (8)) :border "#16A34A"
|
||||
:bgcolor "#DCFCE7" :color "#14532D" :text-align
|
||||
'center "Format")
|
||||
(box :width '(104) :padding '(0 (8)) :border "#0284C7"
|
||||
:bgcolor "#E0F2FE" :color "#0C4A6E" :text-align
|
||||
'center "Sample")
|
||||
(box :width '(88) :padding '(0 (8)) :border "#9333EA"
|
||||
:bgcolor "#F3E8FF" :color "#3B0764" :text-align
|
||||
'center "Write"))
|
||||
(box :height 1)
|
||||
(box :padding '(0 (16)) :border-top "#2563EB"
|
||||
:border-right "#2563EB" :border-left "#2563EB"
|
||||
:bgcolor "#EFF6FF" :color "#1E3A8A" :wrap-mode 'word
|
||||
"Responsive cards\nEach card starts from a flex-basis, grows when space is available, and wraps to new rows when the preview becomes narrow.")
|
||||
(flex :flex-flow '(row wrap) :column-gap '(12) :row-gap 1
|
||||
:padding '(1 (8)) :border "#93C5FD" :bgcolor "#F8FBFF"
|
||||
:justify-content 'center
|
||||
(box :flex '(1 1 (210)) :min-width '(180) :max-width
|
||||
'(280) :padding '(0 (10)) :bgcolor "#DBEAFE" :color
|
||||
"#111827" :wrap-mode 'word
|
||||
"Overview\nThe row uses the current preview width automatically.")
|
||||
(box :flex '(1 1 (210)) :min-width '(180) :max-width
|
||||
'(300) :padding '(0 (10)) :bgcolor "#E0E7FF" :color
|
||||
"#111827" :wrap-mode 'word
|
||||
"Editor\nDrag slowly or quickly; resize rendering follows the viewport.")
|
||||
(box :flex '(1 1 (210)) :min-width '(180) :max-width
|
||||
'(320) :padding '(0 (10)) :bgcolor "#EDE9FE" :color
|
||||
"#111827" :wrap-mode 'word
|
||||
"Preview\nThe preview updates from the current viewport width.")
|
||||
(box :flex '(1 1 (210)) :min-width '(180) :max-width
|
||||
'(280) :padding '(0 (10)) :bgcolor "#CFFAFE" :color
|
||||
"#164E63" :wrap-mode 'word
|
||||
"Flow\nCards keep readable widths instead of overflowing."))
|
||||
(box :height 1)
|
||||
(box :padding '(0 (16)) :border "#475569" :bgcolor "#F8FAFC"
|
||||
:color "#0F172A" :wrap-mode 'word
|
||||
"What to watch\nNarrow preview: cards stack and text wraps. Wide preview: cards share a row and expand up to max-width. The source/preview split is preserved."))
|
||||
Loading…
Reference in New Issue
Block a user