Codecraft Works Angular Elements Documentation

Tic-Tac-Toe Empty Board Example

Code

<codecraft-tic-tac-toe>
</codecraft-tic-tac-toe>

Tic-Tac-Toe Default Game Example

Code

<codecraft-tic-tac-toe
  row1="x, O, O"
  row2=" , x, "
  row3="x, o, x"
  diag1strike="true">
</codecraft-tic-tac-toe>

Note

Each row is a comma separated list of values of xs, os, and spaces.

Tic-Tac-Toe Colorful Game Example

Code

<codecraft-tic-tac-toe
  row1="x, O, O"
  row2=" , x, "
  row3="x, o, x"
  diag1strike="true"
  ocolor="#ff0000"
  xcolor="#0000ff"
  strikecolor="#00ff00cc">
</codecraft-tic-tac-toe>

Note

Each row is a comma separated list of values of xs, os, and spaces.

Tic-Tac-Toe Everything Example

Code

<codecraft-tic-tac-toe
  row1="x, O, O"
  row2="0, x,"
  row3="x, o, x"
  diag1strike="true"
  diag2strike="true"
  col1strike="true"
  col2strike="true"
  col3strike="true"
  row1strike="true"
  row2strike="true"
  row3strike="true"
  ocolor="#ff0000"
  xcolor="#0000ff"
  strikecolor="#00ff00cc"
></codecraft-tic-tac-toe>

Note

Each row is a comma separated list of values of xs, os, and spaces.

Hero Block Example with No Color and No Image Set

Code

<codecraft-hero-block>
  <h1>Hero Block Title</h1>
</codecraft-hero-block>

Note

The background is whatever this element is laying on top of of. In this case it is the white background of this section. It will take up 100% width of the container it is in.

Hero Block Example with Color and Image Set

Code

<codecraft-hero-block
  color="#ffffff88"
  image="https://picsum.photos/2000/200"
>
  <h1>Hero Block Title</h1>
</codecraft-hero-block>

Note

The background is set to the image provided and then a color is layed on top of that. In this case, a white color is set to 50% alpha. It will take up 100% width of the container it is in.

Hero Block Example with Color Set, No Image Set, and Paragraph

Code

<codecraft-hero-block color="#cccccc">
  <h1>Hero Block Title</h1>
  <p>
    Lorem laboris sint, sausage pariatur pancetta cupim et bacon
    burgdoggen ut ad proident beef ribs. Pork belly labore tenderloin
    ut fugiat ground round nisi filet mignon occaecat chicken ball
    tip.
  </p>
</codecraft-hero-block>

Note

The background is set to the color set in the attribute. In this case, a grey color is set. It will take up 100% width of the container it is in.

Hero Block Example with No Color Set and an Image Set

Code

<codecraft-hero-block image="https://picsum.photos/2000/200">
  <h1>Hero Block Title</h1>
</codecraft-hero-block>

Note

The background is set to the image set in the attribute. It is probably to be avoided as the contrast of the image and text may not be usable. It will take up 100% width of the container it is in.