logoAnt Design

⌘ K
  • 디자인
  • 개발
  • 컴포넌트
  • 블로그
  • 자료
5.21.3
  • Components Overview
  • General
    • Button
    • FloatButton
      5.0.0
    • Icon
    • Typography
  • Layout
    • Divider
    • Flex
      5.10.0
    • Grid
    • Layout
    • Space
    • Splitter
      5.21.0
  • Navigation
    • Anchor
    • Breadcrumb
    • Dropdown
    • Menu
    • Pagination
    • Steps
  • Data Entry
    • AutoComplete
    • Cascader
    • Checkbox
    • ColorPicker
      5.5.0
    • DatePicker
    • Form
    • Input
    • InputNumber
    • Mentions
    • Radio
    • Rate
    • Select
    • Slider
    • Switch
    • TimePicker
    • Transfer
    • TreeSelect
    • Upload
  • Data Display
    • Avatar
    • Badge
    • Calendar
    • Card
    • Carousel
    • Collapse
    • Descriptions
    • Empty
    • Image
    • List
    • Popover
    • QRCode
      5.1.0
    • Segmented
    • Statistic
    • Table
    • Tabs
    • Tag
    • Timeline
    • Tooltip
    • Tour
      5.0.0
    • Tree
  • Feedback
    • Alert
    • Drawer
    • Message
    • Modal
    • Notification
    • Popconfirm
    • Progress
    • Result
    • Skeleton
    • Spin
    • Watermark
      5.1.0
  • Other
    • Affix
    • App
      5.1.0
    • ConfigProvider
    • Util
      5.13.0

Result

일련의 작업 처리 결과를 피드백하는 데 사용됩니다.
가져오기import{ Result }from"antd";
소스components/result
문서
이 페이지 수정변경 로그

Resources

Ant Design Charts
Ant Design Pro
Ant Design Pro Components
Ant Design Mobile
Ant Design Mini
Ant Design Landing-Landing Templates
Scaffolds-Scaffold Market
Umi-React Application Framework
dumi-Component doc generator
qiankun-Micro-Frontends Framework
ahooks-React Hooks Library
Ant Motion-Motion Solution
China Mirror 🇨🇳

Community

Awesome Ant Design
Medium
Twitter
yuque logoAnt Design in YuQue
Ant Design in Zhihu
Experience Cloud Blog
seeconf logoSEE Conf-Experience Tech Conference
Work with Us

Help

GitHub
Change Log
FAQ
Bug Report
Issues
Discussions
StackOverflow
SegmentFault

Ant XTech logoMore Products

yuque logoYuQue-Document Collaboration Platform
AntV logoAntV-Data Visualization
Egg logoEgg-Enterprise Node.js Framework
Kitchen logoKitchen-Sketch Toolkit
Galacean logoGalacean-Interactive Graphics Solution
xtech logoAnt Financial Experience Tech
Theme Editor
Made with ❤ by
Ant Group and Ant Design Community
loading

이럴 때 사용하세요

중요한 작업의 결과를 사용자에게 알릴 필요가 있을 때나, 복잡한 피드백을 제공해야 할 때 사용합니다.

예시

API

공통 props 참조:공통 props

프로퍼티설명타입기본값
extra작업 영역ReactNode-
icon사용자 지정 백 아이콘ReactNode-
status결과 상태, 아이콘 및 색상을 결정합니다.success | error | info | warning | 404 | 403 | 500info
subTitle부제목ReactNode-
title제목ReactNode-

디자인 토큰

컴포넌트 토큰어떻게 사용하나요?

토큰 이름설명타입기본값
extraMargin추가 영역의 외부 여백undefined | Margin<string | number>24px 0 0 0
iconFontSize아이콘 크기number72
subtitleFontSize부제목 글꼴 크기number14
titleFontSize제목 글꼴 크기number24

글로벌 토큰어떻게 사용하나요?

Success

성공적인 결과를 보여줍니다.

codepen icon
External Link Icon
expand codeexpand code
Info

처리 결과를 보여줍니다.

codepen icon
External Link Icon
expand codeexpand code
Warning

경고와 관련된 결과입니다.

codepen icon
External Link Icon
expand codeexpand code
403

이 페이지에 접근할 수 있는 권한이 없습니다.

codepen icon
External Link Icon
expand codeexpand code
404

방문하신 페이지를 찾을 수 없습니다.

codepen icon
External Link Icon
expand codeexpand code
500

서버에 문제가 발생했습니다.

codepen icon
External Link Icon
expand codeexpand code
Error

복잡한 오류 피드백

codepen icon
External Link Icon
expand codeexpand code
Custom icon

사용자 지정 아이콘

codepen icon
External Link Icon
expand codeexpand code
Component Token

컴포넌트 토큰 디버그

codepen icon
External Link Icon
expand codeexpand code
클라우드 서버 ECS 구매에 성공했습니다!
주문 번호: 2017182818828182881 클라우드 서버 설정에는 1-5분이 소요됩니다. 잠시만 기다려 주세요.
작업이 완료되었습니다
작업에 문제가 발생했습니다.
Unauthorized
403
죄송합니다. 이 페이지에 접근할 수 있는 권한이 없습니다.
No Found
404
죄송합니다. 방문하신 페이지를 찾을 수 없습니다.
Server Error
500
죄송합니다. 알 수 없는 문제가 발생했습니다.
제출 실패
다음 정보를 확인하고 수정한 후 다시 제출해 주세요.
제출한 내용에 다음 오류가 있습니다:
계정이 동결되었습니다. 즉시 해제하기 >
계정이 아직 신청 자격이 없습니다. 신청 자격 얻기 >
좋아요, 모든 작업이 완료되었습니다!
클라우드 서버 ECS 구매에 성공했습니다!
주문 번호: 2017182818828182881 클라우드 서버 설정에는 1-5분이 소요됩니다. 잠시만 기다려 주세요.