quentin_duwa/qd-design
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

added icon button component

Browse Source
This commit is contained in:
MastersGame
2026-02-21 10:17:16 +01:00
parent b23aaf4197
commit 42ddcfe403
16 changed files with 1061 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

13
projects/qd-design-demo/src/app/app.html
View File

@@ -14,6 +14,19 @@
<qd-button variant="text" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()"></qd-button>
<qd-button variant="text" [text]="'Play'" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-button>
</div>
<div class="horizontal">
<qd-icon-button variant="filled" [iconName]="'play_arrow'" (click)="onClick()" tooltip="tooltip"></qd-icon-button>
<qd-icon-button variant="filled" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
<qd-icon-button variant="filled-tonal" [iconName]="'play_arrow'" (click)="onClick()"></qd-icon-button>
<qd-icon-button variant="filled-tonal" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
<qd-icon-button variant="outlined" [iconName]="'play_arrow'" (click)="onClick()"></qd-icon-button>
<qd-icon-button variant="outlined" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
<qd-icon-button variant="text" [iconName]="'play_arrow'" (click)="onClick()"></qd-icon-button>
<qd-icon-button variant="text" [iconName]="'play_arrow'" (click)="onClick()" [disabled]="true"></qd-icon-button>
</div>
<div class="horizontal">
<qd-card clickable tooltip="tooltip" style="width: 300px" (click)="onClick()">
<figure image class="image-wrapper">

6
projects/qd-design-demo/src/app/app.ts
View File

@@ -1,19 +1,19 @@
import { Component, signal } from '@angular/core';
import {QdButton} from '../../../qd-design/src/lib/qd-button/qd-button';
import {QdButtonType} from '../../../qd-design/src/enums/qd-button-type.enum';
import {QdIconButton} from '../../../qd-design/src/lib/qd-icon-button/qd-icon-button';
import {QdCard} from '../../../qd-design/src/lib/qd-card/qd-card';
import {NgOptimizedImage} from '@angular/common';
import {QdTooltipDirective} from '../../../qd-design/src/directives/qd-tooltip-directive';
@Component({
selector: 'app-root',
imports: [QdButton, QdCard, NgOptimizedImage, QdTooltipDirective],
imports: [QdButton, QdIconButton, QdCard, NgOptimizedImage, QdTooltipDirective],
templateUrl: './app.html',
standalone: true,
styleUrl: './app.scss'
})
export class App {
protected readonly title = signal('qd-design-demo');
protected readonly QdButtonType = QdButtonType;
public onClick() {
console.log('clicked');