DataType
/
omi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge pull request #637 from ringozzt/ringo 

feat(card): add props: hoverable & more example
This commit is contained in:
当耐特 2021-07-31 20:01:28 +08:00 committed by GitHub
parent f82ee45b73 b103e1d02a
commit f54b1a710b
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 73 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
components/card/README.md
View File

@ -30,9 +30,10 @@ Or use script tag to ref it.
```tsx
{
title?: string,
hoverable?: string,
extra?: string,
actions?: any[],
size?: 'medium' | 'small'
size?: 'large' | 'medium' | 'small'
}
```
@ -40,6 +41,6 @@ Or use script tag to ref it.
```tsx
{
size: '',
size: 'large',
}
```

43
components/card/demos/js-demo/index.html
View File

@ -18,14 +18,16 @@
<script src="../../../common//src/index.js"></script>
<script src="../../src/index.js"></script>
<!-- 这里导入合适的OmiU-icon -->
<!-- 这里导入需要的的OmiU-component -->
<script src="https://unpkg.com/@omiu/icon@0.0.2/add-a-photo-rounded.js"></script>
<script src="https://unpkg.com/@omiu/icon@0.0.2/add-comment-rounded.js"></script>
<script src="https://unpkg.com/@omiu/icon@0.0.2/add-ic-call-rounded.js"></script>
<script src="https://unpkg.com/@omiu/avatar"></script>
<script src="https://unpkg.com/@omiu/image"></script>
<div style="display: flex; flex-direction: column; justify-content: space-around;">
<div style="display: flex; margin: 2% 10%; justify-content: space-around; flex-wrap: wrap">
<o-card title="Default size card">
<o-card title="Default size card" hoverable="true">
<o-link underline='0' type="primary" target="_blank" href="https://tencent.github.io/omi/" slot="extra">More</o-link>
<!-- <div slot="cover">
<img alt="example" src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png" />
@ -35,9 +37,11 @@
<p>Card content</p>
</o-card>
<o-card title="Small size card" size="small">
<o-link underline='0' type="danger" target="_blank" href="https://tencent.github.io/omi/" slot="extra">More</o-link>
<p>Card content</p>
<o-card title="Simple Card" hoverable="true">
<!-- slot="cover" 若不填充内容，则header栏不显示。-简洁卡片 -->
<div slot="cover">
</div>
<p>Simple Card</p>
<p>Card content</p>
<p>Card content</p>
</o-card>
@ -50,11 +54,28 @@
<p>Card content</p>
</o-card>
<o-card title="Action card" id="myAction" actions="[{icon: 'add-a-photo-rounded'},{icon: 'add-ic-call-rounded'},{icon: 'add-comment-rounded'}]">
<o-link underline='0' type="primary" target="_blank" href="https://tencent.github.io/omi/" slot="extra">More</o-link>
<p>Card content</p>
<p>Card content</p>
<p>Card content</p>
<o-card title="DNT's card" id="myAction" actions="[{icon: 'add-ic-call-rounded'}]" hoverable="true">
<o-avatar slot="extra">DNT</o-avatar>
<p>Tel:</p>
<p>Company:</p>
<p>...</p>
</o-card>
<o-card title="Action card" size="medium" id="myAction" actions="[{icon: 'add-ic-call-rounded'},{icon: 'add-comment-rounded'}]">
<o-image slot="cover" src="https://tencent.github.io/omi/packages/admin/dist/assets/logo.a690a1ac.svg"></o-image>
<div style="float: left;">
<o-avatar src="https://material-ui.com/static/images/avatar/1.jpg"></o-avatar>
</div>
<div style="float: right;">
<p>Card title</p>
<p>This is the description</p>
</div>
</o-card>
<o-card hoverable="true">
<o-image slot="cover" src="https://tencent.github.io/omi/packages/admin/dist/assets/logo.a690a1ac.svg"></o-image>
<p>OMI Card</p>
<p><o-link underline='0' type="primary" target="_blank" href="https://tencent.github.io/omi/" slot="extra">Welcome to OMI</o-link></p>
</o-card>
</div>

6
components/card/src/index.d.ts vendored
View File

@ -1,23 +1,27 @@
import { WeElement } from 'omi';
interface Props {
title?: string;
hoverable?: string;
extra?: string;
actions: any[];
size?: 'medium' | 'small';
}
export default class Card extends WeElement<Props> {
static css: any;
css: any;
static defaultProps: {
title: string;
hoverable: string;
extra: string;
};
static propTypes: {
title: StringConstructor;
hoverable: StringConstructor;
extra: StringConstructor;
actions: ArrayConstructor;
size: StringConstructor;
};
clickHandler: (item: any) => void;
handleMousemove: (item: any) => void;
_iconTag: any;
render(props: any): JSX.Element;
}

