Skip to content

Commit a4c3843

Browse files
AlexMiniAppsAlexMiniApps
committed
Update README - changing markup
1 parent f9bd2f8 commit a4c3843

File tree

2 files changed

+54
-52
lines changed

2 files changed

+54
-52
lines changed

‎README.md

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -70,19 +70,21 @@ It is possible to configure the component via CSS vars
7070

7171
CSS vars:
7272

73-
`--text-security-type: disc;` - text presentation type when the isCodeHidden is enabled<br />
74-
`--item-spacing: 4px;` - horizontal space between input items <br />
75-
`--item-height: 4.375em;` - height of input items <br />
76-
`--item-border: 1px solid #dddddd;` - border of input item for an empty value <br />
77-
`--item-border-bottom: 1px solid #dddddd;` - bottom border of input item for an empty value <br />
78-
`--item-border-has-value: 1px solid #dddddd;` - border of input item with a value <br />
79-
`--item-border-bottom-has-value: 1px solid #dddddd;` - bottom border of input item with a value <br />
80-
`--item-border-focused: 1px solid #dddddd;` - border of input item when focused <br />
81-
`--item-border-bottom-focused: 1px solid #dddddd;` - bottom border of input item when focused <br />
82-
`--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` - shadow of input item when focused <br />
83-
`--item-border-radius: 5px;` - border radius of input item <br />
84-
`--item-background: transparent;` - input item background <br />
85-
`--color: #171516;` - text color of input items <br />
73+
| CSS Var | Description |
74+
|----------|--------------------|
75+
| `--text-security-type: disc;` | Text presentation type when the isCodeHidden is enabled |
76+
| `--item-spacing: 4px;` | Horizontal space between input items |
77+
| `--item-height: 4.375em;` | Height of input items |
78+
| `--item-border: 1px solid #dddddd;` | Border of input item for an empty value |
79+
| `--item-border-bottom: 1px solid #dddddd;` | Bottom border of input item for an empty value |
80+
| `--item-border-has-value: 1px solid #dddddd;` | Border of input item with a value |
81+
| `--item-border-bottom-has-value: 1px solid #dddddd;` | Bottom border of input item with a value |
82+
| `--item-border-focused: 1px solid #dddddd;` | Border of input item when focused |
83+
| `--item-border-bottom-focused: 1px solid #dddddd;` | Bottom border of input item when focused |
84+
| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused |
85+
| `--item-border-radius: 5px;` | Border radius of input item |
86+
| `--item-background: transparent;` | Input item background |
87+
| `--color: #171516;` | Text color of input items |
8688

8789
Example with only bottom borders:
8890

@@ -106,19 +108,18 @@ Example with only bottom borders:
106108

107109
#### Component options
108110

109-
<b>`codeLength: number`</b> - length of input code <br /><br />
110-
<b>`isCodeHidden: boolean`</b> - when `true` inputted code chars will be shown as asterisks (points)<br /><br />
111-
<b>`isNonDigitsCode: boolean`</b> - when `true` inputted code can contain any char and not only digits from 0 to 9.
112-
If the input parameter <b>`code`</b> contains non digits chars and `isNonDigitsCode` is `false` the value will be ignored<br /><br />
113-
<b>`isPrevFocusableAfterClearing: boolean`</b> - when `true` after the input value deletion the caret will be moved
114-
to the previous input immediately. If `false` then after the input value deletion the caret will
115-
stay on the current input and be moved to the previous input only if the current input is empty<br /><br />
116-
<b>`inputType: string`</b> - type of the input DOM elements like `<input [type]="inputType"/>` default '`tel'`<br /><br />
117-
<b>`code: string | number`</b> - the input code value for the component. If the parameter
118-
contains non digits chars and `isNonDigitsCode` is `false` the value will be <b>ignored</b> <br /><br />
111+
| Property | Type | Default | Description |
112+
|----------|:-------:|:-----:|----------|
113+
| <b>`codeLength`</b> | number | 4 | Length of input code |
114+
| <b>`isCodeHidden`</b> | boolean | false | When `true` inputted code chars will be shown as asterisks (points) |
115+
| <b>`isNonDigitsCode`</b> | boolean | false | When `true` inputted code can contain any char and not only digits from 0 to 9. If the input parameter <b>`code`</b> contains non digits chars and `isNonDigitsCode` is `false` the value will be ignored |
116+
| <b>`isPrevFocusableAfterClearing`</b> | boolean | true | When `true` after the input value deletion the caret will be moved to the previous input immediately. If `false` then after the input value deletion the caret will stay on the current input and be moved to the previous input only if the current input is empty |
117+
| <b>`inputType`</b> | string | tel | Type of the input DOM elements like `<input [type]="inputType"/>` default '`tel'` |
118+
| <b>`code`</b> | string / number | - | The input code value for the component. If the parameter contains non digits chars and `isNonDigitsCode` is `false` the value will be <b>ignored |
119119

120120
#### Events
121121

122-
`codeChanged` - will be called every time when a user changed the code <br />
123-
`codeCompleted` - will be called only if a user entered full code
124-
122+
| Event | Description |
123+
|----------|--------------------|
124+
| `codeChanged` | Will be called every time when a user changed the code |
125+
| `codeCompleted` | Will be called only if a user entered full code |

