From 48eb712ee897b8f3d551bbf7724c7385a295e732 Mon Sep 17 00:00:00 2001 From: sairaj mote Date: Mon, 15 Mar 2021 19:25:46 +0530 Subject: [PATCH] Updating readme --- Standard UI Components/README.md | 55 ++++++++++---------------------- 1 file changed, 17 insertions(+), 38 deletions(-) diff --git a/Standard UI Components/README.md b/Standard UI Components/README.md index d93f255..d646da4 100644 --- a/Standard UI Components/README.md +++ b/Standard UI Components/README.md @@ -89,19 +89,16 @@ Variants are different stylistic versions of same component, But they have same #### Disabled State -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. +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. ```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 `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. +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. 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%; @@ -169,22 +166,22 @@ This has two custom attributes `checked` and `disabled`. 1. Checked ```html - + ``` 2. disabled ```html - + ``` #### Disabled State -This component can disabled adding `disabled="true` attribute. +This component can disabled adding `disable` attribute. You can also have option to use both of these attributes at the same time. ```html - + ``` #### Supported Events @@ -208,7 +205,7 @@ let myCheckbox = document.getElementById('my_checkbox'); ``` ##### To set checked ```js -checkbox.checked="true" +checkbox.checked = true //or myCheckbox.setAttribute('checked', 'true') ``` @@ -216,9 +213,9 @@ Replace `"true"` with `"false"` to un-tick checkbox ##### To set disabled ```js -myCheckbox.disabled="true" +myCheckbox.disabled = true //or -myCheckbox.setAttribute('disabled', 'true') +myCheckbox.setAttribute('disable', '') ``` ### Input @@ -246,9 +243,7 @@ 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%; @@ -432,12 +427,12 @@ This has two custom attributes `checked` and `disabled`. 1. Checked ```html - + ``` 2. disabled ```html - + ``` #### Disabled State @@ -447,7 +442,7 @@ 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 @@ -471,19 +466,17 @@ let mySwitch = document.getElementById('mySwitch'); ``` ##### To set checked ```js -mySwitch.checked="true" +mySwitch.checked = true //or -mySwitch.setAttribute('checked', 'true') +mySwitch.setAttribute('checked', '') ``` -Replace `"true"` with `"false"` to turn switch off. ##### To set disabled ```js -mySwitch.disabled="true" +mySwitch.disabled = true //or -mySwitch.setAttribute('disabled', 'true') +mySwitch.setAttribute('disable', '') ``` -Replace `"true"` with `"false"` to enable switch. ### Select [See Demo](https://sairaj-mote.github.io/components/) @@ -508,9 +501,6 @@ You can specify `sm-option` value using `value=""` attribute in option markup. This supports `change` event that fires when new value is selected from dropdown. -#### 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-select{ width: 100%; @@ -587,15 +577,7 @@ This component supports keyboard interactivity like ***Enter*** or ***Spacebar** Notice how every `sm-tab` is folloed by `sm-option`, This is default structure or syntax for using `sm-tabs`. ***If you didn't add a panel after a tab, the component won't work.*** Another key part is `sm-tab` should have `slot="tab"` as attribute and `slot="panel"` for `sm-panel`. As this component uses HTML5 ***[](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/slot)*** tag to organize user added data. For more information, please refer to this [MDN article](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_templates_and_slots). -#### Custom Attributes -1. enable-flick -```html - - -//Tabs body - -``` #### Variants Variants are different stylistic versions of same component, But they have same functions. @@ -608,9 +590,6 @@ Setting this variant will change default sliding indicator to a block for provid ``` -#### Is it ***Responsive***? - -Yes, it will adjust according to screen size and input interrfaces like mouse, touch. #### Interactions