lunes, 19 de marzo de 2018

Ventanas estilo Chrome Con Bootstrap y AngularJS


 Buenas compañeros, les compartimos estas  Ventanas estilo Chrome Con Bootstrap y AngularJS



DESCARGA EL CODIGO AQUI :

clic

CODIGO HTML

<html lang="en" ng-app="chromeTabsApp">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Ventanas estilo Chrome Con Bootstrap y AngularJS</title>

  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
</head>

<body ng-controller="AppCtrl">
  <tabset class="tab-container">
    <tab ng-repeat="tab in tabs" active="tab.active" tab-highlight>
      <tab-heading>
        <span>{{tab.title}}</span> <i class="glyphicon glyphicon-remove" ng-click="removeTab($event, $index)"></i>
      </tab-heading>
      <h1>{{tab.content}}</h1>
    </tab>

    <button class="btn btn-default" ng-click="addTab()"></button>
  </tabset>

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.12.1/ui-bootstrap-tpls.min.js"></script>

</body>

</html>

CODIGO CSS

@import "compass/css3";

@import "compass";

.tab-container {
  background: #8dc8fb;
  margin: 0;
  padding: 0;
  max-height: 40px;

  ul {
    &.nav-tabs {
      margin: 0;
      list-style-type: none;
      line-height: 40px;
      max-height: 40px;
      overflow: hidden;
      display: inline-block;
      @include display-flex;
      padding-right: 20px;
      border-bottom: 5px solid #f7f7f7;

      $color: #c3d5e6;

      > li {
        $raduis: 28px 145px;

        margin: 5px -14px 0;
        @include border-top-left-radius($raduis);
        @include border-top-right-radius($raduis);
        padding: 0 30px 0 25px;
        height: 170px;
        background: $color;
        position: relative;
        @include box-shadow(0 4px 6px rgba(0,0,0,.5));
        width: 200px;
        max-width: 200px;
        min-width: 20px;
        border:1px solid #aaa;

        &:first-child {
          margin-left: 0;
        }

        &:last-of-type {
          margin-right: 0;
        }

        > a {
          display: block;
          max-width:100%;
          text-decoration: none;
          color: #222;
          padding: 3px 7px;

          span {
            overflow: hidden;
            white-space: nowrap;
            display: block;
          }

          &:focus,
          &:hover {
            background-color: transparent;
            border-color: transparent;
          }

          .glyphicon-remove {
            color: #777;
            display: inline-block;
            padding:3px;
            font-size: 10px;
            position:absolute;
            z-index: 10;
            top:7px;
            right: -10px;
            @include border-radius(50%);

            &:hover {
              background: #d39ea3;
              color: white;
              @include box-shadow(inset 0 1px 1px rgba(0,0,0,.25));
              @include text-shadow(0 1px 1px rgba(0,0,0,.25));
            }
          }
        }

        &.active {
          z-index: 2;
          @include background-image(linear-gradient(white, #f7f7f7 30px));

          > a {
            background-color: transparent;
            border-color: transparent;
            border-bottom-color: transparent;

            &:focus,
            &:hover {
              background-color: transparent;
              border-color: transparent;
              border-bottom-color: transparent;
            }
          }
        }
      }

      .btn {
        float: left;
        height: 20px;
        width: 35px;
        min-width: 35px;
        max-width: 35px;
        margin: 10px 0 0 0;
        border-color: #71a0c9;
        outline: none;

        @include transform(skew(30deg));

        &.btn-default {
          background: $color;

          &:hover {
            background: #d2deeb;
          }

          &:active {
            background: #9cb5cc;
          }
        }
      }
    }
  }

  .tab-pane {
    padding: 60px 40px;
    text-align: center;

    &.active {
      border-top:1px solid #ddd;
    }
  }
}
 

CODIGO CSS


 var app = angular.module('chromeTabsApp', ['ui.bootstrap']);
app
  .controller('AppCtrl', ['$scope', function ($scope) {
    var counter = 1;
    $scope.tabs = [];

    var addTab = function () {
      $scope.tabs.push({ title: 'Tab ' + counter, content: 'Tab ' + counter });
      counter++;
      $scope.tabs[$scope.tabs.length - 1].active = true;
    };

    var removeTab = function (event, index) {
      event.preventDefault();
      event.stopPropagation();
      $scope.tabs.splice(index, 1);
    };

    $scope.addTab    = addTab;
    $scope.removeTab = removeTab;

    for (var i = 0; i < 5; i++) {
      addTab();
    }
  }])
  .directive('tabHighlight', [function(){
    return {
      restrict: 'A',
      link: function(scope, element) {
        var x, y, initial_background = '#c3d5e6';

        element
          .removeAttr('style')
          .mousemove(function (e) {
            // Add highlight effect on inactive tabs
            if(!element.hasClass('active'))
            {
              x = e.pageX - this.offsetLeft;
              y = e.pageY - this.offsetTop;

              element
                .css({ background: '-moz-radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background })
                .css({ background: '-webkit-radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background })
                .css({ background: 'radial-gradient(circle at ' + x + 'px ' + y + 'px, rgba(255,255,255,0.4) 0px, rgba(255,255,255,0.0) 45px), ' + initial_background });
            }
          })
          .mouseout(function () {
            element.removeAttr('style');
          });
      }
    };
  }]);
 



Checa esto

¿Que temas debe de haber en la pagina?

Posts Populares

Popular Posts

Recent Posts