mirror of
https://github.com/adoyle0/thaw.git
synced 2025-01-23 22:39:23 -05:00
324bc57e42
* feat!: Add support for multiple options in Select * feat: Sync Select menu when value is updated * feat: Decrease line height of multi select items * fix: Invalid callback on multiselect tag close * feat: Sync Select menu only for multiple values * feat: separate `MultiSelect` from `Select` component * fix: SelectLabel slot implementation * feat: rename `MultiSelect` to `SelectMulti` * feat: rename and move `MultiSelect` * feat: add arrow to select component * feat: lower opacity of select dropdown arrow icon * fix: inconsistent select font size * fix: select menu font size * feat: add clear button to multi select * fix: Multi select icon on click attribute * feat: use inline-block for select component * feat: detect select min width based on options * feat: add `allow_clear` prop to `MultiSelect` * feat: remove select min width detection * feat: use `Children` for `SelectLabel` * feat: rename `allow_clear` to `clearable` * fix: follower min width * feat: remove inline-block from `Select`
62 lines
2.4 KiB
Markdown
62 lines
2.4 KiB
Markdown
# Select
|
|
|
|
```rust demo
|
|
let value = create_rw_signal(None::<String>);
|
|
|
|
let options = vec![
|
|
SelectOption::new("RwSignal", String::from("rw_signal")),
|
|
SelectOption::new("Memo", String::from("memo")),
|
|
];
|
|
|
|
view! {
|
|
<Select value options />
|
|
}
|
|
```
|
|
|
|
# Multiple Select
|
|
|
|
```rust demo
|
|
let value = create_rw_signal(vec![
|
|
"rust".to_string(),
|
|
"javascript".to_string(),
|
|
"zig".to_string(),
|
|
"python".to_string(),
|
|
"cpp".to_string(),
|
|
]);
|
|
|
|
let options = vec![
|
|
MultiSelectOption::new("Rust", String::from("rust")).with_variant(TagVariant::Success),
|
|
MultiSelectOption::new("JavaScript", String::from("javascript")),
|
|
MultiSelectOption::new("Python", String::from("python")).with_variant(TagVariant::Warning),
|
|
MultiSelectOption::new("C++", String::from("cpp")).with_variant(TagVariant::Error),
|
|
MultiSelectOption::new("Lua", String::from("lua")),
|
|
MultiSelectOption::new("Zig", String::from("zig")),
|
|
];
|
|
|
|
view! {
|
|
<MultiSelect value options />
|
|
}
|
|
```
|
|
|
|
### Select Props
|
|
|
|
| Name | Type | Default | Description |
|
|
| ------- | ----------------------------------- | -------------------- | ----------------------------------------- |
|
|
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the select element. |
|
|
| value | `Model<Option<T>>` | `None` | Checked value. |
|
|
| options | `MaybeSignal<Vec<SelectOption<T>>>` | `vec![]` | Options that can be selected. |
|
|
|
|
### Multiple Select Props
|
|
|
|
| Name | Type | Default | Description |
|
|
| --------- | ----------------------------------- | -------------------- | ----------------------------------------- |
|
|
| class | `OptionalProp<MaybeSignal<String>>` | `Default::default()` | Addtional classes for the select element. |
|
|
| value | `Model<Vec<T>>` | `vec![]` | Checked values. |
|
|
| options | `MaybeSignal<Vec<SelectOption<T>>>` | `vec![]` | Options that can be selected. |
|
|
| clearable | `MaybeSignal<bool>` | `false` | Allow the options to be cleared. |
|
|
|
|
### Select Slots
|
|
|
|
| Name | Default | Description |
|
|
| ----------- | ------- | ------------- |
|
|
| SelectLabel | `None` | Select label. |
|