ASAM UI

主题与四档尺寸交互示例 ​

先加载 Element Plus CSS，再加载 ASAM CSS。以下两种语言分别挂载完整 SFC，使用同一公开接口。

颜色、边框与文字 ​

TS ​

语义色、边框、圆角与阴影

primary
success
warning
danger
info
text-primary
text-regular
text-secondary
surface
surface-muted
border

1px solid：默认边框

2px dashed：显式边框形态

control
action
card
dialog
pill
card 阴影
dialog 阴影

文字约定

xs：ASAM 字号

sm：ASAM 字号

md：ASAM 字号

lg：ASAM 字号

xl：ASAM 字号

regular：ASAM 字重

medium：ASAM 字重

bold：ASAM 字重

none 行高
第二行用于观察间距

compact 行高
第二行用于观察间距

regular 行高
第二行用于观察间距

loose 行高
第二行用于观察间距

字体：思源黑体 / Microsoft YaHei / PingFang SC / sans-serif；包不附带字体文件。

vue
<template>
	<section class="theme-foundation">
		<h3>语义色、边框、圆角与阴影</h3>
		<div class="swatches">
			<div v-for="name in colors" :key="name" class="swatch">
				<span
					class="swatch-sample"
					:style="{ background: `var(--asam-color-${name})` }"
					aria-hidden="true"
				/>
				<span class="swatch-label">{{ name }}</span>
			</div>
		</div>
		<p class="solid example-paragraph">1px solid：默认边框</p>
		<p class="dashed example-paragraph">2px dashed：显式边框形态</p>
		<div class="cards">
			<div
				v-for="name in radii"
				:key="name"
				class="card"
				:style="{ borderRadius: `var(--asam-radius-${name})` }"
			>
				{{ name }}
			</div>
		</div>
		<div class="cards">
			<div
				v-for="name in shadows"
				:key="name"
				class="shadow-demo"
				:style="{ boxShadow: `var(--asam-shadow-${name})` }"
			>
				{{ name }} 阴影
			</div>
		</div>
		<h3>文字约定</h3>
		<p class="example-paragraph"
			v-for="name in fonts"
			:key="name"
			:style="{ fontSize: `var(--asam-typography-font-size-${name})` }"
		>
			{{ name }}：ASAM 字号
		</p>
		<p class="example-paragraph"
			v-for="name in weights"
			:key="name"
			:style="{ fontWeight: `var(--asam-typography-font-weight-${name})` }"
		>
			{{ name }}：ASAM 字重
		</p>
		<p class="example-paragraph"
			v-for="name in lines"
			:key="name"
			:style="{ lineHeight: `var(--asam-typography-line-height-${name})` }"
		>
			{{ name }} 行高<br />第二行用于观察间距
		</p>
		<p class="example-paragraph">字体：思源黑体 / Microsoft YaHei / PingFang SC / sans-serif；包不附带字体文件。</p>
		<AsamButton type="default">主题按钮</AsamButton>
	</section>
</template>

<script setup lang="ts">
import { AsamButton } from '@asam-ui/ui';

const colors = [
	'primary',
	'success',
	'warning',
	'danger',
	'info',
	'text-primary',
	'text-regular',
	'text-secondary',
	'surface',
	'surface-muted',
	'border'
];
const radii = ['control', 'action', 'card', 'dialog', 'pill'];
const fonts = ['xs', 'sm', 'md', 'lg', 'xl'];
const weights = ['regular', 'medium', 'bold'];
const shadows = ['card', 'dialog'];
const lines = ['none', 'compact', 'regular', 'loose'];
defineOptions({ name: 'ThemeFoundationDemo' });
</script>

<style scoped>
.theme-foundation {
	font-family: var(--asam-typography-font-family);
	color: var(--asam-color-text-primary);
}

.shadow-demo {
	padding: var(--asam-space-md);
	margin-top: var(--asam-space-md);
	background: var(--asam-color-surface);
}

.swatches,
.cards {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-sm);
}

.swatch {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--asam-color-border);
	min-width: 140px;
}

.swatch-sample {
	block-size: var(--asam-space-xl);
}

.swatch-label {
	padding: var(--asam-space-sm);
	color: var(--asam-color-text-primary);
	background: var(--asam-color-surface);
}

