combo 的tabs 模式,样式调整

This commit is contained in:
2betop 2020-05-11 14:16:54 +08:00
parent 29ad54e2ab
commit 9d2c702944
3 changed files with 15 additions and 5 deletions

View File

@ -4,6 +4,7 @@
padding-left: 0; padding-left: 0;
margin-bottom: 0; margin-bottom: 0;
list-style: none; list-style: none;
user-select: none;
&::before { &::before {
display: table; display: table;
@ -264,8 +265,8 @@
} }
&-toolbar { &-toolbar {
display: inline-block; display: inline-block;
float: right; float: right;
padding-top: $gap-xs; padding-top: $gap-xs;
} }
} }

View File

@ -237,6 +237,14 @@
} }
} }
.#{$ns}ComboTabs > .#{$ns}Tabs-links {
@include clearfix();
}
.#{$ns}ComboTabs-addLink {
float: right;
}
.#{$ns}Combo-dragableTip { .#{$ns}Combo-dragableTip {
color: $text--muted-color; color: $text--muted-color;
font-size: $fontSizeSm; font-size: $fontSizeSm;

View File

@ -694,12 +694,13 @@ export default class ComboControl extends React.Component<ComboProps> {
return ( return (
<CTabs <CTabs
className={"ComboTabs"}
mode={tabsStyle} mode={tabsStyle}
activeKey={store.activeKey} activeKey={store.activeKey}
onSelect={this.handleTabSelect} onSelect={this.handleTabSelect}
additionBtns={ additionBtns={
!disabled ? ( !disabled ? (
<li className={cx(`Tabs-link`)}> <li className={cx(`Tabs-link ComboTabs-addLink`)}>
{store.addable && addable !== false ? ( {store.addable && addable !== false ? (
Array.isArray(conditions) && conditions.length ? ( Array.isArray(conditions) && conditions.length ? (
render( render(
@ -723,7 +724,7 @@ export default class ComboControl extends React.Component<ComboProps> {
} }
) )
) : ( ) : (
<a onClick={this.addItem} data-tooltip="新增一条数据"> <a onClick={this.addItem} data-position="left" data-tooltip="新增一条数据">
{addIcon ? <i className={cx('m-r-xs', addIcon)} /> : null} {addIcon ? <i className={cx('m-r-xs', addIcon)} /> : null}
<span>{addButtonText || '新增'}</span> <span>{addButtonText || '新增'}</span>
</a> </a>