mirror of
https://github.com/akveo/ngx-admin.git
synced 2025-12-16 23:40:14 +01:00
grid component
This commit is contained in:
nixa
parent
77d64fe29d
commit
148f1b543f
6 changed files with 310 additions and 0 deletions
16
src/app/pages/ui/components/grid/grid.component.ts
Normal file
16
src/app/pages/ui/components/grid/grid.component.ts
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import {Component, ViewEncapsulation} from '@angular/core';
|
||||
|
||||
import {BaCard} from '../../../../theme/components';
|
||||
|
||||
@Component({
|
||||
selector: 'grid',
|
||||
encapsulation: ViewEncapsulation.None,
|
||||
directives: [BaCard],
|
||||
styles: [require('./grid.scss')],
|
||||
template: require('./grid.html'),
|
||||
})
|
||||
export class Grid {
|
||||
|
||||
constructor() {
|
||||
}
|
||||
}
|
||||
253
src/app/pages/ui/components/grid/grid.html
Normal file
253
src/app/pages/ui/components/grid/grid.html
Normal file
|
|
@ -0,0 +1,253 @@
|
|||
<div class="widgets">
|
||||
|
||||
<div class="row">
|
||||
<div class="col-md-12">
|
||||
|
||||
<ba-card title="Inline Form" baCardClass="with-scroll">
|
||||
|
||||
<h4 class="grid-h">Stacked to horizontal</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
<div class="col-md-1">
|
||||
<div>.col-md-1</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-8">
|
||||
<div>.col-md-8</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div>.col-md-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-4">
|
||||
<div>.col-md-4</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div>.col-md-4</div>
|
||||
</div>
|
||||
<div class="col-md-4">
|
||||
<div>.col-md-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-6">
|
||||
<div>.col-md-6</div>
|
||||
</div>
|
||||
<div class="col-md-6">
|
||||
<div>.col-md-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Mobile and desktop</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-12 col-md-8">
|
||||
<div>xs-12 .col-md-8</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div>xs-6 .col-md-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div>xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div>xs-6 .col-md-4</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div>xs-6 .col-md-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6">
|
||||
<div>.col-xs-6</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>.col-xs-6</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Mobile, tablet, desktop</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-12 col-sm-6 col-md-8">
|
||||
<div>.col-xs-12 .col-sm-6 .col-md-8</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-md-4">
|
||||
<div>.col-xs-6 .col-md-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<div>.col-xs-6 .col-sm-4</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<div>.col-xs-6 .col-sm-4</div>
|
||||
</div>
|
||||
<div class="clearfix hidden-xs-up"></div>
|
||||
<div class="col-xs-6 col-sm-4">
|
||||
<div>.col-xs-6 .col-sm-4</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Column wrapping</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-9">
|
||||
<div>.col-xs-9</div>
|
||||
</div>
|
||||
<div class="col-xs-4">
|
||||
<div>.col-xs-4<br>Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous
|
||||
unit.
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-6">
|
||||
<div>.col-xs-6<br>Subsequent columns continue along the new line.</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Responsive column resets</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<div>.col-xs-6 .col-sm-3 <p>Resize your viewport or check it out on your phone for an example.</p></div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<div>.col-xs-6 .col-sm-3</div>
|
||||
</div>
|
||||
<div class="clearfix hidden-xs-up"></div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<div>.col-xs-6 .col-sm-3</div>
|
||||
</div>
|
||||
<div class="col-xs-6 col-sm-3">
|
||||
<div>.col-xs-6 .col-sm-3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Offsetting columns</h4>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-4">
|
||||
<div>.col-md-4</div>
|
||||
</div>
|
||||
<div class="col-md-4 col-md-offset-4">
|
||||
<div>.col-md-4 .col-md-offset-4</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-3 col-md-offset-3">
|
||||
<div>.col-md-3 .col-md-offset-3</div>
|
||||
</div>
|
||||
<div class="col-md-3 col-md-offset-3">
|
||||
<div>.col-md-3 .col-md-offset-3</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="row show-grid">
|
||||
<div class="col-md-6 col-md-offset-3">
|
||||
<div>.col-md-6 .col-md-offset-3</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<h4 class="grid-h">Grid options</h4>
|
||||
<div class="table-responsive">
|
||||
<table class="table table-bordered table-striped">
|
||||
<thead>
|
||||
<tr>
|
||||
<th></th>
|
||||
<th> Extra small devices
|
||||
<small>Phones (<544px)</small>
|
||||
</th>
|
||||
<th> Small devices
|
||||
<small>Tablets (≥544px)</small>
|
||||
</th>
|
||||
<th> Medium devices
|
||||
<small>Desktops (≥768px)</small>
|
||||
</th>
|
||||
<th> Large devices
|
||||
<small>Desktops (≥992px)</small>
|
||||
</th>
|
||||
<th> Large devices
|
||||
<small>Desktops (≥1200px)</small>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Grid behavior</th>
|
||||
<td>Horizontal at all times</td>
|
||||
<td colspan="4">Collapsed to start, horizontal above breakpoints</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Container width</th>
|
||||
<td>None (auto)</td>
|
||||
<td>576px</td>
|
||||
<td>720px</td>
|
||||
<td>940px</td>
|
||||
<td>1140px</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Class prefix</th>
|
||||
<td><code>.col-xs-</code></td>
|
||||
<td><code>.col-sm-</code></td>
|
||||
<td><code>.col-md-</code></td>
|
||||
<td><code>.col-lg-</code></td>
|
||||
<td><code>.col-xl-</code></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row"># of columns</th>
|
||||
<td colspan="5">12</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Gutter width</th>
|
||||
<td colspan="5">1.875rem / 30px (15px on each side of a column)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Nestable</th>
|
||||
<td colspan="5">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Offsets</th>
|
||||
<td colspan="5">Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th class="text-nowrap" scope="row">Column ordering</th>
|
||||
<td colspan="5">Yes</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</ba-card>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
30
src/app/pages/ui/components/grid/grid.scss
Normal file
30
src/app/pages/ui/components/grid/grid.scss
Normal file
|
|
@ -0,0 +1,30 @@
|
|||
@import '../../../../theme/sass/conf/conf';
|
||||
|
||||
.show-grid div[class^=col-]{
|
||||
padding: 10px;
|
||||
box-sizing: border-box;
|
||||
div {
|
||||
color: $default-text;
|
||||
text-align: center;
|
||||
font-size: 18px;
|
||||
background-color: $border-light;
|
||||
padding: 12px 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.grid-h{
|
||||
margin-top: 10px;
|
||||
margin-bottom: 0;
|
||||
&:first-child{
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
body.badmin-transparent {
|
||||
.show-grid div[class^=col-]{
|
||||
div {
|
||||
color: $default;
|
||||
background-color: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
}
|
||||
}
|
||||
1
src/app/pages/ui/components/grid/index.ts
Normal file
1
src/app/pages/ui/components/grid/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './grid.component';
|
||||
|
|
@ -4,6 +4,7 @@ import {RouteConfig} from '@angular/router-deprecated';
|
|||
import {Typography} from './components/typography';
|
||||
import {Buttons} from './components/buttons';
|
||||
import {Icons} from './components/incons';
|
||||
import {Grid} from './components/grid';
|
||||
|
||||
@Component({
|
||||
selector: 'ui',
|
||||
|
|
@ -28,6 +29,11 @@ import {Icons} from './components/incons';
|
|||
name: 'Icons',
|
||||
component: Icons,
|
||||
path: '/icons',
|
||||
},
|
||||
{
|
||||
name: 'Grid',
|
||||
component: Grid,
|
||||
path: '/grid',
|
||||
}
|
||||
])
|
||||
export class Ui {
|
||||
|
|
|
|||
|
|
@ -32,6 +32,10 @@ export class SidebarService {
|
|||
title: 'Icons',
|
||||
name: 'Icons',
|
||||
},
|
||||
{
|
||||
title: 'Grid',
|
||||
name: 'Grid',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue