diff --git a/README.en.md b/README.en.md
index dc020e3af4cf007b78bfcddd360a231b7c0b1442..68c39e0af35e8fe8d6bae7003a139ac2beedc6f5 100644
--- a/README.en.md
+++ b/README.en.md
@@ -5,11 +5,7 @@
This sample describes five verification code scenarios: displaying the cursor in the text box, adding a horizontal bar at the bottom, changing the background color, selecting a verification code, and sliding a verification code.
### Preview
-| Cursor in text box | Horizontal bar adding | Background color change | Verification code selection |
-|-------------------------------------------|--------------------------------------------|------------------------------------------------|--------------------------------------------|
-|  |  |  |  |
-| Verification code sliding |
-|  |
+
### How to Use
diff --git a/README.md b/README.md
index a95d605553b501416d9e74c96af46b432313fb0e..6b0f5dcc61ea4923157092ed6ee567070e2d9683 100644
--- a/README.md
+++ b/README.md
@@ -5,11 +5,7 @@
本示例实现了5种验证码场景，基本涵盖了大部分应用的验证码场景。开发者可按需下载代码，实现自己应用的验证码场景。
### 效果预览
-| 文本框显示光标 | 底部加横条 | 背景颜色改变 | 选择验证码 |
-|----------------------------------------|-----------------------------------------|---------------------------------------------|-----------------------------------------|
-|  |  |  |  |
-| 滑动验证码 |
-|  |
+
### 使用说明：
diff --git a/entry/src/main/ets/common/Constants.ets b/entry/src/main/ets/common/Constants.ets
index 74e622b5ef0dc7dc4e941ca9d268a5b90f316e29..1df7518ad2ee02d68aafb559ce0792f65edff823 100644
--- a/entry/src/main/ets/common/Constants.ets
+++ b/entry/src/main/ets/common/Constants.ets
@@ -19,275 +19,275 @@ export default class Constants {
/**
* One hundred percent.
*/
- static readonly ONE_HUNDRED_PERCENT: string = '100%';
+ public static readonly ONE_HUNDRED_PERCENT: string = '100%';
/**
* Ninety percent.
*/
- static readonly NINETY_PERCENT: string = '90%';
+ public static readonly NINETY_PERCENT: string = '90%';
/**
* Eighty percent.
*/
- static readonly EIGHTY_PERCENT: string = '80%';
+ public static readonly EIGHTY_PERCENT: string = '80%';
/**
* Eighty-five percent.
*/
- static readonly EIGHTY_FIVE_PERCENT: string = '85%';
+ public static readonly EIGHTY_FIVE_PERCENT: string = '85%';
/**
* Rotate angle.
*/
- static readonly ANGLE: number = 45;
+ public static readonly ANGLE: number = 45;
/**
* Change value.
*/
- static readonly CHANGE_VALUE: number = 77;
+ public static readonly CHANGE_VALUE: number = 77;
/**
* Zero.
*/
- static readonly ZERO: number = 0;
+ public static readonly ZERO: number = 0;
/**
* Eight hundred.
*/
- static readonly EIGHT_HUNDRED: number = 800;
+ public static readonly EIGHT_HUNDRED: number = 800;
/**
* Two thousand.
*/
- static readonly TWO_THOUSAND: number = 2000;
+ public static readonly TWO_THOUSAND: number = 2000;
/**
* Three thousand.
*/
- static readonly THREE_THOUSAND: number = 3000;
+ public static readonly THREE_THOUSAND: number = 3000;
/**
* One hundred.
*/
- static readonly ONE_HUNDRED: number = 100;
+ public static readonly ONE_HUNDRED: number = 100;
/**
* Iteration.
*/
- static readonly ITERATION: number = -1;
+ public static readonly ITERATION: number = -1;
/**
* Negative two.
*/
- static readonly NEGATIVE_TWO: number = -2;
+ public static readonly NEGATIVE_TWO: number = -2;
/**
* Negative one hundred ninety-seven.
*/
- static readonly ONE_HUNDRED_NINETY_SEVEN: number = -197;
+ public static readonly ONE_HUNDRED_NINETY_SEVEN: number = -197;
/**
* Negative one hundred and fourteen.
*/
- static readonly ONE_HUNDRED_FOURTEEN: number = -114;
+ public static readonly ONE_HUNDRED_FOURTEEN: number = -114;
/**
* Font weight 700.
*/
- static readonly FONT_WEIGHT_700: number = 700;
+ public static readonly FONT_WEIGHT_700: number = 700;
/**
* Bar height.
*/
- static readonly BAR_HEIGHT: number = 60;
+ public static readonly BAR_HEIGHT: number = 60;
/**
* Negative one hundred twenty.
*/
- static readonly NEGATIVE_ONE_HUNDRED_TWENTY: number = -120;
+ public static readonly NEGATIVE_ONE_HUNDRED_TWENTY: number = -120;
/**
* Coefficient of movement.
*/
- static readonly COEFFICIENT: number = 2.83;
+ public static readonly COEFFICIENT: number = 2.83;
/**
* Twenty.
*/
- static readonly TWENTY: number = 20;
+ public static readonly TWENTY: number = 20;
/**
* Negative twenty.
*/
- static readonly NEGATIVE_TWENTY: number = -20;
+ public static readonly NEGATIVE_TWENTY: number = -20;
/**
* Thirty.
*/
- static readonly THIRTY: number = 30;
+ public static readonly THIRTY: number = 30;
/**
* One hundred and twenty.
*/
- static readonly ONE_HUNDRED_AND_TWENTY: number = 120;
+ public static readonly ONE_HUNDRED_AND_TWENTY: number = 120;
/**
* Three hundred and forty.
*/
- static readonly THREE_HUNDRED_AND_FORTY: number = 340;
+ public static readonly THREE_HUNDRED_AND_FORTY: number = 340;
/**
* Ninety.
*/
- static readonly NINETY: number = 90;
+ public static readonly NINETY: number = 90;
/**
* Ninety five.
*/
- static readonly NINETY_FIVE: number = 95;
+ public static readonly NINETY_FIVE: number = 95;
/**
* Two.
*/
- static readonly TWO: number = 2;
+ public static readonly TWO: number = 2;
/**
* Three.
*/
- static readonly THREE: number = 3;
+ public static readonly THREE: number = 3;
/**
* Four.
*/
- static readonly FOUR: number = 4;
+ public static readonly FOUR: number = 4;
/**
* Line move.
*/
- static readonly LINE_MOVE: number = 14;
+ public static readonly LINE_MOVE: number = 14;
/**
* Line height.
*/
- static readonly LINE_HEIGHT: number = 1;
+ public static readonly LINE_HEIGHT: number = 1;
/**
* Line width.
*/
- static readonly LINE_WIDTH: number = 48;
+ public static readonly LINE_WIDTH: number = 48;
/**
* Item divider.
*/
- static readonly ITEM_DIVIDER: number = 5;
+ public static readonly ITEM_DIVIDER: number = 5;
/**
* Fifty-eight point five.
*/
- static readonly FIFTY_EIGHT_POINT_FIVE: number = 58.5;
+ public static readonly FIFTY_EIGHT_POINT_FIVE: number = 58.5;
/**
* Fifty-nine.
*/
- static readonly FIFTY_NINE: number = 59;
+ public static readonly FIFTY_NINE: number = 59;
/**
* Sixty.
*/
- static readonly SIXTY: number = 60;
+ public static readonly SIXTY: number = 60;
/**
* Negative sixty.
*/
- static readonly NEGATIVE_SIXTY: number = -60;
+ public static readonly NEGATIVE_SIXTY: number = -60;
/**
* Forty.
*/
- static readonly FORTY: number = 40;
+ public static readonly FORTY: number = 40;
/**
* One hundred forty.
*/
- static readonly ONE_HUNDRED_FORTY: number = 120;
+ public static readonly ONE_HUNDRED_FORTY: number = 120;
/**
* Negative one hundred.
*/
- static readonly NEGATIVE_ONE_HUNDRED: number = -100;
+ public static readonly NEGATIVE_ONE_HUNDRED: number = -100;
/**
* Negative one hundred ten.
- */
- static readonly NEGATIVE_ONE_HUNDRED_TEN: number = -110;
+ */
+ public static readonly NEGATIVE_ONE_HUNDRED_TEN: number = -110;
/**
* Negative thirty-five.
*/
- static readonly NEGATIVE_THIRTY_FIVE: number = -35;
+ public static readonly NEGATIVE_THIRTY_FIVE: number = -35;
/**
* Negative seventy-five.
*/
- static readonly NEGATIVE_SEVENTY_FIVE: number = -75;
+ public static readonly NEGATIVE_SEVENTY_FIVE: number = -75;
/**
* Ten.
*/
- static readonly TEN: number = 10;
+ public static readonly TEN: number = 10;
/**
* Negative twelve.
*/
- static readonly NEGATIVE_TWELVE: number = -12;
+ public static readonly NEGATIVE_TWELVE: number = -12;
/**
* Negative twenty-five.
*/
- static readonly NEGATIVE_TWENTY_FIVE: number = -25;
+ public static readonly NEGATIVE_TWENTY_FIVE: number = -25;
/**
* Negative five.
*/
- static readonly NEGATIVE_FIVE: number = -5;
+ public static readonly NEGATIVE_FIVE: number = -5;
/**
* Minus thirty.
*/
- static readonly MINUS_THIRTY: number = -30;
+ public static readonly MINUS_THIRTY: number = -30;
/**
* Draw.
*/
- static readonly DRAW: string = '画';
+ public static readonly DRAW: string = '画';
/**
* Therefore.
*/
- static readonly THEREFORE: string = '故';
+ public static readonly THEREFORE: string = '故';
/**
* Weir.
*/
- static readonly WEIR: string = '堰';
+ public static readonly WEIR: string = '堰';
/**
* Communes.
*/
- static readonly COMMUNES: string = '乡';
+ public static readonly COMMUNES: string = '乡';
/**
* Hua.
*/
- static readonly HUA: string = '华';
+ public static readonly HUA: string = '华';
/**
* Ancients.
*/
- static readonly ANCIENTS: string = '古';
+ public static readonly ANCIENTS: string = '古';
/**
* Hunan.
*/
- static readonly HUNAN: string = '湘';
+ public static readonly HUNAN: string = '湘';
/**
* Word.
*/
- static readonly WORD: string = '古堰画乡';
+ public static readonly WORD: string = '古堰画乡';
/**
* All breakpoints
*/
- static readonly BREAKPOINTS: string[] = ['sm', 'md', 'lg'];
+ public static readonly BREAKPOINTS: string[] = ['sm', 'md', 'lg'];
/**
* Full Screen width
*/
- static readonly FULL_WIDTH: string = "100%";
+ public static readonly FULL_WIDTH: string = '100%';
/**
* Full Screen height
*/
- static readonly FULL_HEIGHT: string = "100%";
+ public static readonly FULL_HEIGHT: string = '100%';
/**
* Index page padding top size.
*/
- static readonly PADDING_TOP_INDEX: number = 56;
+ public static readonly PADDING_TOP_INDEX: number = 56;
/**
* Index page padding bottom size.
*/
- static readonly PADDING_BOTTOM_INDEX: number = 16;
+ public static readonly PADDING_BOTTOM_INDEX: number = 16;
/**
* Icon padding sm.
*/
- static readonly PADDING_SM: number = 16;
+ public static readonly PADDING_SM: number = 16;
/**
* Icon padding md.
*/
- static readonly PADDING_MD: number = 24;
+ public static readonly PADDING_MD: number = 24;
/**
* Icon padding lg.
*/
- static readonly PADDING_LG: number = 32;
+ public static readonly PADDING_LG: number = 32;
/**
* Breakpoint sm.
*/
- static readonly BREAK_POINT_SM: string = 'sm';
+ public static readonly BREAK_POINT_SM: string = 'sm';
/**
* Breakpoint md.
*/
- static readonly BREAK_POINT_MD: string = 'md';
+ public static readonly BREAK_POINT_MD: string = 'md';
/**
* Breakpoint lg.
*/
- static readonly BREAK_POINT_LG: string = 'lg';
+ public static readonly BREAK_POINT_LG: string = 'lg';
/**
* Destination.
*/
- static readonly NAV_DESTINATION_DATA: NavDestinationItem[] = [
+ public static readonly NAV_DESTINATION_DATA: NavDestinationItem[] = [
{
name: 'TextBoxShowCursor', detail: $r('app.string.word')
},
@@ -307,9 +307,9 @@ export default class Constants {
}
export class BreakpointType {
- sm: T
- md: T
- lg: T
+ public sm: T
+ public md: T
+ public lg: T
constructor(sm: T, md: T, lg: T) {
this.sm = sm;
diff --git a/entry/src/main/ets/pages/Index.ets b/entry/src/main/ets/pages/Index.ets
index 0b8e84624eefa7f709293b27ba6145fa7ffa643e..9784443a828630ddf4b61c8d1a57430122a843b5 100644
--- a/entry/src/main/ets/pages/Index.ets
+++ b/entry/src/main/ets/pages/Index.ets
@@ -20,7 +20,7 @@ import { GlobalBuilderContext } from '../common/GlobalBuilderContext';
@Entry
@Component
struct Index {
- private NavDestinationData: NavDestinationItem[] = Constants.NAV_DESTINATION_DATA;
+ private navDestinationData: NavDestinationItem[] = Constants.NAV_DESTINATION_DATA;
@Provide('pathInfos') pathInfos: NavPathStack = new NavPathStack();
@StorageProp('currentBreakpoint') curBp: string = Constants.BREAKPOINTS[0];
@StorageProp('bottomRectHeight')
@@ -37,13 +37,13 @@ struct Index {
}
aboutToAppear(): void {
- AppStorage.setOrCreate('listData', this.NavDestinationData);
+ AppStorage.setOrCreate('listData', this.navDestinationData);
}
build() {
Navigation(this.pathInfos) {
Column() {
- Text($r("app.string.project_name"))
+ Text($r('app.string.project_name'))
.fontWeight(FontWeight.Bold)
.fontColor($r('sys.color.font_primary'))
.fontSize($r('sys.float.Title_L'))
@@ -55,7 +55,7 @@ struct Index {
})
.padding({ top: $r('sys.float.padding_level8') })
Column() {
- ForEach(this.NavDestinationData, (item: NavDestinationItem, index: number) => {
+ ForEach(this.navDestinationData, (item: NavDestinationItem, index: number) => {
Button(item.detail)
.fontSize($r('sys.float.Subtitle_M'))
.fontColor($r('sys.color.font_on_primary'))
diff --git a/entry/src/main/ets/pages/SelectVerificationCode.ets b/entry/src/main/ets/pages/SelectVerificationCode.ets
index e6a316a1f93cc94dd2bbf230cb89c75e0f212de6..230b16f7ac6245079d90a4a275fc5b61f83bff87 100644
--- a/entry/src/main/ets/pages/SelectVerificationCode.ets
+++ b/entry/src/main/ets/pages/SelectVerificationCode.ets
@@ -204,15 +204,6 @@ struct SelectVerificationCode {
.alignSelf(ItemAlign.Start)
.zIndex(Constants.ONE_HUNDRED)
- // Row() {
- // Text($r('app.string.complete'))
- // .fontSize($r('app.float.font_size_l'))
- // .fontWeight(FontWeight.Medium)
- // }
- // .alignSelf(ItemAlign.Start)
- // .height($r('app.float.list_padding_top'))
- // .margin({ bottom: $r('sys.float.padding_level6') })
-
Stack() {
Image($r('app.media.img_1'))
.width(this.curBp === 'sm' ? '100%' : $r('app.float.image_width'))
diff --git a/entry/src/main/ets/pages/SliderVerificationCode.ets b/entry/src/main/ets/pages/SliderVerificationCode.ets
index c9811f991a96593a5832145b2ba62b18781ce4d1..f7858d375bf4aea00b46a95204d39028cfe4b7a8 100644
--- a/entry/src/main/ets/pages/SliderVerificationCode.ets
+++ b/entry/src/main/ets/pages/SliderVerificationCode.ets
@@ -110,15 +110,6 @@ struct SliderVerificationCode {
this.inSetValueOne = Constants.ZERO;
}
})
-
-
- // Image($r('app.media.button'))
- // .fillColor(Color.White)
- // .width($r('app.float.button_width'))
- // .height($r('app.float.button_width'))
- // .margin({ left: $r('app.float.margin_left') })
- // .translate({ x: this.getTargetTranslateX() })
- // .hitTestBehavior(HitTestMode.Transparent)
}
.margin({ top: $r('app.float.padding') })
diff --git a/entry/src/main/ets/pages/TextBoxShowCursor.ets b/entry/src/main/ets/pages/TextBoxShowCursor.ets
index 059828bfa95fadfd640a7a728f5da64d6a2a3d01..e55709e1c6c56be8c1ddb036dd84e7675c5b4337 100644
--- a/entry/src/main/ets/pages/TextBoxShowCursor.ets
+++ b/entry/src/main/ets/pages/TextBoxShowCursor.ets
@@ -121,7 +121,8 @@ struct TextBoxShowCursor {
}
/**
- * In some verification code scenarios, the functions of selecting and copying entered verification codes must be disabled.
+ * In some verification code scenarios, the functions of selecting and copying entered verification codes must be
+ * disabled.
* Therefore, the Text component can be used.
*/
@Builder
diff --git a/screenshots/device/index.en.png b/screenshots/device/index.en.png
new file mode 100644
index 0000000000000000000000000000000000000000..5fb263c90636aeb521dcd7a79adb262968f2750c
Binary files /dev/null and b/screenshots/device/index.en.png differ
diff --git a/screenshots/device/index.png b/screenshots/device/index.png
new file mode 100644
index 0000000000000000000000000000000000000000..562ddf92bbdde97eae1ef390428496703702d993
Binary files /dev/null and b/screenshots/device/index.png differ