website·Indexed 30 days ago
https://material.pages.dev/A modern Material design framework featuring a comprehensive set of components including appbars, buttons, cards, dialogs, grids, and typography. The framework provides utilities for padding, margin, and elevation, as well as interactive elements like ripple effects, snackbars, and floating action buttons.
disabled HTML attribute and the disabled CSS class. This works across Normal, Outlined, and Text button styles.<button class="btn disabled" disabled>Disabled</button>
<button class="btn outlined disabled" disabled>Disabled</button>
<button class="btn text disabled" disabled>Disabled</button>ripple-e class. Note that elements with the .btn class already have this effect and do not require the additional class.<div class="ripple-e">Click Me</div>.drawer component inside a .dialog container. Control the visibility of the modal drawer using the Material.Dialog.open() and Material.Dialog.close() methods. The JavaScript API for this implementation is identical to the Dialog API.<button id="aaa" class="btn">Toggle</button>
<div class="dialog" id="a">
<div class="content p-0 drawer" style="height:max-content">
<div class="top ps-3">
<h2>Title</h2>
<p>Lorem ipsum dolor sit amet co.</p>
</div>
<div class="content">
<div class="list">
<a href="#!" class="item">Item 1</a>
<a href="#!" class="item active">Item 2</a>
<a href="#!" class="item">Item 3</a>
<a href="#!" class="item">Item 4</a>
<a href="#!" class="item">Item 5</a>
<a href="#!" class="item">Item 6</a>
<a href="#!" class="item" id="aa">Close</a>
</div>
</div>
</div>
</div>let a = document.querySelector("#a");
let aaa = document.querySelector("#aaa");
let aa = document.querySelector("#aa");
// Open the modal drawer
aaa.addEventListener("click", () => {
Material.Dialog.open(a);
});
// Close the modal drawer
aa.addEventListener("click", () => {
Material.Dialog.close(a);
});You can use a local copy of the framework by downloading the provided zip folder. The distribution contains a dist/ folder with compiled files and a src/ folder with source files.
Important: The Roboto font and Material Design Icons are not included in the zip and must be imported manually from Google Fonts and the Material Design Icons website.
left, middle, and right. Use these classes within the appbar container to distribute elements across the bar.<div class="appbar">
<div class="left">
<span class="title">Left</span>
</div>
<div class="middle">
<span class="title">Middle</span>
</div>
<div class="right">
<span class="title">Right</span>
</div>
</div><!-- Material Design Icons --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@6.5.95/css/materialdesignicons.min.css">
<!-- Material Framework CSS --> <link href="https://cdn.jsdelivr.net/gh/tronic247/material/dist/material.min.css" rel="stylesheet" />
<!-- Material Framework JS --> <script src="https://cdn.jsdelivr.net/gh/tronic247/material/dist/material.min.js"></script>
Material.Forms.initRangeSlider to initialize a range slider on a DOM element. The function accepts the target element and a configuration object defining the starting value and the range boundaries (min and max). The returned object provides access to the underlying noUiSlider instance, allowing you to retrieve the current value using the .get() method.<!-- HTML element for the slider -->
<input type="text" class="js-range-slider" name="my_range" value="" />// Initialize the range slider
let range = Material.Forms.initRangeSlider(document.querySelector(".js-range-slider"), {
start: 20,
range: {
min: 0,
max: 100,
},
});
// Retrieve the current value of the slider
alert(range.noUiSlider.get());color-primary-5 or color-secondary-2.<div class="ripple-e color-primary-5">Custom Color Ripple</div><div class="rounded">Standard rounded corners</div>
<div class="rounded-xl">Extra large rounded corners</div>
<div class="rounded-xll">Extra extra large rounded corners</div>.card container and implement a grid system using .row and .col classes. This layout is suitable for profile cards or list items where the image is smaller and positioned to the left of the content.<div class="card" style="width:300px;">
<div class="row">
<div class="col">
<img src="https://via.placeholder.com/140x155">
</div>
<div class="col pb-2">
<h3 class="display-h5">John Doe</h3>
<p>Is a man who is popular</p>
<button class="btn small unelevated">
Got it
</button>
</div>
</div>
</div>.left and .right divs of the .textbox container.<div class="textbox">
<div class="left">
<i class="mdi mdi-heart">
</div
<div class="middle">
<label for="a4" class="label">Label</label>
<input type="text" id="a4" class="input">
</div
<div class="right">
<i class="mdi mdi-heart">
</div
</div