Fakultas Ilmu Komputer UI

Skip to content
Snippets Groups Projects
Commit b70f33be authored by RAFLI HIDAYAT's avatar RAFLI HIDAYAT
Browse files

adding button page

parent a46180ca
No related branches found
No related tags found
No related merge requests found
Showing
with 267 additions and 16 deletions
......@@ -2,8 +2,9 @@ import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { DashComponent } from './dash/dash.component';
import { ButtonsComponent } from './buttons/buttons.component';
const routes: Routes = [{ path: 'About Doku Design', component: DashComponent }]
const routes: Routes = [{ path: 'About Doku Design', component: DashComponent },{ path: 'Button', component: ButtonsComponent }]
@NgModule({
imports: [RouterModule.forRoot(routes)],
......
......@@ -17,13 +17,15 @@ import { MatGridListModule } from '@angular/material/grid-list';
import { MatCardModule } from '@angular/material/card';
import { MatMenuModule } from '@angular/material/menu';
import { CardComponent } from './card/card.component';
import { ButtonsComponent } from './buttons/buttons.component';
@NgModule({
declarations: [
AppComponent,
NavComponent,
DashComponent,
CardComponent
CardComponent,
ButtonsComponent
],
imports: [
ChartsModule,
......
.grid-container {
margin: 0px;
}
.dashboard-card {
position: absolute;
top: 15px;
bottom: 15px;
}
.more-button {
position: absolute;
top: 5px;
right: 10px;
}
img {
border-radius: 4px;
width: 100%;
}
.dashboard-card-content {
text-align: right;
}
.card-content {
display: flex;
flex-direction: column !important;
width: 100%;
margin-left: 10%;
padding-right: 10%;
}
.card-content1 {
display: flex;
flex-direction: column !important;
width: 100%;
margin-left: 3%;
padding-right: 35%;
}
.card-content2 {
display: flex;
flex-direction: column !important;
width: 100%;
text-align: left;
}
* {
box-sizing: border-box;
font-family: "D-DIN";
}
/* Create three equal columns that floats next to each other */
.column {
float: left;
width: 33.33%;
padding-right: 40px;
font-size: 14px;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* Responsive layout - makes the three columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
.column {
width: 100%;
}
.card-content1 {
padding-right: 0%;
font-size: 12px;
padding-right: 15%;
}
}
.headercondition {
height: 100%;
width: 100%;
}
\ No newline at end of file
<mat-grid-list cols="2" rowHeight="300px">
<mat-grid-tile colspan="2" rowspan="1" style ="background: white;">
<div class="card-content">
<h1>Button Component</h1>
<div>
Buttons allow users to perform an action or to navigate to another page. They have multiple styles for various needs, and are ideal for calling attention to where a user needs to do something in order to move forward in a flow
</div>
<br>
<section>
<button mat-raised-button color="primary">Design</button>
<button mat-button color="primary">Code</button>
</section>
</div>
</mat-grid-tile>
</mat-grid-list>
<mat-grid-list cols="2" rowHeight="1200px">
<mat-grid-tile colspan="2" rowspan="1" >
<app-card>
<mat-grid-list cols="3" rowHeight="1100px">
<div class="card-content1">
<img src="/assets/images/buttondetails.png" style="width: 30%;"/>
<h3>When to use</h3>
<div>
Use the buttons to communicate actions users can take and allow users to interact
with the page. Each page should have one primarry button, and any remaining calls
to action should be represented as lower emphasis buttons.
</div>
</div>
<div class="card-content1">
<h3>When not to use</h3>
<div>
Do not use buttons as navigational elements. Instead, use links when the desired
action is to take the user to a new page.
</div>
</div>
<div class="card-content1">
<h3>Button Variations</h3>
<div>
<div class="card-content2">
<mat-grid-list cols="2" rowHeight="4:1">
<mat-grid-tile>Type </mat-grid-tile>
<mat-grid-tile>Description</mat-grid-tile>
</mat-grid-list>
</div>
<div class="card-content2">
<mat-grid-list cols="2" rowHeight="4:1">
<mat-grid-tile><img src="/assets/images/buttonprimary.png" style="width: 30%;"/></mat-grid-tile>
<mat-grid-tile>
To call attention to an action on a form, or highlight the strongest call to action on a page.
There should be only one Primary Button on a page at a time (except for in modal dialog or CMS Page)
</mat-grid-tile>
</mat-grid-list>
</div>
<div class="card-content2">
<mat-grid-list cols="2" rowHeight="4:1">
<mat-grid-tile><img src="/assets/images/buttondefault.png" style="width: 30%;"/> </mat-grid-tile>
<mat-grid-tile>
Default button, use for most cases. Used when there are multiple actions.
</mat-grid-tile>
</mat-grid-list>
</div>
<div class="card-content2">
<mat-grid-list cols="2" rowHeight="4:1">
<mat-grid-tile><img src="/assets/images/buttonsecondary.png" style="width: 30%;"/></mat-grid-tile>
<mat-grid-tile>
For secondary action on each page, these can only be used in conjunction with a primary button.
</mat-grid-tile>
</mat-grid-list>
</div>
<div class="card-content2">
<mat-grid-list cols="2" rowHeight="4:1">
<mat-grid-tile><img src="/assets/images/buttonborderless.png" style="width: 30%;"/> </mat-grid-tile>
<mat-grid-tile>
Use borderless button if the button is within a table. For the rest, use button with border, and apply popover to the button.
</mat-grid-tile>
</mat-grid-list>
</div>
</div>
</div>
<div class="card-content1">
<h3>Alignment</h3>
<div>
Alignment refers to whether the buttons are aligned to the right or the left of a window, container, or layout.
Buttons are unique, more so than any other component, in that their alignment depends on whre they appear and
whether or not they're contained within another component.
</div>
<br>
<div>
The general rule, when the window is large and the user need to scroll to read, the primary button is the left
side. It is best because it's follow the users focus on read, from the left to right.
</div>
<br>
<div>
But when the butonn is a dialog, notification, form field, data tables, the primary button is right-aligned.
</div>
</div>
<div class="card-content1">
<h3>Guidance</h3>
<div>
Buttons should indicate an action. Button labels express what action will occur when the user interacts with it.
They should be discoverable, easy to identify, and specific.
Primary button always appear to the right and secondary appear to the left of primary button. Always have a text
label within the button container. Icons are optional. Make Buttons look and feel clickable
If using multiple Buttons, style and label them distinctly
</div>
</div>
</mat-grid-list>
</app-card>
</mat-grid-tile>
<mat-grid-tile colspan="2" rowspan="1" >
<app-card>
<mat-grid-list cols="3" rowHeight="225px">
<div class="card-content1">
<h3>Related</h3>
<div>
<button mat-button color="primary">Action Labels</button>
</div>
<div>
<button mat-button color="primary">Popover Component</button>
</div>
<div>
<button mat-button color="primary">Form Field</button>
</div>
<div>
<button mat-button color="primary">Modal Component</button>
</div>
</div>
</mat-grid-list>
</app-card>
</mat-grid-tile>
<!-- <mat-grid-tile colspan="2" rowspan="1" style ="background: lightblue;">3</mat-grid-tile> -->
<!-- <mat-grid-tile colspan="2" rowspan="1" style ="background: lightblue;">4</mat-grid-tile> -->
</mat-grid-list>
\ No newline at end of file
import { ComponentFixture, TestBed } from '@angular/core/testing';
import { ButtonsComponent } from './buttons.component';
describe('ButtonsComponent', () => {
let component: ButtonsComponent;
let fixture: ComponentFixture<ButtonsComponent>;
beforeEach(async () => {
await TestBed.configureTestingModule({
declarations: [ ButtonsComponent ]
})
.compileComponents();
});
beforeEach(() => {
fixture = TestBed.createComponent(ButtonsComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('should create', () => {
expect(component).toBeTruthy();
});
});
import { Component, OnInit } from '@angular/core';
@Component({
selector: 'app-buttons',
templateUrl: './buttons.component.html',
styleUrls: ['./buttons.component.css']
})
export class ButtonsComponent implements OnInit {
constructor() { }
ngOnInit(): void {
}
}
<mat-card class="dashboard-card">
<!-- <mat-card-header> -->
<!-- <mat-card-title> -->
<!-- {{title}} -->
<!-- <button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
<mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu" xPosition="before">
<button mat-menu-item>Expand</button>
<button mat-menu-item>Remove</button>
</mat-menu> -->
<!-- </mat-card-title> -->
<!-- </mat-card-header> -->
<mat-card-content class="dashboard-card-content">
<ng-content></ng-content>
</mat-card-content>
......
......@@ -9,8 +9,8 @@
<a *ngFor="let item of gettingStarted" mat-list-item [routerLink]="'/'+item"> {{item | titlecase}} </a>
<h3 matSubheader>FOUNDATION</h3>
<a *ngFor="let item of foundation" mat-list-item [routerLink]="'/'+item"> {{item | titlecase}} </a>
<!-- <h3 matSubheader>GETTING STARTED</h3>
<a *ngFor="let item of components" mat-list-item [routerLink]="'/'+item"> {{item | titlecase}} </a> -->
<h3 matSubheader>COMPONENTS</h3>
<a *ngFor="let item of components" mat-list-item [routerLink]="'/'+item"> {{item | titlecase}} </a>
</mat-nav-list>
</mat-sidenav>
<mat-sidenav-content>
......
......@@ -11,6 +11,7 @@ import { map, shareReplay } from 'rxjs/operators';
export class NavComponent {
gettingStarted = ['About Doku Design', 'Design', 'Develop'];
foundation = ['Color', 'Iconography', 'Typography', 'Grid'];
components = ['Button', 'Forms', 'Toasts', 'Dropdown'];
isHandset$: Observable<boolean> = this.breakpointObserver.observe(Breakpoints.Handset)
.pipe(
map(result => result.matches),
......
src/assets/images/Button.png

1023 B

src/assets/images/buttonborderless.png

3.58 KiB

src/assets/images/buttondefault.png

3.49 KiB

src/assets/images/buttondetails.png

54 KiB

src/assets/images/buttonprimary.png

1023 B

src/assets/images/buttonsecondary.png

1.08 KiB

src/assets/images/fast.png

7.57 KiB | W: | H:

src/assets/images/fast.png

12.2 KiB | W: | H:

src/assets/images/fast.png
src/assets/images/fast.png
src/assets/images/fast.png
src/assets/images/fast.png
  • 2-up
  • Swipe
  • Onion skin
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment