단계 표시

단계 표시 (Steps)

복잡한 작업을 여러 단계로 나누어 진행 상황을 명확하게 보여주는 컴포넌트입니다.

출처: 문서

본문

언제 사용하나요 (When To Use)

주어진 작업이 복잡하거나 일련의 하위 작업에서 일정한 순서가 있을 때, 여러 단계로 분해하면 작업을 더 쉽게 만들 수 있습니다.

예제 (Examples)

기본 (Basic)

가장 기본적인 단계 표시줄입니다. variant 속성으로 다른 스타일을, size로 크기를 설정합니다.

import React from 'react';
import { Flex, Steps } from 'antd';

const content = 'This is a content.';
const items = [
  {
    title: 'Finished',
    content,
  },
  {
    title: 'In Progress',
    content,
    subTitle: 'Left 00:00:08',
  },
  {
    title: 'Waiting',
    content,
  },
];

const App: React.FC = () => (
  <Flex vertical gap="large">
    <Steps current={1} items={items} />
    <Steps current={1} items={items} variant="outlined" />
    <Steps current={1} items={items} size="small" />
    <Steps current={1} items={items} size="small" variant="outlined" />
  </Flex>
);

export default App;

오류 상태 (Error status)

Steps의 status를 통해 현재 단계의 상태를 지정할 수 있습니다.

import React from 'react';
import { Steps } from 'antd';

const content = 'This is a content';
const items = [
  {
    title: 'Finished',
    content,
  },
  {
    title: 'In Process',
    content,
  },
  {
    title: 'Waiting',
    content,
  },
];

const App: React.FC = () => <Steps current={1} status="error" items={items} />;

export default App;

세로 (Vertical)

세로 방향의 간단한 단계 표시줄입니다.

import React from 'react';
import { Flex, Steps } from 'antd';

const content = 'This is a content.';

const items = [
  {
    title: 'Finished',
    content,
  },
  {
    title: 'In Progress',
    content,
  },
  {
    title: 'Waiting',
    content,
  },
];

const App: React.FC = () => (
  <Flex>
    <div style={{ flex: 1 }}>
      <Steps orientation="vertical" current={1} items={items} />
    </div>
    <div style={{ flex: 1 }}>
      <Steps orientation="vertical" current={1} items={items} size="small" />
    </div>
  </Flex>
);

export default App;

클릭 가능 (Clickable)

onChange를 설정하면 Steps가 클릭 가능해집니다.

import React, { useState } from 'react';
import { Divider, Steps } from 'antd';

const App: React.FC = () => {
  const [current, setCurrent] = useState(0);

  const onChange = (value: number) => {
    console.log('onChange:', value);
    setCurrent(value);
  };
  const content = 'This is a content.';

  return (
    <>
      <Steps
        current={current}
        onChange={onChange}
        items={[
          {
            title: 'Step 1',
            content,
          },
          {
            title: 'Step 2',
            content,
          },
          {
            title: 'Step 3',
            content,
          },
        ]}
      />

      <Divider />

      <Steps
        current={current}
        onChange={onChange}
        orientation="vertical"
        items={[
          {
            title: 'Step 1',
            content,
          },
          {
            title: 'Step 2',
            content,
          },
          {
            title: 'Step 3',
            content,
          },
        ]}
      />
    </>
  );
};

export default App;

패널 단계 (Panel Steps)

패널 스타일의 단계 표시입니다.

import React, { useState } from 'react';
import { Flex, Steps } from 'antd';
import type { StepsProps } from 'antd';

const App: React.FC = () => {
  const [current, setCurrent] = useState(0);

  const onChange = (value: number) => {
    console.log('onChange:', value);
    setCurrent(value);
  };

  const sharedProps: StepsProps = {
    type: 'panel',
    current,
    onChange,
    items: [
      {
        title: 'Step 1',
        subTitle: '00:00',
        content: 'This is a content.',
      },
      {
        title: 'Step 2',
        content: 'This is a content.',
        status: 'error',
      },
      {
        title: 'Step 3',
        content: 'This is a content.',
      },
    ],
  };

  return (
    <Flex vertical gap="medium">
      <Steps {...sharedProps} />
      <Steps {...sharedProps} size="small" variant="outlined" />
    </Flex>
  );
};

export default App;

아이콘과 함께 (With icon)

items의 icon 속성을 설정해 나만의 커스텀 아이콘을 사용할 수 있습니다.

import React from 'react';
import { LoadingOutlined, SmileOutlined, SolutionOutlined, UserOutlined } from '@ant-design/icons';
import { Steps } from 'antd';

const App: React.FC = () => (
  <Steps
    items={[
      {
        title: 'Login',
        status: 'finish',
        icon: <UserOutlined />,
      },
      {
        title: 'Verification',
        status: 'finish',
        icon: <SolutionOutlined />,
      },
      {
        title: 'Pay',
        status: 'process',
        icon: <LoadingOutlined />,
      },
      {
        title: 'Done',
        status: 'wait',
        icon: <SmileOutlined />,
      },
    ]}
  />
);

export default App;

제목 배치와 진행률 (Title Placement and Progress)

titlePlacement으로 라벨 위치를, percent로 진행률을 표시합니다.

import React from 'react';
import { Steps } from 'antd';

const content = 'This is a content.';
const items = [
  {
    title: 'Finished',
    content,
  },
  {
    title: 'In Progress',
    content,
  },
  {
    title: 'Waiting',
    content,
  },
];
const App: React.FC = () => (
  <>
    <Steps current={1} titlePlacement="vertical" items={items} ellipsis />
    <br />
    <Steps current={1} percent={60} titlePlacement="vertical" items={items} />
    <br />
    <Steps current={1} percent={80} size="small" titlePlacement="vertical" items={items} />
  </>
);

export default App;

최대 개수 (Max Count)

maxCount로 표시할 단계 개수를 제한합니다. 숨겨진 범위는 말줄임표(ellipsis) 단계로 접힙니다.

import React from 'react';
import { LeftOutlined, RightOutlined } from '@ant-design/icons';
import type { InputNumberProps } from 'antd';
import { Button, Flex, InputNumber, Steps, Typography } from 'antd';

const genItems = (count: number) =>
  Array.from({ length: count }, (_, index) => ({ title: `Step ${index + 1}` }));

const getMiddleCurrent = (count: number) => Math.floor((count - 1) / 2);

const App: React.FC = () => {
  const [count, setCount] = React.useState(7);
  const [current, setCurrent] = React.useState(() => getMiddleCurrent(7));
  const items = React.useMemo(() => genItems(count), [count]);

  const handleCountChange: InputNumberProps<number>['onChange'] = (value) => {
    if (value === null) {
      return;
    }

    setCount(value);
    setCurrent(getMiddleCurrent(value));
  };

  const handlePrev = () => {
    setCurrent((prev) => Math.max(prev - 1, 0));
  };

  const handleNext = () => {
    setCurrent((prev) => Math.min(prev + 1, count - 1));
  };

  return (
    <Flex vertical gap="middle">
      <Typography.Title level={5} style={{ margin: 0 }}>
        Number of Steps
      </Typography.Title>

      <Steps current={current} maxCount={5} items={items} />

      <Flex gap="small" align="center" style={{ alignSelf: 'center' }}>
        <Button icon={<LeftOutlined />} onClick={handlePrev} disabled={current <= 0} />
        <InputNumber
          aria-label="Number of Steps"
          mode="spinner"
          min={3}
          max={7}
          value={count}
          onChange={handleCountChange}
          style={{
            width: 120,
          }}
        />
        <Button icon={<RightOutlined />} onClick={handleNext} disabled={current >= count - 1} />
      </Flex>
    </Flex>
  );
};

export default App;

점 스타일 (Dot Style)

진행 점(dot) 스타일의 단계 표시입니다.

import React from 'react';
import { Divider, Flex, Steps } from 'antd';
import type { StepsProps } from 'antd';

const items = [
  {
    title: 'Finished',
    content: 'This is a content.',
  },
  {
    title: 'In Progress',
    content: 'This is a content.',
  },
  {
    title: 'Waiting',
    content: 'This is a content.',
  },
];

const sharedProps: StepsProps = {
  type: 'dot',
  current: 1,
  items,
};

const sharedVerticalProps = {
  ...sharedProps,
  orientation: 'vertical',
  style: {
    flex: 'auto',
  },
} as const;

const App: React.FC = () => (
  <Flex vertical gap="medium">
    <Steps {...sharedProps} />
    <Steps {...sharedProps} variant="outlined" />
    <Divider />
    <Flex gap="medium">
      <Steps {...sharedVerticalProps} />
      <Steps {...sharedVerticalProps} variant="outlined" />
    </Flex>
  </Flex>
);

export default App;

내비게이션 스타일의 단계 표시입니다.

import React, { useState } from 'react';
import { Flex, Steps } from 'antd';