.solid {
	border-bottom: var(--asam-border-width) var(--asam-border-style) var(--asam-color-border);
}

.dashed {
	border-bottom: 2px dashed var(--asam-color-border);
}

.card {
	padding: var(--asam-space-md);
	border: 1px solid var(--asam-color-border);
	box-shadow: var(--asam-shadow-card);
	background: var(--asam-color-surface);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

JS ​

语义色、边框、圆角与阴影

primary
success
warning
danger
info
text-primary
text-regular
text-secondary
surface
surface-muted
border

1px solid：默认边框

2px dashed：显式边框形态

control
action
card
dialog
pill
card 阴影
dialog 阴影

文字约定

xs：ASAM 字号

sm：ASAM 字号

md：ASAM 字号

lg：ASAM 字号

xl：ASAM 字号

regular：ASAM 字重

medium：ASAM 字重

bold：ASAM 字重

none 行高
第二行用于观察间距

compact 行高
第二行用于观察间距

regular 行高
第二行用于观察间距

loose 行高
第二行用于观察间距

字体：思源黑体 / Microsoft YaHei / PingFang SC / sans-serif；包不附带字体文件。

vue
<template>
	<section class="theme-foundation">
		<h3>语义色、边框、圆角与阴影</h3>
		<div class="swatches">
			<div v-for="name in colors" :key="name" class="swatch">
				<span
					class="swatch-sample"
					:style="{ background: `var(--asam-color-${name})` }"
					aria-hidden="true"
				/>
				<span class="swatch-label">{{ name }}</span>
			</div>
		</div>
		<p class="solid example-paragraph">1px solid：默认边框</p>
		<p class="dashed example-paragraph">2px dashed：显式边框形态</p>
		<div class="cards">
			<div
				v-for="name in radii"
				:key="name"
				class="card"
				:style="{ borderRadius: `var(--asam-radius-${name})` }"
			>
				{{ name }}
			</div>
		</div>
		<div class="cards">
			<div
				v-for="name in shadows"
				:key="name"
				class="shadow-demo"
				:style="{ boxShadow: `var(--asam-shadow-${name})` }"
			>
				{{ name }} 阴影
			</div>
		</div>
		<h3>文字约定</h3>
		<p class="example-paragraph"
			v-for="name in fonts"
			:key="name"
			:style="{ fontSize: `var(--asam-typography-font-size-${name})` }"
		>
			{{ name }}：ASAM 字号
		</p>
		<p class="example-paragraph"
			v-for="name in weights"
			:key="name"
			:style="{ fontWeight: `var(--asam-typography-font-weight-${name})` }"
		>
			{{ name }}：ASAM 字重
		</p>
		<p class="example-paragraph"
			v-for="name in lines"
			:key="name"
			:style="{ lineHeight: `var(--asam-typography-line-height-${name})` }"
		>
			{{ name }} 行高<br />第二行用于观察间距
		</p>
		<p class="example-paragraph">字体：思源黑体 / Microsoft YaHei / PingFang SC / sans-serif；包不附带字体文件。</p>
		<AsamButton type="default">主题按钮</AsamButton>
	</section>
</template>

<script setup>
import { AsamButton } from '@asam-ui/ui';
const colors = [
	'primary',
	'success',
	'warning',
	'danger',
	'info',
	'text-primary',
	'text-regular',
	'text-secondary',
	'surface',
	'surface-muted',
	'border'
];
const radii = ['control', 'action', 'card', 'dialog', 'pill'];
const fonts = ['xs', 'sm', 'md', 'lg', 'xl'];
const weights = ['regular', 'medium', 'bold'];
const shadows = ['card', 'dialog'];
const lines = ['none', 'compact', 'regular', 'loose'];
defineOptions({ name: 'ThemeFoundationDemo' });
</script>

<style scoped>
.theme-foundation {
	font-family: var(--asam-typography-font-family);
	color: var(--asam-color-text-primary);
}

.shadow-demo {
	padding: var(--asam-space-md);
	margin-top: var(--asam-space-md);
	background: var(--asam-color-surface);
}

.swatches,
.cards {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-sm);
}

.swatch {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--asam-color-border);
	min-width: 140px;
}

