@codecraftworks/elements v1.0.2
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 x
s, o
s, 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 x
s, o
s, 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 x
s, o
s, 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.