const App: React.FC = () => {
  const [current, setCurrent] = useState(0);

  const onChange = (value: number) => {
    console.log('onChange:', value);
    setCurrent(value);
  };

  return (
    <Flex vertical gap="large">
      <Steps
        type="navigation"
        size="small"
        current={current}
        onChange={onChange}
        items={[
          {
            title: 'Step 1',
            subTitle: '00:00:05',
            status: 'finish',
            content: 'This is a content.',
          },
          {
            title: 'Step 2',
            subTitle: '00:01:02',
            status: 'process',
            content: 'This is a content.',
          },
          {
            title: 'Step 3',
            subTitle: 'waiting for longlong time',
            status: 'wait',
            content: 'This is a content.',
          },
        ]}
      />

      <Steps
        type="navigation"
        current={current}
        onChange={onChange}
        items={[
          {
            status: 'finish',
            title: 'Step 1',
          },
          {
            status: 'process',
            title: 'Step 2',
          },
          {
            status: 'wait',
            title: 'Step 3',
          },
          {
            status: 'wait',
            title: 'Step 4',
          },
        ]}
      />

      <Steps
        type="navigation"
        size="small"
        current={current}
        onChange={onChange}
        items={[
          {
            status: 'finish',
            title: 'finish 1',
          },
          {
            status: 'finish',
            title: 'finish 2',
          },
          {
            status: 'process',
            title: 'current process',
          },
          {
            status: 'wait',
            title: 'wait',
            disabled: true,
          },
        ]}
      />
    </Flex>
  );
};

export default App;

인라인 단계 (Inline Steps)

인라인 타입 단계 표시로, 리스트 콘텐츠 장면에서 객체의 진행 과정과 현재 상태를 보여주기에 적합합니다.

import React from 'react';
import type { StepsProps } from 'antd';
import { Avatar, List, Steps } from 'antd';

const data = [
  {
    title: 'Ant Design Title 1',
    current: 0,
  },
  {
    title: 'Ant Design Title 2',
    current: 1,
    status: 'error',
  },
  {
    title: 'Ant Design Title 3',
    current: 2,
  },
  {
    title: 'Ant Design Title 4',
    current: 1,
  },
];

const items = [
  {
    title: 'Step 1',
    content: 'This is Step 1',
  },
  {
    title: 'Step 2',
    content: 'This is Step 2',
  },
  {
    title: 'Step 3',
    content: 'This is Step 3',
  },
];

const App: React.FC = () => (
  <List
    itemLayout="horizontal"
    dataSource={data}
    renderItem={(item, index) => (
      <List.Item>
        <List.Item.Meta
          avatar={<Avatar src={`https://api.dicebear.com/10.x/lorelei/svg?seed=${index}`} />}
          title={<a href="https://ant.design">{item.title}</a>}
          description="Ant Design, a design language for background applications, is refined by Ant UED Team"
        />
        <Steps
          style={{ marginTop: 8 }}
          type="inline"
          current={item.current}
          status={item.status as StepsProps['status']}
          items={items}
        />
      </List.Item>
    )}
  />
);

export default App;

인라인 스타일 조합 (Inline Style Combination)

인라인 단계 표시줄의 스타일을 수정하고 offset으로 정렬합니다.

import React from 'react';
import type { StepsProps } from 'antd';
import { Flex, Steps, theme } from 'antd';

const items: StepsProps['items'] = Array.from({ length: 5 }, (_, index) => ({
  title: `Step ${index + 1}`,
  subTitle: 'Sub Title',
  content: `This is Step ${index + 1}`,
}));

const App: React.FC = () => {
  const { token } = theme.useToken();

  return (
    <Flex vertical>
      <Steps type="inline" current={1} items={items} />
      <Steps
        type="inline"
        current={4}
        items={items}
        status="finish"
        styles={{
          itemTitle: {
            color: token.colorPrimaryText,
          },
          itemSubtitle: {
            color: token.colorPrimaryTextActive,
          },
          itemRail: {
            background: token.colorTextDisabled,
          },
        }}
      />
      <Steps type="inline" current={1} items={items.slice(2)} offset={2} />
    </Flex>
  );
};

export default App;

커스텀 시맨틱 DOM 스타일링 (Custom semantic dom styling)

classNames와 styles에 객체 또는 함수를 넘겨서 Steps의 시맨틱 DOM 스타일을 커스터마이즈할 수 있습니다.

import React from 'react';
import { Flex, Steps } from 'antd';
import type { GetProp, StepsProps } from 'antd';
import { createStyles } from 'antd-style';

const useStyles = createStyles(({ token }) => ({
  root: {
    border: `2px dashed ${token.colorBorder}`,
    borderRadius: token.borderRadius,
    padding: token.padding,
  },
}));

