Telekom Scale Design System

https://telekom.github.io/scale
Admin
The Telekom Scale Design System provides a comprehensive collection of reusable components, design...
Tokens:82,767
Snippets:1,109
Trust Score:8.3
Update:11 months ago
Show doc for...
Tokens:
Raw
### Install Scale Components using npm or yarn

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-getting-started-for-developers--page

This command installs the Scale component library into your project. It's the first step to integrating Scale components into your development workflow. Ensure you have Node.js and npm/yarn installed.

```bash
npm install @telekom/scale-components@next
```

--------------------------------

### Import and Initialize a Specific Scale Component (e.g., Button)

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-getting-started-for-developers--page

This example shows how to import and initialize only a specific Scale component, such as the button component, when using a bundler. This approach can help reduce the final bundle size by only including necessary components. It requires importing the component's CSS and defining its custom element.

```javascript
import '@telekom/scale-components/dist/scale-components/scale-components.css';
import { defineCustomElementScaleButton } from '@telekom/scale-components';

defineCustomElementScaleButton();
```

--------------------------------

### Scale Card Component with Image Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-card--with-link

Shows an example of using the 'scale-card' component to display an image, with associated text content. It includes styling for the image and content within the card.

```html
<div style="max-width: 200px;">
  <scale-card to="https://example.com" target="_blank">
    <div style="margin: -24px;">
      <img
        style="margin-bottom: -4px; width:100%;"
        src="assets/card-image"
        alt="placeholder"
      />
      <div style="padding: 24px;"> 
        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>
        <span>Lorem ipsur dolor sit amet</span>
      </div>
    </div>
  </scale-card>
</div>
```

--------------------------------

### Pagination Components

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-pagination--translated-aria-labels

Documentation for the Pagination component, including parameters and examples.

```APIDOC
## Standard

### Description
Documentation for the Pagination component.

### Method
N/A

### Endpoint
N/A

### Parameters
#### Path Parameters
- N/A

#### Query Parameters
- N/A

#### Request Body
- N/A

### Request Example
{
  "hideBorders": false,
  "pageSize": 10
}

### Response
#### Success Response (200)
- N/A

#### Response Example
{
  "propertyName*" : "This is a short descriptionsummary",
  "defaultValue": "defaultValue"
}
```

--------------------------------

### Wrapping Scale Components with reactify-wc in React

Source: https://telekom.github.io/scale/index_path=%2Fstory%2Fsetup-info-scale-and-react--page

This example uses the reactify-wc library to convert a Scale web component into a React-friendly wrapper, enabling proper event handling. Requires installing reactify-wc. It addresses custom event binding issues by prefixing events with 'on-'; handles inputs like labels and outputs via callbacks, but may require manual event management.

```jsx
import React from 'react';
import reactifyWc from 'reactify-wc';

const ScaleSlider = reactifyWc('scale-slider');

const App = () => {
  const handleInput = (event) => {
    // it works!
  };
  return (
    <ScaleSlider label="Example" on-scale-input={handleInput}></ScaleSlider>
  );
};

export default App;
```

--------------------------------

### Card Component - Image Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-card--with-image

Illustrates the Scale Card component integrated with an image. This example demonstrates how to embed an image within the card and style it for a blogpost-like presentation.

```html
<div style="max-width: 200px;">
  <scale-card to="https://example.com" target="_blank">
    <div style="margin: -24px;">
      <img
        style="margin-bottom: -4px; width:100%;"
        src="assets/card-image"
        alt="placeholder"
      />
      <div style="padding: 24px;"> 
        <h4 style="margin: 0px 0 16px 0; font: var(--telekom-text-style-heading-4);">Blogpost Title </h4>
        <span>Lorem ipsur dolor sit amet</span>
      </div>
    </div>
  </scale-card>
</div>

```

--------------------------------

### Configure Vue 3 On-the-Fly Template Compilation

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-scale-and-vue--page

Dynamically configures Vue 3's application instance to treat tags starting with 'scale-' as custom elements when using on-the-fly template compilation.

```javascript
// or in main.js (on-the-fly template compilation)
const app = Vue.createApp({});
app.config.compilerOptions.isCustomElement = (tag) => tag.startsWith('scale-');
```

--------------------------------

### Install Scale Components in Vue

Source: https://telekom.github.io/scale/index_path=%2Fstory%2Fsetup-info-scale-and-vue--page

Instructions on installing the Scale components package using npm and importing it into your Vue.js project.

```bash
npm install @telekom/scale-components@next
```

```javascript
import { defineCustomElements } from '@telekom/scale-components/loader';
import '@telekom/scale-components/dist/scale-components/scale-components.css';
```

```javascript
defineCustomElements();
```

--------------------------------

### Install Scale React Proxy Package via npm

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-scale-and-react--page

Installs the React-specific proxy package for Scale components. This package provides React wrapper components that help overcome framework integration limitations. It requires the base Scale components package as a dependency.

```shell
npm install @telekom/scale-components-react@next
```

--------------------------------

### Card Component - Link Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-card--with-image

Shows how to use the Scale Card component with a link. It configures the 'to', 'target', 'rel', and 'label' properties to create a clickable card.

```html
<scale-card
  to="https://example.com"
  to="_blank"
  target="_blank"
  rel="noopener noreferrer"
  label="Example Card"
  >Lorem ipsur dolor sit amet</scale-card
>

```

--------------------------------

### Configure Vue 3 to Recognize Scale Custom Elements (Vue CLI)

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-scale-and-vue--page

Sets up Vue 3's build process (using Vue CLI) to identify Scale components by their tag prefix ('scale-') via `compilerOptions.isCustomElement` for correct rendering.

