mirror of
https://github.com/Alfresco/alfresco-ng2-components.git
synced 2025-05-26 17:24:56 +00:00
ACS-8109: generic button component (#9854)
This commit is contained in:
Denys Vuika
GitHub
parent
6cd2e572d8
commit
3cc571ee32
120
lib/core/src/lib/button/button.component.html
Normal file
120
lib/core/src/lib/button/button.component.html
Normal file
@ -0,0 +1,120 @@
|
||||
<ng-container [ngSwitch]="variant">
|
||||
<ng-container *ngSwitchDefault>
|
||||
<button
|
||||
mat-button
|
||||
[id]="uid"
|
||||
[title]="tooltip"
|
||||
[color]="color"
|
||||
[disabled]="disabled"
|
||||
[disableRipple]="disableRipple"
|
||||
[attr.aria-label]="ariaLabel"
|
||||
[attr.aria-hidden]="ariaHidden"
|
||||
[attr.data-automation-id]="testId"
|
||||
>
|
||||
<ng-container [ngTemplateOutlet]="buttonContent"></ng-container>
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'raised'">
|
||||
<button
|
||||
mat-raised-button
|
||||
[id]="uid"
|
||||
[title]="tooltip"
|
||||
[color]="color"
|
||||
[disabled]="disabled"
|
||||
[disableRipple]="disableRipple"
|
||||
[attr.aria-label]="ariaLabel"
|
||||
[attr.aria-hidden]="ariaHidden"
|
||||
[attr.data-automation-id]="testId"
|
||||
>
|
||||
<ng-container [ngTemplateOutlet]="buttonContent"></ng-container>
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'stroked'">
|
||||
<button
|
||||
mat-stroked-button
|
||||
[id]="uid"
|
||||
[title]="tooltip"
|
||||
[color]="color"
|
||||
[disabled]="disabled"
|
||||
[disableRipple]="disableRipple"
|
||||
[attr.aria-label]="ariaLabel"
|
||||
[attr.aria-hidden]="ariaHidden"
|
||||
[attr.data-automation-id]="testId"
|
||||
>
|
||||
<ng-container [ngTemplateOutlet]="buttonContent"></ng-container>
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'flat'">
|
||||
<button
|
||||
mat-flat-button
|
||||
[id]="uid"
|
||||
[title]="tooltip"
|
||||
[color]="color"
|
||||
[disabled]="disabled"
|
||||
[disableRipple]="disableRipple"
|
||||
[attr.aria-label]="ariaLabel"
|
||||
[attr.aria-hidden]="ariaHidden"
|
||||
[attr.data-automation-id]="testId"
|
||||
>
|
||||
<ng-container [ngTemplateOutlet]="buttonContent"></ng-container>
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'icon'">
|
||||
<button
|
||||
mat-icon-button
|
||||
[id]="uid"
|
||||
[title]="tooltip"
|
||||
[color]="color"
|
||||
[disabled]="disabled"
|
||||
[disableRipple]="disableRipple"
|
||||
[attr.aria-label]="ariaLabel"
|
||||
[attr.aria-hidden]="ariaHidden"
|
||||
[attr.data-automation-id]="testId"
|
||||
>
|
||||
<mat-icon *ngIf="icon">{{ icon }}</mat-icon>
|
||||
<ng-container *ngIf="!icon" [ngTemplateOutlet]="buttonContent"></ng-container>
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'fab'">
|
||||
<button
|
||||
mat-fab
|
||||
[id]="uid"
|
||||
[title]="tooltip"
|
||||
[color]="color"
|
||||
[disabled]="disabled"
|
||||
[disableRipple]="disableRipple"
|
||||
[attr.aria-label]="ariaLabel"
|
||||
[attr.aria-hidden]="ariaHidden"
|
||||
[attr.data-automation-id]="testId"
|
||||
>
|
||||
<mat-icon *ngIf="icon">{{ icon }}</mat-icon>
|
||||
<ng-container *ngIf="!icon" [ngTemplateOutlet]="buttonContent"></ng-container>
|
||||
</button>
|
||||
</ng-container>
|
||||
|
||||
<ng-container *ngSwitchCase="'mini-fab'">
|
||||
<button
|
||||
mat-mini-fab
|
||||
[id]="uid"
|
||||
[title]="tooltip"
|
||||
[color]="color"
|
||||
[disabled]="disabled"
|
||||
[disableRipple]="disableRipple"
|
||||
[attr.aria-label]="ariaLabel"
|
||||
[attr.aria-hidden]="ariaHidden"
|
||||
[attr.data-automation-id]="testId"
|
||||
>
|
||||
<mat-icon *ngIf="icon">{{ icon }}</mat-icon>
|
||||
<ng-container *ngIf="!icon" [ngTemplateOutlet]="buttonContent"></ng-container>
|
||||
</button>
|
||||
</ng-container>
|
||||
</ng-container>
|
||||
|
||||
<ng-template #buttonContent>
|
||||
<ng-content></ng-content>
|
||||
</ng-template>
|
||||
82
lib/core/src/lib/button/button.component.md
Normal file
82
lib/core/src/lib/button/button.component.md
Normal file
@ -0,0 +1,82 @@
|
||||
# Button Component
|
||||
|
||||
`standalone`, `component`
|
||||
|
||||
The Button component is a simple button that can be used to trigger actions.
|
||||
|
||||
## Usage
|
||||
|
||||
```html
|
||||
<adf-button>Click me!</adf-button>
|
||||
```
|
||||
|
||||
### Variant
|
||||
|
||||
The button supports the following variants:
|
||||
|
||||
- basic
|
||||
- raised
|
||||
- stroked
|
||||
- flat
|
||||
- icon
|
||||
- fab
|
||||
- mini-fab
|
||||
|
||||
```html
|
||||
<adf-button variant="basic">Basic</adf-button>
|
||||
<adf-button variant="raised">Raised</adf-button>
|
||||
<adf-button variant="stroked">Stroked</adf-button>
|
||||
<adf-button variant="flat">Flat</adf-button>
|
||||
<adf-button variant="icon" icon="home">Icon</adf-button>
|
||||
<adf-button variant="icon"><mat-icon>more_vert</mat-icon></adf-button>
|
||||
<adf-button variant="fab" icon="plus_one">Fab</adf-button>
|
||||
<adf-button variant="mini-fab" icon="menu">Mini Fab</adf-button>
|
||||
```
|
||||
|
||||
### Color
|
||||
|
||||
The button supports the following colors:
|
||||
|
||||
- primary
|
||||
- accent
|
||||
- warn
|
||||
|
||||
```html
|
||||
<adf-button color="primary">Primary</adf-button>
|
||||
<adf-button color="accent">Accent</adf-button>
|
||||
<adf-button color="warn">Warn</adf-button>
|
||||
```
|
||||
|
||||
## API
|
||||
|
||||
Import the following standalone components:
|
||||
|
||||
```typescript
|
||||
import { ButtonComponent } from '@alfresco/adf-core';
|
||||
```
|
||||
|
||||
## Properties
|
||||
|
||||
| Name | Type | Default | Description |
|
||||
|-----------------|---------|---------|----------------------------------------------------------------------------------------------------------|
|
||||
| `uid` | string | | The button id. |
|
||||
| `variant` | string | `basic` | The button variant. Possible values are `basic`, `raised`, `stroked`, `flat`, `icon`, `fab`, `mini-fab`. |
|
||||
| `tooltip` | string | | The button tooltip. |
|
||||
| `color` | string | | The button color. Possible values are `primary`, `accent`, `warn`. |
|
||||
| `icon` | string | | The button icon. |
|
||||
| `disableRipple` | boolean | `false` | Whether the ripple effect should be disabled. |
|
||||
| `disabled` | boolean | `false` | Whether the button should be disabled. |
|
||||
| `testId` | string | | The button test id (uses `data-automation-id` attribute). |
|
||||
|
||||
### Accessibility
|
||||
|
||||
The button component has been designed to be accessible. The following attributes are available:
|
||||
|
||||
- `ariaLabel`: The button aria label.
|
||||
- `ariaHidden`: Whether the button should be hidden from the accessibility tree.
|
||||
|
||||
## Events
|
||||
|
||||
| Name | Description |
|
||||
|---------|-------------------------------------|
|
||||
| `click` | Emitted when the button is clicked. |
|
||||
3
lib/core/src/lib/button/button.component.scss
Normal file
3
lib/core/src/lib/button/button.component.scss
Normal file
@ -0,0 +1,3 @@
|
||||
adf-button {
|
||||
// custom styles
|
||||
}
|
||||
46
lib/core/src/lib/button/button.component.ts
Normal file
46
lib/core/src/lib/button/button.component.ts
Normal file
@ -0,0 +1,46 @@
|
||||
/*!
|
||||
* @license
|
||||
* Copyright © 2005-2024 Hyland Software, Inc. and its affiliates. All rights reserved.
|
||||
*
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
*
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
*
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { Component, Input, ViewEncapsulation } from '@angular/core';
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { MatButtonModule } from '@angular/material/button';
|
||||
import { ThemePalette } from '@angular/material/core';
|
||||
import { MatIconModule } from '@angular/material/icon';
|
||||
|
||||
export type ButtonVariant = 'basic' | 'raised' | 'stroked' | 'flat' | 'icon' | 'fab' | 'mini-fab' | undefined;
|
||||
export type ButtonColor = ThemePalette;
|
||||
|
||||
@Component({
|
||||
selector: 'adf-button',
|
||||
standalone: true,
|
||||
imports: [CommonModule, MatButtonModule, MatIconModule],
|
||||
templateUrl: './button.component.html',
|
||||
styleUrls: ['./button.component.scss'],
|
||||
encapsulation: ViewEncapsulation.None
|
||||
})
|
||||
export class ButtonComponent {
|
||||
@Input() uid?: string;
|
||||
@Input() variant: ButtonVariant;
|
||||
@Input() color?: ButtonColor;
|
||||
@Input() tooltip?: string;
|
||||
@Input() icon?: string;
|
||||
@Input() disableRipple: boolean;
|
||||
@Input() disabled: boolean;
|
||||
@Input() ariaLabel?: string;
|
||||
@Input() ariaHidden?: boolean;
|
||||
@Input() testId?: string;
|
||||
}
|
||||
@ -16,6 +16,7 @@
|
||||
*/
|
||||
|
||||
export * from './lib/about/index';
|
||||
export * from './lib/button/button.component';
|
||||
export * from './lib/viewer/index';
|
||||
export * from './lib/toolbar/index';
|
||||
export * from './lib/pagination/index';
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user