.swatch-sample {
	block-size: var(--asam-space-xl);
}

.swatch-label {
	padding: var(--asam-space-sm);
	color: var(--asam-color-text-primary);
	background: var(--asam-color-surface);
}

.solid {
	border-bottom: var(--asam-border-width) var(--asam-border-style) var(--asam-color-border);
}

.dashed {
	border-bottom: 2px dashed var(--asam-color-border);
}

.card {
	padding: var(--asam-space-md);
	border: 1px solid var(--asam-color-border);
	box-shadow: var(--asam-shadow-card);
	background: var(--asam-color-surface);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

亮暗主题 ​

TS ​

原生 error 状态跟随当前 danger 语义色。

primary 原生 RGB success 原生 RGB warning 原生 RGB danger 原生 RGB error 原生 RGB info 原生 RGB

RGB tuple 保留 Element Plus 编译值，亮暗切换不会将它们改成当前语义色的 RGB。

按 Tab 检查焦点；主题作用于此容器。body 中的弹层使用全局主题。

vue
<template>
	<section ref="scope" class="appearance" :style="{ colorScheme: dark ? 'dark' : 'light' }">
		<AsamButton type="default" @click="dark = !dark">{{
			dark ? '切换亮色' : '切换暗色'
		}}</AsamButton>
		<AsamButton type="default">主要操作</AsamButton>
		<AsamButton type="default" disabled>禁用操作</AsamButton>
		<AsamInput v-model="value" aria-label="主题输入" />
		<p class="theme-error example-paragraph">原生 error 状态跟随当前 danger 语义色。</p>
		<div class="rgb-probes">
			<span
				v-for="type in nativeRgbTypes"
				:key="type"
				:style="{ backgroundColor: `rgba(var(--el-color-${type}-rgb), 0.16)` }"
			>
				{{ type }} 原生 RGB
			</span>
		</div>
		<p class="example-paragraph">RGB tuple 保留 Element Plus 编译值，亮暗切换不会将它们改成当前语义色的 RGB。</p>
		<p class="example-paragraph">按 Tab 检查焦点；主题作用于此容器。body 中的弹层使用全局主题。</p>
	</section>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import { AsamButton, AsamInput } from '@asam-ui/ui';
import { applyAsamTheme, createAsamTheme, defaultAsamTheme } from '@asam-ui/ui/tokens';

const scope = ref<HTMLElement>();
const dark = ref(false);
const value = ref('亮暗主题仍可输入');
const nativeRgbTypes = ['primary', 'success', 'warning', 'danger', 'error', 'info'];
const darkTheme = createAsamTheme({
	color: {
		primary: '#73b7ff',
		primaryHover: '#9acaff',
		primaryActive: '#3590ff',
		primaryGradientStart: '#263e59',
		success: '#68c98b',
		successStrong: '#68c98b',
		warning: '#f6b56b',
		info: '#66d3df',
		danger: '#ff8585',
		surface: '#171a21',
		surfacePage: '#101218',
		surfaceMuted: '#242a35',
		surfaceSoft: '#263e59',
		surfaceInfo: '#233d42',
		surfaceSuccess: '#233c2e',
		textPrimary: '#eef2f8',
		textRegular: '#d1d9e6',
		textSecondary: '#a7b4c8',
		border: '#46536a',
		divider: '#344156',
		shadow: '#080b12',
		dialogTitle: '#9acaff'
	}
});
watchEffect(() => {
	if (scope.value) applyAsamTheme(dark.value ? darkTheme : defaultAsamTheme, scope.value);
});
defineOptions({ name: 'ThemeAppearanceDemo' });
</script>

<style scoped>
.appearance {
	padding: var(--asam-space-md);
	background: var(--asam-color-surface);
	color: var(--asam-color-text-primary);
	border: 1px solid var(--asam-color-border);
	border-radius: var(--asam-radius-card);
}

.appearance > * {
	margin-bottom: var(--asam-space-sm);
}

.theme-error {
	color: var(--el-color-error);
}

.rgb-probes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-sm);
}

.rgb-probes span {
	padding: var(--asam-space-xs);
	border-radius: var(--asam-radius-control);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

JS ​

原生 error 状态跟随当前 danger 语义色。

primary 原生 RGB success 原生 RGB warning 原生 RGB danger 原生 RGB error 原生 RGB info 原生 RGB

RGB tuple 保留 Element Plus 编译值，亮暗切换不会将它们改成当前语义色的 RGB。

按 Tab 检查焦点；主题作用于此容器。body 中的弹层使用全局主题。

vue
<template>
	<section ref="scope" class="appearance" :style="{ colorScheme: dark ? 'dark' : 'light' }">
		<AsamButton type="default" @click="dark = !dark">{{
			dark ? '切换亮色' : '切换暗色'
		}}</AsamButton>
		<AsamButton type="default">主要操作</AsamButton>
		<AsamButton type="default" disabled>禁用操作</AsamButton>
		<AsamInput v-model="value" aria-label="主题输入" />
		<p class="theme-error example-paragraph">原生 error 状态跟随当前 danger 语义色。</p>
		<div class="rgb-probes">
			<span
				v-for="type in nativeRgbTypes"
				:key="type"
				:style="{ backgroundColor: `rgba(var(--el-color-${type}-rgb), 0.16)` }"
			>
				{{ type }} 原生 RGB
			</span>
		</div>
		<p class="example-paragraph">RGB tuple 保留 Element Plus 编译值，亮暗切换不会将它们改成当前语义色的 RGB。</p>
		<p class="example-paragraph">按 Tab 检查焦点；主题作用于此容器。body 中的弹层使用全局主题。</p>
	</section>
</template>

<script setup>
import { ref, watchEffect } from 'vue';
import { AsamButton, AsamInput } from '@asam-ui/ui';
import { applyAsamTheme, createAsamTheme, defaultAsamTheme } from '@asam-ui/ui/tokens';
const scope = ref();
const dark = ref(false);
const value = ref('亮暗主题仍可输入');
const nativeRgbTypes = ['primary', 'success', 'warning', 'danger', 'error', 'info'];
const darkTheme = createAsamTheme({
	color: {
		primary: '#73b7ff',
		primaryHover: '#9acaff',
		primaryActive: '#3590ff',
		primaryGradientStart: '#263e59',
		success: '#68c98b',
		successStrong: '#68c98b',
		warning: '#f6b56b',
		info: '#66d3df',
		danger: '#ff8585',
		surface: '#171a21',
		surfacePage: '#101218',
		surfaceMuted: '#242a35',
		surfaceSoft: '#263e59',
		surfaceInfo: '#233d42',
		surfaceSuccess: '#233c2e',
		textPrimary: '#eef2f8',
		textRegular: '#d1d9e6',
		textSecondary: '#a7b4c8',
		border: '#46536a',
		divider: '#344156',
		shadow: '#080b12',
		dialogTitle: '#9acaff'
	}
});
watchEffect(() => {
	if (scope.value) applyAsamTheme(dark.value ? darkTheme : defaultAsamTheme, scope.value);
});
defineOptions({ name: 'ThemeAppearanceDemo' });
</script>

<style scoped>
.appearance {
	padding: var(--asam-space-md);
	background: var(--asam-color-surface);
	color: var(--asam-color-text-primary);
	border: 1px solid var(--asam-color-border);
	border-radius: var(--asam-radius-card);
}

.appearance > * {
	margin-bottom: var(--asam-space-sm);
}

.theme-error {
	color: var(--el-color-error);
}

.rgb-probes {
	display: flex;
	flex-wrap: wrap;
	gap: var(--asam-space-sm);
}

.rgb-probes span {
	padding: var(--asam-space-xs);
	border-radius: var(--asam-radius-control);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

四档控件与字段间距 ​

TS ​

large
下一字段
big
下一字段
default
下一字段
small
下一字段
vue
<template>
	<section ref="scope">
		<label>
			<span>big 的 FormItem 间距</span>
			<AsamInputNumber v-model.number="gap" :min="0" />
		</label>
		<label>
			<AsamCheckboxItem v-model="legacy" />
			<span>旧完整主题：省略新增间距字段，使用 fieldGap</span>
		</label>
		<div v-for="size in sizes" :key="size" class="density-row">
			<AsamConfigProvider :size="size">
				<AsamButton type="default">{{ size }}</AsamButton>
				<AsamInput v-model="value" :aria-label="`${size} 输入`" />
				<AsamBaseForm>
					<AsamFormItem :label="size"><AsamInput v-model="value" /></AsamFormItem>
					<AsamFormItem label="下一字段"><AsamInput v-model="value" /></AsamFormItem>
				</AsamBaseForm>
			</AsamConfigProvider>
		</div>
	</section>
</template>

<script setup lang="ts">
import { ref, watchEffect } from 'vue';
import {
	AsamInputNumber,
	AsamCheckboxItem,
	AsamBaseForm,
	AsamButton,
	AsamConfigProvider,
	AsamFormItem,
	AsamInput,
	asamControlSizes
} from '@asam-ui/ui';
import { applyAsamTheme, createAsamTheme } from '@asam-ui/ui/tokens';

const sizes = asamControlSizes;
const scope = ref<HTMLElement>();
const gap = ref(20);
const legacy = ref(false);
const value = ref('四档控件');
watchEffect(() => {
	const theme = createAsamTheme({ density: { big: { formItemMarginBottom: `${gap.value}px` } } });
	if (legacy.value) {
		delete theme.border;
		delete theme.typography.lineHeight;
		for (const density of Object.values(theme.density ?? {}))
			delete density.formItemMarginBottom;
		theme.layout.fieldGap = `${gap.value}px`;
	}
	if (scope.value) applyAsamTheme(theme, scope.value);
});
defineOptions({ name: 'ThemeDensityDemo' });
</script>

<style scoped>
.density-row {
	margin-top: var(--asam-space-md);
}
</style>

JS ​

large
下一字段
big
下一字段
default
下一字段
small
下一字段
vue
<template>
	<section ref="scope">
		<label>
			<span>big 的 FormItem 间距</span>
			<AsamInputNumber v-model.number="gap" :min="0" />
		</label>
		<label>
			<AsamCheckboxItem v-model="legacy" />
			<span>旧完整主题：省略新增间距字段，使用 fieldGap</span>
		</label>
		<div v-for="size in sizes" :key="size" class="density-row">
			<AsamConfigProvider :size="size">
				<AsamButton type="default">{{ size }}</AsamButton>
				<AsamInput v-model="value" :aria-label="`${size} 输入`" />
				<AsamBaseForm>
					<AsamFormItem :label="size"><AsamInput v-model="value" /></AsamFormItem>
					<AsamFormItem label="下一字段"><AsamInput v-model="value" /></AsamFormItem>
				</AsamBaseForm>
			</AsamConfigProvider>
		</div>
	</section>
</template>

<script setup>
import { ref, watchEffect } from 'vue';
import {
	AsamInputNumber,
	AsamCheckboxItem,
	AsamBaseForm,
	AsamButton,
	AsamConfigProvider,
	AsamFormItem,
	AsamInput,
	asamControlSizes
} from '@asam-ui/ui';
import { applyAsamTheme, createAsamTheme } from '@asam-ui/ui/tokens';
const sizes = asamControlSizes;
const scope = ref();
const gap = ref(20);
const legacy = ref(false);
const value = ref('四档控件');
watchEffect(() => {
	const theme = createAsamTheme({ density: { big: { formItemMarginBottom: `${gap.value}px` } } });
	if (legacy.value) {
		delete theme.border;
		delete theme.typography.lineHeight;
		for (const density of Object.values(theme.density ?? {}))
			delete density.formItemMarginBottom;
		theme.layout.fieldGap = `${gap.value}px`;
	}
	if (scope.value) applyAsamTheme(theme, scope.value);
});
defineOptions({ name: 'ThemeDensityDemo' });
</script>

<style scoped>
.density-row {
	margin-top: var(--asam-space-md);
}
</style>

尺寸继承 ​

TS ​

配置提供器：large

表单继承
vue
<template>
	<section>
		<AsamButton type="default" @click="provider = provider === 'large' ? 'small' : 'large'">
			切换 provider
		</AsamButton>
		<AsamConfigProvider :size="provider">
			<p class="example-paragraph">配置提供器：{{ provider }}</p>
			<AsamButton type="default">继承 Provider</AsamButton>
			<AsamBaseForm size="big">
				<AsamButton type="default">较大表单密度</AsamButton>
				<AsamButtonGroup size="small">
					<AsamButton type="default">较小组密度</AsamButton>
					<AsamButton type="default" size="large">显式 large</AsamButton>
				</AsamButtonGroup>
				<AsamFormItem label="表单继承"><AsamInput v-model="text" /></AsamFormItem>
			</AsamBaseForm>
			<AsamButtonGroup
				><AsamButton type="default">省略 Group size</AsamButton></AsamButtonGroup
			>
		</AsamConfigProvider>
		<AsamButton type="default">无上下文 default</AsamButton>
	</section>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
	AsamBaseForm,
	AsamButton,
	AsamButtonGroup,
	AsamConfigProvider,
	AsamFormItem,
	AsamInput
} from '@asam-ui/ui';
import type { AsamControlSize } from '@asam-ui/ui';

/** @type {import('vue').Ref<import('@asam-ui/ui').AsamControlSize>} */
const provider = ref<AsamControlSize>('large');
const text = ref('big 高度 36px');
defineOptions({ name: 'ThemeInheritanceDemo' });
</script>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

JS ​

配置提供器：large

表单继承
vue
<template>
	<section>
		<AsamButton type="default" @click="provider = provider === 'large' ? 'small' : 'large'">
			切换 provider
		</AsamButton>
		<AsamConfigProvider :size="provider">
			<p class="example-paragraph">配置提供器：{{ provider }}</p>
			<AsamButton type="default">继承 Provider</AsamButton>
			<AsamBaseForm size="big">
				<AsamButton type="default">较大表单密度</AsamButton>
				<AsamButtonGroup size="small">
					<AsamButton type="default">较小组密度</AsamButton>
					<AsamButton type="default" size="large">显式 large</AsamButton>
				</AsamButtonGroup>
				<AsamFormItem label="表单继承"><AsamInput v-model="text" /></AsamFormItem>
			</AsamBaseForm>
			<AsamButtonGroup
				><AsamButton type="default">省略 Group size</AsamButton></AsamButtonGroup
			>
		</AsamConfigProvider>
		<AsamButton type="default">无上下文 default</AsamButton>
	</section>
</template>

<script setup>
import { ref } from 'vue';
import {
	AsamBaseForm,
	AsamButton,
	AsamButtonGroup,
	AsamConfigProvider,
	AsamFormItem,
	AsamInput
} from '@asam-ui/ui';
/** @type {import('vue').Ref<import('@asam-ui/ui').AsamControlSize>} */
const provider = ref('large');
const text = ref('big 高度 36px');
defineOptions({ name: 'ThemeInheritanceDemo' });
</script>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

独立尺寸语义 ​

TS ​

A
★
  • large 节点是图形尺寸
    10:00
密度 small 只控制字体和内边距
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 10
vue
<template>
	<AsamConfigProvider size="small">
		<AsamSpace :size="24">
			<AsamAvatar :size="64">A</AsamAvatar>
			<AsamIcon :size="32"><span aria-label="星号">★</span></AsamIcon>
			<AsamButton type="default" @click="open = true">打开 400px Drawer</AsamButton>
		</AsamSpace>
		<AsamTimeline>
			<AsamTimelineItem size="large" timestamp="10:00">large 节点是图形尺寸</AsamTimelineItem>
		</AsamTimeline>
		<AsamDescriptions :column="1">
			<AsamDescriptionsItem label="密度"> small 只控制字体和内边距 </AsamDescriptionsItem>
		</AsamDescriptions>
		<AsamPagination :total="100" />
		<AsamDrawer v-model="open" size="400px" title="独立面板尺寸">
			Drawer size 不是控件密度。
		</AsamDrawer>
	</AsamConfigProvider>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
	AsamAvatar,
	AsamButton,
	AsamConfigProvider,
	AsamDescriptions,
	AsamDescriptionsItem,
	AsamDrawer,
	AsamIcon,
	AsamPagination,
	AsamSpace,
	AsamTimeline,
	AsamTimelineItem
} from '@asam-ui/ui';

