### Import Design Tokens via CDN Source: https://zds.zurich.com/0.7.0/getting-started/packages/design-tokens Loads the @zurich/design-tokens package directly from a CDN into the HTML document's head. This is the quickest way to start using the design tokens without any local installation. Ensure the link is placed within the `` section of your HTML. ```html ``` -------------------------------- ### Z-Navigation Component with Menu, Routes, and Footer Source: https://zds.zurich.com/0.7.0/organisms/navigation__web Example of using the Z-Navigation component with comprehensive configurations for menu items, navigation routes (including icons), and footer links. This demonstrates a fully featured navigation setup. ```html ``` -------------------------------- ### Vue: Basic Setup with z-icon Source: https://zds.zurich.com/0.7.0/getting-started/packages/web-components Sets up a basic Vue application to use Zurich Web Components. It imports the global styles and mounts the main App component. This example focuses on integrating Web Components at the application level. ```ts import { createApp } from 'vue'; import App from './App.vue'; import '@zurich/web-components/styles.css'; createApp(App).mount('#app'); ``` -------------------------------- ### Basic ActionMenu Usage Source: https://zds.zurich.com/0.7.0/layouts/action_menu__angular Demonstrates the basic usage of the ActionMenu component by rendering it with 'Example' as its content. This is a simple starting point for integrating the component. ```html Example ``` -------------------------------- ### Install @zurich/web-components package Source: https://zds.zurich.com/0.7.0/getting-started/packages After configuring authentication and the `.npmrc` file, this command installs the `@zurich/web-components` package from the specified registry. This is a typical NPM package installation command. ```bash npm i @zurich/web-components ``` -------------------------------- ### Install @zurich/dev-utils via npm Source: https://zds.zurich.com/0.7.0/getting-started/packages/dev-utils Installs the @zurich/dev-utils package as a development dependency using npm. ```bash npm i -D @zurich/dev-utils ``` -------------------------------- ### MobileNavBar HTML Usage Examples Source: https://zds.zurich.com/0.7.0/organisms/mobile_nav_bar Examples demonstrating how to implement the MobileNavBar component using HTML, showcasing different parameter configurations for custom styling and theming. ```html ' ``` ```html " ``` ```html " ``` -------------------------------- ### Flag Component HTML Examples Source: https://zds.zurich.com/0.7.0/atoms/flag Examples demonstrating how to use the Flag component with different parameters for customization. Supports direct attribute setting or stringified JSON for custom properties. ```html ``` ```html ``` ```html ``` -------------------------------- ### Install Web Components (NPM) Source: https://zds.zurich.com/0.7.0/getting-started/how_to_start/how_it_works Installs the Web Components package as a development dependency. This enables local usage and leverages TypeScript and JSDocs for enhanced development experience. ```sh npm i -D @zurich/web-components ``` -------------------------------- ### React Setup for ZDS Web Components Source: https://zds.zurich.com/0.7.0/getting-started/packages/web-components Provides the basic React setup for rendering ZDS Web Components. It includes importing necessary React DOM functions and the global styles for the web components. This setup ensures that the web components are correctly initialized within the React application. ```typescript import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App.tsx'; import '@zurich/web-components/styles.css'; const root = document.getElementById('root') as HTMLElement; ReactDOM .createRoot(root) .render( , ); ``` -------------------------------- ### Rating Component Basic HTML Example Source: https://zds.zurich.com/0.7.0/inputs/rating A basic HTML example demonstrating the usage of the z-rating component with custom fill color and theme. ```html ``` -------------------------------- ### RangeInput Component Examples Source: https://zds.zurich.com/0.7.0/inputs/range_input__vue_framework=vue Provides various examples of using the ZvRangeInput component with different parameters and attributes. It covers setting the initial model value, labels, configuration (line/shaped), help text, and range limits. ```html ``` ```html ``` ```html Range input ``` ```html ``` ```html Help text ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` -------------------------------- ### Install CSS Components via NPM Source: https://zds.zurich.com/0.7.0/getting-started/packages/css-components Installs the @zurich/css-components package using NPM. This command also installs its dependency, @zurich/design-tokens. It is suitable for local development and integration with NPM-style build systems. ```bash npm i @zurich/css-components ``` -------------------------------- ### Vue: Global Setup with Scripts Source: https://zds.zurich.com/0.7.0/getting-started/packages/css-components Shows the global setup for Vue applications, including importing base styles and JavaScript files in the main entry point for application-wide access. ```ts import { createApp } from 'vue'; import App from './App.vue'; import '@zurich/css-components/base.css'; // Import base styles import '@zurich/css-components/javascript.js'; // Import scripts createApp(App) .mount('#app'); ``` -------------------------------- ### Basic RadioSelect Example Source: https://zds.zurich.com/0.7.0/inputs/radio_select__web A fundamental example of the RadioSelect component with basic options and a label. It shows the default behavior and structure. ```html ``` -------------------------------- ### Install better-vsts-npm-auth (Bash) Source: https://zds.zurich.com/0.7.0/getting-started/packages Installs the better-vsts-npm-auth package globally using npm. This is a prerequisite for authenticating with Azure DevOps feeds. ```bash npm i -g better-vsts-npm-auth ``` -------------------------------- ### HTML Example with ButtonGroup and z-button (HTML) Source: https://zds.zurich.com/0.7.0/layouts/button_group__web This example demonstrates how to use the ButtonGroup component in HTML, including adding 'z-button' elements as children to define the buttons within the group. No additional parameters are shown in this basic example. ```html Button 1 Dislike Like ``` -------------------------------- ### KpiValue Component HTML Example Source: https://zds.zurich.com/0.7.0/data/kpi_value This example demonstrates how to use the KpiValue component in HTML, including setting custom CSS properties using the 'custom' and 'custom-str' attributes, and applying a theme. ```html ``` -------------------------------- ### Install Design Tokens via NPM Source: https://zds.zurich.com/0.7.0/getting-started/packages/design-tokens Installs the @zurich/design-tokens package using NPM. This is suitable for local development and integration into NPM-style build systems. After installation, the CSS can be imported directly into your JavaScript or TypeScript files. ```bash npm i @zurich/design-tokens ``` -------------------------------- ### ImageStage Component Example (HTML) Source: https://zds.zurich.com/0.7.0/molecules/image_stage An example demonstrating how to use the ImageStage component with custom styling applied via a stringified JSON object for the 'custom' attribute. ```html " /> ``` -------------------------------- ### HTML Example with ButtonGroup config parameter (HTML) Source: https://zds.zurich.com/0.7.0/layouts/button_group__web This example shows how to configure the ButtonGroup component using the 'config' parameter. The 'config' string allows for specifying the type and size of the buttons within the group. ```html Dislike Like ``` -------------------------------- ### Install vsts-npm-auth globally Source: https://zds.zurich.com/0.7.0/getting-started/packages This command installs the `vsts-npm-auth` tool globally, which is required for authenticating with private NPM registries like Azure DevOps. It ensures that authentication is always attempted. ```bash npm i -g vsts-npm-auth --registry https://registry.npmjs.org --always-auth true --no-save ``` -------------------------------- ### ButtonGroup Theme Customization Example Source: https://zds.zurich.com/0.7.0/layouts/button_group Illustrates how to set the theme for the ButtonGroup component. This example applies the 'dark' theme. ```html ``` -------------------------------- ### React: Global Setup for Components Source: https://zds.zurich.com/0.7.0/getting-started/packages/css-components Illustrates the global setup for React applications using Zurich CSS Components. This involves importing base styles and JavaScript files globally in the main entry point. ```tsx import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App.tsx'; import '@zurich/css-components/base.css'; // Import base styles import '@zurich/css-components/javascript.js'; // Import scripts const root = document.getElementById('root') as HTMLElement; ReactDOM .createRoot(root) .render( , ); ``` -------------------------------- ### SafeSpace Customization Example (HTML) Source: https://zds.zurich.com/0.7.0/atoms/safe_space This example shows how to apply custom CSS properties to the SafeSpace component, specifically setting the background color using the 'custom' object. ```html ``` -------------------------------- ### Example: Using the Icon Component Source: https://zds.zurich.com/0.7.0/getting-started/packages/css-components Demonstrates the usage of the icon component within a HTML body, setting a dark theme and specifying an arrow icon. This example assumes the necessary design tokens and CSS components are already linked. ```html ``` -------------------------------- ### Install CSS Components (NPM) Source: https://zds.zurich.com/0.7.0/getting-started/how_to_start/how_it_works Installs the CSS components package as a development dependency. This allows for local usage and access to TypeScript and JSDocs features. ```sh npm i -D @zurich/css-components ``` -------------------------------- ### ProgressBar Theme Example (HTML) Source: https://zds.zurich.com/0.7.0/atoms/progress_bar This snippet illustrates how to set the theme for the ProgressBar component using the 'z-theme' attribute, with 'dark' as an example value. ```html ``` -------------------------------- ### Form Customization Example (HTML) Source: https://zds.zurich.com/0.7.0/layouts/form Demonstrates how to customize the Form component using the 'custom-str' attribute for margin and gap. This example shows a complete form structure with text inputs and a submit button. ```html Submit ``` -------------------------------- ### Avatar Component Theme Example (HTML) Source: https://zds.zurich.com/0.7.0/molecules/avatar This example demonstrates how to set the theme for the Avatar component using the 'z-theme' attribute. Supported themes are 'light' and 'dark', allowing for visual consistency with the application's theme. ```html ``` -------------------------------- ### Alert Component API Source: https://zds.zurich.com/0.7.0/molecules/alert This section details the parameters available for the Alert component and provides examples of its implementation. ```APIDOC ## Alert Component ### Description Alerts are interactive notifications that communicate direct and concise feedback to the user, with the option to add a simple action they can perform. They can have an associated icon (on the left) for the message and can be manually dismissed by the user. ### Implementations - CSS Components - Web Components ### Parameters #### Custom Properties - **`config`** (string) - Defines the state of the alert. Possible values are: `info`, `alert`, `negative` and `positive`. - **`content`** (string) - The content of the alert. - **`icon`** (string) - The icon to display with the alert. - **`confirm-text`** (string) - The text for the confirmation button. - **`hide-close`** (boolean) - Hides the close button. - **`custom`** (object) - A record of key-value pairs to set the CSS custom tokens. It's a complex attribute set as a JS object in stringified JSON format. - **Example:** `` - **`custom-str`** (string) - The stringified version of the `custom` property. It follows the pattern `key:value;key:value;`, with the possibility of setting multiple values and spaces between the punctuation characters. - **Example:** `` - **`z-theme`** (string) - Sets the theme of the component. Possible values are `light` and `dark`. - **Example:** `` ### Customization CSS Variable| Type| Description ---|---|--- `--z-alert--bg`| color| The background color of the alert. `--z-alert--color`| color| The text color of the alert. Both background and text colors can be customized using the `--z-alert--bg` and `--z-alert--color` custom properties. ### Request Example ```html Custom alert ``` ### Response Example (No specific response structure is defined for this component as it's a UI element. The examples above demonstrate its usage.) ``` -------------------------------- ### Basic Select component usage Source: https://zds.zurich.com/0.7.0/inputs/select__web A fundamental example of the Select component, demonstrating its core functionality with a model binding and a list of options. ```html ``` -------------------------------- ### RangeInput Usage Examples Source: https://zds.zurich.com/0.7.0/inputs/range_input__vue Demonstrates how to use the ZvRangeInput component with various parameters and configurations. ```APIDOC ## RangeInput Parameters Use ### `modelValue` Attention! If you hardcode this value, it will not be reactive and the selection won't change. Use a variable instead and, ideally, a closed loop. ```html ``` ### `label` The `label` parameter is used to set the text label of the component. Make sure you always use it. ```html ``` Can also use the `label` slot: ```html Range input ``` ### `config` The `config` parameter is used to set the shape of the input between `lined` and `shaped`. Being omitted will render the default `shaped` shape. ```html ``` ### `help-text` The `help-text` parameter is used to provide additional assistance to the user. ```html ``` It can also use the `help-text` slot: ```html Help text ``` ### `range` The `range` parameter is used to set the range of the input. It must be an array with two numbers. The first number is the minimum value and the second number is the maximum value. ```html ``` ###### `min` Instead of using `range` we can use just `min`. This overrides the `range` value. ```html ``` ###### `max` Instead of using `range` we can use just `max`. This overrides the `range` value. ```html ``` ### Flags Usage Examples #### `disabled` ```html ``` #### `invalid` ```html ``` ``` -------------------------------- ### Basic ZvNumberInput Usage in Vue Source: https://zds.zurich.com/0.7.0/inputs/number_input__vue Demonstrates the basic implementation of the ZvNumberInput component in a Vue template. It includes setting a label for the input field. This is a fundamental example for getting started with the component. ```html ``` -------------------------------- ### Z-Alert Configuration Examples Source: https://zds.zurich.com/0.7.0/molecules/alert__web Demonstrates how to use the 'config' attribute to set different alert states: info, alert, negative, and positive. ```html This is an info alert This is an alert alert This is a negative alert This is a positive alert ``` -------------------------------- ### Basic Promo Component Usage with Image Source: https://zds.zurich.com/0.7.0/molecules/promo__react Demonstrates the basic usage of the ZrPromo component, setting a header and an image source URL. ```jsx ``` -------------------------------- ### Progress Tracker Reset Method Example Source: https://zds.zurich.com/0.7.0/inputs/progress_tracker__web Demonstrates how to call the `reset()` method on a ProgressTracker instance. This example includes a button to trigger the reset, which clears internal states and emits 'change' and 'restarted' events. ```html
``` -------------------------------- ### Basic ZrLoader Usage Examples Source: https://zds.zurich.com/0.7.0/atoms/loader__react_framework=react Demonstrates the basic usage of the ZrLoader component, including instances with no content, with a text content, and with content passed via the 'content' prop. ```html Loading text ``` -------------------------------- ### Define Carousel Slides with Slots (HTML) Source: https://zds.zurich.com/0.7.0/layouts/carousel__angular This example illustrates how to define individual slides within the Carousel component using HTML slots. Each slide must use the 'slot' attribute with an incremental number, starting from 'slide-1'. This ensures the component correctly renders and manages each slide's content. ```html
``` -------------------------------- ### Import TextInput Component Source: https://zds.zurich.com/0.7.0/inputs/text_input__react_framework=react Demonstrates how to import the TextInput component. Ensure the correct path is used for your project setup. ```javascript import { TextInput } from '@zenzu/ui'; ``` -------------------------------- ### Basic Progress Tracker Usage Source: https://zds.zurich.com/0.7.0/inputs/progress_tracker__react A basic example of using the ZrProgressTracker component without any specific configurations. It renders with default settings. ```html ``` -------------------------------- ### ZResizer Component Output Example Source: https://zds.zurich.com/0.7.0/functionalities/resizer__web Example of the output format for the ZResizer component, likely representing dimensions and positions. ```json {"x":0,"y":0,"width":16,"height":0,"top":0,"right":16,"bottom":0,"left":0} ``` -------------------------------- ### Basic Z-Pagination with Pages Parameter Source: https://zds.zurich.com/0.7.0/inputs/pagination__web This example demonstrates the basic usage of the z-pagination component, setting the total number of pages using the 'pages' attribute. This is a fundamental configuration for the component. ```html ``` -------------------------------- ### Forced Text Input Configuration (HTML) Source: https://zds.zurich.com/0.7.0/getting-started/how_to_start/basic_concepts Illustrates setting component configuration directly in the HTML using attributes. This method is efficient for configurations as it renders immediately. ```html ``` -------------------------------- ### SnapScroll Theme Example (HTML) Source: https://zds.zurich.com/0.7.0/layouts/snap_scroll This example illustrates how to set the theme of the SnapScroll component to 'dark' using the 'z-theme' attribute. ```html ``` -------------------------------- ### HTML: Example of text contrast adjustments with z-theme Source: https://zds.zurich.com/0.7.0/foundations/themes/index Illustrates how different text types (default, disabled, error, warning, success, info) adapt their colors for better contrast and readability within a section. This example shows the visual output of applying themes to text elements. ```html

