You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: docs/decorators/display.md
+80-3Lines changed: 80 additions & 3 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -6,11 +6,11 @@ order: 1
6
6
7
7
# Unfold @display decorator
8
8
9
-
Unfold introduces it's own `unfold.decorators.display` decorator. By default it has exactly same behavior as native `django.contrib.admin.decorators.display` but it adds same customizations which helps to extends default logic.
9
+
Unfold introduces its own `unfold.decorators.display` decorator. By default, it has exactly the same behavior as the native `django.contrib.admin.decorators.display` but it adds customizations which help to extend the default logic.
10
10
11
-
`@display(label=True)`, `@display(label={"value1": "success"})` displays a result as a label. This option fits for different types of statuses. Label can be either boolean indicating we want to use label with default color or dict where the dict is responsible for displaying labels in different colors. At the moment these color combinations are supported: success(green), info(blue), danger(red) and warning(orange).
11
+
`@display(label=True)`, `@display(label={"value1": "success"})` displays a result as a label. This option fits for different types of statuses. The label can be either a boolean indicating we want to use a label with the default color, or a dict where the dict is responsible for displaying labels in different colors. At the moment these color combinations are supported: success(green), info(blue), danger(red) and warning(orange).
12
12
13
-
`@display(header=True)` displays in results list two information in one table cell. Good example is when we want to display customer information, first line is going to be customer's name and right below the name display corresponding email address. Method with such a decorator is supposed to return a list with two elements `return "Full name", "E-mail address"`. There is a third optional argument, which is type of the string and its value is displayed in a circle before first two values on the front end. Its optimal usage is for displaying initials.
13
+
`@display(header=True)` displays two pieces of information in one table cell in the results list. A good example is when we want to display customer information - the first line will be the customer's name and right below the name, the corresponding email address is displayed. A method with such a decorator is supposed to return a list with two elements `return "Full name", "E-mail address"`. There is a third optional argument, which is the type of string and its value is displayed in a circle before the first two values on the front end. Its optimal usage is for displaying initials.
14
14
15
15
```python
16
16
# admin.py
@@ -80,3 +80,80 @@ class UserAdmin(ModelAdmin):
80
80
}
81
81
]
82
82
```
83
+
84
+
## Dropdown support
85
+
86
+
For the changelist, it is possible to apply `dropdown=True` which will display a clickable link. After clicking on the link, a dropdown will appear. There are two supported options for rendering the content of the dropdown:
87
+
88
+
- Providing a list of `items`. This will render a classic list of items, which is a good option for displaying a list of related objects.
89
+
- Defining the `content` attribute which will display your custom content in the dropdown. This is handy for rendering complex layouts in the dropdown.
90
+
91
+
### Rendering list of options
92
+
93
+
The following example demonstrates how to create a dropdown with a list of items. The dropdown configuration accepts these options:
94
+
95
+
-`title` (required) - The text displayed in the column that users click to open the dropdown
96
+
-`items` (required) - List of items to display in the dropdown menu. Each item should have:
97
+
-`title` - Text to display for the item
98
+
-`link` (optional) - URL the item links to
99
+
-`striped` (optional) - Boolean to enable alternating background colors for items
100
+
-`height` (optional) - Maximum height in pixels before scrolling is enabled
101
+
-`width` (optional) - Width of the dropdown in pixels
102
+
103
+
The dropdown will be positioned below the clicked element and will close when clicking outside or selecting an item.
104
+
105
+
106
+
```python
107
+
classUserAdmin(ModelAdmin):
108
+
list_display = [
109
+
"display_dropdown",
110
+
]
111
+
112
+
@display(description=_("Status"), dropdown=True)
113
+
defdisplay_dropdown(self, obj):
114
+
return {
115
+
# Clickable title displayed in the column
116
+
"title": "Custom dropdown title",
117
+
# Striped design for the items
118
+
"striped": True, # Optional
119
+
# Dropdown height. Will display scrollbar for longer content
120
+
"height": 200, # Optional
121
+
# Dropdown width
122
+
"width": 240, # Optional
123
+
"items": [
124
+
{
125
+
"title": "First title",
126
+
"link": "#"# Optional
127
+
},
128
+
{
129
+
"title": "Second title",
130
+
"link": "#"# Optional
131
+
},
132
+
]
133
+
}
134
+
```
135
+
136
+
### Custom dropdown template
137
+
138
+
You can also render a custom template inside a dropdown. Just pass the `content` parameter with template content. If you want to render more complex content, use `render_to_string`.
139
+
140
+
The dropdown configuration accepts these options when using custom template content:
141
+
142
+
-`title` (required) - The text displayed in the column that users click to open the dropdown
143
+
-`content` (required) - HTML content or template string to display in the dropdown
144
+
145
+
The dropdown will be positioned below the clicked element and will close when clicking outside. The content can include any valid HTML or Django template syntax.
0 commit comments