mirror of
https://github.com/adoyle0/thaw.git
synced 2025-02-02 08:34:15 -05:00
docs: card, checkbox, color picker, grid, icon, image
This commit is contained in:
luoxiao
parent
0404b5bf94
commit
9c115720b9
6 changed files with 274 additions and 5 deletions
|
|
@ -1,7 +1,7 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use thaw::*;
|
|
||||||
use prisms::highlight_str;
|
use prisms::highlight_str;
|
||||||
|
use thaw::*;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn CardPage() -> impl IntoView {
|
pub fn CardPage() -> impl IntoView {
|
||||||
|
|
@ -73,6 +73,58 @@ pub fn CardPage() -> impl IntoView {
|
||||||
""
|
""
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
|
<h3>"Card Props"</h3>
|
||||||
|
<Table single_column=true>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>"Name"</th>
|
||||||
|
<th>"Type"</th>
|
||||||
|
<th>"Default"</th>
|
||||||
|
<th>"Description"</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>"title"</td>
|
||||||
|
<td>"MaybeSignal<String>"</td>
|
||||||
|
<td>r#""""#</td>
|
||||||
|
<td>"Card title."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"children"</td>
|
||||||
|
<td>"Children"</td>
|
||||||
|
<td></td>
|
||||||
|
<td>"Card's content."</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
<h3>"Card Slots"</h3>
|
||||||
|
<Table single_column=true>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>"Name"</th>
|
||||||
|
<th>"Default"</th>
|
||||||
|
<th>"Description"</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>"CardHeader"</td>
|
||||||
|
<td>"None"</td>
|
||||||
|
<td>"Header content."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"CardHeaderExtra"</td>
|
||||||
|
<td>"None"</td>
|
||||||
|
<td>"Header extra content."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"CardFooter"</td>
|
||||||
|
<td>"None"</td>
|
||||||
|
<td>"Footer content."</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,8 @@ use std::collections::HashSet;
|
||||||
|
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use thaw::*;
|
|
||||||
use prisms::highlight_str;
|
use prisms::highlight_str;
|
||||||
|
use thaw::*;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn CheckboxPage() -> impl IntoView {
|
pub fn CheckboxPage() -> impl IntoView {
|
||||||
|
|
@ -62,6 +62,81 @@ pub fn CheckboxPage() -> impl IntoView {
|
||||||
""
|
""
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
|
<h3>"Checkbox Props"</h3>
|
||||||
|
<Table single_column=true>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>"Name"</th>
|
||||||
|
<th>"Type"</th>
|
||||||
|
<th>"Default"</th>
|
||||||
|
<th>"Description"</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>"value"</td>
|
||||||
|
<td>"RwSignal<bool>"</td>
|
||||||
|
<td>"false"</td>
|
||||||
|
<td>"Whether the checkbox is being checked."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"children"</td>
|
||||||
|
<td>"Children"</td>
|
||||||
|
<td></td>
|
||||||
|
<td>"Checkbox's content."</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
<h3>"CheckboxGroup Props"</h3>
|
||||||
|
<Table single_column=true>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>"Name"</th>
|
||||||
|
<th>"Type"</th>
|
||||||
|
<th>"Default"</th>
|
||||||
|
<th>"Description"</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>"value"</td>
|
||||||
|
<td>"RwSignal<HashSet<String>>,"</td>
|
||||||
|
<td>"false"</td>
|
||||||
|
<td>"Sets the value of the checkbox group."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"children"</td>
|
||||||
|
<td>"Children"</td>
|
||||||
|
<td></td>
|
||||||
|
<td>"CheckboxGroup's content."</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
|
<h3>"CheckboxItem Props"</h3>
|
||||||
|
<Table single_column=true>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>"Name"</th>
|
||||||
|
<th>"Type"</th>
|
||||||
|
<th>"Default"</th>
|
||||||
|
<th>"Description"</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>"key"</td>
|
||||||
|
<td>"String"</td>
|
||||||
|
<td></td>
|
||||||
|
<td>"The key of the checkbox to be used in a checkbox group."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"label"</td>
|
||||||
|
<td>"Option<String>"</td>
|
||||||
|
<td>"None"</td>
|
||||||
|
<td>"Checkbox's label."</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use thaw::*;
|
|
||||||
use prisms::highlight_str;
|
use prisms::highlight_str;
|
||||||
|
use thaw::*;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn ColorPickerPage() -> impl IntoView {
|
pub fn ColorPickerPage() -> impl IntoView {
|
||||||
|
|
@ -29,6 +29,25 @@ pub fn ColorPickerPage() -> impl IntoView {
|
||||||
""
|
""
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
|
<h3>"ColorPicker Props"</h3>
|
||||||
|
<Table single_column=true>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>"Name"</th>
|
||||||
|
<th>"Type"</th>
|
||||||
|
<th>"Default"</th>
|
||||||
|
<th>"Description"</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>"value"</td>
|
||||||
|
<td>"RwSignal<RGBA>"</td>
|
||||||
|
<td>"RwSignal<RGBA>"</td>
|
||||||
|
<td>"Value of the picker."</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -119,6 +119,37 @@ pub fn GridPage() -> impl IntoView {
|
||||||
""
|
""
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
|
<h3>"Grid Props"</h3>
|
||||||
|
<Table single_column=true>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>"Name"</th>
|
||||||
|
<th>"Type"</th>
|
||||||
|
<th>"Default"</th>
|
||||||
|
<th>"Description"</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>"cols"</td>
|
||||||
|
<td>"MaybeSignal<u16>"</td>
|
||||||
|
<td>"1"</td>
|
||||||
|
<td>"Number of grids displayed."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"x_gap"</td>
|
||||||
|
<td>"MaybeSignal<u16>"</td>
|
||||||
|
<td>"0"</td>
|
||||||
|
<td>"Horizontal gap."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"y_gap"</td>
|
||||||
|
<td>"MaybeSignal<u16>"</td>
|
||||||
|
<td>"0"</td>
|
||||||
|
<td>"Vertical gap."</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use thaw::*;
|
|
||||||
use prisms::highlight_str;
|
use prisms::highlight_str;
|
||||||
|
use thaw::*;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn IconPage() -> impl IntoView {
|
pub fn IconPage() -> impl IntoView {
|
||||||
|
|
@ -29,6 +29,49 @@ pub fn IconPage() -> impl IntoView {
|
||||||
""
|
""
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
|
<h3>"Icon Props"</h3>
|
||||||
|
<Table single_column=true>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>"Name"</th>
|
||||||
|
<th>"Type"</th>
|
||||||
|
<th>"Default"</th>
|
||||||
|
<th>"Description"</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>"icon"</td>
|
||||||
|
<td>"MaybeSignal<Icon>"</td>
|
||||||
|
<td></td>
|
||||||
|
<td>"The icon to show."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"width"</td>
|
||||||
|
<td>"Option<MaybeSignal<String>>"</td>
|
||||||
|
<td>r#""1em""#</td>
|
||||||
|
<td>"The width of the icon."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"height"</td>
|
||||||
|
<td>"Option<MaybeSignal<String>>"</td>
|
||||||
|
<td>r#""1em""#</td>
|
||||||
|
<td>"The height of the icon."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"class"</td>
|
||||||
|
<td>"Option<MaybeSignal<String>>"</td>
|
||||||
|
<td>"None"</td>
|
||||||
|
<td>"HTML class attribute."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"style"</td>
|
||||||
|
<td>"Option<MaybeSignal<String>>"</td>
|
||||||
|
<td>"None"</td>
|
||||||
|
<td>"HTML style attribute."</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
use crate::components::{Demo, DemoCode};
|
use crate::components::{Demo, DemoCode};
|
||||||
use leptos::*;
|
use leptos::*;
|
||||||
use thaw::*;
|
|
||||||
use prisms::highlight_str;
|
use prisms::highlight_str;
|
||||||
|
use thaw::*;
|
||||||
|
|
||||||
#[component]
|
#[component]
|
||||||
pub fn ImagePage() -> impl IntoView {
|
pub fn ImagePage() -> impl IntoView {
|
||||||
|
|
@ -25,6 +25,55 @@ pub fn ImagePage() -> impl IntoView {
|
||||||
""
|
""
|
||||||
</DemoCode>
|
</DemoCode>
|
||||||
</Demo>
|
</Demo>
|
||||||
|
<h3>"Image Props"</h3>
|
||||||
|
<Table single_column=true>
|
||||||
|
<thead>
|
||||||
|
<tr>
|
||||||
|
<th>"Name"</th>
|
||||||
|
<th>"Type"</th>
|
||||||
|
<th>"Default"</th>
|
||||||
|
<th>"Description"</th>
|
||||||
|
</tr>
|
||||||
|
</thead>
|
||||||
|
<tbody>
|
||||||
|
<tr>
|
||||||
|
<td>"src"</td>
|
||||||
|
<td>"MaybeSignal<String>"</td>
|
||||||
|
<td>r#""""#</td>
|
||||||
|
<td>"Image source."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"alt"</td>
|
||||||
|
<td>"MaybeSignal<String>"</td>
|
||||||
|
<td>r#""""#</td>
|
||||||
|
<td>"Image alt information."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"width"</td>
|
||||||
|
<td>"MaybeSignal<String>"</td>
|
||||||
|
<td>r#""""#</td>
|
||||||
|
<td>"Image width."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"height"</td>
|
||||||
|
<td>"MaybeSignal<String>"</td>
|
||||||
|
<td>r#""""#</td>
|
||||||
|
<td>"Image height."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"border_radius"</td>
|
||||||
|
<td>"MaybeSignal<String>"</td>
|
||||||
|
<td>r#""""#</td>
|
||||||
|
<td>"Image border radius."</td>
|
||||||
|
</tr>
|
||||||
|
<tr>
|
||||||
|
<td>"object_fit"</td>
|
||||||
|
<td>"MaybeSignal<String>"</td>
|
||||||
|
<td>r#""""#</td>
|
||||||
|
<td>"Object-fit type of the image in the container."</td>
|
||||||
|
</tr>
|
||||||
|
</tbody>
|
||||||
|
</Table>
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue