0
# Display Widgets
1

2
Labels, images, cards, and container widgets for displaying content with fluent design typography and layout patterns. These widgets provide modern visual styling with proper theme integration and typography hierarchy.
3

4
## Capabilities
5

6
### Card Widgets
7

8
Container widgets with fluent design styling for grouping related content with material design elevation and rounded corners.
9

10
```python { .api }
11
class CardWidget(QWidget):
12
    def __init__(self, parent=None): ...
13
    def setBorderRadius(self, radius: int): ...
14
    def borderRadius(self) -> int: ...
15

16
class SimpleCardWidget(CardWidget):
17
    def __init__(self, parent=None): ...
18

19
class ElevatedCardWidget(CardWidget):
20
    def __init__(self, parent=None): ...
21

22
class HeaderCardWidget(CardWidget):
23
    def __init__(self, parent=None): ...
24
    def setTitle(self, title: str): ...
25
    def title(self) -> str: ...
26
```
27

28
**Usage Example:**
29
```python
30
from qfluentwidgets import CardWidget, ElevatedCardWidget, HeaderCardWidget
31

32
# Basic card container
33
card = CardWidget(self)
34
card.setFixedSize(300, 200)
35

36
# Elevated card with shadow
37
elevated_card = ElevatedCardWidget(self)
38
elevated_card.setFixedSize(280, 180)
39

40
# Card with header
41
header_card = HeaderCardWidget(self)
42
header_card.setTitle("Settings")
43
header_card.setFixedSize(320, 240)
44
```
45

46
### Typography Labels
47

48
Hierarchical text labels following fluent design typography system with automatic theme support.
49

50
```python { .api }
51
class BodyLabel(QLabel):
52
    def __init__(self, parent=None): ...
53
    def __init__(self, text: str, parent=None): ...
54

55
class CaptionLabel(QLabel):
56
    def __init__(self, parent=None): ...
57
    def __init__(self, text: str, parent=None): ...
58

59
class StrongBodyLabel(QLabel):
60
    def __init__(self, parent=None): ...  
61
    def __init__(self, text: str, parent=None): ...
62

63
class SubtitleLabel(QLabel):
64
    def __init__(self, parent=None): ...
65
    def __init__(self, text: str, parent=None): ...
66

67
class TitleLabel(QLabel):
68
    def __init__(self, parent=None): ...
69
    def __init__(self, text: str, parent=None): ...
70

71
class LargeTitleLabel(QLabel):
72
    def __init__(self, parent=None): ...
73
    def __init__(self, text: str, parent=None): ...
74

75
class DisplayLabel(QLabel):
76
    def __init__(self, parent=None): ...
77
    def __init__(self, text: str, parent=None): ...
78
```
79

80
**Usage Example:**
81
```python
82
from qfluentwidgets import (BodyLabel, TitleLabel, SubtitleLabel, 
83
                           LargeTitleLabel, DisplayLabel, CaptionLabel)
84

85
# Typography hierarchy
86
display_title = DisplayLabel("Main Title", self)
87
large_title = LargeTitleLabel("Section Title", self)
88
title = TitleLabel("Subsection", self)
89
subtitle = SubtitleLabel("Description", self)
90
body = BodyLabel("Regular content text here...", self)
91
caption = CaptionLabel("Small caption text", self)
92

93
# Auto-themed typography
94
for label in [display_title, large_title, title, subtitle, body, caption]:
95
    label.setWordWrap(True)
96
```
97

98
### Image and Icon Display
99

100
Specialized widgets for displaying images, icons, and avatars with fluent design integration.
101

102
```python { .api }
103
class ImageLabel(QLabel):
104
    def __init__(self, parent=None): ...
105
    def setImage(self, image: Union[str, QPixmap, QIcon]): ...
106
    def setBorderRadius(self, radius: int, corners: Qt.Corners = Qt.Corners()): ...
107

108
class PixmapLabel(QLabel):
109
    def __init__(self, parent=None): ...
110
    def setPixmap(self, pixmap: QPixmap): ...
111
    def setBorderRadius(self, radius: int, corners: Qt.Corners = Qt.Corners()): ...
112

113
class AvatarWidget(QLabel):
114
    def __init__(self, parent=None): ...
115
    def __init__(self, image: Union[str, QPixmap, QIcon], parent=None): ...
116
    def setImage(self, image: Union[str, QPixmap, QIcon]): ...
117
    def setRadius(self, radius: int): ...
118

119
class IconWidget(QWidget):
120
    def __init__(self, icon: Union[FluentIconBase, QIcon, str] = None, parent=None): ...
121
    def setIcon(self, icon: Union[FluentIconBase, QIcon, str]): ...
122
    def icon(self) -> QIcon: ...
123
```
124

