22 |
23 |
24 |
25 | );
26 | ReactDOM.render(
27 |
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
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
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 |
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 | {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 = Show Tooltip
13 |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 |
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 | 14 | 15 | Nprogress.start() — 显示进度条 16 |
17 |18 | 19 | Nprogress.done() — 进度条完成 20 |
21 |
8 |
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 |
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 |
14 |
15 |
16 |
18 |
22 |
23 |
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 | 二维码生成
13 |
19 |
21 |
19 |
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 |
20 |
23 | 请输入Markdown语法
21 | 22 |
7 |
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 |
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 |
7 |
13 |
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 |
8 |
12 | 13 |
14 |
18 |
7 | U
9 | USER
10 | U
12 |
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 |
13 |
14 |
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 |
11 |
12 |
14 |
15 |
17 |
18 |
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 |
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 | 鼠标放在状态点上时显示文字 13 |
8 |
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 |
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 | Card content
12 |
13 | Card content
15 |
16 | 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 |
15 |
16 | Whatever content
17 |
18 |
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 |
9 |
10 |
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 | Card content
11 |Card content
12 |Card content
13 |Card content
10 |Card content
11 |Card content
12 |Card content
10 |Card content
11 |Card content
12 |
12 |
13 |
14 |
15 |
16 |
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 | 1
2
3
4
12 |
13 |
14 |
15 |
16 |
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 | 1
2
3
4
10 |
11 |
12 |
13 |
14 |
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 | 1
2
3
4
10 |
11 |
12 |
13 |
14 |
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 | 1
2
3
4
{text[1]}
20 |{text[2]}
23 |{text[0]}
26 |{text[1]}
18 |{text[2]}
21 |{text[0]}
24 |{text}
19 |{text}
22 |- quant-ui footer part}
24 | renderItem={item => (
25 |
6 |
9 | )
10 |
11 | class Detail extends Component {
12 |
13 | render() {
14 | return (
15 | Content
7 |Content
8 |
10 |
11 |
12 |
13 |
14 |
15 |
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 | { this.container = node; }}>
9 |
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 |
10 | this.container}>
11 |
14 |
15 |
16 |
16 | {
17 | this.state.visible ? (
18 |
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 | placeholder text here
27 |
8 |
10 |
12 |
14 |
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 | 10 |
12 |
14 |
12 |
19 |
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 | 19 |
8 |
10 |
12 |
14 |
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 | 10 |
12 |
14 |
8 |
9 |
10 |
11 |
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 |
9 |
10 |
11 | 12 | 13 |
14 | 15 | 16 |
17 |
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 | 11 | 12 | 13 |
14 | 15 | 16 |
17 |
18 |
19 |
20 |
21 |
7 |
8 |
9 |
10 |
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 |
10 |
11 |
12 |
13 | 14 | 15 | 16 | 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 | 13 | 14 | 15 | 16 | 17 |
11 |
13 |
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 |
15 |
17 |
19 |
21 |
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 | 17 |
19 |
21 |
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 | 14 |
16 |
18 |
15 |
17 |
19 |
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 | 17 |
19 |
12 |
14 |
16 |
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 | 14 |
16 |
22 |
25 |
32 |
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 | Some contents...
33 |Some contents...
34 |Some contents...
35 |
22 |
25 |
32 |
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 |
10 | );
11 |
12 | class Detail extends Component {
13 |
14 | render() {
15 | return (
16 | Some contents...
33 |Some contents...
34 |Some contents...
35 |
12 |
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 | Icon图标
13 | 14 | 15 | 16 |
8 |
9 |
10 |
11 |
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 | 15 |
21 |
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 |
18 |
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 |
20 |
21 |
22 |
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 |
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 |
18 |
19 |
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 |
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 |
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 |
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 | 19 |
20 |
21 |
22 |
23 |
24 |
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 |
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 |
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 |
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 |
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 |
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 |
16 |
17 |
18 |
19 |
20 |
21 |
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:
13 |
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 |
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 | 16 |
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 |
8 |
9 |
10 |
11 |
12 |
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 |
8 |
9 |
10 |
11 |
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 |
8 |
9 |
10 |
11 |
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 |
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 |
18 | Disabled
19 |
20 |Disabled
21 |
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 |
22 |
25 |
26 |
9 |
11 |
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 | 11 |
9 |
11 |
13 |
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 | 11 |
13 |
15 |
21 |
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 |
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 |
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();
9 | }
10 |
11 | function handleChange(value) {
12 | console.log('selected'+value);
13 | }
14 | class Detail extends Component {
15 |
16 | render() {
17 | return (
18 |
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();
9 | }
10 |
11 | function handleChange(value) {
12 | console.log('selected' +value);
13 | }
14 |
15 | class Detail extends Component {
16 |
17 | render() {
18 | return (
19 |
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 |
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 |
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 |
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 | included=true
21 |included=false
25 |marks & step
28 |step=null
31 |
11 |
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 |
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 |
26 |
28 |
29 |
31 |
32 |
34 |
14 |
15 |
21 |
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 |
22 | Loading state：
24 |
8 |
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 |
21 | {container}
22 |
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 |
23 | Loading state：
25 |
8 |
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 |
18 |
20 | 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 | 20 | 21 |
9 |
11 |
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 | 11 |
9 |
11 |
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 | 11 |
8 |
10 |
12 |
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 | 10 |
12 |
13 |
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 |
10 |
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 | 图表主要使用的是echarts,api在echarts的官网有详细的介绍
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:图表主要使用的是echarts,api在echarts的官网有详细的介绍
, 5 | api: [ 6 | 7 | ] 8 | } 9 | ]; 10 | 11 | export default { 12 | api 13 | } -------------------------------------------------------------------------------- /src/examples/charts/Bar/Basic1/code.js: -------------------------------------------------------------------------------- 1 | const code = ` 2 |图表主要使用的是echarts,api在echarts的官网有详细的介绍
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:图表主要使用的是echarts,api在echarts的官网有详细的介绍
, 6 | api: [ 7 | 8 | ] 9 | } 10 | ]; 11 | 12 | export default { 13 | api 14 | } -------------------------------------------------------------------------------- /src/examples/charts/Diagram/Basic1/code.js: -------------------------------------------------------------------------------- 1 | const code = ` 2 |图表主要使用的是echarts,api在echarts的官网有详细的介绍
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:图表主要使用的是echarts,api在echarts的官网有详细的介绍
, 5 | api: [ 6 | 7 | ] 8 | } 9 | ]; 10 | 11 | export default { 12 | api 13 | } -------------------------------------------------------------------------------- /src/examples/charts/Diagram1/Basic1/code.js: -------------------------------------------------------------------------------- 1 | const code = ` 2 |图表主要使用的是echarts,api在echarts的官网有详细的介绍
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:图表主要使用的是echarts,api在echarts的官网有详细的介绍
, 5 | api: [ 6 | 7 | ] 8 | } 9 | ]; 10 | 11 | export default { 12 | api 13 | } -------------------------------------------------------------------------------- /src/examples/charts/Diagram2/Basic1/code.js: -------------------------------------------------------------------------------- 1 | const code =` 2 |图表主要使用的是echarts,api在echarts的官网有详细的介绍
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:图表主要使用的是echarts,api在echarts的官网有详细的介绍
, 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:图表主要使用的是echarts,api在echarts的官网有详细的介绍
, 5 | api: [ 6 | 7 | ] 8 | } 9 | ]; 10 | 11 | export default { 12 | api 13 | } -------------------------------------------------------------------------------- /src/examples/charts/Line/Basic1/code.js: -------------------------------------------------------------------------------- 1 | const code = ` 2 |图表主要使用的是echarts,api在echarts的官网有详细的介绍
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:图表主要使用的是echarts,api在echarts的官网有详细的介绍
, 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 |
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 |
14 |
17 | )
18 | })
19 | }
20 | {title}
15 | 16 |
8 |
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 |
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 |
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 | 高德地图
7 | 8 |9 | 高德地图api官网插件比较多，demo非常详细，可自行选择官网组件 10 |
11 |
8 |
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 | currency方法主要用于处理精度损失
9 | 10 |
8 |
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 | 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 |
8 |
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 | throttle方法函数节流
9 |适用于限制`resize`和`scroll`等函数的调用频率
10 |
8 |
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 | debounce函数防抖
9 |与throttle不同的是，debounce保证一个函数在多少毫秒内不再被触发，只会执行一次
10 |
18 |
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 | 20 | 21 | 22 |
23 |
21 |
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 | 点击图片切换全屏
22 |
20 |
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 | 当前字体颜色{getCurrentColor()}
21 | 22 | 23 | 24 |
12 |
14 |
15 |
16 |
18 |
22 |
23 |
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";
--------------------------------------------------------------------------------
webSocket链接
13 |
19 |
21 |