Metro UI

https://v5.metroui.org.ua/
Admin
Metro UI is a progressive HTML-first framework for creating responsive web applications with 150+...
Tokens:416,780
Snippets:4,892
Trust Score:9.7
Update:2 months ago
Show doc for...
Tokens:
Raw
### Example of Method Usage

Source: https://v5.metroui.org.ua/components/theme-switcher

Provides practical examples of how to use the `val()` method to get and set the theme.

```APIDOC
## Example of Method Usage

Demonstrates how to use the `val()` method to interact with the theme switcher.

### Get Current Theme

```javascript
const themeSwitcher = Metro.getPlugin('#myThemeSwitcher', 'theme-switcher');
const currentTheme = themeSwitcher.val(); // Returns "dark" or "light"
```

### Set Theme

```javascript
themeSwitcher.val(Metro.theme.DARK); // Switch to dark theme
// or
themeSwitcher.val(true); // Same as above
```
```

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

### Master Component with Event Handling Example

Source: https://v5.metroui.org.ua/components/master

This example shows a complete setup for a Master component with event handling for 'next-page' and 'before-page' events. It includes the HTML structure for the wizard and the JavaScript to manage its behavior.

```html
<div id="wizard" data-role="master">
    <div class="page">
        <h2>Step 1</h2>
        <p>First step instructions</p>
    </div>
    <div class="page">
        <h2>Step 2</h2>
        <p>Second step instructions</p>
    </div>
</div>


<script>
    $(function(){
        var wizard = Metro.getPlugin('#wizard', 'master');

        $('#wizard').on('next-page', function(e, data){
            console.log('Moving to next page', data);
        });

        $('#wizard').on('before-page', function(e, data){
            // Validate the current page before proceeding
            if (!validateCurrentPage()) {
                return false;
            }
            return true;
        });
    });
</script>
```

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

### API Method: cookieSetup Example

Source: https://v5.metroui.org.ua/components/cookie

Example demonstrating how to configure default cookie settings.

```javascript
Metro.cookieSetup({
    path: "/app",
    secure: true,
    samesite: "Lax"
});
```

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

### Install @olton/dom with npm

Source: https://v5.metroui.org.ua/libraries/dom

Install the @olton/dom library using npm.

```bash
npm install @olton/dom
```

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

### Responsive Grid Layout Example

Source: https://v5.metroui.org.ua/getting-started/media-rules

Demonstrates how to use media rules with grid classes to create a responsive layout. The column width adjusts based on screen size, starting from 'sx' breakpoint.

```html
<div class="row">
    <div class="cell-sx-6 .cell-sm-4 .cell-md-3 .cell-lg-2 .cell-xl-1">
        ...
    </div>
</div>

```

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

### Install @olton/dom with yarn

Source: https://v5.metroui.org.ua/libraries/dom

Install the @olton/dom library using yarn.

```bash
yarn add @olton/dom
```

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

### Install Datetime with Yarn

Source: https://v5.metroui.org.ua/libraries/datetime

Install the Datetime library using Yarn.

```bash
yarn add @olton/datetime
```

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

### Install esbuild and Plugins

Source: https://v5.metroui.org.ua/getting-started/bundlers

Install esbuild and necessary plugins for building Metro UI components.

```bash
npm install esbuild \
  esbuild-plugin-less \
  @olton/esbuild-plugin-progress \
  @olton/esbuild-plugin-autoprefixer \
  @olton/esbuild-plugin-unlink \
  esbuild-plugin-replace

```

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

### Accessing Wizard Classic API Methods

Source: https://v5.metroui.org.ua/components/wizard-classic

Demonstrates how to get an instance of the Wizard Classic plugin and call its methods, including a jQuery-style access example.

```javascript
const wizard = Metro.getPlugin('#myWizard', 'wizard-classic');
wizard.next();
```

```javascript
$(element).data('wizard-classic').next();
```

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

### Install String Library with npm

Source: https://v5.metroui.org.ua/libraries/string

Install the @olton/string library using npm.

```bash
npm install @olton/string
```

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

### Install String Library with yarn

Source: https://v5.metroui.org.ua/libraries/string

Install the @olton/string library using yarn.

```bash
yarn add @olton/string
```

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

### Complete Color Selector Implementation

Source: https://v5.metroui.org.ua/components/color-selector

Provides a full example of implementing the color selector component, including initialization with specific options like return value type and initial color. It also demonstrates how to get the current value, set a new color programmatically, and listen for the 'select-color' event.

```html
1
<div id="colorSelector" data-role="color-selector"
2
     data-return-value-type="hex"
3
     data-show-alpha-channel="true"
4
     data-init-color="#3498db">
5
</div>
6


7
<script>
8
    // Get the selected color
9
    const color = Metro.getPlugin('#colorSelector', 'color-selector').val();
10


11
    // Set a new color
12
    Metro.getPlugin('#colorSelector', 'color-selector').val('#FF5733');
13


14
    // Listen for color selection events
15
    $('#colorSelector').on('select-color', function(e, data) {
16
        console.log("Selected color:", data.color);
17
        console.log("Color primitives:", data.primitive);
18
    });
19
</script>
```

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

### Install String Library with pnpm

Source: https://v5.metroui.org.ua/libraries/string

Install the @olton/string library using pnpm.

```bash
pnpm install @olton/string
```

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

### Complete Counter Example

Source: https://v5.metroui.org.ua/components/counter

A comprehensive example demonstrating multiple configurations for the counter component.

```html
<div id="statsCounter"
     data-role="counter"
     data-value="1000"
     data-from="0"
     data-duration="3000"
     data-start-on-viewport="true"
     data-prefix="$"
     data-suffix=" USD"
     data-delimiter=","
     data-size="24">
    0
</div>
```

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

### Install @olton/dom with pnpm

Source: https://v5.metroui.org.ua/libraries/dom

Install the @olton/dom library using pnpm.

```bash
pnpm install @olton/dom
```

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

### Install Metro UI

Source: https://v5.metroui.org.ua/getting-started/bundlers

Install the Metro UI library using npm.

```bash
npm install @olton/metroui

```

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

### Install Datetime with pnpm

Source: https://v5.metroui.org.ua/libraries/datetime

Install the Datetime library using pnpm.

```bash
pnpm install @olton/datetime
```

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

### Install Datetime with npm

Source: https://v5.metroui.org.ua/libraries/datetime

Install the Datetime library using npm.

```bash
npm install @olton/datetime
```

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

### Install Guardian via pnpm

Source: https://v5.metroui.org.ua/libraries/guardian

Installs the Guardian library using pnpm.

```bash
pnpm install @olton/guardian
```

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

### Install Guardian via yarn

Source: https://v5.metroui.org.ua/libraries/guardian

Installs the Guardian library using yarn.

```bash
yarn add @olton/guardian
```

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

### Install Model with yarn

Source: https://v5.metroui.org.ua/libraries/model

Install the Model library using yarn for your project.

```bash
yarn add @olton/model
```

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

### Tokenizer Initialization with JavaScript

Source: https://v5.metroui.org.ua/components/tokenizer

Provides examples of initializing the tokenizer component using JavaScript. One example splits by character, and the other splits by word using provided text.

```javascript
// Using element content
$("#tokenizer").tokenizer({
    splitter: ""  // Split by character
});


// Using provided text
$("#tokenizer").tokenizer({
    textToTokenize: "Hello world!",
    splitter: " "  // Split by word
});
```

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

### Install Router with yarn

Source: https://v5.metroui.org.ua/libraries/router

Install the Router library using yarn for your project.

```bash
yarn add @olton/router
```

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

### Resizable Container with Example Usage and Styling

Source: https://v5.metroui.org.ua/components/resizable-container

A complete example demonstrating the resizable container in a layout, including custom styling and JavaScript for interaction.

```html
<body class="cloak h-100-vh">
    <nav data-role="appbar" class="border-bottom bd-default" data-expand="true">
        <div class="app-bar-item-static no-hover">
            <div class="text-leader">Resizable Container</div>
        </div>
        <div class="app-bar-container" style="position: absolute; left: 50%; transform: translateX(-50%)">
        Press Alt+T to toggle the resize mode. 
    </div>
        <div class="app-bar-item-static no-hover ml-auto">
            <input type="checkbox" data-role="theme-switcher" />
        </div>
    </nav>
    <div class="container h-100">
        <div class="demo-box" data-role="resizable-container, draggable" data-can-resize="false" data-min-width="100" data-min-height="100" data-on-resize="onResize" data-on-resize-stop="onResizeStop">
            <div class="text-center" id="size"></div>
        </div>
    </div>
</body>
```

```css
.demo-box {
    border: 1px solid var(--border-color);
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
}
```

```javascript
function toggleResizeMode() {
    const container = $(".demo-box");
    const mode = container.attr("data-can-resize");
    container.attr("data-can-resize", mode === "true" ? "false" : "true");
}

function onResize(size, element, point) {
    $("#size").html(size.width + "x" + size.height);
}

function onResizeStop(size, element, point) {
    $("#size").clear();
}

(() => {
    $("body").hotkey("alt+t", toggleResizeMode);

    const container = $(".demo-box");
    const parentRect = container.parent()[0].getBoundingClientRect();
    container.css({
        top: parentRect.height / 2 - container.height() / 2,
        left: parentRect.width / 2 - container.width() / 2
    });
})();

```

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

### Start Listening for Routes

Source: https://v5.metroui.org.ua/libraries/router

Initiates the router to start listening for URL changes and matching them to defined routes.

```javascript
router.listen()
```

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

### Ordered Step List Example

Source: https://v5.metroui.org.ua/common-css/lists

An example of an ordered list (`<ol>`) styled as a step list, suitable for sequential processes.

```html
<ol class="step-list">
    <li>Create an account</li>
    <li>Set up your profile</li>
    <li>Connect with friends</li>
    <li>Start sharing content</li>
</ol>
```

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

### Install Model with pnpm

Source: https://v5.metroui.org.ua/libraries/model

Install the Model library using pnpm for your project.

```bash
pnpm install @olton/model
```

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

### Install Guardian via npm

Source: https://v5.metroui.org.ua/libraries/guardian

Installs the Guardian library using npm.

```bash
npm install @olton/guardian
```

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

### Install Router with pnpm

Source: https://v5.metroui.org.ua/libraries/router

Install the Router library using pnpm for your project.

```bash
pnpm install @olton/router
```

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

### Donut Initialization and Usage Example

Source: https://v5.metroui.org.ua/components/donut

This example demonstrates how to initialize the Donut component programmatically and interact with its methods.

```APIDOC
## JavaScript Example

### Initialize a donut programmatically
```javascript
Metro.makePlugin('#myElement', 'donut', {
    value: 75,
    fill: "#9C27B0",
    stroke: "#f5f5f5",
    animate: 500,
    showValue: true,
    cap: "°C"
});
```

### Get a reference to an existing donut
```javascript
const donut = Metro.getPlugin('#myDonut', 'donut');
```

### Change the value
```javascript
donut.val(50);
```

### Change colors
```javascript
donut.setColor({
    fill: "#FF0000",
    stroke: "#000000"
});
```

### Update value periodically
```javascript
setInterval(function() {
    const randomValue = Math.floor(Math.random() * 100);
    donut.val(randomValue);
}, 2000);
```
```

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

