forked from opentiny/tiny-vue
fix(pager): [pager] fix pager hover style (#2111)
* fix(pager): [pager] fix pager hover style * feat(pager): [pager] add simplest pager to adaptive x-design
This commit is contained in:
parent
b059b1e8df
commit
ea39960d59
|
@ -1,6 +1,6 @@
|
|||
export default {
|
||||
state: {
|
||||
showJumperSufix: false,
|
||||
showJumperSuffix: false,
|
||||
align: 'right',
|
||||
totalI18n: 'total',
|
||||
totalFixedLeft: true
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
export default {
|
||||
state: {
|
||||
showJumperSufix: false,
|
||||
showJumperSuffix: false,
|
||||
align: 'right',
|
||||
totalI18n: 'total',
|
||||
totalFixedLeft: true
|
||||
|
|
|
@ -91,7 +91,7 @@ export const renderless = (
|
|||
internalLayout: computed(() => api.computedInternalLayout()),
|
||||
totalText: computed(() => api.computedTotalText()),
|
||||
internalPageCount: computed(() => api.computedInternalPageCount()),
|
||||
showJumperSufix: designConfig?.state?.showJumperSufix ?? true,
|
||||
showJumperSuffix: designConfig?.state?.showJumperSuffix ?? true,
|
||||
align: props.align || designConfig?.state?.align || 'left',
|
||||
totalI18n: designConfig?.state?.totalI18n || 'totals',
|
||||
totalFixedLeft: computed(
|
||||
|
|
|
@ -52,7 +52,7 @@ export interface IPagerState {
|
|||
internalLayout: string[]
|
||||
totalText: string
|
||||
internalPageCount: number | null
|
||||
showJumperSufix: boolean
|
||||
showJumperSuffix: boolean
|
||||
align: 'left' | 'center' | 'right'
|
||||
totalI18n: 'total' | 'totals'
|
||||
totalFixedLeft: boolean
|
||||
|
|
|
@ -45,6 +45,10 @@
|
|||
line-height: var(--ti-pager-total-line-height);
|
||||
font-size: var(--ti-pager-total-font-size);
|
||||
color: var(--ti-pager-normal-text-color);
|
||||
|
||||
&-num {
|
||||
font-family: var(--ti-pager-number-font-family);
|
||||
}
|
||||
}
|
||||
|
||||
& &__total-allpage {
|
||||
|
@ -59,6 +63,7 @@
|
|||
& &__pages {
|
||||
display: inline-flex;
|
||||
font-size: var(--ti-pager-font-size);
|
||||
font-family: var(--ti-pager-number-font-family);
|
||||
|
||||
li {
|
||||
background: transparent;
|
||||
|
@ -296,7 +301,8 @@
|
|||
|
||||
&.@{popover-prefix-cls}.@{popper-prefix-cls} {
|
||||
min-width: var(--ti-pager-sizes-input-min-width);
|
||||
padding: 0;
|
||||
border: 0;
|
||||
padding: 8px 0;
|
||||
border-radius: var(--ti-pager-pop-body-border-radius);
|
||||
|
||||
&[x-placement^='bottom'] {
|
||||
|
@ -317,13 +323,12 @@
|
|||
&-poplist {
|
||||
.list-item {
|
||||
min-height: var(--ti-pager-poplist-item-min-height);
|
||||
padding: 0 8px;
|
||||
padding: 0 16px;
|
||||
line-height: var(--ti-pager-poplist-item-min-height);
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
text-align: center;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
|
@ -346,7 +351,12 @@
|
|||
|
||||
&.is-selected {
|
||||
color: var(--ti-pager-poplist-item-selected-text-color);
|
||||
background: var(--ti-pager-poplist-item-selected-bg-color);
|
||||
background: transparent;
|
||||
font-weight: bold;
|
||||
|
||||
&:hover {
|
||||
background: var(--ti-pager-poplist-item-selected-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -435,6 +445,7 @@
|
|||
|
||||
.sizes {
|
||||
margin-right: var(--ti-pager-sizes-num-margin-right);
|
||||
font-family: var(--ti-pager-number-font-family);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -536,14 +547,8 @@
|
|||
.component-css-vars-pager();
|
||||
|
||||
.tiny-option-label {
|
||||
text-align: center;
|
||||
font-family: var(--ti-pager-number-font-family);
|
||||
}
|
||||
|
||||
.tiny-option.selected {
|
||||
color: var(--ti-pager-poplist-item-selected-text-color);
|
||||
background: var(--ti-pager-poplist-item-selected-bg-color);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -95,7 +95,7 @@
|
|||
// 分页下拉框选中项默认背景色
|
||||
--ti-pager-poplist-item-selected-bg-color: #f5f5f5;
|
||||
// 分页下拉框项选中字体颜色
|
||||
--ti-pager-poplist-item-selected-text-color: var(--ti-common-color-selected-text-color, #fff);
|
||||
--ti-pager-poplist-item-selected-text-color: var(--ti-common-color-text-highlight);
|
||||
// 分页页码项默认悬浮边框色
|
||||
--ti-pager-poplist-item-hover-border-color: var(--ti-common-color-transparent, transparent);
|
||||
// 分页下拉框圆角
|
||||
|
@ -166,4 +166,6 @@
|
|||
--ti-pager-sizes-num-margin-right: var(--ti-common-dropdown-gap);
|
||||
// 页码悬浮文本色
|
||||
--ti-pager-list-item-hover-text-color: var(--ti-common-color-text-primary, #252b3a);
|
||||
// 分页数字字体
|
||||
--ti-pager-number-font-family: arial, helvetica, sans-serif;
|
||||
}
|
||||
|
|
|
@ -43,7 +43,7 @@
|
|||
@input="handleJumperInput"
|
||||
@change="handleJumperChange"
|
||||
/>
|
||||
<span v-if="state.showJumperSufix" class="tiny-pager__goto-text tiny-pager__goto-text-sufix">{{
|
||||
<span v-if="state.showJumperSuffix" class="tiny-pager__goto-text tiny-pager__goto-text-sufix">{{
|
||||
t('ui.page.pageClassifier')
|
||||
}}</span>
|
||||
</div>
|
||||
|
@ -160,7 +160,9 @@
|
|||
</template>
|
||||
<template v-else>
|
||||
<span>{{ t('ui.page.totals') }}</span>
|
||||
<span> {{ customTotal ? state.totalText : state.internalTotal }} </span>
|
||||
<span :class="{ 'tiny-pager__total-num': !customTotal }">
|
||||
{{ customTotal ? state.totalText : state.internalTotal }}
|
||||
</span>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
|
|
Loading…
Reference in New Issue