|
1 | | -# auro-tail-group |
| 1 | +# auro-tail |
2 | 2 |
|
3 | | -The auro-tail-group element displays multiple auro-tail elements in a grouped layout. |
| 3 | +The auro-tail element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Auro applications. |
4 | 4 |
|
5 | 5 | ### Properties & Attributes |
6 | 6 |
|
7 | | -| Properties | Attributes | Type | Default | Description | |
8 | | -| ----------- | ------------ | ---------------------------- | ------------ | ------------------------------------------------------------------------------------------ | |
9 | | -| borderColor | border-color | string \| undefined | undefined | Sets the border color for all child tails in the group. Does not apply to diagonal layout. | |
10 | | -| layout | layout | 'horizontal' \| 'diagonal' | 'horizontal' | Sets the layout direction for the group. | |
11 | | -| size | size | 'xs' \| 'sm' \| 'md' \| 'lg' | 'lg' | Sets the size for all child tails in the group. | |
| 7 | +| Properties | Attributes | Modifiers | Type | Default | Description | |
| 8 | +| ------------------- | ------------ | --------- | --------------------------------------------- | --------- | ----------------------------------------------------------------------------------- | |
| 9 | +| badge | badge | | string \| undefined | undefined | Sets the badge type to display (e.g., 'oneworld'). | |
| 10 | +| badgeConfig | | readonly | BadgeConfig \| undefined | | Returns badge config when eligible. | |
| 11 | +| borderColor | border-color | | string \| undefined | undefined | Sets the border color around the tail. | |
| 12 | +| borderWidth | border-width | | string \| undefined | undefined | Sets the border width around the tail. | |
| 13 | +| hasBorder | | readonly | boolean | | Checks if tail has border properties defined. | |
| 14 | +| href | href | | string \| undefined | undefined | Sets the href for the tail. | |
| 15 | +| isInDiagonalGroup | | readonly | boolean | | Checks if this tail is in a diagonal group layout. | |
| 16 | +| isInGroup | | readonly | boolean | | Checks if this tail is inside an auro-tail-group element. | |
| 17 | +| isInHorizontalGroup | | readonly | boolean | | Checks if this tail is in a horizontal group layout. | |
| 18 | +| labelTypeClass | | readonly | string | | Gets the appropriate CSS type class based on tail size. | |
| 19 | +| outline | outline | | boolean | false | Renders the tail with an outline style. | |
| 20 | +| shouldShowLink | | readonly | boolean | | Checks if the tail should display as a clickable link. | |
| 21 | +| size | size | | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' | 'lg' | Sets the size of the tail. | |
| 22 | +| tail | tail | | string | 'AS' | Sets the airline tail based on the tail codes used in auro-icon (e.g., AS, HA, PR). | |
| 23 | +| variant | | readonly | 'aag' \| 'oa' | | Gets the carrier variant based on the current tail code. | |
12 | 24 |
|
13 | 25 | ### Methods |
14 | 26 |
|
15 | 27 | | Name | Parameters | Return | Description | |
16 | 28 | | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- | |
17 | 29 | | register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. | |
18 | 30 |
|
19 | | ---- |
| 31 | +### Events |
20 | 32 |
|
21 | | -# auro-tail |
| 33 | +| Name | Description | |
| 34 | +| ---------- | ----------------------------------------- | |
| 35 | +| href-click | Fired when the auro-hyperlink is clicked. | |
22 | 36 |
|
23 | | -The auro-tail element displays Alaska, Hawaiian, and partner airline tail graphics for consistent visual representation across Auro applications. |
| 37 | +# auro-tail-group |
| 38 | + |
| 39 | +The auro-tail-group element displays multiple auro-tail elements in a grouped layout. |
24 | 40 |
|
25 | 41 | ### Properties & Attributes |
26 | 42 |
|
27 | | -| Properties | Attributes | Type | Default | Description | |
28 | | -| ------------------- | ------------ | --------------------------------------------- | --------- | ----------------------------------------------------------------------------------- | |
29 | | -| badge | badge | string \| undefined | undefined | Sets the badge type to display (e.g., 'oneworld'). | |
30 | | -| badgeConfig | | | | Returns badge config when eligible. | |
31 | | -| borderColor | border-color | string \| undefined | undefined | Sets the border color around the tail. | |
32 | | -| borderWidth | border-width | string \| undefined | undefined | Sets the border width around the tail. | |
33 | | -| hasBorder | | | | Checks if tail has border properties defined. | |
34 | | -| href | href | string \| undefined | undefined | Sets the href for the tail. | |
35 | | -| isInDiagonalGroup | | | | Checks if this tail is in a diagonal group layout. | |
36 | | -| isInGroup | | | | Checks if this tail is inside an auro-tail-group element. | |
37 | | -| isInHorizontalGroup | | | | Checks if this tail is in a horizontal group layout. | |
38 | | -| labelTypeClass | | | | Gets the appropriate CSS type class based on tail size. | |
39 | | -| outline | outline | boolean | false | Renders the tail with an outline style. | |
40 | | -| shouldShowLink | | | | Checks if the tail should display as a clickable link. | |
41 | | -| size | size | 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' | 'lg' | Sets the size of the tail. | |
42 | | -| tail | tail | string | 'AS' | Sets the airline tail based on the tail codes used in auro-icon (e.g., AS, HA, PR). | |
43 | | -| variant | | | | Gets the carrier variant based on the current tail code. | |
| 43 | +| Properties | Attributes | Modifiers | Type | Default | Description | |
| 44 | +| ----------- | ------------ | --------- | ---------------------------- | ------------ | ------------------------------------------------------------------------------------------ | |
| 45 | +| borderColor | border-color | | string \| undefined | undefined | Sets the border color for all child tails in the group. Does not apply to diagonal layout. | |
| 46 | +| layout | layout | | 'horizontal' \| 'diagonal' | 'horizontal' | Sets the layout direction for the group. | |
| 47 | +| size | size | | 'xs' \| 'sm' \| 'md' \| 'lg' | 'lg' | Sets the size for all child tails in the group. | |
44 | 48 |
|
45 | 49 | ### Methods |
46 | 50 |
|
47 | 51 | | Name | Parameters | Return | Description | |
48 | 52 | | -------- | ------------------------------------------------------------------- | ------ | ------------------------------------------------- | |
49 | | -| register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. | |
50 | | - |
51 | | -### Events |
52 | | - |
53 | | -| Name | Description | |
54 | | -| ---------- | ----------------------------------------- | |
55 | | -| href-click | Fired when the auro-hyperlink is clicked. | |
| 53 | +| register | `name` (string) - The name of element that you want to register to. | | This will register this element with the browser. | |
0 commit comments