Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitf3be8fa

Browse files
author
FalkWolsky
committed
Adding Features to Tabbed Container
1 parent293733c commitf3be8fa

File tree

4 files changed

+48
-41
lines changed

4 files changed

+48
-41
lines changed

‎client/packages/lowcoder/src/comps/comps/pageLayoutComp/pageLayout.tsx‎

Lines changed: 0 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -440,10 +440,3 @@ export function PageLayout(props: LayoutProps & { siderCollapsed: boolean; setSi
440440
</div>
441441
);
442442
}
443-
444-
/*
445-
background-color: ${contrastBackground(container.siderStyle.siderBackground)};
446-
> .anticon {
447-
color: ${contrastText(container.siderStyle.siderBackground, "black", "white")} !important;
448-
}
449-
*/

‎client/packages/lowcoder/src/comps/comps/tabs/tabbedContainerComp.tsx‎

Lines changed: 38 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,8 @@ import { EditorContext } from "comps/editorState";
3434
import{checkIsMobile}from"util/commonUtils";
3535
import{messageInstance}from"lowcoder-design";
3636
import{BoolControl}from"comps/controls/boolControl";
37+
import{PositionControl}from"comps/controls/dropdownControl";
38+
import{NumberControl,StringControl}from"@lowcoder-ee/index.sdk";
3739

3840
constEVENT_OPTIONS=[
3941
{
@@ -52,12 +54,15 @@ const childrenMap = {
5254
}),
5355
autoHeight:AutoHeightControl,
5456
scrollbars:withDefault(BoolControl,false),
57+
placement:withDefault(PositionControl,"top"),
5558
onEvent:eventHandlerControl(EVENT_OPTIONS),
5659
disabled:BoolCodeControl,
5760
showHeader:withDefault(BoolControl,true),
5861
style:styleControl(TabContainerStyle),
5962
headerStyle:styleControl(ContainerHeaderStyle),
6063
bodyStyle:styleControl(ContainerBodyStyle),
64+
tabsGutter:withDefault(NumberControl,32),
65+
tabsCentered:withDefault(BoolControl,false),
6166
};
6267

6368
typeViewProps=RecordConstructorToView<typeofchildrenMap>;
@@ -114,6 +119,7 @@ const getStyle = (
114119
}
115120
116121
.ant-tabs-tab-btn {
122+
font-size:${style.textSize};
117123
font-family:${style.fontFamily};
118124
font-weight:${style.textWeight};
119125
text-transform:${style.textTransform};
@@ -177,7 +183,7 @@ const StyledTabs = styled(Tabs)<{
177183

178184
constContainerInTab=(props:ContainerBaseProps)=>{
179185
return(
180-
<InnerGrid{...props}emptyRows={15}bgColor={"white"}hintPlaceholder={HintPlaceHolder}/>
186+
<InnerGrid{...props}emptyRows={15}hintPlaceholder={HintPlaceHolder}/>
181187
);
182188
};
183189

@@ -254,28 +260,33 @@ const TabbedContainer = (props: TabbedContainerProps) => {
254260
})
255261

256262
return(
257-
<divstyle={{padding:props.style.margin,height:'100%'}}>
258-
<StyledTabs
259-
// FALK: TODO tabPosition="right"
260-
activeKey={activeKey}
261-
$style={style}
262-
$headerStyle={headerStyle}
263-
$bodyStyle={bodyStyle}
264-
$showHeader={showHeader}
265-
onChange={(key)=>{
266-
if(key!==props.selectedTabKey.value){
267-
props.selectedTabKey.onChange(key);
268-
props.onEvent("change");
269-
}
270-
}}
271-
onTabClick={onTabClick}
272-
animated
273-
$isMobile={isMobile}
274-
// tabBarGutter={32}
275-
items={tabItems}
276-
>
277-
</StyledTabs>
278-
</div>
263+
<ScrollBarstyle={{height:props.autoHeight ?"100%" :"auto",margin:"0px",padding:"0px"}}hideScrollbar={!props.scrollbars}>
264+
<divstyle={{padding:props.style.margin,height:props.autoHeight ?"100%" :"auto"}}>
265+
<BackgroundColorContext.Providervalue={headerStyle.headerBackground}>
266+
<StyledTabs
267+
tabPosition={props.placement}
268+
activeKey={activeKey}
269+
$style={style}
270+
$headerStyle={headerStyle}
271+
$bodyStyle={bodyStyle}
272+
$showHeader={showHeader}
273+
onChange={(key)=>{
274+
if(key!==props.selectedTabKey.value){
275+
props.selectedTabKey.onChange(key);
276+
props.onEvent("change");
277+
}
278+
}}
279+
onTabClick={onTabClick}
280+
animated
281+
$isMobile={isMobile}
282+
items={tabItems}
283+
tabBarGutter={props.tabsGutter}
284+
centered={props.tabsCentered}
285+
>
286+
</StyledTabs>
287+
</BackgroundColorContext.Provider>
288+
</div>
289+
</ScrollBar>
279290
);
280291
};
281292

