Fomantic UI

https://fomantic-ui.com
Admin
Fomantic UI is an open-source UI component framework that helps developers create beautiful,...
Tokens:86,933
Snippets:1,254
Trust Score:9.1
Update:1 month ago
Show doc for...
Tokens:
Raw
### Documentation Server Setup

Source: https://fomantic-ui.com/introduction/advanced-usage.html

Commands for cloning, installing dependencies, and running the documentation server.

```bash
git clone https://github.com/fomantic/Fomantic-UI-Docs.git
```

```bash
cd docs/
npm install
```

```bash
cd ui/
npx gulp build-docs
```

```bash
cd docs/
# initial build may take several minutes
docpad run
```

```bash
cd ui/
gulp serve-docs
```

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

### Package Dependency Configuration

Source: https://fomantic-ui.com/introduction/getting-started

Example entry added to package.json after installation.

```json
"dependencies": {
  ...
  "fomantic-ui": "^2.9.4"
  ...
```

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

### Custom Installation and Build Process

Source: https://fomantic-ui.com/introduction/getting-started

Steps to trigger the interactive installation prompt and build the distribution files.

```bash
$ cd node_modules/fomantic-ui
$ npx gulp install
```

```bash
$ cd semantic/
$ npx gulp build
```

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

### Installing Components via NPM

Source: https://fomantic-ui.com/introduction/advanced-usage.html

Install individual components using npm.

```bash
npm install semantic-ui-component
```

```bash
npm install semantic-ui-dropdown
```

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

### Run Custom Installation and Build

Source: https://fomantic-ui.com/introduction/getting-started

Commands to trigger the interactive installation prompt and build distribution files manually.

```bash
$ cd node_modules/fomantic-ui
$ npx gulp install
```

```bash
$ npx gulp build
```

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

### NPM Installation Commands

Source: https://fomantic-ui.com/introduction/getting-started

Commands for initializing a project and installing Fomantic-UI dependencies.

```bash
$ npm init
```

```bash
$ npm install fomantic-ui
```

```bash
$ npm install fomantic-ui@nightly
```

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

### Flyout Actions Configuration Example

Source: https://fomantic-ui.com/modules/flyout.html

Example structure for defining custom actions within the flyout.

```javascript
actions: [{ text : 'Wait', class : 'red', icon : 'exclamation', click : function() {} }]
```

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

### Run automated installation via CLI

Source: https://fomantic-ui.com/introduction/build-tools.html

Execute the install command using npx to trigger the automated deployment process.

```bash
npx gulp install
```

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

### Install NPM dependencies

Source: https://fomantic-ui.com/introduction/integrations.html

Install the configured NPM packages for the project.

```bash
meteor npm install
```

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

### Configuring Auto-Install

Source: https://fomantic-ui.com/introduction/advanced-usage.html

Enable non-interactive installation by setting the autoInstall flag in semantic.json.

```json
{
 // install will now automatically build your project files without user interaction
 "autoInstall": true,
  // these settings may be different
 "base": "",
 "paths": {
   "source": {
     "config": "src/theme.config",
     "definitions": "src/definitions/",
     "site": "src/site/",
     "themes": "src/themes/"
   },
   "output": {
     "packaged": "dist/",
     "uncompressed": "dist/components/",
     "compressed": "dist/components/",
     "themes": "dist/themes/"
   },
   "clean": "dist/"
 },
 "permission": false,
 "rtl": false,
    }
```

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

### Install Fomantic-UI via NPM

Source: https://fomantic-ui.com/introduction/getting-started

Commands to install the CSS or LESS distributions of Fomantic-UI.

```bash
$ npm install fomantic-ui-css
```

```bash
$ npm install fomantic-ui-less
```

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

### Advanced Transition Configuration

Source: https://fomantic-ui.com/modules/transition.html

Examples of grouping, sequencing, and forcing animation directions.

```javascript
$('.jiggle.images .image') .transition({ animation : 'jiggle', duration : 800, interval : 200 }) ;
```

```javascript
$('.sequenced.images .image') .transition({ animation : 'scale', reverse : 'auto', // default setting interval : 200 }) ;
```

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

### Configure Transition Settings

Source: https://fomantic-ui.com/modules/modal.html

Example of providing an object to define individual hide/show transitions and durations.

```javascript
{ showMethod : 'fade', showDuration : 200, hideMethod : 'zoom, hideDuration : 500, }
```

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

### Define custom.semantic.json structure

Source: https://fomantic-ui.com/introduction/integrations.html

Example configuration for enabling or disabling specific components and themes.

```json
{
"definitions": {
  "accordion" : true,
  "ad"        : true,
  "api"       : true,
  /* etc */
},
"themes": {
  "amazon"     : false,
  "basic"      : false,
  "bookish"    : false,
  "bootstrap3" : false,
  "chubby"     : false,
  "classic"    : false,
  "default"    : true,
  /* etc */
}
```

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

### Component Class Naming Examples

Source: https://fomantic-ui.com/introduction/getting-started

Examples of applying Fomantic-UI class names to HTML elements, including strict ordering requirements for complex components.

```html
ui primary button
```

```html
ui huge primary button
```

```html
huge ui button primary
```

```html
ui left labeled right floated button
```

```html
ui left right button floated labeled
```

```html
<div class="ui **left labeled** **tiny** **right floated** **button**">
    <div class="ui **secondary** label">Labeled</div>
    <div class="ui **primary** **button**">Button</div>
</div>
```

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

### Install Semantic UI for Ember CLI

Source: https://fomantic-ui.com/introduction/integrations.html

Commands to install the Semantic UI Ember integration based on the CLI version.

```bash
ember install semantic-ui-ember
```

```bash
npm install --save-dev Semantic-Org/Semantic-UI-Ember
```

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

### Configure slider steps

Source: https://fomantic-ui.com/modules/slider.html

Examples of setting custom steps or disabling stepping entirely.

```javascript
$('.ui.slider') .slider({ min: 0, max: 10, start: 4, step: 2 }) ;
```

```javascript
$('.ui.slider') .slider({ min: 0, max: 10, start: 3.82, step: 0 }) ;
```

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

### Initialize Visible Sidebar

Source: https://fomantic-ui.com/modules/sidebar.html

Configures a sidebar that starts in a visible state within a specific context.

```javascript
$('.visible.example .ui.sidebar') .sidebar({ context: '.visible.example .bottom.segment' }) .sidebar('hide') ;
```

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

### Install Semantic UI Meteor package

Source: https://fomantic-ui.com/introduction/integrations.html

Add the Semantic UI package to a Meteor project.

```bash
meteor add semantic:ui
```

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

### Install PostCSS dependencies

Source: https://fomantic-ui.com/introduction/integrations.html

Add the necessary LESS and PostCSS packages to the Meteor project.

```bash
meteor add less juliancwirko:postcss
```

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

### Define Toast Actions

Source: https://fomantic-ui.com/modules/toast.html

Example structure for defining interactive actions within a toast notification.

```javascript
actions: [{ text : 'Wait', class : 'red', icon : 'exclamation', click : function(){} }]
```

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

### Define global API endpoints configuration

Source: https://fomantic-ui.com/behaviors/api.html

A comprehensive example of defining multiple API endpoints in a single global configuration.

```javascript
/* Define API endpoints once globally */ $.fn.api.settings.api = { 'get followers' : '/followers/{id}?results={count}', 'create user' : '/create', 'add user' : '/add/{id}', 'follow user' : '/follow/{id}', 'search' : '/search/?query={value}' }; 
```

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

### Initialize a multi-month calendar

Source: https://fomantic-ui.com/modules/calendar.html

Displays multiple months simultaneously, with monthOffset used to control the starting month relative to the current date.

```javascript
$('#multimonth_calendar')
  .calendar({
      type: 'date',
      multiMonth: 3,
      monthOffset: -1 // current month will be shown in the middle of 3 months
  })
;
```

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

### Create custom configuration file

Source: https://fomantic-ui.com/introduction/integrations.html

Initialize the custom configuration file for Semantic UI components and themes.

```bash
touch client/lib/semantic-ui/custom.semantic.json
```

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

### Initialize API and Trigger Query

Source: https://fomantic-ui.com/behaviors/api.html

Sets up an API button and demonstrates how to trigger an immediate query.

```javascript
// set-up API button with events $('.follow.button') .api({ action: 'follow user' }) ; // do an immediate query $('.follow.button') .api('query') ;
```

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

### Read values from form fields

Source: https://fomantic-ui.com/behaviors/form.html

Retrieves values from form fields using 'get value' or 'get values'. Returned values use the element's name attribute as the key.

```javascript
var
  $form = $('.get.example form'),
  // get one value
  colors = $form.form('get value', 'colors'),
  // get list of values
  fields = $form.form('get values', ['name', 'colors']),
  // get all values
  allFields = $form.form('get values')
;
console.log(colors);
console.log(fields);
console.log(allFields);
```

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

### Use configuration templates

Source: https://fomantic-ui.com/modules/flyout.html

Quickly trigger preconfigured alert, confirm, or prompt flyouts.

```javascript
$.flyout('alert','hello') $.flyout('confirm','Are you sure?',function(value){}) $.flyout('prompt','Enter Code', function(value){})
```

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

### Sidebar with menu content

Source: https://fomantic-ui.com/modules/sidebar.html

Example of a sidebar containing a vertical menu.

```html
<body> <div class="ui left vertical menu sidebar"> <a class="item"> Item 1 </a> <a class="item"> Item 2 </a> <a class="item"> Item 3 </a> </div> <div class="pusher"> <!-- Site content !--> </div> </body>
```

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

### Dimmer Initialization Methods

Source: https://fomantic-ui.com/modules/dimmer.html

Demonstrates that calling show on the dimmable container or the dimmer itself results in the same behavior.

```javascript
// these two are the same $('.ui.dimmable') .dimmer('show') ; $('.ui.dimmable .dimmer') .dimmer('show') ;
```

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

### Deploy documentation to GitHub Pages

Source: https://fomantic-ui.com/introduction/advanced-usage.html

Executes the DocPad gh-pages plugin to deploy static documentation.

```bash
docpad deploy-ghpages --env static
```

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

### Build all Fomantic UI files

Source: https://fomantic-ui.com/introduction/build-tools.html

Executes the full build process for all project files.

```bash
npx gulp build
```

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

### Configure Meteor LESS pipeline

Source: https://fomantic-ui.com/introduction/integrations.html

Install the required LESS autoprefixer package for Meteor.