```javascript
// in vue.config.js (vue-cli)
chainWebpack: (config) => {
  config.module
    .rule('vue')
    .use('vue-loader')
    .tap((options) => {
      // https://v3.vuejs.org/guide/migration/custom-elements-interop.html#autonomous-custom-elements
      options.compilerOptions = {
        isCustomElement: (tag) => tag.startsWith('scale-'),
      };
      return options;
    });
};
```

--------------------------------

### Load Scale Components and CSS in Vue

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-scale-and-vue--page

Imports and defines the custom elements from the Scale component library and includes the necessary CSS for styling in a Vue application's main entry point (main.js).

```javascript
import { defineCustomElements } from '@telekom/scale-components/loader';
import '@telekom/scale-components/dist/scale-components/scale-components.css';

// ...

defineCustomElements();
```

--------------------------------

### Use Scale Button Component in Vue Template

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-scale-and-vue--page

Demonstrates the basic usage of a Scale Design System button component within a Vue template after correct setup and configuration.

```html
<div>
  <scale-button>Click!</scale-button>
</div>
```

--------------------------------

### Telekom Footer Standard HTML Implementation

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-telekom-footer--minimal

HTML markup for the standard Telekom Footer component. Includes slots for notice text and navigation links, with example content structure.

```HTML
<scale-telekom-footer>
  <scale-telekom-footer-content>
    <span slot="notice"> © Deutsche Telekom AG </span>
    <ul slot="navigation">
      <li>
        <a href="#"> Imprint </a>
      </li>
      <li>
        <a href="#"> Data privacy </a>
      </li>
      <li>
        <a href="#"> Terms and conditions </a>
      </li>
      <li>
        <a href="#"> Consumer protection </a>
      </li>
      <li>
        <a href="#"> Product information sheet </a>
      </li>
      <li>
        <a href="#"> Youth protection </a>
      </li>
    </ul>
  </scale-telekom-footer-content>
</scale-telekom-footer>
```

--------------------------------

### Install and Use Scale React Proxy Package

Source: https://telekom.github.io/scale/index_path=%2Fusage%2Fsetup-info-scale-and-react--page

Installs and utilizes the automatically generated proxy package for Scale components in React. This package provides React components that wrap the native web components, offering a more idiomatic React experience.

```javascript
npm install @telekom/scale-components-react@next
```

```javascript
import React from 'react';
import { ScaleButton } from '@telekom/scale-components-react';

const App = () => (
  <div>
    <ScaleButton>Click</ScaleButton>
  </div>
);

export default App;
```

--------------------------------

### HTML Structure for Scale Text Field

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-text-field--helper-text

Provides HTML examples for creating a 'scale-text-field' element with different configurations. This includes setting labels, placeholders, helper text, error states, warnings, success states, disabling the field, and making it read-only. These examples showcase the declarative way to utilize the component's features.

```html
<scale-text-field id="text-field" label="Text With Events"></scale-text-field>
```

```html
<scale-text-field
  label="Placeholder"
  placeholder="this is the placeholder"
></scale-text-field>
```

```html
<scale-text-field
  label="Helper Text"
  helper-text="Make sure to fill this"
></scale-text-field>
```

```html
<scale-text-field
  label="With Error"
  helper-text="Something is wrong"
  invalid
></scale-text-field>
```

```html
<scale-text-field
  label="With Error"
  helper-text="Something with warning"
  variant="warning"
></scale-text-field>
```

```html
<scale-text-field
  label="With Success"
  helper-text="Something is successful"
  variant="success"
></scale-text-field>
```

```html
<scale-text-field label="Disabled" disabled></scale-text-field>
```

```html
<scale-text-field
  label="Read only"
  value="This cannot be changed"
  readonly
></scale-text-field>
```

--------------------------------

### Scale Card Component with Link Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-card--with-link

Demonstrates how to implement a 'scale-card' component with a link, including specifying the 'to', 'target', 'rel', and 'label' attributes for interactive card elements.

```html
<scale-card
  to="https://example.com"
  to="_blank"
  target="_blank"
  rel="noopener noreferrer"
  label="Example Card"
  >Lorem ipsur dolor sit amet</scale-card
>
```

--------------------------------

### Inline Style Customization for Scale Button

Source: https://telekom.github.io/scale/index_path=%2Fstory%2Fguidelines-customization-and-themes--page

Provides an example of customizing a single component instance by applying styles directly inline. This is useful for one-off adjustments.

```html
<scale-button style="--radius: 0">Sign out</scale-button>
```

--------------------------------

### Dropdown Component Example (HTML)

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fdeprecated-components-dropdown--error

Demonstrates the basic structure and usage of the scale-dropdown component with options. It includes attributes for label and selected options.

```html
<scale-dropdown label="select">
  <option value="1">item 1</option>
  <option value="2" selected>item 2</option>
  <option value="3">item 3</option>
</scale-dropdown>
```

--------------------------------

### Standard Small Scale Modal Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-modal--standard-small

Demonstrates a standard small Scale Modal with a heading, body content, and action buttons. It includes JavaScript to control the modal's open and close states.

```html
<scale-modal heading="Today is your lucky day" size="small" id="modal">
  <p>Hello. Welcome. What a pleasure it is to have you.</p>
  <scale-button slot="action" variant="secondary" onclick="closeModal()">
    Cancel
  </scale-button>
  <scale-button slot="action"> Primary Action </scale-button>
</scale-modal>

<script>
  const modal = document.getElementById('modal');
  function openModal() {
    modal.opened = true;
  }
  function closeModal() {
    modal.opened = false;
  }
</script>
```

--------------------------------

### Import and Initialize Scale Components with a Bundler

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-getting-started-for-developers--page

