Skip to content

Commit 1d7d7b8

Browse files
philippjfrphilippjfr
authored
Add Pill and MultiPill widgets (#568)
* Add Pill and MultiPill widgets * Tweaks
1 parent 72755fc commit 1d7d7b8

File tree

5 files changed

+744
-0
lines changed

5 files changed

+744
-0
lines changed

‎examples/reference/widgets/MultiPill.ipynb‎

Lines changed: 267 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,267 @@
1+
{
2+
"cells": [
3+
{
4+
"cell_type": "code",
5+
"execution_count": null,
6+
"id": "89409adf",
7+
"metadata": {},
8+
"outputs": [],
9+
"source": [
10+
"import panel as pn\n",
11+
"import panel_material_ui as pmui\n",
12+
"\n",
13+
"pn.extension()"
14+
]
15+
},
16+
{
17+
"cell_type": "markdown",
18+
"id": "032267a1",
19+
"metadata": {},
20+
"source": [
21+
"The `MultiPill` widget allows selecting multiple values from a list or dictionary of `options` rendered as clickable pills. It is built on top of the [Material UI Chip](https://mui.com/material-ui/react-chip/) component.\n",
22+
"\n",
23+
"The `MultiPill` widget falls into the broad category of multi-value, option-selection widgets that provide a compatible API and include the [`MultiSelect`](MultiSelect.ipynb), [`MultiChoice`](MultiChoice.ipynb) and [`CheckBoxGroup`](CheckBoxGroup.ipynb) widgets.\n",
24+
"\n",
25+
"Discover more about using widgets to add interactivity to your applications in the [Make your component interactive](https://panel.holoviz.org/how_to/interactivity/index.html) guide. For linking or callbacks, see the [Links](https://panel.holoviz.org/how_to/links/index.html) and [Param](https://panel.holoviz.org/how_to/param/index.html) guides.\n",
26+
"\n",
27+
"#### Parameters\n",
28+
"\n",
29+
"For details on other options for customizing the component, see the [customization guides](https://panel-material-ui.holoviz.org/customization/index.html).\n",
30+
"\n",
31+
"##### Core\n",
32+
"\n",
33+
"* **`disabled`** (boolean): Whether the widget is editable.\n",
34+
"* **`disabled_options`** (list): Optional list of `options` that are disabled.\n",
35+
"* **`max_items`** (int): Maximum number of options that can be selected.\n",
36+
"* **`options`** (list or dict): A list or dictionary of options to select from.\n",
37+
"* **`value`** (list): The current list of selected values.\n",
38+
"\n",
39+
"##### Display\n",
40+
"\n",
41+
"* **`color`** (str): The color of selected pills.\n",
42+
"* **`label`** (str): The title of the widget.\n",
43+
"* **`size`** (str): One of small, medium (default), or large.\n",
44+
"* **`variant`** (str): One of filled or outlined (default).\n",
45+
"\n",
46+
"##### Styling\n",
47+
"\n",
48+
"- **`sx`** (dict): Component-level styling API.\n",
49+
"- **`theme_config`** (dict): Theming API.\n",
50+
"\n",
51+
"##### Aliases\n",
52+
"\n",
53+
"For compatibility with Panel, certain parameters are allowed as aliases:\n",
54+
"\n",
55+
"- **`name`**: Alias for `label`.\n",
56+
"\n",
57+
"___"
58+
]
59+
},
60+
{
61+
"cell_type": "markdown",
62+
"id": "a704dc28",
63+
"metadata": {},
64+
"source": [
65+
"### Basic Usage\n",
66+
"\n",
67+
"The `MultiPill` widget allows selecting multiple options:"
68+
]
69+
},
70+
{
71+
"cell_type": "code",
72+
"execution_count": null,
73+
"id": "20343757",
74+
"metadata": {},
75+
"outputs": [],
76+
"source": [
77+
"multipill = pmui.MultiPill(\n",
78+
" label='Favourites',\n",
79+
" value=['Panel', 'hvPlot'],\n",
80+
" options=['Panel', 'hvPlot', 'HoloViews', 'GeoViews'],\n",
81+
")\n",
82+
"\n",
83+
"multipill"
84+
]
85+
},
86+
{
87+
"cell_type": "markdown",
88+
"id": "cbb5d1c6",
89+
"metadata": {},
90+
"source": [
91+
"### Dictionary Options\n",
92+
"\n",
93+
"Provide options as a dictionary to map labels to values:"
94+
]
95+
},
96+
{
97+
"cell_type": "code",
98+
"execution_count": null,
99+
"id": "eff7e467",
100+
"metadata": {},
101+
"outputs": [],
102+
"source": [
103+
"pmui.MultiPill(\n",
104+
" label='Grades',\n",
105+
" value=['A'],\n",
106+
" options={'Excellent': 'A', 'Good': 'B', 'Fair': 'C'},\n",
107+
")"
108+
]
109+
},
110+
{
111+
"cell_type": "markdown",
112+
"id": "82072e90",
113+
"metadata": {},
114+
"source": [
115+
"### Sizes\n",
116+
"\n",
117+
"Use the `size` parameter to control the chip size:"
118+
]
119+
},
120+
{
121+
"cell_type": "code",
122+
"execution_count": null,
123+
"id": "dfe5adea",
124+
"metadata": {},
125+
"outputs": [],
126+
"source": [
127+
"pmui.FlexBox(\n",
128+
" *(pmui.MultiPill(label=size, size=size, options=['One', 'Two', 'Three'], value=['Two'])\n",
129+
" for size in pmui.MultiPill.param.size.objects)\n",
130+
")"
131+
]
132+
},
133+
{
134+
"cell_type": "markdown",
135+
"id": "564055b6",
136+
"metadata": {},
137+
"source": [
138+
"### Variants\n",
139+
"\n",
140+
"Choose from `filled` or `outlined` variants:"
141+
]
142+
},
143+
{
144+
"cell_type": "code",
145+
"execution_count": null,
146+
"id": "9037c365",
147+
"metadata": {},
148+
"outputs": [],
149+
"source": [
150+
"pmui.FlexBox(\n",
151+
" *(pmui.MultiPill(label=variant, variant=variant, options=['One', 'Two', 'Three'], value=['Two'])\n",
152+
" for variant in pmui.MultiPill.param.variant.objects)\n",
153+
")"
154+
]
155+
},
156+
{
157+
"cell_type": "markdown",
158+
"id": "99d91227",
159+
"metadata": {},
160+
"source": [
161+
"### Colors\n",
162+
"\n",
163+
"Color is applied to the selected pills:"
164+
]
165+
},
166+
{
167+
"cell_type": "code",
168+
"execution_count": null,
169+
"id": "15b5dd43",
170+
"metadata": {},
171+
"outputs": [],
172+
"source": [
173+
"pmui.FlexBox(\n",
174+
" *(pmui.MultiPill(label=color, color=color, options=['One', 'Two'], value=['Two'])\n",
175+
" for color in pmui.MultiPill.param.color.objects)\n",
176+
")"
177+
]
178+
},
179+
{
180+
"cell_type": "markdown",
181+
"id": "2e9cf613",
182+
"metadata": {},
183+
"source": [
184+
"### Disabled and Disabled Options\n",
185+
"\n",
186+
"Disable the whole widget or individual options:"
187+
]
188+
},
189+
{
190+
"cell_type": "code",
191+
"execution_count": null,
192+
"id": "1995b85d",
193+
"metadata": {},
194+
"outputs": [],
195+
"source": [
196+
"pmui.Column(\n",
197+
" pmui.MultiPill(label='Disabled', options=['One', 'Two', 'Three'], value=['Two'], disabled=True),\n",
198+
" pmui.MultiPill(label='Disabled option', options=['One', 'Two', 'Three'], value=['Two'], disabled_options=['Two']),\n",
199+
")"
200+
]
201+
},
202+
{
203+
"cell_type": "markdown",
204+
"id": "41d0138e",
205+
"metadata": {},
206+
"source": [
207+
"Limit the number of selected pills with `max_items`:"
208+
]
209+
},
210+
{
211+
"cell_type": "code",
212+
"execution_count": null,
213+
"id": "9fb6080b",
214+
"metadata": {},
215+
"outputs": [],
216+
"source": [
217+
"pmui.MultiPill(\n",
218+
" label='Top 2',\n",
219+
" value=['Python'],\n",
220+
" options=['Python', 'JavaScript', 'Rust', 'Go'],\n",
221+
" max_items=2,\n",
222+
")"
223+
]
224+
},
225+
{
226+
"cell_type": "markdown",
227+
"id": "d7f2ee97",
228+
"metadata": {},
229+
"source": [
230+
"### Controls\n",
231+
"\n",
232+
"The `MultiPill` widget exposes a number of options which can be changed from both Python and Javascript. Try out the effect of these parameters interactively:"
233+
]
234+
},
235+
{
236+
"cell_type": "code",
237+
"execution_count": null,
238+
"id": "648d091d",
239+
"metadata": {},
240+
"outputs": [],
241+
"source": [
242+
"pmui.Row(multipill.controls(jslink=True), multipill)"
243+
]
244+
}
245+
],
246+
"metadata": {
247+
"kernelspec": {
248+
"display_name": "Python 3 (ipykernel)",
249+
"language": "python",
250+
"name": "python3"
251+
},
252+
"language_info": {
253+
"codemirror_mode": {
254+
"name": "ipython",
255+
"version": 3
256+
},
257+
"file_extension": ".py",
258+
"mimetype": "text/x-python",
259+
"name": "python",
260+
"nbconvert_exporter": "python",
261+
"pygments_lexer": "ipython3",
262+
"version": "3.12.2"
263+
}
264+
},
265+
"nbformat": 4,
266+
"nbformat_minor": 5
267+
}

0 commit comments

Comments
 (0)