‎angular-code-input/README.md

Lines changed: 27 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -70,19 +70,21 @@ It is possible to configure the component via CSS vars
7070

7171
CSS vars:
7272

73-
`--text-security-type: disc;` - text presentation type when the isCodeHidden is enabled<br />
74-
`--item-spacing: 4px;` - horizontal space between input items <br />
75-
`--item-height: 4.375em;` - height of input items <br />
76-
`--item-border: 1px solid #dddddd;` - border of input item for an empty value <br />
77-
`--item-border-bottom: 1px solid #dddddd;` - bottom border of input item for an empty value <br />
78-
`--item-border-has-value: 1px solid #dddddd;` - border of input item with a value <br />
79-
`--item-border-bottom-has-value: 1px solid #dddddd;` - bottom border of input item with a value <br />
80-
`--item-border-focused: 1px solid #dddddd;` - border of input item when focused <br />
81-
`--item-border-bottom-focused: 1px solid #dddddd;` - bottom border of input item when focused <br />
82-
`--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` - shadow of input item when focused <br />
83-
`--item-border-radius: 5px;` - border radius of input item <br />
84-
`--item-background: transparent;` - input item background <br />
85-
`--color: #171516;` - text color of input items <br />
73+
| CSS Var | Description |
74+
|----------|--------------------|
75+
| `--text-security-type: disc;` | Text presentation type when the isCodeHidden is enabled |
76+
| `--item-spacing: 4px;` | Horizontal space between input items |
77+
| `--item-height: 4.375em;` | Height of input items |
78+
| `--item-border: 1px solid #dddddd;` | Border of input item for an empty value |
79+
| `--item-border-bottom: 1px solid #dddddd;` | Bottom border of input item for an empty value |
80+
| `--item-border-has-value: 1px solid #dddddd;` | Border of input item with a value |
81+
| `--item-border-bottom-has-value: 1px solid #dddddd;` | Bottom border of input item with a value |
82+
| `--item-border-focused: 1px solid #dddddd;` | Border of input item when focused |
83+
| `--item-border-bottom-focused: 1px solid #dddddd;` | Bottom border of input item when focused |
84+
| `--item-shadow-focused: 0px 1px 5px rgba(221, 221, 221, 1);` | Shadow of input item when focused |
85+
| `--item-border-radius: 5px;` | Border radius of input item |
86+
| `--item-background: transparent;` | Input item background |
87+
| `--color: #171516;` | Text color of input items |
8688

8789
Example with only bottom borders:
8890

@@ -106,19 +108,18 @@ Example with only bottom borders:
106108

107109
#### Component options
108110

109-
<b>`codeLength: number`</b> - length of input code <br /><br />
110-
<b>`isCodeHidden: boolean`</b> - when `true` inputted code chars will be shown as asterisks (points)<br /><br />
111-
<b>`isNonDigitsCode: boolean`</b> - when `true` inputted code can contain any char and not only digits from 0 to 9.
112-
If the input parameter <b>`code`</b> contains non digits chars and `isNonDigitsCode` is `false` the value will be ignored<br /><br />
113-
<b>`isPrevFocusableAfterClearing: boolean`</b> - when `true` after the input value deletion the caret will be moved
114-
to the previous input immediately. If `false` then after the input value deletion the caret will
115-
stay on the current input and be moved to the previous input only if the current input is empty<br /><br />
116-
<b>`inputType: string`</b> - type of the input DOM elements like `<input [type]="inputType"/>` default '`tel'`<br /><br />
117-
<b>`code: string | number`</b> - the input code value for the component. If the parameter
118-
contains non digits chars and `isNonDigitsCode` is `false` the value will be <b>ignored</b> <br /><br />
111+
| Property | Type | Default | Description |
112+
|----------|:-------:|:-----:|----------|
113+
| <b>`codeLength`</b> | number | 4 | Length of input code |
114+
| <b>`isCodeHidden`</b> | boolean | false | When `true` inputted code chars will be shown as asterisks (points) |
115+
| <b>`isNonDigitsCode`</b> | boolean | false | When `true` inputted code can contain any char and not only digits from 0 to 9. If the input parameter <b>`code`</b> contains non digits chars and `isNonDigitsCode` is `false` the value will be ignored |
116+
| <b>`isPrevFocusableAfterClearing`</b> | boolean | true | When `true` after the input value deletion the caret will be moved to the previous input immediately. If `false` then after the input value deletion the caret will stay on the current input and be moved to the previous input only if the current input is empty |
117+
| <b>`inputType`</b> | string | tel | Type of the input DOM elements like `<input [type]="inputType"/>` default '`tel'` |
118+
| <b>`code`</b> | string / number | - | The input code value for the component. If the parameter contains non digits chars and `isNonDigitsCode` is `false` the value will be <b>ignored |
119119

120120
#### Events
121121

122-
`codeChanged` - will be called every time when a user changed the code <br />
123-
`codeCompleted` - will be called only if a user entered full code
124-
122+
| Event | Description |
123+
|----------|--------------------|
124+
| `codeChanged` | Will be called every time when a user changed the code |
125+
| `codeCompleted` | Will be called only if a user entered full code |

0 commit comments

Comments
 (0)