### HTML Setup for Materialize Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/getting-started.html Example of how to link Materialize CSS and JavaScript files in an HTML document. It includes importing Google Icons, Materialize CSS, and the JavaScript at the end of the body for optimized loading. ```html ``` -------------------------------- ### HTML Setup for Materialize Source: https://github.com/materializecss/materialize-docs/blob/main/docs/getting-started.html Example of how to link Materialize CSS and JavaScript files in an HTML document. It includes importing Google Icons, Materialize CSS, and the JavaScript at the end of the body for optimized loading. ```html ``` -------------------------------- ### Development Setup and Run Source: https://github.com/materializecss/materialize-docs/blob/main/README.md Clones the repository, initializes submodules, installs dependencies using pnpm, and starts the development server for live preview. ```bash git clone https://github.com/materializecss/materialize-docs.git cd materialize-docs git submodule init git submodule update pnpm install pnpm dev ``` -------------------------------- ### CDN Setup Source: https://github.com/materializecss/materialize-docs/blob/main/src/getting-started.html Includes the Materialize CSS and JavaScript files from a CDN. This is a quick way to get started without downloading the files. ```html ``` -------------------------------- ### Install Materialize with Yarn Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/getting-started.html Installs the latest release of Materialize CSS using Yarn. This includes source files and compiled CSS/JavaScript. ```bash yarn add @materializecss/materialize ``` -------------------------------- ### Install Materialize with Yarn Source: https://github.com/materializecss/materialize-docs/blob/main/docs/getting-started.html Installs the latest release of Materialize CSS using Yarn. This includes source files and compiled CSS/JavaScript. ```bash yarn add @materializecss/materialize ``` -------------------------------- ### Install Materialize with NPM Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/getting-started.html Installs the latest release of Materialize CSS using the Node Package Manager (NPM). This includes source files and compiled CSS/JavaScript. ```bash npm install @materializecss/materialize ``` -------------------------------- ### Install Materialize with NPM Source: https://github.com/materializecss/materialize-docs/blob/main/docs/getting-started.html Installs the latest release of Materialize CSS using the Node Package Manager (NPM). This includes source files and compiled CSS/JavaScript. ```bash npm install @materializecss/materialize ``` -------------------------------- ### CDN Integration for Materialize CSS Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/getting-started.html This snippet shows how to include the Materialize CSS framework in your HTML document using a CDN. It includes both the minified CSS and JavaScript files for quick setup. ```html ``` -------------------------------- ### CDN Integration for Materialize CSS Source: https://github.com/materializecss/materialize-docs/blob/main/docs/getting-started.html This snippet shows how to include the Materialize CSS framework in your HTML document using a CDN. It includes both the minified CSS and JavaScript files for quick setup. ```html ``` -------------------------------- ### Yarn Installation Source: https://github.com/materializecss/materialize-docs/blob/main/src/getting-started.html Installs the latest release of Materialize CSS using Yarn, a popular package manager. ```bash yarn add @materializecss/materialize ``` -------------------------------- ### NPM Installation Source: https://github.com/materializecss/materialize-docs/blob/main/src/getting-started.html Installs the latest release of Materialize CSS using NPM, which includes source files as well as compiled CSS and JavaScript. ```bash npm install @materializecss/materialize ``` -------------------------------- ### Sass Compilation Structure Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/getting-started.html Illustrates the project structure when using the Sass version of Materialize. It shows the location of the main SCSS file and its components, emphasizing that Sass files need to be compiled into CSS. ```bash MyWebsite/ |--css/ | |--materialize.css <-- compiled from scss/materialize.scss | |--js/ | |--materialize.js | |--scss/ | |--materialize.scss | |--components/ | |--index.html ``` -------------------------------- ### Sass Compilation Structure Source: https://github.com/materializecss/materialize-docs/blob/main/docs/getting-started.html Illustrates the project structure when using the Sass version of Materialize. It shows the location of the main SCSS file and its components, emphasizing that Sass files need to be compiled into CSS. ```bash MyWebsite/ |--css/ | |--materialize.css <-- compiled from scss/materialize.scss | |--js/ | |--materialize.js | |--scss/ | |--materialize.scss | |--components/ | |--index.html ``` -------------------------------- ### Theme Initialization Script Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/getting-started.html This JavaScript code snippet checks for a 'theme' preference in local storage and applies it to the document's root element. This is useful for implementing dark mode or other theme functionalities. ```javascript const theme = localStorage.getItem("theme"); if (theme) document.documentElement.setAttribute("theme", theme); ``` -------------------------------- ### Theme Initialization Script Source: https://github.com/materializecss/materialize-docs/blob/main/docs/getting-started.html This JavaScript code snippet checks for a 'theme' preference in local storage and applies it to the document's root element. This is useful for implementing dark mode or other theme functionalities. ```javascript const theme = localStorage.getItem("theme"); if (theme) document.documentElement.setAttribute("theme", theme); ``` -------------------------------- ### Materialize Initialization Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/templates/parallax-template/preview.html Initializes all Materialize components on the page. This is a common setup step for Materialize projects. ```JavaScript M.AutoInit(); ``` -------------------------------- ### Materialize Initialization Source: https://github.com/materializecss/materialize-docs/blob/main/src/public/templates/parallax-template/preview.html Initializes all Materialize components on the page. This is a common setup step for Materialize projects. ```JavaScript M.AutoInit(); ``` -------------------------------- ### Materialize Initialization Source: https://github.com/materializecss/materialize-docs/blob/main/src/public/templates/parallax-template/index.html Initializes all Materialize components on the page. This is a common setup step for Materialize projects. ```JavaScript M.AutoInit(); ``` -------------------------------- ### Materialize Initialization Source: https://github.com/materializecss/materialize-docs/blob/main/docs/templates/parallax-template/preview.html Initializes all Materialize components on the page. This is a common setup step for Materialize projects. ```JavaScript M.AutoInit(); ``` -------------------------------- ### Materialize Initialization Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/templates/parallax-template/index.html Initializes all Materialize components on the page. This is a common setup step for Materialize projects. ```JavaScript M.AutoInit(); ``` -------------------------------- ### Materialize Initialization Source: https://github.com/materializecss/materialize-docs/blob/main/docs/templates/parallax-template/index.html Initializes all Materialize components on the page. This is a common setup step for Materialize projects. ```JavaScript M.AutoInit(); ``` -------------------------------- ### Build and Preview Site Source: https://github.com/materializecss/materialize-docs/blob/main/README.md Builds the static site for production and starts a local server to preview the built site. ```bash pnpm build pnpm preview ``` -------------------------------- ### Materialize CSS AutoInit Options Reference Source: https://github.com/materializecss/materialize-docs/blob/main/src/auto-init.html Provides details on the options available for the M.AutoInit() function, including the context element for searching components and a general options object for component-specific configurations. ```APIDOC M.AutoInit(context?: Element, options?: Object) Parameters: context: DOM Element to search within for components. Defaults to document.body. options: Object containing options for each component. Refer to individual component documentation for specific option details. Description: Initializes all Materialize components within the specified DOM context. The options object allows for customization of individual component behaviors during initialization. ``` -------------------------------- ### Getting Timepicker Instance Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/timepicker.html Example of how to retrieve the plugin instance for a given element to call its methods. ```javascript const instance = M.Timepicker.getInstance(elem); ``` -------------------------------- ### Getting Timepicker Instance Source: https://github.com/materializecss/materialize-docs/blob/main/docs/timepicker.html Example of how to retrieve the plugin instance for a given element to call its methods. ```javascript const instance = M.Timepicker.getInstance(elem); ``` -------------------------------- ### Roboto Font Import Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/getting-started.html This CSS snippet imports the Roboto font from Google Fonts, which is a common requirement for Materialize CSS to ensure consistent typography. ```css @import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i"); ``` -------------------------------- ### Materialize CSS Setup and Theme Source: https://github.com/materializecss/materialize-docs/blob/main/docs/pushpin-demo.html This snippet demonstrates how to import Materialize CSS styles from Google Fonts and how to apply a theme based on local storage settings. ```html Materialize Example @import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i"); ``` -------------------------------- ### Auto Init Initialization Source: https://github.com/materializecss/materialize-docs/blob/main/docs/auto-init.html Demonstrates the basic usage of M.AutoInit() to initialize all Materialize components. It also shows how to pass custom options to configure specific components during initialization. ```javascript M.AutoInit(); ``` ```javascript M.AutoInit(document.body, { Dropdown: { // pass options for Dropdown here }, FloatingActionButtonOptions: { // pass options for FloatingActionButtonOptions here }, // Component: { ... } }); ``` -------------------------------- ### Roboto Font Import Source: https://github.com/materializecss/materialize-docs/blob/main/docs/getting-started.html This CSS snippet imports the Roboto font from Google Fonts, which is a common requirement for Materialize CSS to ensure consistent typography. ```css @import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i"); ``` -------------------------------- ### HTML Setup with Materialize Source: https://github.com/materializecss/materialize-docs/blob/main/src/getting-started.html Demonstrates how to properly link Materialize CSS and JavaScript files in an HTML document. It's recommended to import JavaScript at the end of the body for optimized loading. ```html ``` -------------------------------- ### Initialize Materialize Components Source: https://github.com/materializecss/materialize-docs/blob/main/docs/templates/starter-template/preview.html This JavaScript code snippet initializes all Materialize components on the page. It's a common starting point for projects using the Materialize framework. ```javascript M.AutoInit(); ``` -------------------------------- ### Initialize Materialize Components Source: https://github.com/materializecss/materialize-docs/blob/main/docs/templates/starter-template/index.html This JavaScript code snippet initializes all Materialize components on the page. It's a common starting point for projects using the Materialize framework. ```javascript M.AutoInit(); ``` -------------------------------- ### Initialize Materialize Components Source: https://github.com/materializecss/materialize-docs/blob/main/src/public/templates/starter-template/index.html This JavaScript code snippet initializes all Materialize components on the page. It's a common starting point for projects using the Materialize framework. ```javascript M.AutoInit(); ``` -------------------------------- ### Initialize Materialize Components Source: https://github.com/materializecss/materialize-docs/blob/main/src/public/templates/starter-template/preview.html This JavaScript code snippet initializes all Materialize components on the page. It's a common starting point for projects using the Materialize framework. ```javascript M.AutoInit(); ``` -------------------------------- ### Navigation Menu Structure Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/index.html This snippet outlines the structure of the documentation's navigation menu, including links to different sections like 'About', 'Getting started', 'Styles', and 'Components'. It also includes social media links and version selection. ```html Documentation [_menu_](#) * _palette_ * [_dark_mode_](#) * [![GitHub logo](images/github.svg)](https://github.com/materializecss/materialize "Check out our GitHub") * [![Open Collective logo](images/opencollective.svg)](https://opencollective.com/materialize "Support us via OpenCollective") * [![Materialize Web Logo](images/materialize.svg) Materialize](/) * _search_ * [info About](about.html) * [apps Getting started](getting-started.html) * * palette Styles * [Color](color.html) * [Grid](grid.html) * [Helpers](helpers.html) * [Media Styles](media-css.html) * [Pulse](pulse.html) * [Sass](sass.html) * [Shadow](shadow.html) * [Table](table.html) * [Transitions](css-transitions.html) * [Typography](typography.html) * [Themes](themes.html) * [Waves](waves.html) * * add_circle Components * [Badges](badges.html) * [Buttons](buttons.html) * [Breadcrumbs](breadcrumbs.html) * [Cards](cards.html) * [Collections](collections.html) * [Floating Action Button](floating-action-button.html) * [Footer](footer.html) * [Icons](icons.html) * [Navbar](navbar.html) * [Pagination](pagination.html) * [Preloader](preloader.html) * [Auto Init](auto-init.html) * [Carousel](carousel.html) * [Collapsible](collapsible.html) * [Dropdown](dropdown.html) * [Feature Discovery](feature-discovery.html) * [Media](media.html) * [Modals](modals.html) * [Parallax](parallax.html) * [Pushpin](pushpin.html) * [Scrollspy](scrollspy.html) * [Sidenav](sidenav.html) * [Tabs](tabs.html) * [Toasts](toasts.html) * [Tooltips](tooltips.html) * [Date Picker](datepicker.html) * [Time Picker](timepicker.html) * * text_fields Forms * [Autocomplete](autocomplete.html) * [Checkboxes](checkboxes.html) * [Chips](chips.html) * [Radio Buttons](radio-buttons.html) * [Range](range.html) * [Select](select.html) * [Switches](switches.html) * [Text Inputs](text-inputs.html) * [mobile_friendly Mobile](mobile.html) * [v2.2.2 (Latest)](#) * [v2.2.2 (Latest)](/version/v2.2.2/) * [v2.2.1](/version/v2.2.1/) * [v2.1.1](/version/v2.1.1/) * 2.1.0 * 2.0.4 * 2.0.3-alpha ``` -------------------------------- ### Navigation Menu Structure Source: https://github.com/materializecss/materialize-docs/blob/main/docs/index.html This snippet outlines the structure of the documentation's navigation menu, including links to different sections like 'About', 'Getting started', 'Styles', and 'Components'. It also includes social media links and version selection. ```html Documentation [_menu_](#) * _palette_ * [_dark_mode_](#) * [![GitHub logo](images/github.svg)](https://github.com/materializecss/materialize "Check out our GitHub") * [![Open Collective logo](images/opencollective.svg)](https://opencollective.com/materialize "Support us via OpenCollective") * [![Materialize Web Logo](images/materialize.svg) Materialize](/) * _search_ * [info About](about.html) * [apps Getting started](getting-started.html) * * palette Styles * [Color](color.html) * [Grid](grid.html) * [Helpers](helpers.html) * [Media Styles](media-css.html) * [Pulse](pulse.html) * [Sass](sass.html) * [Shadow](shadow.html) * [Table](table.html) * [Transitions](css-transitions.html) * [Typography](typography.html) * [Themes](themes.html) * [Waves](waves.html) * * add_circle Components * [Badges](badges.html) * [Buttons](buttons.html) * [Breadcrumbs](breadcrumbs.html) * [Cards](cards.html) * [Collections](collections.html) * [Floating Action Button](floating-action-button.html) * [Footer](footer.html) * [Icons](icons.html) * [Navbar](navbar.html) * [Pagination](pagination.html) * [Preloader](preloader.html) * [Auto Init](auto-init.html) * [Carousel](carousel.html) * [Collapsible](collapsible.html) * [Dropdown](dropdown.html) * [Feature Discovery](feature-discovery.html) * [Media](media.html) * [Modals](modals.html) * [Parallax](parallax.html) * [Pushpin](pushpin.html) * [Scrollspy](scrollspy.html) * [Sidenav](sidenav.html) * [Tabs](tabs.html) * [Toasts](toasts.html) * [Tooltips](tooltips.html) * [Date Picker](datepicker.html) * [Time Picker](timepicker.html) * * text_fields Forms * [Autocomplete](autocomplete.html) * [Checkboxes](checkboxes.html) * [Chips](chips.html) * [Radio Buttons](radio-buttons.html) * [Range](range.html) * [Select](select.html) * [Switches](switches.html) * [Text Inputs](text-inputs.html) * [mobile_friendly Mobile](mobile.html) * [v2.2.2 (Latest)](#) * [v2.2.2 (Latest)](/version/v2.2.2/) * [v2.2.1](/version/v2.2.1/) * [v2.1.1](/version/v2.1.1/) * 2.1.0 * 2.0.4 * 2.0.3-alpha ``` -------------------------------- ### Auto Init Initialization Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/auto-init.html Demonstrates the basic usage of M.AutoInit() to initialize all Materialize components. It also shows how to pass custom options to configure specific components during initialization. ```javascript M.AutoInit(); ``` ```javascript M.AutoInit(document.body, { Dropdown: { // pass options for Dropdown here }, FloatingActionButtonOptions: { // pass options for FloatingActionButtonOptions here }, // Component: { ... } }); ``` -------------------------------- ### Initialize Materialize Components Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/templates/starter-template/index.html This JavaScript code snippet initializes all Materialize components on the page. It's a common starting point for projects using the Materialize framework. ```javascript M.AutoInit(); ``` -------------------------------- ### More Responsive Grid Examples Source: https://github.com/materializecss/materialize-docs/blob/main/src/grid.html Provides multiple examples of responsive grid layouts using various column combinations for different screen sizes (small, medium, large). These examples showcase flexibility in arranging content. ```html

