Skip to content

Commit d6f4975

Browse files
kineticjskineticjs
committed
feat(ui5-list): update sample
1 parent 97d23ff commit d6f4975

2 files changed

Lines changed: 34 additions & 22 deletions

File tree

‎packages/website/docs/_samples/main/List/StickyHeader/main.css‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
.scrollContainer {
2+
height: 300px;
3+
overflow: auto;
4+
}
5+
6+
.heading {
7+
margin: 2rem 0 2rem 1rem;
8+
}

‎packages/website/docs/_samples/main/List/StickyHeader/sample.html‎

Lines changed: 26 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -6,33 +6,37 @@
66
<meta charset="UTF-8">
77
<meta name="viewport" content="width=device-width, initial-scale=1.0">
88
<title>Sticky Header Sample</title>
9+
<link rel="stylesheet" href="./main.css">
910
</head>
1011

1112
<body style="background-color: var(--sapBackgroundColor)">
1213
<!-- playground-fold-end -->
1314

14-
<ui5-list headerText="Sticky Header" sticky-header>
15-
<ui5-li icon="nutrition-activity" description="Tropical plant with an edible fruit" additional-text="In-stock"
16-
additional-text-state="Positive">Pineapple</ui5-li>
17-
<ui5-li icon="nutrition-activity" description="Occurs between red and yellow" additional-text="Expires"
18-
additional-text-state="Critical">Orange</ui5-li>
19-
<ui5-li icon="nutrition-activity" description="The yellow lengthy fruit" additional-text="Re-stock"
20-
additional-text-state="Information">Blueberry</ui5-li>
21-
<ui5-li icon="nutrition-activity" description="The tropical stone fruit" additional-text="Re-stock"
22-
additional-text-state="Negative">Mango</ui5-li>
23-
<ui5-li icon="nutrition-activity" description="A sweet red or green pomaceous fruit" additional-text="In-stock"
24-
additional-text-state="Positive">Apple</ui5-li>
25-
<ui5-li icon="nutrition-activity" description="A long curved fruit with soft sweet flesh" additional-text="Expires"
26-
additional-text-state="Critical">Banana</ui5-li>
27-
<ui5-li icon="nutrition-activity" description="A small red fruit with seeds on the outside" additional-text="In-stock"
28-
additional-text-state="Positive">Strawberry</ui5-li>
29-
<ui5-li icon="nutrition-activity" description="A small juicy fruit growing in clusters" additional-text="Re-stock"
30-
additional-text-state="Information">Grape</ui5-li>
31-
<ui5-li icon="nutrition-activity" description="A tropical fruit with orange flesh and black seeds" additional-text="Re-stock"
32-
additional-text-state="Negative">Papaya</ui5-li>
33-
<ui5-li icon="nutrition-activity" description="A small brown fruit with bright green flesh" additional-text="In-stock"
34-
additional-text-state="Positive">Kiwi</ui5-li>
35-
</ui5-list>
15+
<div class="scrollContainer">
16+
<ui5-title size="H3" class="heading">Scroll down to see the sticky header in action</ui5-title>
17+
<ui5-list header-text="Sticky Header" sticky-header>
18+
<ui5-li icon="nutrition-activity" description="Tropical plant with an edible fruit" additional-text="In-stock"
19+
additional-text-state="Positive">Pineapple</ui5-li>
20+
<ui5-li icon="nutrition-activity" description="Occurs between red and yellow" additional-text="Expires"
21+
additional-text-state="Critical">Orange</ui5-li>
22+
<ui5-li icon="nutrition-activity" description="The yellow lengthy fruit" additional-text="Re-stock"
23+
additional-text-state="Information">Blueberry</ui5-li>
24+
<ui5-li icon="nutrition-activity" description="The tropical stone fruit" additional-text="Re-stock"
25+
additional-text-state="Negative">Mango</ui5-li>
26+
<ui5-li icon="nutrition-activity" description="A sweet red or green pomaceous fruit" additional-text="In-stock"
27+
additional-text-state="Positive">Apple</ui5-li>
28+
<ui5-li icon="nutrition-activity" description="A long curved fruit with soft sweet flesh" additional-text="Expires"
29+
additional-text-state="Critical">Banana</ui5-li>
30+
<ui5-li icon="nutrition-activity" description="A small red fruit with seeds on the outside" additional-text="In-stock"
31+
additional-text-state="Positive">Strawberry</ui5-li>
32+
<ui5-li icon="nutrition-activity" description="A small juicy fruit growing in clusters" additional-text="Re-stock"
33+
additional-text-state="Information">Grape</ui5-li>
34+
<ui5-li icon="nutrition-activity" description="A tropical fruit with orange flesh and black seeds" additional-text="Re-stock"
35+
additional-text-state="Negative">Papaya</ui5-li>
36+
<ui5-li icon="nutrition-activity" description="A small brown fruit with bright green flesh" additional-text="In-stock"
37+
additional-text-state="Positive">Kiwi</ui5-li>
38+
</ui5-list>
39+
</div>
3640

3741
<!-- playground-fold -->
3842
<script type="module" src="main.js"></script>

0 commit comments

Comments
 (0)