Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
aurelia-bootstrap-tagsinput
Advanced tools
Readme
An Aurelia Custom Element for the 3rd party addon Bootstrap Tags Input
Screenshots from the demo app
A quick example of the code in action. Note that the value is available under the value.bind
.
<abp-tags-input element.bind="tag" value.bind="post.categories"></abp-tags-input>
Every options of Bootstrap Tags Input
can be called through options.bind=""
. For the complete list, please visit the official site Bootstrap Tags Input - Options.
NOTE:
The picker options can also be defined globally through main.js
via a config.options
configuration, see Global Options
Examples
regular attribute (View)
<abp-tags-input item-value="id" options.bind="{ itemText: 'label' }"></abp-tags-input>
from the ViewModel
<abp-tags-input options.bind="pickerOptions"></abp-tags-input>
export class Example {
pickerOptions = {
itemText: 'label'
}
}
Again every single methods which comes with Bootstrap Tags Input
are available. For the complete list, please visit the official site Bootstrap Tags Input - Functions.
To have access to the methods/functions, you will need to expose the element itself through element.bind
to expose the methods (also note that doing so will also give you access to events
, options
and methods
).
Example
View (exposing the element)
<abp-tags-input element.bind="tag" value.bind="post.categories"></abp-tags-input>
ViewModel (calling the method)
export class Example {
@bindable tag;
tagChanged() {
this.tag.methods.add('tag1');
}
}
Every events of Bootstrap Tags Input
are, as no surprises, available as well. For the complete list, please visit the official site Bootstrap Tags Input - Events.
To have access to the events
, you will need to expose the element itself through element.bind
to expose the methods (also note that doing so will also give you access to events
, options
and methods
).
Note
The events are called with the syntax of onEvent
which differs from the original syntax. Example, for the beforeItemAdd
, we would use the onBeforeItemAdd
event.
Example
View (exposing the element)
<abp-tags-input element.bind="tag" value.bind="post.categories"></abp-tags-input>
ViewModel (calling the onEvent trigger)
export class Example {
tagChanged() {
this.tag.events.onBeforeItemAdd = (e) => console.log('onBeforeItemAdd');
this.tag.events.onBeforeItemRemove = (e) => console.log('onBeforeItemRemove');
this.tag.events.onItemAdded = (e) => console.log('onItemAdded');
this.tag.events.onItemAddedOnInit = (e) => console.log('onItemAddedOnInit');
this.tag.events.onItemRemoved = (e) => console.log('onItemRemoved');
}
}
Since Bootstrap
is in the middle of updating to version 4, we might as well support it. To give flexibility, an extra option (bootstrapVersion
) was added to the config. The default is set to version 3, for more detail see Global Options
Example
.plugin('aurelia-bootstrap-tagsinput', config => { config.extra.bootstrapVersion = 4; });
You can run the examples or build your own by doing the following.
npm install --save aurelia-bootstrap-tagsinput
For CLI
you will need to add (bootstrap-tagsinput
and aurelia-bootstrap-tagsinput
) to your aurelia.json
file.
{
"name": "bootstrap-tagsinput",
"path": "../node_modules/bootstrap-tagsinput",
"main": "dist/bootstrap-tagsinput.min",
"resources": [
"dist/bootstrap-tagsinput.css"
]
},
{
"name": "aurelia-bootstrap-tagsinput",
"path": "../node_modules/aurelia-bootstrap-tagsinput/dist/amd",
"main": "index",
"resources": [
"**/*.{css,html}"
]
},
index.html
<link rel="stylesheet" type="text/css" href="../node_modules/bootstrap-tagsinput/dist/bootstrap-tagsinput.css">
Make the plugin available globally in your main.js
file. Please note the exported class is abp-tags-input
.
import 'bootstrap-tagsinput/dist/bootstrap-tagsinput.css';
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-bootstrap-tagsinput')
.feature('resources');
aurelia.start().then(() => aurelia.setRoot());
}
Note on aurelia-webpack-plugin 2.0
If you started using the new aurelia-webpack-plugin
version 2.0
, which is currently in RC Pre-Release and is already packaged in some of the Aurelia Skeletons (not all). You will have to use the PLATFORM.ModuleName
wrapper. The previous code becomes:
aurelia.use.plugin(PLATFORM.moduleName('aurelia-bootstrap-tagsinput'));
You can change any of the global options directly in the main.js
through a config
as shown below:
export function configure(aurelia) {
aurelia.use
.standardConfiguration()
.developmentLogging()
.plugin('aurelia-bootstrap-tagsinput', config => {
// extra attributes, with config.extra
config.extra.bootstrapVersion = 4;
// or any picker options, with config.options
config.options.tagConfirmKeys = [13, 44]
});
aurelia.start().then(() => aurelia.setRoot());
}
or with aurelia-webpack-plugin 2.0
:
export function configure(aurelia) {
aurelia.use.standardConfiguration().developmentLogging();
aurelia.use.plugin(PLATFORM.moduleName('aurelia-bootstrap-tagsinput'), config => {
// extra attributes, with config.extra
config.extra.bootstrapVersion = 4;
// or any picker options, with config.options
config.options.tagConfirmKeys = [13, 44]
});
aurelia.start().then(() => aurelia.setRoot(PLATFORM.moduleName('app')));
}
Contributions are welcome. This plugin was created to help the community (and myself), if you wish to suggest something and/or want to make a PR (Pull Request), please feel free to do so.
You like and use an Aurelia-Bootstrap-Plugins
, please click on the :star: and spread the word.
FAQs
An Aurelia Custom Element for the 3rd party addon [Bootstrap Tags Input]
The npm package aurelia-bootstrap-tagsinput receives a total of 38 weekly downloads. As such, aurelia-bootstrap-tagsinput popularity was classified as not popular.
We found that aurelia-bootstrap-tagsinput demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.