Skip to content

Commit 619ff3c

Browse files
bennadelbennadel
committed
Add link vs button style demo in Angular 7.2.15.
1 parent 586f884 commit 619ff3c

24 files changed

+7532
-0
lines changed

‎README.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ with.
1010

1111
## My JavaScript Demos - I Love JavaScript!
1212

13+
* [Accessibility And Styled Anchor Links vs. Styled Buttons In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/link-vs-button-accessibility-angular7/)
1314
* [Giving (click) Anchor Links Tab-Access Using A Directive In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/tabbable-anchor-angular7/)
1415
* [Pasting Images Into Your App Using File Blobs And URL.createObjectURL() In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/pasting-images-angular7/)
1516
* [Creating An Inline Auto-Complete Directive Using NgModel And A Control Value Accessor In Angular 7.2.15](https://bennadel.github.io/JavaScript-Demos/demos/inline-auto-complete-input-angular7/)

‎demos/link-vs-button-accessibility-angular7/.gitignore‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
# Now that we're using Webpack, we can install modules locally and just ignore
3+
# them since the assets are baked into the compiled modules.
4+
node_modules/

‎demos/link-vs-button-accessibility-angular7/app/app.component.htm‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<p>
2+
<a href="#">Native Href link</a> (experiment control)
3+
</p>
4+
5+
<p>
6+
Styled <code>&lt;A&gt;</code> elements:
7+
</p>
8+
9+
<div class="actions">
10+
<a (click)="logClick( 'Download item one' )">
11+
<svg aria-hidden="true">
12+
<use xlink:href="#sprite-button-icon" />
13+
</svg>
14+
Download One
15+
</a>
16+
<a (click)="logClick( 'Download item two' )">
17+
<svg aria-hidden="true">
18+
<use xlink:href="#sprite-button-icon" />
19+
</svg>
20+
Download Two
21+
</a>
22+
<a (click)="logClick( 'Download item three' )">
23+
<svg aria-hidden="true">
24+
<use xlink:href="#sprite-button-icon" />
25+
</svg>
26+
Download Three
27+
</a>
28+
</div>
29+
30+
<p>
31+
Styled <code>&lt;BUTTON&gt;</code> elements:
32+
</p>
33+
34+
<div class="actions">
35+
<button (click)="logClick( 'Download item one' )">
36+
<svg aria-hidden="true">
37+
<use xlink:href="#sprite-button-icon" />
38+
</svg>
39+
Download One
40+
</button>
41+
<button (click)="logClick( 'Download item two' )">
42+
<svg aria-hidden="true">
43+
<use xlink:href="#sprite-button-icon" />
44+
</svg>
45+
Download Two
46+
</button>
47+
<button (click)="logClick( 'Download item three' )">
48+
<svg aria-hidden="true">
49+
<use xlink:href="#sprite-button-icon" />
50+
</svg>
51+
Download Three
52+
</button>
53+
</div>
54+
55+
<!--
56+
NOTE: Usually, the SVG spite is placed high in the document. However, for this demo,
57+
I am placing it low down just to get it out of the way. It still seems to function
58+
as you would hope.
59+
-->
60+
<svg style="display: none ;">
61+
<symbol id="sprite-button-icon" viewBox="0 0 24 16" aria-labelledby="sprite-button-icon-label">
62+
<title id="sprite-button-icon-label">
63+
Download Icon
64+
</title>
65+
<path d="M19.4,6 C18.7,2.6 15.7,0 12,0 C9.1,0 6.6,1.6 5.4,4 C2.3,4.4 0,6.9 0,10 C0,13.3 2.7,16 6,16 L19,16 C21.8,16 24,13.8 24,11 C24,8.4 21.9,6.2 19.4,6 L19.4,6 Z M17,9 L12,14 L7,9 L10,9 L10,5 L14,5 L14,9 L17,9 L17,9 Z" />
66+
</symbol>
67+
</svg>

‎demos/link-vs-button-accessibility-angular7/app/app.component.less‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
2+
:host {
3+
display: block ;
4+
font-size: 18px ;
5+
}
6+
7+
.actions {
8+
display: flex ;
9+
font-family: monospace ;
10+
margin: 20px 0px 30px 0px ;
11+
12+
a,
13+
button {
14+
align-items: center ;
15+
background-color: #f0f0f0 ;
16+
border: 1px solid #e0e0e0 ;
17+
border-radius: 5px 5px 5px 5px ;
18+
color: #ff3366 ;
19+
cursor: pointer ;
20+
display: flex ;
21+
font-family: inherit ; // Needed for Button.
22+
font-size: inherit ; // Needed for Button.
23+
margin-right: 10px ;
24+
padding: 10px 15px 10px 12px ;
25+
26+
// Only CHROME seems to show a nice beefy outline by default; as such, in order
27+
// to get the focus styling more consistent, I am going to override the outline
28+
// and then use a box-shadow. This works the same in the major desktop browsers.
29+
&:focus,
30+
&:active {
31+
outline: none ;
32+
box-shadow: 0px 0px 2px 4px #ff3366 ;
33+
}
34+
}
35+
36+
svg {
37+
fill: #ff3366 ;
38+
height: 16px ;
39+
margin-right: 13px ;
40+
width: 24px ;
41+
}
42+
}

‎demos/link-vs-button-accessibility-angular7/app/app.component.ts‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
2+
// Import the core angular services.
3+
import { Component } from "@angular/core";
4+
5+
// ----------------------------------------------------------------------------------- //
6+
// ----------------------------------------------------------------------------------- //
7+
8+
@Component({
9+
selector: "my-app",
10+
styleUrls: [ "./app.component.less" ],
11+
templateUrl: "./app.component.htm"
12+
})
13+
export class AppComponent {
14+
15+
// I log the click event for the anchors and buttons.
16+
public logClick( value: string ) : void {
17+
18+
console.group( "Clicked Element" );
19+
console.log( value );
20+
console.groupEnd();
21+
22+
}
23+
24+
}

‎demos/link-vs-button-accessibility-angular7/app/app.module.ts‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
2+
// Import the core angular services.
3+
import { BrowserModule } from "@angular/platform-browser";
4+
import { NgModule } from "@angular/core";
5+
6+
// Import the application components and services.
7+
import { AppComponent } from "./app.component";
8+
9+
// ----------------------------------------------------------------------------------- //
10+
// ----------------------------------------------------------------------------------- //
11+
12+
@NgModule({
13+
imports: [
14+
BrowserModule
15+
],
16+
declarations: [
17+
AppComponent
18+
],
19+
bootstrap: [
20+
AppComponent
21+
]
22+
})
23+
export class AppModule {
24+
// ...
25+
}

‎demos/link-vs-button-accessibility-angular7/app/main.htm‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
6+
<title>
7+
Accessibility And Styled Anchor Links vs. Styled Buttons In Angular 7.2.15
8+
</title>
9+
</head>
10+
<body>
11+
12+
<h1>
13+
Accessibility And Styled Anchor Links vs. Styled Buttons In Angular 7.2.15
14+
</h1>
15+
16+
<my-app>
17+
<p>
18+
<em>Loading files...</em>
19+
</p>
20+
21+
<p>
22+
npm Run Scripts:
23+
</p>
24+
25+
<ul>
26+
<li>
27+
<strong>npm run build</strong> &mdash; Compiles the .ts file into bundles.
28+
</li>
29+
<li>
30+
<strong>npm run watch</strong> &mdash; Compiles the .ts file into bundles and then watches files for changes.
31+
</li>
32+
</ul>
33+
</my-app>
34+
35+
</body>
36+
</html>

‎demos/link-vs-button-accessibility-angular7/app/main.polyfill.ts‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
2+
// Import these libraries for their side-effects.
3+
import "core-js/es";
4+
import "zone.js/dist/zone.js";

‎demos/link-vs-button-accessibility-angular7/app/main.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
2+
// Import the core angular services.
3+
import { enableProdMode } from "@angular/core";
4+
import { platformBrowserDynamic } from "@angular/platform-browser-dynamic";
5+
6+
// Import the root module for bootstrapping.
7+
import { AppModule } from "./app.module";
8+
9+
// ----------------------------------------------------------------------------------- //
10+
// ----------------------------------------------------------------------------------- //
11+
12+
// NOTE: This ENV value is being provided by Webpack's DefinePlugin. It is populated
13+
// on the mode in which the webpack-cli was invoked.
14+
if ( process.env.NODE_ENV === "production" ) {
15+
16+
enableProdMode();
17+
18+
}
19+
20+
platformBrowserDynamic().bootstrapModule( AppModule );

‎demos/link-vs-button-accessibility-angular7/build/main.9e4cea93973eddd8531d.js‎

Lines changed: 2 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)