```bash
meteor add flemay:less-autoprefixer
```

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

### Configuration

Source: https://fomantic-ui.com/modules/popup

Initializes the popup with specific settings such as inline mode or custom selectors.

```APIDOC
// Initialize with inline popup element
$('.button').popup({ inline: true });

// Initialize with custom selector
$('.button').popup({ popup: '.special.popup' });

// Initialize with content settings
$('.ui.popup').popup({ title: 'Popup Title', content: 'Hello I am a popup' });
```

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

### Configure Toast Defaults and Instance Settings

Source: https://fomantic-ui.com/modules/toast.html

Demonstrates how to override global defaults for all toasts and how to apply specific settings to an individual toast instance.

```javascript
/* To change the defaults for all toast at once override the module as follows $.fn.toast.settings.progressUp = true; $.fn.toast.settings.class = 'info'; $.fn.toast.settings.showIcon = true; $.fn.toast.settings.className.box = 'toast-box'; //removes shadow $.fn.toast.settings.className.title = 'header'; // smaller font size $.fn.toast.settings.className.icon = 'icon'; // top position again $.fn.toast.settings.transition.closeEasing = 'easeOutBounce'; */ // Or apply the old defaults directly to the toast $.toast({ title: 'LOOK', message: 'Turned back time to 2.7.0 defaults', showProgress: 'bottom', //make it look like 2.7.0 showIcon: true, progressUp: true, class: 'info', className: { box:'toast-box', title:'header', icon: 'icon' }, transition: { closeEasing: 'easeOutBounce' } }) ;
```

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

### Initialization and Configuration

Source: https://fomantic-ui.com/modules/tab.html

Initialize the tab module on elements with specific settings for history management and remote content loading.

```APIDOC
## Initialization

### Description
Initialize the tab module on a selection of elements.

### Example
$('.ui.menu .item').tab({ 
  history: true, 
  historyType: 'hash' 
});

### Settings
- **auto** (boolean) - Whether tab should load remote content as same url as history.
- **history** (boolean) - Whether to record history events for tab changes.
- **historyType** (string) - Type of history management ('hash' or 'state').
- **path** (string) - Base URL for state management or remote content.
```

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

### Initialize Tabs with Pathing

Source: https://fomantic-ui.com/modules/tab.html

Initialize tabs with a specific context to handle nested pathing.

```javascript
$('.paths.example .menu .item') .tab({ context: '.paths.example' }) ;
```

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

### Initialize Multiple Sidebars

Source: https://fomantic-ui.com/modules/sidebar.html

Recommended configuration when triggering multiple sidebars simultaneously to prevent layout conflicts.

```javascript
$('.demo.sidebar') .sidebar('setting', 'transition', 'overlay') .sidebar('toggle') ;
```

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

### Initialize Progress Bar with Settings

Source: https://fomantic-ui.com/modules/progress.html

Initializes a progress bar with a specific percentage value.

```javascript
$('#example2').progress({ percent: 22 });
```

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

### Preformatted Text Scrollbar

Source: https://fomantic-ui.com/globals/reset.html

Example of a pre element that triggers a scrollbar when content exceeds container width.

```text
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et me.
```

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

### Progress Settings

Source: https://fomantic-ui.com/modules/progress.html

Configuration options for initializing the progress component.

```APIDOC
## Progress Settings

- **autoSuccess** (boolean): Whether success state should automatically trigger when progress completes.
- **showActivity** (boolean): Whether progress should automatically show activity when incremented.
- **limitValues** (boolean): Whether values outside 0-100% range are adjusted or produce an error.
- **label** (string): Display progress as 'percent' or 'ratio'.
- **duration** (number): Milliseconds the bar gets animated to the next value.
- **random** (object): Range {min, max} for random increment value.
- **precision** (number): Decimal point precision for calculated progress.
- **total** (number|false): Total value for progress calculation.
- **value** (number|false): Current value.
```

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

### Watch for file changes

Source: https://fomantic-ui.com/introduction/build-tools.html

Starts the Gulp watch task to automatically rebuild files upon modification.

```bash
npx gulp watch
```

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

### Custom Label Interpretation

Source: https://fomantic-ui.com/modules/slider.html

Example of providing a custom function to the interpretLabel setting to return specific label text.

```javascript
interpretLabel: function(value){ //do something with 'value' and return matching text return myCustomText; }
```

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

### Preformatted Text Elements

Source: https://fomantic-ui.com/globals/reset.html

Demonstration of code, kbd, pre, and samp elements rendering with consistent font sizing.

```text
pre: abcdefghijklmnopqrstuvwxyz.
```

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

### Importing LESS Files

Source: https://fomantic-ui.com/introduction/advanced-usage.html

Import the main entry point or specific scoped components in LESS.

```less
/* Import all components */
@import 'src/semantic';
```

```less
/* Import specific components with scope */
& { @import 'src/definitions/elements/button'; }
& { @import 'src/definitions/elements/list'; }
```

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

### Initialize slider with range highlighting

Source: https://fomantic-ui.com/modules/slider.html

Configures a slider with a specific range, start and end points, and enabled highlighting.

```javascript
$('.ui.slider') .slider({ highlightRange: true, min: 0, max: 50, start: 5, end: 25 }) ;
```

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

### Initialize Embed with URL

