### 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
Labeled
Button
``` -------------------------------- ### 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
Item 1 Item 2 Item 3
``` -------------------------------- ### 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
This is red inline text and this is blue inline text and this is purple inline text
This is red inline text and this is blue inline text and this is purple inline text
This is info inline text and this is success inline text and this is warning inline text and this is error inline text
This is info inline text and this is success inline text and this is warning inline text and this is error inline text
``` -------------------------------- ### 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 }) ; ```