Skip to content

Commit b9211de

Browse files
PedroBirrer, Iwan
Pedro
and
Birrer, Iwan
authored
feat: Added new component six-breadcrumbs (#380)
feat: Added new component six-breadcrumbs Co-authored-by: Birrer, Iwan <iwan.birrer@six-group.com>
1 parent 35973c5 commit b9211de

33 files changed

Lines changed: 1235 additions & 3 deletions

‎docs/components/component.tags.mts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export const components = ["six-alert","six-avatar","six-badge","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-rating","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];
1+
export const components = ["six-alert","six-avatar","six-badge","six-breadcrumbs","six-breadcrumbs-item","six-button","six-card","six-checkbox","six-date","six-datepicker","six-details","six-dialog","six-drawer","six-dropdown","six-error","six-error-page","six-file-list","six-file-list-item","six-file-upload","six-footer","six-group-label","six-header","six-header-dropdown-item","six-header-item","six-header-menu-button","six-icon","six-icon-button","six-input","six-item-picker","six-language-switcher","six-layout-grid","six-logo","six-main-container","six-menu","six-menu-divider","six-menu-item","six-menu-label","six-picto","six-progress-bar","six-progress-ring","six-radio","six-range","six-rating","six-root","six-search-field","six-select","six-sidebar","six-sidebar-item","six-sidebar-item-group","six-spinner","six-stage-indicator","six-switch","six-tab","six-tab-group","six-tab-panel","six-tag","six-textarea","six-tile","six-timepicker","six-tooltip"];

‎docs/components/six-breadcrumbs-item.md‎

Lines changed: 78 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
# Breadcrumbs Item
2+
3+
4+
Breadcrumb items are intended for use with the six-breadcrumbs component. For usage details, see the [six-breadcrumbs documentation](six-breadcrumbs.html).
5+
6+
<docs-demo-six-breadcrumbs-item-0></docs-demo-six-breadcrumbs-item-0>
7+
8+
```html
9+
<six-breadcrumbs>
10+
<six-breadcrumbs-item>A</six-breadcrumbs-item>
11+
<six-breadcrumbs-item>B</six-breadcrumbs-item>
12+
<six-breadcrumbs-item>C</six-breadcrumbs-item>
13+
</six-breadcrumbs>
14+
```
15+
16+
17+
18+
<!-- Auto Generated Below -->
19+
20+
21+
## Overview
22+
23+
Breadcrumb items are used inside breadcrumbs to represent different links.
24+
25+
## Properties
26+
27+
| Property | Attribute | Description | Type | Default |
28+
| ---------- | ----------- | ------------------------------------------------------------------------------------------------------ | --------------------------------------------------------- | ----------- |
29+
| `href` | `href` | When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. | `string \| undefined` | `undefined` |
30+
| `readonly` | `read-only` | Set to true to readonly the breadcrumb item. | `boolean` | `false` |
31+
| `size` | `size` | The breadcrumbs item size. | `"large" \| "medium" \| "small"` | `'medium'` |
32+
| `target` | `target` | Tells the browser where to open the link. Only used when `href` is set. | `"_blank" \| "_parent" \| "_self" \| "_top" \| undefined` | `undefined` |
33+
34+
35+
## Slots
36+
37+
| Slot | Description |
38+
| ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
39+
| | The breadcrumb item’s label. |
40+
| `"prefix"` | An optional prefix, usually an icon or icon button. |
41+
| `"separator"` | The separator to use for the breadcrumb item. This will only change the separator for this item. If you want to change it for all items in the group, set the separator on six-breadcrumbs instead. |
42+
| `"suffix"` | An optional suffix, usually an icon or icon button. |
43+
44+
45+
## Shadow Parts
46+
47+
| Part | Description |
48+
| ------------- | -------------------------------- |
49+
| `"base"` | The component's base wrapper. |
50+
| `"button"` | The button that renders the item |
51+
| `"separator"` | The separator |
52+
53+
54+
## CSS Custom Properties
55+
56+
| Name | Description |
57+
| ------------------- | -------------------------------------- |
58+
| `--last-item-color` | The color of the last breadcrumbs item |
59+
| `--separator-color` | The color of the separator |
60+
61+
62+
## Dependencies
63+
64+
### Depends on
65+
66+
- [six-button](six-button.html)
67+
68+
### Graph
69+
```mermaid
70+
graph TD;
71+
six-breadcrumbs-item --> six-button
72+
six-button --> six-spinner
73+
style six-breadcrumbs-item fill:#f9f,stroke:#333,stroke-width:4px
74+
```
75+
76+
----------------------------------------------
77+
78+
Copyright © 2021-present SIX-Group

‎docs/components/six-breadcrumbs.md‎

Lines changed: 179 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,179 @@
1+
# Breadcrumbs
2+
3+
4+
Breadcrumbs provide a group of links so users can easily navigate a website’s hierarchy. Breadcrumbs are usually placed before a page’s main content with the current page shown last to indicate the user’s position in the navigation.
5+
6+
<docs-demo-six-breadcrumbs-0></docs-demo-six-breadcrumbs-0>
7+
8+
```html
9+
<six-breadcrumbs>
10+
<six-breadcrumbs-item>A</six-breadcrumbs-item>
11+
<six-breadcrumbs-item>B</six-breadcrumbs-item>
12+
<six-breadcrumbs-item>C</six-breadcrumbs-item>
13+
</six-breadcrumbs>
14+
```
15+
16+
17+
## Custom Separators
18+
19+
Use the separator slot to change the separator that goes between breadcrumb items. Icons work well, but you can also use text or an image.
20+
21+
<docs-demo-six-breadcrumbs-1></docs-demo-six-breadcrumbs-1>
22+
23+
```html
24+
<six-breadcrumbs>
25+
<six-icon slot="separator" size="small">arrow_forward</six-icon>
26+
<six-breadcrumbs-item>A</six-breadcrumbs-item>
27+
<six-breadcrumbs-item>B</six-breadcrumbs-item>
28+
<six-breadcrumbs-item>Current</six-breadcrumbs-item>
29+
</six-breadcrumbs>
30+
```
31+
32+
33+
Using `separator-icon` attribute
34+
35+
<docs-demo-six-breadcrumbs-2></docs-demo-six-breadcrumbs-2>
36+
37+
```html
38+
<six-breadcrumbs separator-icon="arrow_forward">
39+
<six-breadcrumbs-item>A</six-breadcrumbs-item>
40+
<six-breadcrumbs-item>B</six-breadcrumbs-item>
41+
<six-breadcrumbs-item>Current</six-breadcrumbs-item>
42+
</six-breadcrumbs>
43+
```
44+
45+
46+
## Prefixes
47+
48+
Use the prefix slot to add content before any breadcrumb item.
49+
50+
<docs-demo-six-breadcrumbs-3></docs-demo-six-breadcrumbs-3>
51+
52+
```html
53+
<six-breadcrumbs>
54+
<six-icon slot="separator" size="small">arrow_forward</six-icon>
55+
<six-breadcrumbs-item>
56+
<six-icon slot="prefix" size="small">house</six-icon>
57+
Home
58+
</six-breadcrumbs-item>
59+
<six-breadcrumbs-item>Page</six-breadcrumbs-item>
60+
<six-breadcrumbs-item>Current</six-breadcrumbs-item>
61+
</six-breadcrumbs>
62+
```
63+
64+
65+
## Suffixes
66+
67+
Use the suffix slot to add content after any breadcrumb item.
68+
69+
<docs-demo-six-breadcrumbs-4></docs-demo-six-breadcrumbs-4>
70+
71+
```html
72+
<six-breadcrumbs>
73+
<six-icon slot="separator" size="small">arrow_forward</six-icon>
74+
<six-breadcrumbs-item>Home</six-breadcrumbs-item>
75+
<six-breadcrumbs-item>Page</six-breadcrumbs-item>
76+
<six-breadcrumbs-item>
77+
<six-icon slot="suffix" size="small">lock</six-icon>
78+
Current
79+
</six-breadcrumbs-item>
80+
</six-breadcrumbs>
81+
```
82+
83+
84+
## Styling
85+
86+
Use CSS custom properties to customize the appearance of breadcrumb items.
87+
88+
<docs-demo-six-breadcrumbs-5></docs-demo-six-breadcrumbs-5>
89+
90+
```html
91+
<div class="parent">
92+
<six-breadcrumbs>
93+
<six-icon slot="separator" size="small">arrow_forward</six-icon>
94+
<six-breadcrumbs-item>Home</six-breadcrumbs-item>
95+
<six-breadcrumbs-item>Page</six-breadcrumbs-item>
96+
<six-breadcrumbs-item>Current</six-breadcrumbs-item>
97+
</six-breadcrumbs>
98+
</div>
99+
```
100+
101+
102+
## Dynamically Add/Remove Items
103+
104+
Items can be dynamically added and removed.
105+
106+
<docs-demo-six-breadcrumbs-6></docs-demo-six-breadcrumbs-6>
107+
108+
```html
109+
<six-button type="secondary" id="remove-button">Remove</six-button>
110+
<six-button type="secondary" id="add-button">Add</six-button>
111+
112+
<six-breadcrumbs id="dynamic-breadcrumbs">
113+
<six-breadcrumbs-item>Item 0</six-breadcrumbs-item>
114+
<six-breadcrumbs-item>Item 1</six-breadcrumbs-item>
115+
</six-breadcrumbs>
116+
117+
<script type="module">
118+
let counter = 2;
119+
const breadcrumbs = document.getElementById('dynamic-breadcrumbs');
120+
121+
document.getElementById('remove-button').addEventListener('click', () => {
122+
breadcrumbs.lastElementChild?.remove();
123+
});
124+
125+
document.getElementById('add-button').addEventListener('click', () => {
126+
const item = document.createElement('six-breadcrumbs-item');
127+
item.textContent = `Item ${counter++}`;
128+
breadcrumbs.append(item);
129+
});
130+
</script>
131+
```
132+
133+
134+
135+
<!-- Auto Generated Below -->
136+
137+
138+
## Overview
139+
140+
Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
141+
142+
## Properties
143+
144+
| Property | Attribute | Description | Type | Default |
145+
| --------------- | ---------------- | --------------------------------------------------------------- | -------- | ------- |
146+
| `separatorIcon` | `separator-icon` | Defines an icon as a separator without having to place a slot * | `string` | `''` |
147+
148+
149+
## Slots
150+
151+
| Slot | Description |
152+
| ------------- | ------------------------------------------------------------------------ |
153+
| | One or more breadcrumb items to display. |
154+
| `"separator"` | The separator to use between breadcrumb items. Works best with six-icon. |
155+
156+
157+
## Shadow Parts
158+
159+
| Part | Description |
160+
| -------- | ----------------------------- |
161+
| `"base"` | The component's base wrapper. |
162+
163+
164+
## Dependencies
165+
166+
### Depends on
167+
168+
- [six-icon](six-icon.html)
169+
170+
### Graph
171+
```mermaid
172+
graph TD;
173+
six-breadcrumbs --> six-icon
174+
style six-breadcrumbs fill:#f9f,stroke:#333,stroke-width:4px
175+
```
176+
177+
----------------------------------------------
178+
179+
Copyright © 2021-present SIX-Group

‎docs/components/six-button.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -345,6 +345,7 @@ Type: `Promise<void>`
345345

346346
### Used by
347347

348+
- [six-breadcrumbs-item](six-breadcrumbs-item.html)
348349
- [six-header-menu-button](six-header-menu-button.html)
349350
- [six-select](six-select.html)
350351

@@ -356,6 +357,7 @@ Type: `Promise<void>`
356357
```mermaid
357358
graph TD;
358359
six-button --> six-spinner
360+
six-breadcrumbs-item --> six-button
359361
six-header-menu-button --> six-button
360362
six-select --> six-button
361363
style six-button fill:#f9f,stroke:#333,stroke-width:4px

‎docs/components/six-icon.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -271,6 +271,7 @@ Enter an icon label and press enter to display an icon:
271271
### Used by
272272

273273
- [six-avatar](six-avatar.html)
274+
- [six-breadcrumbs](six-breadcrumbs.html)
274275
- [six-date](six-date.html)
275276
- [six-datepicker](six-datepicker.html)
276277
- [six-details](six-details.html)
@@ -294,6 +295,7 @@ Enter an icon label and press enter to display an icon:
294295
```mermaid
295296
graph TD;
296297
six-avatar --> six-icon
298+
six-breadcrumbs --> six-icon
297299
six-date --> six-icon
298300
six-datepicker --> six-icon
299301
six-details --> six-icon

‎docs/examples/docs-demo-six-breadcrumbs-0.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div>
3+
4+
<six-breadcrumbs>
5+
<six-breadcrumbs-item>A</six-breadcrumbs-item>
6+
<six-breadcrumbs-item>B</six-breadcrumbs-item>
7+
<six-breadcrumbs-item>C</six-breadcrumbs-item>
8+
</six-breadcrumbs>
9+
10+
</div>
11+
</template>
12+
<style>
13+
14+
</style>
15+
<script>
16+
export default {
17+
name: 'docs-demo-six-breadcrumbs-0',
18+
mounted() { }
19+
}
20+
</script>

‎docs/examples/docs-demo-six-breadcrumbs-1.vue‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
<template>
2+
<div>
3+
4+
<six-breadcrumbs>
5+
<six-icon slot="separator" size="small">arrow_forward</six-icon>
6+
<six-breadcrumbs-item>A</six-breadcrumbs-item>
7+
<six-breadcrumbs-item>B</six-breadcrumbs-item>
8+
<six-breadcrumbs-item>Current</six-breadcrumbs-item>
9+
</six-breadcrumbs>
10+
11+
</div>
12+
</template>
13+
<style>
14+
15+
</style>
16+
<script>
17+
export default {
18+
name: 'docs-demo-six-breadcrumbs-1',
19+
mounted() { }
20+
}
21+
</script>

‎docs/examples/docs-demo-six-breadcrumbs-2.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div>
3+
4+
<six-breadcrumbs separator-icon="arrow_forward">
5+
<six-breadcrumbs-item>A</six-breadcrumbs-item>
6+
<six-breadcrumbs-item>B</six-breadcrumbs-item>
7+
<six-breadcrumbs-item>Current</six-breadcrumbs-item>
8+
</six-breadcrumbs>
9+
10+
</div>
11+
</template>
12+
<style>
13+
14+
</style>
15+
<script>
16+
export default {
17+
name: 'docs-demo-six-breadcrumbs-2',
18+
mounted() { }
19+
}
20+
</script>

‎docs/examples/docs-demo-six-breadcrumbs-3.vue‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
<template>
2+
<div>
3+
4+
<six-breadcrumbs>
5+
<six-icon slot="separator" size="small">arrow_forward</six-icon>
6+
<six-breadcrumbs-item>
7+
<six-icon slot="prefix" size="small">house</six-icon>
8+
Home
9+
</six-breadcrumbs-item>
10+
<six-breadcrumbs-item>Page</six-breadcrumbs-item>
11+
<six-breadcrumbs-item>Current</six-breadcrumbs-item>
12+
</six-breadcrumbs>
13+
14+
</div>
15+
</template>
16+
<style>
17+
18+
</style>
19+
<script>
20+
export default {
21+
name: 'docs-demo-six-breadcrumbs-3',
22+
mounted() { }
23+
}
24+
</script>

0 commit comments

Comments
 (0)