### Install Router with npm

Source: https://v5.metroui.org.ua/libraries/router

Install the Router library using npm for your project.

```bash
npm install @olton/router
```

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

### Package Manager Installation Commands - Regular Dependencies

Source: https://v5.metroui.org.ua/components/package-manager

Displays the command formats for installing regular dependencies using npm, pnpm, yarn, and bun.

```text
npm| `npm i <package>`
pnpm| `pnpm add <package>`
yarn| `yarn add <package>`
bun| `bun add <package>`
```

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

### Install Html.js with npm

Source: https://v5.metroui.org.ua/libraries/html

Install the Html.js library using npm for your project.

```bash
npm install @olton/html
```

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

### Install Model with npm

Source: https://v5.metroui.org.ua/libraries/model

Install the Model library using npm for your project.

```bash
npm install @olton/model
```

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

### Install Farbe using yarn

Source: https://v5.metroui.org.ua/libraries/farbe

Install the Farbe library using yarn for use in your project.

```bash
yarn add @olton/farbe
```

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

### API Method Usage Example

Source: https://v5.metroui.org.ua/components/typer

Control the Typer component programmatically using its API methods. Get the plugin instance and call methods like 'stop()' or 'start()'.

```javascript
const typer = Metro.getPlugin('#myTyper', 'typer');
typer.stop(); // Stop the typing animation
typer.start(); // Start the typing animation again
```

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

### Basic Router Initialization and Usage

Source: https://v5.metroui.org.ua/libraries/router

Initialize a new Router instance and add basic routes for home and product pages. The listen() method starts the router.

```javascript
import { Router } from "@olton/router";


const router = new Router()

router.addRoute("/", () => { console.log("Home page")})
router.addRoute("/product/:id", (params) => { console.log(`Product page for product ${params.id}`)})


router.listen()
```

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

### Router Initialization with Options

Source: https://v5.metroui.org.ua/libraries/router

Demonstrates how to initialize the Router with various configuration options, including base URL, fallback routes, caching, swipe navigation, and pre-defined routes.

```APIDOC
## Router Initialization with Options

### Description
Initialize the Router with configuration options.

### Constructor
`new Router(options?: RouterOptions)`

### Options
- `base` (string): Base URL for the router. Default is `/`.
- `fallback` (string): Fallback route. Default is `/`.
- `maxRedirects` (number): Maximum redirects. Default is `5`.
- `useCache` (boolean): Enabling cache.
- `cahceLimit` (number): Cache size. Default is `50`.
- `enableSwipeNavigation` (boolean): Enable swipe left/right for history navigation. Default is `false`.
- `routes` (object): Create routes in constructor. Default is `null`.
- `plugins` (array): Registering plugins in constructor. Default is `null`.

### Request Example
```javascript
const router = new Router({
    base: "/",
    fallback: "/",
    maxRedirects: 5,
    cacheLimit: 50,
    enableSwipeNavigation: false,
    routes: {
        "/": () => { },
        "/product/:id": (params) => { }
    }
})
```
```

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

### Get start of decade

Source: https://v5.metroui.org.ua/libraries/datetime

Returns the start date of the decade for the Datetime instance.

```javascript
const dt = new Datetime("2023-10-01 12:00:00");
dt.decadeStart(); // 2020-01-01 00:00:00
```

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

### Example of Custom Styling

Source: https://v5.metroui.org.ua/components/theme-switcher

Provides an example of how to apply custom CSS variables to style a specific theme switcher instance.

```APIDOC
## Example of Custom Styling

Apply custom styles to a specific theme switcher instance.

### CSS

```css
/* Custom styling example */
#myThemeSwitcher {
    --theme-switcher-background: #f0f0f0;
    --theme-switcher-background-checked: #333;
    --theme-switcher-toggle-color: #ffd700;
}
```
```

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

### Package Manager Installation Commands - Development Dependencies

Source: https://v5.metroui.org.ua/components/package-manager

Displays the command formats for installing development dependencies using npm, pnpm, yarn, and bun.

```text
npm| `npm i -D <package>`
pnpm| `pnpm add -D <package>`
yarn| `yarn add -D <package>`
bun| `bun add -D <package>`
```

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

### Example of Method Usage

Source: https://v5.metroui.org.ua/components/image-box

Provides a practical example of how to use the API methods like `changeAttribute` and `destroy` to manage the Image Box component dynamically.

```APIDOC
## Example of Method Usage

### Description

This example demonstrates how to get an instance of the Image Box component and use its methods to dynamically update its properties or remove it from the DOM.

### JavaScript

```javascript
// Get the component instance
const imageBox = Metro.getPlugin("#myImageBox", "image-box");

// Change the image
imageBox.changeAttribute("data-image", "path/to/new-image.jpg");

// Change the size
imageBox.changeAttribute("data-size", "contain");

// Destroy the component
imageBox.destroy();
```
```

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

### Example of Event Usage

Source: https://v5.metroui.org.ua/components/theme-switcher

Shows how to attach event handlers for `onThemeSwitcherCreate` and `onChangeTheme` during initialization.

```APIDOC
## Example of Event Usage

Integrate event listeners into the theme switcher initialization.

### Code Example

```javascript
Metro.makePlugin("#myThemeSwitcher", "theme-switcher", {
    onThemeSwitcherCreate: function() {
        console.log("Theme switcher created");
    },
    onChangeTheme: function(e) {
        console.log("Theme changed to:", e.state ? "dark" : "light");
    }
});
```
```

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

