mirror of
https://github.com/adoyle0/thaw.git
synced 2025-03-13 05:59:49 -04:00
feat: add table component
This commit is contained in:
luoxiao
parent
a355971d58
commit
867e8f693d
8 changed files with 202 additions and 10 deletions
|
|
@ -22,6 +22,7 @@ pub fn App() -> impl IntoView {
|
|||
<Route path="/tabs" view=TabsPage/>
|
||||
<Route path="/select" view=SelectPage/>
|
||||
<Route path="/space" view=SpacePage/>
|
||||
<Route path="/table" view=TablePage/>
|
||||
</Route>
|
||||
<Route path="/mobile/tabbar" view=TabbarDemoPage/>
|
||||
<Route path="/mobile/nav-bar" view=NavBarDemoPage/>
|
||||
|
|
|
|||
|
|
@ -47,6 +47,7 @@ pub fn ComponentsPage() -> impl IntoView {
|
|||
<MenuItem key="tabs" label="Tabs"/>
|
||||
<MenuItem key="select" label="Select"/>
|
||||
<MenuItem key="space" label="Space"/>
|
||||
<MenuItem key="table" label="Table"/>
|
||||
</MenuGroup>
|
||||
<MenuGroup label="Mobile Components">
|
||||
<MenuItem key="tabbar" label="Tabbar"/>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@ mod select;
|
|||
mod slider;
|
||||
mod space;
|
||||
mod tabbar;
|
||||
mod table;
|
||||
mod tabs;
|
||||
mod toast;
|
||||
|
||||
|
|
@ -29,5 +30,6 @@ pub use select::*;
|
|||
pub use slider::*;
|
||||
pub use space::*;
|
||||
pub use tabbar::*;
|
||||
pub use table::*;
|
||||
pub use tabs::*;
|
||||
pub use toast::*;
|
||||
|
|
|
|||
93
gh-pages/src/pages/table/mod.rs
Normal file
93
gh-pages/src/pages/table/mod.rs
Normal file
|
|
@ -0,0 +1,93 @@
|
|||
use crate::components::{Demo, DemoCode};
|
||||
use leptos::*;
|
||||
use melt_ui::*;
|
||||
use prisms::highlight_str;
|
||||
|
||||
#[component]
|
||||
pub fn TablePage() -> impl IntoView {
|
||||
view! {
|
||||
<div style="width: 896px; margin: 0 auto;">
|
||||
<h1>"Table"</h1>
|
||||
<Demo>
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>"tag"</th>
|
||||
<th>"count"</th>
|
||||
<th>"date"</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>"div"</td>
|
||||
<td>"2"</td>
|
||||
<td>"2023-10-08"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"span"</td>
|
||||
<td>"2"</td>
|
||||
<td>"2023-10-08"</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
<DemoCode
|
||||
slot
|
||||
html=highlight_str!(
|
||||
r#"
|
||||
<Table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>"tag"</th>
|
||||
<th>"count"</th>
|
||||
<th>"date"</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>"div"</td>
|
||||
<td>"2"</td>
|
||||
<td>"2023-10-08"</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"span"</td>
|
||||
<td>"2"</td>
|
||||
<td>"2023-10-08"</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
"#,
|
||||
"rust"
|
||||
)
|
||||
>
|
||||
|
||||
""
|
||||
</DemoCode>
|
||||
</Demo>
|
||||
<h3>"Table 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>"single_row"</td>
|
||||
<td>"MaybeSignal<bool>"</td>
|
||||
<td>"true"</td>
|
||||
<td>""</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>"single_column"</td>
|
||||
<td>"MaybeSignal<bool>"</td>
|
||||
<td>"false"</td>
|
||||
<td>""</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</Table>
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
|
@ -1,8 +1,49 @@
|
|||
use crate::utils::mount_style::mount_style;
|
||||
mod theme;
|
||||
|
||||
use crate::{theme::use_theme, utils::mount_style::mount_style, Theme};
|
||||
use leptos::*;
|
||||
pub use theme::TableTheme;
|
||||
|
||||
#[component]
|
||||
pub fn Table(children: Children) -> impl IntoView {
|
||||
pub fn Table(
|
||||
#[prop(optional, into)] style: MaybeSignal<String>,
|
||||
#[prop(default=true.into(), into)] single_row: MaybeSignal<bool>,
|
||||
#[prop(optional, into)] single_column: MaybeSignal<bool>,
|
||||
children: Children,
|
||||
) -> impl IntoView {
|
||||
mount_style("table", include_str!("./table.css"));
|
||||
view! { <table class="melt-table">{children()}</table> }
|
||||
let theme = use_theme(Theme::light);
|
||||
let css_vars = create_memo(move |_| {
|
||||
let mut css_vars = String::new();
|
||||
theme.with(|theme| {
|
||||
css_vars.push_str(&format!(
|
||||
"--background-color: {};",
|
||||
theme.table.background_color.clone()
|
||||
));
|
||||
css_vars.push_str(&format!(
|
||||
"--background-color-striped: {};",
|
||||
theme.table.background_color_striped.clone()
|
||||
));
|
||||
css_vars.push_str(&format!(
|
||||
"--border-color: {};",
|
||||
theme.table.border_color.clone()
|
||||
));
|
||||
css_vars.push_str(&format!(
|
||||
"--border-radius: {};",
|
||||
theme.common.border_radius.clone()
|
||||
));
|
||||
});
|
||||
|
||||
css_vars
|
||||
});
|
||||
view! {
|
||||
<table
|
||||
class="melt-table"
|
||||
class=("melt-table--single-row", move || single_row.get())
|
||||
class=("melt-table--single-column", move || single_column.get())
|
||||
style=move || format!("{}{}", css_vars.get(), style.get())
|
||||
>
|
||||
{children()}
|
||||
</table>
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,16 +1,39 @@
|
|||
.melt-table {
|
||||
width: 100%;
|
||||
border-collapse: separate;
|
||||
border-spacing: 0;
|
||||
background-color: var(--background-color);
|
||||
border: 1px solid var(--border-color);
|
||||
border-radius: var(--border-radius);
|
||||
}
|
||||
|
||||
.melt-table th {
|
||||
text-align: inherit;
|
||||
background-color: var(--background-color-striped);
|
||||
}
|
||||
|
||||
.melt-table td,
|
||||
.melt-table th {
|
||||
padding: 10px 12px;
|
||||
padding: 12px;
|
||||
border-right: 1px solid var(--border-color);
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
|
||||
.melt-table thead {
|
||||
border-bottom: 1px solid #888;
|
||||
.melt-table.melt-table--single-row td,
|
||||
.melt-table.melt-table--single-row th {
|
||||
border-right: none;
|
||||
}
|
||||
.melt-table.melt-table--single-column td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.melt-table td:last-child,
|
||||
.melt-table th:last-child {
|
||||
border-right: none;
|
||||
}
|
||||
|
||||
.melt-table tbody tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
.melt-table tr {
|
||||
border-bottom: 1px solid var(--border-color);
|
||||
}
|
||||
26
src/table/theme.rs
Normal file
26
src/table/theme.rs
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
use crate::theme::ThemeMethod;
|
||||
|
||||
#[derive(Clone)]
|
||||
pub struct TableTheme {
|
||||
pub background_color: String,
|
||||
pub background_color_striped: String,
|
||||
pub border_color: String,
|
||||
}
|
||||
|
||||
impl ThemeMethod for TableTheme {
|
||||
fn light() -> Self {
|
||||
Self {
|
||||
background_color: "#fff".into(),
|
||||
background_color_striped: "#fafafc".into(),
|
||||
border_color: "#efeff5".into(),
|
||||
}
|
||||
}
|
||||
|
||||
fn dark() -> Self {
|
||||
Self {
|
||||
background_color: "#fff".into(),
|
||||
background_color_striped: "#fafafc".into(),
|
||||
border_color: "#efeff5".into(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -2,7 +2,7 @@ mod common;
|
|||
use leptos::*;
|
||||
|
||||
use self::common::CommonTheme;
|
||||
use crate::{ButtonTheme, InputTheme, MenuTheme};
|
||||
use crate::{ButtonTheme, InputTheme, MenuTheme, TableTheme};
|
||||
|
||||
pub trait ThemeMethod {
|
||||
fn light() -> Self;
|
||||
|
|
@ -15,6 +15,7 @@ pub struct Theme {
|
|||
pub button: ButtonTheme,
|
||||
pub input: InputTheme,
|
||||
pub menu: MenuTheme,
|
||||
pub table: TableTheme,
|
||||
}
|
||||
|
||||
impl Theme {
|
||||
|
|
@ -24,6 +25,7 @@ impl Theme {
|
|||
button: ButtonTheme::light(),
|
||||
input: InputTheme::light(),
|
||||
menu: MenuTheme::light(),
|
||||
table: TableTheme::light(),
|
||||
}
|
||||
}
|
||||
pub fn dark() -> Self {
|
||||
|
|
@ -32,6 +34,7 @@ impl Theme {
|
|||
button: ButtonTheme::dark(),
|
||||
input: InputTheme::dark(),
|
||||
menu: MenuTheme::dark(),
|
||||
table: TableTheme::dark(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -41,8 +44,9 @@ impl ThemeMethod for Theme {
|
|||
Self {
|
||||
common: CommonTheme::light(),
|
||||
button: ButtonTheme::light(),
|
||||
input: InputTheme::dark(),
|
||||
menu: MenuTheme::dark(),
|
||||
input: InputTheme::light(),
|
||||
menu: MenuTheme::light(),
|
||||
table: TableTheme::light(),
|
||||
}
|
||||
}
|
||||
fn dark() -> Self {
|
||||
|
|
@ -51,6 +55,7 @@ impl ThemeMethod for Theme {
|
|||
button: ButtonTheme::dark(),
|
||||
input: InputTheme::dark(),
|
||||
menu: MenuTheme::dark(),
|
||||
table: TableTheme::dark(),
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue