### Filepond Basic Setup
Source: https://github.com/ahmedrageh/design_reference/blob/main/forms_upload.md
Initializes the Filepond library with its default styling. This setup is for a basic file upload interface where users can select multiple files.
```html
```
```javascript
const filepond1 = document.querySelector("#filepond1");
filepond1._filepond = FilePond.create(filepond1);
```
--------------------------------
### Basic Text Editor with Full Toolbar
Source: https://github.com/ahmedrageh/design_reference/blob/main/forms_text_editor.md
This snippet shows the fundamental setup for a Quill text editor, including a comprehensive toolbar with various formatting options. It requires the Quill library and a target HTML element.
```html
```
```javascript
const config1 = {
modules: {
toolbar: [
["bold", "italic", "underline", "strike"], // toggled buttons
["blockquote", "code-block"],
[{ header: 1 }, { header: 2 }], // custom button values
[{ list: "ordered" }, { list: "bullet" }],
[{ script: "sub" }, { script: "super" }], // superscript/subscript
[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
[{ direction: "rtl" }], // text direction
[{ size: ["small", false, "large", "huge"] }], // custom dropdown
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }, { background: [] }], // dropdown with defaults from theme
[{ font: [] }],
[{ align: [] }],
["clean"], // remove formatting button
],
},
placeholder: "Enter your content...",
theme: "snow",
};
const editor1 = document.querySelector("#editor1");
editor1._editor = new Quill(editor1, config1);
```
--------------------------------
### Rounded Menu List Example
Source: https://github.com/ahmedrageh/design_reference/blob/main/components_menu_list.md
Demonstrates a list of navigation links with a rounded appearance. Each link is styled for various states including hover and focus, with different styles for dark and light themes.
```html
```
--------------------------------
### Minimal Text Editor with Basic Toolbar
Source: https://github.com/ahmedrageh/design_reference/blob/main/forms_text_editor.md
This example demonstrates a simplified Quill text editor with a toolbar limited to essential formatting options like bold, italic, underline, ordered/bullet lists, header, and background color.
```html
```
```javascript
const config2 = {
modules: {
toolbar: [
["bold", "italic", "underline"],
[
{ list: "ordered" },
{ list: "bullet" },
{ header: 1 },
{ background: [] },
],
],
},
placeholder: "Enter your content...",
theme: "snow",
};
const editor2 = document.querySelector("#editor2");
editor2._editor = new Quill(editor2, config2);
```
--------------------------------
### Flatpickr Date Range Selection
Source: https://github.com/ahmedrageh/design_reference/blob/main/forms_datepicker.md
This example shows how to set up Flatpickr for selecting a range of dates. It includes the necessary HTML for the input field and the JavaScript to initialize Flatpickr in 'range' mode with a specified date format and default range.
```html
```
```javascript
const config5 = {
mode: "range",
dateFormat: "Y-m-d",
defaultDate: ["2016-10-10", "2016-10-20"],
};
const flatpickr5 = document.querySelector("#flatpickr5");
flatpickr5._datepicker = flatpickr(flatpickr5, config5);
```
--------------------------------
### Simple Grid.js Example with Predefined Data
Source: https://github.com/ahmedrageh/design_reference/blob/main/components_table_gridjs.md
This HTML snippet demonstrates a simple example of Grid.js integration, featuring a card layout with a title, a dropdown menu for actions, and a placeholder div for the grid table. It includes styling and SVG icons for the dropdown.
```html
```
--------------------------------
### HTML Tag Groups Example
Source: https://github.com/ahmedrageh/design_reference/blob/main/tags.md
Demonstrates various tag group implementations using HTML and Tailwind CSS classes. These examples showcase different styling for primary tags, informational tags, warning tags, success tags, and star ratings, including badges with icons and close buttons.
```HTML
```
--------------------------------
### Basic HTML Textarea
Source: https://github.com/ahmedrageh/design_reference/blob/main/forms_textarea.md
A standard HTML textarea element for multi-line text input. It includes a label and placeholder text.
```HTML
```
--------------------------------
### Menu List with Light Background
Source: https://github.com/ahmedrageh/design_reference/blob/main/components_menu_list.md
Demonstrates a list of menu items with a light background and hover effects. Each item is a link styled for a clean, modern menu. This is suitable for settings, account pages, or general navigation.
```html
```
--------------------------------
### Time Limiting with Flatpickr
Source: https://github.com/ahmedrageh/design_reference/blob/main/forms_timepicker.md
This example demonstrates how to limit the selectable time range in Flatpickr using `minTime` and `maxTime` options. Users can only select times between 15:00 and 22:30.
```html
```
```javascript
const config3 = {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
minTime: "15:00",
maxTime: "22:30",
};
const flatpickr3 = document.querySelector("#flatpickr3");
flatpickr3._timepicker = flatpickr(flatpickr3, config3);
```
--------------------------------
### Basic Collapse Component Example
Source: https://github.com/ahmedrageh/design_reference/blob/main/components_collapse.md
Demonstrates the fundamental implementation of a collapse component. It includes HTML structure for multiple collapsible items and JavaScript to initialize the Accordion functionality with specific configurations like allowing multiple open items.
```html
Collapse Item 1
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
Lorem ipsum dolor sit amet, consectetur adipisicing
elit. Commodi earum magni officiis possimus repellendus.
Accusantium adipisci aliquid praesentium quaerat
voluptate.
```
--------------------------------
### Basic Steps Component (HTML)
Source: https://github.com/ahmedrageh/design_reference/blob/main/components_steps.md
Demonstrates the fundamental usage of the Steps component, displaying a sequence of numbered steps. This component is built using HTML and relies on CSS classes for styling.
```html
1
Step 1
2
Step 2
3
Step 3
4
Step 4
```
--------------------------------
### Custom Date Format with Flatpickr
Source: https://github.com/ahmedrageh/design_reference/blob/main/forms_datepicker.md
This example shows how to customize the date format displayed in the datepicker. It uses the `altFormat` option for the user-friendly display and `dateFormat` for the internal value.
```html
```
```javascript
const config2 = {
altInput: true,
altFormat: "F j, Y",
dateFormat: "Y-m-d",
};
const flatpickr2 = document.querySelector("#flatpickr2");
flatpickr2._datepicker = flatpickr(flatpickr2, config2);
```
--------------------------------
### 24-Hour Format Timepicker with Flatpickr
Source: https://github.com/ahmedrageh/design_reference/blob/main/forms_timepicker.md
This example shows how to configure Flatpickr to display time in a 24-hour format. It uses the `time_24hr: true` option for this purpose, maintaining the 'H:i' date format.
```html
```
```javascript
const config2 = {
enableTime: true,
noCalendar: true,
dateFormat: "H:i",
time_24hr: true,
};
const flatpickr2 = document.querySelector("#flatpickr2");
flatpickr2._timepicker = flatpickr(flatpickr2, config2);
```