slds-icon-font
Version:
Icon font version of Salesforce Lighting Design System SVGs
101 lines (93 loc) • 5.43 kB
HTML
<html lang="en" ng-app="app">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>SLDS Icon Font</title>
<link rel="stylesheet" href="main.css">
</head>
<body role="document" ng-controller="AppController">
<header class="header-main slds-m-around--medium">
<h1 class="main-heading slds-text-heading--large"><abbr title="Salesforce Lightning Design System">SLDS</abbr> Icon Font</h1>
<div class="header-form-size slds-form-element">
<label class="slds-assistive-text" for="selectSample1">Change Size</label>
<div class="slds-form-element__control">
<div class="slds-select_container">
<select id="selectSample1" class="slds-select"
ng-model="size"
ng-options="item as item.label for item in sizes">
</select>
</div>
</div>
</div>
</header>
<main class="slds-m-around--medium">
<div class="slds-tabs--default"
ng-show="iconGroup.length > 0">
<ul class="slds-tabs--default__nav" role="tablist">
<li class="slds-tabs--default__item slds-text-heading--label" role="presentation"
ng-class="selectedTab === 0 ? 'slds-active' : ''">
<a class="slds-tabs--default__link" role="tab" tabindex="0" aria-selected="true" aria-controls="tab-default-1" id="tab-default-0__item"
ng-click="selectTab(0)">Search All</a>
</li>
<li class="slds-tabs--default__item slds-text-heading--label" role="presentation"
ng-repeat="group in iconGroup"
ng-class="selectedTab === $index + 1 ? 'slds-active' : ''">
<a class="slds-tabs--default__link" role="tab" tabindex="{{ $index + 1 }}" aria-selected="true" aria-controls="tab-default-1" id="tab-default-{{ $index + 1 }}__item"
ng-click="selectTab($index + 1)">{{ group.category }}</a>
</li>
</ul>
<article class="icon-group" id="tab-default-0"
role="tabpanel" aria-labelledby="tab-default-0__item"
ng-class="selectedTab === 0 ? 'slds-show' : 'slds-hide'">
<form class="search-form">
<div class="slds-form-element">
<label class="slds-assistive-text" for="search">Search</label>
<div class="slds-form-element__control">
<input id="search" class="slds-input" type="search" placeholder="Search Icon Font" autocomplete="off"
ng-model="keywords">
<button class="search-form-action slds-button slds-button--icon-bare">
<i class="search-form-icon sldsicon-utility-search"></i>
</button>
<button class="search-form-action--right slds-button slds-button--icon-bare"
ng-click="clearSearch()">
<i class="search-form-icon sldsicon-utility-close"></i>
</button>
</div>
</div>
</form>
<div ng-repeat="group in iconGroup">
<div class="slds-grid slds-grid--align-center slds-wrap">
<div class="icon-container slds-col"
ng-class="getSizeClassName()"
icon-font
obj="icon"
size="size.value"
ng-repeat="icon in group.icons | filter:keywords"></div>
</div>
</div>
</article>
<article class="icon-group" id="tab-default-{{ $index + 1 }}"
role="tabpanel" aria-labelledby="tab-default-{{ $index }}__item"
ng-repeat="group in iconGroup"
ng-class="selectedTab === $index + 1 ? 'slds-show' : 'slds-hide'">
<h2 class="slds-text-heading--medium slds-m-vertical--large">{{ group.category }}</h2>
<div class="slds-grid slds-grid--align-center slds-wrap">
<div class="icon-container slds-col"
ng-class="getSizeClassName()"
icon-font
obj="icon"
size="size.value"
ng-repeat="icon in group.icons"></div>
</div>
</article>
</div>
</main>
<div class="spinny-gif__container slds-spinner--large"
ng-class="isLoading ? 'active' : ''">
<img src="assets/images/spinners/slds_spinner_brand.gif" alt="Loading..." />
</div>
<script src="dev/app.js"></script>
</body>
</html>