0
# Panel Component
1
2
Standalone cascader panel component for custom layouts without dropdown behavior. Provides the same hierarchical selection functionality as the main Cascader component but renders as an inline panel rather than a dropdown.
3
4
## Capabilities
5
6
### Panel Component
7
8
Creates a standalone cascader panel for embedding in custom layouts.
9
10
```typescript { .api }
11
/**
12
* Standalone cascader panel without dropdown behavior
13
* @param props - Panel configuration props
14
* @returns JSX.Element
15
*/
16
function Panel<
17
OptionType extends DefaultOptionType = DefaultOptionType,
18
ValueField extends keyof OptionType = keyof OptionType,
19
Multiple extends boolean | React.ReactNode = false
20
>(props: PanelProps<OptionType, ValueField, Multiple>): JSX.Element;
21
```
22
23
### Panel Props Interface
24
25
Configuration properties for the Panel component.
26
27
```typescript { .api }
28
interface PanelProps<
29
OptionType extends DefaultOptionType = DefaultOptionType,
30
ValueField extends keyof OptionType = keyof OptionType,
31
Multiple extends boolean | React.ReactNode = false
32
> {
33
/** Controlled selected value */
34
value?: GetValueType<OptionType, ValueField, Multiple>;
35
36
/** Initial selected value for uncontrolled mode */
37
defaultValue?: GetValueType<OptionType, ValueField, Multiple>;
38
39
/** Trigger onChange on each level selection, not just leaf nodes */
40
changeOnSelect?: boolean;
41
42
/** Selection change callback */
43
onChange?: (
44
value: GetValueType<OptionType, ValueField, Multiple>,
45
selectOptions: GetOptionType<OptionType, Multiple>
46
) => void;
47
48
/** Hierarchical options data array */
49
options?: OptionType[];
50
51
/** CSS class prefix (default: 'rc-cascader') */
52
prefixCls?: string;
53
54
/** Enable multiple selection mode */
55
checkable?: Multiple;
56
57
/** Custom field name mapping */
58
fieldNames?: FieldNames<OptionType, ValueField>;
59
60
/** Strategy for displaying selected items in multiple mode */
61
showCheckedStrategy?: ShowCheckedStrategy;
62
63
/** Callback for loading child options dynamically */
64
loadData?: (selectOptions: OptionType[]) => void;
65
66
/** How to expand option menus: 'hover' or 'click' */
67
expandTrigger?: 'hover' | 'click';
68
69
/** Custom expand icon */
70
expandIcon?: React.ReactNode;
71
72
/** Custom loading icon */
73
loadingIcon?: React.ReactNode;
74
75
/** Additional CSS classes */
76
className?: string;
77
78
/** Inline styles */
79
style?: React.CSSProperties;
80
81
/** Text direction for RTL support */
82
direction?: 'ltr' | 'rtl';
83
84
/** Content to show when no options found */
85
notFoundContent?: React.ReactNode;
86
87
/** Disable the entire panel */
88
disabled?: boolean;
89
}
90
```
91
92
## Usage Examples
93
94
### Basic Panel Usage
95
96
```typescript
97
import React, { useState } from 'react';
98
import { Panel } from 'rc-cascader';
99
100
const options = [
101
{
102
label: 'Zhejiang',
103
value: 'zhejiang',
104
children: [
105
{
106
label: 'Hangzhou',
107
value: 'hangzhou',
108
children: [
109
{ label: 'West Lake', value: 'xihu' },
110
{ label: 'Xiaoshan', value: 'xiaoshan' }
111
]
112
},
113
{
114
label: 'Ningbo',
115
value: 'ningbo'
116
}
117
]
118
},
119
{
120
label: 'Jiangsu',
121
value: 'jiangsu',
122
children: [
123
{
124
label: 'Nanjing',
125
value: 'nanjing'
126
}
127
]
128
}
129
];
130
131
const BasicPanelExample = () => {
132
const [value, setValue] = useState([]);
133
134
return (
135
<div style={{ border: '1px solid #d9d9d9', borderRadius: '6px' }}>
136
<Panel
137
options={options}
138
value={value}
139
onChange={(value, selectedOptions) => {
140
setValue(value);
141
console.log('Selected:', value, selectedOptions);
142
}}
143
/>
144
</div>
145
);
146
};
147
```
148
149
### Multiple Selection Panel
150
151
```typescript
152
const MultiplePanelExample = () => {
153
const [value, setValue] = useState([]);
154
155
return (
156
<Panel
157
checkable
158
options={options}
159
value={value}
160
onChange={(value, selectedOptions) => {
161
setValue(value);
162
console.log('Multiple selected:', value, selectedOptions);
163
}}
164
showCheckedStrategy="SHOW_CHILD"
165
/>
166
);
167
};
168
```
169
170
### Panel with Custom Styling
171
172
```typescript
173
const StyledPanelExample = () => {
174
return (
175
<Panel
176
options={options}
177
className="custom-panel"
178
style={{
179
width: '400px',
180
height: '300px',
181
border: '2px solid #1890ff',
182
borderRadius: '8px',
183
padding: '8px'
184
}}
185
expandTrigger="hover"
186
expandIcon={<span>→</span>}
187
/>
188
);
189
};
190
```
191
192
### Panel with Dynamic Loading
193
194
```typescript
195
const DynamicPanelExample = () => {
196
const [options, setOptions] = useState([
197
{
198
label: 'Dynamic Root',
199
value: 'root',
200
isLeaf: false
201
}
202
]);
203
204
const loadData = (selectedOptions) => {
205
const targetOption = selectedOptions[selectedOptions.length - 1];
206
targetOption.loading = true;
207
208
// Simulate async data loading
209
setTimeout(() => {
210
targetOption.loading = false;
211
targetOption.children = [
212
{
213
label: `Child of ${targetOption.label}`,
214
value: `${targetOption.value}_child`,
215
isLeaf: true
216
}
217
];
218
setOptions([...options]);
219
}, 1000);
220
};
221
222
return (
223
<Panel
224
options={options}
225
loadData={loadData}
226
changeOnSelect
227
loadingIcon={<span>Loading...</span>}
228
/>
229
);
230
};
231
```
232
233
### Panel with Custom Field Names
234
235
```typescript
236
const customFieldOptions = [
237
{
238
name: 'Technology',
239
id: 'tech',
240
subcategories: [
241
{
242
name: 'Frontend',
243
id: 'frontend',
244
subcategories: [
245
{ name: 'React', id: 'react' },
246
{ name: 'Vue', id: 'vue' }
247
]
248
}
249
]
250
}
251
];
252
253
const CustomFieldPanelExample = () => {
254
return (
255
<Panel
256
options={customFieldOptions}
257
fieldNames={{
258
label: 'name',
259
value: 'id',
260
children: 'subcategories'
261
}}
262
expandTrigger="click"
263
/>
264
);
265
};
266
```
267
268
### RTL Support Panel
269
270
```typescript
271
const RTLPanelExample = () => {
272
return (
273
<Panel
274
options={options}
275
direction="rtl"
276
style={{ direction: 'rtl' }}
277
/>
278
);
279
};
280
```
281
282
## Integration with Forms
283
284
```typescript
285
import React from 'react';
286
import { Panel } from 'rc-cascader';
287
288
const FormIntegrationExample = () => {
289
const [formData, setFormData] = useState({
290
location: [],
291
category: []
292
});
293
294
const handleLocationChange = (value, selectedOptions) => {
295
setFormData(prev => ({
296
...prev,
297
location: value
298
}));
299
};
300
301
return (
302
<form>
303
<div className="form-field">
304
<label>Location:</label>
305
<Panel
306
options={locationOptions}
307
value={formData.location}
308
onChange={handleLocationChange}
309
style={{ marginTop: '8px' }}
310
/>
311
</div>
312
313
<div className="form-field">
314
<label>Category:</label>
315
<Panel
316
options={categoryOptions}
317
value={formData.category}
318
onChange={(value) =>
319
setFormData(prev => ({ ...prev, category: value }))
320
}
321
style={{ marginTop: '8px' }}
322
/>
323
</div>
324
</form>
325
);
326
};
327
```