This code demonstrates how to import and initialize the Scale component library using a bundler or ES modules. It first imports the main CSS file and then applies polyfills and defines custom elements globally. This is the recommended approach for modern JavaScript projects.

```javascript
import '@telekom/scale-components/dist/scale-components/scale-components.css';
import {
  applyPolyfills,
  defineCustomElements,
} from '@telekom/scale-components/loader';

applyPolyfills().then(() => {
  defineCustomElements(window);
});
```

--------------------------------

### Backward Compatibility for Telekom Scale Header

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-telekom-brand-header-navigation--application-name

This snippet shows how to use the backward compatibility component for migrating from a previous version of the Brand Header. It includes basic setup and navigation configuration.

```HTML
<scale-telekom-header-data-back-compat
  app-name="Application Name"
  app-name-link="https://example.com"
  active-route-id="id"
></scale-telekom-header-data-back-compat>
```

```JavaScript
const header = window.document.querySelector(
  'scale-telekom-header-data-back-compat'
);
header.mainNavigation = [...[]];
header.iconNavigation = [...[]];
header.sectorNavigation = [...[]];
header.addonNavigation = [...[]];
```

--------------------------------

### Pagination Component Usage (HTML)

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-pagination--standard

Demonstrates basic usage of the Scale Pagination component with various properties like page size, start element, and total elements. This showcases how to configure the pagination display based on the dataset.

```html
<scale-pagination
  page-size="10"
  start-element="100"
  total-elements="200"
></scale-pagination>
```

--------------------------------

### Include Scale Components in Plain HTML

Source: https://telekom.github.io/scale/index_path=%2Fusage%2Fsetup-info-getting-started-for-developers--page

Adds the Scale component CSS and JavaScript bundle to a static HTML page using <link> and <script> tags. The CSS provides design tokens and fonts, while the script registers the custom elements. Place these tags inside the <head> of your document.

```html
<link
  rel=\"stylesheet\"
  href=\"node_modules/@telekom/scale-components/dist/scale-components/scale-components.css\"
/>
<script
  type=\"module\"
  src=\"node_modules/@telekom/scale-components/dist/scale-components/scale-components.esm.js\"
></script>
```

--------------------------------

### Include Scale Components CSS and JS in Plain HTML

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-getting-started-for-developers--page

This snippet shows how to include the Scale component library's CSS and JavaScript files directly in an HTML project. The CSS provides styling and design tokens, while the JavaScript enables component functionality. This method is suitable for projects without a build system.

```html
<link
  rel="stylesheet"
  href="node_modules/@telekom/scale-components/dist/scale-components/scale-components.css"
/>
<script
  type="module"
  src="node_modules/@telekom/scale-components/dist/scale-components/scale-components.esm.js"
></script>
```

--------------------------------

### Handling Events in Vue

Source: https://telekom.github.io/scale/index_path=%2Fstory%2Fsetup-info-scale-and-vue--page

Explanation on how to bind to custom events emitted by Scale components using the `scale-` prefix, and a code example.

```html
&lt;scale-slider @scale-input=&quot;handleInput&quot;&gt;&lt;/scale-slider&gt;
```

--------------------------------

### Telekom Footer Standard HTML Usage

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-telekom-footer--data-api

Example of how to implement the standard Telekom Footer component using HTML. It includes slots for notices and navigation links, demonstrating the structure for displaying copyright information and essential links.

```html
<scale-telekom-footer>
  <scale-telekom-footer-content>
    <span slot="notice"> © Deutsche Telekom AG 
    </span>
    <ul slot="navigation">
      <li>
        <a href="#"> Imprint 
        </a>
      </li>
      <li>
        <a href="#"> Data privacy 
        </a>
      </li>
      <li>
        <a href="#"> Terms and conditions 
        </a>
      </li>
      <li>
        <a href="#"> Consumer protection 
        </a>
      </li>
      <li>
        <a href="#"> Product information sheet 
        </a>
      </li>
      <li>
        <a href="#"> Youth protection 
        </a>
      </li>
    </ul>
  </scale-telekom-footer-content>
</scale-telekom-footer>
```

--------------------------------

### Standard Header Usage in HTML

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-telekom-brand-header-navigation--standard-header

Example of how to use the scale-telekom-header component with a scale-telekom-nav-list and scale-telekom-nav-item for the main navigation.

```html
<scale-telekom-header>
  <scale-telekom-nav-list slot="main-nav" aria-label="Main Navigation Links">
    <scale-telekom-nav-item aria-label="Topic One">
      <a href="#">Topic One</a>
    </scale-telekom-nav-item>
    <!-- … -->
  </scale-telekom-nav-list>
</scale-telekom-header>
```

--------------------------------

### Configure Vue 3 Webpack to Recognize Scale Custom Elements

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-scale-and-vue--page

Configures the Webpack build process to allow Vue to recognize Scale components by their tag prefix ('scale-') using `compilerOptions.isCustomElement`.

```javascript
// in webpack config
rules: [
  {
    test: /.vue$/,
    use: 'vue-loader',
    options: {
      compilerOptions: {
        isCustomElement: (tag) => tag.startsWith('scale-'),
      },
    },
  },
  // ...
];
```

--------------------------------

### Scale Modal Example with No Actions

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-modal--standard-small

Illustrates a Scale Modal configured without any action buttons in the footer. It still displays a heading and body content, controlled by JavaScript for opening and closing.

```html
<scale-modal heading="Today is your lucky day" size="small" id="modal">
  <p>Hello. Welcome. What a pleasure it is to have you.</p>
</scale-modal>

<script>
  const modal = document.getElementById('modal');
  function openModal() {
    modal.opened = true;
  }
  function closeModal() {
    modal.opened = false;
  }
</script>
```

--------------------------------

### Configure Vite to Recognize Scale Custom Elements

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-scale-and-vue--page

Configures Vite with the Vue plugin to enable recognition of Scale custom elements based on their tag prefix ('scale-') within Vue templates.

```javascript
// in vite.config.js
defineConfig({
  plugins: [
    vue({
      template: {
        compilerOptions: {
          isCustomElement: (tag) => tag.startsWith('scale-'),
        },
      },
    }),
  ],
});
```

--------------------------------

### Scale Dropdown with Custom Icon Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fdeprecated-components-dropdown--error

Provides an example of customizing the scale-dropdown component by adding a custom icon. The `scale-icon-content-calendar` is placed in the 'icon' slot, allowing for visual differentiation.

```html
<scale-dropdown label="With Custom Icon">
  <option value="1">item 1</option>
  <option value="2" selected>item 2</option>
  <option value="3">item 3</option>
  <scale-icon-content-calendar size="20" slot="icon"></scale-icon-content-calendar>
</scale-dropdown>
```

--------------------------------

### Implement Slim Header with scale-telekom-header

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-telekom-brand-header-navigation--standard-header

This snippet demonstrates the basic setup for a Slim Header using the 'scale-telekom-header' component. It includes essential attributes like 'app-name' and 'app-name-link' for application identification, along with ARIA labels for accessibility in navigation sections.

```html
<scale-telekom-header
  app-name="Application Name"
  app-name-link="https://example.com"
  meta-nav-aria-label="Meta navigation section"
  meta-nav-external-aria-label="External navigation section"
  lang-switcher-aria-label="Language switch section"
  main-nav-aria-label="Main navigation section"
>
  <!-- … -->
</scale-telekom-header>
```

--------------------------------

### Application Name Configuration in HTML

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-telekom-brand-header-navigation--standard-header

Example of configuring the scale-telekom-header component to display an application name, including its link and accessibility labels for navigation elements.

```html
<scale-telekom-header
  app-name="Application Name"
  app-name-link="https://example.com"
  meta-nav-aria-label="Meta navigation section"
  meta-nav-external-aria-label="External navigation section"
  lang-switcher-aria-label="Language switcher section"
  main-nav-aria-label="Main navigation"
  section
>
  <!-- … -->
</scale-telekom-header>
```

--------------------------------

### Small Scale Tag HTML Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-tag--colors

Shows how to render a smaller version of the 'scale-tag' component by applying the 'size="small"' attribute. This allows for more compact tag displays where space is limited.

```html
<scale-tag size="small">A small tag</scale-tag>
```

--------------------------------

### Standard Large Scale Modal Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-modal--standard-small

Shows a standard large Scale Modal, similar to the small version but with increased dimensions. It also includes JavaScript for managing the modal's visibility.

```html
<scale-modal heading="Today is your lucky day" size="large" id="modal">
  <p>Hello. Welcome. What a pleasure it is to have you.</p>
  <scale-button slot="action" variant="secondary" onclick="closeModal()">
    Cancel
  </scale-button>
  <scale-button slot="action"> Primary Action </scale-button>
</scale-modal>

<script>
  const modal = document.getElementById('modal');
  function openModal() {
    modal.opened = true;
  }
  function closeModal() {
    modal.opened = false;
  }
</script>
```

--------------------------------

### Setup Scale components in Angular

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-scale-and-angular--page

Installs the Scale component library via npm, loads the custom element definitions in the Angular entry point, and configures the build to include the required CSS. It also adds the CUSTOM_ELEMENTS_SCHEMA to module definitions to allow non‑Angular element names. After these steps, Scale components can be used directly in Angular templates.

```Shell
npm install @telekom/scale-components@next
```

```TypeScript
// src/main.ts
import { defineCustomElements } from '@telekom/scale-components/loader';

// ...

defineCustomElements();
```

```JSON
// angular.json
{
  "build": {
    "styles": [
      "node_modules/@telekom/scale-components/dist/scale-components/scale-components.css"
    ]
  }
}
```

```TypeScript
// src/app/app.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  // ...
  schemas:CUSTOM_ELEMENTS_SCHEMA],
})
export class AppModule {}
```

```TypeScript
// src/app/app-routing.module.ts
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
  // ..
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppRoutingModule {}
```

```HTML
<div>
  <scale-button>Click!</scale-button>
</div>
```

--------------------------------

### Use Color Scale Tag

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-tag--color-strong-tag

Shows how to define a scale-tag with a specified color, in this example, 'red'.

```html
&lt;scale-tag color="red" type="standard"&gt;Color tag&lt;/scale-tag&gt;
```

--------------------------------

### Standard Modal Usage with HTML and JavaScript

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-modal--scrolling-with-actions

This example shows implementing a basic Modal component with a heading, body content, and action buttons using Scale web components. It depends on scale-modal and scale-button elements from the Scale Design System. Inputs include props like heading and opened state; outputs are events like scale-open and scale-close. Limitations: Requires proper component registration and may need additional CSS for theming; deprecated events should be avoided.

```html
<scale-modal heading="Today is your lucky day" id="modal">
  <p>Hello. Welcome. What a pleasure it is to have you.</p>
  <scale-button slot="action" variant="secondary" onclick="closeModal()">
    Cancel
  </scale-button>
  <scale-button slot="action"> Primary Action </scale-button>
</scale-modal>
```

```javascript
const modal = document.getElementById('modal');
function openModal() {
  modal.opened = true;
}
function closeModal() {
  modal.opened = false;
}
```

--------------------------------

### Apply custom theme using CSS variables and HTML class

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fguidelines-customization-and-themes--page

This snippet demonstrates defining a theme using CSS custom properties inside a scoped .theme-example class and activating it by adding the class to the body element. It requires no external dependencies and works in any modern browser that supports CSS variables. The example includes styling for buttons, tags, and cards within the theme.

```HTML
<style>
  .theme-example {
    --telekom-color-primary-standard: limegreen;
    --telekom-color-primary-hovered: seagreen;
    --telekom-color-primary-pressed: green;
  }

  .theme-example scale-button,
  .theme-example scale-tag,
  .theme-example scale-card {
    --radius: 2em;
  }

  .theme-example scale-button[variant=\"plain\"]::part(base) {
    background: transparent;
    border: 2px solid currentColor;
  }
</style>

<body class=\"theme-example\"></body>
```

--------------------------------

### Minimal App Footer Initialization with Navigation Data

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fdeprecated-components-footer--minimal

Demonstrates how to initialize a minimal variant of the App Footer component and populate its navigation links using JavaScript. This involves getting the footer element by ID and assigning an array of navigation objects to its `footerNavigation` property.

```javascript
const footer = document.getElementById('footer');
footer.footerNavigation = [
  { name: 'Contact', id: 'Contact', href: '#contact' },
  {
    name: 'Terms and conditions',
    id: 'Terms and conditions',
    href: '#terms-and-conditions',
  },
  { name: 'Legal notice', id: 'Legal notice', href: '#legal-notice' },
  {
    name: 'Data privacy',
    id: 'Data privacy',
    href: '#data-privacy',
    icon: 'alert-imprint-dataprivacy',
  },
];
```

--------------------------------

### Configure Data-Back-Compat Footer Component with JavaScript

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-telekom-footer--extended

This snippet demonstrates how to include the <scale-telekom-footer-data-back-compat> element for legacy footer data migration and how to set its navigation data via JavaScript. The HTML part defines the component with minimal type and copyright attributes. The script selects the component and assigns an empty navigation array as an example configuration.

```HTML
<scale-telekom-footer-data-back-compat
  type=\"minimal\"
  copyright=\"© Deutsche Telekom AG\"
></scale-telekom-footer-data-back-compat>
```

```JavaScript
<script>
  const footer = window.document.querySelector(
    'scale-telekom-footer-data-back-compat'
  );
  footer.footerNavigation = [...[]];
</script>
```

--------------------------------

### Dismissable Scale Tag HTML Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-tag--colors

Demonstrates the usage of the 'scale-tag' component with the 'dismissable' attribute, rendering a tag that can be closed or removed by the user. This is a standard HTML element usage.

```html
<scale-tag dismissable>A dismissable tag</scale-tag>
```

--------------------------------

### Scale App Footer Minimal Variant Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fdeprecated-components-footer--custom-slots

Demonstrates the usage of the 'minimal' variant for the Scale App Footer component. This variant likely provides a more compact or simplified layout. The JavaScript snippet shows how to dynamically populate the footer navigation items.

```html
<scale-app-footer id="footer" claim-lang="en" variant="minimal">
</scale-app-footer>

```

```javascript
const footer = document.getElementById('footer');
footer.footerNavigation = [
  { name: 'Contact', id: 'Contact', href: '#contact' },
  {
    name: 'Terms and conditions',
    id: 'Terms and conditions',
    href: '#terms-and-conditions',
  },
  { name: 'Legal notice', id: 'Legal notice', href: '#legal-notice' },
  {
    name: 'Data privacy',
    id: 'Data privacy',
    href: '#data-privacy',
    icon: 'alert-imprint-dataprivacy',
  },
];

```

--------------------------------

### Flyout Menu Component Usage

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-flyout-menu--cascading-menu

Example of how to implement the Scale Flyout Menu component. This component allows for custom menu items and can be triggered by various elements, such as buttons. It requires the 'scale-menu-flyout', 'scale-button', and 'scale-icon-service-settings' components.

```html
<scale-menu-flyout>
  <scale-button slot="trigger" variant="secondary" icon-only>
    <scale-icon-service-settings
      accessibility-title="Open menu"
    ></scale-icon-service-settings>
  </scale-button>
  <scale-menu-flyout-list>
    <scale-menu-flyout-item>Menu Item 1</scale-menu-flyout-item>
    <scale-menu-flyout-item>Menu Item 2</scale-menu-flyout-item>
    <scale-menu-flyout-item>Menu Item 3</scale-menu-flyout-item>
  </scale-menu-flyout-list>
</scale-menu-flyout>
```

--------------------------------

### Fields Configuration Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-data-grid--date-cell

Defines the structure for table columns. Each object represents a column with its type and label. The order of objects determines column display order, and the number of objects must match the number of items in each row.

```javascript
const fields = [ {
  type: 'number',
  label: 'ID',
}, {
  type: 'text',
  label: 'Name',
},
{
  type: 'date',
  label: 'Time',
}, ];
```

--------------------------------

### Scale Menu: Advanced Flyout Structure

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-flyout-menu--cascading-menu

Provides an example of a complex scale-menu-flyout structure, showcasing nested sublists, dividers, prefixes, and suffixes within menu items. This demonstrates advanced layout capabilities.