const stylesObject: StepsProps['styles'] = {
  itemIcon: { borderRadius: '30%' },
  itemContent: { fontStyle: 'italic' },
};

const stylesFn: StepsProps['styles'] = (info): GetProp<StepsProps, 'styles', 'Return'> => {
  if (info.props.type === 'navigation') {
    return {
      root: {
        borderColor: '#1890ff',
      },
    };
  }
  return {};
};

const App: React.FC = () => {
  const { styles } = useStyles();

  const sharedProps: StepsProps = {
    items: [
      { title: 'Finished', content: 'This is a content.' },
      { title: 'In Progress', content: 'This is a content.' },
      { title: 'Waiting', content: 'This is a content.' },
    ],
    current: 1,
    classNames: { root: styles.root },
  };

  return (
    <Flex vertical gap="medium">
      <Steps {...sharedProps} styles={stylesObject} />
      <Steps {...sharedProps} styles={stylesFn} type="navigation" />
    </Flex>
  );
};

export default App;

API

Common props ref：Common props

Steps

단계 표시줄 전체입니다.

Property	Description	Type	Default	Version	Global Config
classNames	Customize class for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, string> \| (info: { props })=> Record<SemanticDOM, string>	-		6.0.0
current	To set the current step, counting from 0. You can overwrite this state by using `status` of `Step`	number	0		×
~~direction~~	To specify the direction of the step bar, `horizontal` or `vertical`	string	`horizontal`		×
iconRender	Custom render icon, please use `items.icon` first	(oriNode, info: { index, active, item }) => ReactNode	-		×
initial	Set the initial step, counting from 0	number	0		×
~~labelPlacement~~	Place title and content with `horizontal` or `vertical` direction	string	`horizontal`		×
maxCount	Maximum number of step items to display (`>= 3`). Hidden ranges are collapsed into disabled ellipsis steps.	number	-		×
orientation	To specify the orientation of the step bar, `horizontal` or `vertical`	string	`horizontal`		×
percent	Progress circle percentage of current step in `process` status (only works on basic Steps)	number	-	4.5.0	×
~~progressDot~~	Steps with progress dot style, customize the progress dot by setting it to a function. Please use `type="dot"` instead. `titlePlacement` will be `vertical`	boolean \| (iconDot, { index, status, title, content }) => ReactNode	false		×
responsive	Change to vertical direction when screen width smaller than `532px`	boolean	true		×
size	To specify the size of the step bar, `medium` and `small` are currently supported	string	`medium`		×
status	To specify the status of current step, can be set to one of the following values: `wait` `process` `finish` `error`	string	`process`		×
styles	Customize inline style for each semantic structure inside the component. Supports object or function.	Record<SemanticDOM, CSSProperties> \| (info: { props })=> Record<SemanticDOM, CSSProperties>	-		6.0.0
titlePlacement	Place title and content with `horizontal` or `vertical` direction	string	`horizontal`		×
type	Type of steps, can be set to one of the following values: `default` `dot` `inline` `navigation` `panel`	string	`default`		×
variant	Config style variant	`filled` \| `outlined`	`filled`		×
onChange	Trigger when Step is changed	(current) => void	-		×
items	StepItem content	StepItem	[]	4.24.0	×

StepItem

단계 표시줄 안의 한 단계입니다.

Property	Description	Type	Default
content	Description of the step, optional property	ReactNode	-
~~description~~	Description of the step, optional property	ReactNode	-
disabled	Disable click	boolean	false
icon	Icon of the step, optional property	ReactNode	-
status	To specify the status. It will be automatically set by `current` of `Steps` if not configured. Optional values are: `wait` `process` `finish` `error`	string	`wait`
subTitle	Subtitle of the step	ReactNode	-
title	Title of the step	ReactNode	-

시맨틱 DOM (Semantic DOM)

Steps

https://ant.design/components/steps/semantic.md

StepItem

https://ant.design/components/steps/semantic_items.md

디자인 토큰 (Design Token)

컴포넌트 토큰 (Component Token - Steps)

Token Name	Description	Type	Default Value
customIconFontSize	Font size of custom icon	number	24
customIconSize	Size of custom icon container	number	32
customIconTop	Top of custom icon	number	0
dotCurrentSize	Current size of dot	number	10
dotSize	Size of dot	number	8
iconFontSize	Size of icon	number	14
iconSize	Size of icon container	number	32
iconSizeSM	Size of small steps icon	string \| number	24
iconTop	Top of icon	number	-0.5
navArrowColor	Color of arrow in nav	string	rgba(0,0,0,0.25)
navContentMaxWidth	Max width of nav content	MaxWidth<string \| number> \| undefined	unset