Source: https://fomantic-ui.com/modules/embed.html

Automatically matches an embed source based on the domain of the provided URL.

```javascript
$('.url.example .ui.embed').embed();
```

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

### Colored Inline Text Examples

Source: https://fomantic-ui.com/elements/text.html

Demonstrates the use of standard and inverted color classes on span elements within segments.

```html
<div class="ui segment">
  This is <span class="ui red text">red</span> inline text and this is <span class="ui blue text">blue</span> inline text and this is <span class="ui purple text">purple</span> inline text
</div>
<div class="ui inverted segment">
  This is <span class="ui inverted red text">red</span> inline text and this is <span class="ui inverted blue text">blue</span> inline text and this is <span class="ui inverted purple text">purple</span> inline text
</div>
<div class="ui segment">
  This is <span class="ui info text">info</span> inline text and this is <span class="ui success text">success</span> inline text and this is <span class="ui warning text">warning</span> inline text and this is <span class="ui error text">error</span> inline text
</div>
<div class="ui inverted segment">
  This is <span class="ui inverted info text">info</span> inline text and this is <span class="ui inverted success text">success</span> inline text and this is <span class="ui inverted warning text">warning</span> inline text and this is <span class="ui inverted error text">error</span> inline text
</div>
```

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

### Initialize Popup with Content Settings

Source: https://fomantic-ui.com/modules/popup

Initializes a popup with title and content defined in the settings object.

```javascript
$('.ui.popup') .popup({ title : 'Popup Title', content : 'Hello I am a popup' }) ;
```

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

### Initialize a range calendar

Source: https://fomantic-ui.com/modules/calendar.html

Configures two calendar instances to work together for selecting a start and end date range.

```javascript
$('#rangestart').calendar({
  type: 'date',
  endCalendar: $('#rangeend')
});
$('#rangeend').calendar({
  type: 'date',
  startCalendar: $('#rangestart')
});
```

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

### Initialization

Source: https://fomantic-ui.com/modules/popup

Initializes the popup on an activating element.

```APIDOC
$('.activating.element').popup();
```

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

### Displaying Alert Flyouts

Source: https://fomantic-ui.com/modules/flyout.html

Examples of triggering alert dialogs with varying levels of detail, including title, content, and callback handlers.

```javascript
$.flyout('alert','hello');
```

```javascript
$.flyout('alert','Watch out','This is an important message!');
```

```javascript
$.flyout('alert',{ title: 'Listen to me', content: 'I love Fomantic-UI', handler: function() { $.toast({message:'Great!'}); } });
```

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

### .popup(settings)

Source: https://fomantic-ui.com/modules/popup

Initializes a popup on the selected element with the provided configuration settings.

```APIDOC
## .popup(settings)

### Description
Initializes the popup module on a jQuery selection. The settings object allows customization of behavior, positioning, and appearance.

### Parameters
- **settings** (object) - Optional - Configuration object for the popup.

### Settings
- **popup** (selector/object) - Optional - DOM element to use as the popup content.
- **on** (string) - Optional - Trigger event: 'focus', 'click', 'hover', or 'manual'.
- **position** (string) - Optional - Position of the popup relative to the element (e.g., 'top left').
- **inline** (boolean) - Optional - If true, creates the popup next to the element in the DOM.
- **transition** (string) - Optional - Named UI transition to use for animations.
- **delay** (object) - Optional - Delay in milliseconds for show/hide actions.

### Example
$('.example .button').popup({ on: 'click', position: 'bottom left' });
```

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

### search('get result', value)

Source: https://fomantic-ui.com/modules/search.html

Retrieves a specific result object from the current query results based on its title or generated ID.

```APIDOC
## .search('get result', value)

### Description
Returns the result object associated with the provided title or ID from the current search results.

### Parameters
- **value** (string) - Required - The title or ID of the result to retrieve.

### Example
// Get result by title
$('.ui.search').search('get result', 'cat');

// Get result by ID
$('.ui.search').search('get result', 'a1');
```

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

### Configure PostCSS in package.json

Source: https://fomantic-ui.com/introduction/integrations.html

Define autoprefixer settings within the project's package.json file.

```json
{
  "devDependencies": {
    "autoprefixer": "^6.3.1"
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {"browsers": ["last 2 versions"]}
    }
  }
}
```

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

### $('form').form('get dirty fields')

Source: https://fomantic-ui.com/behaviors/form.html

Retrieves a list of fields that have been modified since the form was initialized or last set to clean.

```APIDOC
## $('form').form('get dirty fields')

### Description
Returns an object or array containing the fields that have changed from their initial values.
```

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

### Initialize Dropdown with Additions

Source: https://fomantic-ui.com/modules/dropdown.html

Configures a dropdown to allow user-added items with custom class names.

```javascript
$('.stuck.example .ui.dropdown') .dropdown({ allowAdditions: true, hideAdditions: false, className: { addition: 'stuck addition' } }) ;
```

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

### Button Component LESS Definition

Source: https://fomantic-ui.com/usage/theming.html

An abridged example of a component definition file showing variable imports, scope creation, and CSS property mapping.

