mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2024-11-24 02:59:58 +08:00
Code Issues Actions 5 Packages Projects Releases Wiki Activity

chore: step-next demo supports dark mode (#40014)

Browse Source 
* chore: step-next demo supports dark mode

* test: update snapshot
This commit is contained in:
JarvisArt 2023-01-04 23:57:05 +08:00 committed by GitHub
parent 18b91f38c5
commit c74b93b2df
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -4597,12 +4597,12 @@ Array [
</div>
</div>,
<div
class="steps-content"
style="line-height:260px;text-align:center;color:rgba(0, 0, 0, 0.45);background-color:rgba(0, 0, 0, 0.02);border-radius:8px;border:1px dashed #d9d9d9;margin-top:16px"
>
First-content
</div>,
<div
class="steps-action"
style="margin-top:24px"
>
<button
class="ant-btn ant-btn-primary"

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

@ -4165,12 +4165,12 @@ Array [
</div>
</div>,
<div
class="steps-content"
style="line-height:260px;text-align:center;color:rgba(0, 0, 0, 0.45);background-color:rgba(0, 0, 0, 0.02);border-radius:8px;border:1px dashed #d9d9d9;margin-top:16px"
>
First-content
</div>,
<div
class="steps-action"
style="margin-top:24px"
>
<button
class="ant-btn ant-btn-primary"

26
components/steps/demo/step-next.md
View File

@ -5,29 +5,3 @@
## en-US
Cooperate with the content and buttons, to represent the progress of a process.
```css
.steps-content {
min-height: 200px;
margin-top: 16px;
padding-top: 80px;
text-align: center;
background-color: #fafafa;
border: 1px dashed #e9e9e9;
border-radius: 2px;
}
.steps-action {
margin-top: 24px;
}
```
<style>
[data-theme="dark"] .steps-content {
margin-top: 16px;
border: 1px dashed #303030;
background-color: rgba(255,255,255,0.04);
color: rgba(255,255,255,0.65);
padding-top: 80px;
}
</style>

18
components/steps/demo/step-next.tsx
View File

@ -1,5 +1,5 @@
import React, { useState } from 'react';
import { Button, message, Steps } from 'antd';
import { Button, message, Steps, theme } from 'antd';
const steps = [
{
@ -17,6 +17,7 @@ const steps = [
];
const App: React.FC = () => {
const { token } = theme.useToken();
const [current, setCurrent] = useState(0);
const next = () => {
@ -26,13 +27,24 @@ const App: React.FC = () => {
const prev = () => {
setCurrent(current - 1);
};
const items = steps.map((item) => ({ key: item.title, title: item.title }));
const contentStyle: React.CSSProperties = {
lineHeight: '260px',
textAlign: 'center',
color: token.colorTextTertiary,
backgroundColor: token.colorFillAlter,
borderRadius: token.borderRadiusLG,
border: `1px dashed ${token.colorBorder}`,
marginTop: 16,
};
return (
<>
<Steps current={current} items={items} />
<div className="steps-content">{steps[current].content}</div>
<div className="steps-action">
<div style={contentStyle}>{steps[current].content}</div>
<div style={{ marginTop: 24 }}>
{current < steps.length - 1 && (
<Button type="primary" onClick={() => next()}>
Next