@@ -303,14 +314,17 @@ export const TabbedContainerBaseComp = (function () {
303314
<Sectionname={sectionNames.interaction}>
304315
{children.onEvent.getPropertyView()}
305316
{disabledPropertyView(children)}
306-
{children.showHeader.propertyView({label:trans("prop.showHeader")})}
317+
{children.showHeader.propertyView({label:trans("tabbedContainer.showTabs")})}
307318
{hiddenPropertyView(children)}
308319
</Section>
309320
)}
310321

311322
{["layout","both"].includes(useContext(EditorContext).editorModeStatus)&&(
312323
<>
313324
<Sectionname={sectionNames.layout}>
325+
{children.placement.propertyView({label:trans("tabbedContainer.placement"),radioButton:true})}
326+
{children.tabsCentered.propertyView({label:trans("tabbedContainer.tabsCentered")})}
327+
{children.tabsGutter.propertyView({label:trans("tabbedContainer.gutter"),tooltip :trans("tabbedContainer.gutterTooltip")})}
314328
{children.autoHeight.getPropertyView()}
315329
{!children.autoHeight.getView()&&(
316330
children.scrollbars.propertyView({

‎client/packages/lowcoder/src/comps/controls/styleControlConstants.tsx‎

Lines changed: 3 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -864,16 +864,10 @@ export const TabContainerStyle = [
864864
name:"tabText",
865865
label:trans("style.tabText"),
866866
depName:"headerBackground",
867-
depType:DEP_TYPE.CONTRAST_TEXT,
868-
transformer:contrastText,
869-
},]),
870-
{
871-
name:"accent",
872-
label:trans("style.tabAccent"),
873-
depTheme:"primary",
874-
depType:DEP_TYPE.SELF,
867+
depType:TEXT,
875868
transformer:toSelf,
876-
},
869+
},]),
870+
ACCENT
877871
]asconst;
878872

879873
exportconstModalStyle=[

‎client/packages/lowcoder/src/i18n/locales/en.ts‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1684,13 +1684,19 @@ export const en = {
16841684
"orgName":"Workspace Name"
16851685
},
16861686
"freeLimit":"Free Trial",
1687+
16871688
"tabbedContainer":{
16881689
"switchTab":"Switch Tab",
16891690
"switchTabDesc":"Triggered When Switching Tabs",
16901691
"tab":"Tabs",
16911692
"atLeastOneTabError":"The Tab Container Keeps at Least One Tab",
16921693
"selectedTabKeyDesc":"Currently Selected Tab",
1693-
"iconPosition":"Icon Position"
1694+
"iconPosition":"Icon Position",
1695+
"placement" :"Tabs Placement",
1696+
"showTabs":"Show Tabs",
1697+
"gutter" :"Gap",
1698+
"gutterTooltip" :"The distance between tabs in px",
1699+
"tabsCentered" :"Centered Tabs",
16941700
},
16951701
"formComp":{
16961702
"containerPlaceholder":"Drag Components from the Right Pane or",

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp