Pixelium Design

https://shika-works.github.io/pixelium-design/
Admin
Pixelium Design is a pixel-art UI component library with nostalgic aesthetics, tree-shakable...
Tokens:44,920
Snippets:181
Trust Score:8.3
Update:11 months ago
Show doc for...
Tokens:
Raw
### Installing Pixelium Design with Package Managers

Source: https://shika-works.github.io/pixelium-design/zh/guide/starting

Install the @pixelium/web-vue package using popular package managers. This adds the Vue component library to your project dependencies. No additional inputs required; outputs a successful installation for use in Vue apps. Ensure Node.js is installed; supports npm, yarn, and pnpm without limitations.

```shell
npm install @pixelium/web-vue
```

```shell
yarn @pixelium/web-vue
```

```shell
pnpm install @pixelium/web-vue
```

--------------------------------

### On-Demand Import of Pixelium Design Components

Source: https://shika-works.github.io/pixelium-design/zh/guide/starting

Import specific components from @pixelium/web-vue/es for tree-shaking optimization, reducing bundle size. Requires TypeScript 4.7+ and build tool support for CSS imports (e.g., Vite, Webpack). Font import at project entry; components like Button and Link used directly in code.

```typescript
// Import the font at the project entry
import '@pixelium/web-vue/dist/font.css'
```

```typescript
// Use components in the business code by on-demand import
import { Button, Link } from '@pixelium/web-vue/es'
```

--------------------------------

### Full Import of Pixelium Design in Vue App

Source: https://shika-works.github.io/pixelium-design/zh/guide/starting

Import the entire Pixelium Design library into a Vue application for access to all components. Requires Vue 3 and includes CSS and font imports. The createApp setup mounts the app to the DOM; ideal for projects using most components, but increases bundle size.

```typescript
import { createApp } from 'vue'
import App from './App.vue'
import Pixelium from '@pixelium/web-vue'
import '@pixelium/web-vue/dist/pixelium-vue.css'
// Import the font
import '@pixelium/web-vue/dist/font.css'

createApp(App)
  .use(Pixelium)
  .mount('#app')
```

--------------------------------

### Remote Loading for px-select in Vue

Source: https://shika-works.github.io/pixelium-design/zh/data-input/select

Shows implementing remote data loading in px-select with loading state and focus event handling. Uses Vue 3, TypeScript, and setTimeout for simulation; depends on px-select. Triggers loading on focus, populates options asynchronously. Limited to simulated delays; real implementations need API calls.

```Vue
<template>
	<px-select
		v-model="value"
		:options="options"
		placeholder="Please Select"
		@focus="focusHandler"
		:loading="loading"
	></px-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref(null)

const options = ref<string[]>([])
const loading = ref(false)

const list = ['Ready to work', 'Work, work', 'Work completed']

const focusHandler = () => {
	options.value = []
	loading.value = true
	setTimeout(() => {
		options.value = list
		loading.value = false
	}, 5000)
}
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>
```

--------------------------------

### Vue Input Component Sizing

Source: https://shika-works.github.io/pixelium-design/zh/data-input/input

Demonstrates how to control the size of the px-input component using the `size` prop. It shows examples for 'small', default, and 'large' sizes, allowing for visual consistency across the application.

```vue
<template>
	<px-space direction="vertical">
		<px-input placeholder="Please input" size="small"></px-input>
		<px-input placeholder="Please input"></px-input>
		<px-input placeholder="Please input" size="large"></px-input>
	</px-space>
</template>

<style lang="css" scoped>
.px-input {
	width: 320px;
}
</style>
```

--------------------------------

### Vue: Page Layout with Multiple Asides

Source: https://shika-works.github.io/pixelium-design/zh/layout/container

Shows a page layout with a header, footer, main content, and two aside components. This example demonstrates flexible arrangement of sidebars within the container.

```Vue
<template>
	<px-container>
		<px-header>Header</px-header>
		<px-container>
			<px-aside width="64px">Aside</px-aside>
			<px-aside width="128px">Aside</px-aside>
			<px-container>
				<px-main>Main</px-main>
				<px-footer>Footer</px-footer>
			</px-container>
		</px-container>
	</px-container>
</template>

<style lang="css" scoped>
.px-container:not(.px-container .px-container) {
	height: 350px;
}

.px-header,
.px-footer,
.px-aside,
.px-main {
	display: flex;
	align-items: center;
	justify-content: center;
}
.px-header,
.px-footer {
	background: rgba(79, 184, 164, 1);
}
.px-aside {
	background: rgba(0, 168, 145, 1);
}
</style>
```

--------------------------------

### Link Themes in Vue

Source: https://shika-works.github.io/pixelium-design/zh/common/link

Shows examples of different link themes including primary, success, warning, danger, info, and sakura. Themes change the visual appearance of the link.

```Vue
<template>
	<px-space>
		<px-link style="margin-right: 8px">Primary</px-link>
		<px-link theme="success">Success</px-link>
		<px-link theme="warning">Warning</px-link>
		<px-link theme="danger">Danger</px-link>
		<px-link theme="info">Info</px-link>
		<px-link theme="sakura">Sakura</px-link>
	</px-space>
</template>
```

--------------------------------

### Input Number Button Placement

Source: https://shika-works.github.io/pixelium-design/zh/data-input/input-number

Demonstrates different configurations for the placement of the increment and decrement buttons using the `buttonPlacement` attribute. Options include 'start', 'start-reverse', 'end-reverse', 'both', and 'both-reverse'.

```vue
<template>
	<px-space>
		<px-input-number
			placeholder="Please input number"
			button-placement="start"
		></px-input-number>
		<px-input-number
			placeholder="Please input number"
			button-placement="start-reverse"
		></px-input-number>
		<px-input-number placeholder="Please input number"></px-input-number>
		<px-input-number
			placeholder="Please input number"
			button-placement="end-reverse"
		></px-input-number>
		<px-input-number
			placeholder="Please input number"
			button-placement="both"
		></px-input-number>
		<px-input-number
			placeholder="Please input number"
			button-placement="both-reverse"
		></px-input-number>
	</px-space>
</template>

<style lang="css" scoped>
.px-input-number {
	width: 320px;
}
</style>
```

--------------------------------

### Basic Usage of px-select in Vue

Source: https://shika-works.github.io/pixelium-design/zh/data-input/select

This example shows how to use the px-select component in controlled and uncontrolled modes. It depends on Vue 3 with TypeScript and the px-space, px-select components. Inputs include modelValue for controlled mode or defaultValue for uncontrolled. Outputs are the selected values, with no significant limitations mentioned.

```Vue
<template>
	<px-space direction="vertical">
		<px-select v-model="value" :options="options" placeholder="Please Select"></px-select>
		<px-select :defaultValue="'vue'" :options="options" placeholder="Please Select"></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('vue')
const options = [
	{ label: 'Vue', value: 'vue' },
	{ label: 'React', value: 'react' },
	{ label: 'Angular', value: 'angular' }
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>
```

--------------------------------

### Input Number Custom Template

Source: https://shika-works.github.io/pixelium-design/zh/data-input/input-number

Shows how to customize the display and parsing of the Input Number using `format`, `allowInput`, and `parse` attributes. This example includes formatting with percentage and thousand separators.

```vue
<template>
	<px-space direction="vertical">
		<px-input-number
			direction="vertical"
			placeholder="Please input number"
			v-model="inputUnit"
			:precision="precision"
			:format="formatUnit"
			:allow-input="allowInputUnit"
			:parse="parseUnit"
		></px-input-number>
		<px-input-number
			placeholder="Please input number"
			v-model="inputSeparator"
			:format="formatSeparator"
			:allow-input="allowInputSeparator"
			:parse="parseSeparator"
		></px-input-number>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const inputUnit = ref(100)
const precision = ref(4)

const formatUnit = (value: number | null | undefined) => {
	if (value === undefined || value === null || isNaN(value)) {
		return ''
	}
	return value.toFixed(precision.value) + '%'
}
const reg4NumberUnit = /^[+-]?\d+(?:\.\d*)?(%)?$/
const allowInputUnit = (value: string) => {
	if (!value.length) {
		return true
	}
	return reg4NumberUnit.test(value)
}
const parseUnit = (value: string) => {
	if (!value.length) {
		return 0
	}
	return parseFloat(value)
}

function thousandSeparator(num: number): string {
	const numStr = Math.abs(num).toString()
	const [int, decimal] = numStr.split('.')

	const formattedInt = int.replace(/\B(?=(\d{3})+(?!\d))/g, ',')

	let result
	if (decimal) {
		const formattedDecimal = decimal.replace(/(\d{3})(?=\d)/g, '$1,')
		result = `${formattedInt}.${formattedDecimal}`
	} else {
		result = formattedInt
	}

	return num < 0 ? '-' + result : result
}
const inputSeparator = ref(12345.6789)

const formatSeparator = (value: number | null | undefined) => {
	if (value === undefined || value === null || isNaN(value)) {
		return ''
	}
	return thousandSeparator(value)
}
const reg4Number = /^[+-]?\d+(?:\.\d*)?$/
const allowInputSeparator = (value: string) => {
	if (!value.length) {
		return true
	}
	return reg4Number.test(value.split(',').join(''))
}
const parseSeparator = (value: string) => {
	if (!value.length) {
		return 0
	}
	return parseFloat(value.split(',').join(''))
}
</script>

<style lang="css" scoped>
.px-input-number {
	width: 320px;
}
</style>
```

--------------------------------

### Row Horizontal Justification Options (Vue)

Source: https://shika-works.github.io/pixelium-design/zh/layout/row

Illustrates the different horizontal alignment options for the px-row component using the 'justify' attribute. Options include start, end, center, space-between, space-around, and space-evenly.

```vue
<template>
	<h4>Flex Start</h4>
	<px-row justify="start">
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Flex End</h4>
	<px-row justify="end">
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Center</h4>
	<px-row justify="center">
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Space Between</h4>
	<px-row justify="space-between">
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Space Around</h4>
	<px-row justify="space-around">
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Space Evenly</h4>
	<px-row justify="space-evenly">
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
		<px-col :span="4"><div class="item">Content</div></px-col>
	</px-row>
</template>
<style lang="css" scoped>
.item {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.px-row {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
.px-row .px-col:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-row .px-col:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>
```

--------------------------------

### Grouped Options in px-select Vue

Source: https://shika-works.github.io/pixelium-design/zh/data-input/select

Demonstrates grouping options in px-select using a nested options structure with groups and children. Built with Vue 3 and TypeScript; relies on px-select and px-space components. Takes a grouped options array as input; outputs the selected group's child value. May require custom styling for optimal group display.

```Vue
<template>
	<px-space>
		<px-select v-model="value" :options="options" placeholder="Please Select"></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref('vue')
const options = [
	{
		label: 'JS Framework',
		key: 'JS Framework',
		type: 'group',
		children: [
			{ label: 'Vanilla', value: 'vanilla', disabled: true },
			{ label: 'Vue', value: 'vue' },
			{ label: 'React', value: 'react' },
			{ label: 'Angular', value: 'angular' }
		]
	},
	{
		label: 'CSS Preprocessor',
		key: 'CSS Preprocessor',
		type: 'group',
		children: [
			{ label: 'Less', value: 'less' },
			{ label: 'Sass', value: 'sass' }
		]
	}
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>
```

--------------------------------

### Basic Input Group Usage with Icons and File Extensions

Source: https://shika-works.github.io/pixelium-design/zh/data-input/input-group

Demonstrates the fundamental usage of the InputGroup component, combining various elements like search icons, input fields, buttons, and file extensions (.ini). It utilizes px-space for vertical layout and imports IconSearch from '@pixelium/web-vue/icon-hn/es'.

```Vue
<template>
	<px-space direction="vertical">
		<px-input-group>
			<px-input-group-label>
				<IconSearch></IconSearch>
			</px-input-group-label>
			<px-input placeholder="Please input"> </px-input>
			<px-button>Search</px-button>
		</px-input-group>
		<px-input-group>
			<px-input placeholder="Please input file name"> </px-input>
			<px-input-group-label> .ini </px-input-group-label>
		</px-input-group>
		<px-input-group>
			<px-input placeholder="Please input"> </px-input>
			<px-input-number placeholder="Please input" :default-value="0"> </px-input-number>
		</px-input-group>
	</px-space>
</template>
<script setup lang="ts">
import { IconSearch } from '@pixelium/web-vue/icon-hn/es'
</script>
<style lang="css" scoped>
.px-input,
.px-input-number {
	width: 320px;
}
</style>
```

--------------------------------

### Button Group Example in Vue

Source: https://shika-works.github.io/pixelium-design/zh/common/button

This example demonstrates how to use the ButtonGroup component in Vue.js. It showcases different shapes, sizes, themes, and loading states applied to individual buttons within the group. The component provides flexibility in customizing button appearance and behavior.

```vue
<template>
  <px-space direction="vertical">
    <px-button-group>
      <px-button>Primary</px-button>
      <px-button theme="sakura">Sakura</px-button>
      <px-button color="#E956AE" variant="plain">#E956AE</px-button>
      <px-button loading>Loading</px-button>
    </px-button-group>
    <px-button-group shape="round">
      <px-button>Primary</px-button>
      <px-button theme="sakura">Sakura</px-button>
      <px-button color="#E956AE" variant="plain">#E956AE</px-button>
      <px-button loading>Loading</px-button>
    </px-button-group>
    <px-button-group loading>
      <px-button>Primary</px-button>
      <px-button theme="sakura">Sakura</px-button>
      <px-button color="#E956AE" variant="plain">#E956AE</px-button>
      <px-button disabled>Loading</px-button>
    </px-button-group>
    <px-button-group variant="outline">
      <px-button>Primary</px-button>
      <px-button theme="sakura">Sakura</px-button>
      <px-button color="#E956AE" variant="plain">#E956AE</px-button>
      <px-button loading>Loading</px-button>
    </px-button-group>
    <px-button-group :border-radius="[20, 16, 20, 16]">
      <px-button>Primary</px-button>
      <px-button theme="sakura">Sakura</px-button>
      <px-button color="#E956AE" variant="plain">#E956AE</px-button>
      <px-button loading>Loading</px-button>
    </px-button-group>
  </px-space>
</template>
```

--------------------------------

### Creatable Select for Adding Options in Vue

Source: https://shika-works.github.io/pixelium-design/zh/data-input/select

This Vue component example shows the px-select with creatable and filterable props to allow users to add new string-based options. It depends on Vue 3 and the px-select component, utilizing TypeScript for refs and reactive data. Inputs are initial options array, with added options as strings; outputs are selected values including newly created ones; note that it requires filterable to be enabled and uses scoped CSS for width, but may have limitations in option type handling beyond strings.

```vue
<template>
	<px-space direction="vertical">
		<px-select
			placeholder="Please select"
			v-model="value"
			:options="options"
			filterable
			creatable
		></px-select>
		<px-select
			placeholder="Please select"
			v-model="multiValue"
			multiple
			:options="options"
			filterable
			creatable
		></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const multiValue = ref<string[]>([])
const value = ref<string | null>(null)
const options = [
	{ label: 'Morning Mood', value: 'music1' },
	{ label: 'The Death of Åse', value: 'music2' },
	{ label: "Anitra's Dance", value: 'music3' },
	{ label: 'In the Hall of the Mountain King', value: 'music4' }
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>
```

--------------------------------

### Vue: Basic Page Layout with Container

Source: https://shika-works.github.io/pixelium-design/zh/layout/container

Demonstrates a fundamental page layout using px-container, px-header, px-main, and px-footer. Styles are applied for basic visual appearance.

```Vue
<template>
	<px-container>
		<px-header>Header</px-header>
		<px-main>Main</px-main>
		<px-footer>Footer</px-footer>
	</px-container>
</template>

<style lang="css" scoped>
.px-container {
	height: 350px;
}

.px-header,
.px-footer,
.px-aside,
.px-main {
	display: flex;
	align-items: center;
	justify-content: center;
}
.px-header,
.px-footer {
	background: rgba(79, 184, 164, 1);
}
.px-aside {
	background: rgba(0, 168, 145, 1);
}
</style>
```

--------------------------------

### Responsive Row and Col Layouts with Gutters (Vue)

Source: https://shika-works.github.io/pixelium-design/zh/layout/row

Demonstrates how to use px-row and px-col components to create responsive layouts with configurable gutters. The gutter can be a fixed number or a responsive object with breakpoint-specific values.

```vue
<template>
	<h4>x: 4px, y: 4px</h4>
	<px-row :gutter="4">
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
	</px-row>
	<h4>x: 8px, y: 4px</h4>
	<px-row :gutter="{ x: 8, y: 4 }">
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
	</px-row>
	<h4>Responsive</h4>
	<px-row :gutter="gutter">
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
		<px-col :span="6"><div class="item">Content</div></px-col>
	</px-row>
</template>
<script setup lang="ts">
const gutter = {
	xxl: 24,
	xl: 16,
	lg: 12,
	md: 8,
	sm: 4,
		xs: 2
}
</script>
<style lang="css" scoped>
.item {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.px-row {
	margin-bottom: 16px;
	margin-top: 4px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
.px-row .px-col:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-row .px-col:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>
```

