@conectate/ct-list

A versatile list item component for creating navigation menus, action lists, and interactive elements with icon support and flexible styling options.

Table of Contents

• Installation
• Features
• Basic Usage
• Advanced Usage
• API Reference
  • Properties
  • Slots
  • CSS Custom Properties
  • Methods
• Common Patterns
  • Navigation Menu
  • Settings List
  • Action Items
• Integration
  • With ct-button-menu
  • With Routers
• Styling Examples
• Follow Me
• Contributing
• License

Installation

Install via npm, yarn, or pnpm:

# npm
npm i @conectate/ct-list

# yarn
yarn add @conectate/ct-list

# pnpm
pnpm i @conectate/ct-list

Features

• Flexible Layout: Slots for prefix, main content, and suffix elements
• Icon Support: Built-in support for Material Icons via ct-icon
• Link Capability: Can function as navigation links
• Interactive: Hover states and click handling
• Menu Integration: Automatically closes parent menus when clicked
• Customizable: Multiple styling options via CSS variables
• Accessible: Built with proper semantics and keyboard navigation support

Basic Usage

Import the component and use it in your HTML:

// Import the component
import '@conectate/ct-list/ct-list-item.js';

<!-- Simple list item with text -->
<ct-list-item text="Settings"></ct-list-item>

<!-- With icon -->
<ct-list-item icon="settings" text="Settings"></ct-list-item>

<!-- As a navigation link -->
<ct-list-item icon="home" text="Home" href="/home"></ct-list-item>

<!-- Using custom SVG icon -->
<ct-list-item svg="<svg viewBox='0 0 24 24'><path d='M12 2L2 7l10 5 10-5-10-5z'/></svg>" text="Custom Icon"> </ct-list-item>

Advanced Usage

Custom Content with Slots

<ct-list-item>
	<span slot="prefix">🔔</span>
	Notifications
	<span slot="suffix" class="badge">5</span>
</ct-list-item>

Keep Menu Open

<ct-button-menu>
	<ct-list-item text="Option 1"></ct-list-item>
	<ct-list-item text="Option with submenu" keep-open></ct-list-item>
	<ct-list-item text="Option 3"></ct-list-item>
</ct-button-menu>

Open Links in New Tab

<ct-list-item text="External Link" icon="open_in_new" href="https://example.com" target="_blank"> </ct-list-item>

API Reference

Properties

| Property | Type | Default | Description | | ------------- | --------- | ----------- | --------------------------------------------- | | text | string | "" | Text content to display in the item | | icon | string | undefined | Material Icon name to display | | svg | string | "" | Custom SVG content for the icon | | href | string | undefined | URL the item navigates to when clicked | | link | string | undefined | Deprecated, use href instead | | target | string | undefined | Link target ("_self", "_top", "_blank") | | keepOpen | boolean | false | When true, parent menus won't close on click | | hideoutline | boolean | false | Hides the bottom border |

Slots

| Slot | Description | | --------- | -------------------------------------------------------------- | | default | Main content area, used with or instead of the text property | | prefix | Content shown before the main text (left side in LTR layouts) | | suffix | Content shown after the main text (right side in LTR layouts) |

CSS Custom Properties

| Property | Description | Default | | ----------------------------- | ----------------------------------- | ------------- | | --ct-list-item--white-space | Controls text wrapping | nowrap | | --ct-icon-size | Size of the icon | 21px | | --color-outline | Color of the bottom border | transparent | | --color-primary | Color used for outline when focused | inherited |

Methods

| Method | Description | Parameters | | ------------- | --------------------------- | ------------------- | | closeMenu() | Closes parent menu elements | event: MouseEvent |

Common Patterns

Navigation Menu

<nav>
	<ct-list-item icon="home" text="Home" href="/"></ct-list-item>
	<ct-list-item icon="person" text="Profile" href="/profile"></ct-list-item>
	<ct-list-item icon="settings" text="Settings" href="/settings"></ct-list-item>
	<ct-list-item icon="help" text="Help" href="/help"></ct-list-item>
</nav>

Settings List

<div class="settings-group">
	<h3>Account Settings</h3>
	<ct-list-item icon="account_circle" text="Profile Information"></ct-list-item>
	<ct-list-item icon="lock" text="Password & Security"></ct-list-item>
	<ct-list-item icon="notifications" text="Notification Preferences"></ct-list-item>
</div>

Action Items

<div class="actions">
	<ct-list-item icon="save" text="Save Changes" @click="${this.saveChanges}"></ct-list-item>
	<ct-list-item icon="delete" text="Delete Item" @click="${this.deleteItem}"></ct-list-item>
	<ct-list-item icon="share" text="Share" @click="${this.share}"></ct-list-item>
</div>

Integration

With ct-button-menu

Create dropdown menus with list items:

<ct-button-menu>
	<button slot="trigger">Menu</button>
	<ct-list-item icon="content_cut" text="Cut"></ct-list-item>
	<ct-list-item icon="content_copy" text="Copy"></ct-list-item>
	<ct-list-item icon="content_paste" text="Paste"></ct-list-item>
</ct-button-menu>

With Routers

Works with popular routing libraries:

import { LitElement, html } from 'lit';
import '@conectate/ct-list/ct-list-item.js';
import { router } from 'your-router-library';

class AppNavigation extends LitElement {
  render() {
    return html`
      <nav>
        ${router.routes.map(route => html`
          <ct-list-item
            icon=${route.icon}
            text=${route.name}
            href=${route.path}
            ?selected=${router.currentPath === route.path}>
          </ct-list-item>
        `)}
      </nav>
    `;
  }
}

Styling Examples

Basic Styling

ct-list-item {
	--ct-icon-size: 24px;
	--color-outline: #e0e0e0;
}

Material Design Style

ct-list-item {
	--ct-list-item--white-space: normal;
	--color-primary: #6200ee;
	border-radius: 4px;
	margin: 4px 0;
}

ct-list-item:hover {
	background-color: rgba(98, 0, 238, 0.08);
}

Navigation Style

ct-list-item {
	--ct-icon-size: 24px;
	height: 48px;
	border-radius: 0 24px 24px 0;
	margin-right: 8px;
}

ct-list-item[selected] {
	background-color: rgba(98, 0, 238, 0.12);
	color: #6200ee;
	font-weight: 500;
}

Follow Me

https://x.com/herberthobregon

https://dev.to/herberthobregon

Contributing

1. Fork the repo
2. Create a new branch: git checkout -b feature-branch
3. Commit your changes: git commit -m 'Add new feature'
4. Push to your branch: git push origin feature-branch
5. Open a pull request!

License

See LICENSE