Skip to content

Commit 5b7d6c8

Browse files
committed
chore(ui5-fcl): add template hooks for toggle arrows (#2242)
Add template hooks for the toggle arrows of thew FlexibleColumnLayout, so that a derived class can fully customize them. For example: provide different or new ARIA attribbutes or change the values of existing ones. Note: We considered providing slots or proeprties, but we wanted to keep the API more simple and aggreed on this solution. FIXES: #2183
1 parent f90a992 commit 5b7d6c8

File tree

1 file changed

+28
-19
lines changed

1 file changed

+28
-19
lines changed

packages/fiori/src/FlexibleColumnLayout.hbs

Lines changed: 28 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -8,15 +8,7 @@
88
</div>
99

1010
<div class="ui5-fcl-arrow-container" style="{{styles.arrowsContainer.start}}">
11-
<ui5-button
12-
class="ui5-fcl-arrow ui5-fcl-arrow--start"
13-
icon="slim-arrow-right"
14-
design="Transparent"
15-
@click="{{startArrowClick}}"
16-
style="{{styles.arrows.start}}"
17-
aria-label="{{accStartArrowText}}"
18-
title="{{accStartArrowText}}"
19-
></ui5-button>
11+
{{> startArrow}}
2012
</div>
2113

2214
<div
@@ -28,15 +20,7 @@
2820
</div>
2921

3022
<div class="ui5-fcl-arrow-container" style="{{styles.arrowsContainer.end}}">
31-
<ui5-button
32-
class="ui5-fcl-arrow ui5-fcl-arrow--end"
33-
style="{{styles.arrows.end}}"
34-
icon="slim-arrow-left"
35-
design="Transparent"
36-
@click="{{endArrowClick}}"
37-
aria-label="{{accEndArrowText}}"
38-
title="{{accEndArrowText}}"
39-
></ui5-button>
23+
{{> endArrow}}
4024
</div>
4125

4226
<div
@@ -50,4 +34,29 @@
5034
<span id="{{_id}}-startColumnText" class="ui5-hidden-text">{{accStartColumnText}}</span>
5135
<span id="{{_id}}-midColumnText" class="ui5-hidden-text">{{accMiddleColumnText}}</span>
5236
<span id="{{_id}}-endColumnText" class="ui5-hidden-text">{{accEndColumnText}}</span>
53-
</div>
37+
</div>
38+
39+
{{#*inline "startArrow"}}
40+
<ui5-button
41+
class="ui5-fcl-arrow ui5-fcl-arrow--start"
42+
icon="slim-arrow-right"
43+
design="Transparent"
44+
@click="{{startArrowClick}}"
45+
style="{{styles.arrows.start}}"
46+
aria-label="{{accStartArrowText}}"
47+
title="{{accStartArrowText}}"
48+
></ui5-button>
49+
{{/inline}}
50+
51+
52+
{{#*inline "endArrow"}}
53+
<ui5-button
54+
class="ui5-fcl-arrow ui5-fcl-arrow--end"
55+
style="{{styles.arrows.end}}"
56+
icon="slim-arrow-left"
57+
design="Transparent"
58+
@click="{{endArrowClick}}"
59+
aria-label="{{accEndArrowText}}"
60+
title="{{accEndArrowText}}"
61+
></ui5-button>
62+
{{/inline}}

0 commit comments

Comments
 (0)