mirror/ant-design
1
0
Fork 0
mirror of https://github.com/ant-design/ant-design.git synced 2025-06-10 19:19:20 +08:00
Code Issues Actions 31 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>, </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 First-content
</div>, </div>,
<div <div
class="steps-action" style="margin-top:24px"
> >
<button <button
class="ant-btn ant-btn-primary" 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>, </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 First-content
</div>, </div>,
<div <div
class="steps-action" style="margin-top:24px"
> >
<button <button
class="ant-btn ant-btn-primary" class="ant-btn ant-btn-primary"

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

@ -5,29 +5,3 @@
## en-US ## en-US
Cooperate with the content and buttons, to represent the progress of a process. 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 React, { useState } from 'react';
import { Button, message, Steps } from 'antd'; import { Button, message, Steps, theme } from 'antd';
const steps = [ const steps = [
{ {
@ -17,6 +17,7 @@ const steps = [
]; ];
const App: React.FC = () => { const App: React.FC = () => {
const { token } = theme.useToken();
const [current, setCurrent] = useState(0); const [current, setCurrent] = useState(0);
const next = () => { const next = () => {
@ -26,13 +27,24 @@ const App: React.FC = () => {
const prev = () => { const prev = () => {
setCurrent(current - 1); setCurrent(current - 1);
}; };
const items = steps.map((item) => ({ key: item.title, title: item.title })); 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 ( return (
<> <>
<Steps current={current} items={items} /> <Steps current={current} items={items} />
<div className="steps-content">{steps[current].content}</div> <div style={contentStyle}>{steps[current].content}</div>
<div className="steps-action"> <div style={{ marginTop: 24 }}>
{current < steps.length - 1 && ( {current < steps.length - 1 && (
<Button type="primary" onClick={() => next()}> <Button type="primary" onClick={() => next()}>
Next Next