### Basic Overlay Examples

Source: https://v5.metroui.org.ua/components/overlay

Demonstrates the basic HTML structure for creating different types of overlays, including transparent and global overlays, as well as a splash screen.

```html
<!-- Basic overlay -->
<div class="overlay"></div>
```

```html
<!-- Transparent overlay -->
<div class="overlay transparent"></div>
```

```html
<!-- Global overlay (higher z-index) -->
<div class="overlay global-overlay"></div>
```

```html
<!-- Splash screen -->
<div class="splashscreen">
    <div class="spinner large"></div>
    <h2>Loading...</h2>
</div>
```

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

### Get UTC Offset

Source: https://v5.metroui.org.ua/libraries/datetime

Returns the UTC offset of the Datetime instance in hours and minutes. For example, +0300.

```javascript
const dt = new Datetime("2023-10-01 12:00:00");
dt.utcOffset();
```

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

### Install Farbe using pnpm

Source: https://v5.metroui.org.ua/libraries/farbe

Install the Farbe library using pnpm for use in your project.

```bash
pnpm install @olton/farbe
```

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

### Marquee API Method Usage

Source: https://v5.metroui.org.ua/components/marquee

Provides examples of using Marquee API methods such as `setItems`, `setItem`, `addItem`, `stop`, and `start`.

```javascript
const marquee = Metro.getPlugin('#my-marquee', 'marquee');


// Set new items
marquee.setItems(['New Item 1', 'New Item 2'], true);


// Update a specific item
marquee.setItem(0, 'Updated Item');


// Add a new item
marquee.addItem('Additional Item');


// Stop and start the animation
marquee.stop();
marquee.start();
```

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

### JavaScript Initialization and Setup

Source: https://v5.metroui.org.ua/components/rating

Shows how to initialize the rating component using JavaScript and configure global settings.

```APIDOC
## JavaScript Usage

### Description

Examples of initializing and configuring the rating component via JavaScript.

### JavaScript Examples

// Initialize with JavaScript
const rating = Metro.getPlugin('#myRating', 'rating', {
    value: 3.5,
    stars: 10,
    symbol: '♥',
    onStarClick: function(data) {
        console.log("Selected rating:", data.value);
    }
});


// Global setup
Metro.ratingSetup({
    symbol: '♦',
    onColor: '#1976d2',
    offColor: '#bbdefb'
});

```

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

### Complete Slider Example with JavaScript Control

Source: https://v5.metroui.org.ua/components/slider

A comprehensive example demonstrating slider initialization with various data attributes for configuration and programmatic control using JavaScript.

```html
<div class="example">
    <input id="mySlider" data-role="slider"
           data-min="0"
           data-max="100"
           data-value="50"
           data-buffer="75"
           data-hint="true"
           data-hint-always="true"
           data-hint-mask="Value: $1 ($2%)"
           data-show-min-max="true"
           data-accuracy="5"
           class="thin rounded"
           data-on-change="console.log('Value: ' + arguments[0].val + ', Buffer: ' + arguments[0].buffer)">
</div>


<script>
    // Access the slider via JavaScript
    const slider = Metro.getPlugin('#mySlider', 'slider');


    // Change the value programmatically
    slider.val(25);


    // Change the buffer programmatically
    slider.buff(50);
</script>
```

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

### Global Connector Setup

Source: https://v5.metroui.org.ua/components/linked-block

Illustrates how to configure default settings for all connectors globally using the `window.metroConnectorSetup` object. This allows for consistent styling and behavior across multiple connectors.

```APIDOC
## Global Setup

### Description
Sets global default options for all connectors.

### Configuration
Assign an object to `window.metroConnectorSetup` with desired default properties:

```javascript
window.metroConnectorSetup = {
    deleteButton: true,
    lineStyle: 'solid'
    // other connector options can be set here as defaults
};
```
```

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

### Destroy Tile Instance using JavaScript

Source: https://v5.metroui.org.ua/components/tile

Example of how to get a tile instance using Metro.js and then destroy it. This is useful for cleaning up components dynamically.

```JavaScript
const tile = Metro.getPlugin('#myTile', 'tile');
tile.destroy();
```

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

### Bull API Example

Source: https://v5.metroui.org.ua/components/bulls

Illustrates how to interact with a created bull component using its API. This example demonstrates changing the bull's type after initialization.

```html
<div id="myBull" data-role="bull" data-type="fail" data-size="32"></div>
```

```javascript
const bull = Metro.getPlugin('#myBull', 'bull');
bull.setType('warning'); // Change the bull type to warning
```

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

### Image Magnifier Method Usage

Source: https://v5.metroui.org.ua/components/image-magnifier

Example of how to get an instance of the image magnifier plugin and call its destroy method to remove the component and its event handlers.

```javascript
const magnifier = Metro.getPlugin('#myImage', 'image-magnifier');
magnifier.destroy();
```

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

### Example Usage: Full Storage Operations

Source: https://v5.metroui.org.ua/components/storage

Demonstrates a complete workflow including setting a namespace, storing, retrieving, and deleting data using localStorage, and also shows basic usage of sessionStorage.

```javascript
// Set namespace
Metro.storage.setKey("myApplication");


// Store data
Metro.storage.setItem("userPreferences", {
  theme: "dark",
  fontSize: 16,
  notifications: true
});


// Retrieve data
const preferences = Metro.storage.getItem("userPreferences", {});


// Get a specific property
const theme = Metro.storage.getItemPart("userPreferences", "theme", "light");


// Delete data
Metro.storage.delItem("userPreferences");


// Use session storage
Metro.session.setKey("myApplication");
Metro.session.setItem("temporaryData", { id: 123 });
```

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