```less
/*******************************
            Theme
*******************************/

/* Define type and element to help locate theme files */
@type    : 'element';
@element : 'button';

/* Processes Variable Inheritance */
@import (multiple) '../../theme.config';

/* Create scope */
& {

/*******************************
           Button
*******************************/

/* Define Component */
.ui.button {
  cursor: pointer;
  display: inline-block;

  min-height: 1em;

  outline: none;
  border: none;
  vertical-align: @verticalAlign;
  background: @background;
  color: @textColor;

  font-family: @fontFamily;

  margin: 0 @horizontalMargin @verticalMargin 0;
  padding: @verticalPadding @horizontalPadding (@verticalPadding + @shadowOffset);

  text-transform: @textTransform;
  text-shadow: @textShadow;
  font-weight: @fontWeight;
  line-height: @lineHeight;
  font-style: normal;
  text-align: center;
  text-decoration: none;

  border-radius: @borderRadius;
  box-shadow: @boxShadow;

  user-select: none;
  transition: @transition;
  will-change: @willChange;

  -webkit-tap-highlight-color: @tapColor;
}

/* Additional CSS removed for brevity */

/* Load CSS Overrides and Inline */
.loadUIOverrides();

}
```

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

### Dropdown Configuration

Source: https://fomantic-ui.com/modules/dropdown.html

Configuring the dropdown action behavior during initialization.

```APIDOC
## Dropdown Configuration

### Description
Configures the dropdown's action behavior when an item is selected. You can use built-in actions like 'activate', 'combo', 'select', 'hide', or provide a custom function.

### Usage
$('.dropdown').dropdown({ action: 'combo' });

### Parameters
- **action** (string|function) - Optional - The action to perform on selection. Built-in: 'activate', 'combo', 'select', 'hide', 'nothing'. Custom: function(text, value, element){}
```

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

### Initialize Sticky with Context

Source: https://fomantic-ui.com/modules/sticky.html

Standard initialization specifying a context element.

```javascript
$('.ui.sticky') .sticky({ context: '#context' }) ;
```

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

### Transition with Settings and Callbacks

Source: https://fomantic-ui.com/modules/transition.html

Executes a scale animation with a specific duration and an onComplete callback.

```javascript
$('.green.leaf') .transition({ animation : 'scale', duration : '2s', onComplete : function() { alert('done'); } }) ;
```

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

### Initialize API with Direct Data

Source: https://fomantic-ui.com/behaviors/api.html

Passes server data directly into the API configuration during initialization.

```javascript
$('.form .submit') .api({ data: { session: 22, name: 'Baz' } }) ;
```

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

### API Initialization

Source: https://fomantic-ui.com/behaviors/api.html

Configuration options for initializing the API module, including response handling and AJAX settings.

```APIDOC
## .api(settings)

### Description
Initializes the API module with custom settings, including response handling and AJAX configurations.

### Parameters
- **response** (object) - Optional - A Javascript object for returning an API response.
- **responseAsync** (function) - Optional - A function for handling custom asynchronous API requests.
- **on** (string) - Optional - Event when API request should occur (default: 'auto').
- **cache** (boolean/string) - Optional - Caching behavior for successful responses.
- **throttle** (number) - Optional - Delay before triggering request.
```

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

### Initialize API via metadata

Source: https://fomantic-ui.com/behaviors/api.html

Initializes the API behavior using data attributes defined on the element.

```javascript
// also calls '/follow/22' $('.follow.button') .api() ; 
```

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

### Basic Config Templates

Source: https://fomantic-ui.com/modules/modal.html

Quickly show preconfigured alert, confirm, or prompt modals.

```javascript
$.modal('alert','hello') $.modal('confirm','Are you sure?',function(value){}) $.modal('prompt','Enter Code', function(value){})
```

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

### Initialize Dropdown with Images and Icons

Source: https://fomantic-ui.com/modules/dropdown.html

Dynamically creates items with images and icons by providing paths or class names in the values array.

```javascript
$('#imagesandicons').dropdown({ placeholder: 'Show images and icons', values:[{ "name": "Avatar", "value": "jenny", "image": "https://fomantic-ui.com/images/avatar/small/jenny.jpg", "alt": "A picture of jenny", "imageClass": "ui avatar image" }, { "name": "Image", "value": "elliot", "image": "https://fomantic-ui.com/images/avatar/small/elliot.jpg" }, { "name": "Flag", "value": "uk", "icon": "uk", "iconClass": "flag" }, { "name": "Icon", "value": "female", "icon": "female" }, { "name": "Colored Icon", "value": "coloredfemale", "icon": "pink female" }, { "name": "Image and Icon", "value": "completefemale", "image": "https://fomantic-ui.com/images/avatar/small/jenny.jpg", "icon": "pink female" }] }) ;
```

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

### Initialize API with synchronous mocked response

Source: https://fomantic-ui.com/behaviors/api.html

Uses the response parameter to provide a static object as the API result.

```javascript
$('.sync.mocked .button') .api({ response: { success: true } }) .state({ text: { inactive : 'Off', active : 'On' } }) ;
```

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

### Initialize dropdown with match highlighting

Source: https://fomantic-ui.com/modules/dropdown.html

Enables automatic highlighting of matching strings within search results.

```javascript
$('#highlightexample')
  .dropdown({
    highlightMatches: true
  });
```

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

### Initialize Tabs with Hash History

Source: https://fomantic-ui.com/modules/tab.html

Uses the Asual Address library to enable hash-based history navigation for tabs.

