style: example code title
This commit is contained in:
@@ -12,6 +12,7 @@ interface ThemeType {
|
|||||||
interface SegmentLineProps extends SegmentedProps {
|
interface SegmentLineProps extends SegmentedProps {
|
||||||
height?: number;
|
height?: number;
|
||||||
theme?: 'dark' | 'light';
|
theme?: 'dark' | 'light';
|
||||||
|
showTitle?: boolean;
|
||||||
}
|
}
|
||||||
|
|
||||||
const darkTheme: ThemeType = {
|
const darkTheme: ThemeType = {
|
||||||
@@ -30,7 +31,10 @@ const lightTheme: ThemeType = {
|
|||||||
fontWeight: 500
|
fontWeight: 500
|
||||||
};
|
};
|
||||||
|
|
||||||
const SegmentedQwrapper = styled.div<{ $height: number; $theme: ThemeType }>`
|
const SegmentedQwrapper = styled.div<{
|
||||||
|
$height: number;
|
||||||
|
$theme: ThemeType;
|
||||||
|
}>`
|
||||||
.ant-segmented.segment-line {
|
.ant-segmented.segment-line {
|
||||||
padding: 0;
|
padding: 0;
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
@@ -76,6 +80,7 @@ const SegmentedQwrapper = styled.div<{ $height: number; $theme: ThemeType }>`
|
|||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.ant-segmented-item-selected {
|
.ant-segmented-item-selected {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
box-shadow: none;
|
box-shadow: none;
|
||||||
@@ -86,6 +91,11 @@ const SegmentedQwrapper = styled.div<{ $height: number; $theme: ThemeType }>`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
&.with-title .ant-segmented.segment-line {
|
||||||
|
.ant-segmented-item.ant-segmented-item-selected::after {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SegmentLine: React.FC<SegmentLineProps> = (props) => {
|
const SegmentLine: React.FC<SegmentLineProps> = (props) => {
|
||||||
@@ -95,11 +105,13 @@ const SegmentLine: React.FC<SegmentLineProps> = (props) => {
|
|||||||
options = [],
|
options = [],
|
||||||
className = 'segment-line',
|
className = 'segment-line',
|
||||||
theme = 'dark',
|
theme = 'dark',
|
||||||
|
showTitle = false,
|
||||||
...rest
|
...rest
|
||||||
} = props;
|
} = props;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<SegmentedQwrapper
|
<SegmentedQwrapper
|
||||||
|
className={showTitle ? 'with-title' : ''}
|
||||||
$height={height}
|
$height={height}
|
||||||
$theme={theme === 'dark' ? darkTheme : lightTheme}
|
$theme={theme === 'dark' ? darkTheme : lightTheme}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -11,6 +11,7 @@ interface ViewerProps {
|
|||||||
options?: Global.BaseOption<string>[];
|
options?: Global.BaseOption<string>[];
|
||||||
defaultValue?: string;
|
defaultValue?: string;
|
||||||
headerHeight?: number;
|
headerHeight?: number;
|
||||||
|
showTitle?: boolean;
|
||||||
height?: number;
|
height?: number;
|
||||||
lang?: string;
|
lang?: string;
|
||||||
onChange?: (value: string | number) => void;
|
onChange?: (value: string | number) => void;
|
||||||
@@ -33,6 +34,7 @@ const CommandViewer: React.FC<ViewerProps> = (props) => {
|
|||||||
options = [],
|
options = [],
|
||||||
headerHeight = 40,
|
headerHeight = 40,
|
||||||
height = 380,
|
height = 380,
|
||||||
|
showTitle = false,
|
||||||
lang,
|
lang,
|
||||||
onChange
|
onChange
|
||||||
} = props || {};
|
} = props || {};
|
||||||
@@ -54,6 +56,7 @@ const CommandViewer: React.FC<ViewerProps> = (props) => {
|
|||||||
value={value}
|
value={value}
|
||||||
size="small"
|
size="small"
|
||||||
options={options}
|
options={options}
|
||||||
|
showTitle={showTitle}
|
||||||
onChange={handlOnChange}
|
onChange={handlOnChange}
|
||||||
></SegmentLine>
|
></SegmentLine>
|
||||||
|
|
||||||
|
|||||||
@@ -123,6 +123,7 @@ const useGenericProxy = () => {
|
|||||||
|
|
||||||
const GenericProxyCommandCode = (
|
const GenericProxyCommandCode = (
|
||||||
<CommandViewer
|
<CommandViewer
|
||||||
|
showTitle={true}
|
||||||
code={modalStatus.codeValue}
|
code={modalStatus.codeValue}
|
||||||
copyText={modalStatus.codeValue}
|
copyText={modalStatus.codeValue}
|
||||||
options={langOptions}
|
options={langOptions}
|
||||||
|
|||||||
Reference in New Issue
Block a user