const open = ref(false);
defineOptions({ name: 'ThemeSemanticsDemo' });
</script>

JS ​

A
★
  • large 节点是图形尺寸
    10:00
密度 small 只控制字体和内边距
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 10
vue
<template>
	<AsamConfigProvider size="small">
		<AsamSpace :size="24">
			<AsamAvatar :size="64">A</AsamAvatar>
			<AsamIcon :size="32"><span aria-label="星号">★</span></AsamIcon>
			<AsamButton type="default" @click="open = true">打开 400px Drawer</AsamButton>
		</AsamSpace>
		<AsamTimeline>
			<AsamTimelineItem size="large" timestamp="10:00">large 节点是图形尺寸</AsamTimelineItem>
		</AsamTimeline>
		<AsamDescriptions :column="1">
			<AsamDescriptionsItem label="密度"> small 只控制字体和内边距 </AsamDescriptionsItem>
		</AsamDescriptions>
		<AsamPagination :total="100" />
		<AsamDrawer v-model="open" size="400px" title="独立面板尺寸">
			Drawer size 不是控件密度。
		</AsamDrawer>
	</AsamConfigProvider>
</template>

<script setup>
import { ref } from 'vue';
import {
	AsamAvatar,
	AsamButton,
	AsamConfigProvider,
	AsamDescriptions,
	AsamDescriptionsItem,
	AsamDrawer,
	AsamIcon,
	AsamPagination,
	AsamSpace,
	AsamTimeline,
	AsamTimelineItem
} from '@asam-ui/ui';
const open = ref(false);
defineOptions({ name: 'ThemeSemanticsDemo' });
</script>