--------------------------------

### Basic Spin Usage with Content

Source: https://shika-works.github.io/pixelium-design/zh/feedback/spin

Demonstrates the fundamental use of the Spin component by wrapping content that should be displayed during a loading state. The 'loading' prop controls the visibility of the spinner. This is useful for indicating that data is being fetched or processed.

```vue
<template>
	<px-spin loading>
		Good programmers are always learning. They read books, attend conferences, and talk to
		others. They experiment with new languages and tools, constantly trying to write better
		code. Studying classic problems teaches how to break them down and balance trade-offs—time
		versus space, simplicity versus efficiency. Reading others' code reveals structure, naming,
		and commenting habits. Learning never stops; every line is a chance to improve.
	</px-spin>
</template>
```

--------------------------------

### Spin Component with Loading Description

Source: https://shika-works.github.io/pixelium-design/zh/feedback/spin

Explains how to add a descriptive text below the loading spinner using the 'description' slot. This is useful for providing context or additional information to the user while they wait. The 'loading' prop should be set to true for the description to be visible.

```vue
<template>
	<px-spin loading>
		The most important part of writing a program is not deciding what data structures to use or
		what algorithms to implement. It is understanding the problem. Once you really understand
		the problem, the right data structures and algorithms often become obvious. The hard part is
		getting to that point—seeing past the surface and figuring out what the program really needs
		to do.
		<template #description> Coming Soooooooooooon... </template>
	</px-spin>
</template>
```

--------------------------------

### Basic Icon Usage in Vue Template

Source: https://shika-works.github.io/pixelium-design/zh/common/icon

Illustrates the basic usage of the Icon component within a Vue template, demonstrating control over size and color using props and inline styles.

```html
<template>
  <px-space>
    <IconUser :size="40"></IconUser>
    <IconUser :size="32"></IconUser>
    <IconUser :size="24"></IconUser>
    <IconUser style="font-size: 24px"></IconUser>
    <IconUser style="font-size: 32px"></IconUser>
    <IconUser style="font-size: 40px"></IconUser>
  </px-space>
  <px-space style="margin-top: 8px">
    <IconMessage color="rgba(0, 168, 145, 1)"></IconMessage>
    <IconMessage color="rgba(0, 180, 42, 1)"></IconMessage>
    <IconMessage color="rgba(255, 125, 0, 1)"></IconMessage>
    <IconMessage style="color: rgba(255, 125, 0, 1)"></IconMessage>
    <IconMessage style="color: rgba(0, 180, 42, 1)"></IconMessage>
    <IconMessage style="color: rgba(0, 168, 145, 1)"></IconMessage>
  </px-space>
</template>
<script setup lang="ts">
import { IconUser, IconMessage } from '@pixelium/web-vue/icon-hn/es'
</script>
```

--------------------------------

### Vue Loading State for Input

Source: https://shika-works.github.io/pixelium-design/zh/data-input/input

Shows how to display a loading indicator within the px-input component by setting the `loading` prop to `true`. This provides visual feedback to the user during data fetching or processing.

```vue
<template>
	<px-input placeholder="Please input" v-model="input" loading></px-input>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const input = ref('You can enter text as usual')
</script>

<style lang="css" scoped>
.px-input {
	width: 320px;
}
</style>
```

--------------------------------

### Vue: Container with Dark Mode and Borders

Source: https://shika-works.github.io/pixelium-design/zh/layout/container

An example showcasing the use of the `dark` prop for dark mode and the `bordered` prop for borders on Header, Footer, and Aside components within a nested container structure.

```Vue
<template>
	<px-container>
		<px-header bordered dark>Header</px-header>
		<px-container>
			<px-aside bordered dark side="left" width="64px">Aside</px-aside>
			<px-aside bordered dark side="left" width="128px">Aside</px-aside>
			<px-container>
				<px-main>Main</px-main>
				<px-footer bordered dark>Footer</px-footer>
			</px-container>
		</px-container>
	</px-container>
</template>

<style lang="css" scoped>
.px-container:not(.px-container .px-container) {
	height: 350px;
}

.px-header,
.px-footer,
.px-aside,
.px-main {
	display: flex;
	align-items: center;
	justify-content: center;
}
</style>
```

--------------------------------

### Basic Flex Grid Row Usage (Vue)

Source: https://shika-works.github.io/pixelium-design/zh/layout/row

Demonstrates the basic usage of the PxRow and PxCol components to create a 24-column grid layout. Each PxCol's span attribute determines its width, allowing for flexible content distribution across different screen sizes. The provided CSS styles enhance visual representation.

```html
<template>
	<px-row>
		<px-col :span="24"><div class="item">Span 24 | Width 100%</div></px-col>
		<px-col :span="12"><div class="item">Span 12 | Width 50%</div></px-col>
		<px-col :span="12"><div class="item">Span 12 | Width 50%</div></px-col>
		<px-col :span="8"><div class="item">Span 8 | Width 33.3333%</div></px-col>
		<px-col :span="8"><div class="item">Span 8 | Width 33.3333%</div></px-col>
		<px-col :span="8"><div class="item">Span 8 | Width 33.3333%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="6"><div class="item">Span 6 | Width 25%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
		<px-col :span="4"><div class="item">Span 4 | Width 16.6667%</div></px-col>
	</px-row>
</template>
<style lang="css" scoped>
.item {
	min-height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
}
.px-row {
	margin-bottom: 16px;
}
.px-row:last-of-type {
	margin-bottom: 0px;
}
.px-row .px-col:nth-child(even) .item {
	background: rgba(0, 168, 145, 1);
}
.px-row .px-col:nth-child(odd) .item {
	background: rgba(79, 184, 164, 1);
}
</style>
```

--------------------------------

### Import and initialize useThemeMode hook with TypeScript

Source: https://shika-works.github.io/pixelium-design/zh/config/dark-mode

Shows how to import the useThemeMode hook from @pixelium/web-vue and initialize it to obtain mode, toggle, clear, and followMedia functions. This snippet is useful for setting up theme control in a TypeScript environment.

```typescript
import { useThemeMode } from '@pixelium/web-vue'\n\n// If on-demand import\n// import { useThemeMode } from '@pixelium/web-vue/es'\n\nconst [mode, toggle, clear, followMedia] = useThemeMode()
```

--------------------------------

### Input Group with Different Sizes

Source: https://shika-works.github.io/pixelium-design/zh/data-input/input-group

Illustrates how to control the size of the InputGroup component using the 'size' attribute, with options for 'small', 'medium' (default), and 'large'. This example uses IconBolt and input number fields.

```Vue
<template>
	<px-space direction="vertical">
		<px-input-group size="small">
			<px-input-group-label>
				<IconBolt></IconBolt>
			</px-input-group-label>
			<px-input-number placeholder="Please input number" :default-value="0"> </px-input-number>
			<px-button>Confirm</px-button>
		</px-input-group>
		<px-input-group>
			<px-input-group-label>
				<IconBolt></IconBolt>
			</px-input-group-label>
			<px-input-number placeholder="Please input number" :default-value="0"> </px-input-number>
			<px-button>Confirm</px-button>
		</px-input-group>
		<px-input-group size="large">
			<px-input-group-label>
				<IconBolt></IconBolt>
			</px-input-group-label>
			<px-input-number placeholder="Please input number" :default-value="0"> </px-input-number>
			<px-button>Confirm</px-button>
		</px-input-group>
	</px-space>
</template>

<script setup lang="ts">
import { IconBolt } from '@pixelium/web-vue/icon-hn/es'
</script>

<style lang="css" scoped>
.px-input-number {
	width: 320px;
}
</style>
```

--------------------------------

### Basic Tooltip Placement Positions (Vue Template, Script, CSS)

Source: https://shika-works.github.io/pixelium-design/zh/feedback/tooltip

Demonstrates all nine Tooltip placements using placement='top|bottom|left|right' plus -start and -end alignments. The script builds per-placement labels and content; the CSS lays out the three-column preview. Controls visibility via hover/click depending on trigger.