### Global Eval Setup with Custom Delimiters

Source: https://v5.metroui.org.ua/components/eval

Configures global defaults for all Eval components, including custom start and end delimiters and error logging.

```javascript
Metro.evalSetup({
  delimiterStart: "<%",
  delimiterEnd: "%>",
  logErrors: true
});
```

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

### Time Picker Method Usage Example

Source: https://v5.metroui.org.ua/components/time-picker

Demonstrates how to use the API methods to get and set values, interact with the picker's state, and manage its lifecycle.

```javascript
// Get plugin instance
const timepicker = Metro.getPlugin('#my-timepicker', 'time-picker');


// Get current value
const currentValue = timepicker.val();


// Set new value
timepicker.val("14:30:00");


// Get time as object
const timeObj = timepicker.time();  // returns {h: 14, m: 30, s: 0}


// Set time from object
timepicker.time({h: 15, m: 45, s: 30});


// Get time as Date object
const dateObj = timepicker.date();


// Set time from Date object
const date = new Date();
date.setHours(10);
date.setMinutes(20);
timepicker.date(date);


// Open/close the picker
timepicker.open();
timepicker.close();


// Enable/disable the picker
timeminer.enable();
timepicker.disable();
```

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

### Basic Resizable Container Setup

Source: https://v5.metroui.org.ua/components/resizable-container

Demonstrates the basic usage of the resizable-container component using data-role attribute.

```html
<div data-role="resizable-container"></div>
```

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

### Global Component Setup

Source: https://v5.metroui.org.ua/getting-started/components

Set default options for all components of a type by creating a global setup object like `metroAccordionSetup` before including the Metro UI library.

```javascript
<script>
// Setup component
var metroAccordionSetup = {
    oneFrame: false,
}
</script>

// Include Metro UI library
<script src="https://cdn.metroui.org.ua/current/metro.js"></script>
```

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

### Get and Set Color Picker Value via API

Source: https://v5.metroui.org.ua/components/color-picker

Examples of using the 'val' method to retrieve the current color or set a new color programmatically.

```javascript
// Get current color value
const color = Metro.getPlugin('#my-color-picker', 'color-picker').val();


// Set color value
Metro.getPlugin('#my-color-picker', 'color-picker').val('#FF0000');
```

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

### Complete Resizable Example

Source: https://v5.metroui.org.ua/components/resizable

This snippet demonstrates how to initialize and use the resizable component. It includes setting minimum dimensions and handling resize events to display the current dimensions.

```html
<div id="resizableBox" data-role="resizable"
     data-min-width="200"
     data-min-height="150"
     style="width: 400px; height: 300px; background-color: #e0f7fa; border: 1px solid #00bcd4; padding: 16px; position: relative;">
    <h3>Resizable Content</h3>
    <p>Drag the bottom-right corner to resize this box.</p>
    <div id="sizeInfo" style="position: absolute; bottom: 20px; left: 16px; font-size: 12px;"></div>
</div>


<script>
    Metro.init(function(){
        const box = Metro.getPlugin('#resizableBox', 'resizable');
        const sizeInfo = $('#sizeInfo');

        box.options.onResize = function(e){
            sizeInfo.html('Width: ' + e.size.width + 'px, Height: ' + e.size.height + 'px');
        };

        box.options.onResizeStop = function(e){
            console.log('Final size:', e.size);
        };
    });
</script>
```

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

### Basic Button Examples

Source: https://v5.metroui.org.ua/components/button

Shows how to create standard buttons using the 'button' tag, links styled as buttons, and input elements styled as buttons.

```html
<!-- Standard button -->
<button>Standard Button</button>
```

```html
<!-- Link styled as button -->
<a href="#" class="button">Link Button</a>
```

```html
<!-- Input buttons -->
<input type="button" value="Input Button">
<input type="submit" value="Submit Button">
<input type="reset" value="Reset Button">
```

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

### Update and Control Dialog via API

Source: https://v5.metroui.org.ua/components/dialog

This example demonstrates how to get a reference to an existing dialog instance and use its API methods to update its title and content, then open and close it.

```javascript
const dialog = Metro.getPlugin('#myDialog', 'dialog');
dialog.setTitle('Updated Title');
dialog.setContent('Updated content text');
dialog.open();


// Later, close the dialog
dialog.close();
```

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

### Router Initialization with Options

Source: https://v5.metroui.org.ua/libraries/router

Initialize the Router with various configuration options including base URL, fallback route, cache settings, and pre-defined routes.

```javascript
const router = new Router({
    base: "/",
    fallback: "/",
    maxRedirects: 5,
    cacheLimit: 50,
    enableSwipeNavigation: false,
    routes: {
        "/": () => { },
        "/product/:id": (params) => { }
    }
})
```

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

### Datetime Manipulation Examples

Source: https://v5.metroui.org.ua/getting-started/intro

This snippet shows basic usage of the datetime library for getting the current date and time, formatting it, and performing date arithmetic. Ensure the datetime library is included.

```javascript
// Examples of datetime usage
const now = datetime(); // Current date and time
const formatted = now.format("YYYY-MM-DD HH:mm"); // Format date
const nextWeek = now.addDay(7); // Date arithmetic
```

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

### Basic Popover Examples

Source: https://v5.metroui.org.ua/components/popover

Demonstrates basic popover configurations using HTML attributes for text, position, trigger, and hide timeout.

```html
<!-- Basic popover triggered by hover -->
<button data-role="popover" data-popover-text="This is a popover">Hover me</button>
```

