Tabs

tabs: <tab[]>

Provides an abiliy to configure what tabs are shown by rmpc. Each tab contains one or more panes. Panes can be laid out how you want by splitting them via nesting multiple pane layouts. Each pane_type can be displayed multiple times in one or more tabs, but ultimately it is a single instance of the given pane. Check out the default config for reference.

tab

tab: (name: "<string>", pane: Pane | Split | Component)

A single tab that will be shown by rmpc. Each tab has a name that is displayed in the tab bar and either a single or multiple Panes.

name

name: "<string>"

Each tab has a name which will be displayed in the tab bar and can be used in the SwitchToTab(<name>) keybind.

pane

pane: Pane | Split | Component

• Pane(<pane>) - Displays the given pane type itself. Available panes are listed in the panes page.
• Split(direction: Horizontal | Vertical, borders: <borders>, panes: <sub_pane[]>) splits the pane into multiple sub panes. Each split has a direction and a list of sub panes. More info on borders in their section.
• Component("<component_name>") - Displays a component

direction

direction: Horizontal | Vertical

Determines which direction the pane will be split into.

sub_pane

panes: (size: '50%', borders: <borders>, pane: Pane | Split | Component

Sub panes for the given split. The size can be either percent (50%), exact value(3) or a ratio (0.4r).

• Exact value will reserve exactly that many rows/columns
• Percent value will reserve that portion of available space
• Ratio will take parent container’s other size (if you are splitting horizontally it will take parent’s height and if vertically then it will take parent’s width) and multiply it with this number. The result is then rounded and used as an exact size. Useful to for example keep AlbumArt as square size at all times. Note that the sizes here are in terminal cell width/height and not pixels.

Each sub pane can be either a Pane or another Split. Sub pane can also have borders, more info in their section.

borders

borders: "NONE" | "ALL" | "LEFT" | "RIGHT" | "TOP" | "BOTTOM"

Define what borders are rendered around a tab or one of its panes. Default is "NONE", meaning no borders. By specifying "ALL" the borders will be on all sides of the pane/tab. The above values can also be combined, if you for example want borders on the left and right, you can achieve it by defining "LEFT" | "RIGHT".

Note

Note that you have to account for the borders if you use exact sizing of panes. For example if your Header is supposed to be 2 rows tall and has borders at TOP and BOTTOM you must set its size as 4.

Examples

Some tabs config examples below.

Single border between panes

Single tab with queue and album art, with a border between them and also border around the whole split.

Click to expand

tabs: [
    (
        name: "Queue",
        pane: Split(
            direction: Horizontal,
            borders: "ALL",
            panes: [
                (
                    size: "40%",
                    borders: "RIGHT",
                    pane: Pane(AlbumArt),
                ),
                (
                    size: "60%",
                    pane: Pane(Queue),
                ),
            ],
        ),
    ),
],

Single pane tab, border on left and right

You have to use Split here even for a single pane if you want a border.

Click to expand

tabs: [
    (
        name: "Tab",
        pane: Split(
            direction: Horizontal,
            borders: "LEFT | RIGHT",
            panes: [
                (
                    size: "100%",
                    pane: Pane(Queue),
                ),
            ],
        ),
    ),
],

More complex example using Property panes

pane: Pane(Property(content: <property>[], align: Left | Right | Center, scroll_speed: <number>))

This config displays the AlbumArt and Queue panes and below them there are Property with pane with StateV2, ProgressBar pane and another Property pane with combination of Elapsed and Duration status properties next to each other in a line.

The Property pane also scrolls around and cycles if the content is longer than its defined area when scroll_speed is set to a value higher than 0. The value determines how fast the Property pane cycles in columns per second. This is tied to the elapsed time of the currently playing song. This is disabled when set to 0 or not set at all.

Click to expand

tabs: [
    (
        name: "Test",
        pane: Split(
            direction: Vertical,
            panes: [
                (
                    size: "100%",
                    borders: "ALL",
                    pane: Split(
                        borders: "ALL",
                        direction: Horizontal,
                        panes: [
                            (
                                size: "40%",
                                borders: "RIGHT",
                                pane: Pane(AlbumArt),
                            ),
                            (
                                size: "60%",
                                pane: Pane(Queue),
                            ),
                        ],
                    ),
                ),
                (
                    size: "3",
                    borders: "ALL",
                    pane: Split(
                        direction: Horizontal,
                        panes: [
                            (
                                pane: Pane(Property(content: [(kind: Property(Status(StateV2())))], align: Left)),
                                size: "10",
                            ),
                            (
                                size: "100%",
                                pane: Pane(ProgressBar),
                            ),
                            (
                                size: "25",
                                pane: Pane(Property(
                                    content: [
                                        (kind: Property(Status(Elapsed))),
                                        (kind: Text(" / ")),
                                        (kind: Property(Status(Duration))),
                                        (kind: Group([
                                            (kind: Text(" (")),
                                            (kind: Property(Status(Bitrate))),
                                            (kind: Text(" kbps)")),
                                        ])),
                                    ], align: Right,
                                )),
                            ),
                        ]
                    ),
                ),
            ],
        ),
    ),
],