vertical

Items are arranged vertically. Useful for simple lists and table-like views.

  • Mercury
    Hg
    80
    200.59
    transition
  • Tellurium
    Te
    52
    127.6
    metalloid
  • Bismuth
    Bi
    83
    208.980
    post-transition
  • Lead
    Pb
    82
    207.2
    post-transition
  • Gold
    Au
    79
    196.967
    transition
  • Potassium
    K
    19
    39.0983
    alkali
  • Sodium
    Na
    11
    22.99
    alkali
  • Cadmium
    Cd
    48
    112.411
    transition
  • Calcium
    Ca
    20
    40.078
    alkaline-earth
  • Rhenium
    Re
    75
    186.207
    transition
  • Thallium
    Tl
    81
    204.383
    post-transition
  • Antimony
    Sb
    51
    121.76
    metalloid
  • Cobalt
    Co
    27
    58.933
    transition
  • Ytterbium
    Yb
    70
    173.054
    lanthanoid
  • Argon
    Ar
    18
    39.948
    noble-gas
  • Nitrogen
    N
    7
    14.007
    diatomic
  • Uranium
    U
    92
    238.029
    actinoid
  • Plutonium
    Pu
    94
    (244)
    actinoid

Edit this demo on CodePen

Options

horizontalAlignment

Aligns items horizontally. Set as a decimal 0 to 1.

/* default
vertical: {
  // align to origin edge
  horizontalAlignment: 0
} */

vertical: {
  // align to center
  horizontalAlignment: 0.5
}

vertical: {
  // align to opposite edge
  horizontalAlignment: 1
}
layoutMode: 'vertical',
vertical: {
  horizontalAlignment: 0.5,
}