```html
<!-- Popover with custom position -->
<button data-role="popover"
        data-popover-text="This is a popover on the right"
        data-popover-position="right">
    Right popover
</button>
```

```html
<!-- Popover triggered by click -->
<button data-role="popover"
        data-popover-text="This is a click popover"
        data-popover-trigger="click">
    Click me
</button>
```

```html
<!-- Popover with custom hide timeout -->
<button data-role="popover"
        data-popover-text="This will hide after 5 seconds"
        data-popover-hide="5000">
    Custom timeout
</button>
```

```html
<!-- Popover with close button -->
<button data-role="popover"
        data-popover-text="Click the X to close"
        data-popover-hide="0"
        data-close-button="true">
    With close button
</button>
```

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

### Utility Functions for Type Checking, DOM, Time, and Objects

Source: https://v5.metroui.org.ua/common-js/overview

Provides examples of utility functions for checking data types, getting element coordinates, formatting seconds into time, and cloning objects.

```javascript
// Type checking
const isFunction = Metro.utils.isFunc(myValue);


// DOM utilities
const coords = Metro.utils.coords(element);


// Time formatting
const time = Metro.utils.secondsToTime(3600); // {d: 0, h: 1, m: 0, s: 0}


// Object utilities
const cloned = Metro.utils.objectClone(myObject);
```

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

### Responsive Positioning Example

Source: https://v5.metroui.org.ua/common-css/position

Shows how to apply different positioning behaviors at various screen sizes using responsive variants.

```html
<!-- Element is static by default, relative on medium screens, absolute on large screens -->
<div class="pos-static pos-relative-md pos-absolute-lg">
    This element changes its positioning behavior at different screen sizes
</div>
```

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

### API Method: delCookie Example

Source: https://v5.metroui.org.ua/components/cookie

Example for deleting a cookie by its name.

```javascript
Metro.cookie.delCookie("user-preference");
```

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

### API Method: getCookies Example

Source: https://v5.metroui.org.ua/components/cookie

Example showing how to retrieve all cookies.

```javascript
const allCookies = Metro.cookie.getCookies();
console.log(allCookies);
```

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

### Basic Progress Bar Examples

Source: https://v5.metroui.org.ua/components/progress

Demonstrates how to create basic progress bars with and without labels, and a small variant.

```html
<!-- Basic progress bar -->
<div data-role="progress" data-value="50"></div>

<!-- Progress bar with label and value -->
<div data-role="progress" data-value="75" data-show-label="true" data-show-value="true"></div>

<!-- Small progress bar -->
<div data-role="progress" data-value="25" data-small="true"></div>
```

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

### Bar3d Initialization and Configuration

Source: https://v5.metroui.org.ua/components/bar3d

Demonstrates how to initialize the Bar3d component using HTML attributes for basic and additional configurations, and how to initialize it via JavaScript with options.

```APIDOC
## HTML Initialization

### Basic Usage
```html
<div data-role="bar3d"></div>
```

### Additional Configurations
```html
<div data-role="bar3d"
     data-value="30"
     data-bar-color="#00d153"
     data-value-suffix="%"
     data-value-color="#fff">
</div>
```

## JavaScript Initialization

### Initialize with Metro.makePlugin
```javascript
const bar3d = Metro.makePlugin("#myBar", "bar3d", {
    value: 60,
    barColor: "#22ec1a",
    valueSuffix: "%"
});
```

### Globally Configure Defaults
```javascript
Metro.bar3dSetup({
    barColor: "#22ec1a",
    animationDuration: 500
});
```
```

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

### Client-Side Routing Setup

Source: https://v5.metroui.org.ua/getting-started/intro

Demonstrates how to set up client-side routing for single-page applications using the router library.

```javascript
// Examples of router usage
const router = new Router(); // Create router
router.add("/home", () => { /* render home page */ }); // Add route
router.start(); // Start routing
```

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

### Step List Example

Source: https://v5.metroui.org.ua/common-css/lists

Use the `step-list` class for numbered lists with a vertical connecting line, suitable for process steps.

```html
<ol class="step-list">
    <li>First step in the process</li>
    <li>Second step in the process</li>
    <li>Third step in the process</li>
</ol>
```

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

### JavaScript Usage

Source: https://v5.metroui.org.ua/components/radio

Shows how to initialize and configure the radio component using JavaScript, including global setup.

```APIDOC
## JavaScript Usage

### Description

Examples of initializing the radio component programmatically and setting global configurations.

### Initialization

```javascript
// Initialize with JavaScript
const radio = Metro.getPlugin('#myRadio', 'radio', {
    caption: "My Radio Option",
    prepend: "<span class='mif-star'></span>",
    onRadioCreate: function() {
        console.log("Radio created!");
    }
});
```

### Global Setup

```javascript
// Global setup
Metro.metroRadioSetup({
    clsRadio: "custom-radio",
    clsCaption: "custom-caption"
});
```
```

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

### Install Html.js with yarn

Source: https://v5.metroui.org.ua/libraries/html

Install the Html.js library using yarn for your project.

```bash
yarn add @olton/html
```

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

### Global Configuration

Source: https://v5.metroui.org.ua/components/hint

Explains how to set global default options for all Hint components using the `Metro.hintSetup()` method, allowing for consistent configuration across the application.

```APIDOC
## Global Configuration

### Description

Set global default options for all hint components to ensure consistent behavior across your application.

### JavaScript Example

```javascript
Metro.hintSetup({
    hintDeferred: 500,
    hintHide: 3000,
    hintPosition: Metro.position.BOTTOM
});
```
```

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

