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/about/index';
|
||||||
|
export * from './lib/button/button.component';
|
||||||
export * from './lib/viewer/index';
|
export * from './lib/viewer/index';
|
||||||
export * from './lib/toolbar/index';
|
export * from './lib/toolbar/index';
|
||||||
export * from './lib/pagination/index';
|
export * from './lib/pagination/index';
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user