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

Add properties and CSS controls to components#686

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to ourterms of service andprivacy statement. We’ll occasionally send you account related emails.

Already on GitHub?Sign in to your account

Merged
Show file tree
Hide file tree
Changes fromall commits
Commits
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -22,6 +22,7 @@ export function getButtonStyle(buttonStyle: ButtonStyleType) {
font-size: ${buttonStyle.textSize};
font-weight: ${buttonStyle.textWeight};
font-family: ${buttonStyle.fontFamily};
font-style: ${buttonStyle.fontStyle};
background-color: ${buttonStyle.background};
border-radius: ${buttonStyle.radius};
margin: ${buttonStyle.margin};
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -42,6 +42,11 @@ const LeftButtonWrapper = styled.div<{ $buttonStyle: ButtonStyleType }>`
margin: 0 !important;
${(props) => `border-radius: ${props.$buttonStyle.radius} 0 0 ${props.$buttonStyle.radius};`}
}
${(props) => `background-color: ${props.$buttonStyle.background};`}
${(props) => `color: ${props.$buttonStyle.text};`}
${(props) => `padding: ${props.$buttonStyle.padding};`}
${(props) => `font-size: ${props.$buttonStyle.textSize};`}
${(props) => `font-style: ${props.$buttonStyle.fontStyle};`}
width: 100%;
}
`;
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -29,6 +29,10 @@ const Link = styled(Button)<{ $style: LinkStyleType }>`
margin: ${props.$style.margin};
padding: ${props.$style.padding};
font-size: ${props.$style.textSize};
font-style:${props.$style.fontStyle};
font-family:${props.$style.fontFamily};
border: ${props.$style.borderWidth} solid ${props.$style.border};
background-color: ${props.$style.background};
&:hover {
color: ${props.$style.hoverText} !important;
}
Expand Down
15 changes: 8 additions & 7 deletionsclient/packages/lowcoder/src/comps/comps/dividerComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -21,7 +21,7 @@ type IProps = DividerProps & { $style: DividerStyleType; dashed: boolean };
// TODO: find out how to set border style when text is active
// TODO: enable type "vertical" https://ant.design/components/divider

const StyledDivider = styled(Divider)<IProps>`
const StyledDivider = styled(Divider)<IProps>`
margin-top: 3.5px;
.ant-divider-inner-text {
height: 32px;
Expand All@@ -30,16 +30,17 @@ const StyledDivider = styled(Divider)<IProps>`
font-size: ${(props) => props.$style.textSize};
font-weight: ${(props) => props.$style.textWeight};
font-family: ${(props) => props.$style.fontFamily};
font-style:${(props) => props.$style.fontStyle}
}
min-width: 0;
width: ${(props) => {
return widthCalculator(props.$style.margin);
width: ${(props) => {
return widthCalculator(props.$style.margin);
}};
min-height: ${(props) => {
return heightCalculator(props.$style.margin);
min-height: ${(props) => {
return heightCalculator(props.$style.margin);
}};
margin: ${(props) => {
return props.$style.margin;
margin: ${(props) => {
return props.$style.margin;
}};
padding: ${(props) => props.$style.padding};

Expand Down
31 changes: 24 additions & 7 deletionsclient/packages/lowcoder/src/comps/comps/navComp/navComp.tsx
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -23,17 +23,18 @@ type IProps = {
$justify: boolean;
$bgColor: string;
$borderColor: string;
$borderWidth: string;
};

const Wrapper = styled("div")<Pick<IProps, "$bgColor" | "$borderColor">>`
const Wrapper = styled("div")<Pick<IProps, "$bgColor" | "$borderColor" | "$borderWidth">>`
height: 100%;
border-radius: 2px;
box-sizing: border-box;
border: 1px solid ${(props) => props.$borderColor};
border:${(props) => props.$borderWidth ? `${props.$borderWidth}` : '1px'} solid ${(props) => props.$borderColor};
background-color: ${(props) => props.$bgColor};
`;

const NavInner = styled("div")<Pick<IProps, "$justify">>`
const NavInner = styled("div")<Pick<IProps, "$justify">>`
margin: 0 -16px;
height: 100%;
display: flex;
Expand All@@ -44,12 +45,20 @@ const Item = styled.div<{
$active: boolean;
$activeColor: string;
$color: string;
$fontFamily: string;
$fontStyle: string;
$textWeight: string;
$textSize: string;
}>`
height: 30px;
line-height: 30px;
padding: 0 16px;
color: ${(props) => (props.$active ? props.$activeColor : props.$color)};
font-weight: 500;
font-weight: ${(props) => (props.$textWeight ? props.$textWeight : 500)};
font-family:${(props) => (props.$fontFamily ? props.$fontFamily : 'sans-serif')};
font-style:${(props) => (props.$fontStyle ? props.$fontStyle : 'normal')};
font-size:${(props) => (props.$textSize ? props.$textSize : '14px')}


&:hover {
color: ${(props) => props.$activeColor};
Expand DownExpand Up@@ -79,7 +88,7 @@ const ItemList = styled.div<{ $align: string }>`
justify-content: ${(props) => props.$align};
`;

const StyledMenu = styled(Menu)<MenuProps>`
const StyledMenu = styled(Menu)<MenuProps>`
&.ant-dropdown-menu {
min-width: 160px;
}
Expand DownExpand Up@@ -144,6 +153,10 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
$active={active || subMenuSelectedKeys.length > 0}
$color={props.style.text}
$activeColor={props.style.accent}
$fontFamily={props.style.fontFamily}
$fontStyle={props.style.fontStyle}
$textWeight={props.style.textWeight}
$textSize={props.style.textSize}
onClick={() => onEvent("click")}
>
{label}
Expand DownExpand Up@@ -178,7 +191,11 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
const justify = props.horizontalAlignment === "justify";

return (
<Wrapper $borderColor={props.style.border} $bgColor={props.style.background}>
<Wrapper
$borderColor={props.style.border}
$bgColor={props.style.background}
$borderWidth={props.style.borderWidth}
>
<NavInner $justify={justify}>
{props.logoUrl && (
<LogoWrapper onClick={() => props.logoEvent("click")}>
Expand DownExpand Up@@ -220,7 +237,7 @@ const NavCompBase = new UICompBuilder(childrenMap, (props) => {
</Section>
)}

{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
{(useContext(EditorContext).editorModeStatus === "layout" || useContext(EditorContext).editorModeStatus === "both") && (
<Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section>
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -101,7 +101,7 @@ let MentionTmpComp = (function () {
const [activationFlag, setActivationFlag] = useState(false);
const [prefix, setPrefix] = useState<PrefixType>("@");
type PrefixType = "@" | keyof typeof mentionList;

const onSearch = (_: string, newPrefix: PrefixType) => {
setPrefix(newPrefix);
};
Expand DownExpand Up@@ -192,7 +192,7 @@ let MentionTmpComp = (function () {
label: value,
}))}
autoSize={props.autoHeight}
style={{ height: "100%", maxHeight: "100%", resize: "none", padding: props.style.padding }}
style={{ height: "100%", maxHeight: "100%", resize: "none", padding: props.style.padding, fontStyle: props.style.fontStyle, fontFamily: props.style.fontFamily, borderWidth: props.style.borderWidth, fontWeight: props.style.textWeight }}
readOnly={props.readOnly}
/>
</ConfigProvider>
Expand DownExpand Up@@ -222,12 +222,12 @@ let MentionTmpComp = (function () {
)}

{["logic", "both"].includes(useContext(EditorContext).editorModeStatus) && (
<><Section name={sectionNames.interaction}>
<><Section name={sectionNames.interaction}>
{children.onEvent.getPropertyView()}
{disabledPropertyView(children)}
</Section>
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
<Section name={sectionNames.advanced}>
<Section name={sectionNames.layout}>{hiddenPropertyView(children)}</Section>
<Section name={sectionNames.advanced}>
{readOnlyPropertyView(children)}
</Section><Section name={sectionNames.validation}>
{requiredPropertyView(children)}
Expand All@@ -241,9 +241,9 @@ let MentionTmpComp = (function () {
)}

{["layout", "both"].includes(useContext(EditorContext).editorModeStatus) && (
<><Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section></>
<><Section name={sectionNames.style}>
{children.style.getPropertyView()}
</Section></>
)}
</>
))
Expand Down
View file
Open in desktop
Original file line numberDiff line numberDiff line change
Expand Up@@ -455,6 +455,7 @@ export const ButtonStyle = [
TEXT_SIZE,
TEXT_WEIGHT,
FONT_FAMILY,
FONT_STYLE,
MARGIN,
PADDING
] as const;
Expand All@@ -474,6 +475,7 @@ export const ToggleButtonStyle = [
TEXT_SIZE,
TEXT_WEIGHT,
FONT_FAMILY,
FONT_STYLE,
MARGIN,
PADDING,
] as const;
Expand DownExpand Up@@ -1045,8 +1047,19 @@ function handleToHoverLink(color: string) {

export const LinkStyle = [
...LinkTextStyle,
{
name: "background",
label: trans("style.background"),
depTheme: "canvas",
depType: DEP_TYPE.SELF,
transformer: toSelf,
},
MARGIN,
PADDING,
FONT_FAMILY,
FONT_STYLE,
BORDER,
BORDER_WIDTH,
TEXT_SIZE
] as const;

Expand All@@ -1067,7 +1080,8 @@ export const DividerStyle = [
},
TEXT_SIZE,
TEXT_WEIGHT,
FONT_FAMILY
FONT_FAMILY,
FONT_STYLE
] as const;

export const ProgressStyle = [
Expand DownExpand Up@@ -1098,6 +1112,11 @@ export const NavigationStyle = [
getStaticBorder("#FFFFFF00"),
MARGIN,
PADDING,
FONT_FAMILY,
FONT_STYLE,
TEXT_WEIGHT,
TEXT_SIZE,
BORDER_WIDTH
] as const;

export const ImageStyle = [getStaticBorder("#00000000"), RADIUS, BORDER_WIDTH, MARGIN, PADDING] as const;
Expand Down
[8]ページ先頭
©2009-2025 Movatter.jp