# 📚 AntdUI Documentation

> Interface library based on [dotnet Winforms](https://github.com/dotnet/winforms)

[中文](../zh/Home.md)・English・[UpdateLog](UpdateLog.md)

## 🎯 Guide

- [**Install** - Introduction to Interface Library](Install.md)
- [**DPI** - High resolution blur/unclear font appearance](DPI.md)
- [**Config** - Global Configuration](Config.md)
- [**Theme** - Light and dark color mode custom theme](Theme.md)
- [**SVG**](SVG.md)
- [**AOT**](AOT.md)

---

## 🧰 Control

### General `2`

#### [Button](Control/Button.md)

> To trigger an operation.

> [![Button](Icon/Button.png)](Control/Button.md)

#### [FloatButton](Control/FloatButton.md)

> A button that floats at the top of the page.

> [![FloatButton](Icon/FloatButton.png)](Control/FloatButton.md)

### Layout `5`

#### [Divider](Control/Divider.md)

> A divider line separates different content.

> [![Divider](Icon/Divider.png)](Control/Divider.md)

#### [StackPanel](Control/StackPanel.md)

> Arranging sub elements horizontally or vertically.

> [![StackPanel](Icon/StackPanel.png)](Control/StackPanel.md)

#### [FlowPanel](Control/FlowPanel.md)

> Arrange sub elements by row, automatically wrap lines.

> [![FlowPanel](Icon/FlowPanel.png)](Control/FlowPanel.md)

#### [GridPanel](Control/GridPanel.md)

> Grid layout container with precise division of areas.

> [![GridPanel](Icon/GridPanel.png)](Control/GridPanel.md)

#### [Splitter](Control/Splitter.md)

> Split panels to isolate

> [![Splitter](Icon/Splitter.png)](Control/Splitter.md)


### Navigation `7`

#### [Breadcrumb](Control/Breadcrumb.md)

> Display the current location within a hierarchy. And allow going back to states higher up in the hierarchy.

> [![Breadcrumb](Icon/Breadcrumb.png)](Control/Breadcrumb.md)

#### [Dropdown](Control/Dropdown.md)

> A dropdown list.

> [![Dropdown](Icon/Dropdown.png)](Control/Dropdown.md)

#### [Menu](Control/Menu.md)

> A versatile menu for navigation.

> [![Menu](Icon/Menu.png)](Control/Menu.md)

#### [PageHeader](Control/PageHeader.md)

> A page header serves as a content overview and guides page level operations.

> [![PageHeader](Icon/PageHeader.png)](Control/PageHeader.md)

#### [TabHeader](Control/TabHeader.md)

> Multi tab page switching header

> [![TabHeader](Icon/TabHeader.png)](Control/TabHeader.md)

#### [Pagination](Control/Pagination.md)

> A long list can be divided into several pages, and only one page will be loaded at a time.

> [![Pagination](Icon/Pagination.png)](Control/Pagination.md)

#### [Steps](Control/Steps.md)

> A navigation bar that guides users through the steps of a task.

> [![Steps](Icon/Steps.png)](Control/Steps.md)


### Data Entry `15`

#### [Checkbox](Control/Checkbox.md)

> Collect user's choices.

> [![Checkbox](Icon/Checkbox.png)](Control/Checkbox.md)

#### [ColorPicker](Control/ColorPicker.md)

> Used for color selection.

> [![ColorPicker](Icon/ColorPicker.png)](Control/ColorPicker.md)

#### [DatePicker](Control/DatePicker.md)

> To select or input a date.

> [![DatePicker](Icon/DatePicker.png)](Control/DatePicker.md)

#### [DatePickerRange](Control/DatePicker.md#datepickerrange)

> Control for entering or selecting a date range.

> [![DatePickerRange](Icon/DatePickerRange.png)](Control/DatePicker.md#datepickerrange)

#### [Input](Control/Input.md)

> Through mouse or keyboard input content, it is the most basic form field wrapper.

> [![Input](Icon/Input.png)](Control/Input.md)

#### [InputNumber](Control/Input.md#inputnumber)

> Enter a number within certain range with the mouse or keyboard.

> [![InputNumber](Icon/InputNumber.png)](Control/Input.md#inputnumber)

#### [Radio](Control/Radio.md)

> Used to select a single state from multiple options.

> [![Radio](Icon/Radio.png)](Control/Radio.md)

#### [Rate](Control/Rate.md)

> Used for rating operation on something.

> [![Rate](Icon/Rate.png)](Control/Rate.md)

#### [Select](Control/Select.md)

> A dropdown menu for displaying choices.

> [![Select](Icon/Select.png)](Control/Select.md)

#### [Slider](Control/Slider.md)

> A Slider component for displaying current value.

> [![Slider](Icon/Slider.png)](Control/Slider.md)

#### [SliderRange](Control/Slider.md#sliderrange)

> A Slider component for displaying current value and intervals in range.

> [![SliderRange](Icon/SliderRange.png)](Control/Slider.md#sliderrange)

#### [Switch](Control/Switch.md)

> Used to toggle between two states.

> [![Switch](Icon/Switch.png)](Control/Switch.md)

#### [TimePicker](Control/TimePicker.md)

> To select/input a time.

> [![TimePicker](Icon/TimePicker.png)](Control/TimePicker.md)

#### [Transfer](Control/Transfer.md)

> Double column transfer choice box.

> [![Transfer](Icon/Transfer.png)](Control/Transfer.md)

#### [UploadDragger](Control/UploadDragger.md)

> Support drag and drop file upload components

> [![UploadDragger](Icon/UploadDragger.png)](Control/UploadDragger.md)


### Data Display `18`

#### [Avatar](Control/Avatar.md)

> Used to represent users or things, supporting the display of images, icons, or characters.

> [![Avatar](Icon/Avatar.png)](Control/Avatar.md)

#### [Badge](Control/Badge.md)

> Small numerical value or status descriptor for UI elements.

> [![Badge](Icon/Badge.png)](Control/Badge.md)

#### [Calendar](Control/Calendar.md)

> A container that displays data in calendar form.

> [![Calendar](Icon/Calendar.png)](Control/Calendar.md)

#### [Panel](Control/Panel.md)

> A container for displaying information.

> [![Panel](Icon/Panel.png)](Control/Panel.md)

#### [Carousel](Control/Carousel.md)

> A set of carousel areas.
> [![Carousel](Icon/Carousel.png)](Control/Carousel.md)

#### [Collapse](Control/Collapse.md)

> A content area which can be collapsed and expanded.

> [![Collapse](Icon/Collapse.png)](Control/Collapse.md)

#### [Preview](Control/Preview.md)

> Picture preview box.

> [![Preview](Icon/Preview.png)](Control/Preview.md)

#### [Popover](Control/Popover.md)

> The floating card pops up when clicking/mouse hovering over an element.

> [![Popover](Icon/Popover.png)](Control/Popover.md)

#### [Segmented](Control/Segmented.md)

> Display multiple options and allow users to select a single option.

> [![Segmented](Icon/Segmented.png)](Control/Segmented.md)

#### [Table](Control/Table.md)

> A table displays rows of data.

> [![Table](Icon/Table.png)](Control/Table.md)

#### [Tabs](Control/Tabs.md)

> Tabs make it easy to explore and switch between different views.

> [![Tabs](Icon/Tabs.png)](Control/Tabs.md)

#### [Tag](Control/Tag.md)

> Used for marking and categorization.

> [![Tag](Icon/Tag.png)](Control/Tag.md)

#### [Timeline](Control/Timeline.md)

> Vertical display timeline.

> [![Timeline](Icon/Timeline.png)](Control/Timeline.md)

#### [Tooltip](Control/Tooltip.md)

> Simple text popup box.

> [![Tooltip](Icon/Tooltip.png)](Control/Tooltip.md)

#### [Tree](Control/Tree.md)

> Multiple-level structure list.

> [![Tree](Icon/Tree.png)](Control/Tree.md)

#### [Tour](Control/Tour.md)

> A popup component for guiding users through a product.

> [![Tour](Icon/Tour.png)](Control/Tour.md)

#### [Label](Control/Label.md)

> Display a paragraph of text.
>
#### [LabelTime](Control/LabelTime.md)

> Display time text.

> [![LabelTime](Icon/LabelTime.png)](Control/LabelTime.md)


### Feedback `7`

#### [Alert](Control/Alert.md)

> Display warning messages that require attention.

> [![Alert](Icon/Alert.png)](Control/Alert.md)

#### [Drawer](Control/Drawer.md)

> A panel that slides out from the edge of the screen.

> [![Drawer](Icon/Drawer.png)](Control/Drawer.md)

#### [Message](Control/Message.md)

> Display global messages as feedback in response to user operations.

> [![Message](Icon/Message.png)](Control/Message.md)

#### [Modal](Control/Modal.md)

> Display a modal dialog box, providing a title, content area, and action buttons.

> [![Modal](Icon/Modal.png)](Control/Modal.md)

#### [Notification](Control/Notification.md)

> Prompt notification message globally.

> [![Notification](Icon/Notification.png)](Control/Notification.md)

#### [Progress](Control/Progress.md)

> Display the current progress of the operation.

> [![Progress](Icon/Progress.png)](Control/Progress.md)

#### [Spin](Control/Spin.md)

> Used for the loading status of a page or a block.

> [![Spin](Icon/Spin.png)](Control/Spin.md)

### Other `5`

### ~~[WindowBar](Control/WindowBar.md)~~

> ⚠ Removed using [PageHeader](Control/PageHeader.md) replacement

#### [Battery](Control/Battery.md)

> Display device battery level.

> [![Battery](Icon/Battery.png)](Control/Battery.md)
#### [Signal](Control/Signal.md)

> Display device signals.

> [![Signal](Icon/Signal.png)](Control/Signal.md)

#### [Shield](Control/Shield.md)

> Concise, consistent, and legible badges.

> [![Shield](Icon/Shield.png)](Control/Shield.md)

#### [ContextMenuStrip](Control/ContextMenuStrip.md)

> Right click on the current page at will

> [![ContextMenuStrip](Icon/ContextMenuStrip.png)](Control/ContextMenuStrip.md)

#### [Image3D](Control/Image3D.md)

> used to display 3D effect images

> [![Image3D](Icon/Image3D.gif)](Control/Image3D.md)

---

## 🪟 Form

### Form `3`

#### [Window](Form/Window.md)

> Native feature window `Hide title bar`

#### [BorderlessForm](Form/BorderlessForm.md)

> Borderless window `GDI shadow`

#### [BaseForm](Form/BaseForm.md)

> DPI Basic Window
