Tabalonia - GitLite

KO | EN

gitlite — search

#javascript #python #hacktoberfest #react #typescript #llm #machine-learning #rust #deep-learning #docker #nodejs #cli #vue #mcp

Tabalonia

(★ 264)

Draggable tab items on Avalonia here!

파일 탐색기

최종 버전 다운로드 (.zip)

- - bug_report.md
  - feature_request.md
- - build.yml
  - release.yml
- pull_request_template.md
- demo.gif
- - DragTabItem.cs
  - LeftPressedThumb.cs
  - TabsControl.cs
- - ShowDefaultCloseButtonConverter.cs
- - CloseLastTabEventArgs.cs
  - DragTabDragCompletedEventArgs.cs
  - DragTabDragDeltaEventArgs.cs
  - DragTabDragStartedEventArgs.cs
  - DragTabItemEventArgs.cs
  - TabClosedEventArgs.cs
  - TabClosingEventArgs.cs
- - ElementNotFoundOnStyleException.cs
- - TabsPanel.cs
  - TopPanel.cs
- Extensions.cs
- GlobalUsings.cs
- SimpleActionCommand.cs
- Tabalonia.csproj
- ZIndexes.cs
- - DragTabItem.axaml
  - MyTheme.axaml
  - TabsControl.axaml
- - MainViewModel.cs
  - TabItemViewModel.cs
- .gitignore
- App.axaml
- App.axaml.cs
- MainWindow.axaml
- MainWindow.axaml.cs
- Program.cs
- Tabalonia.Demo.csproj
- .editorconfig
- DragSessionTests.cs
- Tabalonia.Tests.csproj
- TabsControlTests.cs
- TestApp.cs
.editorconfig
.gitattributes
.gitignore
CHANGELOG.md
CLAUDE.md
CONTRIBUTING.md
Directory.Build.props
Icon.png
LICENSE
README.md
Tabalonia.sln

# 설치 가이드

1. 코드 내려받기

git clone https://github.com/egorozh/Tabalonia

깃허브에서 프로젝트 코드 전체를 내 컴퓨터로 내려받습니다.

cd Tabalonia

방금 내려받은 프로젝트 폴더 안으로 이동합니다.

2. .NET

보통 추천

사전 준비물

Git GitHub에서 프로젝트 코드를 내려받으려면 필요합니다.
.NET SDK dotnet 명령어를 쓰기 위한 SDK입니다.

dotnet build Tabalonia.sln

이 명령어를 터미널에 그대로 입력해 실행하세요.

dotnet test Tabalonia.Tests/Tabalonia.Tests.csproj

이 명령어를 터미널에 그대로 입력해 실행하세요.

dotnet run --project Tabalonia.Demo

프로젝트를 빌드하고 바로 실행합니다.

✅ dotnet run 실행 후 터미널에 나타나는 안내 메시지나 주소를 확인하세요.

이 레포의 README에 적힌 실제 명령어를 그대로 가져왔습니다.

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# Tabalonia

