x-spacer
custom element horizontal/vertical resizable spacer of arbitrary number of children
npm i x-spacer
|
pnpm add x-spacer
|
yarn add x-spacer
|
Examples
# web
# view source
example/web.tsx
/** @jsxImportSource sigl */
import $ from 'sigl'
import { SpacerElement } from 'x-spacer'
const horiz = ['#040', '#004', '#505', '#770']
const vert = ['#040', '#004', '#505', '#770']
import { Rect } from 'sigl'
import { SurfaceElement, SurfaceItemElement, SurfaceMoveElement, SurfaceResizeElement } from 'x-surface'
interface ItemElement extends $.Element<ItemElement> {}
@$.element()
class ItemElement extends $(SurfaceItemElement) {
SurfaceMove = $.element(SurfaceMoveElement)
SurfaceResize = $.element(SurfaceResizeElement)
Spacer = $.element(SpacerElement)
mounted($: ItemElement['$']) {
$.render(({ host, surface, Spacer, SurfaceMove, SurfaceResize }) => (
<>
<style>
{/*css*/ `
:host {
box-sizing: border-box;
border: 2px solid pink;
display: block;
position: absolute;
}
${SurfaceMove} {
background: #067;
width: 100%;
height: 20px;
position: absolute;
}
${SurfaceResize} {
background: #ba2;
position: absolute;
right: 0;
bottom: 0;
width: 20px;
height: 20px;
}
${Spacer}::part(handle) {
background: #0003;
}
div {
display: flex;
width: 100%;
height: 100%;
}
`}
</style>
<SurfaceMove surface={surface} dest={host} />
<SurfaceResize surface={surface} dest={host} />
<Spacer vertical surface={surface}>
<div style="background: #330">
<Spacer surface={surface}>
{horiz.map(x => <div style={'background:' + x}></div>)}
</Spacer>
</div>
{vert.map(x => <div style={'background:' + x}></div>)}
</Spacer>
</>
))
}
}
interface SceneElement extends $.Element<SceneElement> {}
@$.element()
class SceneElement extends HTMLElement {
Surface = $.element(SurfaceElement)
Item = $.element(ItemElement)
items = new $.RefSet<ItemElement>([
{ rect: new Rect(0, 0, 500, 500) },
{ rect: new Rect(700, 0, 500, 500) },
])
mounted($: SceneElement['$']) {
$.render(({ Surface, Item, items }) => (
<Surface>
{items.map(item => <Item {x-spacer.item} />)}
</Surface>
))
}
}
const Scene = $.element(SceneElement)
$.render(
<>
<style>
{/*css*/ `
${Scene} {
display: block;
width: 100%;
height: 100%;
position: fixed;
}
`}
</style>
<Scene />
</>,
document.body
)
API
Context<SpacerElement & JsxContext<SpacerElement> & Omit<{ <T>(ctor) => <T>(ctx) => #
src/x-spacer.tsx#L72 SpacerElement
#
src/sigl/dist/types/sigl.d.ts#L25 $
CleanClass<T>
Wrapper<T>
},
"transition"
>> # context
src/sigl/dist/types/sigl.d.ts#L26 ContextClass<SpacerElement & JsxContext<SpacerElement> & Omit<{
<T>(ctor) =>
-
CleanClass<T>
<T>(ctx) =>
-
Wrapper<T>
},
"transition"
>> # onmounted
EventHandler<SpacerElement, CustomEvent<any>>
# onunmounted
EventHandler<SpacerElement, CustomEvent<any>>
# resizeItems
= ...
src/x-spacer.tsx#L90 Fn<[ named-tuple-member, named-tuple-member, named-tuple-member ], void>
# state
= ...
src/x-spacer.tsx#L75 State<SpacerElement, {
string string#
Idle
= 'spaceridle'
#
Resizing
= 'spacerresizing'
# __#2@#updateOffsets
()
__#2@#updateOffsets() =>
- void
# created
(ctx)
Context<SpacerElement & JsxContext<SpacerElement> & Omit<{ <T>(ctor) => #
ctx
CleanClass<T>
<T>(ctx) =>
-
Wrapper<T>
},
"transition"
>> created(ctx) =>
- void
# mounted
($)
src/x-spacer.tsx#L241 Context<SpacerElement & JsxContext<SpacerElement> & Omit<{ <T>(ctor) => #
$
CleanClass<T>
<T>(ctx) =>
-
Wrapper<T>
},
"transition"
>> mounted($) =>
- void
# on
(name)
on<K>(name) =>
-
On<Fn<[ EventHandler<SpacerElement, LifecycleEvents & object [K]> ], Off>>
# toJSON
()
toJSON() =>
-
Pick<SpacerElement, keyof SpacerElement>
# SpacerState
= ...
src/x-spacer.tsx#L52 Credits
- sigl by stagas – Web framework
- x-surface by stagas – Infinitely pannable and zoomable HTML surface as a Web Component.
Contributing
All contributions are welcome!