使用Ant Design写一个仿微软ToDo - Web

TOP

使用Ant Design写一个仿微软ToDo(二)

2019-09-17 18:59:41 【大中小】浏览:73次

成'>已完成<Icon type='null' /></Menu.Item> <Menu.Item key='未完成'>未完成<Icon type='null' /></Menu.Item> </Menu> ); // 右侧按钮组件 const cardExtra = ( <Fragment> <Dropdown overlay={Menu_how} trigger={['click']} style={{ padding: '0' }}> <Button>{showType}<Icon type='caret-down' /></Button> </Dropdown> <Space></Space> <Dropdown overlay={Menu_show} trigger={['click']}> <Button>全部<Icon type='caret-down' /></Button> </Dropdown> <Space></Space> <Button style={buttonBorderStyle} type='primary' ghost size='large' onClick={() => this.showDrawer()}><Icon type='plus' /></Button> </Fragment> ); //抽屉按钮 const DrawerButton = ({ button1_Click, button1_text, button2_Click, button2_text }) => ( <Fragment> <Avatar icon='user'></Avatar> <Button.Group> <Button style={buttonBorderStyle}><Icon type='file' /></Button> <Button style={buttonBorderStyle}><Icon type='bars' /></Button> <Button style={buttonBorderStyle}><Icon type='retweet' /></Button> </Button.Group> <Space /><Space /> <Button style={buttonBorderStyle} onClick={button1_Click}>{button1_text}</Button> <Button style={buttonBorderStyle} ghost type='primary' onClick={button2_Click}>{button2_text}</Button> </Fragment> ); // 抽屉标题按钮 const drawerTitle = taskChoice && (taskChoice.taskId === null) ? ( <DrawerButton button1_Click={this.onClose} button1_text={'取消'} button2_Click={this.handleSave} button2_text={'保存'} ></DrawerButton> ) : ( <DrawerButton button1_Click={this.handleRemove} button1_text={'删除'} button2_Click={this.onClose} button2_text={'关闭'} ></DrawerButton> ); return ( <div> <Card headStyle={{ height: '65px' }} title={cardTitle} extra={cardExtra} style={cardWidth} > <Suspense fallback={null}> {showType === '四象限' ? <CardList dataSource={task_level} showDrawer={this.showDrawer} finished={this.handleFinished} /> : <TimelineList dataSource={task} showDrawer={this.showDrawer} finished={this.handleFinished} /> } </Suspense> </Card> <Drawer title={drawerTitle} placement='right' mask={false} width={400} closable={false} visible={visible} > <Suspense fallback={null}> <TaskForm {...otherField} onChange={this.onChangeRadio} form={form} taskC={taskChoice} handleSubmit={this.handleSave} ></TaskForm> </Suspense> </Drawer> </div> ); }

头部标题：

const CardTitle = ({ handleChangeButton, buttonType, showDate }) => (
    <Fragment>
        <Row type='flex' align='middle' gutter={8} justify='start' style={{ width: '480px' }}>
            <Col span={6}>
                {showDate}
            </Col>
            <Col span={3}>
                <Button.Group>
                    <Button icon='left' style={buttonBorderStyle} ></Button>
                    <Button icon='right' style={buttonBorderStyle} ></Butt

首页上一页 1 2 3 下一页尾页 2/3/3
【大中小】【打印】【繁体】【投稿】【收藏】【推荐】【举报】【评论】【关闭】【返回顶部】

上一篇：js new关键字	下一篇：01-vue指令