### Install Html.js with pnpm

Source: https://v5.metroui.org.ua/libraries/html

Install the Html.js library using pnpm for your project.

```bash
pnpm install @olton/html
```

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

### Basic Material Input Examples

Source: https://v5.metroui.org.ua/components/input-material

Demonstrates basic usage of the material input component with different configurations like labels, informer text, and icons. Use these for standard input fields.

```html
<input type="text" data-role="material-input" data-label="Username">
```

```html
<input type="text" data-role="material-input" data-label="Email" data-informer="We'll never share your email">
```

```html
<input type="text" data-role="material-input" data-label="Search" data-icon="🔍">
```

```html
<input type="password" data-role="material-input" data-label="Password">
```

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

### Example of Method Usage

Source: https://v5.metroui.org.ua/components/popover

Demonstrates how to use API methods to control popover instances, including showing, hiding, updating position, and destroying.

```javascript
// Get the popover instance
const popover = Metro.getPlugin('#myPopover', 'popover');


// Show the popover
popover.show();


// Hide the popover
popover.hide();


// Update position (useful after window resize or element movement)
popover.setPosition();


// Destroy the popover
popover.destroy();
```

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

### Counter with Custom Starting Value

Source: https://v5.metroui.org.ua/components/counter

Configure the counter to start from a value other than 0.

```html
<div data-role="counter" data-value="100" data-from="50">50</div>
```

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

### Basic Usage

Source: https://v5.metroui.org.ua/components/color-picker

Demonstrates the basic initialization of the Color Picker component using a simple input element.

```APIDOC
## Basic Usage

Initializes the Color Picker component by applying the `data-role="color-picker"` attribute to an input element.

```html
<input type="text" data-role="color-picker">
```
```

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

### Example: Responding to Media Breakpoints

Source: https://v5.metroui.org.ua/components/resizer

This example shows how to monitor media breakpoint changes using the `onMediaPoint` event. It updates a display element with the current breakpoints and logs the changed point to the console. Initialization within `Metro.init` is recommended.

```html
<div id="mediaMonitor" data-role="resizer">
    <div id="currentBreakpoint">Current breakpoint information will appear here</div>
</div>


<script>
    Metro.init(function(){
        var resizer = Metro.getPlugin('#mediaMonitor', 'resizer');
        var breakpointInfo = $('#currentBreakpoint');

        // Initial update
        breakpointInfo.html('Current breakpoints: ' + globalThis.METRO_MEDIA.join(', '));

        resizer.options.onMediaPoint = function(e){
            breakpointInfo.html('Current breakpoints: ' + e.media.join(', '));
            console.log('Media point changed:', e.point);
        };
    });
</script>
```

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

### API Method: getCookie Example

Source: https://v5.metroui.org.ua/components/cookie

Example for retrieving the value of a specific cookie by its name.

```javascript
const preference = Metro.cookie.getCookie("user-preference");
```

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

### substring(start, len)

Source: https://v5.metroui.org.ua/libraries/string

Returns a substring of the string from a start index for a specified length.

```APIDOC
## substring(start, len)

### Description
Returns a substring of the string from a start index for a specified length.

### Method
string.substring(start, len)

### Parameters
#### Path Parameters
- **start** (number) - Required - The starting index of the substring.
- **len** (number) - Required - The length of the substring.

### Request Example
```javascript
const str = str('Hello, World!');
str.substring(0, 5);
```

### Response
#### Success Response (200)
- **string** - The extracted substring.

### Response Example
```javascript
// Returns: Hello
```
```

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

### String Manipulation Examples

Source: https://v5.metroui.org.ua/getting-started/intro

Provides examples of enhanced string manipulation functions from the string library.

```javascript
// Examples of string usage
const s = str("Hello, World!"); // Create string object
s.capitalize(); // "Hello, world!"
s.truncate(5); // "Hello..."
```

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

### Example of Method Usage

Source: https://v5.metroui.org.ua/components/toggle-button

Provides an example of how to call the `destroy` method on the toggle button component.

```APIDOC
### Example of Method Usage

```javascript
const toggleButton = Metro.getPlugin('#myToggleButton', 'toggle-button');
toggleButton.destroy();
```
```

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

### Search and Pagination Example

Source: https://v5.metroui.org.ua/components/table

Demonstrates how to use the search and page API methods to interact with the table. Ensure the table plugin is initialized and accessible.

```javascript
const table = Metro.getPlugin("#myTable", "table");
table.search("John");
table.page(2);
```

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

### Install Hooks via yarn

Source: https://v5.metroui.org.ua/libraries/hooks

Install the Metro UI Hooks library using yarn.

```bash
yarn add @olton/hooks
```

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

### Install Hooks via pnpm

Source: https://v5.metroui.org.ua/libraries/hooks

Install the Metro UI Hooks library using pnpm.

```bash
pnpm install @olton/hooks
```

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

### Example of Method Usage

Source: https://v5.metroui.org.ua/components/remote-dataset

Demonstrates how to use the API methods to manipulate dataset parameters and trigger data loading.

```APIDOC
## Example of Method Usage

```javascript

const dataset = Metro.getPlugin('#myDataset', 'remote-dataset');


// Add custom parameters
dataset.addParam('category', 'electronics');
dataset.addParams({
    minPrice: 100,
    maxPrice: 500
});


// Reload data
dataset.load();


// Load more data (append)
dataset.load(true);


// Clear parameters and reload
dataset.clearParams();
dataset.load();

```
```

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

### Basic Usage

Source: https://v5.metroui.org.ua/components/textarea

Demonstrates the basic initialization of the Textarea component.

