antd#Card JavaScript Examples
The following examples show how to use
antd#Card.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: index.js From react_management_template with Apache License 2.0 | 7 votes |
|
render() {
return (
<div>
<Card title="文字背景轮播" className="card-wrap">
<Carousel autoplay effect="fade">
<div><h3>Ant Motion Banner - React</h3></div>
<div><h3>Ant Motion Banner - Vue</h3></div>
<div><h3>Ant Motion Banner - Angular</h3></div>
</Carousel>
</Card>
<Card title="图片轮播" className="card-wrap">
<Carousel autoplay effect="fade">
<div>
<img src="/carousel-img/carousel-1.jpg" alt=""/>
</div>
<div>
<img src="/carousel-img/carousel-2.jpg" alt=""/>
</div>
<div>
<img src="/carousel-img/carousel-3.jpg" alt=""/>
</div>
</Carousel>
</Card>
</div>
);
}
Example #2
| Source File: index.js From acy-dex-interface with MIT License | 6 votes |
|
AcyCard = ({ className: styledClassName, ...props }) => {
const { max } = props;
return <Card
{...props}
className={className(styles.acycard, styledClassName)}
headStyle={{
borderBottom: 0,
}}
bodyStyle={{
padding: '8px',
}}
title={
props.title && <div className={styles.card_header}>
{
props.title
}
</div>
}
>
{props.children}
</Card>
}
Example #3
| Source File: monthlySales.js From shopping-cart-fe with MIT License | 6 votes |
|
MonthlySales = ({ currency, monthSales }) => {
return (
<div>
<Card title='Monthly Sales' style={{ width: 300 }}>
{monthSales > 0 ? (
<p className='earnings'>
<span>{currency}</span>
{monthSales}
</p>
) : (
<p>No sales</p>
)}
</Card>
</div>
);
}
Example #4
| Source File: OrgMemberCard.js From video-journal-for-teams-fe with MIT License | 6 votes |
|
function OrgMemberCard(props) {
const { data, organization_id } = props;
const isSelf = data.user_id === props.userId
return (
<Card
className="member-card"
bordered={false}
hoverable
>
<div className='image-container'>
{(!data.avatar) ? (<Avatar size={64} icon="user" />) : (
<img alt="user avatar" src={`${process.env.REACT_APP_S3_STORAGE_PATH}${data.avatar}`} />)}
</div>
<p className="small">{data.user_full_name}</p>
<OrgEditMemberCard member={data} isSelf={isSelf} organization_id = {organization_id} />
</Card>
)
}
Example #5
| Source File: index.js From react_management_template with Apache License 2.0 | 6 votes |
|
render() {
return (
<Row>
<Card title="Spin的用法" className="card-wrap">
<Spin size="small"/>
<Spin/>
<Spin size="large"/>
</Card>
<Card title="内容遮罩" className="card-wrap">
<Alert message="React" description="Antd Pro Design of React教程学习" type="info">
</Alert>
<Alert message="React" description="Antd Pro Design of React教程学习" type="warning">
</Alert>
<Spin tip="加载中">
<Alert message="React" description="Antd Pro Design of React教程学习" type="warning">
</Alert>
</Spin>
</Card>
</Row>
);
}
Example #6
| Source File: InfoWindow.js From henan-rescue-viz-website with MIT License | 6 votes |
|
function InfoWindow(props) {
if (typeof (props.item) === 'undefined') return null
return <CustomOverlay
position={props.item.location}
autoViewport={props.shouldAutoCenter}>
<Card style={ { width: 320 } }>
<Button type="text" danger className="windowCloseBtn" onClick={props.onCloseClick}>
<CloseCircleOutlined />
</Button>
<InfoItem info={props.item} key={props.item.id} handleCorrection={props.handleCorrection}/>
</Card>
</CustomOverlay>
}
Example #7
| Source File: Unsubscribe.js From Cowin-Notification-System with MIT License | 6 votes |
|
Unsubscribe = () => {
const dispatch = useDispatch()
const search = useLocation().search
useEffect(() => {
const email = new URLSearchParams(search).get('email');
const token = new URLSearchParams(search).get('token');
dispatch(unsubscribeEmail(email,token))
},[search, dispatch]);
const unsubscribe = useSelector((state) => state.base.unsubscribe);
const {
isDone,
success,
email,
} = unsubscribe;
return (
<Row className={'padding--sides width-100 height-100'}>
<Card className='border-round padding--sides padding--ends margin--ends background-grey center' style={{width: '100%'}}>
{
isDone ?
success ?
<>
<CheckCircleOutlined className='f72 text-green' />
<div className='text-black center margin--top f18'>
You have successfully unsubscribed! Your email {email} will no longer receive notifications. Redirecting to homepage...
</div>
</> :
<>
<CloseCircleOutlined className='f72 text-red' />
<div className='text-black center margin--top f18'>
Something went wrong and we could not process your request. Please Try again.
</div>
</> :
<Loader />
}
</Card>
</Row>
)
}
Example #8
| Source File: index.jsx From react-antd-admin-template with MIT License | 6 votes |
|
TypingCard = (props) => {
const { title, source } = props;
const sourceEl = useRef();
const outputEl = useRef();
useEffect(() => {
const typing = new Typing({
source: sourceEl.current,
output: outputEl.current,
delay: 30,
});
typing.start();
}, []);
return (
<Card bordered={false} className="card-item" title={title}>
<div
style={{ display: "none" }}
ref={sourceEl}
dangerouslySetInnerHTML={{ __html: source }}
/>
<div ref={outputEl} />
</Card>
);
}
Example #9
| Source File: card.c.jsx From twitterSOS with GNU General Public License v3.0 | 6 votes |
|
TweetCard = ({ tweet }) => {
const { id, category, content, handle, link, datetime } = tweet;
return (
<div className='tweet-cards'>
<a style={{ color: 'black' }} href={`${link}`} target='_blank'>
<Card title={category} bordered={true} id='ind-card'>
<p className='ID-right'>ID : {`${id + 1}`}</p>
<p> {content}</p>
<p className='tweet-font '>
<a href={`https://twitter.com/${handle}`} target='_blank' rel='noreferrer noopener'>
{handle}
</a>
</p>
<p>{datetime}</p>
</Card>
</a>
<br />
</div>
);
}
Example #10
| Source File: creator.js From portfolyo-mern with MIT License | 6 votes |
|
function creator() {
return (
<div id="creator" className="block featureBlock bgGray">
<div className="container-fluid">
<div className="titleHolder">
<h2>Our Team!</h2>
<p></p>
</div>
<Row gutter={[16, 16]}>
<Col xs={{ span: 24 }} sm={{ span: 12 }} md={{ span: 8 }}>
<Card
hoverable
cover={<img alt="Modern Design" src={image1} />}
>
<Meta title="Akshay Murari" />
</Card>
</Col>
<Col xs={{ span: 24 }} sm={{ span: 12 }} md={{ span: 8 }}>
<Card
hoverable
cover={<img alt="Test" src={image2} />}
>
<Meta title="Deepesh Dragoneel" />
</Card>
</Col>
<Col xs={{ span: 24 }} sm={{ span: 12 }} md={{ span: 8 }}>
<Card
hoverable
cover={<img alt="Test" src={image3} />}
>
<Meta title="Kranthi Kumar" />
</Card>
</Col>
</Row>
</div>
</div>
);
}
Example #11
| Source File: index.js From certificate-generator with MIT License | 6 votes |
|
function Cards(props) {
return (
<div className="div-cards">
<h1 className="title-1"><span className="sub-title-1">Descubra</span> o que o nosso <span className="sub2-title-1">Gerador de Certificados</span> pode fazer por você </h1>
<div className="site-card-wrapper">
<Card className="card" title="Certificados Ilimitados" bordered={false}>
Envie quantos certificados você precisar.
</Card>
<Card className="card" title="Envios Ilimitados" bordered={false}>
Envie o certificado de cada participante por e-mail.
</Card>
<Card className="card" title="Controle de participantes" bordered={false}>
Cadastre seus participantes para cada evento e selecione quem irá receber os certificados em nosso <em>check-list</em>.
</Card>
<Card className="card" title="Escreva sua assinatura" bordered={false}>
Escreva sua assinatura digital em nosso Pad para os seus certificados.
</Card>
<Card className="card" title="Uso empresarial" bordered={false}>
Crie uma conta para você ou sua comunidade e gere certificados para seus eventos e cursos.
</Card>
<Card className="card" title="Praticidade" bordered={false}>
Registre seus eventos/cursos e gere os certificados quando for melhor para você e envie a hora que quiser.
</Card>
</div>
</div>
);
}
Example #12
| Source File: index.jsx From micro-front-template with MIT License | 6 votes |
|
List = () => {
// 设置列表信息
const [data, setData] = useState([]);
// 设置页码信息
const [page, setPage] = useState(1);
const [pageInfo, setPageInfo] = useState();
useEffect(() => {
console.log({ page });
// (async () => {
// const result = await fetchVegetable(page, 10);
// const { vegetableList } = result.data;
// setData(() => vegetableList.items);
// setPageInfo(() => ({
// current: vegetableList.page,
// pageSize: vegetableList.pageSize,
// total: vegetableList.total,
// onChange: (page) => setPage(page),
// }));
// })();
}, [page]);
return (
<Card title="React 子应用列表页">
<h2 style={{ fontSize: "26px", color: "#fb4487" }}>
曾经充满数据的一个列表（因服务器到期，此处数据已丢失）
</h2>
{/* <Table rowKey="_id" dataSource={data} pagination={pageInfo}>
<Column dataIndex="poster" render={(text) => <Avatar src={text} />} />
<Column dataIndex="name" />
<Column dataIndex="price" render={(text) => <>￥ {text}</>} />
</Table> */}
</Card>
);
}
Example #13
| Source File: TechDetails.jsx From node-project-manager with Apache License 2.0 | 6 votes |
|
TechDetails = ({tech}) => {
return (
<div className="techDetails">
<Card title={tech.nombre}>
<Avatar src={tech.icon} size="large"></Avatar>
{tech.descripcion}
<hr/>
Versión: {tech.version}
<hr/>
Creado por : <UserPopUpDetails/>
<hr/>
Usado por : <PopUpList/>
</Card>
</div>
);
}
Example #14
| Source File: index.js From online-test-platform with Apache License 2.0 | 6 votes |
|
render() {
const {
loading = false,
contentHeight,
title,
avatar,
action,
total,
footer,
children,
...rest
} = this.props;
return (
<Card loading={loading} bodyStyle={{ padding: '20px 24px 8px 24px' }} {...rest}>
{this.renderConnet()}
</Card>
);
}
Example #15
| Source File: index.jsx From juno with Apache License 2.0 | 6 votes |
|
render() {
const { appName, appInfo, version, appIdcList } = this.props;
const { env, idcCode } = this.props;
let view = null;
view = (
<View
appName={appName}
appInfo={appInfo}
appIdcList={appIdcList}
env={env}
idcCode={idcCode}
/>
);
return (
<Card>
{/*<AppHeader*/}
{/* appInfo={appInfo}*/}
{/* appIdcList={appIdcList}*/}
{/* env={env}*/}
{/* idcCode={idcCode}*/}
{/*/>*/}
{view}
</Card>
);
}
Example #16
| Source File: MemberInfoCard.js From react-portal with MIT License | 6 votes |
|
MemberInfoCard = ({ data }) => {
return (
<>
<Card style={{ marginBottom: "4px" }}>
<Row
style={{
alignItems: "center"
//justifyContent: "space-between"
//margin: "-10px"
}}
>
<Col span={4}>
<Avatar
src={data.image}
style={{ marginLeft: "8px" }}
/>
</Col>
<Col
span={data.type === "head" ? 14 : 16}
style={{ fontSize: "14px" }}
>
{data.name}
</Col>
{data.type === "head" ? (
<Col span={2}>
<FaCrown />
</Col>
) : null}
<Col>
<Tag color="red">{data.role}</Tag>
</Col>
</Row>
</Card>
</>
);
}
Example #17
| Source File: Login.js From kafka-map with Apache License 2.0 | 6 votes |
|
render() {
return (
<div className='login-bg'
style={{width: this.state.width, height: this.state.height, backgroundColor: '#F0F2F5'}}>
<Card className='login-card' title={null}>
<div style={{textAlign: "center", margin: '15px auto 30px auto', color: '#1890ff'}}>
<Title level={1}>Kafka Map</Title>
</div>
<Form onFinish={this.handleSubmit} className="login-form">
<Form.Item name='username' rules={[{required: true, message: '请输入登录账号！'}]}>
<Input prefix={<UserOutlined/>} placeholder="登录账号"/>
</Form.Item>
<Form.Item name='password' rules={[{required: true, message: '请输入登录密码！'}]}>
<Input.Password prefix={<LockOutlined/>} placeholder="登录密码"/>
</Form.Item>
{/*<Form.Item name='remember' valuePropName='checked' initialValue={false}>*/}
{/* <Checkbox>记住登录</Checkbox>*/}
{/*</Form.Item>*/}
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button"
loading={this.state.inLogin}>
登录
</Button>
</Form.Item>
</Form>
</Card>
</div>
);
}
Example #18
| Source File: LoginContainer.js From YApi-X with MIT License | 6 votes |
|
render() {
return (
<div className="g-body login-body">
<div className="m-bg">
<div className="m-bg-mask m-bg-mask0" />
<div className="m-bg-mask m-bg-mask1" />
<div className="m-bg-mask m-bg-mask2" />
<div className="m-bg-mask m-bg-mask3" />
</div>
<div className="main-one login-container">
<div className="container">
<Row type="flex" justify="center">
<Col xs={20} sm={16} md={12} lg={8} className="container-login">
<Card className="card-login">
<h2 className="login-title">YAPI</h2>
<div className="login-logo">
<LogoSVG length="100px" />
</div>
<Login />
</Card>
</Col>
</Row>
</div>
</div>
</div>
);
}
Example #19
| Source File: list.jsx From egoshop with Apache License 2.0 | 6 votes |
|
render() {
const {
listData,
loading,
} = this.props;
return (
<PageHeaderWrapper>
<Card bordered={false}>
<div className={styles.tableList}>
<div className={styles.tableListForm}>{this.renderSimpleForm()}</div>
<div className={styles.tableListOperator}>
<Button icon="plus" type="primary" onClick={() => {
router.push({
pathname: `/com/create`,
});
}}>
新建
</Button>
</div>
<StandardTable
loading={loading}
data={listData}
columns={this.columns}
onSelectRow={this.handleSelectRows}
onChange={this.handleStandardTableChange}
/>
</div>
</Card>
</PageHeaderWrapper>
);
}
Example #20
| Source File: Projects.js From camel-store-admin with Apache License 2.0 | 6 votes |
|
render() {
const {
list: { list },
} = this.props;
return (
<List
className={stylesProjects.coverCardList}
rowKey="id"
grid={{ gutter: 24, xxl: 3, xl: 2, lg: 2, md: 2, sm: 2, xs: 1 }}
dataSource={list}
renderItem={item => (
<List.Item>
<Card
className={stylesProjects.card}
hoverable
cover={<img alt={item.title} src={item.cover} />}
>
<Card.Meta title={<a>{item.title}</a>} description={item.subDescription} />
<div className={stylesProjects.cardItemContent}>
<span>{moment(item.updatedAt).fromNow()}</span>
<div className={stylesProjects.avatarList}>
<AvatarList size="mini">
{item.members.map(member => (
<AvatarList.Item
key={`${item.id}-avatar-${member.id}`}
src={member.avatar}
tips={member.name}
/>
))}
</AvatarList>
</div>
</div>
</Card>
</List.Item>
)}
/>
);
}
Example #21
| Source File: Index.js From acy-dex-interface with MIT License | 5 votes |
|
{ Meta } = Card
Example #22
| Source File: UserTeamsCard.js From video-journal-for-teams-fe with MIT License | 5 votes |
|
{ Meta } = Card
Example #23
| Source File: index.js From react_management_template with Apache License 2.0 | 5 votes |
|
render() {
return (
<div>
<Card title="内敛表单" className="card-wrap-login">
<Form name="horizontal_login" layout="inline">
<Form.Item name="username" rules={[{ required: true, message: 'Please input your username!' }]}>
<Input prefix={<UserOutlined className="site-form-item-icon" />} placeholder="用户名" />
</Form.Item>
<Form.Item name="password" rules={[{ required: true, message: 'Please input your password!' }]}>
<Input prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="密码"/>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit">
登录
</Button>
</Form.Item>
</Form>
</Card>
<Card title="外联表单" className="card-wrap">
<Form name="normal_login" className="login-form" initialValues={{ remember: true }}>
<Form.Item rules={[{ required: true, message: '请输入用户名！！！' }]}>
<Input name="username" prefix={<UserOutlined className="site-form-item-icon" />} placeholder="请输入用户名" onChange={this.onInputChange} />
</Form.Item>
<Form.Item rules={[{ required: true, message: '请输入密码！！！' }]}>
<Input name="password" prefix={<LockOutlined className="site-form-item-icon" />} type="password" placeholder="请输入密码" onChange={this.onInputChange}/>
</Form.Item>
<Form.Item>
<Form.Item name="remember" valuePropName="checked" noStyle>
<Checkbox>记住密码</Checkbox>
</Form.Item>
<a className="login-form-forgot" href="">
忘记密码
</a>
</Form.Item>
<Form.Item>
<Button type="primary" htmlType="submit" className="login-form-button" onClick={this.onhandleSubmit}>
登录
</Button>
</Form.Item>
</Form>
</Card>
</div>
);
}
Example #24
| Source File: adminManageAnnouncements.js From ctf_platform with MIT License | 5 votes |
|
CreateAnnouncementsForm = (props) => {
const [form] = Form.useForm();
const [editorValue, setEditorValue] = React.useState("")
return (
<Form
form={form}
name="announcements_creation_form"
className="announcements_creation_form"
onFinish={(values) => {
setEditorValue("")
form.resetFields()
props.createAnnouncement(values)
}}
>
<h3>Title</h3>
<Form.Item
name="title"
rules={[{ required: true, message: 'Please enter the title' }]}
>
<Input allowClear placeholder="Enter the announcement title" />
</Form.Item>
<h3>Content <span>(Supports Markdown)</span></h3>
<Form.Item
name="content"
rules={[
{ required: true, message: 'Please enter the content' },]}
valuePropName={editorValue}
>
<MDEditor value={editorValue} onChange={(value) => { setEditorValue(value) }} preview="edit" />
</Form.Item>
<h3>Preview</h3>
<Card
hoverable
type="inner"
bordered={true}
bodyStyle={{ backgroundColor: "#262626" }}
style={{ overflow: "hidden", marginBottom: "3ch" }}
>
<MarkdownRender>{editorValue}</MarkdownRender>
<span style={{ float: "right" }}>Posted on <i>Post Date</i></span>
</Card>
<Form.Item>
<Button style={{ marginRight: "1.5vw" }} onClick={() => { props.setState({ createAnnouncementsModal: false }) }}>Cancel</Button>
<Button type="primary" htmlType="submit" style={{ marginBottom: "1.5vh" }} loading={props.state.modalLoading}>Create Announcement</Button>
</Form.Item>
</Form>
);
}
Example #25
| Source File: index.js From QiskitFlow with Apache License 2.0 | 5 votes |
|
export function ExperimentsList({
loading,
page,
count,
results,
filter,
getExperiments,
setFilterDateStart,
setFilterDateEnd,
setFilterQuery,
setPage,
}) {
useInjectReducer({ key, reducer });
useInjectSaga({ key, saga });
const didMount = useRef(true);
useEffect(() => {
if (didMount.current) getExperiments(1);
didMount.current = false;
});
const columns = [
{
title: 'Name',
dataIndex: 'name',
key: 'name',
render: (name, row) => <Link to={`/experiments/${row.id}`}>{name}</Link>,
},
{
title: '# of runs',
dataIndex: 'runs',
key: 'runs',
render: runs => runs.length,
},
{ title: 'Date', dataIndex: 'created_at', key: 'created_at', render: (date) => <span>{new Date(date).toDateString()}</span>},
];
const rows = results.map((res, i) => ({ ...res, key: i }));
return (
<div>
<Helmet>
<title>Experiments</title>
<meta name="description" content="QiskitFlow. Experiments list." />
</Helmet>
<Card title="Experiments list">
<FilterForm
setFilterDateStart={setFilterDateStart}
setFilterDateEnd={setFilterDateEnd}
setFilterQuery={setFilterQuery}
filter={filter}
/>
</Card>
<Table
loading={loading}
columns={columns}
expandable={{ expandedRowRender }}
dataSource={rows}
pagination={{
onChange: p => setPage(p),
current: page,
total: count,
}}
/>
</div>
);
}
Example #26
| Source File: index.jsx From react-antd-admin-template with MIT License | 5 votes |
|
RichTextEditor = () => {
const [editorState, setEditorState] = useState(EditorState.createEmpty());
const onEditorStateChange = (editorState) => setEditorState(editorState);
return (
<div>
<Card bordered={false}>
<Editor
editorState={editorState}
onEditorStateChange={onEditorStateChange}
wrapperClassName="wrapper-class"
editorClassName="editor-class"
toolbarClassName="toolbar-class"
localization={{ locale: "zh" }}
/>
</Card>
<br />
<Row gutter={10}>
<Col span={12}>
<Card
title="同步转换HTML"
bordered={false}
style={{ minHeight: 200 }}
>
{editorState &&
draftToHtml(convertToRaw(editorState.getCurrentContent()))}
</Card>
</Col>
<Col span={12}>
<Card
title="同步转换MarkDown"
bordered={false}
style={{ minHeight: 200 }}
>
{editorState &&
draftToMarkdown(convertToRaw(editorState.getCurrentContent()))}
</Card>
</Col>
</Row>
</div>
);
}
Example #27
| Source File: creator.js From portfolyo-mern with MIT License | 5 votes |
|
{ Meta } = Card
Example #28
| Source File: index.js From topology-react with MIT License | 5 votes |
|
{ Meta } = Card
Example #29
| Source File: index.jsx From moonshot with MIT License | 5 votes |
|
export default function Contract({ customContract, account, gasPrice, signer, provider, name, show, price, blockExplorer }) {
const contracts = useContractLoader(provider);
let contract
if(!customContract){
contract = contracts ? contracts[name] : "";
}else{
contract = customContract
}
const address = contract ? contract.address : "";
const contractIsDeployed = useContractExistsAtAddress(provider, address);
const displayedContractFunctions = useMemo(
() =>
contract
? Object.values(contract.interface.functions).filter(
fn => fn.type === "function" && !(show && show.indexOf(fn.name) < 0),
)
: [],
[contract, show],
);
const [refreshRequired, triggerRefresh] = useState(false)
const contractDisplay = displayedContractFunctions.map(fn => {
if (isQueryable(fn)) {
// If there are no inputs, just display return value
return <DisplayVariable key={fn.name} contractFunction={contract[fn.name]} functionInfo={fn} refreshRequired={refreshRequired} triggerRefresh={triggerRefresh}/>;
}
// If there are inputs, display a form to allow users to provide these
return (
<FunctionForm
key={"FF" + fn.name}
contractFunction={(fn.stateMutability === "view" || fn.stateMutability === "pure")?contract[fn.name]:contract.connect(signer)[fn.name]}
functionInfo={fn}
provider={provider}
gasPrice={gasPrice}
triggerRefresh={triggerRefresh}
/>
);
});
return (
<div style={{ margin: "auto", width: "70vw" }}>
<Card
title={
<div>
{name}
<div style={{ float: "right" }}>
<Account
address={address}
localProvider={provider}
injectedProvider={provider}
mainnetProvider={provider}
price={price}
blockExplorer={blockExplorer}
/>
{account}
</div>
</div>
}
size="large"
style={{ marginTop: 25, width: "100%" }}
loading={contractDisplay && contractDisplay.length <= 0}
>
{contractIsDeployed ? contractDisplay : noContractDisplay}
</Card>
</div>
);
}
