Add class param to date picker (#56)

Co-authored-by: Cristobal Andrada <kandrelczyk@gmail.com>
This commit is contained in:
kandrelczyk 2023-12-21 06:35:15 +01:00 committed by GitHub
parent 62ce434774
commit fb06227fd8
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
3 changed files with 23 additions and 8 deletions

View file

@ -81,6 +81,12 @@ pub fn CheckboxPage() -> impl IntoView {
<td></td> <td></td>
<td>"Checkbox's content."</td> <td>"Checkbox's content."</td>
</tr> </tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the checkbox element."</td>
</tr>
</tbody> </tbody>
</Table> </Table>
<h3>"CheckboxGroup Props"</h3> <h3>"CheckboxGroup Props"</h3>
@ -106,12 +112,6 @@ pub fn CheckboxPage() -> impl IntoView {
<td></td> <td></td>
<td>"CheckboxGroup's content."</td> <td>"CheckboxGroup's content."</td>
</tr> </tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the checkbox element."</td>
</tr>
</tbody> </tbody>
</Table> </Table>
<h3>"CheckboxItem Props"</h3> <h3>"CheckboxItem Props"</h3>
@ -137,6 +137,12 @@ pub fn CheckboxPage() -> impl IntoView {
<td>"None"</td> <td>"None"</td>
<td>"Checkbox's label."</td> <td>"Checkbox's label."</td>
</tr> </tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the checkbox element."</td>
</tr>
</tbody> </tbody>
</Table> </Table>
</div> </div>

View file

@ -51,6 +51,12 @@ pub fn DatePickerPage() -> impl IntoView {
"Set the date picker value" "Set the date picker value"
</td> </td>
</tr> </tr>
<tr>
<td>"class"</td>
<td>"MaybeSignal<String>"</td>
<td>"Default::default()"</td>
<td>"Addtional classes for the date picker element."</td>
</tr>
</tbody> </tbody>
</Table> </Table>
</div> </div>

View file

@ -12,7 +12,10 @@ use panel::{Panel, PanelRef};
pub use theme::DatePickerTheme; pub use theme::DatePickerTheme;
#[component] #[component]
pub fn DatePicker(#[prop(optional, into)] value: RwSignal<Option<NaiveDate>>) -> impl IntoView { pub fn DatePicker(
#[prop(optional, into)] value: RwSignal<Option<NaiveDate>>,
#[prop(optional, into)] class: MaybeSignal<String>,
) -> impl IntoView {
mount_style("date-picker", include_str!("./date-picker.css")); mount_style("date-picker", include_str!("./date-picker.css"));
let date_picker_ref = create_node_ref::<html::Div>(); let date_picker_ref = create_node_ref::<html::Div>();
let is_show_panel = create_rw_signal(false); let is_show_panel = create_rw_signal(false);
@ -70,7 +73,7 @@ pub fn DatePicker(#[prop(optional, into)] value: RwSignal<Option<NaiveDate>>) ->
view! { view! {
<Binder target_ref=date_picker_ref> <Binder target_ref=date_picker_ref>
<div ref=date_picker_ref> <div ref=date_picker_ref>
<Input value=show_date_text on_focus=open_panel on_blur=on_input_blur> <Input class value=show_date_text on_focus=open_panel on_blur=on_input_blur>
<InputSuffix slot> <InputSuffix slot>
<Icon icon=Icon::from(AiIcon::AiCalendarOutlined) style="font-size: 18px"/> <Icon icon=Icon::from(AiIcon::AiCalendarOutlined) style="font-size: 18px"/>
</InputSuffix> </InputSuffix>