<acidjs-xchord label="A" startat="1" label="E" description="The A-major chord">
<acidjs-xchord-string key="e" state="muted" fret="0"></acidjs-xchord-string>
<acidjs-xchord-string key="a" state="empty" fret="0"></acidjs-xchord-string>
<acidjs-xchord-string key="d" state="pressed" fret="2"></acidjs-xchord-string>
<acidjs-xchord-string key="g" state="pressed" fret="2"></acidjs-xchord-string>
<acidjs-xchord-string key="b" state="pressed" fret="2"></acidjs-xchord-string>
<acidjs-xchord-string key="e" state="empty" fret="0"></acidjs-xchord-string>
</acidjs-xchord>
[/sourcecode]
Using the tag above you get:
6-String Guitar Diagrams:
7-, 8-, 9- (yes, I love Djent) Axe Diagrams:
Bass Diagrams:
… Virtually any-string-number guitar chord diagram.
HTML Attributes of the <acidjs-xchord></acidjs-xchord>
Tag
Any native HTML attribute (id
, class
, data-*
, style
, etc.) is supported, plus the component-specific:
frets
– Optional number of the frets that should render. Default: "4"
.size
– Optional size (number) of the diagram. Default: 1
. "1.5"
or "2"
will render a bigger diagram.startat
– From which fret should the diagram start from. Default: "1"
.description
– Optional decription of the chord, for example "This is A-minor"
.label
– Optional label of the chord, for example "Am"
.HTML Attributes of the <acidjs-xchord-string></acidjs-xchord-string>
Tag
key
– The key of the string, for example "E"
.state
– The state of the played note. Possible values: "empty"
, "pressed"
or "muted"
.fret
– The fret which is the state
applied to.JavaScript Methods of the Tag
Any native JavaScript method (document.getElementById
, document.querySelector
, element.setAttribute
, element.removeAttribute
etc. No component-specific methods, getters or setters.
Fulfill my child dream of becoming a rock star – check the demo and get the component. If you share the same interest towards HTML5 Web Components as I do these days, make sure you read my relevant blog posts and further endeavors on my HTML5, CSS3 and JavaScript Experiments and Insight website.
© 2006 - 2025 Martin Ivanov