125
**Usage Example:**
126
```python
127
from qfluentwidgets import ImageLabel, AvatarWidget, IconWidget, FluentIcon as FIF
128

129
# Image display with rounded corners
130
image_label = ImageLabel(self)
131
image_label.setImage("path/to/image.png")
132
image_label.setBorderRadius(8)
133
image_label.setFixedSize(200, 150)
134

135
# Circular avatar
136
avatar = AvatarWidget("user_photo.jpg", self)
137
avatar.setRadius(30)
138
avatar.setFixedSize(60, 60)
139

140
# Icon display
141
icon_widget = IconWidget(FIF.HOME, self)
142
icon_widget.setFixedSize(24, 24)
143
```
144

145
### Hyperlink Labels
146

147
Clickable text labels for navigation and external links with fluent styling.
148

149
```python { .api }
150
class HyperlinkLabel(QLabel):
151
    def __init__(self, parent=None): ...
152
    def __init__(self, text: str, parent=None): ...
153
    def __init__(self, url: str, text: str, parent=None): ...
154
    def setUrl(self, url: str): ...
155
    def getUrl(self) -> str: ...
156
    
157
    # Signals
158
    linkActivated = pyqtSignal(str)
159
```
160

161
**Usage Example:**
162
```python
163
from qfluentwidgets import HyperlinkLabel
164

165
# Basic hyperlink
166
link = HyperlinkLabel("Visit our website", self)
167
link.setUrl("https://example.com")
168
link.linkActivated.connect(self.open_link)
169

170
# Link with custom text
171
docs_link = HyperlinkLabel("https://docs.example.com", "Documentation", self)
172

173
# Connect to custom handler
174
def open_link(self, url):
175
    print(f"Opening: {url}")
176
    # Custom link handling logic
177
```
178

179
### Progress Indicators
180

181
Visual progress indicators with fluent design styling for showing task completion and loading states.
182

183
```python { .api }
184
class ProgressBar(QProgressBar):
185
    def __init__(self, parent=None): ...
186
    def setRange(self, min: int, max: int): ...
187
    def setValue(self, value: int): ...
188

189
class IndeterminateProgressBar(ProgressBar):
190
    def __init__(self, parent=None): ...
191
    def start(self): ...
192
    def stop(self): ...
193
    def pause(self): ...
194
    def resume(self): ...
195

196
class ProgressRing(QWidget):
197
    def __init__(self, parent=None): ...
198
    def setRange(self, min: int, max: int): ...
199
    def setValue(self, value: int): ...
200
    def setStrokeWidth(self, width: int): ...
201

202
class IndeterminateProgressRing(ProgressRing):
203
    def __init__(self, parent=None): ...
204
    def start(self): ...
205
    def stop(self): ...
206
```
207

208
**Usage Example:**
209
```python
210
from qfluentwidgets import ProgressBar, IndeterminateProgressBar, ProgressRing
211

212
# Standard progress bar
213
progress = ProgressBar(self)
214
progress.setRange(0, 100)
215
progress.setValue(45)
216

217
# Loading indicator
218
loading = IndeterminateProgressBar(self)
219
loading.start()
220

221
# Circular progress
222
ring = ProgressRing(self)
223
ring.setRange(0, 100)
224
ring.setValue(75)
225
ring.setStrokeWidth(4)
226
```
227

228
## Common Display Widget Properties
229

230
All display widgets inherit standard Qt functionality with fluent design enhancements:
231

232
```python
233
# Standard text properties
234
label.setText("New text")
235
label.setAlignment(Qt.AlignCenter)
236
label.setWordWrap(True)
237

238
# Theming support
239
label.setObjectName("customLabel")
240
label.setStyleSheet("color: red;")
241

242
# Size and visibility
243
widget.setFixedSize(200, 100)
244
widget.setVisible(True)
245
widget.setEnabled(True)
246
```
247

248
## Styling and Themes
249

250
Display widgets automatically adapt to theme changes and can be customized:
251

252
```python
253
from qfluentwidgets import isDarkTheme, FluentStyleSheet
254

255
# Apply fluent styling
256
FluentStyleSheet.LABEL.apply(label)
257

258
# Theme-aware styling
259
if isDarkTheme():
260
    label.setStyleSheet("color: white; background: #2b2b2b;")
261
else:
262
    label.setStyleSheet("color: black; background: white;")
263
```