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

Commitc063b69

Browse files
updated tabs container styles
1 parente818a27 commitc063b69

File tree

1 file changed

+60
-26
lines changed

1 file changed

+60
-26
lines changed

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

Lines changed: 60 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import { BooleanStateControl, booleanExposingStateControl, stringExposingStateCo
77
import{eventHandlerControl}from"comps/controls/eventHandlerControl";
88
import{TabsOptionControl}from"comps/controls/optionsControl";
99
import{styleControl}from"comps/controls/styleControl";
10-
import{TabContainerStyle,TabContainerStyleType,heightCalculator,widthCalculator}from"comps/controls/styleControlConstants";
10+
import{ContainerBodyStyle,ContainerBodyStyleType,ContainerHeaderStyle,ContainerHeaderStyleType,TabContainerStyle,TabContainerStyleType,heightCalculator,widthCalculator}from"comps/controls/styleControlConstants";
1111
import{sameTypeMap,UICompBuilder,withDefault}from"comps/generators";
1212
import{addMapChildAction}from"comps/generators/sameTypeMap";
1313
import{NameConfig,NameConfigHidden,withExposingConfigs}from"comps/generators/withExposing";
@@ -33,9 +33,6 @@ import { DisabledContext } from "comps/generators/uiCompBuilder";
3333
import{EditorContext}from"comps/editorState";
3434
import{checkIsMobile}from"util/commonUtils";
3535
import{messageInstance}from"lowcoder-design";
36-
import{show}from"antd-mobile/es/components/dialog/show";
37-
import{BoolControl}from"@lowcoder-ee/index.sdk";
38-
import{Switch}from"antd";
3936

4037
constEVENT_OPTIONS=[
4138
{
@@ -57,38 +54,52 @@ const childrenMap = {
5754
disabled:BoolCodeControl,
5855
showHeader:withDefault(BooleanStateControl,"true"),
5956
style:styleControl(TabContainerStyle),
57+
headerStyle:styleControl(ContainerHeaderStyle),
58+
bodyStyle:styleControl(ContainerBodyStyle),
6059
};
6160

6261
typeViewProps=RecordConstructorToView<typeofchildrenMap>;
6362
typeTabbedContainerProps=ViewProps&{dispatch:DispatchType};
6463

65-
constgetStyle=(style:TabContainerStyleType)=>{
64+
constgetStyle=(
65+
style:TabContainerStyleType,
66+
headerStyle:ContainerHeaderStyleType,
67+
bodyStyle:ContainerBodyStyleType,
68+
)=>{
6669
returncss`
6770
&.ant-tabs {
71+
overflow: hidden;
6872
border:${style.borderWidth} solid${style.border};
6973
border-radius:${style.radius};
70-
overflow: hidden;
7174
padding:${style.padding};
75+
background-color:${style.background};
76+
background-image:${style.backgroundImage};
77+
background-repeat:${style.backgroundImageRepeat};
78+
background-size:${style.backgroundImageSize};
79+
background-position:${style.backgroundImagePosition};
80+
background-origin:${style.backgroundImageOrigin};
81+
82+
> .ant-tabs-content-holder> .ant-tabs-content> .ant-tabs-tabpane {
83+
height:100%;
84+
.react-grid-layout {
85+
border-radius:0;
86+
background-color:${bodyStyle.background||'transparent'};
87+
background-image:${bodyStyle.backgroundImage};
88+
background-repeat:${bodyStyle.backgroundImageRepeat};
89+
background-size:${bodyStyle.backgroundImageSize};
90+
background-position:${bodyStyle.backgroundImagePosition};
91+
background-origin:${bodyStyle.backgroundImageOrigin};
7292
73-
> .ant-tabs-content-holder> .ant-tabs-content>div> .react-grid-layout {
74-
background-color:${style.background};
75-
border-radius:0;
76-
77-
background-image:${style.backgroundImage};
78-
background-repeat:${style.backgroundImageRepeat};
79-
background-size:${style.backgroundImageSize};
80-
background-position:${style.backgroundImagePosition};
81-
background-origin:${style.backgroundImageOrigin};
82-
93+
}
8394
}
8495
8596
> .ant-tabs-nav {
86-
background-color:${style.headerBackground};
87-
background-image:${style.headerBackgroundImage};
88-
background-repeat:${style.headerBackgroundImageRepeat};
89-
background-size:${style.headerBackgroundImageSize};
90-
background-position:${style.headerBackgroundImagePosition};
91-
background-origin:${style.headerBackgroundImageOrigin};
97+
background-color:${headerStyle.headerBackground||'transparent'};
98+
background-image:${headerStyle.headerBackgroundImage};
99+
background-repeat:${headerStyle.headerBackgroundImageRepeat};
100+
background-size:${headerStyle.headerBackgroundImageSize};
101+
background-position:${headerStyle.headerBackgroundImagePosition};
102+
background-origin:${headerStyle.headerBackgroundImageOrigin};
92103
93104
.ant-tabs-tab {
94105
div {
@@ -113,7 +124,9 @@ const getStyle = (style: TabContainerStyleType) => {
113124
};
114125

115126
constStyledTabs=styled(Tabs)<{
116-
$style:TabContainerStyleType;
127+
$style:TabContainerStyleType;
128+
$headerStyle:ContainerHeaderStyleType;
129+
$bodyStyle:ContainerBodyStyleType;
117130
$isMobile?:boolean;
118131
$showHeader?:boolean;
119132
}>`
@@ -145,7 +158,11 @@ const StyledTabs = styled(Tabs)<{
145158
margin-right: -24px;
146159
}
147160
148-
${(props)=>props.$style&&getStyle(props.$style)}
161+
${(props)=>props.$style&&getStyle(
162+
props.$style,
163+
props.$headerStyle,
164+
props.$bodyStyle,
165+
)}
149166
`;
150167

151168
constContainerInTab=(props:ContainerBaseProps)=>{
@@ -155,7 +172,14 @@ const ContainerInTab = (props: ContainerBaseProps) => {
155172
};
156173

157174
constTabbedContainer=(props:TabbedContainerProps)=>{
158-
let{ tabs, containers, dispatch, style}=props;
175+
let{
176+
tabs,
177+
containers,
178+
dispatch,
179+
style,
180+
headerStyle,
181+
bodyStyle,
182+
}=props;
159183

160184
constvisibleTabs=tabs.filter((tab)=>!tab.hidden);
161185
constselectedTab=visibleTabs.find((tab)=>tab.key===props.selectedTabKey.value);
@@ -203,7 +227,7 @@ const TabbedContainer = (props: TabbedContainerProps) => {
203227
key:tab.key,
204228
forceRender:true,
205229
children:(
206-
<BackgroundColorContext.Providervalue={props.style.background}>
230+
<BackgroundColorContext.Providervalue={bodyStyle.background}>
207231
<ContainerInTab
208232
layout={containerProps.layout.getView()}
209233
items={gridItemCompToGridItems(containerProps.items.getView())}
@@ -222,6 +246,8 @@ const TabbedContainer = (props: TabbedContainerProps) => {
222246
<StyledTabs
223247
activeKey={activeKey}
224248
$style={style}
249+
$headerStyle={headerStyle}
250+
$bodyStyle={bodyStyle}
225251
$showHeader={showHeader}
226252
onChange={(key)=>{
227253
if(key!==props.selectedTabKey.value){
@@ -277,6 +303,14 @@ export const TabbedContainerBaseComp = (function () {
277303
<Sectionname={sectionNames.style}>
278304
{children.style.getPropertyView()}
279305
</Section>
306+
{children.showHeader.getView()&&(
307+
<Sectionname={"Header Style"}>
308+
{children.headerStyle.getPropertyView()}
309+
</Section>
310+
)}
311+
<Sectionname={"Body Style"}>
312+
{children.bodyStyle.getPropertyView()}
313+
</Section>
280314
</>
281315
)}
282316
</>

0 commit comments

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