响应式布局与隐藏工具类 ​

TS ​

响应式列 1

响应式列 2

仅 xs 隐藏

hidden-xs-only 由单独加载的 Element Plus display.css 提供；ASAM 主样式不隐式加载它。

vue
<template>
	<section>
		<AsamRow :gutter="16">
			<AsamCol :xs="24" :sm="12" :md="8"><p class="cell example-paragraph">响应式列 1</p></AsamCol>
			<AsamCol :xs="24" :sm="12" :md="8"><p class="cell example-paragraph">响应式列 2</p></AsamCol>
			<AsamCol :xs="24" :sm="24" :md="8">
				<p class="cell hidden-xs-only example-paragraph">仅 xs 隐藏</p>
			</AsamCol>
		</AsamRow>
		<p class="example-paragraph">hidden-xs-only 由单独加载的 Element Plus display.css 提供；ASAM 主样式不隐式加载它。</p>
	</section>
</template>

<script setup lang="ts">
import { AsamCol, AsamRow } from '@asam-ui/ui';
import 'element-plus/theme-chalk/display.css';
defineOptions({ name: 'ThemeLayoutDemo' });
</script>

<style scoped>
.cell {
	padding: var(--asam-space-sm);
	border: 1px solid var(--asam-color-border);
	background: var(--asam-color-surface-muted);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

JS ​

响应式列 1

响应式列 2

仅 xs 隐藏

hidden-xs-only 由单独加载的 Element Plus display.css 提供；ASAM 主样式不隐式加载它。

vue
<template>
	<section>
		<AsamRow :gutter="16">
			<AsamCol :xs="24" :sm="12" :md="8"><p class="cell example-paragraph">响应式列 1</p></AsamCol>
			<AsamCol :xs="24" :sm="12" :md="8"><p class="cell example-paragraph">响应式列 2</p></AsamCol>
			<AsamCol :xs="24" :sm="24" :md="8">
				<p class="cell hidden-xs-only example-paragraph">仅 xs 隐藏</p>
			</AsamCol>
		</AsamRow>
		<p class="example-paragraph">hidden-xs-only 由单独加载的 Element Plus display.css 提供；ASAM 主样式不隐式加载它。</p>
	</section>
</template>

<script setup>
import { AsamCol, AsamRow } from '@asam-ui/ui';
import 'element-plus/theme-chalk/display.css';
defineOptions({ name: 'ThemeLayoutDemo' });
</script>

<style scoped>
.cell {
	padding: var(--asam-space-sm);
	border: 1px solid var(--asam-color-border);
	background: var(--asam-color-surface-muted);
}
</style>

<style scoped>
p:where(.example-paragraph) {
	margin-block: 16px;
	line-height: 1.8;
	overflow-wrap: anywhere;
}
</style>

ASAM UI 开发者文档 · 首批三包 0.1.0-alpha.1 已发布