```APIDOC
## Basic Usage

### Description
Initializes a basic textarea component.

### HTML
```html
<textarea data-role="textarea"></textarea>
```
```

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

### Example of Event Handling

Source: https://v5.metroui.org.ua/components/input-material

Shows how to handle component creation and user interaction events like 'clear-click' using JavaScript. Use this for reacting to user actions and component lifecycle.

```javascript
Metro.makePlugin("#my-input", "material-input", {
    onInputCreate: function(e){
        console.log("Material input created:", e.element);
    }
});
```

```javascript
$("#my-input").on("clear-click", function(e){
    console.log("Input cleared, previous value:", e.detail.prev);
});
```

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

### Install Hooks via npm

Source: https://v5.metroui.org.ua/libraries/hooks

Install the Metro UI Hooks library using npm.

```bash
npm install @olton/hooks
```

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

### Example Usage

Source: https://v5.metroui.org.ua/components/table

Demonstrates how to use the Table API methods.

```APIDOC
### Example of Method Usage

```javascript

const table = Metro.getPlugin("#myTable", "table");
table.search("John");
table.page(2);

```
```

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

### Install Farbe using npm

Source: https://v5.metroui.org.ua/libraries/farbe

Install the Farbe library using npm for use in your project.

```bash
npm install @olton/farbe
```

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

### Example with Events

Source: https://v5.metroui.org.ua/components/date-picker

Demonstrates how to attach event handlers directly via data attributes.

```APIDOC
### Example with Events

```html
<input data-role="date-picker"
       data-on-set="console.log('Date set:', arguments[0])"
       data-on-open="console.log('Picker opened')"
       data-on-close="console.log('Picker closed')">
```
```

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

### Event Usage Examples

Source: https://v5.metroui.org.ua/components/remote-dataset

Examples of how to hook into component events using data attributes or JavaScript functions.

```APIDOC
### Event Usage Examples

```html

// Using data attributes
<div data-role="remote-dataset"
     data-on-before-load="beforeLoadHandler"
     data-on-load="loadHandler"
     data-on-draw-entry="drawEntryHandler">
</div>

```

```javascript

// JavaScript functions
function beforeLoadHandler(url, component) {
    console.log('Loading from:', url);
    return url + '&timestamp=' + Date.now();
}


function loadHandler(data, component) {
    console.log('Data loaded:', data);
    return data; // Return processed data
}


function drawEntryHandler(entry, index) {
    return `
        <div class="data-entry">
            <h3>${entry.title}</h3>
            <p>${entry.description}</p>
        </div>
    `;
}

```
```

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

### JavaScript Initialization and Setup

Source: https://v5.metroui.org.ua/components/radio

Initialize the radio component programmatically using `Metro.getPlugin` or configure global settings with `Metro.metroRadioSetup`. This allows for dynamic creation and customization.

```javascript
// Initialize with JavaScript
const radio = Metro.getPlugin('#myRadio', 'radio', {
    caption: "My Radio Option",
    prepend: "<span class='mif-star'></span>",
    onRadioCreate: function() {
        console.log("Radio created!");
    }
});


// Global setup
Metro.metroRadioSetup({
    clsRadio: "custom-radio",
    clsCaption: "custom-caption"
});
```

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

### Splitter Initialization and Usage

Source: https://v5.metroui.org.ua/components/splitter

Demonstrates how to initialize a splitter component with basic HTML structure and available plugin parameters for customization.

```APIDOC
## Splitter Component

### Description
The Splitter component divides a container into resizable panels, allowing users to adjust the size of each panel by dragging the divider (gutter) between them.

### Usage
```html
<div data-role="splitter">
  <div>Panel 1 Content</div>
  <div>Panel 2 Content</div>
  <div>Panel 3 Content</div>
</div>
```

### Plugin Parameters

| Parameter | Type | Default | Description |
|---|---|---|---|
| `splitterDeferred` | number | 0 | Deferred initialization time in milliseconds |
| `split` | string | "vertical" | Split mode: "vertical" or "horizontal" |
| `splitSizes` | string/array | null | Initial sizes of the split panels (comma-separated string or array) |
| `gutterSize` | number | 5 | Size of the gutter between panels in pixels |
| `gutterStyle` | string | "default" | Style of the gutter: "default", "ribbed", "dashed", "dotted" |
| `minSizes` | string/array | null | Minimum sizes of the panels (comma-separated string or array) |
| `children` | string | "*" | Selector for the child elements to be split |
| `gutterClick` | string | "expand" | Behavior when the gutter is clicked |
| `saveState` | boolean | false | Whether to save the state of the splitter in browser storage |
| `noResize` | boolean | false | Whether to disable resizing |
```

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

### Calendar Picker Method Usage Example

Source: https://v5.metroui.org.ua/components/calendar-picker

Example demonstrating how to use the API methods of the Calendar Picker.

```APIDOC
#### Example of Method Usage

```javascript
const picker = Metro.getPlugin('#myPicker', 'calendar-picker');


// Set a new date
picker.val('2024/12/25');


// Get current value
const currentValue = picker.val(); // Returns {date: Date, time: [hours, minutes]}


// Clear the picker
picker.clear();


// Get time as string
const timeString = picker.getTime(true); // Returns "14:30"


// Disable the picker
picker.disable();
```
```

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

### Basic Window Usage

Source: https://v5.metroui.org.ua/components/window

Demonstrates the basic HTML structure for creating a window component. Initialize with the 'data-role="window"' attribute.

```html
<div id="my-window" data-role="window" data-title="My Window">
    Window content goes here
</div>
```
Tokens:
Raw