Form / Custom controls

For more customization and cross browser consistency, use the custom form elements to replace the browser defaults. They’re built on top of semantic and accessible markup, so they’re solid replacements for any default form control.

Select

Use the .custom-select class to create a custom <select>.

Checkboxes and radios

Each checkbox and radio is wrapped in a <label> for three reasons:

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.

Checkbox

To make checkboxes without label text, add the .custom-control-blank class.

To make checkboxes inline, add the .checkbox-inline class.

Radio

To make radios without label text, add the .custom-control-blank class.

To make radios inline, add the .radio-inline class.

File

Custom file input requires "px-file.js" plugin.

To create a custom file input:

To create an alternative custom file input, add the .px-file class and append control buttons to the .custom-file.

Sizes

Disabled

Initializing a custom file input

PxFile plugin has no custom options.

PxFile plugin is initialized on pre-existing markup.


$('.custom-file').pxFile();

Custom file input usage


require(['jquery', 'px/plugins/px-file'], function($) {
  ...
});

Methods

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.

  Form reset

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.


Usage

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 directives

px-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.


Instance

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

Options can be specified as attributes.

Options marked with * are available only for px-custom-file directive.
Options marked with have an angular $watch listener applied to it.
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:

  • sm - small input.
  • lg - large input
 

<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>