Skip to content

Commit 4bfda73

Browse files
alioguzhanalioguzhan
committed
feat: add new attr to allow customize the validation container
Relates to #158
1 parent a2cac0e commit 4bfda73

9 files changed

+34
-20
lines changed

‎README.md

+19-13
Original file line numberDiff line numberDiff line change
@@ -104,16 +104,18 @@ You can style your `<EdiText/>` components with `styled-components` or similar l
104104

105105
Each customizable HTML element has a `editext=xxx` attribute. Use below as a reference table:
106106

107-
| Attr. Value | Description |
108-
| ------------------ | -------------------------------------------------------------------------------- |
109-
| `view-container` | the container in `view` mode |
110-
| `edit-container` | the container in `edit` mode |
111-
| `button-container` | the container for the `save` and `cancel` buttons |
112-
| `edit-button` | use this to style the **edit button** |
113-
| `save-button` | use this to style the **save button** |
114-
| `cancel-button` | use this to style the **cancel button** |
115-
| `input` | There is only one input. You can select it directly or just use this attr value. |
116-
| `hint` | To style the hint container. |
107+
| Attr. Value | Description |
108+
| ---------------------- | -------------------------------------------------------------------------------- |
109+
| `main-container` | the main container |
110+
| `view-container` | the container in `view` mode |
111+
| `edit-container` | the container in `edit` mode |
112+
| `button-container` | the container for the `save` and `cancel` buttons |
113+
| `validation-container` | the container for validation message area |
114+
| `edit-button` | use this to style the **edit button** |
115+
| `save-button` | use this to style the **save button** |
116+
| `cancel-button` | use this to style the **cancel button** |
117+
| `input` | There is only one input. You can select it directly or just use this attr value. |
118+
| `hint` | To style the hint container. |
117119

118120
Usage:
119121

@@ -132,6 +134,11 @@ div[editext='view-container'] {
132134
color: #fff;
133135
}
134136

137+
div[editext='validation-container'] {
138+
color: #d3d3d3;
139+
text-decoration: underline;
140+
}
141+
135142
input,
136143
textarea {
137144
/** or input[editext="input"] {} */
@@ -147,9 +154,8 @@ textarea {
147154
## Browser Support
148155

149156
| [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/chrome/chrome_48x48.png" alt="Chrome" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Chrome | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/firefox/firefox_48x48.png" alt="Firefox" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Firefox | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari/safari_48x48.png" alt="Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/safari-ios/safari-ios_48x48.png" alt="iOS Safari" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>iOS Safari | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/opera/opera_48x48.png" alt="Opera" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Opera | [<img src="https://raw.githubusercontent.com/alrra/browser-logos/master/src/edge/edge_48x48.png" alt="IE / Edge" width="24px" height="24px" />](http://godban.github.io/browsers-support-badges/)</br>Edge |
150-
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
151-
| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: |
152-
157+
| ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
158+
| :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: | :white_check_mark: |
153159

154160
## Development
155161

‎dist/index.es.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.es.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.js

+4-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/index.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)