[![Nuget](https://img.shields.io/nuget/v/Tabalonia?label=Tabalonia)](https://www.nuget.org/packages/Tabalonia)
[![Build](https://github.com/egorozh/Tabalonia/actions/workflows/build.yml/badge.svg)](https://github.com/egorozh/Tabalonia/actions/workflows/build.yml)

Draggable tab items on Avalonia here!

This is a port of the [Draggablz](https://github.com/ButchersBoy/Dragablz)

![example](https://github.com/egorozh/Tabalonia/blob/main/docs/demo.gif "Example application")

## Features

- Drag tabs to reorder them within the strip (with animations)
- Tear a tab off into its own floating window — just drag it out of the strip
- Drag a tab over another window's strip to dock it there, Chrome-style:
  the tab attaches while you hold the button, keeps following the pointer,
  and detaches again if you drag it away
- Built-in add / close tab buttons
- Pin the first N tabs (`FixedHeaderCount`) so they can't be dragged or closed
- Custom content on both sides of the strip (`LeftContent` / `RightContent`)
- Two shipped themes (Custom with light/dark variants, Fluent), fully restylable via brush resources
- AOT-compatible, no reflection

## Getting Started

Install the library as a NuGet package:

```powershell
Install-Package Tabalonia
# Or 'dotnet add package Tabalonia'
```

Add a theme to your `App.axaml`:

```xml
<Application xmlns="https://github.com/avaloniaui"
             xmlns:custom="clr-namespace:Tabalonia.Themes.Custom;assembly=Tabalonia">
    <Application.Styles>
        <FluentTheme />
        <custom:CustomTheme />
    </Application.Styles>
</Application>
```

Or use the Fluent-styled variant instead of the custom one:

```xml
xmlns:fluent="clr-namespace:Tabalonia.Themes.Fluent;assembly=Tabalonia"
...
<fluent:FluentTheme />
```

Then use `TabsControl` like a regular `TabControl`:

```xml
<Window xmlns:controls="clr-namespace:Tabalonia.Controls;assembly=Tabalonia">

<controls:TabsControl ItemsSource="{Binding TabItems}"
                          NewItemFactory="{Binding NewItemFactory}"
                          FixedHeaderCount="1">
        <TabControl.ItemTemplate>
            <DataTemplate DataType="vm:TabItemViewModel">
                <TextBlock Text="{Binding Header}" />
            </DataTemplate>
        </TabControl.ItemTemplate>

<TabControl.ContentTemplate>
            <DataTemplate DataType="vm:TabItemViewModel">
                <TextBlock Text="{Binding SimpleContent}" />
            </DataTemplate>
        </TabControl.ContentTemplate>
    </controls:TabsControl>

</Window>
```

> `ItemsSource` must implement `IList` (e.g. `ObservableCollection<T>`) — adding, closing,
> reordering and dragging tabs between windows mutate the collection directly.

## API Reference

`TabsControl` inherits Avalonia's `TabControl`, so everything you know
(`ItemsSource`, `SelectedItem`, `ItemTemplate`, `ContentTemplate`, …) works as usual.
The additions:

### Tab strip appearance

| Property | Type | Default | Description |
|---|---|---|---|
| `TabItemWidth` | `double` | `140` | Maximum tab width; tabs shrink evenly when the strip runs out of space |
| `AdjacentHeaderItemOffset` | `double` | `0` | Horizontal offset between neighbouring tabs (negative values overlap them) |
| `FixedHeaderCount` | `int` | `0` | Number of leading tabs that are pinned: they can't be dragged, closed or displaced |
| `LeftContent` / `RightContent` | `object?` | `null` | Arbitrary content rendered to the left / right of the tab strip |

### Adding and closing tabs

| Member | Type | Description |
|---|---|---|
| `ShowDefaultAddButton` | `bool`, default `true` | Shows the built-in “+” button after the last tab |
| `ShowDefaultCloseButton` | `bool`, default `true` | Shows the “×” button on each tab (except fixed ones) |
| `NewItemFactory` | `Func<object>?` | Creates the model for a new tab when the add button is clicked |
| `NewItemAsyncFactory` | `Func<Task<object>>?` | Async variant; takes precedence over `NewItemFactory` |
| `AddItemCommand` | `ICommand` (read-only) | Adds a tab via the factory — bind it from your own buttons |
| `CloseItemCommand` | `ICommand` (read-only) | Closes the tab passed as the command parameter (`DragTabItem`) |
| `TabClosing` | `EventHandler<TabClosingEventArgs>?` | Raised before a tab closes; set `e.Cancel = true` to keep it open |
| `TabClosed` | `EventHandler<TabClosedEventArgs>?` | Raised after a tab closed; `e.Item` is the removed model |
| `LastTabClosedAction` | `EventHandler<CloseLastTabEventArgs>?` | What to do when the last tab goes away; default closes the window (`e.Window`) |

```csharp
tabs.TabClosing += (_, e) =>
{
    if (e.Item is DocumentViewModel { IsDirty: true })
        e.Cancel = true; // keep the tab open
};

tabs.TabClosed += (_, e) => Console.WriteLine($"Closed: {e.Item}");

// Keep the window open when the last tab is closed (default closes it):
tabs.LastTabClosedAction = (_, e) => { /* e.Window stays open */ };
```

### Tearing off and docking tabs

| Property | Type | Default | Description |
|---|---|---|---|
| `EnableTabDetaching` | `bool` | `true` | Allows dragging a tab out of the strip into a new floating window |
| `EnableTabAttaching` | `bool` | `true` | Allows this strip to give away and accept tabs dragged from other `TabsControl`s |
| `DetachTriggerDistance` | `double` | `32` | How far (px) the pointer must leave the strip before the tab tears off |
| `DetachedWindowFactory` | `Func<TabsControl, Window>?` | `null` | Creates the host window for a detached tab; by default the source window's size, background and decorations are cloned |

The detached window's `TabsControl` inherits the source control's settings
(templates, factories, events, `Margin`, thumb widths, …), so torn-off tabs behave
exactly like the original ones — including docking back.

```csharp
tabsControl.DetachedWindowFactory = tabs => new MyToolWindow { Content = tabs };
```

### Window drag thumbs

The empty areas to the left and right of the tabs act as window-drag handles
(double-click restores/maximizes the window) — useful with
`ExtendClientAreaToDecorationsHint="True"` for Chrome-like windows:

| Property | Default | Description |
|---|---|---|
| `LeftThumbWidth` | `80` on macOS, `4` elsewhere | Width of the drag area before the first tab (macOS default leaves room for traffic lights) |
| `RightThumbWidth` | `160` on Windows, `50` elsewhere | Width of the drag area after the add button |

## Styling

The custom theme supports light and dark variants out of the box and follows
`Application.RequestedThemeVariant`. All colors are exposed as brush resources
(`TabItemBackgroundBrush`, `SelectedTabItemBackgroundBrush`,
`TabControlWindowActiveBackgroundBrush`, `CloseItemButtonForeground`, …) —
override them in your `App.axaml` to restyle the control without retemplating:

```xml
<Application.Resources>
    <ResourceDictionary>
        <ResourceDictionary.ThemeDictionaries>
            <ResourceDictionary x:Key="Dark">
                <SolidColorBrush x:Key="SelectedTabItemBackgroundBrush" Color="#1E1E2E" />
            </ResourceDictionary>
        </ResourceDictionary.ThemeDictionaries>
    </ResourceDictionary>
</Application.Resources>
```

The full list of resource keys lives in
[`Themes/Custom/Brushes.axaml`](Tabalonia/Themes/Custom/Brushes.axaml).

## Building from source

```bash
git clone https://github.com/egorozh/Tabalonia.git
cd Tabalonia
dotnet build Tabalonia.sln
dotnet test Tabalonia.Tests/Tabalonia.Tests.csproj
dotnet run --project Tabalonia.Demo
```

See [CONTRIBUTING.md](CONTRIBUTING.md) for the contribution workflow and
[CHANGELOG.md](CHANGELOG.md) for release history.