UNPKG

@zumer/orbit

Version:

Orbit builds radial interfaces with CSS geometry and a small JavaScript layout runtime

167 lines (166 loc) • 4.48 kB
{ "version": 1.1, "tags": [ { "name": "o-arc", "description": "A segment of its ring. Without value, sibling arcs split the range equally; with value, they stack in DOM order. Text content is drawn along the arc. Place it directly in a ring.", "attributes": [ { "name": "value", "description": "Share of the ring's range, relative to max. Without it, sibling arcs split the range equally." }, { "name": "max", "description": "Value that fills the ring's range. Must be positive. Default: 100." }, { "name": "shape", "description": "Ending of the band. Default: none.", "values": [ { "name": "none" }, { "name": "rounded" }, { "name": "circle" }, { "name": "circle-a" }, { "name": "circle-b" }, { "name": "bullet" }, { "name": "arrow" }, { "name": "slash" }, { "name": "backslash" }, { "name": "zigzag" } ] }, { "name": "interactive", "description": "Let the band receive pointer events, even where it is transparent. Decorative by default.", "valueSet": "v" }, { "name": "hit-width", "description": "Extra touch area in px on each side of an interactive band. Default: 0." }, { "name": "text-anchor", "description": "Where curved text sits on the arc. With range=\"auto\", an explicit value anchors the arc at its angle: middle centers it, end ends it there. Default: middle.", "values": [ { "name": "start" }, { "name": "middle" }, { "name": "end" } ] }, { "name": "flip", "description": "Reverse the direction of curved text.", "valueSet": "v" }, { "name": "fit-range", "description": "Squeeze curved text to the length of the arc.", "valueSet": "v" }, { "name": "range", "description": "Size the arc to its text. Consecutive range=\"auto\" arcs follow each other.", "values": [ { "name": "auto" } ] } ] }, { "name": "o-progress", "description": "A progress band over a background track that spans its ring's range. Place it directly in a ring.", "attributes": [ { "name": "value", "description": "Value relative to max." }, { "name": "max", "description": "Value that fills the ring's range. Must be positive. Default: 100." }, { "name": "shape", "description": "Ending of the band. Default: none.", "values": [ { "name": "none" }, { "name": "rounded" }, { "name": "circle" }, { "name": "circle-a" }, { "name": "circle-b" }, { "name": "bullet" }, { "name": "arrow" }, { "name": "slash" }, { "name": "backslash" }, { "name": "zigzag" } ] }, { "name": "interactive", "description": "Let the band receive pointer events, even where it is transparent. Decorative by default.", "valueSet": "v" }, { "name": "hit-width", "description": "Extra touch area in px on each side of an interactive band. Default: 0." }, { "name": "variant", "description": "Draw open lines colored by --o-stroke and --o-back-stroke instead of filled bands.", "values": [ { "name": "stroke" } ] } ] } ] }