```vue
<template>
	<div class="box">
		<div class="left">
			<px-tooltip
				v-for="item in ['left-start', 'left', 'left-end']"
				:key="item"
				:placement="item"
				:content="getContent(item)"
			>
				<px-button>{{ getLabel(item) }}</px-button>
			</px-tooltip>
		</div>
		<div class="center">
			<div class="top">
				<px-tooltip
					v-for="item in ['top-start', 'top', 'top-end']"
					:key="item"
					:placement="item"
					:content="getContent(item)"
				>
					<px-button>{{ getLabel(item) }}</px-button>
				</px-tooltip>
			</div>
			<div class="bottom">
				<px-tooltip
					v-for="item in ['bottom-start', 'bottom', 'bottom-end']"
					:key="item"
					:placement="item"
					:content="getContent(item)"
				>
					<px-button>{{ getLabel(item) }}</px-button>
				</px-tooltip>
			</div>
		</div>
		<div class="right">
			<px-tooltip
				v-for="item in ['right-start', 'right', 'right-end']"
				:key="item"
				:placement="item"
				:content="getContent(item)"
			>
				<px-button>{{ getLabel(item) }}</px-button>
			</px-tooltip>
		</div>
	</div>
</template>

<script setup lang="ts">
const getLabel = (placement: string) => {
	return placement.replace(/-/g, ' ').replace(/\b\w/g, (l) => l.toUpperCase())
}

const getContent = (placement: string) => {
	let contentArr: string[] = []
	if (placement.includes('-')) {
		const [pos, sub] = placement.split('-')
		contentArr = [capitalize(pos), capitalize(sub), 'Popover']
	} else {
		contentArr = [capitalize(placement), 'Popover']
	}

	return placement.startsWith('top') || placement.startsWith('bottom')
		? contentArr.join(' ')
		: contentArr.join('\n')
}

const capitalize = (str: string) => str.charAt(0).toUpperCase() + str.slice(1)
</script>

<style lang="css" scoped>
.box {
	display: flex;
	width: 600px;
	height: 350px;
	margin-left: 100px;
	margin-top: 64px;
	margin-bottom: 64px;
}
.left,
.right {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
}
.left {
	align-items: flex-start;
}
.right {
	align-items: flex-end;
}
.center {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.top,
.bottom {
	display: flex;
	justify-content: space-around;
}
.top {
	flex: 1;
}
</style>
```

--------------------------------

### Input Group with Rounded Borders and Custom Radius

Source: https://shika-works.github.io/pixelium-design/zh/data-input/input-group

Showcases how to apply rounded borders to the InputGroup component using the 'shape' property set to 'round' or by providing custom 'borderRadius' values. This example also imports IconSearch.

```Vue
<template>
	<px-space direction="vertical">
		<px-input-group shape="round">
			<px-input-group-label>
				<IconSearch></IconSearch>
			</px-input-group-label>
			<px-input placeholder="Please input"> </px-input>
			<px-button>Search</px-button>
		</px-input-group>
		<px-input-group :border-radius="[20, 16, 20, 16]">
			<px-input-group-label>
				<IconSearch></IconSearch>
			</px-input-group-label>
			<px-input placeholder="Please input"> </px-input>
			<px-button>Search</px-button>
		</px-input-group>
	</px-space>
</template>

<script setup lang="ts">
import { IconSearch } from '@pixelium/web-vue/icon-hn/es'
</script>

<style lang="css" scoped>
.px-input {
	width: 320px;
}
</style>
```

--------------------------------

### Collapsed Tags in Multi-select px-select Vue

Source: https://shika-works.github.io/pixelium-design/zh/data-input/select

Adds tag collapsing in multi-select mode with maxDisplayTags and collapseTagsPopover options. Uses Vue 3, TypeScript, px-select, and px-space. Accepts multiple selections; displays tags with popover for overflow. Default behavior includes popover; can be disabled.

```Vue
<template>
	<px-space direction="vertical">
		<px-select
			placeholder="Please select"
			v-model="value"
			collapse-tags
			:max-display-tags="3"
			multiple
			:options="options"
		></px-select>
		<px-select
			placeholder="Please select"
			v-model="value"
			collapse-tags
			:max-display-tags="3"
			:collapse-tags-popover="false"
			multiple
			:options="options"
		></px-select>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<string[]>([])
const options = [
	{ label: 'Vue', value: 'vue' },
	{ label: 'React', value: 'react' },
	{ label: 'Angular', value: 'angular' },
	{ label: 'Svelte', value: 'svelte' },
	{ label: 'Preact', value: 'Preact' },
	{ label: 'Next', value: 'next' },
	{ label: 'Nuxt', value: 'nuxt' },
	{ label: 'Astro', value: 'astro' }
]
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>
```

--------------------------------

### Input: Manual Operations (Focus, Blur, Select, Clear)

Source: https://shika-works.github.io/pixelium-design/zh/data-input/input