글로벌 토큰 (Global Token)

Token Name	Description	Type
borderRadius	Border radius of base components	number
borderRadiusSM	SM size border radius, used in small size components, such as Button, Input, Select and other input components in small size	number
colorBgContainer	Container background color, e.g: default button, input box, etc. Be sure not to confuse this with `colorBgElevated`.	string
colorError	Used to represent the visual elements of the operation failure, such as the error Button, error Result component, etc.	string
colorErrorBg	The background color of the error state.	string
colorErrorBgFilledHover	The wrong color fills the background color of the suspension state, which is currently only used in the hover effect of the dangerous filled button.	string
colorErrorHover	The hover state of the error color.	string
colorFillTertiary	The third level of fill color is used to outline the shape of the element, such as Slider, Segmented, etc. If there is no emphasis requirement, it is recommended to use the third level of fill color as the default fill color.	string
colorPrimary	Brand color is one of the most direct visual elements to reflect the characteristics and communication of the product. After you have selected the brand color, we will automatically generate a complete color palette and assign it effective design semantics.	string
colorPrimaryBg	Light background color of primary color, usually used for weak visual level selection state.	string
colorPrimaryBgHover	The hover state color corresponding to the light background color of the primary color.	string
colorPrimaryBorder	The stroke color under the main color gradient, used on the stroke of components such as Slider.	string
colorPrimaryHover	Hover state under the main color gradient.	string
colorSplit	Used as the color of separator, this color is the same as colorBorderSecondary but with transparency.	string
colorText	Default text color which comply with W3C standards, and this color is also the darkest neutral color.	string
colorTextDescription	Control the font color of text description.	string
colorTextDisabled	Control the color of text in disabled state.	string
colorTextLabel	Control the font color of text label.	string
colorTextLightSolid	Control the highlight color of text with background color, such as the text in Primary Button components.	string
colorTextQuaternary	The fourth level of text color is the lightest text color, such as form input prompt text, disabled color text, etc.	string
colorTextSecondary	The second level of text color is generally used in scenarios where text color is not emphasized, such as label text, menu text selection state, etc.	string
controlHeight	The height of the basic controls such as buttons and input boxes in Ant Design	number
controlItemBgHover	Control the background color of control component item when hovering.	string
fontFamily	The font family of Ant Design prioritizes the default interface font of the system, and provides a set of alternative font libraries that are suitable for screen display to maintain the readability and readability of the font under different platforms and browsers, reflecting the friendly, stable and professional characteristics.	string
fontSize	The most widely used font size in the design system, from which the text gradient will be derived.	number
fontSizeIcon	Control the font size of operation icon in Select, Cascader, etc. Normally same as fontSizeSM.	number
fontSizeLG	Large font size	number
fontSizeSM	Small font size	number
lineHeight	Line height of text.	number
lineHeightLG	Line height of large text.	number
lineHeightSM	Line height of small text.	number
lineType	Border style of base components	string
lineWidth	Border width of base components	number
lineWidthBold	The default line width of the outline class components, such as Button, Input, Select, etc.	number
lineWidthFocus	Control the width of the line when the component is in focus state.	number
margin	Control the margin of an element, with a medium size.	number
marginSM	Control the margin of an element, with a medium-small size.	number
marginXS	Control the margin of an element, with a small size.	number
marginXXS	Control the margin of an element, with the smallest size.	number
motionDurationMid	Motion speed, medium speed. Used for medium element animation interaction.	string
motionDurationSlow	Motion speed, slow speed. Used for large element animation interaction.	string
paddingSM	Control the small padding of the element.	number
paddingXS	Control the extra small padding of the element.	number
paddingXXS	Control the extra extra small padding of the element.	number

단계 표시

단계 표시 (Steps)

본문

언제 사용하나요 (When To Use)

예제 (Examples)

기본 (Basic)

오류 상태 (Error status)

세로 (Vertical)

클릭 가능 (Clickable)

패널 단계 (Panel Steps)

아이콘과 함께 (With icon)

제목 배치와 진행률 (Title Placement and Progress)

최대 개수 (Max Count)

점 스타일 (Dot Style)

내비게이션 단계 (Navigation Steps)

인라인 단계 (Inline Steps)

인라인 스타일 조합 (Inline Style Combination)

커스텀 시맨틱 DOM 스타일링 (Custom semantic dom styling)

API

Steps

StepItem

시맨틱 DOM (Semantic DOM)

Steps

StepItem

디자인 토큰 (Design Token)

컴포넌트 토큰 (Component Token - Steps)

글로벌 토큰 (Global Token)

더 알아보기 (Learn more)