Anchor-x/AngularDemo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

format code

Browse Source
This commit is contained in:
myh 2023-12-26 20:32:01 +08:00
parent 0f43786e79
commit 0fda619b43
8 changed files with 40 additions and 37 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

0
editorconfig → .editorconfig
View File

2
src/app/app.config.ts
View File

@ -2,7 +2,7 @@ import {ApplicationConfig} from '@angular/core';
import {provideRouter} from '@angular/router'; import {provideRouter} from '@angular/router';
import {routes} from './app.routes'; import {routes} from './app.routes';
import { provideAnimations } from '@angular/platform-browser/animations'; import {provideAnimations} from '@angular/platform-browser/animations';
export const appConfig: ApplicationConfig = { export const appConfig: ApplicationConfig = {
providers: [provideRouter(routes), provideAnimations()] providers: [provideRouter(routes), provideAnimations()]

4
src/app/app.routes.ts
View File

@ -1,5 +1,3 @@
import {Routes} from '@angular/router'; import {Routes} from '@angular/router';
export const routes: Routes = [ export const routes: Routes = [];
];

34
src/app/body/body.component.scss
View File

@ -3,28 +3,28 @@
@tailwind components; @tailwind components;
.li-img li { .li-img li {
list-style: none; list-style: none;
float: left; float: left;
width: 25%; /*四列图片排列*/ width: 25%; /*四列图片排列*/
height: 175px; height: 175px;
overflow: hidden; overflow: hidden;
} }
.li-img li img { .li-img li img {
position: relative; position: relative;
width: 100%; width: 100%;
height: auto; height: auto;
top: 50%; /*li高度的一半*/ top: 50%; /*li高度的一半*/
transform: translateY(-50%); /*再向上移动自身的50%*/ transform: translateY(-50%); /*再向上移动自身的50%*/
} }
/*清除浮动*/ /*清除浮动*/
.clearfix:after { .clearfix:after {
position: relative; position: relative;
content: ''; content: '';
display: block; display: block;
width: 0; width: 0;
height: 0; height: 0;
visibility: hidden; visibility: hidden;
clear: both; clear: both;
} }

2
src/app/carousel-pause/carousel-pause.component.html
View File

@ -5,7 +5,7 @@
[pauseOnFocus]="pauseOnFocus" [pauseOnFocus]="pauseOnFocus"
(slide)="onSlide($event)" (slide)="onSlide($event)"
> >
@for (img of images;track img;let i = $index) { @for (img of images; track img; let i = $index) {
<ng-template ngbSlide> <ng-template ngbSlide>
<div class="carousel-caption"> <div class="carousel-caption">
<h3>My slide {{ i + 1 }} title</h3> <h3>My slide {{ i + 1 }} title</h3>

2
src/index.html
View File

@ -10,6 +10,6 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head> </head>
<body class="mat-typography"> <body class="mat-typography">
<app-root></app-root> <app-root></app-root>
</body> </body>
</html> </html>

21
src/styles.scss
View File

@ -1,4 +1,3 @@
// Custom Theming for Angular Material // Custom Theming for Angular Material
// For more information: https://material.angular.io/guide/theming // For more information: https://material.angular.io/guide/theming
@use '@angular/material' as mat; @use '@angular/material' as mat;
@ -21,11 +20,11 @@ $AngularDemo-warn: mat.define-palette(mat.$red-palette);
// Create the theme object. A theme consists of configurations for individual // Create the theme object. A theme consists of configurations for individual
// theming systems such as "color" or "typography". // theming systems such as "color" or "typography".
$AngularDemo-theme: mat.define-light-theme(( $AngularDemo-theme: mat.define-light-theme((
color: ( color: (
primary: $AngularDemo-primary, primary: $AngularDemo-primary,
accent: $AngularDemo-accent, accent: $AngularDemo-accent,
warn: $AngularDemo-warn, warn: $AngularDemo-warn,
) )
)); ));
// Include theme styles for core and each component used in your app. // Include theme styles for core and each component used in your app.
@ -38,8 +37,14 @@ $AngularDemo-theme: mat.define-light-theme((
@tailwind components; @tailwind components;
@tailwind utilities; @tailwind utilities;
html, body { height: 100%; } html, body {
body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; } height: 100%;
}
body {
margin: 0;
font-family: Roboto, "Helvetica Neue", sans-serif;
}
/* Importing Bootstrap SCSS file. */ /* Importing Bootstrap SCSS file. */
@import 'bootstrap/scss/bootstrap'; @import 'bootstrap/scss/bootstrap';