9
components/card/src/index.esm.js
View File

@ -237,10 +237,14 @@ var Card = /** @class */ (function (_super) {
__extends(Card, _super);
function Card() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.css = css;
_this.clickHandler = function (item) {
_this.fire('change', item);
_this.update(true);
};
_this.handleMousemove = function (item) {
item && (_this.css = css + ".o-card:hover {\n display: flex;\n flex-direction: column;\n margin: 10px;\n width: 300px;\n box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;\n transition: all .3s;\n z-index: 1;\n }");
};
return _this;
}
Card.prototype.render = function (props) {
@ -248,7 +252,7 @@ var Card = /** @class */ (function (_super) {
var _this = this;
return (h("div", __assign({}, extractClass(props, 'o-card', (_a = {},
_a['o-card-' + props.size] = props.size,
_a))),
_a)), { onMousemove: this.handleMousemove(props.hoverable === "true") }),
h("slot", { name: "cover" },
h("div", __assign({}, extractClass(props, 'o-card-header', (_b = {},
_b['o-card-header-' + props.size] = props.size,
@ -270,13 +274,14 @@ var Card = /** @class */ (function (_super) {
h(_this._iconTag, { class: "icon" }));
}))) : null));
};
Card.css = css;
Card.defaultProps = {
title: '',
hoverable: '',
extra: ''
};
Card.propTypes = {
title: String,
hoverable: String,
extra: String,
actions: Array,
size: String

2
components/card/src/index.esm.js.map
View File

File diff suppressed because one or more lines are too long

9
components/card/src/index.js
View File

@ -267,10 +267,14 @@ var Card = /** @class */ (function (_super) {
__extends(Card, _super);
function Card() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.css = css;
_this.clickHandler = function (item) {
_this.fire('change', item);
_this.update(true);
};
_this.handleMousemove = function (item) {
item && (_this.css = css + ".o-card:hover {\n display: flex;\n flex-direction: column;\n margin: 10px;\n width: 300px;\n box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;\n transition: all .3s;\n z-index: 1;\n }");
};
return _this;
}
Card.prototype.render = function (props) {
@ -278,7 +282,7 @@ var Card = /** @class */ (function (_super) {
var _this = this;
return (omi_1.h("div", __assign({}, omi_1.extractClass(props, 'o-card', (_a = {},
_a['o-card-' + props.size] = props.size,
_a))),
_a)), { onMousemove: this.handleMousemove(props.hoverable === "true") }),
omi_1.h("slot", { name: "cover" },
omi_1.h("div", __assign({}, omi_1.extractClass(props, 'o-card-header', (_b = {},
_b['o-card-header-' + props.size] = props.size,
@ -300,13 +304,14 @@ var Card = /** @class */ (function (_super) {
omi_1.h(_this._iconTag, { class: "icon" }));
}))) : null));
};
Card.css = css;
Card.defaultProps = {
title: '',
hoverable: '',
extra: ''
};
Card.propTypes = {
title: String,
hoverable: String,
extra: String,
actions: Array,
size: String

2
components/card/src/index.js.map
View File

File diff suppressed because one or more lines are too long

19
components/card/src/index.tsx
View File

@ -3,6 +3,7 @@ import * as css from './index.scss'
interface Props {
title?: string,
hoverable?: string,
extra?: string,
actions: any[],
size?: 'medium' | 'small'
@ -10,15 +11,17 @@ interface Props {
@tag('o-card')
export default class Card extends WeElement<Props> {
static css = css
css = css
static defaultProps = {
title: '',
hoverable: '',
extra: ''
}
static propTypes = {
title: String,
hoverable: String,
extra: String,
actions: Array,
size: String
@ -29,13 +32,25 @@ export default class Card extends WeElement<Props> {
this.update(true)
}
handleMousemove = (item) => {
item && (this.css = css + `.o-card:hover {
display: flex;
flex-direction: column;
margin: 10px;
width: 300px;
box-shadow: 0 1px 2px -2px #00000029, 0 3px 6px #0000001f, 0 5px 12px 4px #00000017;
transition: all .3s;
z-index: 1;
}`)
}
_iconTag
render(props) {
return (
<div {...extractClass(props, 'o-card', {
['o-card-' + props.size]: props.size
})}>
})} onMousemove={this.handleMousemove(props.hoverable==="true")}>
<slot name="cover">
<div {...extractClass(props, 'o-card-header', {
['o-card-header-' + props.size]: props.size