Button Ng

Provides an Angular wrapper for Button.

Button Ng

Example

p {
  margin: 16px 0;
}

:global(.dark) {
  margin: -8px;
  padding: 8px;
  background: #000;
}

<div ng-app="test" ng-strict-di ng-controller="testCtrl">

  <rg-checkbox ng-model="$root.checkbox"><b>Dark theme</b></rg-checkbox>

  <rg-theme theme="$root.checkbox ? Theme.DARK : Theme.LIGHT">
    <div style="margin: 8px 0 0 8px; padding: 1px 14px"
         ng-style="{'background-color': $root.checkbox === true ? 'black' : 'inherit'}">
      <p>
        <rg-button>Press me</rg-button>
        <rg-button>Press me Press me Press me Press me Press me</rg-button>
        <rg-button disabled="true">Press me</rg-button>
        <rg-button loader="true">Press me</rg-button>
        <rg-button delayed="true">Press me</rg-button>
        <rg-button text="true">Press me</rg-button>
      </p>

      <p>
        <rg-button mode="primary">Press me</rg-button>
        <rg-button mode="primary">Press me Press me Press me Press me Press me</rg-button>
        <rg-button mode="primary" disabled="true">Press me</rg-button>
        <rg-button mode="primary" loader="true">Press me</rg-button>
        <rg-button mode="primary" delayed="true">Press me</rg-button>
        <rg-button mode="primary" text="true">Press me</rg-button>
      </p>

      <p>
        <rg-button>Press me</rg-button>
        <rg-button icon="{{close}}">Action with icon</rg-button>
        <rg-button narrow-right="true">Dropdown <rg-icon glyph="{{chevronDown}}" size="16" color="GRAY"></rg-icon></rg-button>
        <rg-button icon="{{close}}" mode="primary"></rg-button>
        <rg-button icon="{{permission}}" disabled="true"></rg-button>
        <rg-button icon="{{pencil}}" loader="true"></rg-button>
        <rg-button>Press me</rg-button>
      </p>

      <p>
        <rg-button danger="true">Press me</rg-button>
        <rg-button danger="true" disabled="true">Press me</rg-button>
        <rg-button danger="true" loader="true">Press me</rg-button>
        <rg-button danger="true" icon="{{pencil}}"></rg-button>
      </p>

      <p>
        <rg-button-link href="/button-link">Button link</rg-button-link>
        <rg-button-link href="/button-link" disabled="true">Button link
        </rg-button-link>
        <rg-button-link href="/button-link" loader="true">Button link
        </rg-button-link>
        <rg-button-link href="/button-link" icon="{{pencil}}"></rg-button-link>
      </p>

      <p>
        <rg-button tabindex="1">
          <span>Press me</span>
          <rg-icon size="16" glyph="{{close}}"></rg-icon>
        </rg-button>
        <rg-button tabindex="2">
          <rg-icon size="16" glyph="{{close}}"></rg-icon>
          <span>Press me</span>
        </rg-button>
        <rg-button tabindex="3">
          <rg-icon size="16" glyph="{{close}}"></rg-icon>
          <span>Press me</span>
          <rg-icon size="16" glyph="{{close}}"></rg-icon>
        </rg-button>
        <rg-button tabindex="4">
          <span>Press me</span>
          <rg-icon size="16" glyph="{{close}}"></rg-icon>
          <span>Press me</span>
        </rg-button>
      </p>
    </div>
  </rg-theme>
</div>

import angular from 'angular';
import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
import IconNG from '@jetbrains/ring-ui/components/icon-ng/icon-ng';
import ThemeNG from '@jetbrains/ring-ui/components/theme-ng/theme-ng';
import CheckboxNG from '@jetbrains/ring-ui/components/checkbox-ng/checkbox-ng';
import Theme from '@jetbrains/ring-ui/components/global/theme';

import {
PencilIcon,
ChevronDownIcon,
CloseIcon,
PermissionIcon
} from '@jetbrains/ring-ui/components/icon';

angular.module('test', [ButtonNG, IconNG, ThemeNG, CheckboxNG])
  .controller('testCtrl', function ($scope) {
    $scope.pencil = PencilIcon;
    $scope.chevronDown = ChevronDownIcon;
    $scope.close = CloseIcon;
    $scope.permission = PermissionIcon;
    $scope.Theme = Theme;
  })

Button Ng with default Dark theme

Example

p {
  margin: 16px 0;
}

:global(.dark) {
  margin: -8px;
  padding: 8px;
  background: #000;
}

