Primitive AngularJS framework

Components

Tabs

Example

Tab 1 Tab 2 Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab ducimus blanditiis soluta psam voluptates consequuntur eveniet non a, minima nihil animi, voluptatum corporis, error uscipit unde! Modi quam quisquam assumenda.

Consectetur adipisicing elit. Ab ducimus blanditiis soluta ipsam voluptates consequuntur eveniet non a, minima nihil animi, voluptatum corporis, error suscipit unde! Modi quam quisquam assumenda.

Blanditiis soluta ipsam voluptates consequuntur eveniet non a, minima nihil animi, voluptatum corporis, error suscipit unde! Modi quam quisquam assumenda.

Code

<div class="tabs">
    <div ng-init="tab = 1">
        <label class="tab-button">
            <input type="radio" name="tab" value="1" ng-model="tab"> Tab 1
        </label>
        <label class="tab-button">
            <input type="radio" name="tab" value="2" ng-model="tab"> Tab 2
        </label>
        <label class="tab-button">
            <input type="radio" name="tab" value="3" ng-model="tab"> Tab 3
        </label>
    </div>
    <hr>
    <div ng-show="tab == 1">
        Lorem ipsum dolor.
    </div>
    <div ng-show="tab == 2">
        Consectetur adipisicing elit.
    </div>
    <div ng-show="tab == 3">
        Blanditiis soluta ipsam .
    </div>
</div>

Spoiler

Example

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Distinctio sapiente autem, non molestias ut rerum, ullam, accusantium fugit minus earum similique? Aspernatur nostrum architecto, optio quod porro unde modi voluptates!

Code

<div>
    <span class="spoiler"
        title="Expand"
        ng-init="spoiler=false"
        ng-click="spoiler=!spoiler">Lorem ipsum dolor sit amet</span><i ng-if="spoiler">, consectetur adipisicing elit.</i>
</div>

Slider {{slider[1]}}{{slider[2]}}{{slider[3]}}

Example

Code

<div>
    <div ng-init="slider = 1">
        <input type="radio" name="slider" value="1" ng-model="slider">
        <input type="radio" name="slider" value="2" ng-model="slider">
        <input type="radio" name="slider" value="3" ng-model="slider">
    </div>
    <img src="img1.png" ng-show="slider == 1" ng-click="slider = slider + 1">
    <img src="img2.png" ng-show="slider == 2" ng-click="slider = slider + 1">
    <img src="img3.png" ng-show="slider == 3" ng-click="slider = 1">
</div>

Glyphicons

☀

☁

☂

★

☆

☉

☎

☏

☐

☑

☒

☓

☭

☔

☕

☖

☗

☘

☙

☚

☛

☜

☝

☞

☟

☮

☠

☢

☣

☤

☥

☦

☧

☨

☩

☪

☫

☬

☯

♪

♲

♳

♴

♵

♶

♷

♸

♹

♺

♻

♼

♽

♾

⚐

⚑

⚒

⚙

⚠

⚡

⇔

⇐

⇑

⇒

⇓

↵

Buttons

Example

Code

<div>
    <button>First</button>
    <button>Second</button>
    &nbsp;
    <button ng-init="a=1" ng-click="a=a+1">{{a}}</button>
    <button ng-init="b=2" ng-click="b=b+2">{{b}}</button>
    <button ng-init="c=3" ng-click="c=c+3">{{c}}</button>
    &nbsp;
    <button>Expand &rArr;</button>
</div>

Popover

Example

Stats {{statName}}

Code

<div>
    <fieldset ng-init="stats = {Wood:true, Stone:true, Gold:true, Wool:false}">
        <legend>Stats</legend>
        <strong ng-repeat="(statName, statVal) in stats">
            <span ng-if="stats[statName]">{{statName}} &nbsp;</span>
        </strong>
        <span ng-if="statPpopover" class="hold r">
            <div class="hold-content">
                <label ng-repeat="(statName, statVal) in stats">
                    <input type="checkbox" ng-model="stats[statName]"> {{statName}}<br>
                </label>
            </div>
        </span>
        <button class="r" ng-click="statPpopover=!statPpopover">⚙</button>
    </fieldset>
</div>

Progress bar

Example

[ | . ] {{pb1}}/10

Code

<div ng-init="pb = [1,2,3,4,5,6,7,8,9,10]">
    <div ng-init="pb1 = 7">
        <button ng-click="pb1<10 ? pb1=pb1+1 : ''">+</button>
        <button ng-click="pb1>0 ? pb1=pb1-1 : ''">-</button>
        [<span ng-repeat="a in pb">
            <span ng-if="a <= pb1">|</span>
            <span ng-if="a > pb1">.</span>
        </span>] {{pb1}}/10
    </div>
</div>

Rating

Example

★ ☆

Code

<div ng-init="stars = [1,2,3,4,5]">
    <div ng-init="star1 = 4">
        <span ng-repeat="a in stars">
            <span ng-if="a <= star1">★</span>
            <span ng-if="a > star1">☆</span>
        </span>
        <button ng-click="star1<5 ? star1=star1+1 : ''">+</button>
        <button ng-click="star1>0 ? star1=star1-1 : ''">-</button>
    </div>
</div>

Login

Example

Login
Password
	⚠ Login or passmord is incorrect

Code

<div>
    <table class="width100">
        <tbody>
            <tr>
                <td>Login</td>
                <td><input type="text" ng-model="login"></td>
            </tr>
            <tr>
                <td>Password</td>
                <td><input type="password" ng-model="password"></td>
            </tr>
            <tr ng-if="msg">
                <td></td>
                <td>
                    <i>⚠ Login or passmord is incorrect</i>
                </td>
            </tr>
            <tr>
                <td></td>
                <td>
                    <button ng-disabled="!password || !login"
                        ng-click="login = password = '';msg=true">Sign in</button>
                </td>
            </tr>
        </tbody>
    </table>
</div>

Navbar

Example

☀ Home ⚒ Projects ⚙ Services ⇓ Download ☝ About ☎ Contacts

Code

<div>
    <a href="#">☀ Home</a>
    <a href="#">⚒ Projects</a>
    <a href="#">⚙ Services</a>
    <a href="#">⇓ Download</a>
    <span class="r">
        <input type="text" placeholder="Search">
        <a href="#">☝ About</a>
        <a href="#">☎ Contacts</a>
    </span>
    <hr>
</div>