Andreas/ngx-admin
1
0
Fork 0
mirror of https://github.com/akveo/ngx-admin.git synced 2026-02-25 01:14:06 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

fix(demo): improve grid, typography and tabs layouts

Browse source
This commit is contained in:
KostyaDanovsky 2017-07-19 12:07:17 +03:00
parent e40353ebae
commit a0e7abcf0a
11 changed files with 108 additions and 67 deletions
Download patch file Download diff file Expand all files Collapse all files

54
src/app/pages/ui-features/tabs/tabs.component.html
View file

@ -1,28 +1,40 @@
<div class="row">
<div class="col-md-6">
<nga-card size="medium">
<nga-card-header>Tabset</nga-card-header>
<nga-card-body>
<nga-tabset>
<nga-tab tabTitle="Tab #1">
<span>Content #1</span>
</nga-tab>
<nga-tab tabTitle="Tab #2">
<span>Content #2</span>
</nga-tab>
<nga-tab tabTitle="Tab #3">
<span>Content #3</span>
</nga-tab>
</nga-tabset>
</nga-card-body>
<div class="col-md-12 col-lg-6">
<nga-card size="small">
<nga-tabset>
<nga-tab tabTitle="Simple Tab #1">
<p>In 1975, the first general purpose home automation network technology, <a href="/wiki/X10_(industry_standard)" title="X10 (industry standard)">X10</a>, was developed. It is a communication protocol for electronic devices. It primarily uses <a href="/wiki/Electric_power_transmission" title="Electric power transmission">electric power transmission</a> wiring for signalling and control, where the signals involve brief <a href="/wiki/Radio_frequency" title="Radio frequency">radio frequency</a> bursts of <a href="/wiki/Digital_data" title="Digital data">digital data</a>, and remains the most widely available.<sup id="cite_ref-8" class="reference"><a href="#cite_note-8">[8]</a></sup> By 1978, X10 products included a 16 channel command console, a lamp module, and an appliance module. Soon after came the wall switch module and the first X10 timer.</p>
</nga-tab>
<nga-tab tabTitle="Simple Tab #2">
<span>Content #2</span>
</nga-tab>
<nga-tab tabTitle="Simple Tab #3">
<span>Content #3</span>
</nga-tab>
</nga-tabset>
</nga-card>
</div>
<div class="col-md-6">
<nga-card size="medium">
<nga-card-header>Route Tabset</nga-card-header>
<nga-card-body>
<nga-route-tabset [tabs]="tabs"></nga-route-tabset>
</nga-card-body>
<nga-card size="small">
<nga-tabset fullWidth>
<nga-tab tabTitle="Full width tab #1">
<p><b>Home automation</b> or <b>smart home</b><sup id="cite_ref-Smart_Home_1-0" class="reference"><a href="#cite_note-Smart_Home-1">[1]</a></sup> (also known as <b>domotics</b><sup id="cite_ref-t3_2-0" class="reference"><a href="#cite_note-t3-2">[2]</a></sup>) is <a href="/wiki/Building_automation" title="Building automation">building automation</a> for the home. It involves the control and automation of lighting, heating (such as <a href="/wiki/Smart_thermostat" title="Smart thermostat">smart thermostats</a>), ventilation, air conditioning (<a href="/wiki/HVAC" title="HVAC">HVAC</a>), and security, as well as <a href="/wiki/Home_appliance" title="Home appliance">home appliances</a> such as washer/dryers, ovens or refrigerators/freezers. <a href="/wiki/Wi-Fi" title="Wi-Fi">Wi-Fi</a> is often used for remote monitoring and control. Home devices, when remotely monitored and controlled via the Internet, are an important constituent of the <a href="/wiki/Internet_of_Things" class="mw-redirect" title="Internet of Things">Internet of Things</a>. Modern systems generally consist of switches and sensors connected to a central hub sometimes called a "gateway" from which the system is controlled with a <a href="/wiki/User_interface" title="User interface">user interface</a> that is interacted either with a wall-mounted terminal, mobile phone software, <a href="/wiki/Tablet_computer" title="Tablet computer">tablet computer</a> or a web interface, often but not always via Internet cloud services.</p>
<p>While there are many competing vendors, there are very few worldwide accepted industry standards and the smart home space is heavily fragmented.<sup id="cite_ref-3" class="reference"><a href="#cite_note-3">[3]</a></sup> Popular <a href="/wiki/Communications_protocol" title="Communications protocol">communications protocol</a> for products include <a href="/wiki/X10_(industry_standard)" title="X10 (industry standard)">X10</a>, <a href="/wiki/Ethernet" title="Ethernet">Ethernet</a>, <a href="/wiki/RS-485" title="RS-485">RS-485</a>, <a href="/wiki/6LoWPAN" title="6LoWPAN">6LoWPAN</a>, <a href="/wiki/Bluetooth_low_energy" class="mw-redirect" title="Bluetooth low energy">Bluetooth LE (BLE)</a>, <a href="/wiki/ZigBee" class="mw-redirect" title="ZigBee">ZigBee</a> and <a href="/wiki/Z-Wave" title="Z-Wave">Z-Wave</a>, or other proprietary protocols all of which are incompatible with each other.<sup id="cite_ref-crhomephone_4-0" class="reference"><a href="#cite_note-crhomephone-4">[4]</a></sup> Manufacturers often prevent independent implementations by withholding documentation and by litigation.<sup id="cite_ref-5" class="reference"><a href="#cite_note-5">[5]</a></sup></p>
</nga-tab>
<nga-tab tabTitle="Full width tab #2">
<span>Content #2</span>
</nga-tab>
<nga-tab tabTitle="Full width tab #3">
<span>Content #3</span>
</nga-tab>
</nga-tabset>
</nga-card>
</div>
<div class="col-md-6">
<nga-card size="small">
<nga-route-tabset [tabs]="tabs"></nga-route-tabset>
</nga-card>
</div>
</div>

18
src/app/pages/ui-features/tabs/tabs.component.scss
View file

@ -0,0 +1,18 @@
@import '../../../@theme/styles/variables';
@include nga-install-component() {
nga-tabset {
height: 100%;
display: flex;
flex-direction: column;
}
nga-tab {
padding: nga-theme(padding);
}
/deep/ ngx-tab1, /deep/ ngx-tab2 {
display: block;
padding: nga-theme(padding);
}
}

11
src/app/pages/ui-features/tabs/tabs.component.ts
View file

@ -3,7 +3,12 @@ import { Component } from '@angular/core';
@Component({
selector: 'ngx-tab1',
template: `
<p>Tab 1 works!</p>
<p>Early home automation began with labor-saving machines. Self-contained electric or gas powered
<a href="/wiki/Home_appliances">home appliances</a> became viable in the 1900s with the introduction of
<a href="/wiki/Electric_power_distribution">electric power distribution</a>
and led to the introduction of washing machines (1904), water heaters (1889), refrigerators, sewing machines,
dishwashers, and clothes dryers.
</p>
`,
})
export class Tab1Component { }
@ -25,11 +30,11 @@ export class TabsComponent {
tabs: any[] = [
{
title: 'Tab #1',
title: 'Route tab #1',
route: '/pages/ui-features/tabs/tab1',
},
{
title: 'Tab #2',
title: 'Route tab #2',
route: '/pages/ui-features/tabs/tab2',
},
];