diff --git a/Standard UI Components/.gitattributes b/Standard UI Components/.gitattributes
new file mode 100644
index 0000000..dfe0770
--- /dev/null
+++ b/Standard UI Components/.gitattributes
@@ -0,0 +1,2 @@
+# Auto detect text files and perform LF normalization
+* text=auto
diff --git a/Standard UI Components/README.md b/Standard UI Components/README.md
index d646da4..ef4600e 100644
--- a/Standard UI Components/README.md
+++ b/Standard UI Components/README.md
@@ -51,7 +51,6 @@ Now you are ready to use them in your HTML markup as any other standard HMTL tag
| [Carousel](#carousel) |
| [Checkbox](#checkbox) |
| [Input](#input) |
-| [Menu](#menu) |
| [Notifications](#notifications) |
| [Popup](#popup) |
| [Switch](#switch) |
@@ -89,16 +88,19 @@ Variants are different stylistic versions of same component, But they have same
#### Disabled State
-These can disabled adding `disable` attribute. That makes them look in-active but they still will receive events. ***Thats why it's important to only use it's custom event to listen for click event*** more on that further.
+These can disabled adding `disabled="true` attribute. That makes them look in-active but they still will receive events. ***Thats why it's important to only use it's custom event to listen for click event*** more on that further.
```html
-Disabled
+Disabled
```
#### Custom Events
-1. `clicked` is a custom event specified for `sm-button` that listens to button being clicked like normal `click` event. The main difference being `click` event will fire even if `disable` is set as sm-button doesn't stop actual component from receiving pointer events. The reason being it has another event to handle disabled state.
+1. `clicked` is a custom event specified for `sm-button` that listens to button being clicked like normal `click` event. The main difference being `click` event will fire even if `disabled="true"` is set as sm-button doesn't stop actual component from receiving pointer events. The reason being it has another event to handle disabled state.
2. `disabled` event fires when button is disabled and user tries to click on it. This event can be useful if you want to validate a form but user clicked submit before all data so you show message according to situation.
+#### Is it ***Responsive***?
+
+No, As by default this is an inline element that means it won't strech accross whole horizontal space. But this behaviour can be changed that by following css.
```css
sm-button{
width: 100%;
@@ -166,22 +168,22 @@ This has two custom attributes `checked` and `disabled`.
1. Checked
```html
-
+
```
2. disabled
```html
-
+
```
#### Disabled State
-This component can disabled adding `disable` attribute.
+This component can disabled adding `disabled="true` attribute.
You can also have option to use both of these attributes at the same time.
```html
-
+
```
#### Supported Events
@@ -205,7 +207,7 @@ let myCheckbox = document.getElementById('my_checkbox');
```
##### To set checked
```js
-checkbox.checked = true
+checkbox.checked="true"
//or
myCheckbox.setAttribute('checked', 'true')
```
@@ -213,9 +215,9 @@ Replace `"true"` with `"false"` to un-tick checkbox
##### To set disabled
```js
-myCheckbox.disabled = true
+myCheckbox.disabled="true"
//or
-myCheckbox.setAttribute('disable', '')
+myCheckbox.setAttribute('disabled', 'true')
```
### Input
@@ -243,7 +245,9 @@ By default placeholder will disappear when input field has some value.
All events supported by traditional input.
+#### Is it ***Responsive***?
+No, As by default this is an inline element that means it won't strech accross whole horizontal space. But this behaviour can be changed that by following css.
```css
sm-input{
width: 100%;
@@ -274,32 +278,6 @@ console.log(myInput.value)
console.log(myInput.isValid)
```
-### Menu
-[See Demo](https://sairaj-mote.github.io/components/)
-
-```html
-
-```
-You can add options using `` instead of `