```javascript
$('.ui.menu .item') .tab({ history: true, historyType: 'hash' }) ;
```

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

### Config Templates

Source: https://fomantic-ui.com/modules/flyout.html

Quickly trigger preconfigured flyouts similar to native browser dialogs.

```APIDOC
## $.flyout(template, title, content, handler)

### Description
Invokes a preconfigured flyout template. These are automatically shown upon invocation.

### Templates
- **alert**: $.flyout('alert', 'message')
- **confirm**: $.flyout('confirm', 'Are you sure?', function(value) {})
- **prompt**: $.flyout('prompt', 'Enter Code', function(value) {})
```

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

### Configure Progress Bar Text Templates

Source: https://fomantic-ui.com/modules/progress.html

Sets custom text templates for active and success states using placeholders.

```javascript
$('#example5') .progress('increment') ;
Adding Photos
$('#example5') .progress({ text: { active : 'Adding {value} of {total} photos', success : '{total} Photos Uploaded!' } }) ;
```

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

### Initialize Embed with Metadata

Source: https://fomantic-ui.com/modules/embed.html

Overrides default presets using metadata for icons and placeholder images.

```javascript
$('.metadata.example .ui.embed').embed();
```

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

### $.toast(settings)

Source: https://fomantic-ui.com/modules/toast.html

Initializes a new toast notification with the provided configuration settings.

```APIDOC
## $.toast(settings)

### Description
Creates and displays a new toast notification. You can pass an object containing configuration settings to customize the appearance and behavior of the toast.

### Parameters
- **settings** (object) - Required - Configuration object containing properties like `title`, `message`, `class`, `displayTime`, `showIcon`, etc.
```

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

### Initialize Actionable Dropdown

Source: https://fomantic-ui.com/modules/dropdown.html

Configures a dropdown with actionable items that trigger a custom callback instead of selecting the item.

```javascript
$('.actionable.example .ui.dropdown')
  .dropdown({
    collapseOnActionable: false,
    onActionable: function(value, text, $selected) {
      var type=text.split(":")[0];
      $.toast({
        title: type + ' Reveal',
        message:'You need to know: '+ value
      });
    }
  });
```

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

### Show a standard modal

Source: https://fomantic-ui.com/modules/modal.html

Initializes and displays a standard modal using jQuery.

```javascript
$('.ui.modal')
  .modal('show')
;
```

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

### Initialize API Behavior

Source: https://fomantic-ui.com/behaviors/api.html

Initializes the API behavior on a UI element to handle requests.

```APIDOC
## .api(settings)

### Description
Initializes the API behavior on a jQuery element. Passing a new settings object will destroy the previous instance.

### Parameters
- **settings** (object) - Required - Configuration object for the API request, including action, method, data, and callbacks.
```

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

### Initialize Search with Default Endpoint

Source: https://fomantic-ui.com/modules/search.html

Initializes the search component using the default /search/{query} endpoint.

```javascript
// initializes with default endpoint /search/{query} $('.ui.search') .search({ type: 'category' }) ;
```

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

### Initialize Tabs with HTML5 Push State

Source: https://fomantic-ui.com/modules/tab.html

Enables push state for tab navigation. Requires backend routing to handle the specified path.

```javascript
$('.ui.menu .item') .tab({ history: true, historyType: 'state', path: '/modules/tab.html' }) ;
```

```javascript
$('.ui.menu .item') .tab({ history: true, historyType: 'state' path: '/modules/tab.html' }) ;
```

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

### Initialize Embed with Custom Settings

Source: https://fomantic-ui.com/modules/embed.html

Configures embed behavior at run-time using a settings object.

```javascript
$('.custom.example .ui.embed').embed({ source : 'youtube', id : 'O6Xo21L0ybE', alt : 'A video about a waving bear', placeholder : '/images/bear-waving.jpg' });
```

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

### Initialize API with data

Source: https://fomantic-ui.com/behaviors/api.html

Passes data to the API request via the urlData parameter.

```javascript
// translates '/follow/{id}' to 'follow/22' $('.follow.button') .api({ action: 'follow user', urlData: { id: 22 } }) ; 
```

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

### Invoke Dropdown Behaviors

Source: https://fomantic-ui.com/modules/dropdown.html

Demonstrates the syntax for calling behaviors on dropdown elements, including optional arguments.

```javascript
$('.your.element') .dropdown('behavior name', argumentOne, argumentTwo) ; // For example using the below mentioned 'clear(preventChangeTrigger)' $('.ui.dropdown') .dropdown('clear', true) ; // Using the same but omit the default value for the preventChangeTrigger argument (which is false) $('.ui.dropdown') .dropdown('clear') ;
```

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

### .visibility(settings)

Source: https://fomantic-ui.com/behaviors/visibility.html

Initializes the visibility behavior on a selected element with specific configuration settings.

