Codicent Web Components Demo

Simple Button

Flexibel knapp med olika varianter, storlekar och event-hantering.

Varianter:

Primary (standard)

Secondary

Outline

Disabled

Storlekar:

Small

Medium

Large

Event-hantering:

Click me!

         <simple-button variant="primary" size="large">Min Knapp</simple-button>
         <script>
         document.querySelector('simple-button').addEventListener('simple-click', () => {
         console.log('Knapp klickad!');
         });
         </script>
      

Simple Progress Bar

Progress bar med anpassningsbar värde och label.

Olika värden:

Anpassad label:

Interaktiv demo:

Öka (+10)

Minska (-10)

Reset

<simple-progress-bar value="75" label="75% färdigt"></simple-progress-bar>

📊 Simple Counter

Räknare med Codicent data integration och automatisk uppdatering.

Grundläggande räknare:

Auto-uppdatering (Periodic Updates):

Live Count: uppdateras var 5:e sekund
System Status: uppdateras var 10:e sekund
Default Interval: uppdateras var 30:e sekund (standard)

Olika format:

Event Listener Test:

            Waiting for counter updates...
         

         <!-- Grundläggande räknare -->
         <simple-counter label="Messages" search="messages"></simple-counter>

         <!-- Med auto-uppdatering -->
         <simple-counter
         label="Live Count"
         search="messages"
         auto-refresh="true"
         interval="5000">
         </simple-counter>

         <!-- Lyssna på events -->
         <script>
         document.querySelector('simple-counter').addEventListener('simple-update', (e) => {
         console.log('Counter updated:', e.detail.count);
         });
         </script>
      

Simple List

Lista med automatisk styling och AI-vänlig konfiguration.

Lista från JSON (AI-vänligt):

Dynamisk lista:

Add item

Rensa lista

         <!-- AI kan enkelt generera detta -->
         <simple-list data-items='["Item 1", "Item 2", "Item 3"]'></simple-list>

         <!-- Eller via JavaScript -->
         <script>
         document.getElementById('myList').items = ['Apple', 'Banana', 'Orange'];
         </script>
      

Anpassad Styling med CSS-variabler

Alla komponenter kan anpassas med CSS-variabler för enhetligt utseende.

Orange tema

Secondary

         .custom-styling {
         --button-primary-bg: #ff6b35;
         --progress-color: linear-gradient(90deg, #ff6b35, #f7931e);
         --list-bg: #fff3e0;
         }
      

🤖 AI-Integration Exempel

Så här kan AI generera UI med dessa komponenter:

AI-genererat dashboard:

Continue project

View details

         <!-- AI kan generera detta baserat på data från Codicent -->
         <simple-progress-bar value="85" label="Projektframsteg: 85%"></simple-progress-bar>
         <simple-list data-items='["✅ Krav insamlade", "✅ Design godkänd", "🔄 Utveckling
         pågår"]'></simple-list>
         <simple-button size="large">Fortsätt projekt</simple-button>
      

Simple Card

Kort med header, content och footer för strukturerat innehåll.

Grundläggande kort:

Utvecklingen av nya funktioner pågår enligt plan. Nästa milstolpe förväntas nås inom 2 veckor.

Detaljer

Redigera

Olika varianter:

Viktigt meddelande

Allt fungerar perfekt!

Något behöver uppmärksamhet

Ett problem har uppstått

         <simple-card title="Min Titel" variant="primary" elevation="high">
         Innehåll här...
         <div slot="footer">
         <simple-button>Action</simple-button>
         </div>
         </simple-card>
      

Simple Headings

Rubrikkomponenter för konsistent typografi.

Alla nivåer:

Detta är en H1-rubrik

Detta är en H2-rubrik

Detta är en H3-rubrik

Detta är en H4-rubrik

Detta är en H5-rubrik

Detta är en H6-rubrik

Varianter och alignment:

Primär rubrik

Sekundär rubrik

Framgångsrubrik

Centrerad rubrik med understrykning

         <simple-h1 variant="primary" align="center">Huvudtitel</simple-h1>
         <simple-h2 variant="underline">Underrubrik</simple-h2>
      

Form Controls

Switch, checkbox och dropdown för användarinput.

Switch (Toggle):

Checkbox:

Dropdown:

Form example:

Personal settings

Language settings

Save settings

Cancel

         <simple-switch label="Aktivera notifikationer" checked></simple-switch>
         <simple-checkbox label="Jag accepterar" value="terms"></simple-checkbox>
         <simple-dropdown data-options='[{"value": "se", "label": "Sverige"}]'></simple-dropdown>
      

🎯 Essential Components

Simple Modal:

Öppna Modal

Bekräfta Dialog

Detta är en demo modal med olika storlekar och funktioner.

Stäng

Avbryt

Är du säker på att du vill fortsätta med denna åtgärd?

Ja, fortsätt

Avbryt

Simple Tabs:

Project Overview

This is the overview panel with project information and status.

Project Settings

Project Team

Help content coming soon...

Pills Variant:

Dashboard innehåll...

Analytics data...

Report overview...

Simple Tooltip:

Hover för tooltip (top)

Varning (right)

Framgång (bottom)

Rich Content
Du kan ha HTML i tooltips!

Rich Content (left)

🧭 Navigation Components

Simple Breadcrumb:

Med Max Items (Ellipsis):

Simple Pagination:

Compact Variant:

Simple Accordion:

This project contains a complete component library for web development.

Our dedicated development team:

Information coming soon...

Multiple Open:

Content A

Content B

Content C

🔐 Authentication (Auth0)

Auth0-based authentication with configurable domain and client ID. Default configuration for Codicent.

Standard Auth Component:

Olika Varianter:

Konfigurerbara Parametrar:

Domain:

Client ID:

Redirect URI:

         <!-- Standard Codicent Auth0 setup -->
         <simple-auth></simple-auth>

         <!-- Med avatar och logout-knapp -->
         <simple-auth variant="auth0" show-avatar show-logout></simple-auth>

         <!-- Anpassad konfiguration -->
         <simple-auth
         domain="din-domain.auth0.com"
         client-id="ditt-client-id"
         redirect-uri="https://din-app.com"
         scope="openid profile email"
         show-avatar
         show-logout>
         </simple-auth>

         <script>
         // Event listeners
         document.querySelector('simple-auth').addEventListener('simple-auth-login', (e) => {
         console.log('User logged in:', e.detail.user);
         });

         document.querySelector('simple-auth').addEventListener('simple-auth-logout', (e) => {
         console.log('User logged out:', e.detail.user);
         });

         document.querySelector('simple-auth').addEventListener('simple-auth-error', (e) => {
         console.error('Auth error:', e.detail.error);
         });
         </script>
      

Codicent Web Components