<div ng-app="test"
     ng-strict-di
     ng-controller="testCtrl">

    <rg-checkbox ng-model="$root.checkbox"
                 ng-change="$root.currentTheme = $root.checkbox ? Theme.DARK : Theme.LIGHT">
      <b>Dark theme</b>
    </rg-checkbox>

    <rg-theme theme="$root.currentTheme">
      <div style="margin: 8px 0 0 8px; padding: 1px 14px"
           ng-style="{'background-color': $root.checkbox === true ? 'black' : 'inherit'}">
        <p>
          <rg-button>Press me</rg-button>
          <rg-button>Press me Press me Press me Press me Press me</rg-button>
          <rg-button disabled="true">Press me</rg-button>
          <rg-button loader="true">Press me</rg-button>
          <rg-button delayed="true">Press me</rg-button>
          <rg-button text="true">Press me</rg-button>
        </p>

        <p>
          <rg-button mode="primary">Press me</rg-button>
          <rg-button mode="primary">Press me Press me Press me Press me Press me</rg-button>
          <rg-button mode="primary" disabled="true">Press me</rg-button>
          <rg-button mode="primary" loader="true">Press me</rg-button>
          <rg-button mode="primary" delayed="true">Press me</rg-button>
          <rg-button mode="primary" text="true">Press me</rg-button>
        </p>

        <p>
          <rg-button>Press me</rg-button>
          <rg-button icon="{{close}}">Action with icon</rg-button>
          <rg-button narrow-right="true">Dropdown <rg-icon glyph="{{chevronDown}}" size="16" color="GRAY"></rg-icon></rg-button>
          <rg-button icon="{{close}}" mode="primary"></rg-button>
          <rg-button icon="{{permission}}" disabled="true"></rg-button>
          <rg-button icon="{{pencil}}" loader="true"></rg-button>
          <rg-button>Press me</rg-button>
        </p>

        <p>
          <rg-button danger="true">Press me</rg-button>
          <rg-button danger="true" disabled="true">Press me</rg-button>
          <rg-button danger="true" loader="true">Press me</rg-button>
          <rg-button danger="true" icon="{{pencil}}"></rg-button>
        </p>

        <p>
          <rg-button-link href="/button-link">Button link</rg-button-link>
          <rg-button-link href="/button-link" disabled="true">Button link
          </rg-button-link>
          <rg-button-link href="/button-link" loader="true">Button link
          </rg-button-link>
          <rg-button-link href="/button-link" icon="{{pencil}}"></rg-button-link>
        </p>

        <p>
          <rg-button tabindex="1">
            <span>Press me</span>
            <rg-icon size="16" glyph="{{close}}"></rg-icon>
          </rg-button>
          <rg-button tabindex="2">
            <rg-icon size="16" glyph="{{close}}"></rg-icon>
            <span>Press me</span>
          </rg-button>
          <rg-button tabindex="3">
            <rg-icon size="16" glyph="{{close}}"></rg-icon>
            <span>Press me</span>
            <rg-icon size="16" glyph="{{close}}"></rg-icon>
          </rg-button>
          <rg-button tabindex="4">
            <span>Press me</span>
            <rg-icon size="16" glyph="{{close}}"></rg-icon>
            <span>Press me</span>
          </rg-button>
        </p>
      </div>
    </rg-theme>

</div>

import angular from 'angular';
import ButtonNG from '@jetbrains/ring-ui/components/button-ng/button-ng';
import IconNG from '@jetbrains/ring-ui/components/icon-ng/icon-ng';
import ThemeNG from '@jetbrains/ring-ui/components/theme-ng/theme-ng';
import CheckboxNG from '@jetbrains/ring-ui/components/checkbox-ng/checkbox-ng';
import Theme from '@jetbrains/ring-ui/components/global/theme';

import {
  PencilIcon,
  ChevronDownIcon,
  CloseIcon,
  PermissionIcon
} from '@jetbrains/ring-ui/components/icon';

angular.module('test', [ButtonNG, IconNG, ThemeNG, CheckboxNG])
  .run($rootScope => {
    $rootScope.checkbox = true;
    $rootScope.currentTheme = 'dark';
  })
  .controller('testCtrl', function ($scope) {
    $scope.pencil = PencilIcon;
    $scope.chevronDown = ChevronDownIcon;
    $scope.close = CloseIcon;
    $scope.permission = PermissionIcon;
    $scope.Theme = Theme;
  })