├── .babelrc
├── .gitignore
├── .vscode
└── settings.json
├── README.md
├── config
├── env.js
├── jest
│ ├── cssTransform.js
│ └── fileTransform.js
├── paths.js
├── polyfills.js
├── webpack.config.dev.js
├── webpack.config.prod.js
└── webpackDevServer.config.js
├── package.json
├── public
├── favicon.ico
├── index.html
└── manifest.json
├── scripts
├── build.js
├── start.js
└── test.js
├── src
├── App.js
├── App.less
├── component
│ ├── _utils
│ │ ├── pathTools.js
│ │ └── pathTools.test.js
│ ├── affix
│ │ └── index.js
│ ├── alert
│ │ └── index.js
│ ├── anchor
│ │ └── index.js
│ ├── authorized
│ │ ├── Authorized.js
│ │ ├── AuthorizedRoute.js
│ │ ├── CheckPermissions.js
│ │ ├── PromiseRender.js
│ │ ├── Secured.js
│ │ ├── index.js
│ │ └── renderAuthorize.js
│ ├── auto-complete
│ │ └── index.js
│ ├── avatar
│ │ └── index.js
│ ├── back-top
│ │ └── index.js
│ ├── badge
│ │ └── index.js
│ ├── breadcrumb
│ │ └── index.js
│ ├── button
│ │ └── index.js
│ ├── calendar
│ │ └── index.js
│ ├── card
│ │ └── index.js
│ ├── carousel
│ │ └── index.js
│ ├── cascader
│ │ └── index.js
│ ├── checkbox
│ │ └── index.js
│ ├── col
│ │ └── index.js
│ ├── collapse
│ │ └── index.js
│ ├── color-picker
│ │ └── index.js
│ ├── copy
│ │ └── index.js
│ ├── count-down
│ │ └── index.js
│ ├── date-picker
│ │ └── index.js
│ ├── divider
│ │ └── index.js
│ ├── drawer
│ │ └── index.js
│ ├── drop-tree
│ │ ├── component
│ │ │ ├── Children.js
│ │ │ ├── LineFirst.js
│ │ │ ├── LineTow.js
│ │ │ └── Target.js
│ │ ├── index.js
│ │ └── index.less
│ ├── dropdown
│ │ └── index.js
│ ├── editor
│ │ ├── index.js
│ │ └── style.less
│ ├── ellipsis
│ │ ├── demo
│ │ │ ├── line.md
│ │ │ └── number.md
│ │ ├── index.d.ts
│ │ ├── index.en-US.md
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── index.test.js
│ │ └── index.zh-CN.md
│ ├── entry-table
│ │ ├── Card.js
│ │ ├── EntryTable.js
│ │ ├── Title.js
│ │ ├── index.js
│ │ └── style.less
│ ├── exception
│ │ ├── demo
│ │ │ ├── 403.md
│ │ │ ├── 404.md
│ │ │ └── 500.md
│ │ ├── index.d.ts
│ │ ├── index.en-US.md
│ │ ├── index.js
│ │ ├── index.less
│ │ ├── index.zh-CN.md
│ │ └── typeConfig.js
│ ├── form
│ │ └── index.js
│ ├── header-search
│ │ ├── demo
│ │ │ └── basic.md
│ │ ├── index.d.ts
│ │ ├── index.js
│ │ ├── index.less
│ │ └── index.md
│ ├── icon
│ │ └── index.js
│ ├── iconfont
│ │ ├── iconfont.eot
│ │ ├── iconfont.js
│ │ ├── iconfont.less
│ │ ├── iconfont.svg
│ │ ├── iconfont.ttf
│ │ └── iconfont.woff
│ ├── index.js
│ ├── input-number
│ │ └── index.js
│ ├── input
│ │ └── index.js
│ ├── language
│ │ ├── allLanguage.js
│ │ ├── currentLanguage.js
│ │ ├── getAllLanguage.js
│ │ ├── getCurrentLanguage.js
│ │ ├── getLanguageData.js
│ │ ├── index.js
│ │ ├── refreshLanguage.js
│ │ ├── setCurrentLanguage.js
│ │ └── setLanguageData.js
│ ├── layout
│ │ └── index.js
│ ├── list
│ │ └── index.js
│ ├── locale-provider
│ │ └── index.js
│ ├── mention
│ │ └── index.js
│ ├── menu
│ │ └── index.js
│ ├── message
│ │ └── index.js
│ ├── modal
│ │ └── index.js
│ ├── not-found
│ │ ├── imgs
│ │ │ └── 404.png
│ │ ├── index.js
│ │ └── index.less
│ ├── notice-icon
│ │ ├── NoticeIconTab.d.ts
│ │ ├── NoticeList.js
│ │ ├── NoticeList.less
│ │ ├── demo
│ │ │ ├── basic.md
│ │ │ └── popover.md
│ │ ├── index.d.ts
│ │ ├── index.js
│ │ ├── index.less
│ │ └── index.md
│ ├── notification
│ │ └── index.js
│ ├── nprogress
│ │ ├── index.js
│ │ └── style.less
│ ├── pagination
│ │ └── index.js
│ ├── popconfirm
│ │ └── index.js
│ ├── popover
│ │ └── index.js
│ ├── progress
│ │ └── index.js
│ ├── q-context-menu
│ │ └── index.js
│ ├── q-r-code
│ │ └── index.js
│ ├── radio
│ │ └── index.js
│ ├── rate
│ │ └── index.js
│ ├── react-markdown
│ │ └── index.js
│ ├── react-qmap
│ │ └── index.js
│ ├── row
│ │ └── index.js
│ ├── screenfull
│ │ └── index.js
│ ├── select
│ │ └── index.js
│ ├── slider
│ │ └── index.js
│ ├── sliding-validation
│ │ ├── index.js
│ │ └── style.less
│ ├── spin
│ │ └── index.js
│ ├── steps
│ │ └── index.js
│ ├── switch
│ │ └── index.js
│ ├── table
│ │ └── index.js
│ ├── tabs
│ │ └── index.js
│ ├── tag
│ │ └── index.js
│ ├── theme
│ │ ├── default.less
│ │ ├── iconfont.less
│ │ ├── index.js
│ │ └── index.less
│ ├── time-picker
│ │ └── index.js
│ ├── timeline
│ │ └── index.js
│ ├── tooltip
│ │ └── index.js
│ ├── transfer
│ │ └── index.js
│ ├── tree-select
│ │ └── index.js
│ ├── tree
│ │ └── index.js
│ ├── upload
│ │ └── index.js
│ ├── utils
│ │ ├── compare.js
│ │ ├── currency.js
│ │ ├── debounce.js
│ │ ├── getCookie.js
│ │ ├── getExplore.js
│ │ ├── getOS.js
│ │ ├── index.js
│ │ ├── parseQueryString.js
│ │ ├── removeCookie.js
│ │ ├── setCookie.js
│ │ ├── stringfyQueryString.js
│ │ └── throttle.js
│ ├── version
│ │ └── index.js
│ └── web-socket
│ │ └── index.js
├── examples
│ ├── API.js
│ ├── Code.js
│ ├── HeaderCustom.js
│ ├── HeaderCustom.less
│ ├── METHOD.js
│ ├── SiderCustom.js
│ ├── SiderMenu.js
│ ├── UI
│ │ ├── Color
│ │ │ ├── Basic1
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Basic2
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Basic3
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Basic4
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Basic5
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── ContextMenu
│ │ │ ├── animation
│ │ │ │ ├── Code.js
│ │ │ │ └── Detail.js
│ │ │ ├── api.js
│ │ │ ├── basic
│ │ │ │ ├── Code.js
│ │ │ │ └── Detail.js
│ │ │ ├── index.js
│ │ │ └── theme
│ │ │ │ ├── Code.js
│ │ │ │ └── Detail.js
│ │ ├── Copy
│ │ │ ├── Detail.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── CountDown
│ │ │ ├── Basic1
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── DropTree
│ │ │ ├── api.js
│ │ │ ├── basic
│ │ │ │ ├── Code.js
│ │ │ │ └── Detail.js
│ │ │ ├── changeData
│ │ │ │ ├── Code.js
│ │ │ │ └── Detail.js
│ │ │ ├── index.js
│ │ │ ├── isParentToChildren
│ │ │ │ ├── Code.js
│ │ │ │ └── Detail.js
│ │ │ ├── onRightClick
│ │ │ │ ├── Code.js
│ │ │ │ └── Detail.js
│ │ │ ├── renderItem
│ │ │ │ ├── Code.js
│ │ │ │ ├── Detail.js
│ │ │ │ └── quantdo.png
│ │ │ ├── returnData
│ │ │ │ ├── Code.js
│ │ │ │ └── Detail.js
│ │ │ └── setData
│ │ │ │ ├── Code.js
│ │ │ │ └── Detail.js
│ │ ├── Ellipsis
│ │ │ ├── Basic1
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Basic2
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── HeaderSearch
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ └── notifyIcon
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── NProgress
│ │ │ ├── Detail.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── NoticeIcon
│ │ │ ├── FloatingCard
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ └── notifyIcon
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── QRCode
│ │ │ ├── Detail.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── ReactMarkdown
│ │ │ ├── Basic1
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── Resizable
│ │ │ ├── Basic1
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── RichText
│ │ │ ├── api.js
│ │ │ ├── inDropdown
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── index.js
│ │ │ ├── notifyIcon
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── toolbarCustomButtons
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── SlidingValidation
│ │ │ ├── Detail.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ └── Table
│ │ │ ├── Basic1
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ │ ├── Basic2
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ │ ├── Basic3
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ │ ├── Basic4
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ │ ├── Basic5
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ │ ├── Basic6
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ │ ├── Basic7
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ ├── animation
│ │ └── BasicAnimations
│ │ │ ├── Basic1
│ │ │ ├── Detail.js
│ │ │ ├── animate.css
│ │ │ ├── code.js
│ │ │ └── style.less
│ │ │ ├── api.js
│ │ │ └── index.js
│ ├── antd
│ │ ├── Avatar
│ │ │ ├── AutoSet
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Badge
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Type
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── Badge
│ │ │ ├── Basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Dynamic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── MaxNum
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── RedDot
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Status
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Title
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── ToClick
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── UsedAlone
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── Calendar
│ │ │ ├── Basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── CardPattern
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Reminder
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Select
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── Card
│ │ │ ├── CardInColumn
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── FlexibleContent
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── GridCard
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── InnerCard
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── LoadingCard
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── MoreContent
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── NoBorder
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── SimpleCard
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── TabsCard
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Typical
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── Carousel
│ │ │ ├── AutoPlay
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── Basic
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── FadeIn
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── Vertical
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ └── method.js
│ │ ├── Collapse
│ │ │ ├── Accordion
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── BasicCollapse
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── CustomPanel
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── HiddenArrow
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Simple
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── List
│ │ │ ├── BasicList
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── GridList
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── LayoutGridList
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── LoadMore
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── ScrollList
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── SimpleList
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── VerticalList
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── VirtualizedList
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── PopOver
│ │ │ ├── Basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── ClosedInside
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Position
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Type
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── Table
│ │ │ ├── Ajax
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── BorderTitleAndFooter
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── ColSpanAndRowSpan
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── CustomSelect
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── DragRow
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── DyanmicProperty
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── EditTable
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── EditableRow
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── ExpandRow
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── FilterAndSort
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── FixedCol
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── FixedHeader
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── FixedHeaderAndCol
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── JsxStyle
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── NestedTable
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── Search
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── SelectAndOperate
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Selectable
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Size
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── TableHeader
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── TreeStructure
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── Tooltip
│ │ │ ├── ArrowPointDirection
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Position
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── affix
│ │ │ ├── Affixbasic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── AffixedState
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── ScrollPane
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── alert
│ │ │ ├── alert_Smooth
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── alert_auto_close
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── alert_banner
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── alert_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── alert_close
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── alert_description
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── alert_icon
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── alert_style
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── autoComplete
│ │ │ ├── api.js
│ │ │ ├── autoCL
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── autobasic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── autocustom
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── autoincustom
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── automodel
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── autosoundmodel
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ └── index.js
│ │ ├── breadcrumb
│ │ │ ├── api.js
│ │ │ ├── breadcrumbbasic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── iconic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── index.js
│ │ │ └── react-router
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ ├── button
│ │ │ ├── ButtonCombination
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Buttonsize
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── Buttontype
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── DisabledState
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── GhostButtons
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── IconButton
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── LoadingState
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── cascader
│ │ │ ├── api.js
│ │ │ ├── cascader_load
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── cascader_search
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── cascaderbasic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── cascadercustom_fieldName
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── cascadercustom_selected
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── cascadersize
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── cascdefault
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── cascforbid
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── cascshiftIn
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── choice_change
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── customizeDis
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── index.js
│ │ │ └── method.js
│ │ ├── checkbox
│ │ │ ├── api.js
│ │ │ ├── check_all
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── check_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── check_controlled
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── check_disabled
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── check_group
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── check_layout
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── index.js
│ │ │ └── method.js
│ │ ├── datePicker
│ │ │ ├── api.js
│ │ │ ├── dataPicker_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── dataPicker_controlled_panel
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── dataPicker_custom_data
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── dataPicker_dateRender
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── dataPicker_extra_footer
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── dataPicker_forbid
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── dataPicker_format
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── dataPicker_preset_scope
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── dataPicker_showtime
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── dataPicker_size
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── dataPicker_time_forbid
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── index.js
│ │ │ └── method.js
│ │ ├── drawer
│ │ │ ├── api.js
│ │ │ ├── drawer_Form
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── drawer_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── drawer_multi
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── drawer_placement
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── drawer_preview
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── index.js
│ │ ├── dropdown
│ │ │ ├── api.js
│ │ │ ├── cascadingmenu
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── clickright
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── dropbutton
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── dropdownbasic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── hidemode
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── index.js
│ │ │ ├── otherElement
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── outposition
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── triggerevents
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── triggermode
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── form
│ │ │ ├── api.js
│ │ │ ├── form_TipsWindown
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── form_check_others
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── form_checkout
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── form_custom
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── form_datasava_super
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── form_dynamic_check
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── form_handledata
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── form_layout
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── form_level_login
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── form_linkage
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── form_login
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── form_search
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── form_signin
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── form_time
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── formitems_addsub
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ └── index.js
│ │ ├── icon
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── input
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── input_affix
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── input_auto_textarea
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── input_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── input_format_show
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── input_group
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── input_label
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── input_search
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── input_size
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ └── input_textarea
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── inputNumber
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── inputNumber_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── inputNumber_disabled
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── inputNumber_formatshow
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── inputNumber_size
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ └── method.js
│ │ ├── mention
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── mention_applytTo_father
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── mention_async
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── mention_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── mention_controlled
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── mention_custom
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── mention_disabled_readOnly
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── mention_form
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── mention_icon
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── mention_multi_line
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── mention_spread_up
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── mention_trigger_chars
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── method.js
│ │ ├── menu
│ │ │ ├── api.js
│ │ │ ├── flexmenu
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── index.js
│ │ │ ├── insitemenu
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── menutype
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── parentmenu
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── showOntop
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── theme
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── verticalmenu
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── message
│ │ │ ├── api.js
│ │ │ ├── api_1.js
│ │ │ ├── index.js
│ │ │ ├── message_duration
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── message_loading
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── message_normal
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── message_others
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── message_promise
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── modal
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── modal_asyn
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── modal_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── modal_confirm
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── modal_confirm_1
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── modal_footer
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── modal_footer_auto
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── modal_info
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── modal_localized
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── modal_manual
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── modal_position
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ ├── notification
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── notification_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── notification_button_auto
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── notification_duration
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── notification_icon
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── notification_icon_auto
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── notification_position
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── notification_style
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── notification_updata
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── pagination
│ │ │ ├── api.js
│ │ │ ├── changepage
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── index.js
│ │ │ ├── morepage
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── pagcontrolled
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── pagemini
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── pageskip
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── paginationbasic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── plainpage
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── sumpagination
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── upAnddown
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── popconfirm
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── popconfirm_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── popconfirm_national
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── popconfirm_position
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── popconfirm_visible
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── progress
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── progress_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── progress_basic_dynamic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── progress_basic_small
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── progress_basic_tooltip
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── progress_circle
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── progress_circle_dynamic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── progress_circle_small
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── progress_dashboard
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── progress_style
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── radio
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── radio_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── radio_button_bgstyle
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── radio_button_size
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── radio_button_style
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── radio_disable
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── radio_group
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── radio_group_group
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── radio_group_name
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── radio_group_vertical
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── rate
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── method.js
│ │ │ ├── rate_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── rate_clear
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── rate_half
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── rate_others
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── rate_readOnly
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── rate_writing
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── select
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── select_SearchInput
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── select_UserRemote
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── select_auto
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── select_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── select_group
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── select_labelInValue
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── select_linkage
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── select_multi
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── select_search
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── select_size
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── select_tags
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── slider
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── method.js
│ │ │ ├── slider_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── slider_events
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── slider_icon
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── slider_input
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── slider_label
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── slider_prompt
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── slider_vertical
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── spin
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── spin_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── spin_card
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── spin_container
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── spin_delay
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── spin_description
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── spin_icon
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── spin_size
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── steps
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── stepsbasic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── stepschange
│ │ │ │ ├── Detail.js
│ │ │ │ ├── code.js
│ │ │ │ └── style.less
│ │ │ ├── stepscustom
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── stepsdot
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── stepsicon
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── stepsmini
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── stepsver
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── stepsvermini
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── stepswrong
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── switch
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── method.js
│ │ │ ├── switch_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── switch_disabled
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── switch_loading
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── switch_size
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── switch_word_icon
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── timePicker
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── method.js
│ │ │ ├── timePicker_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── timerPicker_addon
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── timerPicker_controlled
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── timerPicker_disabled
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── timerPicker_format
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── timerPicker_select
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── timerPicker_size
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── timerPicker_step
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── transfer
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── transfer_auto
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── transfer_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── transfer_moreUsage
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── transfer_search
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ ├── treeSelect
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── method.js
│ │ │ ├── treeSelect_Checkable
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── treeSelect_basic
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── treeSelect_json
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ └── treeSelect_multi_select
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ └── upload
│ │ │ ├── api.js
│ │ │ ├── index.js
│ │ │ ├── upload_FileList
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ │ ├── upload_FileList_controlled
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ │ ├── upload_PicturesWall
│ │ │ ├── Detail.js
│ │ │ ├── code.js
│ │ │ └── style.less
│ │ │ ├── upload_avatar
│ │ │ ├── Detail.js
│ │ │ ├── code.js
│ │ │ └── style.less
│ │ │ ├── upload_click
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ │ ├── upload_drag
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ │ ├── upload_folder
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ │ ├── upload_manual
│ │ │ ├── Detail.js
│ │ │ ├── code.js
│ │ │ └── style.less
│ │ │ └── upload_picturesList
│ │ │ ├── Detail.js
│ │ │ ├── code.js
│ │ │ └── style.less
│ ├── charts
│ │ ├── 3DCharts
│ │ │ ├── Basic1
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── Bar
│ │ │ ├── Basic1
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── Diagram
│ │ │ ├── Basic1
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── Diagram1
│ │ │ ├── Basic1
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── Diagram2
│ │ │ ├── Basic1
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── DropCharts
│ │ │ ├── Basic1
│ │ │ │ ├── Detail.js
│ │ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ └── Line
│ │ │ ├── Basic1
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ ├── history
│ │ ├── history.js
│ │ ├── index.js
│ │ └── style.less
│ ├── home
│ │ ├── EchartsProjects.js
│ │ ├── EchartsViews.js
│ │ ├── home.js
│ │ ├── home.less
│ │ ├── home2.less
│ │ └── index.js
│ ├── index.js
│ ├── page
│ │ ├── NotFound
│ │ │ ├── Detail.js
│ │ │ ├── api.js
│ │ │ └── index.js
│ │ ├── map
│ │ │ ├── BasicMap
│ │ │ │ ├── BasicMapApi.js
│ │ │ │ └── index.js
│ │ │ ├── Detail.js
│ │ │ ├── MapWithGeolocation
│ │ │ │ ├── MapWithGeolocationApi.js
│ │ │ │ └── index.js
│ │ │ ├── MapWithMarker
│ │ │ │ ├── MapWithMarkerApi.js
│ │ │ │ └── index.js
│ │ │ ├── MapWithSpot
│ │ │ │ ├── MapWithSpotApi.js
│ │ │ │ └── index.js
│ │ │ ├── api.js
│ │ │ ├── imgs
│ │ │ │ └── spot_location.png
│ │ │ └── index.js
│ │ └── reactAmap
│ │ │ └── index.js
│ └── util
│ │ ├── Language
│ │ ├── Basic1
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ ├── api.js
│ │ └── index.js
│ │ ├── Utiles
│ │ ├── Basic1
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ ├── Basic2
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ ├── Basic3
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ ├── Basic4
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ ├── api.js
│ │ ├── api2.js
│ │ └── index.js
│ │ ├── screenfull
│ │ ├── Basic1
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ ├── Basic2
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ ├── api.js
│ │ └── index.js
│ │ ├── theme
│ │ ├── Basic1
│ │ │ ├── Detail.js
│ │ │ └── code.js
│ │ ├── api.js
│ │ └── index.js
│ │ └── webSocket
│ │ ├── Detail.js
│ │ ├── api.js
│ │ └── index.js
├── imgs
│ ├── background.jpg
│ ├── logo@3x.png
│ └── quantdo.png
├── index.js
├── index.less
├── routes
│ ├── config.js
│ └── index.js
└── theme
│ ├── green.less
│ ├── index.js
│ ├── index.less
│ ├── purple.less
│ └── red.less
└── yarn.lock
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "plugins": ["transform-decorators-legacy"],
3 | "presets": [
4 | "es2015",
5 | "react",
6 | "stage-2"
7 | ]
8 | }
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | # See https://help.github.com/ignore-files/ for more about ignoring files.
2 |
3 | # dependencies
4 | /node_modules
5 |
6 | # testing
7 | /coverage
8 |
9 | # production
10 | /build
11 |
12 | # misc
13 | .DS_Store
14 | .env.local
15 | .env.development.local
16 | .env.test.local
17 | .env.production.local
18 |
19 | npm-debug.log*
20 | yarn-debug.log*
21 | yarn-error.log*
22 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | }
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | * 量投组件库
--------------------------------------------------------------------------------
/config/jest/cssTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // This is a custom Jest transformer turning style imports into empty objects.
4 | // http://facebook.github.io/jest/docs/en/webpack.html
5 |
6 | module.exports = {
7 | process() {
8 | return 'module.exports = {};';
9 | },
10 | getCacheKey() {
11 | // The output is always the same.
12 | return 'cssTransform';
13 | },
14 | };
15 |
--------------------------------------------------------------------------------
/config/jest/fileTransform.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | const path = require('path');
4 |
5 | // This is a custom Jest transformer turning file imports into filenames.
6 | // http://facebook.github.io/jest/docs/en/webpack.html
7 |
8 | module.exports = {
9 | process(src, filename) {
10 | return `module.exports = ${JSON.stringify(path.basename(filename))};`;
11 | },
12 | };
13 |
--------------------------------------------------------------------------------
/config/polyfills.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | if (typeof Promise === 'undefined') {
4 | // Rejection tracking prevents a common issue where React gets into an
5 | // inconsistent state due to an error, but it gets swallowed by a Promise,
6 | // and the user has no idea what causes React's erratic future behavior.
7 | require('promise/lib/rejection-tracking').enable();
8 | window.Promise = require('promise/lib/es6-extensions.js');
9 | }
10 |
11 | // fetch() polyfill for making API calls.
12 | require('whatwg-fetch');
13 |
14 | // Object.assign() is commonly used with React.
15 | // It will use the native implementation if it's present and isn't buggy.
16 | Object.assign = require('object-assign');
17 |
18 | // In tests, polyfill requestAnimationFrame since jsdom doesn't provide it yet.
19 | // We don't polyfill it in the browser--this is user's responsibility.
20 | if (process.env.NODE_ENV === 'test') {
21 | require('raf').polyfill(global);
22 | }
23 |
--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitlwz/quant-ui/093c4f0ab6be5ab50015dcda82f88ebe9e87cbdc/public/favicon.ico
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | }
10 | ],
11 | "start_url": "./index.html",
12 | "display": "standalone",
13 | "theme_color": "#000000",
14 | "background_color": "#ffffff"
15 | }
16 |
--------------------------------------------------------------------------------
/scripts/test.js:
--------------------------------------------------------------------------------
1 | 'use strict';
2 |
3 | // Do this as the first thing so that any code reading it knows the right env.
4 | process.env.BABEL_ENV = 'test';
5 | process.env.NODE_ENV = 'test';
6 | process.env.PUBLIC_URL = '';
7 |
8 | // Makes the script crash on unhandled rejections instead of silently
9 | // ignoring them. In the future, promise rejections that are not handled will
10 | // terminate the Node.js process with a non-zero exit code.
11 | process.on('unhandledRejection', err => {
12 | throw err;
13 | });
14 |
15 | // Ensure environment variables are read.
16 | require('../config/env');
17 |
18 | const jest = require('jest');
19 | let argv = process.argv.slice(2);
20 |
21 | // Watch unless on CI or in coverage mode
22 | if (!process.env.CI && argv.indexOf('--coverage') < 0) {
23 | argv.push('--watch');
24 | }
25 |
26 |
27 | jest.run(argv);
28 |
--------------------------------------------------------------------------------
/src/component/_utils/pathTools.js:
--------------------------------------------------------------------------------
1 | // /userinfo/2144/id => ['/userinfo','/useinfo/2144,'/userindo/2144/id']
2 | export function urlToList(url) {
3 | const urllist = url.split('/').filter(i => i);
4 | return urllist.map((urlItem, index) => {
5 | return `/${urllist.slice(0, index + 1).join('/')}`;
6 | });
7 | }
8 |
--------------------------------------------------------------------------------
/src/component/_utils/pathTools.test.js:
--------------------------------------------------------------------------------
1 | import { urlToList } from './pathTools';
2 |
3 | describe('test urlToList', () => {
4 | it('A path', () => {
5 | expect(urlToList('/userinfo')).toEqual(['/userinfo']);
6 | });
7 | it('Secondary path', () => {
8 | expect(urlToList('/userinfo/2144')).toEqual(['/userinfo', '/userinfo/2144']);
9 | });
10 | it('Three paths', () => {
11 | expect(urlToList('/userinfo/2144/addr')).toEqual([
12 | '/userinfo',
13 | '/userinfo/2144',
14 | '/userinfo/2144/addr',
15 | ]);
16 | });
17 | });
18 |
--------------------------------------------------------------------------------
/src/component/affix/index.js:
--------------------------------------------------------------------------------
1 | import Affix from 'antd/lib/affix';
2 | export default Affix;
--------------------------------------------------------------------------------
/src/component/alert/index.js:
--------------------------------------------------------------------------------
1 | import Alert from 'antd/lib/alert';
2 | export default Alert;
--------------------------------------------------------------------------------
/src/component/anchor/index.js:
--------------------------------------------------------------------------------
1 | import Anchor from 'antd/lib/anchor';
2 | export default Anchor;
--------------------------------------------------------------------------------
/src/component/authorized/Authorized.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import CheckPermissions from './CheckPermissions';
3 |
4 | class Authorized extends React.Component {
5 | render() {
6 | const { children, authority, noMatch = null } = this.props;
7 | const childrenRender = typeof children === 'undefined' ? null : children;
8 | return CheckPermissions(authority, childrenRender, noMatch);
9 | }
10 | }
11 |
12 | export default Authorized;
13 |
--------------------------------------------------------------------------------
/src/component/authorized/AuthorizedRoute.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import { Route, Redirect } from 'react-router-dom';
3 | import Authorized from './Authorized';
4 |
5 | class AuthorizedRoute extends React.Component {
6 | render() {
7 | const { component: Component, render, authority, redirectPath, ...rest } = this.props;
8 | return (
9 | } />}
12 | >
13 | (Component ? : render(props))} />
14 |
15 | );
16 | }
17 | }
18 |
19 | export default AuthorizedRoute;
20 |
--------------------------------------------------------------------------------
/src/component/authorized/index.js:
--------------------------------------------------------------------------------
1 | import Authorized from './Authorized';
2 | import AuthorizedRoute from './AuthorizedRoute';
3 | import Secured from './Secured';
4 | import check from './CheckPermissions.js';
5 | import renderAuthorize from './renderAuthorize';
6 |
7 | Authorized.Secured = Secured;
8 | Authorized.AuthorizedRoute = AuthorizedRoute;
9 | Authorized.check = check;
10 |
11 | export default renderAuthorize(Authorized);
12 |
--------------------------------------------------------------------------------
/src/component/authorized/renderAuthorize.js:
--------------------------------------------------------------------------------
1 | /* eslint-disable import/no-mutable-exports */
2 | let CURRENT = 'NULL';
3 | /**
4 | * use authority or getAuthority
5 | * @param {string|()=>String} currentAuthority
6 | */
7 | const renderAuthorize = Authorized => {
8 | return currentAuthority => {
9 | if (currentAuthority) {
10 | if (currentAuthority.constructor.name === 'Function') {
11 | CURRENT = currentAuthority();
12 | }
13 | if (
14 | currentAuthority.constructor.name === 'String' ||
15 | currentAuthority.constructor.name === 'Array'
16 | ) {
17 | CURRENT = currentAuthority;
18 | }
19 | } else {
20 | CURRENT = 'NULL';
21 | }
22 | return Authorized;
23 | };
24 | };
25 |
26 | export { CURRENT };
27 | export default Authorized => renderAuthorize(Authorized);
28 |
--------------------------------------------------------------------------------
/src/component/auto-complete/index.js:
--------------------------------------------------------------------------------
1 | import AutoComplete from 'antd/lib/auto-complete';
2 | export default AutoComplete;
--------------------------------------------------------------------------------
/src/component/avatar/index.js:
--------------------------------------------------------------------------------
1 | import Avatar from 'antd/lib/avatar';
2 | export default Avatar;
--------------------------------------------------------------------------------
/src/component/back-top/index.js:
--------------------------------------------------------------------------------
1 | import BackTop from 'antd/lib/back-top';
2 | export default BackTop;
--------------------------------------------------------------------------------
/src/component/badge/index.js:
--------------------------------------------------------------------------------
1 | import Badge from 'antd/lib/badge';
2 | export default Badge;
--------------------------------------------------------------------------------
/src/component/breadcrumb/index.js:
--------------------------------------------------------------------------------
1 | import Breadcrumb from 'antd/lib/breadcrumb';
2 | export default Breadcrumb;
--------------------------------------------------------------------------------
/src/component/button/index.js:
--------------------------------------------------------------------------------
1 | import Button from 'antd/lib/button';
2 | export default Button;
--------------------------------------------------------------------------------
/src/component/calendar/index.js:
--------------------------------------------------------------------------------
1 | import Calendar from 'antd/lib/calendar';
2 | export default Calendar;
--------------------------------------------------------------------------------
/src/component/card/index.js:
--------------------------------------------------------------------------------
1 | import Card from 'antd/lib/card';
2 | export default Card;
--------------------------------------------------------------------------------
/src/component/carousel/index.js:
--------------------------------------------------------------------------------
1 | import Carousel from 'antd/lib/carousel';
2 | export default Carousel;
--------------------------------------------------------------------------------
/src/component/cascader/index.js:
--------------------------------------------------------------------------------
1 | import Cascader from 'antd/lib/cascader';
2 | export default Cascader;
--------------------------------------------------------------------------------
/src/component/checkbox/index.js:
--------------------------------------------------------------------------------
1 | import Checkbox from 'antd/lib/checkbox';
2 | export default Checkbox;
--------------------------------------------------------------------------------
/src/component/col/index.js:
--------------------------------------------------------------------------------
1 | import Col from 'antd/lib/col';
2 | export default Col;
--------------------------------------------------------------------------------
/src/component/collapse/index.js:
--------------------------------------------------------------------------------
1 | import Collapse from 'antd/lib/collapse';
2 | export default Collapse;
--------------------------------------------------------------------------------
/src/component/color-picker/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | SketchPicker,
3 | AlphaPicker,
4 | BlockPicker,
5 | ChromePicker,
6 | CirclePicker,
7 | CompactPicker,
8 | GithubPicker,
9 | HuePicker,
10 | MaterialPicker,
11 | PhotoshopPicker,
12 | SliderPicker,
13 | SwatchesPicker,
14 | TwitterPicker,
15 | } from 'react-color';
16 | export default {
17 | SketchPicker,
18 | AlphaPicker,
19 | BlockPicker,
20 | ChromePicker,
21 | CirclePicker,
22 | CompactPicker,
23 | GithubPicker,
24 | HuePicker,
25 | MaterialPicker,
26 | PhotoshopPicker,
27 | SliderPicker,
28 | SwatchesPicker,
29 | TwitterPicker,
30 | };
--------------------------------------------------------------------------------
/src/component/copy/index.js:
--------------------------------------------------------------------------------
1 | import copy from 'copy-to-clipboard';
2 | export default copy;
--------------------------------------------------------------------------------
/src/component/date-picker/index.js:
--------------------------------------------------------------------------------
1 | import DatePicker from 'antd/lib/date-picker';
2 | export default DatePicker;
--------------------------------------------------------------------------------
/src/component/divider/index.js:
--------------------------------------------------------------------------------
1 | import Divider from 'antd/lib/divider';
2 | export default Divider;
--------------------------------------------------------------------------------
/src/component/drawer/index.js:
--------------------------------------------------------------------------------
1 | import Drawer from 'antd/lib/drawer';
2 | export default Drawer;
--------------------------------------------------------------------------------
/src/component/drop-tree/component/LineFirst.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 |
3 | export default class LineFirst extends Component {
4 | constructor(props) {
5 | super(props);
6 | this.state = {
7 | lineNum: props.lineNum,
8 | };
9 | }
10 | componentWillReceiveProps = (nextProps) => {
11 | this.setState({
12 | lineNum:nextProps.lineNum
13 | })
14 | };
15 | lineFirst = (lineNum) => {
16 | if (lineNum == 0) {
17 | return null;
18 | }
19 | return (
20 |
21 |
22 |
23 |
24 |
25 | )
26 | }
27 | render() {
28 | return (
29 | this.lineFirst(this.state.lineNum)
30 | )
31 | }
32 | };
33 |
--------------------------------------------------------------------------------
/src/component/dropdown/index.js:
--------------------------------------------------------------------------------
1 | import Dropdown from 'antd/lib/dropdown';
2 | export default Dropdown;
--------------------------------------------------------------------------------
/src/component/editor/index.js:
--------------------------------------------------------------------------------
1 | import { Editor } from 'react-draft-wysiwyg';
2 | import draftToHtml from 'draftjs-to-html';
3 | import { EditorState, Modifier } from 'draft-js';
4 | import "./style.less";
5 | Editor.draftToHtml = draftToHtml;
6 | Editor.EditorState = EditorState;
7 | Editor.Modifier = Modifier;
8 | export default Editor;
--------------------------------------------------------------------------------
/src/component/ellipsis/demo/number.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 按照字符数省略
5 | en-US: Truncate according to the number of character
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 通过设置 `length` 属性指定文本最长长度,如果超过这个长度会自动截取。
11 |
12 | ## en-US
13 |
14 | `length` attribute specifies the maximum length where the text will automatically be truncated when exceeded.
15 |
16 | ````jsx
17 | import Ellipsis from 'ant-design-pro/lib/Ellipsis';
18 |
19 | const article = 'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.';
20 |
21 | ReactDOM.render(
22 |
23 | {article}
24 |
Show Tooltip
25 | {article}
26 |
27 | , mountNode);
28 | ````
29 |
--------------------------------------------------------------------------------
/src/component/ellipsis/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IEllipsisProps {
3 | tooltip?: boolean;
4 | length?: number;
5 | lines?: number;
6 | style?: React.CSSProperties;
7 | className?: string;
8 | fullWidthRecognition?: boolean;
9 | }
10 |
11 | export default class Ellipsis extends React.Component {}
12 |
--------------------------------------------------------------------------------
/src/component/ellipsis/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Ellipsis
3 | cols: 1
4 | order: 10
5 | ---
6 |
7 | When the text is too long, the Ellipsis automatically shortens it according to its length or the maximum number of lines.
8 |
9 | ## API
10 |
11 | Property | Description | Type | Default
12 | ----|------|-----|------
13 | tooltip | tooltip for showing the full text content when hovering over | boolean | -
14 | length | maximum number of characters in the text before being truncated | number | -
15 | lines | maximum number of rows in the text before being truncated | number | `1`
16 | fullWidthRecognition | whether consider full-width character length as 2 when calculate string length | boolean | -
17 |
--------------------------------------------------------------------------------
/src/component/ellipsis/index.less:
--------------------------------------------------------------------------------
1 | .quant-ellipsis {
2 | overflow: hidden;
3 | display: inline-block;
4 | word-break: break-all;
5 | width: 100%;
6 | }
7 |
8 | .quant-ellipsis-lines {
9 | position: relative;
10 | .shadow {
11 | display: block;
12 | position: relative;
13 | color: transparent;
14 | opacity: 0;
15 | z-index: -999;
16 | }
17 | }
18 |
19 | .quant-ellipsis-lineClamp {
20 | position: relative;
21 | overflow: hidden;
22 | text-overflow: ellipsis;
23 | display: -webkit-box;
24 | }
25 |
--------------------------------------------------------------------------------
/src/component/ellipsis/index.test.js:
--------------------------------------------------------------------------------
1 | import { getStrFullLength, cutStrByFullLength } from './index.js';
2 |
3 | describe('test calculateShowLength', () => {
4 | it('get full length', () => {
5 | expect(getStrFullLength('一二,a,')).toEqual(8);
6 | });
7 | it('cut str by full length', () => {
8 | expect(cutStrByFullLength('一二,a,', 7)).toEqual('一二,a');
9 | });
10 | it('cut str when length small', () => {
11 | expect(cutStrByFullLength('一22三', 5)).toEqual('一22');
12 | });
13 | });
14 |
--------------------------------------------------------------------------------
/src/component/ellipsis/index.zh-CN.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Ellipsis
3 | subtitle: 文本自动省略号
4 | cols: 1
5 | order: 10
6 | ---
7 |
8 | 文本过长自动处理省略号,支持按照文本长度和最大行数两种方式截取。
9 |
10 | ## API
11 |
12 | 参数 | 说明 | 类型 | 默认值
13 | ----|------|-----|------
14 | tooltip | 移动到文本展示完整内容的提示 | boolean | -
15 | length | 在按照长度截取下的文本最大字符数,超过则截取省略 | number | -
16 | lines | 在按照行数截取下最大的行数,超过则截取省略 | number | `1`
17 | fullWidthRecognition | 是否将全角字符的长度视为2来计算字符串长度 | boolean | -
18 |
--------------------------------------------------------------------------------
/src/component/entry-table/index.js:
--------------------------------------------------------------------------------
1 | import EntryTable from './EntryTable';
2 | export default EntryTable;
--------------------------------------------------------------------------------
/src/component/entry-table/style.less:
--------------------------------------------------------------------------------
1 | .entry-table-title{
2 | width: 100%;
3 | position: relative;
4 | }
5 | .entry-table-dragSource{
6 | opacity: 0.4;
7 | }
8 | .entry-table-dragSource::after{
9 | content: "";
10 | top: -17px;
11 | position: absolute;
12 | display: inline-block;
13 | right: -17px;
14 | border-right: 2px @primary-color dashed;
15 | height: 54px;
16 | }
17 | .entry-table-notmove{
18 | cursor:not-allowed;
19 | }
20 | .entry-table-move{
21 | cursor: w-resize;
22 | }
23 | .entry-table-sizable{
24 | border-right: 2px @primary-color dashed
25 | }
--------------------------------------------------------------------------------
/src/component/exception/demo/403.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 2
3 | title:
4 | zh-CN: 403
5 | en-US: 403
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 403 页面,配合自定义操作。
11 |
12 | ## en-US
13 |
14 | 403 page with custom operations.
15 |
16 | ````jsx
17 | import Exception from 'ant-design-pro/lib/Exception';
18 | import { Button } from 'antd';
19 |
20 | const actions = (
21 |
22 | Home
23 | Detail
24 |
25 | );
26 | ReactDOM.render(
27 |
28 | , mountNode);
29 | ````
30 |
--------------------------------------------------------------------------------
/src/component/exception/demo/404.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title:
4 | zh-CN: 404
5 | en-US: 404
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 404 页面。
11 |
12 | ## en-US
13 |
14 | 404 page.
15 |
16 | ````jsx
17 | import Exception from 'ant-design-pro/lib/Exception';
18 |
19 | ReactDOM.render(
20 |
21 | , mountNode);
22 | ````
23 |
--------------------------------------------------------------------------------
/src/component/exception/demo/500.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title:
4 | zh-CN: 500
5 | en-US: 500
6 | ---
7 |
8 | ## zh-CN
9 |
10 | 500 页面。
11 |
12 | ## en-US
13 |
14 | 500 page.
15 |
16 | ````jsx
17 | import Exception from 'ant-design-pro/lib/Exception';
18 |
19 | ReactDOM.render(
20 |
21 | , mountNode);
22 | ````
23 |
--------------------------------------------------------------------------------
/src/component/exception/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IExceptionProps {
3 | type?: '403' | '404' | '500';
4 | title?: React.ReactNode;
5 | desc?: React.ReactNode;
6 | img?: string;
7 | actions?: React.ReactNode;
8 | linkElement?: React.ReactNode;
9 | style?: React.CSSProperties;
10 | }
11 |
12 | export default class Exception extends React.Component {}
13 |
--------------------------------------------------------------------------------
/src/component/exception/index.en-US.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Exception
3 | cols: 1
4 | order: 5
5 | ---
6 |
7 | Exceptions page is used to provide feedback on specific abnormal state. Usually, it contains an explanation of the error status, and provides users with suggestions or operations, to prevent users from feeling lost and confused.
8 |
9 | ## API
10 |
11 | Property | Description | Type | Default
12 | ---------|-------------|------|--------
13 | type | type of exception, the corresponding default `title`, `desc`, `img` will be given if set, which can be overridden by explicit setting of `title`, `desc`, `img` | Enum {'403', '404', '500'} | -
14 | title | title | ReactNode | -
15 | desc | supplementary description | ReactNode | -
16 | img | the url of background image | string | -
17 | actions | suggested operations, a default 'Home' link will show if not set | ReactNode | -
18 | linkElement | to specify the element of link | string\|ReactElement | 'a'
--------------------------------------------------------------------------------
/src/component/exception/index.zh-CN.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: Exception
3 | subtitle: 异常
4 | cols: 1
5 | order: 5
6 | ---
7 |
8 | 异常页用于对页面特定的异常状态进行反馈。通常,它包含对错误状态的阐述,并向用户提供建议或操作,避免用户感到迷失和困惑。
9 |
10 | ## API
11 |
12 | | 参数 | 说明 | 类型 | 默认值 |
13 | |-------------|------------------------------------------|-------------|-------|
14 | | type | 页面类型,若配置,则自带对应类型默认的 `title`,`desc`,`img`,此默认设置可以被 `title`,`desc`,`img` 覆盖 | Enum {'403', '404', '500'} | - |
15 | | title | 标题 | ReactNode | - |
16 | | desc | 补充描述 | ReactNode | - |
17 | | img | 背景图片地址 | string | - |
18 | | actions | 建议操作,配置此属性时默认的『返回首页』按钮不生效 | ReactNode | - |
19 | | linkElement | 定义链接的元素 | string\|ReactElement | 'a' |
20 |
--------------------------------------------------------------------------------
/src/component/exception/typeConfig.js:
--------------------------------------------------------------------------------
1 | const config = {
2 | 403: {
3 | img: 'https://gw.alipayobjects.com/zos/rmsportal/wZcnGqRDyhPOEYFcZDnb.svg',
4 | title: '403',
5 | desc: '抱歉,你无权访问该页面',
6 | },
7 | 404: {
8 | img: 'https://gw.alipayobjects.com/zos/rmsportal/KpnpchXsobRgLElEozzI.svg',
9 | title: '404',
10 | desc: '抱歉,你访问的页面不存在',
11 | },
12 | 500: {
13 | img: 'https://gw.alipayobjects.com/zos/rmsportal/RVRUAYdCGeYNBWoKiIwB.svg',
14 | title: '500',
15 | desc: '抱歉,服务器出错了',
16 | },
17 | };
18 |
19 | export default config;
20 |
--------------------------------------------------------------------------------
/src/component/form/index.js:
--------------------------------------------------------------------------------
1 | import Form from 'antd/lib/form';
2 | export default Form;
--------------------------------------------------------------------------------
/src/component/header-search/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 0
3 | title: 全局搜索
4 | ---
5 |
6 | 通常放置在导航工具条右侧。(点击搜索图标预览效果)
7 |
8 | ````jsx
9 | import HeaderSearch from 'ant-design-pro/lib/HeaderSearch';
10 |
11 | ReactDOM.render(
12 |
22 | {
26 | console.log('input', value); // eslint-disable-line
27 | }}
28 | onPressEnter={(value) => {
29 | console.log('enter', value); // eslint-disable-line
30 | }}
31 | />
32 |
33 | , mountNode);
34 | ````
35 |
--------------------------------------------------------------------------------
/src/component/header-search/index.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface IHeaderSearchProps {
3 | placeholder?: string;
4 | dataSource?: string[];
5 | onSearch?: (value: string) => void;
6 | onChange?: (value: string) => void;
7 | onPressEnter?: (value: string) => void;
8 | style?: React.CSSProperties;
9 | className?: string;
10 | }
11 |
12 | export default class HeaderSearch extends React.Component {}
13 |
--------------------------------------------------------------------------------
/src/component/header-search/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .quant-headerSearch {
4 | .anticon-search {
5 | cursor: pointer;
6 | font-size: 16px;
7 | }
8 | .input {
9 | transition: width 0.3s, margin-left 0.3s;
10 | width: 0;
11 | background: transparent;
12 | border-radius: 0;
13 | .ant-select-selection {
14 | background: transparent;
15 | }
16 | input {
17 | border: 0;
18 | padding-left: 0;
19 | padding-right: 0;
20 | box-shadow: none !important;
21 | }
22 | &,
23 | &:hover,
24 | &:focus {
25 | border-bottom: 1px solid @border-color-base;
26 | }
27 | &.show {
28 | width: 210px;
29 | margin-left: 8px;
30 | }
31 | }
32 | }
33 |
--------------------------------------------------------------------------------
/src/component/header-search/index.md:
--------------------------------------------------------------------------------
1 | ---
2 | title:
3 | en-US: HeaderSearch
4 | zh-CN: HeaderSearch
5 | subtitle: 顶部搜索框
6 | cols: 1
7 | order: 8
8 | ---
9 |
10 | 通常作为全局搜索的入口,放置在导航工具条右侧。
11 |
12 | ## API
13 |
14 | 参数 | 说明 | 类型 | 默认值
15 | ----|------|-----|------
16 | placeholder | 占位文字 | string | -
17 | dataSource | 当前提示内容列表 | string[] | -
18 | onSearch | 选择某项或按下回车时的回调 | function(value) | -
19 | onChange | 输入搜索字符的回调 | function(value) | -
20 | onPressEnter | 按下回车时的回调 | function(value) | -
21 | defaultOpen | 输入框首次显示是否打开 | boolean | false
22 |
--------------------------------------------------------------------------------
/src/component/icon/index.js:
--------------------------------------------------------------------------------
1 | import Icon from 'antd/lib/icon';
2 | export default Icon;
--------------------------------------------------------------------------------
/src/component/iconfont/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitlwz/quant-ui/093c4f0ab6be5ab50015dcda82f88ebe9e87cbdc/src/component/iconfont/iconfont.eot
--------------------------------------------------------------------------------
/src/component/iconfont/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitlwz/quant-ui/093c4f0ab6be5ab50015dcda82f88ebe9e87cbdc/src/component/iconfont/iconfont.ttf
--------------------------------------------------------------------------------
/src/component/iconfont/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitlwz/quant-ui/093c4f0ab6be5ab50015dcda82f88ebe9e87cbdc/src/component/iconfont/iconfont.woff
--------------------------------------------------------------------------------
/src/component/input-number/index.js:
--------------------------------------------------------------------------------
1 | import InputNumber from 'antd/lib/input-number';
2 | export default InputNumber;
--------------------------------------------------------------------------------
/src/component/input/index.js:
--------------------------------------------------------------------------------
1 | import Input from 'antd/lib/input';
2 | export default Input;
--------------------------------------------------------------------------------
/src/component/language/allLanguage.js:
--------------------------------------------------------------------------------
1 | let language = window.localStorage.getItem("quant-language");
2 | if(!!language){
3 | language = JSON.parse(language)
4 | }
5 | language = {}
6 |
7 |
8 | export default language;
--------------------------------------------------------------------------------
/src/component/language/currentLanguage.js:
--------------------------------------------------------------------------------
1 | let current = window.localStorage.getItem("quant-currentLanguage");
2 | if(!current){
3 | current = "zh_CN"
4 | }
5 | export default current;
--------------------------------------------------------------------------------
/src/component/language/getAllLanguage.js:
--------------------------------------------------------------------------------
1 | export default function(){
2 | let language = window.localStorage.getItem("quant-language");
3 | if(!!language){
4 | return JSON.parse(language)
5 | }
6 | return {}
7 | }
--------------------------------------------------------------------------------
/src/component/language/getCurrentLanguage.js:
--------------------------------------------------------------------------------
1 | export default function(language){
2 | let current = window.localStorage.getItem("quant-currentLanguage");
3 | if(!!current){
4 | return current
5 | }
6 | return "zh_CN"
7 | }
--------------------------------------------------------------------------------
/src/component/language/getLanguageData.js:
--------------------------------------------------------------------------------
1 | import getCurrentLanguage from './getCurrentLanguage';
2 | import getAllLanguage from './getAllLanguage';
3 | export default function(data){
4 | let currentLanguage = getCurrentLanguage();
5 | let allLanguageData = getAllLanguage()
6 | if(currentLanguage === "zh_CN" ){
7 | return data
8 | }else{
9 | return allLanguageData[currentLanguage][data]
10 | }
11 | }
--------------------------------------------------------------------------------
/src/component/language/index.js:
--------------------------------------------------------------------------------
1 | import getAllLanguage from './getAllLanguage';
2 | import getCurrentLanguage from './getCurrentLanguage';
3 | import getLanguageData from './getLanguageData';
4 | import refreshLanguage from './refreshLanguage';
5 | import setCurrentLanguage from './setCurrentLanguage';
6 | import setLanguageData from './setLanguageData';
7 | export default {
8 | getAllLanguage, //获取所有语言数据
9 | getCurrentLanguage, //获取当前语言类型
10 | getLanguageData, //获取翻译当前语言
11 | refreshLanguage, //刷新语言
12 | setCurrentLanguage, //设置当前语言类型
13 | setLanguageData, //设置语言数据
14 | }
--------------------------------------------------------------------------------
/src/component/language/refreshLanguage.js:
--------------------------------------------------------------------------------
1 | export default function(){
2 | window.location.reload()
3 | }
--------------------------------------------------------------------------------
/src/component/language/setCurrentLanguage.js:
--------------------------------------------------------------------------------
1 | export default function(language){
2 | window.localStorage.setItem("quant-currentLanguage",language)
3 | }
--------------------------------------------------------------------------------
/src/component/language/setLanguageData.js:
--------------------------------------------------------------------------------
1 | import getAllLanguage from './getAllLanguage';
2 | export default function(language){
3 | let allLanguage = getAllLanguage();
4 | let arr_allLanguage = Object.keys(allLanguage);
5 | let arr_language = Object.keys(language);
6 | arr_language.forEach((l)=>{
7 | if(!!arr_allLanguage.includes(l)){
8 | allLanguage[l] = {...allLanguage[l],...language[l]}
9 | }else{
10 | allLanguage[l] = {...{},...language[l]}
11 | }
12 | })
13 | window.localStorage.setItem("quant-language",JSON.stringify(allLanguage));
14 | }
--------------------------------------------------------------------------------
/src/component/layout/index.js:
--------------------------------------------------------------------------------
1 | import Layout from 'antd/lib/layout';
2 | export default Layout;
--------------------------------------------------------------------------------
/src/component/list/index.js:
--------------------------------------------------------------------------------
1 | import List from 'antd/lib/list';
2 | export default List;
--------------------------------------------------------------------------------
/src/component/locale-provider/index.js:
--------------------------------------------------------------------------------
1 | import LocaleProvider from 'antd/lib/locale-provider';
2 | export default LocaleProvider;
--------------------------------------------------------------------------------
/src/component/mention/index.js:
--------------------------------------------------------------------------------
1 | import Mention from 'antd/lib/mention';
2 | export default Mention;
--------------------------------------------------------------------------------
/src/component/menu/index.js:
--------------------------------------------------------------------------------
1 | import Menu from 'antd/lib/menu';
2 | export default Menu;
--------------------------------------------------------------------------------
/src/component/message/index.js:
--------------------------------------------------------------------------------
1 | import message from 'antd/lib/message';
2 | export default message;
--------------------------------------------------------------------------------
/src/component/modal/index.js:
--------------------------------------------------------------------------------
1 | import Modal from 'antd/lib/modal';
2 | export default Modal;
--------------------------------------------------------------------------------
/src/component/not-found/imgs/404.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitlwz/quant-ui/093c4f0ab6be5ab50015dcda82f88ebe9e87cbdc/src/component/not-found/imgs/404.png
--------------------------------------------------------------------------------
/src/component/not-found/index.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Created by lwz.
3 | */
4 | import React from 'react';
5 | import img from './imgs/404.png';
6 | import "./index.less"
7 |
8 | class NotFound extends React.Component {
9 | static defaultProps = {
10 | img: img,
11 | };
12 | constructor(props) {
13 | super(props);
14 | this.state = {
15 | animated: ''
16 | }
17 | }
18 | enter = () => {
19 | this.setState({animated: 'hinge'})
20 | };
21 | render() {
22 | return (
23 |
24 |
25 |
26 | )
27 | }
28 | }
29 |
30 | export default NotFound;
--------------------------------------------------------------------------------
/src/component/notice-icon/NoticeIconTab.d.ts:
--------------------------------------------------------------------------------
1 | import * as React from 'react';
2 | export interface INoticeIconData {
3 | avatar?: string;
4 | title?: React.ReactNode;
5 | description?: React.ReactNode;
6 | datetime?: React.ReactNode;
7 | extra?: React.ReactNode;
8 | style?: React.CSSProperties;
9 | }
10 |
11 | export interface INoticeIconTabProps {
12 | list?: INoticeIconData[];
13 | title?: string;
14 | emptyText?: React.ReactNode;
15 | emptyImage?: string;
16 | style?: React.CSSProperties;
17 | }
18 |
19 | export default class NoticeIconTab extends React.Component {}
20 |
--------------------------------------------------------------------------------
/src/component/notice-icon/demo/basic.md:
--------------------------------------------------------------------------------
1 | ---
2 | order: 1
3 | title: 通知图标
4 | ---
5 |
6 | 通常用在导航工具栏上。
7 |
8 | ````jsx
9 | import NoticeIcon from 'ant-design-pro/lib/NoticeIcon';
10 |
11 | ReactDOM.render( , mountNode);
12 | ````
13 |
--------------------------------------------------------------------------------
/src/component/notice-icon/index.less:
--------------------------------------------------------------------------------
1 | @import '~antd/lib/style/themes/default.less';
2 |
3 | .quant-notice-icon-popover {
4 | width: 336px;
5 | .ant-popover-inner-content {
6 | padding: 0;
7 | }
8 | }
9 |
10 | .quant-notice-icon-noticeButton {
11 | cursor: pointer;
12 | display: inline-block;
13 | transition: all 0.3s;
14 | }
15 |
16 | .quant-notice-icon-icon {
17 | font-size: 16px;
18 | padding: 4px;
19 | }
20 |
21 | .quant-notice-icon-tabs {
22 | .ant-tabs-nav-scroll {
23 | text-align: center;
24 | }
25 | .ant-tabs-bar {
26 | margin-bottom: 4px;
27 | }
28 | }
29 |
--------------------------------------------------------------------------------
/src/component/notification/index.js:
--------------------------------------------------------------------------------
1 | import notification from 'antd/lib/notification';
2 | export default notification;
--------------------------------------------------------------------------------
/src/component/pagination/index.js:
--------------------------------------------------------------------------------
1 | import Pagination from 'antd/lib/pagination';
2 | export default Pagination;
--------------------------------------------------------------------------------
/src/component/popconfirm/index.js:
--------------------------------------------------------------------------------
1 | import Popconfirm from 'antd/lib/popconfirm';
2 | export default Popconfirm;
--------------------------------------------------------------------------------
/src/component/popover/index.js:
--------------------------------------------------------------------------------
1 | import Popover from 'antd/lib/popover';
2 | export default Popover;
--------------------------------------------------------------------------------
/src/component/progress/index.js:
--------------------------------------------------------------------------------
1 | import Progress from 'antd/lib/progress';
2 | export default Progress;
--------------------------------------------------------------------------------
/src/component/q-context-menu/index.js:
--------------------------------------------------------------------------------
1 | import {
2 | ContextMenu,
3 | Item,
4 | Separator,
5 | Submenu,
6 | ContextMenuProvider ,
7 | } from 'react-contexify';
8 | import 'react-contexify/dist/ReactContexify.min.css';
9 | export default {
10 | ContextMenu,
11 | Item,
12 | Separator,
13 | Submenu,
14 | ContextMenuProvider ,
15 | };
--------------------------------------------------------------------------------
/src/component/q-r-code/index.js:
--------------------------------------------------------------------------------
1 | import QRCode from 'qrcode.react';
2 | export default QRCode;
--------------------------------------------------------------------------------
/src/component/radio/index.js:
--------------------------------------------------------------------------------
1 | import Radio from 'antd/lib/radio';
2 | export default Radio;
--------------------------------------------------------------------------------
/src/component/rate/index.js:
--------------------------------------------------------------------------------
1 | import Rate from 'antd/lib/rate';
2 | export default Rate;
--------------------------------------------------------------------------------
/src/component/react-markdown/index.js:
--------------------------------------------------------------------------------
1 | import ReactMarkdown from 'react-markdown';
2 | export default ReactMarkdown;
--------------------------------------------------------------------------------
/src/component/react-qmap/index.js:
--------------------------------------------------------------------------------
1 | import ReactQMap from 'react-qmap';
2 | export default ReactQMap;
--------------------------------------------------------------------------------
/src/component/row/index.js:
--------------------------------------------------------------------------------
1 | import Row from 'antd/lib/row';
2 | export default Row;
--------------------------------------------------------------------------------
/src/component/screenfull/index.js:
--------------------------------------------------------------------------------
1 | import screenfull from 'screenfull';
2 | export default screenfull;
--------------------------------------------------------------------------------
/src/component/select/index.js:
--------------------------------------------------------------------------------
1 | import Select from 'antd/lib/select';
2 | export default Select;
--------------------------------------------------------------------------------
/src/component/slider/index.js:
--------------------------------------------------------------------------------
1 | import Slider from 'antd/lib/slider';
2 | export default Slider;
--------------------------------------------------------------------------------
/src/component/spin/index.js:
--------------------------------------------------------------------------------
1 | import Spin from 'antd/lib/spin';
2 | export default Spin;
--------------------------------------------------------------------------------
/src/component/steps/index.js:
--------------------------------------------------------------------------------
1 | import Steps from 'antd/lib/steps';
2 | export default Steps;
--------------------------------------------------------------------------------
/src/component/switch/index.js:
--------------------------------------------------------------------------------
1 | import Switch from 'antd/lib/switch';
2 | export default Switch;
--------------------------------------------------------------------------------
/src/component/table/index.js:
--------------------------------------------------------------------------------
1 | import Table from 'antd/lib/table';
2 | export default Table;
--------------------------------------------------------------------------------
/src/component/tabs/index.js:
--------------------------------------------------------------------------------
1 | import Tabs from 'antd/lib/tabs';
2 | export default Tabs;
--------------------------------------------------------------------------------
/src/component/tag/index.js:
--------------------------------------------------------------------------------
1 | import Tag from 'antd/lib/tag';
2 | export default Tag;
--------------------------------------------------------------------------------
/src/component/theme/default.less:
--------------------------------------------------------------------------------
1 | @import "~antd/lib/style/themes/default";
--------------------------------------------------------------------------------
/src/component/theme/iconfont.less:
--------------------------------------------------------------------------------
1 | @import "../iconfont/iconfont.less";
--------------------------------------------------------------------------------
/src/component/theme/index.js:
--------------------------------------------------------------------------------
1 | const getCurrentColor = () =>{
2 | return window.localStorage.getItem("quant-theme")||"default"
3 | }
4 | const setCurrentColor = (color) =>{
5 | window.localStorage.setItem("quant-theme",color)
6 | }
7 | const refreshColor = () =>{
8 | window.location.reload()
9 | }
10 | export default {
11 | getCurrentColor, //获取当前主题颜色
12 | refreshColor, //刷新主题颜色
13 | setCurrentColor, //设置当前主题颜色
14 | }
--------------------------------------------------------------------------------
/src/component/theme/index.less:
--------------------------------------------------------------------------------
1 | @import "~antd/dist/antd.less";
2 |
3 |
4 |
5 | @import "../sliding-validation/style.less";
6 | @import "../drop-tree/index.less";
7 | @import "../entry-table/style.less";
--------------------------------------------------------------------------------
/src/component/time-picker/index.js:
--------------------------------------------------------------------------------
1 | import TimePicker from 'antd/lib/time-picker';
2 | export default TimePicker;
--------------------------------------------------------------------------------
/src/component/timeline/index.js:
--------------------------------------------------------------------------------
1 | import Timeline from 'antd/lib/timeline';
2 | export default Timeline;
--------------------------------------------------------------------------------
/src/component/tooltip/index.js:
--------------------------------------------------------------------------------
1 | import Tooltip from 'antd/lib/tooltip';
2 | export default Tooltip;
--------------------------------------------------------------------------------
/src/component/transfer/index.js:
--------------------------------------------------------------------------------
1 | import Transfer from 'antd/lib/transfer';
2 | export default Transfer;
--------------------------------------------------------------------------------
/src/component/tree-select/index.js:
--------------------------------------------------------------------------------
1 | import TreeSelect from 'antd/lib/tree-select';
2 | export default TreeSelect;
--------------------------------------------------------------------------------
/src/component/tree/index.js:
--------------------------------------------------------------------------------
1 | import Tree from 'antd/lib/tree';
2 | export default Tree;
--------------------------------------------------------------------------------
/src/component/upload/index.js:
--------------------------------------------------------------------------------
1 | import Upload from 'antd/lib/upload';
2 | export default Upload;
--------------------------------------------------------------------------------
/src/component/utils/compare.js:
--------------------------------------------------------------------------------
1 | export default function compare(origin, target) {
2 | if (typeof target === 'object') {
3 | if (typeof origin !== 'object') return false
4 | for (let key of Object.keys(target))
5 | if (!compare(origin[key], target[key])) return false
6 | return true
7 | } else return origin === target
8 | }
--------------------------------------------------------------------------------
/src/component/utils/currency.js:
--------------------------------------------------------------------------------
1 | import currency from 'currency';
2 | export default currency;
--------------------------------------------------------------------------------
/src/component/utils/debounce.js:
--------------------------------------------------------------------------------
1 | var throttle = require('./throttle');
2 |
3 | /**
4 | * @desc 函数防抖
5 | * 与throttle不同的是,debounce保证一个函数在多少毫秒内不再被触发,只会执行一次,
6 | * 要么在第一次调用return的防抖函数时执行,要么在延迟指定毫秒后调用。
7 | * @example 适用场景:如在线编辑的自动存储防抖。
8 | * @param {Number} delay 0或者更大的毫秒数。 对于事件回调,大约100或250毫秒(或更高)的延迟是最有用的。
9 | * @param {Boolean} atBegin 可选,默认为false。
10 | * 如果`atBegin`为false或未传入,回调函数则在第一次调用return的防抖函数后延迟指定毫秒调用。
11 | 如果`atBegin`为true,回调函数则在第一次调用return的防抖函数时直接执行
12 | * @param {Function} callback 延迟毫秒后执行的函数。`this`上下文和所有参数都是按原样传递的,
13 | * 执行去抖动功能时,,调用`callback`。
14 | *
15 | * @return {Function} 新的防抖函数。
16 | */
17 | function debounce(delay, atBegin, callback) {
18 | return callback === undefined ? throttle(delay, atBegin, false) : throttle(delay, callback, atBegin !== false);
19 | };
20 | module.exports = debounce;
--------------------------------------------------------------------------------
/src/component/utils/getCookie.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * @desc 根据name读取cookie
4 | * @param {String} name
5 | * @return {String}
6 | */
7 | function getCookie(name) {
8 | var arr = document.cookie.replace(/\s/g, "").split(';');
9 | for (var i = 0; i < arr.length; i++) {
10 | var tempArr = arr[i].split('=');
11 | if (tempArr[0] == name) {
12 | return decodeURIComponent(tempArr[1]);
13 | }
14 | }
15 | return '';
16 | }
17 |
18 | module.exports = getCookie
--------------------------------------------------------------------------------
/src/component/utils/getOS.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * @desc 获取操作系统类型
4 | * @return {String}
5 | */
6 | function getOS() {
7 | var userAgent = 'navigator' in window && 'userAgent' in navigator && navigator.userAgent.toLowerCase() || '';
8 | var vendor = 'navigator' in window && 'vendor' in navigator && navigator.vendor.toLowerCase() || '';
9 | var appVersion = 'navigator' in window && 'appVersion' in navigator && navigator.appVersion.toLowerCase() || '';
10 |
11 | if (/iphone/i.test(userAgent) || /ipad/i.test(userAgent) || /ipod/i.test(userAgent)) return 'ios'
12 | if (/android/i.test(userAgent)) return 'android'
13 | if (/win/i.test(appVersion) && /phone/i.test(userAgent)) return 'windowsPhone'
14 | if (/mac/i.test(appVersion)) return 'MacOSX'
15 | if (/win/i.test(appVersion)) return 'windows'
16 | if (/linux/i.test(appVersion)) return 'linux'
17 | }
18 |
19 | module.exports = getOS;
--------------------------------------------------------------------------------
/src/component/utils/index.js:
--------------------------------------------------------------------------------
1 | import compare from "./compare"
2 | import throttle from "./compare"
3 | import debounce from "./debounce"
4 | import currency from "./currency"
5 | import parseQueryString from "./parseQueryString"
6 | import stringfyQueryString from "./stringfyQueryString"
7 | import getExplore from "./getExplore"
8 | import getOS from "./getOS"
9 | import getCookie from "./getCookie"
10 | import removeCookie from "./removeCookie"
11 | import setCookie from "./setCookie"
12 | export default {
13 | compare,
14 | throttle,
15 | debounce,
16 | currency,
17 | parseQueryString,
18 | stringfyQueryString,
19 | getExplore,
20 | getOS,
21 | getCookie,
22 | removeCookie,
23 | setCookie
24 | };
--------------------------------------------------------------------------------
/src/component/utils/parseQueryString.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * @desc url参数转对象
4 | * @param {String} url default: window.location.href
5 | * @return {Object}
6 | */
7 | function parseQueryString(url) {
8 | url = !url ? window.location.href : url;
9 | if(url.indexOf('?') === -1) {
10 | return {};
11 | }
12 | var search = url[0] === '?' ? url.substr(1) : url.substring(url.lastIndexOf('?') + 1);
13 | if (search === '') {
14 | return {};
15 | }
16 | search = search.split('&');
17 | var query = {};
18 | for (var i = 0; i < search.length; i++) {
19 | var pair = search[i].split('=');
20 | query[decodeURIComponent(pair[0])] = decodeURIComponent(pair[1] || '');
21 | }
22 | return query;
23 | }
24 |
25 | module.exports = parseQueryString
--------------------------------------------------------------------------------
/src/component/utils/removeCookie.js:
--------------------------------------------------------------------------------
1 | var setCookie = require('./setCookie');
2 | /**
3 | *
4 | * @desc 根据name删除cookie
5 | * @param {String} name
6 | */
7 | function removeCookie(name) {
8 | // 设置已过期,系统会立刻删除cookie
9 | setCookie(name, '1', -1);
10 | }
11 |
12 | module.exports = removeCookie
--------------------------------------------------------------------------------
/src/component/utils/setCookie.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * @desc 设置Cookie
4 | * @param {String} name
5 | * @param {String} value
6 | * @param {Number} days
7 | */
8 | function setCookie(name, value, days) {
9 | var date = new Date();
10 | date.setDate(date.getDate() + days);
11 | document.cookie = name + '=' + value + ';expires=' + date;
12 | }
13 |
14 | module.exports = setCookie
--------------------------------------------------------------------------------
/src/component/utils/stringfyQueryString.js:
--------------------------------------------------------------------------------
1 | /**
2 | *
3 | * @desc 对象序列化
4 | * @param {Object} obj
5 | * @return {String}
6 | */
7 | function stringfyQueryString(obj) {
8 | if (!obj) return '';
9 | var pairs = [];
10 |
11 | for (var key in obj) {
12 | var value = obj[key];
13 |
14 | if (value instanceof Array) {
15 | for (var i = 0; i < value.length; ++i) {
16 | pairs.push(encodeURIComponent(key + '[' + i + ']') + '=' + encodeURIComponent(value[i]));
17 | }
18 | continue;
19 | }
20 |
21 | pairs.push(encodeURIComponent(key) + '=' + encodeURIComponent(obj[key]));
22 | }
23 |
24 | return pairs.join('&');
25 | }
26 |
27 | module.exports = stringfyQueryString
--------------------------------------------------------------------------------
/src/component/version/index.js:
--------------------------------------------------------------------------------
1 | import version from 'antd/lib/version';
2 | export default version;
--------------------------------------------------------------------------------
/src/examples/Code.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {Collapse } from 'quant-ui';
3 | const Panel = Collapse.Panel;
4 | class Code extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | )
13 | }
14 | }
15 |
16 | export default Code;
17 |
--------------------------------------------------------------------------------
/src/examples/HeaderCustom.less:
--------------------------------------------------------------------------------
1 | .HeaderCustom_color{
2 | color: @primary-color ;
3 | }
4 | .HeaderCustom_0{
5 | background: #fff !important;
6 | padding: 0 !important;
7 | position: fixed;
8 | z-index: 200;
9 | width: calc(~"100% - 0px");;
10 | }
11 | .HeaderCustom_200{
12 | background: #fff !important;
13 | padding: 0 !important;
14 | position: fixed;
15 | z-index: 200;
16 | width: calc(~"100% - 200px");;
17 | }
--------------------------------------------------------------------------------
/src/examples/UI/Color/Basic1/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { colorPicker} from 'quant-ui';
3 | let { SketchPicker } = colorPicker;
4 | class Detail extends Component {
5 | onChange = (color, event) =>{
6 | console.log(color, event)
7 | }
8 | render() {
9 | return (
10 |
11 | );
12 | }
13 | }
14 | export default Detail;
15 |
--------------------------------------------------------------------------------
/src/examples/UI/Color/Basic2/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { colorPicker} from 'quant-ui';
3 | let { PhotoshopPicker } = colorPicker;
4 | class Detail extends Component {
5 | onChange = (color, event) =>{
6 | console.log(color, event)
7 | }
8 | render() {
9 | return (
10 |
11 | );
12 | }
13 | }
14 | export default Detail;
15 |
--------------------------------------------------------------------------------
/src/examples/UI/Color/Basic3/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { colorPicker} from 'quant-ui';
3 | let { SwatchesPicker } = colorPicker;
4 | class Detail extends Component {
5 | onChange = (color, event) =>{
6 | console.log(color, event)
7 | }
8 | render() {
9 | return (
10 |
11 | );
12 | }
13 | }
14 | export default Detail;
15 |
--------------------------------------------------------------------------------
/src/examples/UI/Color/Basic4/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { colorPicker} from 'quant-ui';
3 | let { SliderPicker } = colorPicker;
4 | class Detail extends Component {
5 | onChange = (color, event) =>{
6 | console.log(color, event)
7 | }
8 | render() {
9 | return (
10 |
11 | );
12 | }
13 | }
14 | export default Detail;
15 |
--------------------------------------------------------------------------------
/src/examples/UI/Copy/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { copy,Button } from 'quant-ui';
3 | class Detail extends Component {
4 | copyClick = () =>{
5 | copy("复制的内容")
6 | }
7 | render() {
8 | return (
9 |
10 | 复制
11 |
12 | );
13 | }
14 | }
15 |
16 | export default Detail;
17 |
--------------------------------------------------------------------------------
/src/examples/UI/CountDown/Basic1/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { CountDown } from 'quant-ui';
3 |
4 | const targetTime = new Date().getTime() + 3900000;
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/UI/CountDown/api.js:
--------------------------------------------------------------------------------
1 |
2 | const api = [
3 | {
4 | title: "API",
5 | api: [
6 | {
7 | key: "1",
8 | parameter: "format", //字段名
9 | instructions: '时间格式化显示', //描述
10 | type: ' Function(time)', //类型
11 | default: "-", //默认值
12 | must: '',
13 | },{
14 | key: "2",
15 | parameter: "target", //字段名
16 | instructions: '目标时间', //描述
17 | type: 'Date', //类型
18 | default: "", //默认值
19 | must: '',
20 | },{
21 | key: "3",
22 | parameter: "onEnd", //字段名
23 | instructions: ' 倒计时结束回调', //描述
24 | type: 'funtion', //类型
25 | default: "", //默认值
26 | must: '',
27 | }
28 | ]
29 | }
30 | ];
31 |
32 | export default {
33 | api
34 | }
--------------------------------------------------------------------------------
/src/examples/UI/DropTree/renderItem/quantdo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitlwz/quant-ui/093c4f0ab6be5ab50015dcda82f88ebe9e87cbdc/src/examples/UI/DropTree/renderItem/quantdo.png
--------------------------------------------------------------------------------
/src/examples/UI/Ellipsis/Basic1/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Ellipsis } from 'quant-ui';
3 |
4 |
5 | const article = 'There were injuries alleged in three cases in 2015, and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.';
6 | class Detail extends Component {
7 |
8 | render() {
9 | return (
10 |
11 | {article}
12 |
Show Tooltip
13 | {article}
14 |
15 | );
16 | }
17 | }
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/UI/Ellipsis/Basic2/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Ellipsis } from 'quant-ui';
3 |
4 |
5 | const article = There were injuries alleged in three cases in 2015 , and a fourth incident in September, according to the safety recall report. After meeting with US regulators in October, the firm decided to issue a voluntary recall.
;
6 | class Detail extends Component {
7 |
8 | render() {
9 | return (
10 |
11 | {article}
12 |
13 | );
14 | }
15 | }
16 | export default Detail;
17 |
--------------------------------------------------------------------------------
/src/examples/UI/Ellipsis/api.js:
--------------------------------------------------------------------------------
1 |
2 | const api = [
3 | {
4 | title: "API",
5 | api: [
6 | {
7 | key: "1",
8 | parameter: "tooltip", //字段名
9 | instructions: '移动到文本展示完整内容的提示', //描述
10 | type: ' boolean', //类型
11 | default: "-", //默认值
12 | must: '',
13 | },{
14 | key: "2",
15 | parameter: "length", //字段名
16 | instructions: '在按照长度截取下的文本最大字符数,超过则截取省略', //描述
17 | type: 'number', //类型
18 | default: "", //默认值
19 | must: '',
20 | },{
21 | key: "3",
22 | parameter: "lines", //字段名
23 | instructions: '在按照行数截取下最大的行数,超过则截取省略', //描述
24 | type: 'number', //类型
25 | default: "1", //默认值
26 | must: '',
27 | }
28 | ]
29 | }
30 | ];
31 |
32 | export default {
33 | api
34 | }
--------------------------------------------------------------------------------
/src/examples/UI/HeaderSearch/notifyIcon/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { HeaderSearch } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 |
17 | {
21 | console.log('input', value); // eslint-disable-line
22 | }}
23 | onPressEnter={(value) => {
24 | console.log('enter', value); // eslint-disable-line
25 | }}
26 | />
27 |
28 | );
29 | }
30 | }
31 | export default Detail;
32 |
--------------------------------------------------------------------------------
/src/examples/UI/NProgress/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {Button, Nprogress } from 'quant-ui';
3 | class NProgressCode extends Component {
4 | nprogressStart = () => {
5 | Nprogress.start();
6 | };
7 | nprogressDone = () => {
8 | Nprogress.done();
9 | };
10 | render() {
11 | return (
12 |
13 |
14 |
15 | Nprogress.start() — 显示进度条
16 |
17 |
18 |
19 | Nprogress.done() — 进度条完成
20 |
21 |
22 | );
23 | }
24 | }
25 |
26 | export default NProgressCode;
27 |
--------------------------------------------------------------------------------
/src/examples/UI/NoticeIcon/notifyIcon/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { NoticeIcon } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 |
8 |
9 |
10 | );
11 | }
12 | }
13 |
14 | export default Detail;
15 |
--------------------------------------------------------------------------------
/src/examples/UI/QRCode/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { QRCode } from 'quant-ui';
3 | class QRCodeCode extends Component {
4 |
5 | render() {
6 | return (
7 |
8 |
9 |
10 | );
11 | }
12 | }
13 |
14 | export default QRCodeCode;
15 |
--------------------------------------------------------------------------------
/src/examples/UI/QRCode/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card, Button, Tabs } from 'quant-ui';
3 | import Api from '../../API.js';
4 | import data from './api.js';
5 | import Detail from './Detail.js';
6 | import Code from '../../Code.js';
7 | const TabPane = Tabs.TabPane;
8 | class App extends Component {
9 | render() {
10 | return (
11 |
12 |
二维码生成
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | );
28 | }
29 | }
30 |
31 | export default App;
32 |
--------------------------------------------------------------------------------
/src/examples/UI/ReactMarkdown/Basic1/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { ReactMarkdown ,Input} from 'quant-ui';
3 | const { TextArea } = Input;
4 | class Detail extends Component {
5 | constructor(props){
6 | super(props)
7 | this.state = {
8 | value:""
9 | }
10 | }
11 | onChange = (e) =>{
12 | this.setState({
13 | value:e.target.value
14 | })
15 | }
16 | render() {
17 | return (
18 |
19 |
20 |
请输入Markdown语法
21 |
22 |
23 |
24 |
25 | );
26 | }
27 | }
28 | export default Detail;
29 |
--------------------------------------------------------------------------------
/src/examples/UI/ReactMarkdown/api.js:
--------------------------------------------------------------------------------
1 |
2 | const api = [
3 | {
4 | title: "API",
5 | api: [
6 |
7 | ]
8 | }
9 | ];
10 |
11 | export default {
12 | api
13 | }
--------------------------------------------------------------------------------
/src/examples/UI/Resizable/api.js:
--------------------------------------------------------------------------------
1 |
2 | const api = [
3 | {
4 | title: "API",
5 | api: [
6 | {
7 | key: "1",
8 | parameter: "format", //字段名
9 | instructions: '时间格式化显示', //描述
10 | type: ' Function(time)', //类型
11 | default: "-", //默认值
12 | must: '',
13 | },{
14 | key: "2",
15 | parameter: "target", //字段名
16 | instructions: '目标时间', //描述
17 | type: 'Date', //类型
18 | default: "", //默认值
19 | must: '',
20 | },{
21 | key: "3",
22 | parameter: "onEnd", //字段名
23 | instructions: ' 倒计时结束回调', //描述
24 | type: 'funtion', //类型
25 | default: "", //默认值
26 | must: '',
27 | }
28 | ]
29 | }
30 | ];
31 |
32 | export default {
33 | api
34 | }
--------------------------------------------------------------------------------
/src/examples/UI/SlidingValidation/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { SlidingValidation } from 'quant-ui';
3 | class SlidingValidationCode extends Component {
4 | render() {
5 | return (
6 |
7 |
8 |
9 | );
10 | }
11 | }
12 |
13 | export default SlidingValidationCode;
14 |
--------------------------------------------------------------------------------
/src/examples/animation/BasicAnimations/Basic1/style.less:
--------------------------------------------------------------------------------
1 | @import "./animate.css";
2 | .BasicAnimations .gutter-row{
3 | margin-top: 7px;
4 | margin-bottom: 7px;
5 | }
--------------------------------------------------------------------------------
/src/examples/animation/BasicAnimations/api.js:
--------------------------------------------------------------------------------
1 |
2 | const api = [
3 | {
4 | title: "API",
5 | api: [
6 | {
7 | key: "1",
8 | parameter: "format", //字段名
9 | instructions: '时间格式化显示', //描述
10 | type: ' Function(time)', //类型
11 | default: "-", //默认值
12 | must: '',
13 | },{
14 | key: "2",
15 | parameter: "target", //字段名
16 | instructions: '目标时间', //描述
17 | type: 'Date', //类型
18 | default: "", //默认值
19 | must: '',
20 | },{
21 | key: "3",
22 | parameter: "onEnd", //字段名
23 | instructions: ' 倒计时结束回调', //描述
24 | type: 'funtion', //类型
25 | default: "", //默认值
26 | must: '',
27 | }
28 | ]
29 | }
30 | ];
31 |
32 | export default {
33 | api
34 | }
--------------------------------------------------------------------------------
/src/examples/antd/Avatar/Badge/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Avatar, Badge } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 | }
18 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Avatar/Basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, {Component} from 'react';
2 | import {Avatar} from 'quant-ui';
3 | class Detail extends Component {
4 | render() {
5 | return (
6 |
19 | );
20 | }
21 | }
22 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Avatar/Type/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Avatar } from 'quant-ui';
3 | class Detail extends Component {
4 | render() {
5 | return (
6 |
7 |
8 |
U
9 |
USER
10 |
11 |
U
12 |
13 |
14 | );
15 | }
16 | }
17 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Badge/Basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Avatar,Badge } from 'quant-ui';
3 |
4 |
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 | }
20 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Badge/MaxNum/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Avatar,Badge } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 | );
22 | }
23 | }
24 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Badge/RedDot/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Icon, Badge } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
18 | );
19 | }
20 | }
21 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Badge/Title/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Avatar, Badge } from 'quant-ui';
3 |
4 |
5 | class Detail extends Component {
6 | render() {
7 | return (
8 |
9 |
10 |
11 |
12 |
鼠标放在状态点上时显示文字
13 |
14 | );
15 | }
16 | }
17 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Badge/ToClick/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {Avatar,Badge } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Badge/UsedAlone/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {Badge } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Calendar/Basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Calendar } from 'quant-ui';
3 |
4 |
5 | class Detail extends Component {
6 | render() {
7 | return (
8 |
9 | );
10 | }
11 | }
12 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Calendar/CardPattern/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {Calendar } from 'quant-ui';
3 |
4 |
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Card/CardInColumn/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card, Col, Row } from 'quant-ui';
3 |
4 |
5 | class Detail extends Component {
6 | render() {
7 | return (
8 |
9 |
10 |
11 | Card content
12 |
13 |
14 | Card content
15 |
16 |
17 | Card content
18 |
19 |
20 |
21 | );
22 | }
23 | }
24 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Card/FlexibleContent/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card } from 'quant-ui';
3 |
4 | const { Meta } = Card;
5 |
6 | class Detail extends Component {
7 | render() {
8 | return (
9 | }
13 | >
14 |
18 |
19 | );
20 | }
21 | }
22 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Card/LoadingCard/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card, Button } from 'quant-ui';
3 |
4 |
5 | class Detail extends Component {
6 | state = {
7 | loading: true,
8 | }
9 | handleClick = () => {
10 | this.setState({ loading: !this.state.loading });
11 | }
12 | render() {
13 | return (
14 |
15 |
16 | Whatever content
17 |
18 | Toggle loading
19 |
20 | );
21 | }
22 | }
23 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Card/MoreContent/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card, Icon, Avatar } from 'quant-ui';
3 |
4 | const { Meta } = Card;
5 |
6 | class Detail extends Component {
7 | render() {
8 | return (
9 | }
12 | actions={[ , , ]}
13 | >
14 | }
16 | title="Card title"
17 | description="This is the description"
18 | />
19 |
20 | );
21 | }
22 | }
23 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Card/NoBorder/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card } from 'quant-ui';
3 |
4 |
5 | class Detail extends Component {
6 | render() {
7 | return (
8 |
9 |
10 | Card content
11 | Card content
12 | Card content
13 |
14 |
15 | );
16 | }
17 | }
18 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Card/SimpleCard/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card } from 'quant-ui';
3 |
4 |
5 | class Detail extends Component {
6 | render() {
7 | return (
8 |
9 | Card content
10 | Card content
11 | Card content
12 |
13 | );
14 | }
15 | }
16 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Card/Typical/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card } from 'quant-ui';
3 |
4 |
5 | class Detail extends Component {
6 | render() {
7 | return (
8 | More} style={{ width: 300 }}>
9 | Card content
10 | Card content
11 | Card content
12 |
13 | );
14 | }
15 | }
16 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Carousel/AutoPlay/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Carousel } from 'quant-ui';
3 | import "./style.less";
4 |
5 | class Detail extends Component {
6 | onChange = (a, b, c) => {
7 | return console.log(a, b, c);
8 | }
9 | render() {
10 | return (
11 |
12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
18 |
19 | );
20 | }
21 | }
22 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Carousel/AutoPlay/style.less:
--------------------------------------------------------------------------------
1 | //style.less
2 |
3 | .ant-carousel .slick-slide {
4 | text-align: center;
5 | height: 160px;
6 | line-height: 160px;
7 | background: #364d79;
8 | overflow: hidden;
9 | }
10 |
11 | .ant-carousel .slick-slide h3 {
12 | color: #fff;
13 | }
--------------------------------------------------------------------------------
/src/examples/antd/Carousel/Basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Carousel } from 'quant-ui';
3 | import "./style.less";
4 |
5 | class Detail extends Component {
6 | onChange = (a, b, c) => {
7 | return console.log(a, b, c);
8 | }
9 | render() {
10 | return (
11 |
12 |
13 |
1
14 |
2
15 |
3
16 |
4
17 |
18 |
19 | );
20 | }
21 | }
22 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Carousel/Basic/style.less:
--------------------------------------------------------------------------------
1 | //style.less
2 |
3 | .ant-carousel .slick-slide {
4 | text-align: center;
5 | height: 160px;
6 | line-height: 160px;
7 | background: #364d79;
8 | overflow: hidden;
9 | }
10 |
11 | .ant-carousel .slick-slide h3 {
12 | color: #fff;
13 | }
--------------------------------------------------------------------------------
/src/examples/antd/Carousel/FadeIn/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Carousel } from 'quant-ui';
3 | import "./style.less";
4 |
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 |
10 |
11 |
1
12 |
2
13 |
3
14 |
4
15 |
16 |
17 | );
18 | }
19 | }
20 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Carousel/FadeIn/style.less:
--------------------------------------------------------------------------------
1 | //style.less
2 |
3 | .ant-carousel .slick-slide {
4 | text-align: center;
5 | height: 160px;
6 | line-height: 160px;
7 | background: #364d79;
8 | overflow: hidden;
9 | }
10 |
11 | .ant-carousel .slick-slide h3 {
12 | color: #fff;
13 | }
--------------------------------------------------------------------------------
/src/examples/antd/Carousel/Vertical/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Carousel } from 'quant-ui';
3 | import "./style.less";
4 |
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 |
10 |
11 |
1
12 |
2
13 |
3
14 |
4
15 |
16 |
17 | );
18 | }
19 | }
20 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Carousel/Vertical/style.less:
--------------------------------------------------------------------------------
1 | //style.less
2 |
3 | .ant-carousel .slick-slide {
4 | text-align: center;
5 | height: 160px;
6 | line-height: 160px;
7 | background: #364d79;
8 | overflow: hidden;
9 | }
10 |
11 | .ant-carousel .slick-slide h3 {
12 | color: #fff;
13 | }
--------------------------------------------------------------------------------
/src/examples/antd/Carousel/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'goTo(slideNumber)',
9 | description:'切换到指定面板'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'next()',
15 | description:'切换到下一面板'
16 | },
17 | {
18 | key: "3",
19 | function:'prev()',
20 | description:'切换到上一面板'
21 | },
22 |
23 | ]
24 | },
25 |
26 |
27 | ];
28 |
29 | export default {
30 | method
31 | }
--------------------------------------------------------------------------------
/src/examples/antd/Collapse/Accordion/Detail.js:
--------------------------------------------------------------------------------
1 | //一次只能展示一个面板
2 |
3 | import React, { Component } from 'react';
4 | import { Collapse } from 'quant-ui';
5 |
6 | const Panel = Collapse.Panel;
7 |
8 | const text = [
9 | 'dog,dog,dog',
10 | 'cat,cat,cat',
11 | 'flamingo,flamingo,flamingo'
12 | ]
13 | class Detail extends Component {
14 |
15 | render() {
16 | return (
17 |
18 |
19 | {text[1]}
20 |
21 |
22 | {text[2]}
23 |
24 |
25 | {text[0]}
26 |
27 |
28 | );
29 | }
30 | }
31 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Collapse/BasicCollapse/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Collapse } from 'quant-ui';
3 |
4 | const Panel = Collapse.Panel;
5 |
6 | const text = [
7 | 'dog,dog,dog',
8 | 'cat,cat,cat',
9 | 'flamingo,flamingo,flamingo'
10 | ]
11 | class Detail extends Component {
12 |
13 | render() {
14 | return (
15 |
16 |
17 | {text[1]}
18 |
19 |
20 | {text[2]}
21 |
22 |
23 | {text[0]}
24 |
25 |
26 | );
27 | }
28 | }
29 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/Collapse/HiddenArrow/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Collapse } from 'quant-ui';
3 |
4 | const Panel = Collapse.Panel;
5 |
6 | const text = `
7 | A dog is a type of domesticated animal.
8 | Known for its loyalty and faithfulness,
9 | it can be found as a welcome guest in many households across the world.
10 | `;
11 |
12 | class Detail extends Component {
13 |
14 | render() {
15 | return (
16 |
17 |
18 | {text}
19 |
20 |
21 | {text}
22 |
23 |
24 | );
25 | }
26 | }
27 |
28 | export default Detail
--------------------------------------------------------------------------------
/src/examples/antd/List/GridList/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { List, Card} from 'quant-ui';
3 |
4 | const listData = [
5 | {
6 | title:'title 1'
7 | },
8 | {
9 | title:'title 2'
10 | },
11 | {
12 | title:'title 3'
13 | }
14 | ];
15 |
16 | class Detail extends Component {
17 |
18 | render() {
19 | return (
20 | quant-ui footer part}
24 | renderItem={item => (
25 |
26 | card content
27 |
28 | )}
29 | />
30 | );
31 | }
32 | }
33 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/List/ScrollList/style.less:
--------------------------------------------------------------------------------
1 | .demo-infinite-container {
2 | border: 1px solid #e8e8e8;
3 | border-radius: 4px;
4 | overflow: auto;
5 | padding: 8px 24px;
6 | height: 300px;
7 | }
8 | .demo-loading-container {
9 | position: absolute;
10 | bottom: 40px;
11 | width: 100%;
12 | text-align: center;
13 | }
--------------------------------------------------------------------------------
/src/examples/antd/PopOver/Basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Popover, Button } from 'quant-ui';
3 |
4 | const content=(
5 |
6 |
Content
7 |
Content
8 |
9 | )
10 |
11 | class Detail extends Component {
12 |
13 | render() {
14 | return (
15 |
16 | Hover me
17 |
18 | );
19 | }
20 | }
21 | export default Detail;
22 |
--------------------------------------------------------------------------------
/src/examples/antd/PopOver/ClosedInside/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Popover, Button } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state={
6 | visible:false,
7 | }
8 |
9 | hide=()=>{
10 | this.setState({
11 | visible:false,
12 | })
13 | }
14 |
15 | handleVisibleVhange=(visible)=>{
16 | this.setState({visible})
17 | }
18 |
19 | render() {
20 | return (
21 | close}
23 | title="Title"
24 | trigger="click"
25 | visible={this.state.visible}
26 | onVisibleChange={this.handleVisibleVhange}
27 | >
28 | click me
29 |
30 | );
31 | }
32 | }
33 | export default Detail;
34 |
--------------------------------------------------------------------------------
/src/examples/antd/Table/NestedTable/style.less:
--------------------------------------------------------------------------------
1 | .a{
2 | margin-right: 5px
3 | }
--------------------------------------------------------------------------------
/src/examples/antd/Table/Search/style.less:
--------------------------------------------------------------------------------
1 | .custom-filter-dropdown {
2 | padding: 8px;
3 | border-radius: 6px;
4 | background: #fff;
5 | box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
6 | }
7 |
8 | .custom-filter-dropdown input {
9 | width: 130px;
10 | margin-right: 8px;
11 | }
12 |
13 | .custom-filter-dropdown button {
14 | margin-right: 8px;
15 | }
16 |
17 | .highlight {
18 | color: #f50;
19 | }
--------------------------------------------------------------------------------
/src/examples/antd/Tooltip/ArrowPointDirection/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Popover, Button } from 'quant-ui';
3 | import { Tooltip } from 'antd';
4 |
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 |
10 |
11 | Align edge / 边缘对齐
12 |
13 |
14 |
15 | Arrow points to center / 箭头指向中心
16 |
17 |
18 | );
19 | }
20 | }
21 | export default Detail;
22 |
--------------------------------------------------------------------------------
/src/examples/antd/Tooltip/Basic/Detail.js:
--------------------------------------------------------------------------------
1 | //Tooltip可以代替系统默认的title提示,提供一个 按钮/文字/操作 的文案解释
2 | import React, { Component } from 'react';
3 | import { Tooltip } from 'quant-ui';
4 |
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 |
10 | Tooltip will show when mouse enter.
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/affix/AffixedState/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, Affix } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 | console.log(affixed)}>
8 | 120px to affix top
9 |
10 | );
11 | }
12 | }
13 | export default Detail;
14 |
--------------------------------------------------------------------------------
/src/examples/antd/affix/ScrollPane/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, Affix } from 'quant-ui';
3 | import "./style.less";
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 | { this.container = node; }}>
9 |
10 |
this.container}>
11 |
12 | Fixed at the top of container
13 |
14 |
15 |
16 |
17 | );
18 | }
19 | }
20 | export default Detail;
21 |
--------------------------------------------------------------------------------
/src/examples/antd/affix/ScrollPane/style.less:
--------------------------------------------------------------------------------
1 | .scrollable-container {
2 | height: 100px;
3 | overflow-y: scroll;
4 | }
5 | .scrollable-container .background{
6 | padding-top: 60px;
7 | height: 300px;
8 | background-image: url(https://zos.alipayobjects.com/rmsportal/RmjwQiJorKyobvI.jpg);
9 | }
--------------------------------------------------------------------------------
/src/examples/antd/alert/alert_Smooth/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Alert } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = {
6 | visible: true,
7 | }
8 |
9 | handleClose = () => {
10 | this.setState({ visible: false });
11 | }
12 |
13 | render() {
14 | return (
15 |
16 | {
17 | this.state.visible ? (
18 |
24 | ) : null
25 | }
26 |
placeholder text here
27 |
28 | );
29 | }
30 | }
31 |
32 | export default Detail;
33 |
--------------------------------------------------------------------------------
/src/examples/antd/alert/alert_auto_close/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Alert } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 |
8 | );
9 | }
10 | }
11 | export default Detail;
12 |
--------------------------------------------------------------------------------
/src/examples/antd/alert/alert_banner/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Alert } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | );
17 | }
18 | }
19 | export default Detail;
20 |
--------------------------------------------------------------------------------
/src/examples/antd/alert/alert_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Alert } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 |
8 | );
9 | }
10 | }
11 | export default Detail;
12 |
--------------------------------------------------------------------------------
/src/examples/antd/alert/alert_close/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Alert } from 'quant-ui';
3 |
4 | const onClose = function (e) {
5 | console.log(e, 'I was closed.');
6 | };
7 | class Detail extends Component {
8 |
9 | render() {
10 | return (
11 |
27 | );
28 | }
29 | }
30 | export default Detail;
31 |
--------------------------------------------------------------------------------
/src/examples/antd/alert/alert_style/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Alert } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 | );
17 | }
18 | }
19 | export default Detail;
20 |
--------------------------------------------------------------------------------
/src/examples/antd/autoComplete/autoCL/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { AutoComplete, Input } from 'quant-ui';
3 |
4 | const dataSource = ['Burns Bay Road', 'Downing Street', 'Wall Street'];
5 |
6 | class Detail extends Component {
7 |
8 | render() {
9 |
10 | return (
11 | option.props.children.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1}
16 | />
17 | );
18 | }
19 | }
20 |
21 | export default Detail;
22 |
--------------------------------------------------------------------------------
/src/examples/antd/autoComplete/autobasic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { AutoComplete } from 'quant-ui';
3 |
4 | function onSelect(value) {
5 | console.log('onSelect', value);
6 | }
7 |
8 |
9 | class Detail extends Component {
10 | state = {
11 | dataSource: [],
12 | }
13 |
14 | handleSearch = (value) => {
15 | this.setState({
16 | dataSource: !value ? [] : [
17 | value,
18 | value + value,
19 | value + value + value,
20 | ],
21 | });
22 | }
23 |
24 | render() {
25 | const { dataSource } = this.state;
26 | return (
27 |
34 | );
35 | }
36 | }
37 | export default Detail;
38 |
--------------------------------------------------------------------------------
/src/examples/antd/autoComplete/autocustom/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { AutoComplete } from 'quant-ui';
3 |
4 | const Option = AutoComplete.Option;
5 |
6 | class Detail extends Component {
7 | state = {
8 | result: [],
9 | }
10 |
11 | handleSearch = (value) => {
12 | let result;
13 | if (!value || value.indexOf('@') >= 0) {
14 | result = [];
15 | } else {
16 | result = ['gmail.com', '163.com', 'qq.com'].map(domain => value+'@'+domain);
17 | }
18 | this.setState({ result });
19 | }
20 |
21 | render() {
22 | const { result } = this.state;
23 | const children = result.map((email) => {
24 | return {email} ;
25 | });
26 | return (
27 |
32 | {children}
33 |
34 | );
35 | }
36 | }
37 | export default Detail;
38 |
--------------------------------------------------------------------------------
/src/examples/antd/autoComplete/autosoundmodel/style.less:
--------------------------------------------------------------------------------
1 | .global-search-wrapper {
2 | padding-right: 50px;
3 | }
4 |
5 | .global-search {
6 | width: 100%;
7 | }
8 |
9 | .global-search.ant-select-auto-complete .ant-select-selection--single {
10 | margin-right: -46px;
11 | }
12 |
13 | .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input:not(:last-child) {
14 | padding-right: 62px;
15 | }
16 |
17 | .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix {
18 | right: 0;
19 | }
20 |
21 | .global-search.ant-select-auto-complete .ant-input-affix-wrapper .ant-input-suffix button {
22 | border-top-left-radius: 0;
23 | border-bottom-left-radius: 0;
24 | }
25 |
26 | .global-search-item-count {
27 | position: absolute;
28 | right: 16px;
29 | }
--------------------------------------------------------------------------------
/src/examples/antd/breadcrumb/breadcrumbbasic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Breadcrumb } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 | Home
10 | Application Center
11 | Application List
12 | An Application
13 |
14 | );
15 | }
16 | }
17 | export default Detail;
18 |
--------------------------------------------------------------------------------
/src/examples/antd/breadcrumb/iconic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Breadcrumb, Icon } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 |
14 | Application List
15 |
16 |
17 | Application
18 |
19 |
20 | );
21 | }
22 | }
23 | export default Detail;
24 |
--------------------------------------------------------------------------------
/src/examples/antd/breadcrumb/react-router/style.less:
--------------------------------------------------------------------------------
1 | .demo {
2 | margin: 16px;
3 | }
4 | .demo-nav {
5 | height: 30px;
6 | line-height: 30px;
7 | margin-bottom: 16px;
8 | background: #f8f8f8;
9 | }
10 | .demo-nav a {
11 | line-height: 30px;
12 | padding: 0 8px;
13 | }
14 | .app-list {
15 | margin-top: 16px;
16 | }
--------------------------------------------------------------------------------
/src/examples/antd/button/Buttontype/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 |
8 | Primary
9 | Default
10 | Dashed
11 | Danger
12 |
13 | );
14 | }
15 | }
16 | export default Detail;
17 |
--------------------------------------------------------------------------------
/src/examples/antd/button/DisabledState/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 |
8 |
Primary
9 |
Primary(disabled)
10 |
11 |
Default
12 |
Default(disabled)
13 |
14 |
Dashed
15 |
Dashed(disabled)
16 |
17 |
18 | Ghost
19 | Ghost(disabled)
20 |
21 |
22 | );
23 | }
24 | }
25 | export default Detail;
26 |
--------------------------------------------------------------------------------
/src/examples/antd/button/GhostButtons/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button } from 'quant-ui';
3 | class Detail extends Component {
4 | render() {
5 | return (
6 |
7 | Primary
8 | Default
9 | Dashed
10 | danger
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/button/IconButton/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button } from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | render() {
6 | return (
7 |
8 |
9 | Search
10 |
11 | Search
12 |
13 |
14 | Search
15 |
16 | Search
17 |
18 | );
19 | }
20 | }
21 | export default Detail;
22 |
--------------------------------------------------------------------------------
/src/examples/antd/cascader/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/checkbox/check_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Checkbox } from 'quant-ui';
3 |
4 | function onChange(e) {
5 | console.log('checked ='+e.target.checked);
6 | }
7 | class Detail extends Component {
8 | render() {
9 | return (
10 | Checkbox
11 | );
12 | }
13 | }
14 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/checkbox/check_disabled/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Checkbox } from 'quant-ui';
3 |
4 | function onChange(e) {
5 | console.log('checked =' + e.target.checked);
6 | }
7 | class Detail extends Component {
8 | render() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 | }
18 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/checkbox/check_layout/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Checkbox, Row, Col } from 'quant-ui';
3 |
4 | function onChange(checkedValues) {
5 | console.log('checked = ', checkedValues);
6 | }
7 |
8 | class Detail extends Component {
9 |
10 | render() {
11 | return (
12 |
13 |
14 | A
15 | B
16 | C
17 | D
18 | E
19 |
20 |
21 | );
22 | }
23 | }
24 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/checkbox/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/datePicker/dataPicker_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { DatePicker } from 'quant-ui';
3 |
4 | const { MonthPicker, RangePicker, WeekPicker } = DatePicker;
5 |
6 | function onChange(date, dateString) {
7 | console.log(date, dateString);
8 | }
9 |
10 | class Detail extends Component {
11 |
12 | render() {
13 | return (
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | );
24 | }
25 | }
26 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/datePicker/dataPicker_extra_footer/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { DatePicker } from 'quant-ui';
3 |
4 | const { RangePicker, MonthPicker } = DatePicker;
5 |
6 | class Detail extends Component {
7 | render() {
8 | return (
9 |
10 | 'extra footer'} />
11 |
12 | 'extra footer'} showTime />
13 |
14 | 'extra footer'} />
15 |
16 | 'extra footer'} showTime />
17 |
18 | 'extra footer'} placeholder="Select month" />
19 |
20 | );
21 | }
22 | }
23 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/datePicker/dataPicker_forbid/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { DatePicker } from 'quant-ui';
3 |
4 | import moment from 'moment';
5 |
6 | const { MonthPicker, RangePicker } = DatePicker;
7 |
8 | const dateFormat = 'YYYY-MM-DD';
9 |
10 | class Detail extends Component {
11 |
12 | render() {
13 | return (
14 |
15 |
16 |
17 |
18 |
19 |
23 |
24 | );
25 | }
26 | }
27 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/datePicker/dataPicker_format/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { DatePicker } from 'quant-ui';
3 | import moment from 'moment';
4 | const { MonthPicker, RangePicker } = DatePicker;
5 | const dateFormat = 'YYYY/MM/DD';
6 | const monthFormat = 'YYYY/MM';
7 | class Detail extends Component {
8 |
9 | render() {
10 | return (
11 |
12 |
13 |
14 |
15 |
16 |
20 |
21 | );
22 | }
23 | }
24 | export default Detail;
--------------------------------------------------------------------------------
/src/examples/antd/datePicker/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/drawer/drawer_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Drawer, Button } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = { visible: false };
6 |
7 | showDrawer = () => {
8 | this.setState({
9 | visible: true,
10 | });
11 | };
12 |
13 | onClose = () => {
14 | this.setState({
15 | visible: false,
16 | });
17 | };
18 |
19 | render() {
20 | return (
21 |
22 |
23 | Open
24 |
25 |
32 | Some contents...
33 | Some contents...
34 | Some contents...
35 |
36 |
37 | );
38 | }
39 | }
40 | export default Detail;
41 |
--------------------------------------------------------------------------------
/src/examples/antd/drawer/drawer_placement/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Drawer, Button } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = { visible: false };
6 |
7 | showDrawer = () => {
8 | this.setState({
9 | visible: true,
10 | });
11 | };
12 |
13 | onClose = () => {
14 | this.setState({
15 | visible: false,
16 | });
17 | };
18 |
19 | render() {
20 | return (
21 |
22 |
23 | Open
24 |
25 |
32 | Some contents...
33 | Some contents...
34 | Some contents...
35 |
36 |
37 | );
38 | }
39 | }
40 |
41 | export default Detail;
42 |
--------------------------------------------------------------------------------
/src/examples/antd/dropdown/clickright/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Menu, Dropdown } from 'quant-ui';
3 |
4 | const menu = (
5 |
6 | 1st menu item
7 | 2nd menu item
8 | 3rd menu item
9 |
10 | );
11 |
12 | class Detail extends Component {
13 |
14 | render() {
15 | return (
16 |
17 | Right Click on Me
18 |
19 | );
20 | }
21 | }
22 | export default Detail;
23 |
--------------------------------------------------------------------------------
/src/examples/antd/dropdown/dropdownbasic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Menu, Dropdown, Icon } from 'quant-ui';
3 |
4 | const menu = (
5 |
6 |
7 | 1st menu item
8 |
9 |
10 | 2nd menu item
11 |
12 |
13 | 3rd menu item
14 |
15 |
16 | );
17 |
18 | class Detail extends Component {
19 |
20 | render() {
21 | return (
22 |
23 |
24 | Hover me
25 |
26 |
27 | );
28 | }
29 | }
30 | export default Detail;
31 |
--------------------------------------------------------------------------------
/src/examples/antd/dropdown/otherElement/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Menu, Dropdown, Icon } from 'quant-ui';
3 |
4 | const menu = (
5 |
6 |
7 | 1st menu item
8 |
9 |
10 | 2nd menu item
11 |
12 |
13 | 3rd menu item(disabled)
14 |
15 | );
16 |
17 |
18 | class Detail extends Component {
19 |
20 | render() {
21 | return (
22 |
23 |
24 | Hover me
25 |
26 |
27 | );
28 | }
29 | }
30 | export default Detail;
31 |
--------------------------------------------------------------------------------
/src/examples/antd/dropdown/triggerevents/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Menu, Dropdown, Icon, message } from 'quant-ui';
3 |
4 | const onClick = function ({ key }) {
5 | message.info('Click on item' + key);
6 | };
7 |
8 | const menu = (
9 |
10 | 1st menu item
11 | 2nd memu item
12 | 3rd menu item
13 |
14 | );
15 | class Detail extends Component {
16 |
17 | render() {
18 | return (
19 |
20 |
21 | Hover me, Click menu item
22 |
23 |
24 | );
25 | }
26 | }
27 | export default Detail;
28 |
--------------------------------------------------------------------------------
/src/examples/antd/dropdown/triggermode/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Menu, Dropdown, Icon } from 'quant-ui';
3 |
4 | const menu = (
5 |
6 |
7 | 1st menu item
8 |
9 |
10 | 2nd menu item
11 |
12 |
13 | 3rd menu item
14 |
15 | );
16 | class Detail extends Component {
17 |
18 | render() {
19 | return (
20 |
21 |
22 | Click me
23 |
24 |
25 | );
26 | }
27 | }
28 | export default Detail;
29 |
--------------------------------------------------------------------------------
/src/examples/antd/form/form_TipsWindown/style.less:
--------------------------------------------------------------------------------
1 | .collection-create-form_last-form-item {
2 | margin-bottom: 0;
3 | }
--------------------------------------------------------------------------------
/src/examples/antd/form/form_check_others/style.less:
--------------------------------------------------------------------------------
1 | #components-form-demo-validate-other .dropbox {
2 | height: 180px;
3 | line-height: 1.5;
4 | }
--------------------------------------------------------------------------------
/src/examples/antd/form/form_login/style.less:
--------------------------------------------------------------------------------
1 | #components-form-demo-normal-login .login-form {
2 | max-width: 300px;
3 | }
4 | #components-form-demo-normal-login .login-form-forgot {
5 | float: right;
6 | }
7 | #components-form-demo-normal-login .login-form-button {
8 | width: 100%;
9 | }
--------------------------------------------------------------------------------
/src/examples/antd/form/form_search/style.less:
--------------------------------------------------------------------------------
1 | .ant-advanced-search-form {
2 | padding: 24px;
3 | background: #fbfbfb;
4 | border: 1px solid #d9d9d9;
5 | border-radius: 6px;
6 | }
7 |
8 | .ant-advanced-search-form .ant-form-item {
9 | display: flex;
10 | }
11 |
12 | .ant-advanced-search-form .ant-form-item-control-wrapper {
13 | flex: 1;
14 | }
15 | .search-result-list {
16 | padding: 24px;
17 | background: #fbfbfb;
18 | border: 1px solid #d9d9d9;
19 | border-radius: 6px;
20 | text-align: center;
21 | }
22 |
--------------------------------------------------------------------------------
/src/examples/antd/form/formitems_addsub/style.less:
--------------------------------------------------------------------------------
1 | .dynamic-delete-button {
2 | cursor: pointer;
3 | position: relative;
4 | top: 4px;
5 | font-size: 24px;
6 | color: #999;
7 | transition: all .3s;
8 | }
9 | .dynamic-delete-button:hover {
10 | color: #777;
11 | }
12 | .dynamic-delete-button[disabled] {
13 | cursor: not-allowed;
14 | opacity: 0.5;
15 | }
--------------------------------------------------------------------------------
/src/examples/antd/icon/api.js:
--------------------------------------------------------------------------------
1 |
2 | const api = [
3 | {
4 | title: "API",
5 | api: [
6 | {
7 | key: "1",
8 | parameter: "disabled", //字段名
9 | type: 'boolean', //类型
10 | must: '', //是否必填
11 | default: 'false', //默认值
12 | instructions: '按钮失效状态' //描述
13 | },
14 | ]
15 | }
16 |
17 | ];
18 |
19 | export default {
20 | api
21 | }
--------------------------------------------------------------------------------
/src/examples/antd/icon/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card, Button, Tabs } from 'quant-ui';
3 | import Api from '../../API.js';
4 | import data from './api.js';
5 |
6 | import Code from '../../Code.js';
7 | const TabPane = Tabs.TabPane;
8 | class App extends Component {
9 | render() {
10 | return (
11 |
12 |
Icon图标
13 |
14 |
15 |
16 |
17 | );
18 | }
19 | }
20 |
21 | export default App;
22 |
--------------------------------------------------------------------------------
/src/examples/antd/input/input_auto_textarea/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Input } from 'quant-ui';
3 | const { TextArea } = Input;
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/input/input_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Input } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 | );
9 | }
10 | }
11 | export default Detail;
12 |
--------------------------------------------------------------------------------
/src/examples/antd/input/input_format_show/style.less:
--------------------------------------------------------------------------------
1 | .numeric-input .ant-tooltip-inner {
2 | min-width: 32px;
3 | min-height: 37px;
4 | }
5 |
6 | .numeric-input .numeric-input-title {
7 | font-size: 14px;
8 | }
--------------------------------------------------------------------------------
/src/examples/antd/input/input_search/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Input, Select, Icon } from 'quant-ui';
3 |
4 | const Search = Input.Search;
5 | class Detail extends Component {
6 | render() {
7 | return (
8 |
9 | console.log(value)}
12 | style={{ width: 200 }}
13 | />
14 |
15 | console.log(value)}
18 | enterButton
19 | />
20 |
21 | console.log(value)}
26 | />
27 |
28 | );
29 | }
30 | }
31 | export default Detail;
32 |
--------------------------------------------------------------------------------
/src/examples/antd/input/input_size/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Input } from 'quant-ui';
3 | import './style.less';
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/input/input_size/style.less:
--------------------------------------------------------------------------------
1 | .example-input .ant-input {
2 | width: 200px;
3 | margin: 0 8px 8px 0;
4 | }
--------------------------------------------------------------------------------
/src/examples/antd/input/input_textarea/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Input } from 'quant-ui';
3 |
4 | const { TextArea } = Input;
5 | class Detail extends Component {
6 | render() {
7 | return (
8 |
9 | );
10 | }
11 | }
12 | export default Detail;
13 |
--------------------------------------------------------------------------------
/src/examples/antd/inputNumber/inputNumber_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { InputNumber } from 'quant-ui';
3 |
4 | function onChange(value) {
5 | console.log('changed', value);
6 | }
7 | class Detail extends Component {
8 | render() {
9 |
10 | return (
11 |
12 | );
13 | }
14 | }
15 |
16 | export default Detail;
17 |
--------------------------------------------------------------------------------
/src/examples/antd/inputNumber/inputNumber_disabled/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { InputNumber, Button } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = {
6 | disabled: true,
7 | };
8 |
9 | toggle = () => {
10 | this.setState({
11 | disabled: !this.state.disabled,
12 | });
13 | }
14 |
15 | render() {
16 | return (
17 |
18 |
19 |
20 | Toggle disabled
21 |
22 |
23 | );
24 | }
25 | }
26 |
27 |
28 | export default Detail;
29 |
--------------------------------------------------------------------------------
/src/examples/antd/inputNumber/inputNumber_formatshow/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { InputNumber, Button } from 'quant-ui';
3 |
4 | function onChange(value) {
5 | console.log('changed', value);
6 | }
7 | class Detail extends Component {
8 |
9 | render() {
10 | return (
11 |
12 | ('$' +value).replace(/\B(?=(\d{3})+(?!\d))/g, ',')}
15 | parser={value => value.replace(/\$\s?|(,*)/g, '')}
16 | onChange={onChange}
17 | />
18 | value+'%'}
23 | parser={value => value.replace('%', '')}
24 | onChange={onChange}
25 | />
26 |
27 | );
28 | }
29 | }
30 |
31 | export default Detail;
32 |
--------------------------------------------------------------------------------
/src/examples/antd/inputNumber/inputNumber_size/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { InputNumber } from 'quant-ui';
3 | import './style.less';
4 |
5 | function onChange(value) {
6 | console.log('changed', value);
7 | }
8 |
9 | class Detail extends Component {
10 | render() {
11 |
12 | return (
13 |
14 |
15 |
16 |
17 |
18 | );
19 | }
20 | }
21 |
22 | export default Detail;
23 |
--------------------------------------------------------------------------------
/src/examples/antd/inputNumber/inputNumber_size/style.less:
--------------------------------------------------------------------------------
1 | .ant-input-number {
2 | margin-right: 10px;
3 | }
--------------------------------------------------------------------------------
/src/examples/antd/inputNumber/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/mention/mention_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Mention } from 'quant-ui';
3 |
4 | const { toString, toContentState } = Mention;
5 |
6 | function onChange(contentState) {
7 | console.log(toString(contentState));
8 | }
9 |
10 | function onSelect(suggestion) {
11 | console.log('onSelect', suggestion);
12 | }
13 | class Detail extends Component {
14 | render() {
15 |
16 | return (
17 |
24 | );
25 | }
26 | }
27 |
28 | export default Detail;
29 |
--------------------------------------------------------------------------------
/src/examples/antd/mention/mention_controlled/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Mention } from 'quant-ui';
3 |
4 | const { toContentState } = Mention;
5 | class Detail extends Component {
6 | state = {
7 | value: toContentState('@afc163'),
8 | }
9 |
10 | componentDidMount() {
11 | this.mention.focus();
12 | }
13 |
14 | handleChange = (editorState) => {
15 | this.setState({
16 | value: editorState,
17 | });
18 | }
19 |
20 | render() {
21 | return (
22 | this.mention = ele}
24 | suggestions={['afc163', 'benjycui', 'yiminghe', 'RaoHai', '中文', 'にほんご']}
25 | value={this.state.value}
26 | onChange={this.handleChange}
27 | />
28 | );
29 | }
30 | }
31 |
32 | export default Detail;
33 |
--------------------------------------------------------------------------------
/src/examples/antd/mention/mention_multi_line/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Mention, Form, Button } from 'quant-ui';
3 |
4 | const { toString } = Mention;
5 |
6 | function onChange(editorState) {
7 | console.log(toString(editorState));
8 | }
9 | class Detail extends Component {
10 | render() {
11 |
12 | return (
13 |
19 | );
20 | }
21 | }
22 |
23 | export default Detail;
24 |
--------------------------------------------------------------------------------
/src/examples/antd/mention/mention_spread_up/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Mention } from 'quant-ui';
3 |
4 | const { toString } = Mention;
5 |
6 | function onChange(contentState) {
7 | console.log(toString(contentState));
8 | }
9 |
10 | function onSelect(suggestion) {
11 | console.log('onSelect', suggestion);
12 | }
13 | class Detail extends Component {
14 | render() {
15 |
16 | return (
17 |
18 |
19 |
26 |
27 | );
28 | }
29 | }
30 |
31 | export default Detail;
32 |
--------------------------------------------------------------------------------
/src/examples/antd/mention/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/message/api.js:
--------------------------------------------------------------------------------
1 |
2 | const api = [
3 | {
4 | title: "参数",
5 | api: [
6 | {
7 | key: "1",
8 | parameter: "content", //字段名
9 | type: 'string|ReactNode', //类型
10 | must: '', //是否必填
11 | default: '-', //默认值
12 | instructions: '提示内容' //描述
13 | },
14 | {
15 | key: "2",
16 | parameter: "duration", //字段名
17 | type: 'number', //类型
18 | must: '', //是否必填
19 | default: '3', //默认值
20 | instructions: '自动关闭的延时,单位秒。设为 0 时不自动关闭。' //描述
21 | },
22 | {
23 | key: "3",
24 | parameter: "onClose", //字段名
25 | type: 'Function', //类型
26 | must: '', //是否必填
27 | default: '-', //默认值
28 | instructions: '关闭时触发的回调函数' //描述
29 | },
30 | ]
31 | }
32 |
33 | ];
34 |
35 | export default {
36 | api
37 | }
--------------------------------------------------------------------------------
/src/examples/antd/message/message_duration/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { message, Button } from 'quant-ui';
3 |
4 | const success = () => {
5 | message.success('This is a prompt message for success, and it will disappear in 10 seconds', 10);
6 | };
7 | class Detail extends Component {
8 |
9 | render() {
10 | return (
11 | Customized display duration
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/message/message_loading/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { message, Button } from 'quant-ui';
3 |
4 | const success = () => {
5 | const hide = message.loading('Action in progress..', 0);
6 | // Dismiss manually and asynchronously
7 | setTimeout(hide, 2500);
8 | };
9 | class Detail extends Component {
10 |
11 | render() {
12 | return (
13 | Display a loading indicator
14 | );
15 | }
16 | }
17 | export default Detail;
18 |
--------------------------------------------------------------------------------
/src/examples/antd/message/message_normal/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { message, Button } from 'quant-ui';
3 |
4 | const info = () => {
5 | message.info('This is a normal message');
6 | };
7 | class Detail extends Component {
8 |
9 | render() {
10 | return (
11 | Display normal message
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/message/message_others/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { message, Button } from 'quant-ui';
3 |
4 | const success = () => {
5 | message.success('This is a message of success');
6 | };
7 |
8 | const error = () => {
9 | message.error('This is a message of error');
10 | };
11 |
12 | const warning = () => {
13 | message.warning('This is message of warning');
14 | };
15 | class Detail extends Component {
16 |
17 | render() {
18 | return (
19 |
20 | Success
21 |
22 | Error
23 |
24 | Warning
25 |
26 | );
27 | }
28 | }
29 | export default Detail;
30 |
--------------------------------------------------------------------------------
/src/examples/antd/message/message_promise/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { message, Button } from 'quant-ui';
3 |
4 | const success = () => {
5 | message.loading('Action in progress..', 2.5)
6 | .then(() => message.success('Loading finished', 2.5))
7 | .then(() => message.info('Loading finished is finished', 2.5));
8 | };
9 |
10 | class Detail extends Component {
11 |
12 | render() {
13 | return (
14 | Display a sequence of message
15 | );
16 | }
17 | }
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/modal/modal_confirm_1/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Modal, Button } from 'quant-ui';
3 |
4 | const confirm = Modal.confirm;
5 |
6 | function showConfirm() {
7 | confirm({
8 | title: 'Do you want to delete these items?',
9 | content: 'When clicked the OK button, this dialog will be closed after 1 second',
10 | onOk() {
11 | return new Promise((resolve, reject) => {
12 | setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
13 | }).catch(() => console.log('Oops errors!'));
14 | },
15 | onCancel() { },
16 | });
17 | }
18 | class Detail extends Component {
19 | render() {
20 | return (
21 |
22 | Confirm
23 |
24 | );
25 | }
26 | }
27 | export default Detail;
28 |
--------------------------------------------------------------------------------
/src/examples/antd/modal/modal_manual/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Modal, Button } from 'quant-ui';
3 |
4 |
5 | function success() {
6 | const modal = Modal.success({
7 | title: 'This is a notification message',
8 | content: 'This modal will be destroyed after 1 second',
9 | });
10 | setTimeout(() => modal.destroy(), 1000);
11 | }
12 |
13 | class Detail extends Component {
14 | render() {
15 | return (
16 | Success
17 | );
18 | }
19 | }
20 | export default Detail;
21 |
--------------------------------------------------------------------------------
/src/examples/antd/modal/modal_position/style.less:
--------------------------------------------------------------------------------
1 | .vertical-center-modal {
2 | text-align: center;
3 | white-space: nowrap;
4 | }
5 |
6 | .vertical-center-modal:before {
7 | content: '';
8 | display: inline-block;
9 | height: 100%;
10 | vertical-align: middle;
11 | width: 0;
12 | }
13 |
14 | .vertical-center-modal .ant-modal {
15 | display: inline-block;
16 | vertical-align: middle;
17 | top: 0;
18 | text-align: left;
19 | }
20 |
--------------------------------------------------------------------------------
/src/examples/antd/notification/notification_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, notification } from 'quant-ui';
3 |
4 | const openNotification = () => {
5 | notification.open({
6 | message: 'Notification Title',
7 | description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
8 | });
9 | };
10 |
11 | class Detail extends Component {
12 | render() {
13 | return (
14 | Open the notification box
15 | );
16 | }
17 | }
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/notification/notification_duration/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, notification } from 'quant-ui';
3 |
4 | const openNotification = () => {
5 | const args = {
6 | message: 'Notification Title',
7 | description: 'I will never close automatically. I will be close automatically. I will never close automatically.',
8 | duration: 0,
9 | };
10 | notification.open(args);
11 | };
12 | class Detail extends Component {
13 | render() {
14 | return (
15 | Open the notification box
16 | );
17 | }
18 | }
19 | export default Detail;
20 |
--------------------------------------------------------------------------------
/src/examples/antd/notification/notification_icon/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, notification } from 'quant-ui';
3 |
4 | const openNotificationWithIcon = (type) => {
5 | notification[type]({
6 | message: 'Notification Title',
7 | description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
8 | });
9 | };
10 |
11 | class Detail extends Component {
12 | render() {
13 | return (
14 |
15 | openNotificationWithIcon('success')}>Success
16 |
17 | openNotificationWithIcon('info')}>Info
18 |
19 | openNotificationWithIcon('warning')}>Warning
20 |
21 | openNotificationWithIcon('error')}>Error
22 |
23 | );
24 | }
25 | }
26 | export default Detail;
27 |
--------------------------------------------------------------------------------
/src/examples/antd/notification/notification_icon_auto/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, notification,Icon } from 'quant-ui';
3 |
4 | const openNotification = () => {
5 | notification.open({
6 | message: 'Notification Title',
7 | description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
8 | icon: ,
9 | });
10 | };
11 | class Detail extends Component {
12 | render() {
13 | return (
14 | Open the notification box
15 | );
16 | }
17 | }
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/notification/notification_style/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, notification } from 'quant-ui';
3 |
4 | const openNotification = () => {
5 | notification.open({
6 | message: 'Notification Title',
7 | description: 'This is the content of the notification. This is the content of the notification. This is the content of the notification.',
8 | style: {
9 | width: 600,
10 | marginLeft: 335 - 600,
11 | },
12 | });
13 | };
14 |
15 | class Detail extends Component {
16 | render() {
17 | return (
18 | Open the notification box
19 | );
20 | }
21 | }
22 | export default Detail;
23 |
--------------------------------------------------------------------------------
/src/examples/antd/notification/notification_updata/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button, notification } from 'quant-ui';
3 |
4 | const key = 'updatable';
5 |
6 | const openNotification = () => {
7 | notification.open({
8 | key,
9 | message: 'Notification Title',
10 | description: 'description.',
11 | });
12 | setTimeout(() => {
13 | notification.open({
14 | key,
15 | message: 'New Title',
16 | description: 'New description.',
17 | });
18 | }, 1000);
19 | };
20 | class Detail extends Component {
21 | render() {
22 | return (
23 | Open the notification box
24 | );
25 | }
26 | }
27 | export default Detail;
28 |
--------------------------------------------------------------------------------
/src/examples/antd/pagination/changepage/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Pagination } from 'quant-ui';
3 |
4 | function onShowSizeChange(current, pageSize) {
5 | console.log(current, pageSize);
6 | }
7 | class Detail extends Component {
8 |
9 | render() {
10 | return (
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/pagination/morepage/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Pagination } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 | );
10 | }
11 | }
12 | export default Detail;
13 |
--------------------------------------------------------------------------------
/src/examples/antd/pagination/pagcontrolled/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Pagination } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = {
6 | current: 3,
7 | }
8 |
9 | onChange = (page) => {
10 | console.log(page);
11 | this.setState({
12 | current: page,
13 | });
14 | }
15 |
16 | render() {
17 | return ;
18 | }
19 | }
20 | export default Detail;
21 |
--------------------------------------------------------------------------------
/src/examples/antd/pagination/pagemini/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Pagination } from 'quant-ui';
3 |
4 | function showTotal(total) {
5 | return `Total` +total +`sitems`;
6 | }
7 |
8 | class Detail extends Component {
9 |
10 | render() {
11 | return (
12 |
17 | );
18 | }
19 | }
20 | export default Detail;
21 |
--------------------------------------------------------------------------------
/src/examples/antd/pagination/pageskip/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Pagination } from 'quant-ui';
3 |
4 | function onChange(pageNumber) {
5 | console.log('Page: ', pageNumber);
6 | }
7 |
8 | class Detail extends Component {
9 |
10 | render() {
11 | return (
12 |
13 | );
14 | }
15 | }
16 | export default Detail;
17 |
--------------------------------------------------------------------------------
/src/examples/antd/pagination/paginationbasic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Pagination } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 | );
10 | }
11 | }
12 | export default Detail;
13 |
--------------------------------------------------------------------------------
/src/examples/antd/pagination/plainpage/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Pagination } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 | );
10 | }
11 | }
12 | export default Detail;
13 |
--------------------------------------------------------------------------------
/src/examples/antd/pagination/sumpagination/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Pagination } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 |
'Total ' +total+ ' items'}
12 | pageSize={20}
13 | defaultCurrent={1}
14 | />
15 |
16 | range[0]+'-'+range[1]+' of '+ total +'items'}
19 | pageSize={20}
20 | defaultCurrent={1}
21 | />
22 |
23 | );
24 | }
25 | }
26 | export default Detail;
27 |
--------------------------------------------------------------------------------
/src/examples/antd/pagination/upAnddown/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Pagination } from 'quant-ui';
3 |
4 | function itemRender(current, type, originalElement) {
5 | if (type === 'prev') {
6 | return Previous ;
7 | }
8 | if (type === 'next') {
9 | return Next ;
10 | }
11 | return originalElement;
12 | }
13 |
14 | class Detail extends Component {
15 |
16 | render() {
17 | return (
18 |
19 | );
20 | }
21 | }
22 | export default Detail;
23 |
--------------------------------------------------------------------------------
/src/examples/antd/popconfirm/popconfirm_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Popconfirm, message } from 'quant-ui';
3 |
4 | function confirm(e) {
5 | console.log(e);
6 | message.success('Click on Yes');
7 | }
8 |
9 | function cancel(e) {
10 | console.log(e);
11 | message.error('Click on No');
12 | }
13 | class Detail extends Component {
14 | render() {
15 | return (
16 |
17 | Delete
18 |
19 | );
20 | }
21 | }
22 | export default Detail;
23 |
--------------------------------------------------------------------------------
/src/examples/antd/popconfirm/popconfirm_national/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Popconfirm } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 | Delete
9 |
10 | );
11 | }
12 | }
13 | export default Detail;
14 |
--------------------------------------------------------------------------------
/src/examples/antd/progress/progress_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Progress } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 | );
15 | }
16 | }
17 | export default Detail;
18 |
--------------------------------------------------------------------------------
/src/examples/antd/progress/progress_basic_small/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Progress } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
13 | );
14 | }
15 | }
16 | export default Detail;
17 |
--------------------------------------------------------------------------------
/src/examples/antd/progress/progress_basic_tooltip/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Tooltip, Progress } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 |
10 |
11 | );
12 | }
13 | }
14 | export default Detail;
15 |
--------------------------------------------------------------------------------
/src/examples/antd/progress/progress_circle/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Progress } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/progress/progress_circle_small/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Progress } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/progress/progress_dashboard/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Progress } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 | );
10 | }
11 | }
12 | export default Detail;
13 |
--------------------------------------------------------------------------------
/src/examples/antd/progress/progress_style/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Progress } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 |
percent + 'Days'} />
10 | 'Done'} />
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/radio/radio_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Radio } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 | Radio
8 | );
9 | }
10 | }
11 | export default Detail;
12 |
--------------------------------------------------------------------------------
/src/examples/antd/radio/radio_disable/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Radio, Button } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = {
6 | disabled: true,
7 | }
8 |
9 | toggleDisabled = () => {
10 | this.setState({
11 | disabled: !this.state.disabled,
12 | });
13 | }
14 |
15 | render() {
16 | return (
17 |
18 |
Disabled
19 |
20 |
Disabled
21 |
22 |
23 | Toggle disabled
24 |
25 |
26 |
27 | );
28 | }
29 | }
30 | export default Detail;
31 |
--------------------------------------------------------------------------------
/src/examples/antd/radio/radio_group/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Radio } from 'quant-ui';
3 |
4 | const RadioGroup = Radio.Group;
5 | class Detail extends Component {
6 | state = {
7 | value: 1,
8 | }
9 |
10 | onChange = (e) => {
11 | console.log('radio checked', e.target.value);
12 | this.setState({
13 | value: e.target.value,
14 | });
15 | }
16 |
17 | render() {
18 | return (
19 |
20 | A
21 | B
22 | C
23 | D
24 |
25 | );
26 | }
27 | }
28 | export default Detail;
29 |
--------------------------------------------------------------------------------
/src/examples/antd/radio/radio_group_name/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Radio } from 'quant-ui';
3 |
4 | const RadioGroup = Radio.Group;
5 | class Detail extends Component {
6 | render() {
7 | return (
8 |
9 | A
10 | B
11 | C
12 | D
13 |
14 | );
15 | }
16 | }
17 | export default Detail;
18 |
--------------------------------------------------------------------------------
/src/examples/antd/rate/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/rate/rate_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Rate } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 | );
10 | }
11 | }
12 |
13 | export default Detail;
14 |
--------------------------------------------------------------------------------
/src/examples/antd/rate/rate_clear/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Rate } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 | allowClear: true
10 |
11 | allowClear: false
12 |
13 | );
14 | }
15 | }
16 |
17 | export default Detail;
18 |
--------------------------------------------------------------------------------
/src/examples/antd/rate/rate_half/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Rate } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 | );
10 | }
11 | }
12 |
13 | export default Detail;
14 |
--------------------------------------------------------------------------------
/src/examples/antd/rate/rate_others/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Rate, Icon } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 | } allowHalf />
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 | }
18 |
19 | export default Detail;
20 |
--------------------------------------------------------------------------------
/src/examples/antd/rate/rate_readOnly/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Rate } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 | );
10 | }
11 | }
12 |
13 | export default Detail;
14 |
--------------------------------------------------------------------------------
/src/examples/antd/rate/rate_writing/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Rate } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = {
6 | value: 3,
7 | }
8 |
9 | handleChange = (value) => {
10 | this.setState({ value });
11 | }
12 |
13 | render() {
14 | const { value } = this.state;
15 | return (
16 |
17 |
18 | {value && {value} stars }
19 |
20 | );
21 | }
22 | }
23 |
24 |
25 | export default Detail;
26 |
--------------------------------------------------------------------------------
/src/examples/antd/select/select_auto/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Select } from 'quant-ui';
3 |
4 | const Option = Select.Option;
5 |
6 | const children = [];
7 | for (let i = 10; i < 36; i++) {
8 | children.push({i.toString(36) + i} );
9 | }
10 |
11 | function handleChange(value) {
12 | console.log(`selected ${value}`);
13 | }
14 |
15 | class Detail extends Component {
16 |
17 | render() {
18 | return (
19 |
25 | {children}
26 |
27 | );
28 | }
29 | }
30 |
31 | export default Detail;
32 |
--------------------------------------------------------------------------------
/src/examples/antd/select/select_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Select } from 'quant-ui';
3 |
4 | const Option = Select.Option;
5 |
6 | function handleChange(value) {
7 | console.log('selected'+ value);
8 | }
9 |
10 | class Detail extends Component {
11 |
12 | render() {
13 | return (
14 |
15 |
16 | Jack
17 | Lucy
18 | Disabled
19 | yiminghe
20 |
21 |
22 | Lucy
23 |
24 |
25 | );
26 | }
27 | }
28 |
29 | export default Detail;
30 |
--------------------------------------------------------------------------------
/src/examples/antd/select/select_group/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Select } from 'quant-ui';
3 |
4 | const { Option, OptGroup } = Select;
5 |
6 | function handleChange(value) {
7 | console.log('selected'+value);
8 | }
9 | class Detail extends Component {
10 |
11 | render() {
12 | return (
13 |
18 |
19 | Jack
20 | Lucy
21 |
22 |
23 | yiminghe
24 |
25 |
26 | );
27 | }
28 | }
29 |
30 | export default Detail;
31 |
--------------------------------------------------------------------------------
/src/examples/antd/select/select_labelInValue/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Select } from 'quant-ui';
3 |
4 | const Option = Select.Option;
5 |
6 | function handleChange(value) {
7 | console.log(value); // { key: "lucy", label: "Lucy (101)" }
8 | }
9 |
10 | class Detail extends Component {
11 |
12 | render() {
13 | return (
14 |
15 | Jack (100)
16 | Lucy (101)
17 |
18 | );
19 | }
20 | }
21 |
22 | export default Detail;
23 |
--------------------------------------------------------------------------------
/src/examples/antd/select/select_multi/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Select } from 'quant-ui';
3 |
4 | const Option = Select.Option;
5 |
6 | const children = [];
7 | for (let i = 10; i < 36; i++) {
8 | children.push({i.toString(36) + i} );
9 | }
10 |
11 | function handleChange(value) {
12 | console.log('selected'+value);
13 | }
14 | class Detail extends Component {
15 |
16 | render() {
17 | return (
18 |
25 | {children}
26 |
27 | );
28 | }
29 | }
30 |
31 | export default Detail;
32 |
33 |
--------------------------------------------------------------------------------
/src/examples/antd/select/select_tags/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Select } from 'quant-ui';
3 |
4 | const Option = Select.Option;
5 |
6 | const children = [];
7 | for (let i = 10; i < 36; i++) {
8 | children.push({i.toString(36) + i} );
9 | }
10 |
11 | function handleChange(value) {
12 | console.log('selected' +value);
13 | }
14 |
15 | class Detail extends Component {
16 |
17 | render() {
18 | return (
19 |
25 | {children}
26 |
27 | );
28 | }
29 | }
30 |
31 | export default Detail;
32 |
--------------------------------------------------------------------------------
/src/examples/antd/slider/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/slider/slider_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Slider, Switch } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = {
6 | disabled: false,
7 | };
8 |
9 | handleDisabledChange = (disabled) => {
10 | this.setState({ disabled });
11 | }
12 |
13 | render() {
14 | const { disabled } = this.state;
15 | return (
16 |
17 |
18 |
19 | Disabled:
20 |
21 | );
22 | }
23 | }
24 |
25 | export default Detail;
26 |
--------------------------------------------------------------------------------
/src/examples/antd/slider/slider_events/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Slider } from 'quant-ui';
3 |
4 | function onChange(value) {
5 | console.log('onChange: ', value);
6 | }
7 |
8 | function onAfterChange(value) {
9 | console.log('onAfterChange: ', value);
10 | }
11 | class Detail extends Component {
12 | render() {
13 | return (
14 |
15 |
16 |
17 |
18 | );
19 | }
20 | }
21 |
22 | export default Detail;
23 |
--------------------------------------------------------------------------------
/src/examples/antd/slider/slider_icon/style.less:
--------------------------------------------------------------------------------
1 | .icon-wrapper {
2 | position: relative;
3 | padding: 0px 30px;
4 | }
5 |
6 | .icon-wrapper .anticon {
7 | position: absolute;
8 | top: -2px;
9 | width: 16px;
10 | height: 16px;
11 | line-height: 1;
12 | font-size: 16px;
13 | color: rgba(0, 0, 0, .25);
14 | }
15 |
16 | .icon-wrapper .anticon:first-child {
17 | left: 0;
18 | }
19 |
20 | .icon-wrapper .anticon:last-child {
21 | right: 0;
22 | }
--------------------------------------------------------------------------------
/src/examples/antd/slider/slider_label/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Slider } from 'quant-ui';
3 |
4 | const marks = {
5 | 0: '0°C',
6 | 26: '26°C',
7 | 37: '37°C',
8 | 100: {
9 | style: {
10 | color: '#f50',
11 | },
12 | label: 100°C ,
13 | },
14 | };
15 | class Detail extends Component {
16 |
17 | render() {
18 | return (
19 |
20 |
included=true
21 |
22 |
23 |
24 | included=false
25 |
26 |
27 | marks & step
28 |
29 |
30 | step=null
31 |
32 |
33 | );
34 | }
35 | }
36 |
37 | export default Detail;
38 |
--------------------------------------------------------------------------------
/src/examples/antd/slider/slider_prompt/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Slider } from 'quant-ui';
3 |
4 | function formatter(value) {
5 | return value + '%';
6 | }
7 | class Detail extends Component {
8 | render() {
9 | return (
10 |
11 |
12 |
13 |
14 | );
15 | }
16 | }
17 |
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/slider/slider_vertical/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Slider } from 'quant-ui';
3 |
4 | const style = {
5 | float: 'left',
6 | height: 300,
7 | marginLeft: 70,
8 | };
9 |
10 | const marks = {
11 | 0: '0°C',
12 | 26: '26°C',
13 | 37: '37°C',
14 | 100: {
15 | style: {
16 | color: '#f50',
17 | },
18 | label: 100°C ,
19 | },
20 | };
21 | class Detail extends Component {
22 | render() {
23 | return (
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 | );
36 | }
37 | }
38 |
39 | export default Detail;
40 |
--------------------------------------------------------------------------------
/src/examples/antd/spin/spin_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Spin } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 | );
9 | }
10 | }
11 | export default Detail;
12 |
--------------------------------------------------------------------------------
/src/examples/antd/spin/spin_card/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Spin, Switch, Alert } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = { loading: false }
6 |
7 | toggle = (value) => {
8 | this.setState({ loading: value });
9 | }
10 |
11 | render() {
12 | return (
13 |
14 |
15 |
20 |
21 |
22 | Loading state:
23 |
24 |
25 | );
26 | }
27 | }
28 | export default Detail;
29 |
--------------------------------------------------------------------------------
/src/examples/antd/spin/spin_container/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Spin } from 'quant-ui';
3 | import './style.less';
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 | );
11 | }
12 | }
13 | export default Detail;
14 |
--------------------------------------------------------------------------------
/src/examples/antd/spin/spin_container/style.less:
--------------------------------------------------------------------------------
1 | .example {
2 | text-align: center;
3 | background: rgba(0,0,0,0.05);
4 | border-radius: 4px;
5 | margin-bottom: 20px;
6 | padding: 30px 50px;
7 | margin: 20px 0;
8 | }
--------------------------------------------------------------------------------
/src/examples/antd/spin/spin_delay/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Spin, Alert, Switch } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = { loading: false }
6 |
7 | toggle = (value) => {
8 | this.setState({ loading: value });
9 | }
10 |
11 | render() {
12 | const container = (
13 |
18 | );
19 | return (
20 |
21 |
{container}
22 |
23 | Loading state:
24 |
25 |
26 | );
27 | }
28 | }
29 |
30 | export default Detail;
31 |
--------------------------------------------------------------------------------
/src/examples/antd/spin/spin_description/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Spin, Alert } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 |
14 |
15 | );
16 | }
17 | }
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/spin/spin_icon/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Spin, Icon } from 'quant-ui';
3 |
4 |
5 | const antIcon = ;
6 | class Detail extends Component {
7 | render() {
8 | return (
9 |
10 | );
11 | }
12 | }
13 |
14 | export default Detail;
15 |
--------------------------------------------------------------------------------
/src/examples/antd/spin/spin_size/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Spin } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | );
13 | }
14 | }
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/steps/stepsbasic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Steps } from 'quant-ui';
3 |
4 | const Step = Steps.Step;
5 |
6 | class Detail extends Component {
7 |
8 | render() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 | }
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/steps/stepschange/style.less:
--------------------------------------------------------------------------------
1 | .steps-content {
2 | margin-top: 16px;
3 | border: 1px dashed #e9e9e9;
4 | border-radius: 6px;
5 | background-color: #fafafa;
6 | min-height: 200px;
7 | text-align: center;
8 | padding-top: 80px;
9 | }
10 |
11 | .steps-action {
12 | margin-top: 24px;
13 | }
--------------------------------------------------------------------------------
/src/examples/antd/steps/stepscustom/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Steps, Popover } from 'quant-ui';
3 |
4 | const Step = Steps.Step;
5 | const customDot = (dot, { status, index }) => (
6 | step {index} status: {status}}>
7 | {dot}
8 |
9 | );
10 | class Detail extends Component {
11 |
12 | render() {
13 | return (
14 |
15 |
16 |
17 |
18 |
19 |
20 | );
21 | }
22 | }
23 | export default Detail;
24 |
--------------------------------------------------------------------------------
/src/examples/antd/steps/stepsdot/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Steps, Icon } from 'quant-ui';
3 |
4 | const Step = Steps.Step;
5 |
6 | class Detail extends Component {
7 |
8 | render() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 | }
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/steps/stepsicon/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Steps, Icon } from 'quant-ui';
3 |
4 | const Step = Steps.Step;
5 |
6 | class Detail extends Component {
7 |
8 | render() {
9 | return (
10 |
11 | } />
12 | } />
13 | } />
14 | } />
15 |
16 | );
17 | }
18 | }
19 | export default Detail;
20 |
--------------------------------------------------------------------------------
/src/examples/antd/steps/stepsmini/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Steps } from 'quant-ui';
3 |
4 | const Step = Steps.Step;
5 |
6 | class Detail extends Component {
7 |
8 | render() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 | }
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/steps/stepsver/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Steps } from 'quant-ui';
3 |
4 | const Step = Steps.Step;
5 |
6 | class Detail extends Component {
7 |
8 | render() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 | }
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/steps/stepsvermini/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Steps } from 'quant-ui';
3 |
4 | const Step = Steps.Step;
5 |
6 | class Detail extends Component {
7 |
8 | render() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 | }
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/steps/stepswrong/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Steps } from 'quant-ui';
3 |
4 | const Step = Steps.Step;
5 |
6 | class Detail extends Component {
7 |
8 | render() {
9 | return (
10 |
11 |
12 |
13 |
14 |
15 | );
16 | }
17 | }
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/switch/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/switch/switch_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Switch } from 'quant-ui';
3 |
4 | function onChange(checked) {
5 | console.log('switch to ' + checked);
6 | }
7 | class Detail extends Component {
8 |
9 | render() {
10 | return (
11 |
12 | );
13 | }
14 | }
15 |
16 | export default Detail;
17 |
--------------------------------------------------------------------------------
/src/examples/antd/switch/switch_disabled/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Switch, Button } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = {
6 | disabled: true,
7 | }
8 |
9 | toggle = () => {
10 | this.setState({
11 | disabled: !this.state.disabled,
12 | });
13 | }
14 |
15 | render() {
16 | return (
17 |
18 |
19 |
20 | Toggle disabled
21 |
22 | );
23 | }
24 | }
25 |
26 | export default Detail;
27 |
--------------------------------------------------------------------------------
/src/examples/antd/switch/switch_loading/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Switch } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 | }
16 |
17 | export default Detail;
18 |
--------------------------------------------------------------------------------
/src/examples/antd/switch/switch_size/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Switch } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 |
6 | render() {
7 | return (
8 |
9 |
10 |
11 |
12 |
13 | );
14 | }
15 | }
16 |
17 | export default Detail;
18 |
--------------------------------------------------------------------------------
/src/examples/antd/switch/switch_word_icon/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Switch, Icon } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
9 |
10 |
11 |
12 | } unCheckedChildren={ } defaultChecked />
13 |
14 | );
15 | }
16 | }
17 |
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/timePicker/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/timePicker/timePicker_basic/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { TimePicker } from 'quant-ui';
3 | import moment from 'moment';
4 |
5 | function onChange(time, timeString) {
6 | console.log(time, timeString);
7 | }
8 |
9 | class Detail extends Component {
10 |
11 | render() {
12 | return (
13 |
14 | );
15 | }
16 | }
17 |
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/timePicker/timerPicker_addon/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { TimePicker, Button } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | state = { open: false };
6 |
7 | handleOpenChange = (open) => {
8 | this.setState({ open });
9 | }
10 |
11 | handleClose = () => this.setState({ open: false })
12 |
13 | render() {
14 | return (
15 | (
19 |
20 | Ok
21 |
22 | )}
23 | />
24 | );
25 | }
26 | }
27 |
28 |
29 | export default Detail;
30 |
--------------------------------------------------------------------------------
/src/examples/antd/timePicker/timerPicker_controlled/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { TimePicker } from 'quant-ui';
3 | class Detail extends Component {
4 | state = {
5 | value: null,
6 | };
7 |
8 | onChange = (time) => {
9 | console.log(time);
10 | this.setState({ value: time });
11 | }
12 |
13 | render() {
14 | return ;
15 | }
16 | }
17 |
18 | export default Detail;
19 |
--------------------------------------------------------------------------------
/src/examples/antd/timePicker/timerPicker_disabled/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { TimePicker } from 'quant-ui';
3 | import moment from 'moment';
4 |
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 |
10 | );
11 | }
12 | }
13 |
14 | export default Detail;
15 |
--------------------------------------------------------------------------------
/src/examples/antd/timePicker/timerPicker_format/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { TimePicker } from 'quant-ui';
3 | import moment from 'moment';
4 |
5 | function onChange(time, timeString) {
6 | console.log(time, timeString);
7 | }
8 | class Detail extends Component {
9 |
10 | render() {
11 | return (
12 |
13 |
14 |
15 |
16 |
17 |
18 |
19 | );
20 | }
21 | }
22 |
23 | export default Detail;
24 |
--------------------------------------------------------------------------------
/src/examples/antd/timePicker/timerPicker_select/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { TimePicker } from 'quant-ui';
3 | import moment from 'moment';
4 |
5 | const format = 'HH:mm';
6 | class Detail extends Component {
7 |
8 | render() {
9 | return (
10 |
11 | );
12 | }
13 | }
14 |
15 | export default Detail;
16 |
--------------------------------------------------------------------------------
/src/examples/antd/timePicker/timerPicker_size/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { TimePicker } from 'quant-ui';
3 | import moment from 'moment';
4 |
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 |
10 |
11 |
12 |
13 |
14 |
15 |
16 |
17 | );
18 | }
19 | }
20 |
21 | export default Detail;
22 |
--------------------------------------------------------------------------------
/src/examples/antd/timePicker/timerPicker_step/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { TimePicker } from 'quant-ui';
3 | import moment from 'moment';
4 |
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 |
10 | );
11 | }
12 | }
13 |
14 | export default Detail;
15 |
--------------------------------------------------------------------------------
/src/examples/antd/treeSelect/method.js:
--------------------------------------------------------------------------------
1 |
2 | const method = [
3 | {
4 | title: "methods",
5 | method: [
6 | {
7 | key:'1',
8 | function:'blur()',
9 | description:'移除焦点'
10 |
11 | },
12 | {
13 | key: "2",
14 | function:'focus()',
15 | description:'获取焦点'
16 | },
17 | ]
18 | },
19 |
20 |
21 | ];
22 |
23 | export default {
24 | method
25 | }
--------------------------------------------------------------------------------
/src/examples/antd/upload/upload_PicturesWall/style.less:
--------------------------------------------------------------------------------
1 | .ant-upload-select-picture-card i {
2 | font-size: 32px;
3 | color: #999;
4 | }
5 |
6 | .ant-upload-select-picture-card .ant-upload-text {
7 | margin-top: 8px;
8 | color: #666;
9 | }
--------------------------------------------------------------------------------
/src/examples/antd/upload/upload_avatar/style.less:
--------------------------------------------------------------------------------
1 | .avatar-uploader > .ant-upload {
2 | width: 128px;
3 | height: 128px;
4 | }
--------------------------------------------------------------------------------
/src/examples/antd/upload/upload_click/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Upload, message, Button, Icon } from 'quant-ui';
3 |
4 |
5 | const props = {
6 | name: 'file',
7 | action: '//jsonplaceholder.typicode.com/posts/',
8 | headers: {
9 | authorization: 'authorization-text',
10 | },
11 | onChange(info) {
12 | if (info.file.status !== 'uploading') {
13 | console.log(info.file, info.fileList);
14 | }
15 | if (info.file.status === 'done') {
16 | message.success(info.file.name + 'file uploaded successfully');
17 | } else if (info.file.status === 'error') {
18 | message.error(info.file.name + 'file upload failed.');
19 | }
20 | },
21 | };
22 |
23 | class Detail extends Component {
24 | render() {
25 | return (
26 |
27 |
28 | Click to Upload
29 |
30 |
31 | );
32 | }
33 | }
34 |
35 | export default Detail;
36 |
--------------------------------------------------------------------------------
/src/examples/antd/upload/upload_folder/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Upload, Button, Icon } from 'quant-ui';
3 |
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
9 | Upload Directory
10 |
11 |
12 | );
13 | }
14 | }
15 |
16 | export default Detail;
17 |
--------------------------------------------------------------------------------
/src/examples/antd/upload/upload_manual/style.less:
--------------------------------------------------------------------------------
1 | .upload-demo-start {
2 | margin-top: 16px;
3 | }
--------------------------------------------------------------------------------
/src/examples/antd/upload/upload_picturesList/style.less:
--------------------------------------------------------------------------------
1 | .upload-list-inline .ant-upload-list-item {
2 | float: left;
3 | width: 200px;
4 | margin-right: 8px;
5 | }
6 | .upload-list-inline .ant-upload-animate-enter {
7 | animation-name: uploadAnimateInlineIn;
8 | }
9 | .upload-list-inline .ant-upload-animate-leave {
10 | animation-name: uploadAnimateInlineOut;
11 | }
--------------------------------------------------------------------------------
/src/examples/charts/3DCharts/Basic1/code.js:
--------------------------------------------------------------------------------
1 | const code = `
2 |
3 | `;
4 |
5 | export default {
6 | code,
7 | }
--------------------------------------------------------------------------------
/src/examples/charts/3DCharts/api.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | const api = [
3 | {
4 | title: ,
5 | api: [
6 |
7 | ]
8 | }
9 | ];
10 |
11 | export default {
12 | api
13 | }
--------------------------------------------------------------------------------
/src/examples/charts/Bar/Basic1/code.js:
--------------------------------------------------------------------------------
1 | const code = `
2 |
3 | `;
4 |
5 | export default {
6 | code,
7 | }
--------------------------------------------------------------------------------
/src/examples/charts/Bar/api.js:
--------------------------------------------------------------------------------
1 |
2 | import React from 'react';
3 | const api = [
4 | {
5 | title: ,
6 | api: [
7 |
8 | ]
9 | }
10 | ];
11 |
12 | export default {
13 | api
14 | }
--------------------------------------------------------------------------------
/src/examples/charts/Diagram/Basic1/code.js:
--------------------------------------------------------------------------------
1 | const code = `
2 |
3 | `;
4 |
5 | export default {
6 | code,
7 | }
--------------------------------------------------------------------------------
/src/examples/charts/Diagram/api.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | const api = [
3 | {
4 | title: ,
5 | api: [
6 |
7 | ]
8 | }
9 | ];
10 |
11 | export default {
12 | api
13 | }
--------------------------------------------------------------------------------
/src/examples/charts/Diagram1/Basic1/code.js:
--------------------------------------------------------------------------------
1 | const code = `
2 |
3 | `;
4 |
5 | export default {
6 | code,
7 | }
--------------------------------------------------------------------------------
/src/examples/charts/Diagram1/api.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | const api = [
3 | {
4 | title: ,
5 | api: [
6 |
7 | ]
8 | }
9 | ];
10 |
11 | export default {
12 | api
13 | }
--------------------------------------------------------------------------------
/src/examples/charts/Diagram2/Basic1/code.js:
--------------------------------------------------------------------------------
1 | const code =`
2 |
3 | `;
4 |
5 | export default {
6 | code,
7 | }
--------------------------------------------------------------------------------
/src/examples/charts/Diagram2/api.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | const api = [
3 | {
4 | title: ,
5 | api: [
6 |
7 | ]
8 | }
9 | ];
10 |
11 | export default {
12 | api
13 | }
--------------------------------------------------------------------------------
/src/examples/charts/DropCharts/api.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | const api = [
3 | {
4 | title: ,
5 | api: [
6 |
7 | ]
8 | }
9 | ];
10 |
11 | export default {
12 | api
13 | }
--------------------------------------------------------------------------------
/src/examples/charts/Line/Basic1/code.js:
--------------------------------------------------------------------------------
1 | const code = `
2 |
3 | `;
4 |
5 | export default {
6 | code,
7 | }
--------------------------------------------------------------------------------
/src/examples/charts/Line/api.js:
--------------------------------------------------------------------------------
1 |
2 | import React from 'react';
3 | const api = [
4 | {
5 | title: ,
6 | api: [
7 |
8 | ]
9 | }
10 | ];
11 |
12 | export default {
13 | api
14 | }
--------------------------------------------------------------------------------
/src/examples/history/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { BackTop } from 'quant-ui';
3 | import "./style.less"
4 | import history from "./history.js"
5 | class Detail extends Component {
6 |
7 | render() {
8 | return (
9 |
10 | {
11 | history.map(({title,code})=>{
12 | return(
13 |
17 | )
18 | })
19 | }
20 |
21 |
22 | );
23 | }
24 | }
25 |
26 | export default Detail;
27 |
--------------------------------------------------------------------------------
/src/examples/page/NotFound/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { NotFound } from 'quant-ui';
3 | class NotFoundCode extends Component {
4 |
5 | render() {
6 | return (
7 |
8 | );
9 | }
10 | }
11 |
12 | export default NotFoundCode;
13 |
--------------------------------------------------------------------------------
/src/examples/page/map/BasicMap/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {ReactQMap} from 'quant-ui';
3 |
4 | class BasicMap extends Component {
5 | render() {
6 | return (
7 |
8 |
13 |
14 | )
15 | }
16 | }
17 |
18 | export default BasicMap;
--------------------------------------------------------------------------------
/src/examples/page/map/MapWithSpot/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {ReactQMap} from 'quant-ui';
3 |
4 | class MapWithSpot extends Component {
5 | render() {
6 | return (
7 |
8 |
13 |
14 | )
15 | }
16 | }
17 |
18 | export default MapWithSpot;
--------------------------------------------------------------------------------
/src/examples/page/map/imgs/spot_location.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitlwz/quant-ui/093c4f0ab6be5ab50015dcda82f88ebe9e87cbdc/src/examples/page/map/imgs/spot_location.png
--------------------------------------------------------------------------------
/src/examples/page/reactAmap/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | class App extends Component {
3 | render() {
4 | return (
5 |
6 |
高德地图
7 |
8 |
9 | 高德地图api官网插件比较多,demo非常详细,可自行选择官网 组件
10 |
11 |
12 | );
13 | }
14 | }
15 |
16 | export default App;
17 |
--------------------------------------------------------------------------------
/src/examples/util/Utiles/Basic1/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {utils} from 'quant-ui';
3 | const {currency} = utils
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
currency方法主要用于处理精度损失
9 |
10 |
11 | );
12 | }
13 | }
14 | export default Detail;
15 |
--------------------------------------------------------------------------------
/src/examples/util/Utiles/Basic2/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {utils} from 'quant-ui';
3 | const {currency} = utils
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
currency方法
9 | currency.add( value )
10 | currency.subtract( value )
11 | currency.multiply( number )
12 | currency.divide( number )
13 | currency.distribute( number )
14 | currency.format([ boolean ])
15 | currency.dollars
16 | currency.cents
17 |
18 | );
19 | }
20 | }
21 | export default Detail;
22 |
--------------------------------------------------------------------------------
/src/examples/util/Utiles/Basic3/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {utils} from 'quant-ui';
3 | const {throttle} = utils
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
throttle方法函数节流
9 | 适用于限制`resize`和`scroll`等函数的调用频率
10 |
11 | );
12 | }
13 | }
14 | export default Detail;
15 |
--------------------------------------------------------------------------------
/src/examples/util/Utiles/Basic4/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {utils} from 'quant-ui';
3 | const {currency} = utils
4 | class Detail extends Component {
5 | render() {
6 | return (
7 |
8 |
debounce函数防抖
9 | 与throttle不同的是,debounce保证一个函数在多少毫秒内不再被触发,只会执行一次
10 |
11 | );
12 | }
13 | }
14 | export default Detail;
15 |
--------------------------------------------------------------------------------
/src/examples/util/screenfull/Basic1/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button,screenfull} from 'quant-ui';
3 | class Detail extends Component {
4 | screenFull = () =>{
5 | if (screenfull.enabled) {
6 | screenfull.request();
7 | }
8 | }
9 | screenFullDom = () =>{
10 | window.onresize = null;
11 | if (screenfull.enabled) {
12 | screenfull.request(this.refs.img);
13 | }
14 | }
15 | render() {
16 | return (
17 |
18 |
html全屏
19 |
20 |
21 |
图片元素全屏
22 |
23 |
24 |
25 |
26 | );
27 | }
28 | }
29 | export default Detail;
30 |
--------------------------------------------------------------------------------
/src/examples/util/screenfull/Basic2/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Button,screenfull} from 'quant-ui';
3 | class Detail extends Component {
4 |
5 | screenFull = (event) =>{
6 | window.onresize = null;
7 | if (screenfull.enabled) {
8 | screenfull.toggle(event.target);
9 | }
10 | }
11 | componentWillMount = () =>{
12 | if (screenfull.enabled) {
13 | screenfull.on('change', () => {
14 | console.log('是否全屏?', screenfull.isFullscreen ? 'Yes' : 'No');
15 | });
16 | }
17 | }
18 | render() {
19 | return (
20 |
21 |
点击图片切换全屏
22 |
23 |
24 |
25 | );
26 | }
27 | }
28 | export default Detail;
29 |
--------------------------------------------------------------------------------
/src/examples/util/theme/Basic1/Detail.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import {theme, Button} from 'quant-ui';
3 | const {getCurrentColor,refreshColor,setCurrentColor} = theme;
4 | class Detail extends Component {
5 | redClick = () =>{
6 | setCurrentColor('red')
7 | refreshColor()
8 | }
9 | greenClick = () => {
10 | setCurrentColor('green')
11 | refreshColor()
12 | }
13 | purpleClick = () =>{
14 | setCurrentColor('purple')
15 | refreshColor()
16 | }
17 | render() {
18 | return (
19 |
20 |
当前字体颜色{getCurrentColor()}
21 | 红色
22 | 绿色
23 | 紫色
24 |
25 | );
26 | }
27 | }
28 | export default Detail;
29 |
--------------------------------------------------------------------------------
/src/examples/util/theme/api.js:
--------------------------------------------------------------------------------
1 |
2 | const api = [
3 | {
4 | title: "方法",
5 | api: [
6 | {
7 | key: "1",
8 | parameter: "getCurrentColor", //字段名
9 | instructions: '获取当前主题颜色', //描述
10 | type: 'function()', //类型
11 | default: "default", //默认值
12 | must: '',
13 | },{
14 | key: "2",
15 | parameter: "setCurrentColor", //字段名
16 | instructions: '设置当前主题颜色', //描述
17 | type: 'function', //类型
18 | default: "", //默认值
19 | must: '',
20 | },{
21 | key: "3",
22 | parameter: "refreshColor", //字段名
23 | instructions: ' 刷新主题颜色', //描述
24 | type: 'funtion', //类型
25 | default: "", //默认值
26 | must: '',
27 | }
28 | ]
29 | }
30 | ];
31 |
32 | export default {
33 | api
34 | }
--------------------------------------------------------------------------------
/src/examples/util/webSocket/index.js:
--------------------------------------------------------------------------------
1 | import React, { Component } from 'react';
2 | import { Card,Button,Tabs } from 'quant-ui';
3 | import Api from '../../API.js';
4 | import data from './api.js';
5 | import Code from '../../Code.js';
6 | import Detail from './Detail.js';
7 | const TabPane = Tabs.TabPane;
8 | class App extends Component {
9 | render() {
10 | return (
11 |
12 |
webSocket链接
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 | );
28 | }
29 | }
30 |
31 | export default App;
32 |
--------------------------------------------------------------------------------
/src/imgs/background.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitlwz/quant-ui/093c4f0ab6be5ab50015dcda82f88ebe9e87cbdc/src/imgs/background.jpg
--------------------------------------------------------------------------------
/src/imgs/logo@3x.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitlwz/quant-ui/093c4f0ab6be5ab50015dcda82f88ebe9e87cbdc/src/imgs/logo@3x.png
--------------------------------------------------------------------------------
/src/imgs/quantdo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/gitlwz/quant-ui/093c4f0ab6be5ab50015dcda82f88ebe9e87cbdc/src/imgs/quantdo.png
--------------------------------------------------------------------------------
/src/theme/green.less:
--------------------------------------------------------------------------------
1 | @import "../component/theme/index.less";
2 | @ant-prefix : ant;
3 |
4 | // -------- Colors -----------
5 | @primary-color : #1DA57A;
6 | @info-color : #1DA57A;
7 | @success-color : #1DA57A;
8 | @processing-color : #1DA57A;
9 | @error-color : red;
10 | @highlight-color : #1DA57A;
11 | @warning-color : #1DA57A;
12 | @normal-color : #d9d9d9;
13 |
14 | @import "../examples/HeaderCustom.less";
15 | @import "../App.less";
--------------------------------------------------------------------------------
/src/theme/index.js:
--------------------------------------------------------------------------------
1 |
2 | import { theme } from 'quant-ui';
3 | switch (theme.getCurrentColor()){
4 | case "default":
5 |
6 | break;
7 | case "red":
8 | require.ensure([], function(require){
9 | require('./red.less');
10 | });
11 | break;
12 | case "green":
13 | require.ensure([], function(require){
14 | require('./green.less');
15 | });
16 | break;
17 | case "purple":
18 | require.ensure([], function(require){
19 | require('./purple.less');
20 | });
21 | break;
22 | default:
23 | break;
24 | }
--------------------------------------------------------------------------------
/src/theme/index.less:
--------------------------------------------------------------------------------
1 | @import "../component/theme/index.less";
2 | @import "../examples/HeaderCustom.less";
3 | @import "../App.less";
--------------------------------------------------------------------------------
/src/theme/purple.less:
--------------------------------------------------------------------------------
1 | @import "../component/theme/index.less";
2 | @ant-prefix : ant;
3 |
4 | // -------- Colors -----------
5 | @primary-color : #CC99FF;
6 | @info-color : #CC99FF;
7 | @success-color : #CC99FF;
8 | @processing-color : #CC99FF;
9 | @error-color : #CC99FF;
10 | @highlight-color : #CC99FF;
11 | @warning-color : #CC99FF;
12 | @normal-color : #d9d9d9;
13 |
14 | @import "../examples/HeaderCustom.less";
15 | @import "../App.less";
--------------------------------------------------------------------------------
/src/theme/red.less:
--------------------------------------------------------------------------------
1 | @import "../component/theme/index.less";
2 | @ant-prefix : ant;
3 |
4 | // -------- Colors -----------
5 | @primary-color : red;
6 | @info-color : red;
7 | @success-color : red;
8 | @processing-color : red;
9 | @error-color : red;
10 | @highlight-color : red;
11 | @warning-color : red;
12 | @normal-color : #d9d9d9;
13 | @import "../examples/HeaderCustom.less";
14 | @import "../App.less";
--------------------------------------------------------------------------------