### Install Fluent Svelte Extra and Setup Theme Source: https://context7.com/openanime/fluent-svelte-extra/llms.txt Demonstrates the installation of the fluent-svelte-extra package using npm or yarn. It also shows how to set up the theme, including a basic toggle for light and dark modes in a Svelte layout file. ```bash # Install the package npm install fluent-svelte-extra # Or with yarn yarn add fluent-svelte-extra ``` ```svelte ``` ```html %sveltekit.head%
%sveltekit.body%
``` -------------------------------- ### Install fluent-svelte using npm, pnpm, or yarn Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/getting-started.md These commands install the fluent-svelte library and its dependencies as development dependencies for your project. Choose the command corresponding to your preferred package manager. ```bash npm i --save-dev fluent-svelte ``` ```bash pnpm i --save-dev fluent-svelte ``` ```bash yarn add --dev fluent-svelte ``` -------------------------------- ### Progress Indicators in Svelte Source: https://context7.com/openanime/fluent-svelte-extra/llms.txt This Svelte example utilizes the ProgressBar and ProgressRing components from fluent-svelte-extra to display loading and progress states. It includes examples of determinate and indeterminate progress bars, a function to simulate download progress, and several configurations of the ProgressRing component with different sizes and values. ```svelte
``` -------------------------------- ### InfoBar Examples with Different Severities Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/infobar.md Provides examples of the InfoBar component utilizing various 'severity' levels (information, attention, success, caution, critical) to visually distinguish message types. ```svelte ``` -------------------------------- ### NavigationView Component Example (Svelte) Source: https://context7.com/openanime/fluent-svelte-extra/llms.txt Demonstrates the NavigationView component for creating collapsible sidebar navigation in Svelte applications. It includes examples for header, items, footer slots, and handling navigation events. Dependencies include ListItem and Button from fluent-svelte-extra. ```svelte

App Title

 navigate('home')} > Home navigate('documents')} > Documents navigate('settings')} > Settings Profile

Welcome to {currentPage}

This is the main content area for the {currentPage} page.

 ``` -------------------------------- ### Fluent Svelte ToggleSwitch Component Examples Source: https://context7.com/openanime/fluent-svelte-extra/llms.txt Demonstrates the ToggleSwitch component from fluent-svelte-extra, showing its use for binary on/off states. Examples include binding to variables, handling change events, disabling the switch, and controlling its checked state. ```svelte console.log('Notifications changed:', e.target.checked)} > Enable Notifications console.log('Theme toggled')} > Dark Mode Auto-save documents Disabled (checked) ``` -------------------------------- ### ContentDialog Sizing Examples Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/contentdialog.md Illustrates the different size options ('min', 'standard', 'max') for the ContentDialog component. Each dialog is displayed with its respective title and size property. ```svelte
{#each ["min", "standard", "max"] as size} It has a width of {sizes[size]}px. {/each}
``` -------------------------------- ### Import and use fluent-svelte Button and Checkbox components Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/getting-started.md This Svelte component example shows how to import and use the `Button` and `Checkbox` components from the `fluent-svelte` library. Components are typically imported from the main index file. ```svelte Check me! ``` -------------------------------- ### Import fluent-svelte components using a namespace Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/getting-started.md This Svelte example demonstrates an alternative way to import fluent-svelte components by using a namespace (`Fluent`). This can help avoid naming conflicts if you have similarly named components from other libraries. ```svelte Click me! Check me! ``` -------------------------------- ### Basic ListItem Usage (Svelte) Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/listitem.md Shows a basic example of rendering a ListItem with text content in Svelte. This demonstrates the default appearance and behavior. ```svelte ListItem ``` -------------------------------- ### AutoSuggestBox Component Examples (Svelte) Source: https://context7.com/openanime/fluent-svelte-extra/llms.txt Showcases the AutoSuggestBox component for implementing search inputs with dynamic suggestions. It covers basic usage with filtering and custom item templates. Dependencies include AutoSuggestBox from fluent-svelte-extra. ```svelte console.log('User selected:', e.detail)} />
  • 🍎 {item}
    • {#if selectedItem}

    You selected: {selectedItem}

    {/if} ``` -------------------------------- ### Import ToggleSwitch Component Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/toggleswitch.md Demonstrates how to import the ToggleSwitch component from the 'fluent-svelte' library. This is a basic setup step for using the component in your Svelte application. ```typescript import { ToggleSwitch } from "fluent-svelte"; ``` -------------------------------- ### Basic ContentDialog Example with Controls Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/contentdialog.md Demonstrates a basic ContentDialog with controls for opening and closing. It utilizes Svelte's two-way binding for the 'open' property and includes a footer slot for action buttons. ```svelte Some text ``` -------------------------------- ### Fluent Svelte Button Component Examples Source: https://context7.com/openanime/fluent-svelte-extra/llms.txt Showcases the usage of the Button component from fluent-svelte-extra, demonstrating various variants like standard, accent, hyperlink, disabled, and custom-styled buttons. Includes event handling for clicks and mouse enter. ```svelte ``` -------------------------------- ### Opening ContentDialog by Default Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/contentdialog.md Shows how to render a ContentDialog directly in its open state by setting the 'open' property to true. This is useful for initial setup or pre-defined dialogs. ```svelte This dialog is open by default. ``` -------------------------------- ### Set CalendarView Week Start Day Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/calendarview.md Explains how to customize the starting day of the week displayed in the CalendarView using the 'weekStart' property. Accepts a number from 0 (Sunday) to 6 (Saturday). This example sets Monday as the start. ```svelte ``` -------------------------------- ### Showcase of RadioButton Components (Svelte) Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/radiobutton.md Presents a showcase of various RadioButton instances with different configurations, including value binding, disabled states, and default checked states. This example is part of the component's integration within a larger site structure. ```svelte Option 1 Option 2 Option 3 RadioButton RadioButton RadioButton ``` -------------------------------- ### Importing the Button Component in Svelte Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/button.md This code snippet demonstrates how to import the Button component from the 'fluent-svelte' library into a Svelte project. Ensure the 'fluent-svelte' package is installed as a dependency. ```typescript import { Button } from "fluent-svelte"; ``` -------------------------------- ### InfoBar Component Examples (Svelte) Source: https://context7.com/openanime/fluent-svelte-extra/llms.txt Demonstrates the InfoBar component for displaying various types of notifications and alerts within a Svelte application. Supports different severity levels, closable messages, and action buttons. Dependencies include InfoBar and Button from fluent-svelte-extra. ```svelte ``` -------------------------------- ### Create a Basic SplitButton with Flyout Menu in Svelte Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/splitbutton.md Illustrates the basic structure of a SplitButton in Svelte, including a primary button label and a flyout menu populated with MenuFlyoutItem components. This serves as a foundational example for implementing split buttons. ```svelte Button Item 1 Item 2 Item 3 ``` -------------------------------- ### Basic RadioButton Usage (Svelte) Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/radiobutton.md Shows a basic example of using the RadioButton component with different states like disabled and checked. It utilizes slot content for labels. ```svelte I have a label! ``` -------------------------------- ### Fluent Svelte TextBox Component Examples Source: https://context7.com/openanime/fluent-svelte-extra/llms.txt Illustrates the functionality of the TextBox component from fluent-svelte-extra, including different input types (text, password, search, email), placeholders, max length, and special buttons for reveal, search, and clear actions. Also shows custom slot usage for buttons. ```svelte console.log('Input:', e.target.value)} /> console.log('Password revealed')} />
    {#if value} ✓ {/if}
    ``` -------------------------------- ### Basic ToggleSwitch Usage Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/toggleswitch.md Shows the basic rendering of a ToggleSwitch component. This example displays a simple toggle switch without any specific states like checked or disabled. ```svelte ToggleSwitch ``` -------------------------------- ### ProgressRing with 50% Completion (Svelte) Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/progressring.md Illustrates how to set a specific completion percentage for the ProgressRing component by using the 'value' property. This example sets the value to 50, demonstrating a determinate state. It requires the 'fluent-svelte' library. ```svelte ``` -------------------------------- ### Programmatically Checked ToggleSwitch Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/toggleswitch.md Example of controlling the checked state of a ToggleSwitch programmatically using the `checked` property. This allows for dynamic updates to the switch's state. ```svelte ``` -------------------------------- ### InfoBadge Custom Content Examples Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/infobadge.md Shows how to use the InfoBadge component with custom content, such as numbers or text, overriding the default glyph. This is useful for displaying counts or specific alerts. ```svelte 99 bazinga ``` -------------------------------- ### Initialize CalendarView with a Specific Date Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/calendarview.md Demonstrates how to initialize the CalendarView with a pre-selected date. The 'value' property accepts a Date object, and this example sets it to March 3, 2020. ```svelte ``` -------------------------------- ### Controlling Slider Value with 'value' Property Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/slider.md Illustrates how to set an initial specific value for the Slider component using the 'value' property. This positions the slider thumb at the desired starting point. ```svelte ``` -------------------------------- ### ListItem with Icon (Svelte) Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/listitem.md Illustrates how to add an icon to a ListItem using the 'icon' slot. The example uses an SVG icon defined directly within the template. ```svelte Text ``` -------------------------------- ### ProgressRing with Custom Size (Svelte) Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/progressring.md Shows how to control the visual size of the ProgressRing component using the 'size' property. This example sets the diameter to 64 pixels. It requires the 'fluent-svelte' library. ```svelte ``` -------------------------------- ### Render Various TextBlock Variants in Svelte Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/textblock.md Illustrates how to render different variants of the TextBlock component to display text with distinct styles, such as captions, body text, subtitles, and titles. This example utilizes the Showcase component for displaying multiple TextBlock instances. ```svelte Caption Body Body Strong Body Large Subtitle Title Title Large Display ``` -------------------------------- ### Radio Group Binding Example (Svelte) Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/radiobutton.md Demonstrates how to group RadioButtons using a `bind:group` directive. This ensures only one radio button within the group can be selected at a time, and the bound variable reflects the `value` of the selected option. ```svelte Chocolate Vanilla Strawberry ``` -------------------------------- ### RadioButton Value Property Example (Svelte) Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/radiobutton.md Illustrates how to assign a `value` to a RadioButton, which is crucial for form submissions and group bindings. The `value` property determines the data associated with the selected radio. ```svelte Option 1 ``` -------------------------------- ### Import fluent-svelte theme CSS file Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/getting-started.md This Svelte script block imports the necessary CSS theme file for fluent-svelte components to render correctly. This should typically be placed in your main application file (e.g., `App.svelte` or `routes/__layout.svelte` in SvelteKit). ```svelte ``` -------------------------------- ### Svelte REPL: Import fluent-svelte with CDN theme Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/getting-started.md This Svelte code is specifically for use in the Svelte REPL. It imports fluent-svelte components and the theme CSS via a CDN, as direct CSS imports from `node_modules` are not supported in the REPL environment. Basic global styles are included for better presentation. ```svelte ``` -------------------------------- ### Import fluent-svelte theme from CDN Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/getting-started.md This code snippet demonstrates how to import the fluent-svelte theme CSS file using a CDN within a style block. This is an alternative to direct import, though generally not recommended for production environments. ```svelte ``` -------------------------------- ### Basic InfoBar Usage with Title and Message Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/infobar.md Shows the fundamental usage of the InfoBar component, including setting a title and a message. This is the most basic way to display information. ```svelte ``` -------------------------------- ### Importing and Using the Slider Component Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/slider.md Demonstrates the basic import statement required to use the Slider component from the fluent-svelte library. This is the foundational step for utilizing any of its features. ```typescript import { Slider } from "fluent-svelte"; ``` -------------------------------- ### Limit CalendarView Date Range Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/calendarview.md Shows how to restrict the selectable date range in CalendarView using the 'min' and 'max' properties, which accept Date objects. This example limits selections to the year 2020. ```svelte ``` -------------------------------- ### Import RadioButton Component (TypeScript) Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/radiobutton.md Demonstrates how to import the RadioButton component from the fluent-svelte library. This is a common first step when using the component. ```typescript import { RadioButton } from "fluent-svelte"; ``` -------------------------------- ### Import InfoBar Component Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/infobar.md Demonstrates how to import the InfoBar component from the fluent-svelte library for use in your Svelte application. ```typescript import { InfoBar } from "fluent-svelte"; ``` -------------------------------- ### Advanced Slider Configurations in Showcase Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/slider.md Presents a variety of Slider component configurations, including different values, step increments, tick placements, reverse orientation, and disabled states, showcasing the component's flexibility. ```html
    ``` -------------------------------- ### Import InfoBadge Component Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/infobadge.md Demonstrates how to import the InfoBadge component from the fluent-svelte library for use in your Svelte application. ```typescript import { InfoBadge } from "fluent-svelte"; ``` -------------------------------- ### Import InfoBar Component in Svelte Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/index.md This snippet demonstrates how to import and use the InfoBar component from the '$lib' directory in a Svelte component. It assumes the InfoBar component is correctly aliased and available. ```svelte ``` -------------------------------- ### TextBox with Placeholder Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/textbox.md Illustrates how to use the `placeholder` property to provide a hint to the user about the expected input. This improves usability by clarifying the TextBox's purpose. ```svelte ``` -------------------------------- ### Import Flyout Component Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/flyout.md Demonstrates how to import the Flyout component from the fluent-svelte library for use in your Svelte application. This is a foundational step for utilizing the component. ```typescript import { Flyout } from "fluent-svelte"; ``` -------------------------------- ### ListItem Component API Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/listitem.md API documentation for the ListItem component, including its properties and slots. ```APIDOC ## ListItem Component API ### Description The ListItem component is used to display data stacked vertically in a single column. It is suitable for items where text is the focal point and for collections meant to be read top to bottom. ### Component API #### Properties - **selected** (boolean) - Optional - Marks the item as selected. - **disabled** (boolean) - Optional - Disables the item, making it unclickable. - **href** (string) - Optional - If provided, the item will be rendered as an `` tag. - **role** (string) - Optional - Overrides the default ARIA role of `listitem`. #### Slots - **icon** - Used to prepend an icon to the list item. Accepts SVG elements with 16x16 dimensions. ### Usage Examples #### Basic Usage ```svelte ListItem ``` #### With Icon ```svelte {@html Circle} ListItem ``` #### Selected Item ```svelte ListItem ``` #### Disabled Item ```svelte ListItem ``` ### Events - **select**: Dispatched when the `selected` property is changed to a truthy value. ``` -------------------------------- ### Basic ProgressRing Usage in Svelte Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/progressring.md Demonstrates the basic implementation of the ProgressRing component in Svelte. It shows how to render an indeterminate ProgressRing and a determinate one bound to a reactive 'value' variable. This component requires the 'fluent-svelte' library. ```svelte
    e.stopPropagation()} class="example-ring-input" placeholder="%" clearButton={false} min={0} max={100} inline bind:value /> ``` -------------------------------- ### Importing TextBox Component Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/textbox.md Demonstrates how to import the TextBox component from the fluent-svelte library for use in your Svelte application. ```typescript import { TextBox } from "fluent-svelte"; ``` -------------------------------- ### Basic TextBox Usage Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/textbox.md Shows the basic rendering of a TextBox component with a placeholder. This is a fundamental way to include text input fields in your UI. ```svelte ``` -------------------------------- ### SplitButton Component API Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/splitbutton.md This section details the API for the SplitButton component, including available properties and their descriptions. ```APIDOC ## SplitButton Component API This documentation is generated from the Svelte component's metadata. ### Properties - **variant** (string) - Optional - The visual style of the split button. Options: 'standard', 'accent', 'hyperlink'. Defaults to 'standard'. - **direction** (string) - Optional - The direction of the flyout menu. Options: 'down', 'up'. Defaults to 'down'. - **alignment** (string) - Optional - The alignment of the flyout menu. Options: 'start', 'end'. Defaults to 'start'. - **disabled** (boolean) - Optional - Disables the main button. Defaults to false. - **menuDisabled** (boolean) - Optional - Disables the flyout menu. Defaults to false. - **hideChevron** (boolean) - Optional - Hides the chevron icon that triggers the flyout menu. Defaults to false. - **href** (string) - Optional - If provided, the main button will be rendered as an anchor (`    `) tag. - **class** (string) - Optional - Custom CSS class to apply to the component. - **style** (string) - Optional - Custom inline styles to apply to the component. ``` -------------------------------- ### Import ProgressRing Component Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/progressring.md This snippet shows how to import the ProgressRing component from the fluent-svelte library for use in your Svelte application. No specific inputs or outputs are detailed, but it's a prerequisite for using the component. ```typescript import { ProgressRing } from "fluent-svelte"; ``` -------------------------------- ### Import TextBlock Component in Svelte Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/textblock.md Demonstrates how to import the TextBlock component from the fluent-svelte library into a Svelte project. This is the initial step required to use the component in your application. ```svelte ``` -------------------------------- ### Basic Checkbox Usage in Svelte Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/checkbox.md Illustrates the basic rendering of Checkbox components in Svelte. It shows how to display default, checked, indeterminate, and disabled states. ```svelte Checkbox Checkbox Checkbox Checkbox Checkbox Checkbox ``` -------------------------------- ### Initialize CalendarView with Multiple Dates Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/calendarview.md Illustrates how to initialize the CalendarView to display multiple pre-selected dates by providing an array of Date objects to the 'value' property. ```svelte ``` -------------------------------- ### Basic Slider Initialization Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/slider.md Shows how to render a default Slider component. By default, sliders are created with a value of 0, representing 0% of the track. ```svelte ``` -------------------------------- ### Import ListItem Component (TypeScript) Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/listitem.md Demonstrates how to import the ListItem component from the fluent-svelte library in a TypeScript environment. ```typescript import { ListItem } from "fluent-svelte"; ``` -------------------------------- ### Import PersonPicture Component Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/personpicture.md Imports the PersonPicture component from the fluent-svelte library for use in your Svelte application. This is a common first step when using the component. ```typescript import { PersonPicture } from "fluent-svelte"; ``` -------------------------------- ### Import ContentDialog Component Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/contentdialog.md This snippet shows how to import the ContentDialog component from the fluent-svelte library. It's a prerequisite for using the component in your Svelte application. ```typescript import { ContentDialog } from "fluent-svelte"; ``` -------------------------------- ### Slider Component Usage in Svelte Source: https://context7.com/openanime/fluent-svelte-extra/llms.txt This Svelte code demonstrates various configurations of the Slider component from fluent-svelte-extra. It showcases binding values, setting min/max/step, adding prefixes/suffixes, and using features like ticks, tooltips, buffer values, and vertical orientation. The `$: console.log('Volume:', volume);` line shows a reactive declaration. ```svelte console.log('User updated:', e.detail)} on:userHoldStart={() => console.log('User started dragging')} on:userHoldEnd={() => console.log('User stopped dragging')} /> ``` -------------------------------- ### Import TextBlock from fluent-svelte Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/textblock.md Shows the basic import statement for the TextBlock component from the fluent-svelte package. This import is necessary to utilize the TextBlock's functionality within your Svelte components. ```typescript import { TextBlock } from "fluent-svelte"; ``` -------------------------------- ### Basic Flyout Usage Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/flyout.md Shows the fundamental usage of the Flyout component. It uses a Button in the default slot to trigger the flyout, which contains its content in the 'flyout' slot. The flyout is initially closed and opens on button click. ```svelte Flyout Contents ``` -------------------------------- ### Basic Expander Usage Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/expander.md Demonstrates the fundamental structure of an Expander component. It requires content for the header (default slot) and content for the collapsible area (content slot). ```svelte Header Content ``` -------------------------------- ### InfoBar with Action Button Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/infobar.md Demonstrates how to add an action button to the InfoBar component using the 'action' slot. It's recommended to use the Button component for this purpose. ```svelte ``` -------------------------------- ### Importing Fluent Svelte Checkbox Source: https://github.com/openanime/fluent-svelte-extra/blob/main/src/routes/docs/components/checkbox.md Demonstrates how to import the Checkbox component from the fluent-svelte library for use in Svelte applications. This is a foundational step for utilizing the component. ```typescript import { Checkbox } from "fluent-svelte"; ```