Tablature

Description

A complementary component to the FrettedChord for displaying a measure of tablature for a fretted instrument like guitar or ukulele. Created with HTML elements so it is customizable and responsive to the size of the container.

props

• beats - number of beats in the measure, defaults to 4
• class
• id
• notes - an array of notes
• repeatEnd - puts a repeat at the end of the measure
• repeatStart - puts a repeat at the start of the measure
• strings - number of strings on the instrument, defaults to 6

example

<script lang="ts">
    import { Tablature } from "drab";
    import type { ComponentProps } from "svelte";

    const notes: ComponentProps<Tablature>["notes"] = [
        {
            fret: 0,
            beat: 1,
            string: 1,
        },
        {
            fret: 1,
            beat: 2,
            string: 2,
        },
        {
            fret: "X",
            beat: 2,
            string: 3,
        },
        {
            fret: 2,
            beat: 3,
            string: 4,
            mod: "/3p2",
        },
        {
            fret: 7,
            beat: 4,
            string: 3,
        },
    ];
</script>

<div class="font-mono font-semibold">
    <div class="mb-8 h-24">
        <Tablature {notes} repeatStart />
    </div>
    <div class="h-16 text-sm">
        <Tablature {notes} strings={4} repeatEnd />
    </div>
</div>