### Basic Button Setup with Vue
Source: https://github.com/balmjs/balm-ui/blob/main/examples/button/index.html
Demonstrates the basic setup for using BalmUI buttons in a Vue.js application. This example shows how to create a Vue app instance and register the UiButton component.
```javascript
const app = Vue.createApp({});
app.use(UiButton, { // raised: true });
app.mount('#app');
```
--------------------------------
### Install Project Dependencies
Source: https://github.com/balmjs/balm-ui/blob/main/test-vue/cli-ts/README.md
Installs all necessary dependencies for the project. Run this after cloning the repository or when updating dependencies.
```bash
yarn install
```
--------------------------------
### JavaScript Setup for Icon Buttons
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/snippets/icon-button/demo2.md
This JavaScript code provides the necessary data and configurations for the icon button examples, including icon mappings and initial values.
```javascript
const mdcIcon = {
on: 'favorite',
off: 'favorite_border'
};
const faIcon = {
on: 'fa fa-star',
off: 'fa fa-star-o'
};
export default {
data() {
return {
mdcIcon,
faIcon,
value1: false,
value2: true
};
}
};
```
--------------------------------
### Install Project Dependencies
Source: https://github.com/balmjs/balm-ui/blob/main/CONTRIBUTING.md
After cloning the repository, install the project's dependencies using npm or yarn.
```sh
npm install
# OR
yarn
```
--------------------------------
### Start Development Server
Source: https://github.com/balmjs/balm-ui/blob/main/CONTRIBUTING.md
Run the development server to start working on the project. This command typically watches for file changes and rebuilds as needed.
```sh
npm run dev
```
--------------------------------
### HTML Structure for Shape Example
Source: https://github.com/balmjs/balm-ui/blob/main/examples/shape/index.html
This HTML sets up the container and elements for the shape examples. It includes basic CSS for styling the shapes.
```html
.demo {
width: 128px;
height: 128px;
margin: 0 10px 10px 0;
background: #e5e5e5;
}
```
--------------------------------
### Basic Range Picker Setup
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/snippets/rangepicker/demo1.md
This snippet shows how to implement a basic range picker with initial date values and custom labels for the start and end dates. It also demonstrates how to set a custom separator between the date inputs.
```html
-
```
```javascript
export default {
data() {
return {
date: ['2020-02-12', '2020-03-24']
};
}
};
```
--------------------------------
### Tfoot fnName Methods Example
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/table/table.md
Provides an example of configuring the `tfoot` prop with `fnName` methods for statistical calculations on different table columns.
```javascript
[
{
field: 'id',
fnName: 'count'
},
null,
{
field: 'calories',
fnName: 'sum'
},
{
field: 'fat',
fnName: 'avg'
},
{
field: 'carbs',
fnName: 'max'
},
{
field: 'protein',
fnName: 'min'
}
]
```
--------------------------------
### Install Project Dependencies
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/guide/quick-start.md
Install the project's npm packages using either yarn or npm. This step can take some time.
```bash
yarn
# OR
npm install
```
--------------------------------
### Top App Bar Setup
Source: https://github.com/balmjs/balm-ui/blob/main/examples/top-app-bar/index.html
This snippet shows the necessary Vue.js setup and component registrations for using the UiTopAppBar and related components.
```html
BalmUI - top app bar example
Back
Content {{ i }}
Item 1Item 2
```
--------------------------------
### Install Balm Core and Balm CLI Globally
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/guide/quick-start.md
Install the necessary packages globally to use the Balm CLI. Supports both npm and yarn.
```bash
npm install -g balm-core balm-cli
# OR
yarn global add balm-core balm-cli
```
--------------------------------
### Run Development Server
Source: https://github.com/balmjs/balm-ui/blob/main/test-vue/cli-ts/README.md
Compiles the project and starts a hot-reloading development server. Ideal for active development and testing.
```bash
yarn serve
```
--------------------------------
### BalmUI CommonJS Setup with Vue.js
Source: https://github.com/balmjs/balm-ui/blob/main/examples/cjs.html
This snippet shows the basic setup for using BalmUI with Vue.js in a CommonJS project. It includes creating a Vue app, using BalmUI and BalmUIPlus, and mounting the app to the DOM.
```javascript
var message = 'Hello BalmUI';
const app = Vue.createApp({
setup() {
return { menu, message };
}
});
app.use(BalmUI);
app.use(BalmUIPlus);
app.mount('#app');
```
--------------------------------
### Install BalmUI
Source: https://github.com/balmjs/balm-ui/blob/main/README.md
Add the BalmUI package to your project using Yarn or npm.
```bash
yarn add balm-ui
# OR
npm install --save balm-ui
```
--------------------------------
### Install Switch Component Styles
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/usage/switch/individual.md
Import the necessary SCSS files for the Switch component's core and specific styles.
```scss
@use 'balm-ui/components/core';
@use 'balm-ui/components/switch/switch';
```
--------------------------------
### Vue.js Setup for BalmUI Drawer
Source: https://github.com/balmjs/balm-ui/blob/main/examples/drawer/modal-drawer.html
This snippet shows the basic Vue.js application setup required to use BalmUI components like the Drawer, TopAppBar, and List.
```javascript
const app = Vue.createApp({}); app.use(UiTopAppBar); app.use(UiDrawer); app.use(UiList); app.mount('#app');
```
--------------------------------
### Vue.js App Setup with UiGrid
Source: https://github.com/balmjs/balm-ui/blob/main/examples/grid/index.html
This snippet shows the necessary Vue.js application setup to enable the UiGrid component. Ensure UiGrid is imported and used with your Vue app instance.
```javascript
const app = Vue.createApp({}); app.use(UiGrid); app.mount('#app');
```
--------------------------------
### Vue App Setup for Card Components
Source: https://github.com/balmjs/balm-ui/blob/main/examples/card/index.html
This snippet shows the necessary Vue.js application setup to use BalmUI Card, Button, and IconButton components. Ensure these components are imported and mounted correctly.
```javascript
const app = Vue.createApp({}); app.use(UiCard); app.use(UiButton); app.use(UiIconButton); app.mount('#app');
```
--------------------------------
### Install BalmJS Core Globally
Source: https://github.com/balmjs/balm-ui/blob/main/CONTRIBUTING.md
Install the balm-core package globally using npm or yarn. This is a prerequisite for local development.
```sh
npm install -g balm-core
# OR
yarn global add balm-core
```
--------------------------------
### Global Install Snackbar
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/usage/snackbar/individual.md
Globally install the Snackbar component using `app.use()`. This allows you to overwrite default props for all Snackbar instances.
```javascript
import UiSnackbar from 'balm-ui/components/snackbar';
// `app`: Vue app
// Optional. Overwrite `` props with default value.
app.use(UiSnackbar, {
// some props
});
```
--------------------------------
### Install Alert Component
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/usage/alert/individual.md
Install the Alert component into your Vue application instance.
```javascript
import UiAlert from 'balm-ui/components/alert';
// `app`: Vue app
app.use(UiAlert);
```
--------------------------------
### Modal Drawer with v-model
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/drawer/drawer.md
This example demonstrates how to control a modal drawer's visibility using v-model for automatic state management.
```html
```
--------------------------------
### Vue Component Setup for UI Switches
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/snippets/switch/demo1.md
This JavaScript snippet provides the Vue component setup, including the use of `useEvent` for event handling and initial data for the toggle states and labels.
```javascript
export default {
setup() {
const balmUI = useEvent();
return {
balmUI
};
},
data() {
return {
toggle1: false,
toggle1Label: 0,
toggle2: true,
toggle2Label: 'on'
};
}
};
```
--------------------------------
### Autocomplete Usage Examples
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/autocomplete/autocomplete.md
Examples demonstrating how to use the Autocomplete component with `v-model` for automatic value binding and manually handling the `modelValue` and `@update:modelValue` events.
```APIDOC
## Autocomplete Usage Examples
- Automatic
```html
```
- Manual
```html
```
```
--------------------------------
### Vue.js Radio Component Setup
Source: https://github.com/balmjs/balm-ui/blob/main/examples/radio/index.html
This snippet shows the basic Vue.js application setup and registration of BalmUI form field and radio components. It initializes a Vue app and mounts it to a DOM element.
```html
BalmUI - radio example
MaleFemale
Gender: {{ gender }}
```
--------------------------------
### SCSS Setup for Side Sheet
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/usage/side-sheet/individual.md
Import the necessary SCSS components for core styles and the side sheet.
```scss
@use 'balm-ui/components/core';
@use 'balm-ui/components/side-sheet/side-sheet';
```
--------------------------------
### Vue.js Setup for Drawer and App Bar
Source: https://github.com/balmjs/balm-ui/blob/main/examples/drawer/dismissible-drawer-below-top-app-bar.html
This snippet shows the basic Vue.js application setup required to use BalmUI's top app bar and drawer components. Ensure UiTopAppBar, UiDrawer, and UiList are registered.
```javascript
const app = Vue.createApp({});
app.use(UiTopAppBar);
app.use(UiDrawer);
app.use(UiList);
app.mount('#app');
```
--------------------------------
### Plain Tooltip Example
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/tooltip/tooltip.md
Demonstrates the basic usage of a plain tooltip. The tooltip content is placed in the default slot.
```html
Text
Tips content
```
--------------------------------
### Vue.js App Setup with BalmUI Form Components
Source: https://github.com/balmjs/balm-ui/blob/main/examples/form/index.html
This snippet shows the necessary Vue.js application setup and BalmUI component registrations for using form elements like UiForm, UiFormField, UiTextfield, UiSelect, and UiButton.
```javascript
const app = Vue.createApp({}); app.use(UiForm); app.use(UiFormField); app.use(UiTextfield); app.use(UiSelect); app.use(UiButton); app.mount('#app');
```
--------------------------------
### Install Snackbar SCSS
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/usage/snackbar/individual.md
Import the necessary SCSS files for the Snackbar component. This is required for styling.
```scss
@use 'balm-ui/components/core';
@use 'balm-ui/components/snackbar/snackbar';
```
--------------------------------
### Basic FAB with Font Awesome Icons
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/snippets/fab/demo4.md
Examples of using the ui-fab component with different Font Awesome icons.
```html
```
--------------------------------
### Initialize FAB Component
Source: https://github.com/balmjs/balm-ui/blob/main/examples/fab/index.html
This snippet shows the necessary Vue.js setup to use the FAB and Icon components from Balm UI. Ensure these components are registered before mounting the application.
```javascript
const app = Vue.createApp({}); app.use(UiFab); app.use(UiIcon); app.mount('#app');
```
--------------------------------
### Basic Datepicker Usage
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/datepicker/datepicker.md
A basic example of using the `` component. This is the default mode.
```html
```
--------------------------------
### Basic Alert Usage
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/alert/alert.md
This is a basic example of how to use the alert component. The content within the alert can include HTML.
```html
```
--------------------------------
### Vue.js App Initialization with UiTabs
Source: https://github.com/balmjs/balm-ui/blob/main/examples/tabs/index.html
Initializes a Vue.js application and mounts the UiTabs component. Ensure UiTabs is properly installed and imported.
```javascript
const app = Vue.createApp({ data() { return { active: 0 }; } });
app.use(UiTabs);
app.mount('#app');
```
--------------------------------
### Chips Component Data Setup
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/snippets/chips/demo3.md
Provides the necessary data structure for the ui-chips component examples, including sample lists for predefined options and custom chip content.
```javascript
export default {
data() {
return {
selectedValue: ['a', 'b'],
filterList: [
{
label: 'Tops',
value: 'a'
},
{
label: 'Bottoms',
value: 'b'
},
{
label: 'Shoes',
value: 'c'
},
{
label: 'Accessories',
value: 'd'
}
],
selectedValue2: [0],
filterList2: ['Alice', 'Bob', 'Charlie', 'David']
};
}
};
```
--------------------------------
### JavaScript Setup for Tooltip Directive
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/usage/tooltip/individual.md
Import and register the tooltip directive. This is optional and used for applying tooltips via HTML attributes.
```javascript
import vTooltip from 'balm-ui/directives/tooltip'; // Optional
// `app`: Vue app
app.directive(vTooltip.name, vTooltip); // Optional
```
--------------------------------
### Modal Drawer with Manual Control
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/drawer/drawer.md
This example shows how to manually control a modal drawer's state using the model-value prop and the @nav event for updates.
```html
```
--------------------------------
### Create a Balm CLI Project
Source: https://github.com/balmjs/balm-ui/blob/main/README.md
Use the Balm CLI to initialize a new Vue project. Navigate into the project directory afterwards.
```bash
balm init vue my-project
cd my-project
```
--------------------------------
### Manual Snackbar Control
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/snackbar/snackbar.md
Example of manually controlling the Snackbar's visibility using `v-model` and an event listener for updates.
```html
```
--------------------------------
### Create a Vue CLI Project
Source: https://github.com/balmjs/balm-ui/blob/main/README.md
Initialize a new Vue project using Vue CLI. Navigate into the project directory afterwards.
```bash
vue create my-project
cd my-project
```
--------------------------------
### Tab Data Structure and Component Setup
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/snippets/tabs/demo1.md
This JavaScript code defines the data structure for tabs, including text and icons, and sets up the Vue.js component's data properties. This is required for both text and icon tab bar examples.
```javascript
const tabs = [
{
text: 'Favorites',
icon: 'favorite'
},
{
text: 'Recents',
icon: 'phone'
},
{
text: 'Nearby',
icon: 'near_me'
}
];
export default {
data() {
return {
tabs,
active: 0
};
}
};
```
--------------------------------
### Create a Vite Project
Source: https://github.com/balmjs/balm-ui/blob/main/README.md
Initialize a new Vue project using Vite. Navigate into the project directory afterwards.
```bash
# npm 6.x
npm init @vitejs/app my-project --template vue
# npm 7+, extra double-dash is needed:
npm init @vitejs/app my-project -- --template vue
# yarn
yarn create @vitejs/app my-project --template vue
cd my-project
```
--------------------------------
### Initialize Store Plugin
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/usage/store/individual.md
Demonstrates how to initialize the Store plugin with a Vue app. Ensure you import the plugin and your custom store configuration.
```javascript
import $store from 'balm-ui/plugins/store';
import myStore from './store';
// `app`: Vue app
app.use($store, myStore);
```
--------------------------------
### Basic ui-list and ui-nav Structure
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/list/list.md
Illustrates the basic structure for and components, with placeholders for their respective item components.
```html
```
--------------------------------
### Tab Bar Start Alignment
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/snippets/tabs/demo6.md
Use `align="start"` to align tabs to the beginning of the tab bar. This is the default behavior.
```html
{{ tab.text }}
```
--------------------------------
### Install Textfield Component in Vue App
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/usage/textfield/individual.md
Install the Textfield component into your Vue application using `app.use()`. You can optionally provide default props for the component.
```javascript
import UiTextfieldComponents from 'balm-ui/components/textfield';
// `app`: Vue app
app.use(UiTextfieldComponents, {
// Optional. Overwrite `` props with default value.
UiTextfield: {
// some props
}
});
```
--------------------------------
### Install Balm UI Plus Plugin
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/usage/anchor/default.md
Import and use the Balm UI Plus plugin in your Vue application. Ensure Balm UI is installed.
```javascript
import BalmUIPlus from 'balm-ui/dist/balm-ui-plus';
// `app`: Vue app
app.use(BalmUIPlus);
```
--------------------------------
### Configuring BalmUI $store with Vuex
Source: https://github.com/balmjs/balm-ui/blob/main/CHANGELOG.md
Demonstrates how to configure BalmUI's built-in $store to work with Vuex, including setting a custom store name.
```javascript
import useDemoStore from './modules/demo';
export default {
name: 'myStore', // Set new custom store name (all lowercase): `$mystore` (Defaults: `$store`)
...useDemoStore()
};
```
```javascript
import BalmUI from 'balm-ui';
import myStore from './store';
// `app`: Vue app
app.use(BalmUI, {
$store: myStore
});
```
--------------------------------
### Show Snackbar Example
Source: https://github.com/balmjs/balm-ui/blob/main/examples/snackbar/index.html
This snippet shows how to initialize and mount a Vue application with the UiSnackbar component. It includes basic data properties for message and action text, and a method to handle the action click.
```javascript
const app = Vue.createApp({ setup() { const balmUI = $event.useEvent(); return { balmUI }; }, data() { return { active: false, message: 'Hello Snackbar', actionText: 'Undo' }; }, methods: { actionHandler() { console.log('gg'); } } }); app.use(UiButton); app.use(UiSnackbar); app.mount('#app');
```
--------------------------------
### Checkbox Data Binding Example
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/snippets/checkbox/demo1.md
This JavaScript snippet defines the data for the checkbox example. It initializes a 'checked' property to false, which is then used by the ui-checkbox component for two-way data binding.
```javascript
export default {
data() {
return {
checked: false
};
}
};
```
--------------------------------
### Vue.js App Initialization with BalmUI Store
Source: https://github.com/balmjs/balm-ui/blob/main/examples/store/index.html
Initializes a Vue.js application, mounts it to the DOM, and configures it with BalmUI components, event bus, and store. This snippet is essential for setting up the application context where the store can be accessed.
```javascript
const app = Vue.createApp({ mounted() { this.$bus.on('custom-event', (msg) => { console.log(msg); }); } }); app.use(UiButton); app.use($event); app.use($store, myStore); app.mount('#app');
```
--------------------------------
### Basic ui-item Usage
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/list/list-item.md
Demonstrates the basic structure of a ui-item component.
```html
```
--------------------------------
### Build for Production
Source: https://github.com/balmjs/balm-ui/blob/main/test-vue/cli-ts/README.md
Compiles and minifies the project for production deployment. Generates optimized static assets.
```bash
yarn build
```
--------------------------------
### Basic ui-list Implementation
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/snippets/list/demo1.md
Demonstrates the basic structure of a ui-list with multiple ui-item elements. Each item contains text content.
```html
Line item
```
--------------------------------
### Install Balm UI Menu Component in Vue App
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/usage/menu/individual.md
Install the Balm UI Menu components into your Vue application using the `app.use()` method. You can optionally provide default props for the `ui-menu` component.
```javascript
import UiMenuComponents from 'balm-ui/components/menu';
// `app`: Vue app
app.use(UiMenuComponents, {
// Optional. Overwrite `` props with default value.
UiMenu: {
// some props
}
});
```
--------------------------------
### FAB Component Usage
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/fab/fab.md
Demonstrates basic usage of the `` component, including regular and extended types.
```APIDOC
## `` Component
### Description
The `` component is a floating action button used for primary actions in an application. It supports different types, including a regular FAB and an extended FAB with a text label.
### Props
- **`type`** (string | number) - Required - FAB types. `0` or `'regular'`, `1` or `'extended'`.
- **`extended`** (boolean) - Optional - Modifies the FAB to a wider size which includes a text label. Defaults to `false`.
- **`icon`** (string) - Optional - For the icon element. See [Material Icons](/icons) list.
- **`mini`** (boolean) - Optional - Modifies the FAB to a smaller size. Defaults to `false`.
- **`exited`** (boolean) - Optional - Animates the FAB out of view. When this class is removed, the FAB will return to view. Defaults to `false`.
### Slots
- **`default`** (`iconClass`) - The default slot holds the floating action button icon or text label.
- **`before`** (`iconClass`) - Custom leading icon for the extended FAB.
- **`after`** (`iconClass`) - Custom trailing icon for the extended FAB.
### Events
- **`click`** (`function(event: object)`) - Emits when the floating action button is clicked.
### Examples
#### Regular FAB with Icon
```html
ICON
```
#### Extended FAB with Text Label and Custom Icons
```html
ICON
Text label
```
```
--------------------------------
### Basic Toast Usage
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/toast/toast.md
Demonstrates how to import and use the `$toast` function to display a simple message. Ensure the toast plugin is correctly imported.
```javascript
import { useToast } from 'balm-ui';
// OR
// import { useToast } from 'balm-ui/plugins/toast';
const $toast = useToast();
$toast('Hello BalmUI');
```
--------------------------------
### Demo Store Module Implementation
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/store/store.md
Implements a reactive store module for demo data, including fetching menu items using a mock HTTP plugin. This file should be located at `/path/to/app/scripts/store/demo.js`.
```javascript
// `/path/to/app/scripts/store/demo.js`
import { reactive, toRefs } from 'vue';
import { useHttp } from '@/plugins/http'; // e.g. axios
const state = reactive({
demoMenu: []
});
async function getDemoMenu() {
const $http = useHttp();
state.demoMenu = await $http.get('/api/get-menu');
}
const useDemoStore = () => {
return {
...toRefs(state),
getDemoMenu
};
};
export default useDemoStore;
```
--------------------------------
### Basic ui-nav-item Usage
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/list/list-item.md
Demonstrates the basic structure of a ui-nav-item component.
```html
```
--------------------------------
### JavaScript Setup for Side Sheet
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/usage/side-sheet/individual.md
Import and register the Side Sheet component with Vue.
```javascript
import Vue from 'vue';
import UiSideSheet from 'balm-ui/components/side-sheet';
Vue.use(UiSideSheet);
```
--------------------------------
### Build for Production
Source: https://github.com/balmjs/balm-ui/blob/main/README.md
Generate a production-ready build of your Balm CLI project.
```bash
npm run prod
```
--------------------------------
### Automatic Snackbar Control
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/snackbar/snackbar.md
Example of controlling the Snackbar's visibility automatically using `v-model`.
```html
```
--------------------------------
### Install Anchor Directive
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/usage/anchor/individual.md
Register the Anchor directive with your Vue application. Ensure you import the directive before registering it.
```javascript
import vAnchor from 'balm-ui/directives/anchor';
// `app`: Vue app
app.directive(vAnchor.name, vAnchor);
```
--------------------------------
### Table Header Default Items
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/table/table.md
Example of a simple array of strings used for table header labels.
```javascript
[
'ID',
'Dessert (100g serving)',
'Calories',
'Fat (g)',
'Carbs (g)',
'Protein (g)'
];
```
--------------------------------
### Basic Collapse with Icons
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/snippets/collapse/demo3.md
Demonstrates a basic Collapse component with custom expand/collapse icons and a toggle slot.
```html
arrow_drop_downarrow_right
Heading {{ i }}
Content {{ i }}
```
--------------------------------
### Import BalmUI Styles (Standalone)
Source: https://github.com/balmjs/balm-ui/blob/main/README.md
Import individual BalmUI component styles for a more granular approach.
```scss
@use 'balm-ui/components/core';
@use 'balm-ui/components/button/button';
@use 'balm-ui/components/icon/icon';
@use 'balm-ui/components/dialog/dialog';
@use 'balm-ui/plugins/alert/alert';
```
--------------------------------
### Table Body Default Fields
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/table/table.md
Example of an array of strings representing the data fields for table body rows.
```javascript
['id', 'dessert', 'calories', 'fat', 'carbs', 'protein'];
```
--------------------------------
### Full Syntax Tabs Implementation
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/tabs/tabs.md
Demonstrates the full syntax for implementing tabs using ui-tab-bar and ui-tab components, allowing for dynamic rendering of tabs from an items array.
```html
{{ tabItem.text }}
```
--------------------------------
### Alert Dialog with Callback
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/alert-dialog/alert-dialog.md
Example of using the $alert function with an options object, including a message and a callback function.
```javascript
$alert({
message,
callback() {
// ...
}
});
```
--------------------------------
### Import Balm-UI
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/usage/autocomplete/default.md
Import the Balm-UI library to enable its components and features.
```javascript
import BalmUI from 'balm-ui';
```
--------------------------------
### Import BalmUI Styles (Default)
Source: https://github.com/balmjs/balm-ui/blob/main/README.md
Include BalmUI's global styles in your project's main SCSS file.
```scss
/* import BalmUI styles */
@use 'balm-ui/dist/balm-ui';
```
--------------------------------
### Import BalmUI in Browser via HTML
Source: https://github.com/balmjs/balm-ui/blob/main/docs/scripts/docs/en/guide/advanced.md
Include BalmUI components and plugins as JavaScript files in your HTML using `