« home

elementari Examples

ElementTile.svelte automatically changes text color to ensure high contrast with its background. If its background is transparent, it traverses up the DOM tree to find the first element with non-transparent background color. This an, of course, go wrong e.g. if the tile is absolutely positioned outside its parent element. In that case, pass an explicit text_color prop and text_color_threshold={null} to ElementTile to override the automatic color selection.

<script>
  import { ElementTile, element_data } from '$lib'

  const rand_color = () => `hsl(${Math.random() * 360}, ${Math.random() * 50 + 50}%, ${Math.random() * 50 + 50}%)`
</script>

<ol>
  {#each Array(27).fill(0).map(rand_color) as bg_color, idx}
    <ElementTile {bg_color} element={element_data[idx]} style="width: 4em; margin: 0;" />
  {/each}
</ol>
    1 H Hydrogen
    2 He Helium
    3 Li Lithium
    4 Be Beryllium
    5 B Boron
    6 C Carbon
    7 N Nitrogen
    8 O Oxygen
    9 F Fluorine
    10 Ne Neon
    11 Na Sodium
    12 Mg Magnesium
    13 Al Aluminium
    14 Si Silicon
    15 P Phosphorus
    16 S Sulfur
    17 Cl Chlorine
    18 Ar Argon
    19 K Potassium
    20 Ca Calcium
    21 Sc Scandium
    22 Ti Titanium
    23 V Vanadium
    24 Cr Chromium
    25 Mn Manganese
    26 Fe Iron
    27 Co Cobalt

Displaying values instead of element names by passing the value prop.

<script>
  import { ElementTile, element_data } from '$lib'
</script>

<ol>
  {#each ['red', 'green', 'blue', 'yellow', 'cyan', 'magenta', 'black', 'white'] as bg_color, idx}
    <ElementTile {bg_color} element={element_data[idx]} value={Math.random()} style="width: 4em; margin: 0;" active />
  {/each}
</ol>
    1 H 0.638
    2 He 0.0226
    3 Li 0.506
    4 Be 0.513
    5 B 0.96
    6 C 0.41
    7 N 0.168
    8 O 0.487