```html
<scale-menu-flyout>
  <scale-button slot="trigger" variant="secondary" icon-only>
    <scale-icon-action-filter
      accessibility-title="Open menu"
    ></scale-icon-action-filter>
  </scale-button>
  <scale-menu-flyout-list>
    <scale-menu-flyout-item>Item Title</scale-menu-flyout-item>
    <scale-menu-flyout-item
      >Really Quite Long Item Title</scale-menu-flyout-item
    >
    <scale-menu-flyout-divider></scale-menu-flyout-divider>
    <scale-menu-flyout-item
      >Item With Suffix 1<span slot="suffix">⌘F</span></scale-menu-flyout-item
    >
    <scale-menu-flyout-item
      >Item With Suffix 2<span slot="suffix">⌘H</span></scale-menu-flyout-item
    >
    <scale-menu-flyout-divider></scale-menu-flyout-divider>
    <scale-menu-flyout-item>
      Other Options
      <scale-menu-flyout-list slot="sublist">
        <scale-menu-flyout-item>
          <scale-icon-action-cut-paste
            slot="prefix"
          ></scale-icon-action-cut-paste
          >Item With Prefix 1
        </scale-menu-flyout-item>
        <scale-menu-flyout-item>
          <scale-icon-action-loop slot="prefix"></scale-icon-action-loop>Item
          With Prefix 2
          <scale-menu-flyout-list slot="sublist">
            <scale-menu-flyout-item>Third Level Item 1</scale-menu-flyout-item>
            <scale-menu-flyout-item>Third Level Item 2</scale-menu-flyout-item>
            <scale-menu-flyout-item>Third Level Item 3</scale-menu-flyout-item>
          </scale-menu-flyout-list>
        </scale-menu-flyout-item>
        <scale-menu-flyout-item>
          <scale-icon-action-more slot="prefix"></scale-icon-action-more>Item
          With Prefix 3
        </scale-menu-flyout-item>
      </scale-menu-flyout-list>
    </scale-menu-flyout-item>
  </scale-menu-flyout-list>
</scale-menu-flyout>
```

--------------------------------

### HTML Usage Examples for Scale Textarea

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-text-area--helper-text

Shows how to use the scale-textarea component with various attributes such as placeholder, helper text, error state, disabled, read-only, max length with counter, and custom row count.

```HTML
<scale-textarea
  label="Placeholder"
  placeholder="this is the placeholder"
></scale-textarea>
```

```HTML
<scale-textarea
  label="Helper Text"
  helper-text="Make sure to fill this"
></scale-textarea>
```

```HTML
<scale-textarea
  label="With Error"
  helper-text="Something is wrong"
  invalid="true"
></scale-textarea>
```

```HTML
<scale-textarea label="Disabled" disabled></scale-textarea>
```

```HTML
<scale-textarea
  label="Read only"
  value="This cannot be changed"
  readonly
></scale-textarea>
```

```HTML
<scale-textarea
  label="Max Length With Counter"
  max-length="10"
  counter
></scale-textarea>
```

```HTML
<scale-textarea label="More rows" rows="10"></scale-textarea>
```

--------------------------------

### Scale Dropdown Warning State Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fdeprecated-components-dropdown--error

Demonstrates the scale-dropdown component in a warning state, signaling a potential issue or caution. It is configured with the `variant` attribute set to 'warning' and provides `helper-text` for the warning message.

```html
<scale-dropdown
  label="Warning"
  variant="warning"
  helper-text="Something with warning..."
>
  <option value="1">item 1</option>
  <option value="2" selected>item 2</option>
  <option value="3">item 3</option>
</scale-dropdown>
```

--------------------------------

### Scale Modal Example with No Body Content

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-modal--standard-small

Presents a Scale Modal that omits the body content, focusing only on the heading and action buttons. The provided JavaScript enables modal open/close functionality.

```html
<scale-modal heading="Today is your lucky day" size="small" id="modal">
  <scale-button slot="action" variant="secondary" onclick="closeModal()">
    Cancel
  </scale-button>
  <scale-button slot="action"> Primary Action </scale-button>
</scale-modal>

<script>
  const modal = document.getElementById('modal');
  function openModal() {
    modal.opened = true;
  }
  function closeModal() {
    modal.opened = false;
  }
</script>
```

--------------------------------

### Bind to Scale Custom Events in Vue

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-scale-and-vue--page

Shows how to listen for Scale component custom events (prefixed with 'scale-') using Vue's standard event binding syntax (@event-name). This example binds to the 'scale-input' event on a slider.

```html
<scale-slider @scale-input="handleInput"></scale-slider>
```

--------------------------------

### Using Scale Proxy Components in React

Source: https://telekom.github.io/scale/index_path=%2Fstory%2Fsetup-info-scale-and-react--page

This snippet illustrates importing and using the auto-generated React wrapper for Scale components via @telekom/scale-components-react@next package. Install the package first with npm. It wraps web components to mitigate React limitations like stringified props; supports standard React props and children.

```jsx
import React from 'react';
import { ScaleButton } from '@telekom/scale-components-react';

const App = () => (
  <div>
    <ScaleButton>Click</ScaleButton>
  </div>
);

export default App;
```

--------------------------------

### Scale Dropdown Success State Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fdeprecated-components-dropdown--error

Shows the scale-dropdown component configured for a success state, often used to confirm a successful operation or selection. It utilizes the `variant` attribute set to 'success' and includes descriptive `helper-text`.

```html
<scale-dropdown
  label="Success"
  variant="success"
  helper-text="Something went successful..."
>
  <option value="1">item 1</option>
  <option value="2" selected>item 2</option>
  <option value="3">item 3</option>
</scale-dropdown>
```

--------------------------------

### Configure Vue 2 to Ignore Scale Custom Elements

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-scale-and-vue--page

Configures Vue 2 to treat custom elements starting with 'scale-' as valid HTML elements, preventing warnings and ensuring proper rendering of Scale components.

```javascript
// main.js
Vue.config.ignoredElements = [/scale-w*/];
```

--------------------------------

### Pagination Component - Translated Aria Labels (HTML)

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-pagination--standard

Demonstrates customization of aria labels for improved accessibility. Provides examples for first page, last page, previous page, and next page labels in German.

