gumga-mask-ng
Version:
Gumga Mask (Angular 1.x)
155 lines (145 loc) • 6.48 kB
HTML
<html ng-app="app">
<head>
<meta charset="utf-8">
<title>gumga-mask-ng</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://gumga.github.io/components/style.css">
</head>
<body >
<nav class="navbar navbar-inverse" ng-controller="VersionController as ctrl">
<div class="container">
<div class="navbar-header">
<a class="navbar-brand" href="#">gumga-mask-ng</a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav navbar-right">
<li class="dropdown">
<a href="#"
class="dropdown-toggle"
data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{ctrl.version}} <span class="caret"></span></a>
<ul class="dropdown-menu">
<li ng-repeat="version in ctrl.versions"><a href="../{{version}}">{{version}}</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<div class="container" ng-controller="Ctrl as ctrl">
<div class="row">
<div class="col-xs-4">
<h2>Descrição</h2>
<p>O componente GumgaMask serve para adicionar máscaras aos elementos inputs que se fazem necessário, como CPF, CNPJ, telefone e etc.
Para modificar o código do exemplo abaixo <a target="_blank" href="http://embed.plnkr.co/gWupU9i3MYeRwsBbNBio">clique aqui</a>.</p>
</div>
<div class="col-xs-8">
<h3>Instalação</h3>
<pre><code class="prettyprint">// npm
npm i gumga-mask-ng --save
// bower
bower install gumga-mask-ng --save
//Injeção do modulo
angular.module('yourApp', ['gumga.mask']);
<script src="node_modules/gumga-mask-ng/dist/gumga-mask.min.js"></script>
<script src="bower_components/gumga-mask-ng/dist/gumga-mask.min.js"></script></code></pre>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Usando
</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-6">
<form name="Example">
<label>CPF</label>
<input
type="text"
class="form-control"
ng-model="cpf"
gumga-mask-options="ctrl.maskOptions"
gumga-mask="999.999.999-99"/>
</form>
</div>
<div class="col-xs-6">
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active"><a href="#html" aria-controls="home" role="tab" data-toggle="tab">HTML</a></li>
<li role="presentation"><a href="#js" aria-controls="profile" role="tab" data-toggle="tab">JavaScript</a></li>
</ul>
<div class="tab-content">
<div role="tabpanel" class="tab-pane active" id="html">
<pre><code class="prettyprint" ng-non-bindable><form name="Example">
<label>CPF</label>
<input
type="text"
class="form-control"
ng-model="cpf"
gumga-mask-options="maskOptions"
gumga-mask="999.999.999-99"/>
</form>
</code></pre>
</div>
<div role="tabpanel" class="tab-pane" id="js">
<pre><code class="prettyprint" ng-non-bindable>angular.module('app', ['gumga.mask'])
.controller('ctrl', function($scope){
$scope.maskOptions = {
maskDefinitions: {
'seuRegex': /[regex]/ // <= aqui vai sua regex
},
clearOnBlur: false,
eventsToHandle: ['input', 'keyup', 'click', 'focus']
};
})</code></pre>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
Atributos
</div>
<table class="table table-striped">
<thead>
<tr>
<th>Parâmetro</th>
<th>Tipo</th>
<th>Requerido</th>
<th>Descrição</th>
</tr>
</thead>
<tbody>
<tr>
<td><strong>gumga-mask</strong></td>
<td><code>*</code></td>
<td>Sim</td>
<td>Por padrão o componente tem 3 tipos de regex aceitas, que são 9 (numéricos), A (alfa) e * (alfanuméricos).</td>
</tr>
<tr>
<td><strong>gumga-mask-options</strong></td>
<td><code>Objeto</code></td>
<td>Não</td>
<td>Objeto com regex extras ou sobreescrever configurações default.</td>
</tr>
<tr>
<td><strong>gumga-mask-placeholder</strong></td>
<td><code>String</code></td>
<td>Não</td>
<td>Trabalha em conjunto com o placeholder nativo, contudo, o gumga-mask-placeholder deve seguir o mesmo padrão de caracteres do informado no gumga-mask. Enquanto o nativo fica ativo sem atividade no input, ao disparar o evento focus, o gumga-mask-placeholder ficará ativo.</td>
</tr>
</tbody>
</table>
</div>
</div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdn.rawgit.com/google/code-prettify/master/loader/run_prettify.js"></script>
<script src="dist/gumga-mask.min.js"></script>
<script type="text/javascript" src="app.js"></script>
<script type="text/javascript" src="https://gumga.github.io/components/app.js"></script>
</body>
</html>