Illustrates how to programmatically control the Input component using its exposed methods. This includes focusing the input, blurring it, selecting all text, and clearing the input's content via button clicks.

```html
<template>
	<px-space direction="vertical">
		<px-space>
			<px-button theme="info" @click="focusHandler">Focus</px-button>
			<px-button theme="info" @click="blurHandler">Blur</px-button>
			<px-button theme="info" @click="selectHandler">Select</px-button>
			<px-button theme="warning" @click="clearHandler">Clear</px-button>
		</px-space>
		<px-input placeholder="Please input" ref="inputRef"></px-input>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Input } from '@pixelium/web-vue'

// If on-demand import
// import { Input } from '@pixelium/web-vue/es'

const inputRef = ref<InstanceType<typeof Input>>(null)

const focusHandler = () => {
	inputRef.value?.focus()
}
const blurHandler = () => {
	inputRef.value?.blur()
}
const clearHandler = () => {
	inputRef.value?.clear()
}
const selectHandler = () => {
	inputRef.value?.select()
}
</script>

<style lang="css" scoped>
.px-input {
	width: 320px;
}
</style>
```

--------------------------------

### Offset Distance - Vue

Source: https://shika-works.github.io/pixelium-design/zh/feedback/tooltip

Configures the gap between the trigger element and the tooltip via the offset prop. Default spacing vs zero gap example. Input: offset number (pixels); Output: tooltip positions change relative to the trigger. Set to 0 for tight alignment.

```vue
<template>
	<px-space>
		<px-tooltip content="Offset Default">
			<px-button>Offset Default</px-button>
		</px-tooltip>
		<px-tooltip content="Offset 0px" :offset="0">
			<px-button>Offset 0px</px-button>
		</px-tooltip>
	</px-space>
</template>
```

--------------------------------

### Vue Basic Text Input Usage

Source: https://shika-works.github.io/pixelium-design/zh/data-input/input

Demonstrates the basic usage of the px-input component in Vue. It shows how to use `modelValue` for controlled mode and `defaultValue` for uncontrolled mode. It also illustrates the use of `px-space` for vertical layout.

```vue
<template>
	<px-space direction="vertical">
		<px-input placeholder="Please input" v-model="input"></px-input>
		<px-input placeholder="Please input D-mail"></px-input>
		<px-input placeholder="Please input" default-value="El Psy Kongroo"></px-input>
	</px-space>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const input = ref('Steins; Gate')
</script>

<style lang="css" scoped>
.px-input {
	width: 320px;
}
</style>
```

--------------------------------

### Mask Component with Background Color Customization

Source: https://shika-works.github.io/pixelium-design/zh/feedback/mask

Illustrates how to customize the background color of the px-mask component using the 'color' property. The provided example sets a semi-transparent gray color. This functionality is useful for visually indicating states or overlays within a Vue.js application.

```html
<template>
	<div style="position: relative">
		The programming project is a tar pit. No matter how carefully one plans, no matter how
		carefully one designs, no matter how carefully one codes, the project seems inevitably to
		slip. The schedule stretches, the budget expands, the team grows, and still the end recedes.
		The tar pit is not merely a matter of poor management or inadequate tools; it is inherent in
		the nature of software itself. Software is invisible, unvisualizable, and therefore
		unmanageable. It is complex, with innumerable states and paths, each a potential source of
		error. It is changeable, subject to whims of users and marketers. And it is unforgiving; a
		single misplaced comma can bring the whole system crashing down. Thus the programmer, like
		the prehistoric beast, struggles deeper into the tar with every movement.
		<px-mask color="#A4A4A47F"></px-mask>
	</div>
</template>
```

--------------------------------

### Multi-select Mode in px-select Vue

Source: https://shika-works.github.io/pixelium-design/zh/data-input/select

Enables multiple selection in px-select by setting the multiple prop. Requires Vue 3 and TypeScript; uses px-select component. Binds to an array value; outputs multiple selected values. Assumes options are strings; may need custom handling for complex objects.

```Vue
<template>
	<px-select
		v-model="value"
		:options="options"
		placeholder="Please Select"
		multiple
	></px-select>
</template>

<script setup lang="ts">
import { ref } from 'vue'

const value = ref<string[]>([])

const options = ref<string[]>(['Ready for action', 'Locked and loaded', 'I await your command'])
</script>

<style lang="css" scoped>
.px-select {
	width: 320px;
}
</style>
```
Tokens:
Raw