Use the .custom-select
class to create a custom <select>
.
Each checkbox and radio is wrapped in a <label>
for three reasons:
<input>
s.
<input>
automatically,
meaning no JavaScript is required.
We hide the default <input>
with opacity and use
the .custom-control-indicator
to build a new custom form
control. We can’t build a custom one from just the <input>
because CSS’s content doesn’t work on that element.
With the sibling selector (~
), we use the :checked
state to trigger a makeshift checked state on the custom control.
In the checked states, we use base64 embedded SVG icons from Open Iconic. This provides us the best control for styling and positioning across browsers and devices.
To make checkboxes without label text, add the .custom-control-blank
class.
To make checkboxes inline, add the .checkbox-inline
class.
To make radios without label text, add the .custom-control-blank
class.
To make radios inline, add the .radio-inline
class.
To create a custom file input:
.custom-file-input
class to the <input>
.<input>
in a <label class="custom-file">
.<span class="custom-file-control">
to the .custom-file
.
To create an alternative custom file input, add the .px-file
class and append control buttons to the .custom-file
.
PxFile plugin is initialized on pre-existing markup.
$('.custom-file').pxFile();
require(['jquery', 'px/plugins/px-file'], function($) {
...
});
You can call a public method of PxFile instance using the syntax:
$('.custom-file').pxFile('methodName');
Method name | Description |
---|---|
browse | Open a file browser window. |
clear | Reset an input[type="file"] 's value and a .custom-file-control 's value to default. |
update | Update a .custom-file-control 's value. |
destroy | Destroy the PxFile instance. |
By default, browser doesn't fire a change
event on form reset, so you
need to handle the reset
event and invoke the PxFile.clear()
method manually.
To use px-file plugin, you need to include the next scripts:
<script src="path/to/js/pixeladmin/plugins/px-file.js"></script>
<script src="path/to/js/pixeladmin/directives/angular-px-file.js"></script>
Then inject the plugin into your angular application:
angular.module('yourApp', ['px-file']);
Alternatively, you can include px-file plugin using ocLazyLoad plugin:
$ocLazyLoad.load([
{
name: 'px-file',
files: [
'path/to/js/pixeladmin/plugins/px-file.js',
'path/to/js/pixeladmin/directives/angular-px-file.js',
],
},
]);
px-file
and px-custom-file
directivespx-file
and px-custom-file
directives require ngModel to be on the element.
ngModel property will contain FileList
instance.
document.querySelector('input[type="file"]').files;
You can use px-file
and px-custom-file
directives where you want.
And when the scope is destroyed the directives will be destroyed.
You can define instance
attribute to get a pointer to px-file element:
<px-file instance="ctrl.$pxFile" ng-model="someModel1"></px-file>
<px-custom-file instance="ctrl.$pxCustomFile" ng-model="someModel2"></px-custom-file>
function SomeController() {
// Pointers
this.$pxFile = null;
this.$pxCustomFile = null;
// ...
// Then, after the initialization, you can call plugin methods:
this.$pxFile('browse');
this.$pxCustomFile('clear');
});
Options can be specified as attributes.
px-custom-file
directive.
Option | Description |
---|---|
browse-text* |
"Browse" button text. |
clear-text* |
"Clear" button text. |
disable |
Disable input. |
input-id* |
Input id. |
placeholder |
Input placeholder. |
size |
Input size. Available values:
|
<px-file ng-model="fileModel1"
placeholder="Select file"
size="lg"></px-file>
<px-custom-file ng-model="fileModel2"
browse-text="Select"
input-id="custom-id"
disable="true"></px-file>