```html
<scale-pagination
  page-size="10"
  start-element="100"
  total-elements="200"
  aria-label-first-page="Zur ersten Seite"
  aria-label-last-page="Zur nächsten Seite"
  aria-label-previous-page="Zur vorigen Seite"
  aria-label-next-page="Zur letzten Seite"
></scale-pagination>
```

--------------------------------

### Variant Styling for Squared Button using Shadow Parts

Source: https://telekom.github.io/scale/index_path=%2Fstory%2Fguidelines-customization-and-themes--page

Combines attribute selectors and `::part` to style a component variant. This example targets the 'base' part of a squared scale-button and applies specific background colors on hover.

```css
scale-button[variant='squared']::part(base) {
  border-radius: 0;
  background: var(--telekom-color-additional-teal-600);
}

scale-button[variant='squared']::part(base):hover {
  background: var(--telekom-color-additional-teal-900);
}
```

--------------------------------

### Disable ESLint Rule for Deprecated Slot Attribute

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fsetup-info-scale-and-vue--page

Disables the `vue/no-deprecated-slot-attribute` ESLint rule to avoid conflicts when using Scale components, particularly if older versions or specific slot syntaxes are involved.

```javascript
// In .eslintrc.js or in package.json
rules: {
  "vue/no-deprecated-slot-attribute": "off",
},
```

--------------------------------

### Target Scale Button Base Element with Shadow Parts

Source: https://telekom.github.io/scale/index_path=%2Fstory%2Fguidelines-customization-and-themes--page

Demonstrates using the `::part` pseudo-element to target internal elements of a component directly. This example targets the 'base' part of a scale-button to modify its border-radius.

```css
scale-button::part(base) {
  border-radius: 0;
}
```

--------------------------------

### Link Component With Icon Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-link--standard

Shows how to include an icon within a link component. This is useful for indicating external links or specific actions. The icon is slotted using 'slot="icon"'.

```html
<scale-link target="_blank" href="#top">
  A link, with an icon
  <scale-icon-navigation-external-link
    size="16"
    accessibility-title="open link in new tab"
    slot="icon"
  ></scale-icon-navigation-external-link>
</scale-link>

```

--------------------------------

### Create Squared Button Variant using CSS Class

Source: https://telekom.github.io/scale/index_path=%2Fstory%2Fguidelines-customization-and-themes--page

Shows how to create a new 'variant' of a component by grouping CSS variable overwrites under a class selector. This example defines a 'squared' variant for scale-button.

```html
<style>
  scale-button.squared {
    --radius: 0;
  }
</style>

<scale-button class="squared">Sign in</scale-button>
```

--------------------------------

### Initialize Scale Custom Elements in Angular (TypeScript)

Source: https://telekom.github.io/scale/index_path=%2Fstory%2Fsetup-info-scale-and-angular--page

Imports and registers the Scale web components so they can be used as custom elements in Angular templates. Place this initialization in the main entry file (e.g., main.ts).

```typescript
// src/main.ts
import { defineCustomElements } from '@telekom/scale-components/loader';

// ...

defineCustomElements();
```

--------------------------------

### Implement Subtle Header with scale-telekom-header

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-telekom-brand-header-navigation--standard-header

This code example shows the configuration for a Subtle Header using the 'scale-telekom-header' component. Similar to the Slim Header, it sets the application name and link, and configures ARIA labels for various navigation elements to ensure accessibility.

```html
<scale-telekom-header
  app-name="Application Name"
  app-name-link="https://example.com"
  meta-nav-aria-label="Meta navigation section"
  meta-nav-external-aria-label="External navigation section"
  lang-switcher-aria-label="Language switcher section"
  main-nav-aria-label="Main navigation section"
>
  <!-- … -->
</scale-telekom-header>
```

--------------------------------

### Rows Data Example

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-data-grid--date-cell

Represents the data for each row in the table. Each row is a flat array where elements correspond to the fields defined. The number of elements must match the `fields` array length, and types must align with field definitions.

```javascript
const rows = [
  [1, 'John', '12:30'],
  [2, 'Mary', '2:12'],
  [3, 'Patek', '16:01'],
  [4, 'Heidi', '3:15'],
  [5, 'Muhammad', '21:45'],
];
```

--------------------------------

### Table Component: Standard with Sorting Icons (HTML)

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-table--with-sorting-icons

Demonstrates the standard HTML structure for a sortable table component within the Scale Design System. It includes column headers, data rows with cells, and examples of sorting icons.

```html
# Table
## Standard
All sortable columns are focusable Title | Tags | Stats | Time |  Euros   
---|---|---|---|---
Jane | 
  * Other
  * N/A
  * Demo

| 9.356 | 00:00:20 | 100.245,10  
Jack | 
  * Other
  * N/A
  * Demo

| 3.356 | 00:00:30 | 100.345,10  
John | 
  * Other
  * N/A
  * Demo

| 6.356 | 00:00:40 | 100.445,10  
Total |  |  | 00:00:20 | 100.245,10  
Name| Description| Default| Control   
---|---|---|---
Hide props itemsprops| Hide props items  
showSort| boolean| -| Set boolean  
size| (optional) DEPRECATED - css overwrite should replace size| -| -  
striped| boolean| -| Set boolean  
styles| string| -| Set string  
Hide slots itemsslots| Hide slots items  
default| unknown| -| Set object  
```

--------------------------------

### Using Scale Components Directly in React

Source: https://telekom.github.io/scale/index_path=%2Fstory%2Fsetup-info-scale-and-react--page

This example shows rendering a Scale button directly as a custom HTML element in a React component without additional imports for the component itself. It relies on the prior setup of defineCustomElements. The component accepts children as content; limitations apply to props and events due to React's attribute handling.

