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['
API
# SpacerElement
src/x-spacer.tsx#L72
# $
src/sigl/dist/types/sigl.d.ts#L25 Context<SpacerElement & JsxContext<SpacerElement> & Omit<{
<T>(ctor) =>
- CleanClass<T>
<T>(ctx) =>
- 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, {
# Idle = 'spaceridle'
string
# Resizing = 'spacerresizing'
string
# __#2@#updateOffsets()
__#2@#updateOffsets() =>
- void
# created(ctx)
# ctx
Context<SpacerElement & JsxContext<SpacerElement> & Omit<{
<T>(ctor) =>
- 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!
License
]) { $.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['API
# __INLINE_CODE_5__
src/x-spacer.tsx#L72
# __INLINE_CODE_9__
src/sigl/dist/types/sigl.d.ts#L25Context<SpacerElement & JsxContext<SpacerElement> & Omit<{
<T>(ctor) =>
- CleanClass<T>
<T>(ctx) =>
- Wrapper<T>
}, __INLINE_CODE_15__>>
# __INLINE_CODE_20__
src/sigl/dist/types/sigl.d.ts#L26ContextClass<SpacerElement & JsxContext<SpacerElement> & Omit<{
<T>(ctor) =>
- CleanClass<T>
<T>(ctx) =>
- Wrapper<T>
}, __INLINE_CODE_26__>>
# __INLINE_CODE_27__ = __INLINE_CODE_28__
src/x-spacer.tsx#L87__INLINE_CODE_29__ | __INLINE_CODE_30__
# __INLINE_CODE_42__ = __INLINE_CODE_43__
src/x-spacer.tsx#L88__INLINE_CODE_44__ | __INLINE_CODE_45__
# __INLINE_CODE_46__
EventHandler<SpacerElement, CustomEvent<any>>
# __INLINE_CODE_47__
EventHandler<SpacerElement, CustomEvent<any>>
# __INLINE_CODE_52__ = __INLINE_CODE_53__
src/x-spacer.tsx#L86__INLINE_CODE_54__ | __INLINE_CODE_55__
# __INLINE_CODE_57__ = __INLINE_CODE_58__
src/x-spacer.tsx#L90Fn<[ named-tuple-member, named-tuple-member, named-tuple-member ], void>
# __INLINE_CODE_71__ = __INLINE_CODE_72__
src/x-spacer.tsx#L75State<SpacerElement, {
# __INLINE_CODE_73__ = __INLINE_CODE_74__
string
# __INLINE_CODE_75__ = __INLINE_CODE_76__
string
# __INLINE_CODE_80__()
__#2@#updateOffsets() =>
- void
# __INLINE_CODE_81__(ctx)
# __INLINE_CODE_82__
Context<SpacerElement & JsxContext<SpacerElement> & Omit<{
<T>(ctor) =>
- CleanClass<T>
<T>(ctx) =>
- Wrapper<T>
}, __INLINE_CODE_88__>>
created(ctx) =>
- void
# __INLINE_CODE_89__($)
src/x-spacer.tsx#L241
# __INLINE_CODE_90__
Context<SpacerElement & JsxContext<SpacerElement> & Omit<{
<T>(ctor) =>
- CleanClass<T>
<T>(ctx) =>
- Wrapper<T>
}, __INLINE_CODE_96__>>
mounted($) =>
- void
# __INLINE_CODE_97__(name)
on<K>(name) =>
- On<Fn<[ EventHandler<SpacerElement, LifecycleEvents & object [K]> ], Off>>
# __INLINE_CODE_99__()
toJSON() =>
- Pick<SpacerElement, keyof SpacerElement>
# __INLINE_CODE_100__ = __INLINE_CODE_101__
src/x-spacer.tsx#L52Credits
- sigl by stagas – Web framework
- x-surface by stagas – Infinitely pannable and zoomable HTML surface as a Web Component.
Contributing
All contributions are welcome!
License
]) { $.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
# __INLINE_CODE_5__
src/x-spacer.tsx#L72
# __INLINE_CODE_9__
src/sigl/dist/types/sigl.d.ts#L25Context<SpacerElement & JsxContext<SpacerElement> & Omit<{
<T>(ctor) =>
- CleanClass<T>
<T>(ctx) =>
- Wrapper<T>
}, __INLINE_CODE_15__>>
# __INLINE_CODE_20__
src/sigl/dist/types/sigl.d.ts#L26ContextClass<SpacerElement & JsxContext<SpacerElement> & Omit<{
<T>(ctor) =>
- CleanClass<T>
<T>(ctx) =>
- Wrapper<T>
}, __INLINE_CODE_26__>>
# __INLINE_CODE_27__ = __INLINE_CODE_28__
src/x-spacer.tsx#L87__INLINE_CODE_29__ | __INLINE_CODE_30__
# __INLINE_CODE_42__ = __INLINE_CODE_43__
src/x-spacer.tsx#L88__INLINE_CODE_44__ | __INLINE_CODE_45__
# __INLINE_CODE_46__
EventHandler<SpacerElement, CustomEvent<any>>
# __INLINE_CODE_47__
EventHandler<SpacerElement, CustomEvent<any>>
# __INLINE_CODE_52__ = __INLINE_CODE_53__
src/x-spacer.tsx#L86__INLINE_CODE_54__ | __INLINE_CODE_55__
# __INLINE_CODE_57__ = __INLINE_CODE_58__
src/x-spacer.tsx#L90Fn<[ named-tuple-member, named-tuple-member, named-tuple-member ], void>
# __INLINE_CODE_71__ = __INLINE_CODE_72__
src/x-spacer.tsx#L75State<SpacerElement, {
# __INLINE_CODE_73__ = __INLINE_CODE_74__
string
# __INLINE_CODE_75__ = __INLINE_CODE_76__
string
# __INLINE_CODE_80__()
__#2@#updateOffsets() =>
- void
# __INLINE_CODE_81__(ctx)
# __INLINE_CODE_82__
Context<SpacerElement & JsxContext<SpacerElement> & Omit<{
<T>(ctor) =>
- CleanClass<T>
<T>(ctx) =>
- Wrapper<T>
}, __INLINE_CODE_88__>>
created(ctx) =>
- void
# __INLINE_CODE_89__($)
src/x-spacer.tsx#L241
# __INLINE_CODE_90__
Context<SpacerElement & JsxContext<SpacerElement> & Omit<{
<T>(ctor) =>
- CleanClass<T>
<T>(ctx) =>
- Wrapper<T>
}, __INLINE_CODE_96__>>
mounted($) =>
- void
# __INLINE_CODE_97__(name)
on<K>(name) =>
- On<Fn<[ EventHandler<SpacerElement, LifecycleEvents & object [K]> ], Off>>
# __INLINE_CODE_99__()
toJSON() =>
- Pick<SpacerElement, keyof SpacerElement>
# __INLINE_CODE_100__ = __INLINE_CODE_101__
src/x-spacer.tsx#L52Credits
- sigl by stagas – Web framework
- x-surface by stagas – Infinitely pannable and zoomable HTML surface as a Web Component.
Contributing
All contributions are welcome!