```APIDOC
## .visibility(settings)

### Description
Initializes the visibility behavior on the selected element. This allows for tracking scroll events, element positioning, and triggering callbacks based on visibility thresholds.

### Parameters
- **settings** (object) - Required - Configuration object for the visibility behavior.

#### Settings
- **once** (boolean) - Default: true - When set to false a callback will occur each time an element passes the threshold for a condition.
- **continuous** (boolean) - Default: false - When set to true a callback will occur anytime an element passes a condition.
- **type** (string) - Default: false - Set to 'image' to load images or 'fixed' to add a fixed class.
- **initialCheck** (boolean) - Default: true - Whether visibility conditions should be checked immediately on init.
- **context** (string) - Default: window - The scroll context visibility should use.
- **refreshOnLoad** (boolean) - Default: true - Whether visibility conditions should be checked on window load.
- **refreshOnResize** (boolean) - Default: true - Whether visibility conditions should be checked on window resize.
- **checkOnRefresh** (boolean) - Default: true - Whether visibility conditions should be checked on calls to refresh.
- **zIndex** (integer) - Default: 1 - Specify a z-index when using type: 'fixed'.
- **offset** (integer) - Default: 0 - Value that context scrollTop should be adjusted in pixels.
- **includeMargin** (boolean) - Default: false - Whether element calculations should include its margin.
- **throttle** (integer/boolean) - Default: false - Scroll position debounce value in ms.
- **observeChanges** (boolean) - Default: true - Whether to automatically refresh content when changes are made to the element's DOM subtree.
- **transition** (string) - Default: false - Transition when showing a loaded image (type: image).
- **duration** (integer) - Default: 1000 - Transition duration for type: image.
```

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

### Initialize Standard Dropdown

Source: https://fomantic-ui.com/modules/dropdown.html

Basic initialization for a dropdown element.

```javascript
$('.ui.dropdown') .dropdown() ;
```

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

### Initialize and Configure Dropdown

Source: https://fomantic-ui.com/

Use jQuery to initialize a dropdown component and set selected values programmatically.

```javascript
$('select.dropdown')
  .dropdown('set selected', ['meteor', 'ember'])
;
```

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

### .visibility(settings)

Source: https://fomantic-ui.com/behaviors/visibility.html

Initializes the visibility behavior on a selected element with custom callback functions and configuration settings.

```APIDOC
## .visibility(settings)

### Description
Attaches visibility event listeners to elements. Callbacks are triggered based on the element's position relative to the viewport.

### Configuration Options
- **continuous** (boolean) - If true, the callback fires every time the condition is met during scroll.
- **once** (boolean) - If false, the callback fires each time the condition becomes true (e.g., scrolling back and forth).

### Callback Events
- **onOnScreen** - Triggered when any part of the element is in the viewport.
- **onOffScreen** - Triggered when no part of the element is in the viewport.
- **onTopVisible** - Triggered when the element's top edge passes the bottom of the screen.
- **onTopPassed** - Triggered when the element's top edge passes the top of the screen.
- **onBottomVisible** - Triggered when the element's bottom edge passes the bottom of the screen.
- **onPassing** - Triggered when any part of the element is visible on screen.
- **onBottomPassed** - Triggered when the element's bottom edge passes the top of the screen.
- **onPassed** (object) - A collection of callbacks triggered at specific pixel or percentage thresholds (e.g., { '40': function() {}, '80%': function() {} }).

### Example
$('.demo.segment').visibility({
  onTopVisible: function(calculations) {
    // Logic when top is on screen
  },
  onPassed: {
    '50%': function() {
      // Logic when 50% of element is passed
    }
  }
});
```

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

### Implement Rapid Progress Updates

Source: https://fomantic-ui.com/modules/progress.html

Demonstrates how to trigger rapid progress increments using an interval, updating the UI button text and resetting the progress bar.

```javascript
$('.rapid.example .ui.button') .on('click', function() { var $progress = $('.rapid.example .ui.progress'), $button = $(this), updateEvent ; // restart to zero clearInterval(window.fakeProgress) $progress.progress('reset'); // updates every 10ms until complete window.fakeProgress = setInterval(function() { $progress.progress('increment'); $button.text( $progress.progress('get value') ); // stop incrementing when complete if($progress.progress('is complete')) { clearInterval(window.fakeProgress) } }, 10); }) ; $('.rapid.example .ui.progress') .progress({ duration : 200, total : 200, text : { active: '{value} of {total} done' } }) ;
```

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

### Initialize Popup with Inline and Delay Settings

Source: https://fomantic-ui.com/modules/popup

Configures a popup to be inserted inline with the activator, with specific hover delays.

```javascript
$('.example .menu .browse') .popup({ inline : true, hoverable : true, position : 'bottom left', delay: { show: 300, hide: 800 } }) ;
```

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

### Initialize Sticky Content

Source: https://fomantic-ui.com/modules/sticky.html

Basic initialization of a sticky element with a defined context.

```javascript
$('.ui.sticky')
  .sticky({
    context: '#example1'
  })
;
```

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

### Initialize API behavior on an element

Source: https://fomantic-ui.com/behaviors/api.html

Attaches an API action to a button element to trigger a server request.

```javascript
$('.button')
  .api({
    action: 'get followers'
  })
;
```

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

### Initialize Popup with Dynamic Transition

Source: https://fomantic-ui.com/modules/popup

Updates the popup transition dynamically based on a dropdown selection.

```javascript
$('.selection') .dropdown({ onChange: function(value) { $('.demo.icon') .popup({ transition: value }) .popup('toggle') ; } }) ;
```

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

### $('.ui.toast').toast('behavior', ...)

Source: https://fomantic-ui.com/modules/toast.html

Invokes a specific behavior on an existing toast instance.

