mirror/naive-ui
2
0
Fork 0
mirror of https://github.com/tusen-ai/naive-ui.git synced 2025-01-12 12:25:16 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(data-table): size

Browse Source
This commit is contained in:
07akioni 2020-03-02 15:04:20 +08:00
parent 64b7c73796
commit a28f885f9a
2 changed files with 40 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
src/DataTable/src/DataTable.vue
View File

@ -4,7 +4,8 @@
:class="{
[`n-${syntheticTheme}-theme`]: syntheticTheme,
'n-data-table--bordered': bordered,
'n-data-table--single-line': singleLine
'n-data-table--single-line': singleLine,
[`n-data-table--${size}-size`]: true
}"
>
<n-spin :spinning="loading">
@ -185,6 +186,12 @@ export default {
singleLine: {
type: Boolean,
default: true
},
size: {
validator (value) {
return ['small', 'medium', 'large'].includes(value)
},
default: 'medium'
}
},
data () {

34
styles/DataTable.scss
View File

@ -1,8 +1,39 @@
@import "./mixins/mixins.scss";
@mixin data-table-size-mixin () {
@include m(small-size) {
font-size: map-get($--n-font-size, 'medium');
@include b(data-table-th) {
padding: 5px 5px 5px 11px;
}
@include b(data-table-td) {
padding: 5px 5px 5px 11px;
}
}
@include m(medium-size) {
font-size: map-get($--n-font-size, 'medium');
@include b(data-table-th) {
padding: 10px 10px 10px 16px;
}
@include b(data-table-td) {
padding: 10px 10px 10px 16px;
}
}
@include m(large-size) {
font-size: map-get($--n-font-size, 'large');
@include b(data-table-th) {
padding: 15px 15px 15px 20px;
}
@include b(data-table-td) {
padding: 15px 15px 15px 20px;
}
}
}
@include themes-mixin {
@include b(data-table) {
@include once {
@include data-table-size-mixin();
width: 100%;
font-size: 14px;
padding-bottom: 8px;
@ -75,13 +106,13 @@
}
@include b(data-table-td) {
@include once {
padding: 10px 10px 10px 16px;
text-align: left;
box-sizing: border-box;
border: none;
transition:
box-shadow .3s $--n-ease-in-out-cubic-bezier,
background-color .3s $--n-ease-in-out-cubic-bezier,
border-color .3s $--n-ease-in-out-cubic-bezier,
color .3s $--n-ease-in-out-cubic-bezier;
@include m(ellipsis) {
text-overflow: ellipsis;
@ -135,7 +166,6 @@
@include b(data-table-th) {
@include once {
position: relative;
padding: 10px 10px 10px 16px;
text-align: left;
font-weight: $--n-strong-weight;
box-sizing: border-box;