Hello

This is a text

Disabled text

Error text

Warning text

Success text

Info text

``` -------------------------------- ### EmptyState Web Component Implementation Source: https://zds.zurich.com/0.7.0/molecules/empty_state This snippet shows how to implement the EmptyState component as a Web Component. It includes examples of setting the theme and other common properties. ```html ``` -------------------------------- ### Preset Text Input with JavaScript Initialization (HTML, JavaScript) Source: https://zds.zurich.com/0.7.0/getting-started/how_to_start/basic_concepts Shows how to pre-populate a text input component and set its configuration using JavaScript. The component still maintains self-control after initialization. ```html ``` -------------------------------- ### ZvSelect Help Text Examples (Vue) Source: https://zds.zurich.com/0.7.0/inputs/select__vue_framework=vue Demonstrates various ways to implement help text for the ZvSelect component using the `help-text` parameter. Examples include basic help text, help text with an invalid state, and help text with the 'line' configuration. The `help-text` slot can also be used for custom help text content. ```html ``` ```html Help text ``` -------------------------------- ### Include CSS Components and JavaScript via CDN Source: https://zds.zurich.com/0.7.0/getting-started/packages/css-components Includes the main CSS file and the JavaScript helper script for @zurich/css-components using Content Delivery Network (CDN) links. This is the quickest way to start using the components in a vanilla HTML file. ```html ``` -------------------------------- ### Basic Promo Usage with Image URL Source: https://zds.zurich.com/0.7.0/molecules/promo__vue Demonstrates the basic usage of the ZvPromo component, setting a header and an image source using a direct URL. ```html ``` -------------------------------- ### Import Z-Tooltip Component Source: https://zds.zurich.com/0.7.0/atoms/tooltip__web This snippet shows how to import the Z-Tooltip component from the '@zurich/web-components/tooltip' module. Ensure the package is installed in your project. ```javascript import { ZTooltip } from '@zurich/web-components/tooltip'; ``` -------------------------------- ### Profile Component Initialization (Web Components) Source: https://zds.zurich.com/0.7.0/atoms/profile This snippet demonstrates how to initialize the z-profile component with custom properties for fill color and theme. ```html " " ``` -------------------------------- ### Define VerticalStepper Steps using Options Source: https://zds.zurich.com/0.7.0/inputs/vertical_stepper__web This example shows an alternative way to define the steps for the VerticalStepper component using nested '