feat(demo): Cell add example with Connected CardLarge

taiga-family · Sep 15, 2024 · 2098aa4 · 2098aa4
1 parent e0d886c
commit 2098aa4
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 8 deletions.
diff --git a/projects/demo/src/modules/components/cell/examples/8/index.html b/projects/demo/src/modules/components/cell/examples/8/index.html
@@ -1,3 +1,32 @@
+<tui-notification>
+    <div>
+        Can be attached as host directive:
+        <code>hostDirectives: [TuiConnected]</code>
+    </div>
+</tui-notification>
+
+<div
+    tuiCardLarge
+    tuiConnected
+    tuiSurface="elevated"
+>
+    <h3 tuiTitle="m">Inside a block</h3>
+    <button
+        *ngFor="let item of items"
+        tuiCell
+        type="button"
+    >
+        <tui-avatar
+            appearance="accent"
+            [src]="item.icon"
+        />
+        <span tuiTitle>
+            {{ item.title }}
+            <span tuiSubtitle>{{ item.subtitle }}</span>
+        </span>
+    </button>
+</div>
+
 <div tuiConnected>
     <label tuiCell>
         <tui-badged-content>
@@ -68,10 +97,3 @@
         />
     </label>
 </div>
-
-<tui-notification>
-    <div>
-        Can be attached as host directive:
-        <code>hostDirectives: [TuiConnected]</code>
-    </div>
-</tui-notification>
diff --git a/projects/demo/src/modules/components/cell/examples/8/index.ts b/projects/demo/src/modules/components/cell/examples/8/index.ts
@@ -50,7 +50,8 @@ export default class Example {
         {
             icon: '@tui.mail',
             title: 'Send message',
-            subtitle: 'Keep it short',
+            subtitle:
+                'Allow outgoing unusual call that can change your life in an unusual way',
         },
         {
             icon: '@tui.lock',