4.0.0 • Published 3 years ago

@terminus/ui-card v4.0.0

Weekly downloads
22
License
MIT
Repository
github
Last release
3 years ago

CI/CD Status Codecov MIT License
NPM version Library size

Table of Contents

Installation

Use the ng add command to quickly install all the needed dependencies:

ng add @terminus/ui-card

CSS imports

In your top level stylesheet, add these imports:

@import '~@terminus/design-tokens/css/library-design-tokens.css';
@import '~@terminus/ui-styles/terminus-ui.css';

CSS resources

Load the needed font families by adding this link to the <head> of your application:

<link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;0,700;1,400&display=swap" rel="stylesheet">

Usage

Wrap the card component around your content:

<ts-card>Here is my content!</ts-card>

Interactivity

To make the card feel interactive, pass true to the supportsInteraction input.

<ts-card [supportsInteraction]="true">
  Now my card responds to hover and click!
</ts-card>

Centered content

To center the content, pass true to the centeredContent input.

<ts-card [centeredContent]="true">
  Now my content is centered!
</ts-card>

Aspect ratio

Pass your desired aspect ratio in the format 3:4 to the aspectRatio input.

<ts-card [aspectRatio]="16:9">
  Here is a card with a fixed aspect ratio!
</ts-card>
  • Type: TsAspectRatioTypes.
  • Allowed ratios: 16:9, 4:3, 3:2, 5:4, 1:1,

Utility menu

To include a utility menu, pass a template which includes the menu trigger and the menu contents.

<!-- This template name should point to the ng-template -->
<ts-card [utilityMenuTemplate]="myTemplate">
  Here is a card with a utility menu!
</ts-card>

<ng-template #myTemplate>
  <!-- Include the trigger to open/close the menu -->
  <!-- Reference the ng-template for the menu content in `menuItemsTemplate` -->
  <ts-menu
    triggerType="utility"
    menuPositionX="before"
    [menuItemsTemplate]="utilityButtons"
  ></ts-menu>


  <!-- This template includes all items that should appear in the menu -->
  <ng-template #utilityButtons>
    <ts-link [destination]="['foo/', 'bar/']">
      My link
    </ts-link>
  </ng-template>
</ng-template>

Card with a Title

Attach the tsCardTitle directive to your title element. This directive simply adds a class to the element which provides the needed styles.

<ts-card>
  <h3 tsCardTitle>My Title</h3>
</ts-card>

Disabled Card

This will push the opacity of the card contents back and add a lock icon in the top right corner.

<ts-card [isDisabled]="true">
  My card
</ts-card>
tslib@angular-devkit/schematics@schematics/angular
@zalastax/nolb-_ter@infinitebrahmanuniverse/nolb-_ter@everything-registry/sub-chunk-905
4.0.0

3 years ago

3.0.5

3 years ago

3.0.4

3 years ago

3.0.3

3 years ago

3.0.2

4 years ago

3.0.1

4 years ago

3.0.0

4 years ago

2.1.2

4 years ago

2.1.1

4 years ago

2.1.0

4 years ago

2.0.14

4 years ago

2.0.13

4 years ago

2.0.12

4 years ago

2.0.11

4 years ago

2.0.10

4 years ago

2.0.9

4 years ago

2.0.8

4 years ago

2.0.5

4 years ago

2.0.7

4 years ago

2.0.6

4 years ago

2.0.4

4 years ago

2.0.3

4 years ago

2.0.2

4 years ago

2.0.1

4 years ago

2.0.0

4 years ago

1.0.13

4 years ago

1.0.12

4 years ago

1.0.11

4 years ago

1.0.10

4 years ago

1.0.9

4 years ago

1.0.8

4 years ago

1.0.6

4 years ago

1.0.5

4 years ago

1.0.2

4 years ago

1.0.3

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

0.0.1

4 years ago