diff options
Diffstat (limited to 'doc/development/fe_guide/droplab/plugins/input_setter.md')
| -rw-r--r-- | doc/development/fe_guide/droplab/plugins/input_setter.md | 38 |
1 files changed, 25 insertions, 13 deletions
diff --git a/doc/development/fe_guide/droplab/plugins/input_setter.md b/doc/development/fe_guide/droplab/plugins/input_setter.md index b873b7a14ee..ab8a5cebd08 100644 --- a/doc/development/fe_guide/droplab/plugins/input_setter.md +++ b/doc/development/fe_guide/droplab/plugins/input_setter.md @@ -1,17 +1,26 @@ -# InputSetter +--- +stage: none +group: unassigned +info: To determine the technical writer assigned to the Stage/Group associated with this page, see https://about.gitlab.com/handbook/engineering/ux/technical-writing/#designated-technical-writers +--- -`InputSetter` is a plugin that allows for updating DOM out of the scope of droplab when a list item is clicked. +# InputSetter plugin + +`InputSetter` is a DropLab plugin that allows for updating DOM out of the scope +of DropLab when a list item is clicked. ## Usage -Add the `InputSetter` object to the plugins array of a `DropLab.prototype.init` or `DropLab.prototype.addHook` call. +Add the `InputSetter` object to the plugins array of a `DropLab.prototype.init` +or `DropLab.prototype.addHook` call. -- `InputSetter` requires a configuration value for `input` and `valueAttribute`. -- `input` should be the DOM element that you want to manipulate. -- `valueAttribute` should be a string that is the name of an attribute on your list items that is used to get the value - to update the `input` element with. +- `InputSetter`: Requires a configuration value for `input` and `valueAttribute`. +- `input`: The DOM element that you want to manipulate. +- `valueAttribute`: A string that's the name of an attribute on your list items + that's used to get the value to update the `input` element with. -You can also set the `InputSetter` configuration to an array of objects, which will allow you to update multiple elements. +You can also set the `InputSetter` configuration to an array of objects, which +allows you to update multiple elements. ```html <input id="input" value=""> @@ -52,9 +61,12 @@ droplab.addData('trigger', [{ }]); ``` -Above, if the second list item was clicked, it would update the `#input` element -to have a `value` of `1`, it would also update the `#div` element's `data-selected-id` to `1`. +In the previous code, if the second list item was clicked, it would update the +`#input` element to have a `value` of `1`, it would also update the `#div` +element's `data-selected-id` to `1`. -Optionally you can set `inputAttribute` to a string that is the name of an attribute on your `input` element that you want to update. -If you do not provide an `inputAttribute`, `InputSetter` will update the `value` of the `input` element if it is an `INPUT` element, -or the `textContent` of the `input` element if it is not an `INPUT` element. +Optionally, you can set `inputAttribute` to a string that's the name of an +attribute on your `input` element that you want to update. If you don't provide +an `inputAttribute`, `InputSetter` will update the `value` of the `input` +element if it's an `INPUT` element, or the `textContent` of the `input` element +if it isn't an `INPUT` element. |