forked from alibaba-fusion/next
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
7ac35b0
commit 5ee79c7
Showing
16 changed files
with
991 additions
and
146 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,110 @@ | ||
| # 自定义卡片 | ||
|
|
||
| - order: 5 | ||
|
|
||
| 与子组件的组合来自定义卡片样式 | ||
|
|
||
| :::lang=en-us | ||
| # Free Mode | ||
|
|
||
| - order: 5 | ||
|
|
||
| Combination with subcomponents to customize card styles | ||
|
|
||
| ::: | ||
|
|
||
| --- | ||
|
|
||
| ````jsx | ||
| import { Card, Button } from '@alifd/next'; | ||
|
|
||
| ReactDOM.render( | ||
| <div> | ||
| <Card | ||
| className="free-card" | ||
| free | ||
| > | ||
| <Card.Media style={{ height: 140 }} image="https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png" /> | ||
| <Card.BulletHeader title="Title" subTitle="Sub Title" extra={<Button type="primary" text>Link</Button>} /> | ||
| <Card.CollaspeContent contentHeight="auto"> | ||
| Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat pertinacia an, cu verterem praesent quo. | ||
| </Card.CollaspeContent> | ||
| <Card.Actions> | ||
| <Button type="primary" key="action1" text>Action 1</Button> | ||
| <Button type="primary" key="action2" text>Action 2</Button> | ||
| </Card.Actions> | ||
| </Card> | ||
|
|
||
| <Card | ||
| className="free-card" | ||
| free | ||
| > | ||
| <Card.Media style={{ height: 140 }} image="https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png" /> | ||
| <Card.Header title="Title" subTitle="Sub Title" extra={<Button type="primary" text>Link</Button>} /> | ||
| <Card.Divider /> | ||
| <Card.Content> | ||
| Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat pertinacia an, cu verterem praesent quo. | ||
| </Card.Content> | ||
| <Card.Actions> | ||
| <Button type="primary" key="action1" text>Action 1</Button> | ||
| <Button type="primary" key="action2" text>Action 2</Button> | ||
| </Card.Actions> | ||
| </Card> | ||
| <Card | ||
| className="free-card custom" | ||
| free | ||
| > | ||
| <Card.Media image="https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png" /> | ||
| <div className="free-card-main"> | ||
| <Card.Header title="Title" subTitle="Sub Title" extra={<Button type="primary" text>Link</Button>} /> | ||
| <Card.Divider /> | ||
| <Card.Content> | ||
| Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. | ||
| </Card.Content> | ||
| <Card.Actions> | ||
| <Button type="primary" key="action1" text>Action 1</Button> | ||
| <Button type="primary" key="action2" text>Action 2</Button> | ||
| </Card.Actions> | ||
| </div> | ||
| </Card> | ||
| </div> | ||
| , mountNode); | ||
| ```` | ||
|
|
||
| ````css | ||
| .free-card { | ||
| display: inline-block; | ||
| width: 300px; | ||
| vertical-align: top; | ||
| } | ||
| .free-card + .free-card { | ||
| margin-left: 20px; | ||
| } | ||
|
|
||
| .free-card.custom { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| width: 500px; | ||
| height: 200px; | ||
| } | ||
|
|
||
| .free-card.custom .next-card-media { | ||
| height: 100%; | ||
| width: 200px; | ||
| flex-shrink: 0; | ||
| } | ||
|
|
||
| .free-card-main { | ||
| display: flex; | ||
| flex-direction: column; | ||
| align-items: stretch; | ||
| } | ||
|
|
||
| .free-card-main .next-card-content-container { | ||
| flex: 1; | ||
| } | ||
|
|
||
| .free-card-main .next-card-actions { | ||
| text-align: right; | ||
| } | ||
| ```` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| # 多媒体内容 | ||
|
|
||
| - order: 4 | ||
|
|
||
| 下面是一个使用图像来增强内容的卡片示例。 | ||
|
|
||
| :::lang=en-us | ||
| # Media Content | ||
|
|
||
| - order: 4 | ||
|
|
||
| Here is an example of a card that uses images to enhance content. | ||
|
|
||
| ::: | ||
|
|
||
| --- | ||
|
|
||
| ````jsx | ||
| import { Card, Button } from '@alifd/next'; | ||
|
|
||
| ReactDOM.render( | ||
| <Card | ||
| className="media-card" | ||
| media={<img src="https://img.alicdn.com/tfs/TB1FNIOSFXXXXaWXXXXXXXXXXXX-260-188.png" />} | ||
| contentHeight="auto" | ||
| title="Title" | ||
| subTitle="Sub Title" | ||
| extra={[ | ||
| <Button type="primary" key="action1" text>More</Button> | ||
| ]} | ||
| actions={[ | ||
| <Button type="primary" key="action1" text>Action 1</Button>, | ||
| <Button type="primary" key="action2" text>Action 2</Button> | ||
| ]} | ||
| > | ||
| Lorem ipsum dolor sit amet, est viderer iuvaret perfecto et. Ne petentium quaerendum nec, eos ex recteque mediocritatem, ex usu assum legendos temporibus. Ius feugiat pertinacia an, cu verterem praesent quo. | ||
|
|
||
| </Card> | ||
| , mountNode); | ||
| ```` | ||
|
|
||
| ````css | ||
| .media-card { | ||
| width: 300px; | ||
| } | ||
|
|
||
| .custom-card p { | ||
| color: #999; | ||
| } | ||
| ```` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| import React, { PureComponent } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import classNames from 'classnames'; | ||
| import ConfigProvider from '../config-provider'; | ||
|
|
||
| /** | ||
| * Card.Actions | ||
| */ | ||
| class CardActions extends PureComponent { | ||
| static propTypes = { | ||
| prefix: PropTypes.string, | ||
| /** | ||
| * 设置标签类型 | ||
| */ | ||
| component: PropTypes.elementType, | ||
| className: PropTypes.string, | ||
| }; | ||
|
|
||
| static defaultProps = { | ||
| prefix: 'next-', | ||
| component: 'div', | ||
| }; | ||
|
|
||
| render() { | ||
| const { | ||
| prefix, | ||
| component: Component, | ||
| className, | ||
| ...others | ||
| } = this.props; | ||
| return ( | ||
| <Component | ||
| {...others} | ||
| className={classNames(`${prefix}card-actions`, className)} | ||
| /> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default ConfigProvider.config(CardActions); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,69 @@ | ||
| import React, { Component } from 'react'; | ||
| import PropTypes from 'prop-types'; | ||
| import classNames from 'classnames'; | ||
| import ConfigProvider from '../config-provider'; | ||
|
|
||
| /** | ||
| * Card.BulletHeader | ||
| */ | ||
| class CardBulletHeader extends Component { | ||
| static propTypes = { | ||
| prefix: PropTypes.string, | ||
| /** | ||
| * 卡片的标题 | ||
| */ | ||
| title: PropTypes.node, | ||
| /** | ||
| * 卡片的副标题 | ||
| */ | ||
| subTitle: PropTypes.node, | ||
| /** | ||
| * 是否显示标题的项目符号 | ||
| */ | ||
| showTitleBullet: PropTypes.bool, | ||
| /** | ||
| * 标题区域的用户自定义内容 | ||
| */ | ||
| extra: PropTypes.node, | ||
| }; | ||
|
|
||
| static defaultProps = { | ||
| prefix: 'next-', | ||
| showTitleBullet: true, | ||
| }; | ||
|
|
||
| render() { | ||
| const { prefix, title, subTitle, extra, showTitleBullet } = this.props; | ||
|
|
||
| if (!title) return null; | ||
|
|
||
| const headCls = classNames({ | ||
| [`${prefix}card-head`]: true, | ||
| [`${prefix}card-head-show-bullet`]: showTitleBullet, | ||
| }); | ||
|
|
||
| const headExtra = extra ? ( | ||
| <div className={`${prefix}card-extra`}>{extra}</div> | ||
| ) : null; | ||
|
|
||
| return ( | ||
| <div className={headCls}> | ||
| <div className={`${prefix}card-head-main`}> | ||
| <div className={`${prefix}card-title`}> | ||
| {title} | ||
| {subTitle ? ( | ||
| <span className={`${prefix}card-subtitle`}> | ||
| {subTitle} | ||
| </span> | ||
| ) : null} | ||
| </div> | ||
| {headExtra} | ||
| </div> | ||
| </div> | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| export default ConfigProvider.config(CardBulletHeader, { | ||
| componentName: 'Card', | ||
| }); |
Oops, something went wrong.