diff --git a/1224/react-native-community-segmented-control.md b/1224/react-native-community-segmented-control.md new file mode 100644 index 0000000000000000000000000000000000000000..cb9d62c4c935f8224e9b17deb6e4f8cbeace6695 --- /dev/null +++ b/1224/react-native-community-segmented-control.md @@ -0,0 +1,91 @@ +> 模板版本：v0.1.2 + +

+

react-native-community/segmented-control

+

+

+ + Supported platforms + + + License + +

+ +> [!tip] [Github 地址](https://github.com/react-native-segmented-control/segmented-control) + +## 安装与使用 + +进入到工程目录并输入以下命令： + +#### **yarn** + +```bash +yarn add @react-native-segmented-control/segmented-control@^2.5.0 +``` + + + +#### **npm** + +```bash +npm install --save @react-native-segmented-control/segmented-control@^2.5.0 +``` + + + +下面的代码展示了这个库的基本使用场景： + +```js +import SegmentedControl from '@react-native-segmented-control/segmented-control'; + +return ( + { + this.setState({selectedIndex: event.nativeEvent.selectedSegmentIndex}); + }} + /> +); +``` + +## 约束与限制 + +### 兼容性 + +在下述版本验证通过： + +1. IDE：DevEco Studio 4.1.3.412;SDK：OpenHarmony(api11) 4.1.0.53;测试设备：Mate40 Pro(NOH-AN00);ROM：2.0.0.52(SP22C00E52R1P17log);RNOH：0.72.11 + +## 属性 + +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + +详情见 [react-native-community/segmented-control 源库地址](https://github.com/react-native-segmented-control/segmented-control) + + +| Name | Description | Type | Required | Platform | HarmonyOS Support | Notes | +| -----------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------- | -------- | -------- | -------- |-------- | +| enabled | If false the user won't be able to interact with the control. Default value is true. | boolean | No |All | Yes | +| momentary | If true, then selecting a segment won't persist visually. The onValueChange callback will still work as expected.| boolean | No |iOS | No | android和harmonyos侧,效果一致，不生效，ios侧有效果 +| onChange |Callback that is called when the user taps a segment; passes the event as an argument | function | No | All | Yes | +| onValueChange | Callback that is called when the user taps a segment; passes the segment's value as an argument | function | No |All | Yes | +| selectedIndex |The index in props.values of the segment to be (pre)selected. | number | No | All | Yes | +| tintColor | Accent color of the control. | string | No |All | Yes | +| backgroundColor | Background color color of the control. | string | No | All | Yes | +| values | The labels for the control's segment buttons, in order.| string | Yes | All | Yes | +| appearance | Overrides the control's appearance irrespective of the OS theme | 'dark', 'light' | No | All | Yes | +| fontStyle | An object container,color: color of segment;fontSize: font-size of segment text;fontFamily: font-family of segment text;fontWeight: font-weight of segment text| object | No | All | Yes | android和harmonyos侧，fontFamily效果一致，均不生效 +| activeFontStyle | An object container,color: overrides color of selected segment text;fontSize: overrides font-size of selected segment text;fontFamily: overrides font-family of selected segment text;fontWeight: overrides font-weight of selected segment text| object | No | All | Yes | android和harmonyos侧，fontFamily效果一致，均不生效 +| tabStyle | Styles the clickable surface which is responsible to change tabs| object | No | Android, Web | Yes | + +## 遗留问题 + +## 其他 + +## 开源协议 + +本项目基于 [The MIT License (MIT)](https://github.com/react-native-segmented-control/segmented-control/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/1224/styled-system.md b/1224/styled-system.md index a1bec35711a0c6f13e5a515aec5bbd9ac1ba9567..3a4fd426fc8dc39a698b09084d16d02d7d0c39c2 100644 --- a/1224/styled-system.md +++ b/1224/styled-system.md @@ -18,7 +18,7 @@ #### **yarn** ```bash -yarn add styled-system +yarn add styled-system@^5.1.5 ``` @@ -26,7 +26,7 @@ yarn add styled-system #### **npm** ```bash -npm i styled-system +npm i styled-system@^5.1.5 ``` @@ -76,137 +76,141 @@ const Box = styled.div` ## 属性 +> [!tip] "Platform"列表示该属性在原三方库上支持的平台。 + +> [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 + 详情见 [styled-system 源库地址](https://github.com/styled-system/styled-system) **API space** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------- | ---------- | ---- | -------- | -------- | -------- | -| margin | 外边距 | prop | No | / | Yes | -| marginTop | 上外边距 | prop | No | / | Yes | -| marginRight | 右外边距 | prop | No | / | Yes | -| marginLeft | 左外边距 | prop | No | / | Yes | -| marginX | X 轴外边距 | prop | No | / | Yes | -| marginY | Y 轴外边距 | prop | No | / | Yes | -| padding | 内边距 | prop | No | / | Yes | -| paddingTop | 上内边距 | prop | No | / | Yes | -| paddingRight | 右内边距 | prop | No | / | Yes | -| paddingLeft | 左内边距 | prop | No | / | Yes | -| paddingBottom | 下内边距 | prop | No | / | Yes | -| paddingX | X 轴内边距 | prop | No | / | Yes | -| paddingY | Y 轴内边距 | prop | No | / | Yes | +| Name | Description | Type | Required | HarmonyOS Support | +| ------------- | ---------- | ---- | -------- | -------- | +| margin | 外边距 | prop | No | Yes | +| marginTop | 上外边距 | prop | No | Yes | +| marginRight | 右外边距 | prop | No | Yes | +| marginLeft | 左外边距 | prop | No | Yes | +| marginX | X 轴外边距 | prop | No | Yes | +| marginY | Y 轴外边距 | prop | No | Yes | +| padding | 内边距 | prop | No | Yes | +| paddingTop | 上内边距 | prop | No | Yes | +| paddingRight | 右内边距 | prop | No | Yes | +| paddingLeft | 左内边距 | prop | No | Yes | +| paddingBottom | 下内边距 | prop | No | Yes | +| paddingX | X 轴内边距 | prop | No | Yes | +| paddingY | Y 轴内边距 | prop | No | Yes | **API color** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ----- | ------ | ---- | -------- | -------- | -------- | -| color | 颜色 | prop | No | / | Yes | -| bg | 背景色 | prop | No | / | Yes | +| Name | Description | Type | Required | HarmonyOS Support | +| ----- | ------ | ---- | -------- | -------- | +| color | 颜色 | prop | No |Yes | +| bg | 背景色 | prop | No | Yes | **API typography** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | -| ------------- | -------- | ---- | -------- | -------- | -------- | -| fontFamily | 字体系列 | prop | No | / | Yes | -| fontSize | 字号大小 | prop | No | / | Yes | -| fontWeight | 字体权重 | prop | No | / | Yes | -| lineHeight | 行高 | prop | No | / | Yes | -| letterSpacing | 字符间距 | prop | No | / | Yes | -| textAlign | 文本对齐 | prop | No | / | Yes | -| fontStyle | 字体样式 | prop | No | / | Yes | +| Name | Description | Type | Required | HarmonyOS Support | +| ------------- | -------- | ---- | -------- | -------- | +| fontFamily | 字体系列 | prop | No | Yes | +| fontSize | 字号大小 | prop | No | Yes | +| fontWeight | 字体权重 | prop | No | Yes | +| lineHeight | 行高 | prop | No | Yes | +| letterSpacing | 字符间距 | prop | No | Yes | +| textAlign | 文本对齐 | prop | No | Yes | +| fontStyle | 字体样式 | prop | No | Yes | **API layout** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注 | -| ------------- | -------- | ---- | -------- | -------- | -------- | ---------------------------------------- | -| width | 宽度 | prop | No | / | Yes | -| height | 高度 | prop | No | / | Yes | -| display | 显示类型 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| minWidth | 最小宽度 | prop | No | / | Yes | -| minHeight | 最小高度 | prop | No | / | Yes | -| maxHeight | 最大高度 | prop | No | / | Yes | -| size | 大小 | prop | No | / | Yes | -| verticalAlign | 垂直对齐 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| overflow | 溢出 | prop | No | / | Yes | -| overflowX | X 轴溢出 | prop | No | / | Yes | -| overflowY | Y 轴溢出 | prop | No | / | Yes | +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| ------------- | -------- | ---- | -------- | -------- | ---------------------------------------- | +| width | 宽度 | prop | No | Yes | +| height | 高度 | prop | No | Yes | +| display | 显示类型 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| minWidth | 最小宽度 | prop | No | Yes | +| minHeight | 最小高度 | prop | No | Yes | +| maxHeight | 最大高度 | prop | No | Yes | +| size | 大小 | prop | No | Yes | +| verticalAlign | 垂直对齐 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| overflow | 溢出 | prop | No | Yes | +| overflowX | X 轴溢出 | prop | No | Yes | +| overflowY | Y 轴溢出 | prop | No | Yes | **API flexbox** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注 | -| -------------- | --------------------- | ---- | -------- | -------- | -------- | ---------------------------------------- | -| alignItems | 列内轴对齐项 | prop | No | / | Yes | | -| alignContent | 列内轴对齐内容 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| justifyItems | 行内轴对齐项 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| justifyContent | 行内轴对齐内容 | prop | No | / | Yes | -| flexWrap | 换行 | prop | No | / | Yes | -| flexDirection | 弹性方向 | prop | No | / | Yes | -| flex | 弹性布局 | prop | No | / | Yes | -| flexGrow | 分配剩余空间比例 | prop | No | / | Yes | -| flexShrink | 弹性收缩 | prop | No | / | Yes | -| flexBasis | 弹性初始长度 | prop | No | / | Yes | -| justifySelf | 行内对齐 | prop | No | / | Yes | -| alignSelf | 对齐，覆盖 alignItems | prop | No | / | Yes | -| order | 弹性布局顺序 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | +| Name | Description | Type | Required | HarmonyOS Support |Notes | +| -------------- | --------------------- | ---- | -------- | -------- | ---------------------------------------- | +| alignItems | 列内轴对齐项 | prop | No |Yes | | +| alignContent | 列内轴对齐内容 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| justifyItems | 行内轴对齐项 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| justifyContent | 行内轴对齐内容 | prop | No | Yes | +| flexWrap | 换行 | prop | No | Yes | +| flexDirection | 弹性方向 | prop | No | Yes | +| flex | 弹性布局 | prop | No | Yes | +| flexGrow | 分配剩余空间比例 | prop | No | Yes | +| flexShrink | 弹性收缩 | prop | No | Yes | +| flexBasis | 弹性初始长度 | prop | No | Yes | +| justifySelf | 行内对齐 | prop | No | Yes | +| alignSelf | 对齐，覆盖 alignItems | prop | No | Yes | +| order | 弹性布局顺序 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | **API border** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注 | -| ----------------------- | ------------ | ---- | -------- | -------- | -------- | ---------------------------------------- | -| border | 边框 | prop | No | / | Yes | -| borderWidth | 边框宽度 | prop | No | / | Yes | -| borderStyle | 边框样式 | prop | No | / | Yes | -| borderColor | 边框颜色 | prop | No | / | Yes | -| borderRadius | 边框圆角 | prop | No | / | Yes | -| borderTop | 上边框 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderTopWidth | 上边框宽度 | prop | No | / | Yes | -| borderTopStyle | 上边框样式 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderTopColor | 上边框颜色 | prop | No | / | Yes | -| borderTopLeftRadius | 上左边框圆角 | prop | No | / | Yes | -| borderTopRightRadius | 上右边框圆角 | prop | No | / | Yes | -| borderRight | 右边框 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderRightWidth | 右边框宽度 | prop | No | / | Yes | -| borderRightStyle | 右边框样式 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderRightColor | 右边框颜色 | prop | No | / | Yes | -| borderBottom | 下边框 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderBottomWidth | 下边框宽度 | prop | No | / | Yes | -| borderBottomStyle | 下边框样式 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderBottomColor | 下边框颜色 | prop | No | / | Yes | -| borderBottomLeftRadius | 左下边框圆角 | prop | No | / | Yes | -| borderBottomRightRadius | 右下边框圆角 | prop | No | / | Yes | -| borderLeft | 左边框 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderLeftWidth | 左边框宽度 | prop | No | / | Yes | -| borderLeftStyle | 左边框样式 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderLeftColor | 左边框颜色 | prop | No | / | Yes | -| borderX | X 轴边框 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| borderY | Y 轴边框 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| ----------------------- | ------------ | ---- | -------- | -------- | ---------------------------------------- | +| border | 边框 | prop | No | Yes | +| borderWidth | 边框宽度 | prop | No | Yes | +| borderStyle | 边框样式 | prop | No | Yes | +| borderColor | 边框颜色 | prop | No | Yes | +| borderRadius | 边框圆角 | prop | No | Yes | +| borderTop | 上边框 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| borderTopWidth | 上边框宽度 | prop | No | Yes | +| borderTopStyle | 上边框样式 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| borderTopColor | 上边框颜色 | prop | No | Yes | +| borderTopLeftRadius | 上左边框圆角 | prop | No | Yes | +| borderTopRightRadius | 上右边框圆角 | prop | No | Yes | +| borderRight | 右边框 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| borderRightWidth | 右边框宽度 | prop | No | Yes | +| borderRightStyle | 右边框样式 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| borderRightColor | 右边框颜色 | prop | No | Yes | +| borderBottom | 下边框 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| borderBottomWidth | 下边框宽度 | prop | No | Yes | +| borderBottomStyle | 下边框样式 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| borderBottomColor | 下边框颜色 | prop | No | Yes | +| borderBottomLeftRadius | 左下边框圆角 | prop | No | Yes | +| borderBottomRightRadius | 右下边框圆角 | prop | No | Yes | +| borderLeft | 左边框 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| borderLeftWidth | 左边框宽度 | prop | No | Yes | +| borderLeftStyle | 左边框样式 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| borderLeftColor | 左边框颜色 | prop | No | Yes | +| borderX | X 轴边框 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| borderY | Y 轴边框 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | **API position** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注 | -| -------- | ------------ | ---- | -------- | -------- | -------- | ---------------------------------------- | -| position | 定位 | prop | No | / | Yes | -| zIndex | 元素堆叠顺序 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| top | 上偏移量 | prop | No | / | Yes | -| right | 右偏移量 | prop | No | / | Yes | -| bottom | 下偏移量 | prop | No | / | Yes | -| left | 左偏移量 | prop | No | / | Yes | +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| -------- | ------------ | ---- | -------- | -------- | ---------------------------------------- | +| position | 定位 | prop | No | Yes | +| zIndex | 元素堆叠顺序 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| top | 上偏移量 | prop | No | Yes | +| right | 右偏移量 | prop | No | Yes | +| bottom | 下偏移量 | prop | No | Yes | +| left | 左偏移量 | prop | No | Yes | **API shadow** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注 | -| ---------- | -------- | ---- | -------- | -------- | -------- | ---------------------------------------- | -| textShadow | 文本阴影 | prop | No | / | Yes | -| boxShadow | 盒子阴影 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| ---------- | -------- | ---- | -------- | -------- | ---------------------------------------- | +| textShadow | 文本阴影 | prop | No | Yes | +| boxShadow | 盒子阴影 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | **API background** -| 名称 | 说明 | 类型 | 是否必填 | 原库平台 | 鸿蒙支持 | 备注 | -| ------------------ | ---------- | ---- | -------- | -------- | -------- | ---------------------------------------- | -| backgroundImage | 背景图片 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| backgroundSize | 背景尺寸 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| backgroundPosition | 背景定位 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | -| backgroundRepeat | 背景图平铺 | prop | No | / | Yes | 与 android、ios 效果一致，设置后均无效果 | +| Name | Description | Type | Required | HarmonyOS Support | Notes | +| ------------------ | ---------- | ---- | -------- | -------- | ---------------------------------------- | +| backgroundImage | 背景图片 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| backgroundSize | 背景尺寸 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| backgroundPosition | 背景定位 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | +| backgroundRepeat | 背景图平铺 | prop | No | Yes | 与 android、ios 效果一致，设置后均无效果 | ## 遗留问题