baidu / baidu/amis

2.1.0 里面 cards 卡片组内部的样式,不能自动适配宽度

Open
#5,152 0 comments 0 reactions 0 assignees View on GitHub
need confirm
Dominant language
TypeScript
Stars
18.9k
Forks
2.7k
PR merge metrics
No merged PRs in 30d

Description

#### 描述问题:

请用一段清晰简洁的文字描述问题是什么...

#### 截图或视频:

屏幕分辨率:1920*1080

image

手机上
image

这里的文字没有显示全。。。
预期:

1,电脑上,可以像crud组件那样,可以水平滚动。
2,移动设备上,property里面的东西折行。

#### 如何复现(请务必完整填写下面内容):

1. 你是如何使用 amis 的?
`sdk`

2. amis 版本是什么?请先在最新 beta 版本测试问题是否存在

2.1.0

4. 粘贴有问题的完整 `amis schema` 代码:
```
const app = {
"type": "page",
"title": "xx列表",
"data": {
"charts": {
"line": [1000, 1010, 980, 1100, 1120, 1130]
},
"cardsdata": [
{
"name": "xxxxxxx"
},
{
"name": "xxxxxxx"
},
{
"name": "xxxxxxx"
},
{
"name": "xxxxxxx"
},
{
"name": "xxxxxxx"
}
]
},
"body": [
{
"type": "cards",
"source": "$cardsdata",
"card": {
"header": {
"title": "$name"
},
"body": [
{
"type": "property",
"column": 3,
"labelStyle": {
"textAlign": "left"
},
"items": [
{
"label": "XXX",
"content": "482.65%"
},
{
"label": "XXXXXX",
"content": "32.5%"
},
{
"label": "XXXXXX",
"content": "8.5%"
},
{
"label": "XXXXXX",
"content": "1249.80"
},
{
"label": "XXXXXX",
"content": "XXXXXX"
},
{
"label": "XXXXXX",
"content": "XXXXXX"
}
]
},
{
"type": "chart",
"data": "${charts}",
"config": {
"xAxis": {
"type": "category",
"boundaryGap": false,
"data": [
"0715 1100",
"0715 1200",
"0715 1300",
"0715 1400",
"0715 1500",
"0715 1600"
]
},
"legend": {
"data": [
"Email",
"5",
"15",
"30",
"120"
]
},
"yAxis": {
"type": "value"
},
"tooltip": {
"trigger": "axis"
},
"series": [
{
"name": "Email",
"data": "${line}",
"areaStyle": {},
"type": "line",
"smooth": true
}
]
}
}
],
"actions": [
{
"type": "button",
"label": "查看详情",
"icon": "fa fa-eye",
"actionType": "dialog",
"dialog": {
"size": "lg",
"title": "$name",
"closeOnEsc": true,
"closeOnOutside": true,
"body": [


],
"actions": [
{
"type": "button",
"actionType": "confirm",
"label": "OK",
"primary": true
}
]
}
},
{
"type": "button",
"label": "一键复制",
"icon": "fa-solid fa-angles-right",
"vendor": "",
"actionType": "dialog",
"dialog": {
"title": "${name}",
"closeOnEsc": true,
"closeOnOutside": true,
"body": {
"type": "form",
"mode": "normal",
"body": [

]
}
}
}
]
}
}
]
};
```

5. 操作步骤
请简单描述一下复现的操作步骤...

Contributor guide

No contributing guide indexed for this repository

Research direction

Start by reproducing the cards schema from the issue with the AMIS SDK 2.1.0 on desktop and mobile widths, focusing on the nested property component. Compare the cards behavior with the CRUD component and verify that desktop content can scroll horizontally while mobile property content wraps; done means both layouts display all text without clipping.

Written by the indexing model from the issue text.

Assessment

Tech stack
typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.