Skip to content

Commit fa3bcd5

Browse files
YuKongAYuKongA
committed
1
1 parent fb07d89 commit fa3bcd5

File tree

2 files changed

+51
-50
lines changed

2 files changed

+51
-50
lines changed

‎docs/components/card.md‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
# Card
22

3-
`Card` is a basic container component in Miuix, used to hold related content and actions. It provides a card container with Miuix style, suitable for scenarios such as information display and content grouping.
3+
`Card` is a basic container component in Miuix, used to hold related content and actions. It provides a card container with Miuix style, suitable for scenarios such as information display and content grouping. Supports both static display and interactive modes.
44

55
## Import
66

77
```kotlin
88
import top.yukonga.miuix.kmp.basic.Card
9+
import top.yukonga.miuix.kmp.utils.PressFeedbackType // If using interactive card
910
```
1011

1112
## Basic Usage
1213

13-
The Card component can be used to wrap and organize content:
14+
The Card component can be used to wrap and organize content (static card):
1415

1516
```kotlin
1617
Card {
@@ -22,34 +23,38 @@ Card {
2223

2324
### Card Properties
2425

25-
| Property Name | Type | Description | Default Value | Required |
26-
| ------------- | ---------------------------------- | ------------------------ | --------------------------- | -------- |
27-
| modifier | Modifier | Modifier applied to card | Modifier | No |
28-
| cornerRadius | Dp | Card corner radius | CardDefaults.CornerRadius | No |
29-
| insideMargin | PaddingValues | Card inner padding | CardDefaults.InsideMargin | No |
30-
| color | Color | Card background color | CardDefaults.DefaultColor() | No |
31-
| pressFeedbackType | PressFeedbackType | The type of feedback when the card is pressed | PressFeedbackType.None | No |
32-
| showIndication | Boolean? | Whether to show indication on interaction | false | No |
33-
| onClick | (() -> Unit)? | Callback invoked when the card is clicked | null | No |
34-
| onLongPress | (() -> Unit)? | Callback invoked when the card is long pressed | null | No |
35-
| content | @Composable ColumnScope.() -> Unit | Composable function for card content area | - | Yes |
26+
| Property Name | Type | Description | Default Value | Required | Applies To |
27+
| ----------------- | ---------------------------------- | ----------------------------------------- | --------------------------- | -------- | ----------- |
28+
| modifier | Modifier | Modifier applied to the card | Modifier | No | All |
29+
| cornerRadius | Dp | Card corner radius | CardDefaults.CornerRadius | No | All |
30+
| insideMargin | PaddingValues | Card inner padding | CardDefaults.InsideMargin | No | All |
31+
| color | Color | Card background color | CardDefaults.DefaultColor() | No | All |
32+
| pressFeedbackType | PressFeedbackType | Feedback type when pressed | PressFeedbackType.None | No | Interactive |
33+
| showIndication | Boolean? | Show indication on interaction | false | No | Interactive |
34+
| onClick | (() -> Unit)? | Callback when clicked | null | No | Interactive |
35+
| onLongPress | (() -> Unit)? | Callback when long pressed | null | No | Interactive |
36+
| content | @Composable ColumnScope.() -> Unit | Composable function for card content area | - | Yes | All |
37+
38+
::: warning
39+
Some properties are only available when creating an interactive card!
40+
:::
3641

3742
### CardDefaults Object
3843

3944
The CardDefaults object provides default values and color configurations for the card component.
4045

4146
#### Constants
4247

43-
| Constant Name | Type | Description | Default Value |
44-
| ------------- | ------------- | ------------------ | --------------------- |
45-
| CornerRadius | Dp | Card corner radius | 16.dp |
46-
| InsideMargin | PaddingValues | Card inner padding | PaddingValues(0.dp) |
48+
| Constant Name | Type | Description | Default Value |
49+
| ------------- | ------------- | ------------------ | ------------------- |
50+
| CornerRadius | Dp | Card corner radius | 16.dp |
51+
| InsideMargin | PaddingValues | Card inner padding | PaddingValues(0.dp) |
4752

4853
#### Methods
4954

50-
| Method Name | Type | Description |
51-
| -------------- | ----- | ------------------------- |
52-
| DefaultColor() | Color | Creates the default color for the card |
55+
| Method Name | Type | Description |
56+
| -------------- | ----- | ----------------------------------------- |
57+
| DefaultColor() | Color | The default background color for the card |
5358

5459
## Advanced Usage
5560

@@ -121,16 +126,11 @@ LazyColumn {
121126
```kotlin
122127
Card(
123128
modifier = Modifier.padding(16.dp),
124-
pressFeedbackType = PressFeedbackType.Sink,
125-
showIndication = true,
126-
onClick = { /* Handle click event */ },
127-
onLongPress = { /* Handle long press event */ }
129+
pressFeedbackType = PressFeedbackType.Sink, // Set press feedback to sink effect
130+
showIndication = true, // Show indication on click
131+
onClick = {/* Handle click event */ },
132+
onLongPress = {/* Handle long press event */ }
128133
) {
129134
Text("Interactive Card")
130135
}
131136
```
132-
133-
In this example:
134-
- `pressFeedbackType = PressFeedbackType.Sink` adds a sink animation when pressing the card.
135-
- `showIndication = true` enables visual indication during interactions.
136-
- `onClick` and `onLongPress` define the respective callbacks.

‎docs/zh_CN/components/card.md‎

Lines changed: 22 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
# Card
22

3-
`Card` 是 Miuix 中的基础容器组件，用于承载相关内容和操作。它提供了具有 Miuix 风格的卡片容器，适用于信息展示、内容分组等场景。
3+
`Card` 是 Miuix 中的基础容器组件，用于承载相关内容和操作。它提供了具有 Miuix 风格的卡片容器，适用于信息展示、内容分组等场景。支持静态显示和交互式两种模式。
44

55
## 引入
66

77
```kotlin
88
import top.yukonga.miuix.kmp.basic.Card
9+
import top.yukonga.miuix.kmp.utils.PressFeedbackType // 如果使用交互式卡片
910
```
1011

1112
## 基本用法
1213

13-
Card 组件可以用于包装和组织内容：
14+
Card 组件可以用于包装和组织内容（静态卡片）：
1415

1516
```kotlin
1617
Card {
@@ -22,17 +23,22 @@ Card {
2223

2324
### Card 属性
2425

25-
| 属性名 | 类型 | 说明 | 默认值 | 是否必须 |
26-
| ---------------- | ---------------------------------- | ------------------------ | --------------------------- | -------- |
27-
| modifier | Modifier | 应用于卡片的修饰符 | Modifier | 否 |
28-
| cornerRadius | Dp | 卡片圆角半径 | CardDefaults.CornerRadius | 否 |
29-
| insideMargin | PaddingValues | 卡片内部边距 | CardDefaults.InsideMargin | 否 |
30-
| color | Color | 卡片背景颜色 | CardDefaults.DefaultColor() | 否 |
31-
| pressFeedbackType| PressFeedbackType | 按压反馈类型 | PressFeedbackType.None | 否 |
32-
| showIndication | Boolean? | 是否显示点击指示效果 | false | 否 |
33-
| onClick | (() -> Unit)? | 点击事件回调 | null | 否 |
34-
| onLongPress | (() -> Unit)? | 长按事件回调 | null | 否 |
35-
| content | @Composable ColumnScope.() -> Unit | 卡片内容区域的可组合函数 | - | 是 |
26+
27+
| 属性名 | 类型 | 说明 | 默认值 | 是否必须 | 适用范围 |
28+
| ----------------- | ---------------------------------- | ------------------------ | --------------------------- | -------- | -------- |
29+
| modifier | Modifier | 应用于卡片的修饰符 | Modifier | 否 | 所有 |
30+
| cornerRadius | Dp | 卡片圆角半径 | CardDefaults.CornerRadius | 否 | 所有 |
31+
| insideMargin | PaddingValues | 卡片内部边距 | CardDefaults.InsideMargin | 否 | 所有 |
32+
| color | Color | 卡片背景颜色 | CardDefaults.DefaultColor() | 否 | 所有 |
33+
| pressFeedbackType | PressFeedbackType | 按压反馈类型 | PressFeedbackType.None | 否 | 交互式 |
34+
| showIndication | Boolean? | 显示点击指示效果 | false | 否 | 交互式 |
35+
| onClick | (() -> Unit)? | 点击事件回调 | null | 否 | 交互式 |
36+
| onLongPress | (() -> Unit)? | 长按事件回调 | null | 否 | 交互式 |
37+
| content | @Composable ColumnScope.() -> Unit | 卡片内容区域的可组合函数 | - | 是 | 所有 |
38+
39+
::: warning 注意
40+
部分属性仅在创建可交互的卡片时可用！
41+
:::
3642

3743
### CardDefaults 对象
3844

@@ -49,7 +55,7 @@ CardDefaults 对象提供了卡片组件的默认值和颜色配置。
4955

5056
| 方法名 | 类型 | 说明 |
5157
| -------------- | ----- | ------------------ |
52-
| DefaultColor() | Color | 创建卡片的默认颜色 |
58+
| DefaultColor() | Color | 卡片的默认背景颜色 |
5359

5460
## 进阶用法
5561

@@ -121,16 +127,11 @@ LazyColumn {
121127
```kotlin
122128
Card(
123129
modifier = Modifier.padding(16.dp),
124-
pressFeedbackType = PressFeedbackType.Sink,
125-
showIndication = true,
130+
pressFeedbackType = PressFeedbackType.Sink, // 设置按压反馈为下沉动画效果
131+
showIndication = true, // 显示点击时的视觉反馈效果
126132
onClick = { /* 处理点击事件 */ },
127133
onLongPress = { /* 处理长按事件 */ }
128134
) {
129135
Text("可交互的卡片")
130136
}
131137
```
132-
133-
在这个示例中：
134-
- `pressFeedbackType = PressFeedbackType.Sink` 表示按下时会有一个下沉动画。
135-
- `showIndication = true` 表示启用交互时的视觉反馈。
136-
- `onClick` 和 `onLongPress` 分别定义了点击和长按的回调。

0 commit comments

Comments
 (0)