spine

extended html for hawk.

a set of pre-built web components.

spine extends the language of html to make it more capable and more aware of urbit constructs.

spine-sidebar

a collapse-able sidebar.

slots:

• side

• (default)

attributes:

• open: boolean

• side: string

• label: string

• size: number

  • between 0 and 1

  • representing the fraction of the width to take by default

;spine-sidebar.wf.hf
  =open  ""
  =label  "my sidebar"
  =side  "bottom"
  ;div.p3.wf.hf.b2.prose
    =slot  "side"
    # side bar

    blah

    blah

    blah
  ==
  ;div.wf.hf.page.prose
    # main section

    here is some text
  ==
==

spine-tabs

one tab per child. only one child is shown at a time.

slots:

• (default)

attributes:

• open: string, corresponds to the data-tab attribute of the direct child that is open.

;spine-tabs(open "output")
  ;div(data-tab "input"): the input
  ;div(data-tab "footnotes"): the footnotes
  ;div(data-tab "output"): the output
==

spine-input-atom

input box for urbit casted atoms (dimes)

the values submitted into the containing form will be a hoon-compabtible rendered dime, which will be given in the $card with the correct dime auras.

when you are creating forms in hawk and want the values to be typed in the $card, use this component.

slots: n/a

attributes:

• value: string (@ta encoded value)

• aura: string (aura @tas)

  • there is 1 special aura: ta-multi which displays a multi-line textarea

• name: string (location in $card)

• autocomplete: boolean

• rows: number (only if applies if type is 'ta-multi')

• spellcheck: boolean

• required: boolean

• disabled: boolean

• placeholder: string (default to aura)

;spine-input-atom
  =aura  "da"             ::  date picker
  =value  (scow %da *da)  ::  always use scow encoding
  =name  "/start-date"    ::  location in $card
  ;
==

more examples of spine-input-atom

spine-atom

like ;spine-input-atom but just for displaying a dime.

slots: n/a

attributes:

• value: string (@ta encoded value)

• aura: string (aura @tas)

;spine-atom
  =aura  "t"
  =value  (scow %t 'Friday Night!') :: always use scow
  ;
==

coming soon

• spine-tooltip

• spine-accordion

• spine-code-editor

• spine-rich-editor

• spine-search-select