@zumer/orbit
Version:
Orbit builds radial interfaces with CSS geometry and a small JavaScript layout runtime
167 lines (166 loc) • 4.48 kB
JSON
{
"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"
}
]
}
]
}
]
}