source/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2026-02-09 02:49:18 +08:00
Code Issues Packages Projects Releases Wiki Activity

chore(slider): improve demo styles (#55632)

Browse Source
This commit is contained in:
遇见同学
2025-11-06 18:45:59 +08:00
committed by GitHub
parent d9ee03f9cf
commit 930c25858e
3 changed files with 22 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
components/slider/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@@ -1669,7 +1669,7 @@ exports[`renders components/slider/demo/style-class.tsx extend context correctly
</div>
</div>
<div
class="ant-slider acss-1pw5qi4 css-var-test-id ant-slider-vertical"
class="ant-slider acss-14altik css-var-test-id ant-slider-vertical"
style="height: 300px;"
>
<div
@@ -1689,7 +1689,7 @@ exports[`renders components/slider/demo/style-class.tsx extend context correctly
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="30"
class="ant-slider-handle acss-1mqvsgv"
class="ant-slider-handle acss-10vy2hp"
role="slider"
style="top: 30%; transform: translateY(-50%); border-color: rgb(114, 46, 209); box-shadow: 0 2px 8px #722ed1;"
tabindex="0"

4
components/slider/__tests__/__snapshots__/demo.test.ts.snap
View File

@@ -1338,7 +1338,7 @@ exports[`renders components/slider/demo/style-class.tsx correctly 1`] = `
/>
</div>
<div
class="ant-slider acss-1pw5qi4 css-var-test-id ant-slider-vertical"
class="ant-slider acss-14altik css-var-test-id ant-slider-vertical"
style="height:300px"
>
<div
@@ -1358,7 +1358,7 @@ exports[`renders components/slider/demo/style-class.tsx correctly 1`] = `
aria-valuemax="100"
aria-valuemin="0"
aria-valuenow="30"
class="ant-slider-handle acss-1mqvsgv"
class="ant-slider-handle acss-10vy2hp"
role="slider"
style="top:30%;transform:translateY(-50%);border-color:#722ed1;box-shadow:0 2px 8px #722ed1"
tabindex="0"

24
components/slider/demo/style-class.tsx
View File

@@ -3,12 +3,24 @@ import { Flex, Slider } from 'antd';
import type { SliderSingleProps } from 'antd';
import { createStyles } from 'antd-style';
const useStyles = createStyles(({ css, cssVar }) => ({
const useStyles = createStyles(({ css }) => ({
root: css`
width: 300px;
`,
}));
const useStylesFn = createStyles(({ css, cssVar }) => ({
root: css`
width: 100px;
&:hover .ant-slider-handle:after {
box-shadow: 0 0 0 ${cssVar.lineWidthBold} #722ed1;
}
`,
handle: css`
&::after {
&.ant-slider-handle:hover::after,
&.ant-slider-handle:active::after,
&.ant-slider-handle:focus::after,
&.ant-slider-handle::after {
box-shadow: 0 0 0 ${cssVar.lineWidthBold} #722ed1;
}
`,
@@ -31,17 +43,17 @@ const stylesFn: SliderSingleProps['styles'] = (info) => {
};
const App: React.FC = () => {
const { styles } = useStyles();
const { styles: classNames } = useStyles();
const { styles: classNameFn } = useStylesFn();
const sharedProps: SliderSingleProps = {
classNames: { root: styles.root },
defaultValue: 30,
};
return (
<Flex vertical gap="middle">
<Slider {...sharedProps} styles={stylesObject} />
<Slider {...sharedProps} classNames={classNames} styles={stylesObject} />
<Slider
{...sharedProps}
classNames={{ root: styles.root, handle: styles.handle }}
classNames={classNameFn}
orientation="vertical"
reverse
styles={stylesFn}