```APIDOC
## $('.ui.toast').toast('behavior', ...)

### Description
Executes a specific behavior on the toast instance. Available behaviors include 'animate pause', 'animate continue', 'close', 'get toasts', 'get remainingTime', and 'destroy'.
```

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

### Initialize Progress Bar with Metadata

Source: https://fomantic-ui.com/modules/progress.html

Basic initialization of a progress bar element using jQuery.

```javascript
$('#example1').progress();
```

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

### nag(settings)

Source: https://fomantic-ui.com/modules/nag.html

Initializes the nag component with custom settings.

```APIDOC
## .nag(settings)

### Description
Initializes the nag component with an object of configuration settings.

### Settings
- **persist** (boolean) - Default: false. If true, shows the nag even if dismissed, but keeps expiration intact.
- **displayTime** (integer) - Default: 0. Time in milliseconds until automatic hide.
- **context** (string/object) - Default: body. Selector or jQuery object for attachment.
- **detachable** (boolean) - Default: false. If true, re-attaches to the context node.
- **expires** (integer/Date) - Default: 30. Days or Date object for expiration.
- **storageMethod** (string) - Default: cookie. Storage type: 'cookie', 'localstorage', or 'sessionstorage'.
- **key** (string) - Default: nag. Key for storage.
- **value** (string) - Default: dismiss. Value for storage.
- **animation** (object) - Default: { show: 'slide', hide: 'slide' }. Transition style.
- **duration** (integer) - Default: 500. Animation duration in ms.
```

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

### Initialize Rating with Metadata

Source: https://fomantic-ui.com/modules/rating.html

Configure the rating component using JavaScript settings to override or set initial values.

```javascript
$('.toggle.example .rating') .rating({ initialRating: 2, maxRating: 4 }) ;
```

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

### Initialize Tabular Menu

Source: https://fomantic-ui.com/modules/tab.html

Standard initialization for tabs connected to a tabular menu.

```javascript
$('.tabular.menu .item').tab();
```

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

### Initialize Basic Tabs

Source: https://fomantic-ui.com/modules/tab.html

Initialize tabs on menu items using the .tab() method.

```javascript
$('.menu .item') .tab() ;
```

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

### Configure state with API integration

Source: https://fomantic-ui.com/behaviors/state.html

Integrates state transitions with API actions and custom text configurations.

```javascript
// typically you'd define all your templated urls in one config file
$.fn.api.settings.api.follow = '/follow/{id}/'

$('.foo.button')
  .api({
    action: 'follow'
  })
  .state({
    onActivate: function() {
      $(this).state('flash text');
    },
    text: {
      inactive : 'Follow',
      active   : 'Followed',
      deactivate : 'Unfollow',
      flash    : 'Added follower!'
    }
  })
;
```

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

### transition(behavior, ...args)

Source: https://fomantic-ui.com/modules/transition.html

Executes a specific behavior on the transition module, such as controlling loops, stopping animations, or toggling visibility.

```APIDOC
## .transition(behavior, ...args)

### Description
Invokes a specific behavior on the transition module to control animation state or element visibility.

### Behaviors
- **'set looping'**: Enables animation looping.
- **'remove looping'**: Disables animation looping.
- **'stop'**: Ends the current animation.
- **'stop all'**: Ends the current animation and clears the queue.
- **'clear queue'**: Continues current playback but removes queued animations.
- **'show'**: Shows the element without animation.
- **'hide'**: Hides the element without animation.
- **'toggle'**: Toggles the visibility of the element.
```

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

### Initialize Calendar with Min/Max Dates

Source: https://fomantic-ui.com/modules/calendar.html

Sets selection boundaries relative to the current date.

```javascript
var today = new Date(); $('#minmax_calendar') .calendar({ minDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() - 5), maxDate: new Date(today.getFullYear(), today.getMonth(), today.getDate() + 5) }) ;
```

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

### .slider(settings)

Source: https://fomantic-ui.com/modules/slider.html

Initializes the slider component with specific configuration options.

```APIDOC
## .slider(settings)

### Description
Initializes a slider element with custom settings for range, highlighting, and label styling.

### Parameters
- **highlightRange** (boolean) - Optional - Enables highlighting of the selected range.
- **min** (number) - Optional - The minimum value of the slider.
- **max** (number) - Optional - The maximum value of the slider.
- **start** (number) - Optional - The starting value of the range.
- **end** (number) - Optional - The ending value of the range.
- **className** (object) - Optional - Custom class names for internal elements like labels.
- **autoAdjustLabels** (boolean) - Optional - Whether to automatically adjust label visibility based on viewport size.
- **labelDistance** (string/number) - Optional - Sets the distance between labels.
```

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

### Initialize Day-First Calendar

Source: https://fomantic-ui.com/modules/calendar.html

Configures the calendar to display days before months.

```javascript
$('#day_first_calendar') .calendar({ type: 'date', monthFirst: false }) ;
```

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

### Configure Local Search Source

Source: https://fomantic-ui.com/modules/search.html

Sets up search functionality against a local JavaScript array, specifying which fields to index.

```javascript
// searches across any array/object of searchable objects var content = [ { title: 'Horse', description: 'An Animal', }, { title: 'Cow', description: 'Another Animal', } ] ; $('.ui.search') .search({ source : content, searchFields : [ 'title' ], fullTextSearch: false }) ;
```
Tokens:
Raw