s12

s12 m4

s12 m4

s12 m4

s12 m6 l3

s12 m6 l3

s12 m6 l3

s12 m6 l3

``` -------------------------------- ### Initialize Materialize Components Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/templates/starter-template/preview.html This JavaScript code snippet initializes all Materialize components on the page. It's a common starting point for projects using the Materialize framework. ```javascript M.AutoInit(); ``` -------------------------------- ### Grid Example Styling Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/grid.html CSS for a grid example element, featuring a border, centered text, specific font size, background color, and text color. It also includes styling for a span element within the grid example to set line height. ```css .grid-example { border: 1px solid #888; text-align: center; font-size: 26px; background-color: lightcoral; color: white; } .grid-example span { line-height: 50px; } ``` -------------------------------- ### Materialize CSS Auto Initialization Source: https://github.com/materializecss/materialize-docs/blob/main/src/auto-init.html Demonstrates the basic usage of the M.AutoInit() function to initialize all Materialize components automatically. This function simplifies the setup process by detecting and initializing components across the DOM. ```javascript M.AutoInit(); ``` -------------------------------- ### Grid Example Styling Source: https://github.com/materializecss/materialize-docs/blob/main/docs/grid.html CSS for a grid example element, featuring a border, centered text, specific font size, background color, and text color. It also includes styling for a span element within the grid example to set line height. ```css .grid-example { border: 1px solid #888; text-align: center; font-size: 26px; background-color: lightcoral; color: white; } .grid-example span { line-height: 50px; } ``` -------------------------------- ### Fixed Width Tabs Example Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/tabs.html Example of fixed-width tabs in Materialize CSS, achieved by adding the '.tabs-fixed-width' class to the tabs container. ```html

Test 1

Test 2

Test 3

Test 4

Test 5

``` -------------------------------- ### Materialize CSS Introduction and Features Source: https://github.com/materializecss/materialize-docs/blob/main/src/index.html This snippet showcases the introductory content and key features of the Materialize CSS framework. It highlights the framework's design philosophy, performance, ease of use, and community aspects. ```html ![Materialize](images/materialize.svg) Materialize =========== Simple. Built on open source. The responsive front-end library based on Material Design from Google. [Get started](getting-started.html) [View on GitHub](https://github.com/materializecss/materialize) Latest Commit on Github: Ultra Fast ---------- Using VanillaJS and as less dependecies as possible to keep it fast and simple. We use TypeScript since it builds upon JavaScript and it enhances the type- and code safety. Quick integration ----------------- You dont have to learn or integrate any new or crappy stuff. Goal here is to stick to the roots. Just copy and paste from the documentation and you are good to go! Responsive and accessible ------------------------- Most of the Features which work event without JavaScript. Components should be useable by mobile devices and easily accessible by keyboard too. Try it out! Simple and clean Design ----------------------- User centric approach with established design principles mainly from [Googles Material guidelines](https://m3.material.io). Our Components should work on nearly every device with a monitor. Awesome Community ----------------- User centric approach with many members all around the world, which help bring Materialize forward and improve usability for everyone on the web. You can be a part too! Extensible ---------- Component cutsomization should be possible by yourself. To help growing this project, you can [join the community](https://github.com/materializecss/materialize) and ask for support or you can easily [create an issue](https://github.com/materializecss/materialize/issues) to move Materialize forward. ### Materialize is free and open-source. This is made possible by our awesome sponsors. [![Rumya Logo](https://www.rumya.ch/Mods/Website/Front/Ui/RumyaLogo.png)](https://www.rumya.ch) [![Wuda Software Logo](https://www.wuda.io/img/wuda-logo.png)](https://wuda.io) [Become a sponsor](https://opencollective.com/materialize) Materialize development is provided by an international team. Thanks for supporting us! ❤️ ``` -------------------------------- ### Fixed Width Tabs Example Source: https://github.com/materializecss/materialize-docs/blob/main/docs/tabs.html Example of fixed-width tabs in Materialize CSS, achieved by adding the '.tabs-fixed-width' class to the tabs container. ```html

Test 1

Test 2

Test 3

Test 4

Test 5

``` -------------------------------- ### Materialize CSS Setup and Theme Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/pushpin-demo.html This snippet demonstrates how to import Materialize CSS styles from Google Fonts and how to apply a theme based on local storage settings. ```html Materialize Example @import url("https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i"); ``` -------------------------------- ### Pushpin Options Source: https://github.com/materializecss/materialize-docs/blob/main/src/pushpin.html Details the available options for initializing the Pushpin plugin, including 'top', 'bottom', 'offset', and 'onPositionChange'. ```APIDOC Pushpin Options: - top (Number, Default: 0): The distance in pixels from the top of the page where the element becomes fixed. - bottom (Number, Default: Infinity): The distance in pixels from the top of the page where the elements stops being fixed. - offset (Number, Default: 0): The offset from the top the element will be fixed at. - onPositionChange (Function, Default: null): Callback function called when pushpin position changes. You are provided with a position string. ``` -------------------------------- ### Short Modal Example Source: https://github.com/materializecss/materialize-docs/blob/main/src/demo-page.html A basic example of a short modal in Materialize CSS. It includes a header, content, and action buttons for confirmation or cancellation. ```html ##### Short Modal Lorem ipsum dolor sit, amet consectetur adipisicing elit. Voluptatibus dolores sapiente, dolorum minus amet vel distinctio obcaecati, quod porro esse sit excepturi repellat odio exercitationem. Earum nihil eligendi facere voluptatibus. [Cancel](#!) [Confirm](#!) ``` -------------------------------- ### Chip HTML Initialization Source: https://github.com/materializecss/materialize-docs/blob/main/src/chips.html Provides examples of HTML structures for initializing chips, including default, with initial tags, placeholders, and autocomplete. ```html
``` -------------------------------- ### Bottom Sheet Modal Example Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/modals.html An example of how to implement and trigger a bottom sheet modal in Materialize CSS. It includes the HTML structure for the modal and a button to display it. ```html Show BottomSheet Modal ``` -------------------------------- ### Materialize CSS Auto Initialization with Options Source: https://github.com/materializecss/materialize-docs/blob/main/src/auto-init.html Shows how to use M.AutoInit() with custom options to configure specific Materialize components during initialization. This allows for fine-grained control over component behavior. ```javascript M.AutoInit(document.body, { Dropdown: { // pass options for Dropdown here }, FloatingActionButtonOptions: { // pass options for FloatingActionButtonOptions here } // Component: { ... } }); ``` -------------------------------- ### Bottom Sheet Modal Example Source: https://github.com/materializecss/materialize-docs/blob/main/docs/modals.html An example of how to implement and trigger a bottom sheet modal in Materialize CSS. It includes the HTML structure for the modal and a button to display it. ```html Show BottomSheet Modal ``` -------------------------------- ### Pushpin Demo Initialization Source: https://github.com/materializecss/materialize-docs/blob/main/docs/pushpin.html Initializes the Pushpin plugin for a demo scenario, calculating the top and bottom scroll offsets based on element positions. ```javascript const pushPinDemoNavElems = document.querySelectorAll('.pushpin-demo-nav'); pushPinDemoNavElems.forEach(navElem => { const navBox = navElem.getBoundingClientRect(); const contentElem = document.querySelector('#'+navElem.getAttribute('data-target')); const contentBox = contentElem.getBoundingClientRect(); const offsetTop = Math.floor(contentBox.top + window.scrollY - document.documentElement.clientTop); M.Pushpin.init(navElem, { top: offsetTop, bottom: offsetTop + contentBox.height - navBox.height }); }); ``` -------------------------------- ### Image Card Example Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/cards.html Illustrates how to create a Materialize CSS card that includes an image. This example shows how to place a title over the image and add content and action links below it. ```html
Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link
``` -------------------------------- ### Image Card Example Source: https://github.com/materializecss/materialize-docs/blob/main/docs/cards.html Illustrates how to create a Materialize CSS card that includes an image. This example shows how to place a title over the image and add content and action links below it. ```html
Card Title

I am a very simple card. I am good at containing small bits of information. I am convenient because I require little markup to use effectively.

This is a link
``` -------------------------------- ### Pushpin Demo Initialization Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/pushpin.html Initializes the Pushpin plugin for a demo scenario, calculating the top and bottom scroll offsets based on element positions. ```javascript const pushPinDemoNavElems = document.querySelectorAll('.pushpin-demo-nav'); pushPinDemoNavElems.forEach(navElem => { const navBox = navElem.getBoundingClientRect(); const contentElem = document.querySelector('#'+navElem.getAttribute('data-target')); const contentBox = contentElem.getBoundingClientRect(); const offsetTop = Math.floor(contentBox.top + window.scrollY - document.documentElement.clientTop); M.Pushpin.init(navElem, { top: offsetTop, bottom: offsetTop + contentBox.height - navBox.height }); }); ``` -------------------------------- ### Slider Methods: Pause, Start, Next, Previous Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/media.html Demonstrates how to use the methods available on a Materialize Slider instance to control its behavior, such as pausing, starting, and navigating between slides. ```javascript const instance = M.Slider.getInstance(elem); // Pause slider autoslide instance.pause(); // Start slider autoslide instance.start(); // Move to next slider instance.next(); // Move to prev slider instance.prev(); ``` -------------------------------- ### Autocomplete Instance Initialization and Methods Source: https://github.com/materializecss/materialize-docs/blob/main/docs/autocomplete.html Demonstrates how to get an instance of the Autocomplete plugin and use its core methods like open, close, selectOption, setMenuItems, and destroy. ```javascript const elem = document.getElementById('autocomplete-element'); const instance = M.Autocomplete.getInstance(elem); // Open the dropdown instance.open(); // Close the dropdown instance.close(); // Select an option by ID instance.selectOption(42); // Update menu items instance.setMenuItems([ {id: "Test"}, {id: 12, text: "Apple"}, {id: 13, text: "Microsoft"}, {id: 42, text: "Google", image: 'http://placehold.it/250x250'} ]); // Destroy the instance instance.destroy(); ``` -------------------------------- ### Autocomplete Instance Initialization and Methods Source: https://github.com/materializecss/materialize-docs/blob/main/docs/version/v2.2.2/autocomplete.html Demonstrates how to get an instance of the Autocomplete plugin and use its core methods like open, close, selectOption, setMenuItems, and destroy. ```javascript const elem = document.getElementById('autocomplete-element'); const instance = M.Autocomplete.getInstance(elem); // Open the dropdown instance.open(); // Close the dropdown instance.close(); // Select an option by ID instance.selectOption(42); // Update menu items instance.setMenuItems([ {id: "Test"}, {id: 12, text: "Apple"}, {id: 13, text: "Microsoft"}, {id: 42, text: "Google", image: 'http://placehold.it/250x250'} ]); // Destroy the instance instance.destroy(); ```