mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-02-17 13:20:52 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(table): bordered, single-line

Browse Source
This commit is contained in:
07akioni 2020-02-23 11:28:20 +08:00
parent 06edd3fd89
commit c3e7a41cb9
6 changed files with 222 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

92
demo/documentation/components/table/enUS/basic.md
View File

@ -2,18 +2,90 @@
```html
<n-table>
<n-thead>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>It's hard to learn words</n-th>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>It's hard to learn words</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>Damn it! I can't remember those words.</n-td>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>Damn it! I can't remember those words.</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
<n-table :bordered="false">
<n-thead>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>It's hard to learn words</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>Damn it! I can't remember those words.</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
<n-table :single-line="false">
<n-thead>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>It's hard to learn words</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>Damn it! I can't remember those words.</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
```
```css
.n-table {
margin-bottom: 16px
}
```

8
demo/documentation/components/table/enUS/index.md
View File

@ -9,3 +9,11 @@ basic
## Components
You can use `n-table`, `n-thead`, `n-tbody`, `n-tr`, `n-th` and `n-td`.
## Props
### Table Props
|Name|Type|Default|Description|
|-|-|-|-|
|bordered|`boolean`|`true`||
|single-line|`boolean`|`true`||

91
demo/documentation/components/table/zhCN/basic.md
View File

@ -2,18 +2,89 @@
```html
<n-table>
<n-thead>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>万事开头难</n-th>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>万事开头难</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>干！我刚才背的是啥</n-td>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>干！我刚才背的是啥</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
<n-table :bordered="false">
<n-thead>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>万事开头难</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>干！我刚才背的是啥</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
<n-table :single-line="false">
<n-thead>
<n-tr>
<n-th>Abandon</n-th>
<n-th>Abormal</n-th>
<n-th>Abolish</n-th>
<n-th>...</n-th>
<n-th>万事开头难</n-th>
</n-tr>
</n-thead>
<n-tbody>
<n-tr>
<n-td>放弃</n-td>
<n-td>反常的</n-td>
<n-td>彻底废除</n-td>
<n-td>...</n-td>
<n-td>干！我刚才背的是啥</n-td>
</n-tr>
<n-tr>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
<n-td>...</n-td>
</n-tr>
</n-tbody>
</n-table>
```
```css
.n-table {
margin-bottom: 16px
}
```

8
demo/documentation/components/table/zhCN/index.md
View File

@ -9,3 +9,11 @@ basic
## Components
你可以使用 `n-table`、`n-thead`、`n-tbody`、`n-tr`、`n-th` 和 `n-td`。
## Props
### Table Props
|名称|类型|默认值|说明|
|-|-|-|-|
|bordered|`boolean`|`true`||
|single-line|`boolean`|`true`||

16
src/Table/src/Table.vue
View File

@ -2,7 +2,9 @@
<table
class="n-table"
:class="{
[`n-${syntheticTheme}-theme`]: syntheticTheme
[`n-${syntheticTheme}-theme`]: syntheticTheme,
'n-table--bordered': bordered,
'n-table--single-line': singleLine
}"
>
<slot />
@ -15,6 +17,16 @@ import themeable from '../../_mixins/themeable'
export default {
name: 'NTable',
mixins: [withapp, themeable]
mixins: [withapp, themeable],
props: {
bordered: {
type: Boolean,
default: true
},
singleLine: {
type: Boolean,
default: true
}
}
}
</script>

32
styles/Table.scss
View File

@ -5,7 +5,7 @@
@include once {
font-size: 14px;
width: 100%;
border-radius: 6px;
border-radius: 6px 6px 0 0;
text-align: left;
border-collapse: separate;
border-spacing: 0;
@ -15,7 +15,6 @@
border-color .3s $--n-ease-in-out-cubic-bezier,
color .3s $--n-ease-in-out-cubic-bezier;
}
border: 1px solid $--table-border-color;
background: $--table-body-background-color;
@include e(th) {
@include once {
@ -28,7 +27,6 @@
text-align: inherit;
padding: 14px 12px;
vertical-align: inherit;
font-style: none;
text-transform: none;
border: none;
font-weight: 500;
@ -37,6 +35,10 @@
background-color: $--table-header-background-color;
border-color: $--table-border-color;
border-bottom: 1px solid $--table-border-color;
border-right: 1px solid $--table-border-color;
&:last-child {
border-right: none;
}
}
@include e(td) {
@include once {
@ -48,6 +50,30 @@
}
color: $--table-body-text-color;
background-color: $--n-table-body-background-color;
border-right: 1px solid $--table-border-color;
border-bottom: 1px solid $--table-border-color;
&:last-child {
border-right: none;
}
}
@include m(bordered) {
border: 1px solid $--table-border-color;
border-radius: 6px;
@include e(tr) {
&:last-child {
@include e(td) {
border-bottom: none;
}
}
}
}
@include m(single-line) {
@include e(th) {
border-right: none;
}
@include e(td) {
border-right: none;
}
}
}
}