Expand description
Telescope-style two-column picker widget.
Layout:
┌─ Title ──────────────────────────────────────────────────┐
│ ┌─ search ──────────┐ ┌─ Detail ─────────────────────┐ │
│ │ query_ │ │ selected item detail… │ │
│ └───────────────────┘ │ │ │
│ ┌─ 3/12 ────────────┐ │ │ │
│ │ item one │ └──────────────────────────────┘ │
│ │ ▶ item two │ │
│ │ item three │ │
│ └───────────────────┘ │
└─────────────────────────────────────────────────────────┘§Usage
ⓘ
// 1. Create/manage PickerState in your app state
// 2. Filter your items externally based on state.search
// 3. Compute detail lines for state.selected item
// 4. Call render_picker each frame
let filtered: Vec<PickerItem> = all_items
.iter()
.filter(|i| i.label.to_lowercase().contains(&state.search.to_lowercase()))
.cloned()
.collect();
let detail = if let Some(item) = filtered.get(state.selected) {
vec![Line::from(item.label.clone())]
} else {
vec![]
};
let area = tui_kit::popup::centered_popup(f, 0.88, 120, 30);
render_picker(f, area, "Find instance", &state, &filtered, detail, &theme);Structs§
- Picker
Item - A single row in a
render_pickerlist. - Picker
State - Navigation and search state for a
render_pickerwidget.
Functions§
- render_
picker - Render a two-column picker inside
area.