Documentation
    Preparing search index...

    Type Alias FretboardOptions

    Options accepted by the Fretboard constructor.

    type FretboardOptions = {
        barresColor: string;
        crop: boolean;
        disabledOpacity: number;
        display?: "cover" | "overflow" | "contain";
        element: ElementOrSelector<HTMLElement>;
        font: string;
        fretColor: string;
        fretCount: number;
        fretNumbersColor: string;
        fretNumbersHeight: number;
        fretNumbersMargin: number;
        fretPaddingLeft: number;
        fretWidth: number;
        height: number;
        highlightBlendMode: string;
        highlightFill: string;
        highlightPadding: number;
        highlightRadius: number;
        highlightStroke: string;
        middleFretColor: string;
        middleFretWidth: number;
        nutColor: string;
        nutWidth: number;
        paddingBottom: number;
        paddingLeft: number;
        paddingRight: number;
        paddingTop: number;
        positionFill: string;
        positionSize: number;
        positionStrokeColor: string;
        positionStrokeWidth: number;
        positionText: ValueFn<BaseType, FretboardPosition, string>;
        positionTextSize: number;
        scaleFrets: boolean;
        showFretNumbers: boolean;
        stringColor: string;
        stringCount: number;
        stringWidth: number | number[];
        tuning: Tuning;
        width: number;
    }
    Index
    barresColor crop disabledOpacity display? element font fretColor fretCount fretNumbersColor fretNumbersHeight fretNumbersMargin fretPaddingLeft fretWidth height highlightBlendMode highlightFill highlightPadding highlightRadius highlightStroke middleFretColor middleFretWidth nutColor nutWidth paddingBottom paddingLeft paddingRight paddingTop positionFill positionSize positionStrokeColor positionStrokeWidth positionText positionTextSize scaleFrets showFretNumbers stringColor stringCount stringWidth tuning width
    barresColor: string

    The barres color

    crop: boolean

    If true, renders just the frets with positions in them

    disabledOpacity: number

    The opacity (0-1) of the disabled frets

    display?: "cover" | "overflow" | "contain"

    The width behavior

    element: ElementOrSelector<HTMLElement>

    The element where the fretboard will be rendered

    font: string

    The used font

    fretColor: string

    The fret color

    fretCount: number

    The amount of frets to render

    fretNumbersColor: string

    The fret numbers color

    fretNumbersHeight: number

    The fret numbers height

    fretNumbersMargin: number

    The fret numbers top margin

    fretPaddingLeft: number

    If crop is true, it determines how many empty frets to display before the first rendered position.

    fretWidth: number

    The fret width

    height: number

    The desired element height

    highlightBlendMode: string

    The highlight areas blend mode

    highlightFill: string

    The highlight areas fill color

    highlightPadding: number

    The highlight areas padding

    highlightRadius: number

    The highlight areas border radius

    highlightStroke: string

    The highlight areas stroke color

    middleFretColor: string

    The middle fret color

    middleFretWidth: number

    The middle fret width

    nutColor: string

    The nut color

    nutWidth: number

    The nut color

    paddingBottom: number

    The bottom padding around the svg element

    paddingLeft: number

    The left padding around the svg element

    paddingRight: number

    The right padding around the svg element

    paddingTop: number

    The top padding around the svg element

    positionFill: string

    The fretboard position fill color

    positionSize: number

    The fretboard position size

    positionStrokeColor: string

    The fretboard position stroke color

    positionStrokeWidth: number

    The fretboard position stroke width

    positionText: ValueFn<BaseType, FretboardPosition, string>

    The fretboard position text getter

    positionTextSize: number

    The fretboard position text size

    scaleFrets: boolean

    If true, the fret will be scale logarithmically (like in a real instrument)

    showFretNumbers: boolean

    If true, shows the fret numbers below the fretboard

    stringColor: string

    The string color

    stringCount: number

    The amount of strings to render

    stringWidth: number | number[]

    The string thickness

    tuning: Tuning

    The instrument tuning

    width: number

    The desired element width

    Settings
    Member Visibility

    On This Page
    Properties