```jsx
import React from 'react';

const App = () => (
  <div>
    <scale-button>Click</scale-button>
  </div>
);

export default App;
```

--------------------------------

### Configure Angular Build Styles for Scale Components (JSON)

Source: https://telekom.github.io/scale/index_path=%2Fstory%2Fsetup-info-scale-and-angular--page

Adds the Scale component stylesheet to the Angular build configuration so that component styles are applied globally. Update the "styles" array in angular.json.

```json
{
  "build": {
    "styles": [
      "node_modules/@telekom/scale-components/dist/scale-components/scale-components.css"
    ]
  }
}
```

--------------------------------

### Implement Telekom Scale Header with Profile Menu

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-telekom-brand-header-navigation--application-name

This snippet demonstrates how to set up the Telekom Scale header with a profile menu. It includes configuration for login settings, logout URL, and dynamically setting user info and service links via JavaScript.

```HTML
<scale-telekom-header>
  <!-- ... -->
  <scale-telekom-nav-list variant="functions" slot="functions" alignment="right" aria-label="Functions Menu" role="none">
    <scale-telekom-profile-menu
      login-settings-url="https://idm.account.telekom.com/account-manager"
      hide-login-settings="false"
      logout-url="https://accounts.login.idm.telekom.com/sessionmessage/logout?post_logout_redirect_uri=$Target-URL"
      logged-in="true"
      app-name="Application"
      label="Alexander"
      accessibilityLabel="open user menu: Alexander"
      close-menu-accessibility-label="close menu"
      login-settings-label="Login Settings"
      logout-label="Log out"
      <!-- set user-info & service-links via script, see below -->
    ></scale-telekom-profile-menu>
  </scale-telekom-nav-list>
</scale-telekom-header>
```

```JavaScript
let serviceLinks = [
  {
    name: 'My Account',
    href: 'https://www.telekom.de/mein-kundencenter',
    icon: 't-product-measure-internet-speed',
  },
  {
    name: 'E-Mail Center',
    href: 'https://www.telekom.de/e-mail/e-mail-center',
    icon: 'communication-mail-opened',
  },
  {
    name: 'MagentaTV',
    href: 'https://web.magentatv.de/EPG/',
    icon: 't-product-magenta-tv',
  },
  {
    name: 'MagentaSport',
    href: 'https://www.magentasport.de',
    icon: 't-product-telekom-1t1',
  },
  {
    name: 'MagentaCLOUD',
    href: 'https://magentacloud.de',
    icon: 'action-upload-to-cloud',
  },
  {
    name: 'MagentaHome Web',
    href: 'https://cockpit.telekom.net',
    icon: 'home-smarthome',
  }
];
window.onload = () => {
  let profileMenu = document.querySelector('scale-telekom-profile-menu');
  profileMenu.userInfo = JSON.stringify({
    name: 'Alexander Dreyer',
    email: 'alexander.dreyer@t-online.de',
  });
  profileMenu.serviceLinks = JSON.stringify(serviceLinks);

  // optional: set a custom handler for clicks on logout button
  profileMenu.logoutHandler = () => {
    // ...
  }
};
```

--------------------------------

### Render Scale Textarea Component using HTML

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-text-area--read-only

This snippet demonstrates how to render a Scale Textarea component with a label, row count, and vertical resize behavior. It requires the Scale Design System web components to be loaded on the page. The example outputs a functional textarea element styled according to the design system.

```HTML
<scale-textarea label=\"Textarea\" rows=\"3\" resize=\"vertical\"></scale-textarea>
```

--------------------------------

### Render Scale Dropdown Component in Different States

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fdeprecated-components-dropdown--with-custom-icon

Shows how to use the <scale-dropdown> custom element with various attributes to represent disabled, error, success, warning, and icon states. Each example includes <option> children and optional helper-text or variant attributes. No additional JavaScript is required; the component relies on the defined CSS variables.

```html
<scale-dropdown label="Disabled" disabled>
  <option value="1">item 1</option>
  <option value="2" selected>item 2</option>
  <option value="3">item 3</option>
</scale-dropdown>
```

```html
<scale-dropdown label="Error" invalid helper-text="Something went wrong...">
  <option value="1">item 1</option>
  <option value="2" selected>item 2</option>
  <option value="3">item 3</option>
</scale-dropdown>
```

```html
<scale-dropdown
  label="Success"
  variant="success"
  helper-text="Something went successful..."
>
  <option value="1">item 1</option>
  <option value="2" selected>item 2</option>
  <option value="3">item 3</option>
</scale-dropdown>
```

```html
<scale-dropdown
  label="Warning"
  variant="warning"
  helper-text="Something with warning..."
>
  <option value="1">item 1</option>
  <option value="2" selected>item 2</option>
  <option value="3">item 3</option>
</scale-dropdown>
```

```html
<scale-dropdown label="With Custom Icon">
  <option value="1">item 1</option>
  <option value="2" selected>item 2</option>
  <option value="3">item 3</option>
  <scale-icon-content-calendar size="20" slot="icon"></scale-icon-content-calendar>
</scale-dropdown>
```

--------------------------------

### Define Table Fields Configuration in JavaScript

Source: https://telekom.github.io/scale/index_path=%2Fdocs%2Fcomponents-data-grid--select-cell

Creates a `fields` array that defines each column's type, label, and other options for the Scale table. This JavaScript configuration is required to match the structure of the `rows` data. Adjust the objects to include additional field options as needed.

```JavaScript
const fields = [ { type: 'number', label: 'ID', }, { type: 'text', label:
'Name', }, { type: 'date', label: 'Time', }, ];
```
Tokens:
Raw