diff --git a/src/zh_CN/manual-toc.json b/src/zh_CN/manual-toc.json index 13a01227..c1e86456 100644 --- a/src/zh_CN/manual-toc.json +++ b/src/zh_CN/manual-toc.json @@ -133,24 +133,12 @@ "path": "overview.md" }, { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "基础用法", - "path": "basic.md" - }, - { - "text": "带有图标", - "path": "with-icon.md" - }, - { - "text": "文案滚动", - "path": "loop.md" + "text": "快速入门", + "path": "getting-started.md" }, { - "text": "自定义行为", - "path": "custom-action.md" + "text": "API 参考", + "path": "api.md" } ] }, @@ -158,1156 +146,477 @@ "text": "Avatar", "path": "avatar", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "多类型", - "path": "type.md" - }, - { - "text": "带徽标", - "path": "badge.md" - }, - { - "text": "组合头像", - "path": "group.md" - }, - { - "text": "设置间距", - "path": "set-gap.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { - "text": "Badge", - "path": "badge", - "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "独立使用", - "path": "standalone.md" - }, - { - "text": "状态点", - "path": "status.md" - }, - { - "text": "动态展示", - "path": "dynamic.md" - }, - { - "text": "红点模式", - "path": "red-dot.md" - }, - { - "text": "缎带模式", - "path": "ribbon.md" - } - ] + "text": "Badge", + "path": "badge", + "items": [ + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } + ] }, { "text": "BoxPanel", "path": "box-panel", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Breadcrumb", "path": "breadcrumb", + "items": [ + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } + ] + }, + { + "text": "Button", + "path": "button", "items": [ { "text": "概述", "path": "overview.md" }, { - "text": "快速开始", + "text": "快速入门", "path": "getting-started.md" + }, + { + "text": "API 参考", + "path": "api.md" } ] }, { - "text": "Button", - "path": "button", - "items": [ - { - "text": "Overview", - "path": "overview.md" - }, - { - "text": "Getting Started", - "path": "getting-started.md" - }, - { - "text": "Block Button", - "path": "block-button.md" - }, - { - "text": "Danger Button", - "path": "danger.md" - }, - { - "text": "Disabled Button", - "path": "disabled.md" - }, - { - "text": "Ghost Button", - "path": "ghost.md" - }, - { - "text": "Loading Button", - "path": "loading.md" - }, - { - "text": "Button with Icon", - "path": "with-icon.md" - } - ] - }, - { - "text": "Button Spinner", + "text": "ButtonSpinner", "path": "button-spinner", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Calendar", "path": "calendar", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { - "text": "Card", - "path": "card", - "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "无边框卡片", - "path": "no-border.md" - }, - { - "text": "简洁卡片", - "path": "inner-card.md" - }, - { - "text": "带标签页的卡片", - "path": "tab-card.md" - }, - { - "text": "栅格卡片", - "path": "grid.md" - }, - { - "text": "栅格列卡片", - "path": "card-in-column.md" - }, - { - "text": "自定义卡片", - "path": "custom.md" - }, - { - "text": "复杂卡片", - "path": "complex-card.md" - }, - { - "text": "加载中卡片", - "path": "loading.md" - } - ] + "text": "Card", + "path": "card", + "items": [ + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } + ] }, { "text": "Carousel", "path": "carousel", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { - "text": "CheckBox", - "path": "check-box", - "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "控制复选框", - "path": "control-checkbox.md" - }, - { - "text": "复选框组", - "path": "checkbox-in-group.md" - }, - { - "text": "栅格中的复选框", - "path": "checkbox-in-grid.md" - }, - { - "text": "全选/反选控制", - "path": "check-all.md" - } - ] + "text": "CheckBox", + "path": "check-box", + "items": [ + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } + ] }, { "text": "Collapse", "path": "collapse", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "高级用法", - "path": "advanced.md" - }, - { - "text": "其他", - "path": "other.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "ComboBox", "path": "combobox", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "DatePicker", "path": "date-picker", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { - "text": "Description", - "path": "description", - "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } - ] + "text": "Description", + "path": "description", + "items": [ + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } + ] }, { "text": "Dialog", "path": "dialog", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "自定义页脚", - "path": "custom-footer.md" - }, - { - "text": "异步逻辑处理", - "path": "with-async-logic.md" - }, - { - "text": "自动关闭", - "path": "auto-close.md" - }, - { - "text": "加载状态", - "path": "with-loading.md" - }, - { - "text": "按钮属性", - "path": "button-props.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Drawer", "path": "drawer", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "预设", - "path": "presets.md" - }, - { - "text": "自定义位置", - "path": "custom-placement.md" - }, - { - "text": "内部展示", - "path": "inner-display.md" - }, - { - "text": "额外的页眉与页脚", - "path": "extra-header-footer.md" - }, - { - "text": "多层抽屉", - "path": "multi-level-drawer.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "DropdownButton", "path": "dropdown-button", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { - "text": "Empty", - "path": "empty", - "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } - ] + "text": "Empty", + "path": "empty", + "items": [ + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } + ] }, { "text": "GroupBox", "path": "group-box", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Icons", "path": "icons", "items": [ - { - "text": "概述", - "path": "overview.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "ImagePreviewer", "path": "image-previewer", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "InfoFlyout", "path": "info-flyout", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "触发方式", - "path": "trigger-way.md" - }, - { - "text": "位置", - "path": "placement.md" - }, - { - "text": "箭头", - "path": "arrow.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "LineEdit", "path": "line-edit", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "前缀与后缀", - "path": "pre-post-tab.md" - }, - { - "text": "搜索框", - "path": "search.md" - }, - { - "text": "密码框", - "path": "password.md" - }, - { - "text": "清除图标", - "path": "clear-icon.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "ListBox", "path": "list-box", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "LoadingIndicator", "path": "loading-indicator", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "自定义旋转指示器", - "path": "custom-spinning-indicator.md" - }, - { - "text": "加载遮罩", - "path": "loadingmask.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } + ] + }, + { + "text": "Menu", + "path": "menu", + "items": [ + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, - { - "text": "Menu", - "path": "menu", - "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "顶部导航", - "path": "top-navigation.md" - }, - { - "text": "垂直菜单", - "path": "vertical-menu.md" - }, - { - "text": "可滚动菜单", - "path": "scrollable.md" - }, - { - "text": "带图标", - "path": "with-icon.md" - }, - { - "text": "单选与复选框", - "path": "with-radio-checkbox.md" - }, - { - "text": "默认展开", - "path": "default-opened.md" - }, - { - "text": "切换菜单类型", - "path": "switch-menu-type.md" - }, - { - "text": "通过 ItemsSource 导航菜单", - "path": "nav-menu-by-itemsource.md" - }, - { - "text": "上下文菜单", - "path": "context.md" - } - ] - }, - { + { "text": "Message", "path": "message", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "动态支持", - "path": "dynamic.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Notification", "path": "notification", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "图标通知", - "path": "icon-notification.md" - }, - { - "text": "永不关闭的通知", - "path": "never-close-notification.md" - }, - { - "text": "暂停", - "path": "pause.md" - }, - { - "text": "位置", - "path": "placement.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "NumberUpDown", "path": "number-up-down", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "高级用法", - "path": "advanced.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Pagination", "path": "pagination", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, - { + { "text": "Palette", "path": "palette", "items": [ - { - "text": "概述", - "path": "overview.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "PopupConfirm", "path": "popup-confirm", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "ProgressBar", "path": "progress-bar", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "动态进度", - "path": "dynamic-progress.md" - }, - { - "text": "成功状态", - "path": "success.md" - }, - { - "text": "线型选项", - "path": "line-option.md" - }, - { - "text": "垂直显示", - "path": "vertical-progress-bar.md" - }, - { - "text": "仪表盘", - "path": "dashboard.md" - }, - { - "text": "改变位置值", - "path": "change-position-value.md" - }, - { - "text": "步骤进度条", - "path": "step-progress-bar.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { - "text": "Qrcode", + "text": "QRCode", "path": "qrcode", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "高级用法", - "path": "advanced.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "RadioButton", "path": "radio-button", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "按钮样式", - "path": "button.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Rate", "path": "rate", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Result", "path": "result", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Segmented", "path": "segmented", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "图标", - "path": "icon.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Separator", "path": "separator", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "标题分隔符", - "path": "title-separator.md" - }, - { - "text": "变体分隔符", - "path": "variants-separator.md" - }, - { - "text": "垂直分隔符", - "path": "vertical-separator.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Skeleton", "path": "skeleton", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "高级用法", - "path": "advanced.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Slider", "path": "slider", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "渐变", - "path": "graduate.md" - }, - { - "text": "提示", - "path": "tooltips.md" - }, - { - "text": "垂直", - "path": "vertical.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "SplitButton", "path": "split-button", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "图标", - "path": "icon.md" - }, - { - "text": "尺寸", - "path": "size.md" - }, - { - "text": "危险按钮", - "path": "danger.md" - }, - { - "text": "触发方式", - "path": "trigger-way.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Statistic", "path": "statistic", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, - { - "text": "Steps", - "path": "steps", - "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "可点击", - "path": "clickable.md" - }, - { - "text": "点状样式", - "path": "dot-style.md" - }, - { - "text": "内联步骤", - "path": "inline-step.md" - }, - { - "text": "标签放置", - "path": "label-placement.md" - }, - { - "text": "导航步骤", - "path": "navigation-step.md" - }, - { - "text": "状态", - "path": "status.md" - }, - { - "text": "切换步骤", - "path": "switch-step.md" - }, - { - "text": "垂直步骤", - "path": "vertical-step.md" - }, - { - "text": "带进度", - "path": "with-progress.md" - } - ] - }, - { - "text": "TabControl", - "path": "tab-control", - "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "卡片类型", - "path": "card-type.md" - }, - { - "text": "动态标签页", - "path": "dynamic-tab.md" - }, - { - "text": "位置", - "path": "position.md" - }, - { - "text": "滑块", - "path": "slider.md" - } - ] - }, - { + { + "text": "Steps", + "path": "steps", + "items": [ + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } + ] + }, + { + "text": "TabControl", + "path": "tab-control", + "items": [ + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } + ] + }, + { "text": "Tag", "path": "tag", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "TimePicker", "path": "time-picker", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "无边框", - "path": "bordered-less.md" - }, - { - "text": "格式化", - "path": "format.md" - }, - { - "text": "间隔", - "path": "interval.md" - }, - { - "text": "范围选择", - "path": "ranger.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Timeline", "path": "timeline", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "交替显示", - "path": "alternate.md" - }, - { - "text": "切换倒序", - "path": "toggle-reverse.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "ToggleSwitch", "path": "toggle-switch", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "高级用法", - "path": "advanced.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Tooltip", "path": "tooltip", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "TreeView", "path": "tree-view", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "连接线", - "path": "tree-with-line.md" - }, - { - "text": "块级显示", - "path": "block-node.md" - }, - { - "text": "拖拽", - "path": "drag.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] }, { "text": "Watermark", "path": "watermark", "items": [ - { - "text": "概述", - "path": "overview.md" - }, - { - "text": "快速开始", - "path": "getting-started.md" - }, - { - "text": "图片水印", - "path": "image-watermark.md" - }, - { - "text": "预览水印", - "path": "preview-watermark.md" - } + { "text": "概述", "path": "overview.md" }, + { "text": "快速入门", "path": "getting-started.md" }, + { "text": "API 参考", "path": "api.md" } ] } diff --git a/src/zh_CN/reference/controls/alert/api.md b/src/zh_CN/reference/controls/alert/api.md new file mode 100644 index 00000000..92538dda --- /dev/null +++ b/src/zh_CN/reference/controls/alert/api.md @@ -0,0 +1,44 @@ +# Alert API 参考 + +## 属性 + +| 属性 | 说明 | 类型 | 默认值 | +|---|---|---|---| +| `Type` | 警告提示类型 | `AlertType` | `Success` | +| `Message` | 提示消息内容（也可作为 Content 直接书写） | `string` | `""` | +| `Description` | 辅助描述信息 | `string?` | `null` | +| `IsShowIcon` | 是否显示类型对应的语义图标 | `bool` | `false` | +| `IsClosable` | 是否显示关闭按钮 | `bool` | `false` | +| `CloseIcon` | 自定义关闭按钮图标 | `PathIcon?` | `null`（默认使用 CloseOutlined） | +| `IsMessageMarqueEnabled` | 是否启用消息跑马灯滚动 | `bool` | `false` | +| `ExtraAction` | 自定义操作区域，位于 Alert 右侧 | `Control?` | `null` | + +## 事件 + +| 事件 | 说明 | 参数类型 | +|---|---|---| +| `CloseRequest` | 点击关闭按钮时触发 | `EventHandler` | + +## 枚举类型 + +### AlertType + +| 值 | 说明 | 图标 | +|---|---|---| +| `Success` | 成功提示，绿色系 | CheckCircleFilled | +| `Info` | 信息提示，蓝色系 | InfoCircleFilled | +| `Warning` | 警告提示，黄色系 | ExclamationCircleFilled | +| `Error` | 错误提示，红色系 | CloseCircleFilled | + +## 伪类（Pseudo Classes） + +| 伪类 | 说明 | +|---|---| +| `:has-description` | Description 属性非空时 | +| `:has-extra-action` | ExtraAction 属性非空时 | + +## 模板部件（Template Parts） + +| 名称 | 类型 | 说明 | +|---|---|---| +| `PART_CloseBtn` | `IconButton` | 关闭按钮 | diff --git a/src/zh_CN/reference/controls/alert/basic.md b/src/zh_CN/reference/controls/alert/basic.md deleted file mode 100644 index d0b9bbe7..00000000 --- a/src/zh_CN/reference/controls/alert/basic.md +++ /dev/null @@ -1,62 +0,0 @@ -# 基础用法 - -### 四种样式 - -`Alert` 组件提供了四种基础样式可供用户选择，分别对应 `success` 、 `info` 、 `warning` 、 `error` 。 - -![AtomUI Alert](./images/different-types.png) - -```xaml - - Success Text - Info Text - Warning Text - Error Text - -``` - -### 关闭按钮 - -如果允许用户关闭 `Alert` ，可以开启 `Alert` 的 `IsClosable` 选项。 - -![AtomUI Alert](./images/closer.png) - -```xaml - - - Warning Text Warning Text Warning Text Warning Text Warning Text Warning TextWarning Text - - - Error Text - - - Error Text - - -``` - -### 描述信息 - -需要对 `Alert` 进行详细描述时，可以开启 `Description` 特性。 - -![AtomUI Alert](./images/description.png) - -```xaml - - - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/alert/custom-action.md b/src/zh_CN/reference/controls/alert/custom-action.md deleted file mode 100644 index bb8cf260..00000000 --- a/src/zh_CN/reference/controls/alert/custom-action.md +++ /dev/null @@ -1,49 +0,0 @@ -# 自定义行为 - -`Alert` 组件允许自定义行为，通过提供 `ExtraAction` 属性，可以开启更多适合场景的自定义行为。 - -![AtomUI Alert自定义行为](./images/custom-action.png) - -```xaml - - - - UNDO - - Success Tips - - - - - Detail - - Error Text - - - - - Done - - Warning Text - - - - - - Accept - Decline - - - Info Text - - -``` - diff --git a/src/zh_CN/reference/controls/alert/getting-started.md b/src/zh_CN/reference/controls/alert/getting-started.md index 3596cc39..93caedba 100644 --- a/src/zh_CN/reference/controls/alert/getting-started.md +++ b/src/zh_CN/reference/controls/alert/getting-started.md @@ -1,16 +1,154 @@ -# Alert 快速入门 +# Alert 快速入门 -### 基础配置条件 +## 前置条件 -* Nuget安装Avalonia -* Nuget安装AtomUI +- NuGet 安装 `Avalonia` +- NuGet 安装 `AtomUI` -### 初始化一个最基础的 `Alert` 文本框 +## 基础用法 + +Alert 提供四种类型，通过 `Type` 属性设置，分别表达不同的语义。Message 内容可直接作为 Alert 的 Content 书写。 + +![AtomUI Alert 四种类型](./images/different-types.png) ```xaml - + Success Text + Info Text + Warning Text + Error Text + +``` + +| Type | 说明 | 对应图标 | +|---|---|---| +| `Success` | 操作成功提示 | CheckCircleFilled | +| `Info` | 一般信息提示 | InfoCircleFilled | +| `Warning` | 警告提示 | ExclamationCircleFilled | +| `Error` | 错误/危险提示 | CloseCircleFilled | + +## 显示图标 + +设置 `IsShowIcon="True"` 在提示信息前显示类型对应的语义图标，帮助用户快速识别信息级别。 + +![AtomUI Alert 图标](./images/description-with-icon.png) + +```xaml + + Success Tips + Informational Notes + Warning + Error + +``` + +## 描述信息 + +通过 `Description` 属性添加辅助描述文本。当同时设置 Message 和 Description 时，Alert 以双行模式展示：标题加粗、描述在下方。 + +![AtomUI Alert 描述](./images/description.png) + +```xaml + + + + + ``` -![AtomUI Alert快速入门](./images/basic.png) \ No newline at end of file +## 可关闭 + +设置 `IsClosable="True"` 显示关闭按钮。可通过 `CloseIcon` 自定义关闭图标。 + +![AtomUI Alert 关闭](./images/closer.png) + +```xaml + + + Warning Text Warning Text Warning Text + + + Error Text + + + + Error Text + + +``` + +关闭事件通过 `CloseRequest` 事件获取： + +```csharp +alert.CloseRequest += (sender, args) => +{ + // 处理关闭逻辑 +}; +``` + +## 自定义操作 + +通过 `ExtraAction` 属性在 Alert 右侧插入自定义操作区域，支持放置按钮或任意控件。 + +![AtomUI Alert 自定义操作](./images/custom-action.png) + +```xaml + + + UNDO + + Success Tips + + + + + + Detail + + + Error Text + +``` + +也可以放置多个操作按钮： + +```xaml + + + + Accept + Decline + + + Info Text + +``` + +## 文案轮播 + +当消息文本过长时，设置 `IsMessageMarqueEnabled="True"` 开启跑马灯滚动效果。 + +![AtomUI Alert 滚动](./images/loop-banner.webp) + +```xaml + + This is a long message that will scroll automatically when the text overflows the alert container + +``` diff --git a/src/zh_CN/reference/controls/alert/loop.md b/src/zh_CN/reference/controls/alert/loop.md deleted file mode 100644 index ad900d37..00000000 --- a/src/zh_CN/reference/controls/alert/loop.md +++ /dev/null @@ -1,11 +0,0 @@ -# Alert 自定义行为 - -当文案过长时，可以通过 `IsMessageMarqueEnabled` 属性开启滚动效果。 - -![AtomUI Alert组件滚动效果](./images/loop-banner.webp) - -```xaml - - I can be a React component, multiple React components, or just some text, Info Description Info Description Info Description Info Description - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/alert/overview.md b/src/zh_CN/reference/controls/alert/overview.md index ca052780..90a0be72 100644 --- a/src/zh_CN/reference/controls/alert/overview.md +++ b/src/zh_CN/reference/controls/alert/overview.md @@ -1,14 +1,21 @@ -# Alert 概述 +# Alert 警告提示 -### 简介 +## 简介 -在必要业务场景中，提供多种警告提示，向用户展示需要关注的信息。 +警告提示用于向用户展示需要关注的信息。与 Notification 不同，Alert 是静态嵌入页面内容中的非浮层组件，不会自动消失，适合展示持续性的提示信息。 -![AtomUI Alert快速入门](./images/custom-action.png) +![AtomUI Alert 组件](./images/custom-action.png) -### 主要功能 -* 四种样式 -* 关闭按钮 -* 文案轮播 -* 携带图标 -* 自定义操作按钮 \ No newline at end of file +## 何时使用 + +- 当页面中某个区域需要向用户显示提示性信息时 +- 非浮层的静态展示形式，始终展现在页面中，不会自动消失 + +## 主要特性 + +- **四种类型** — Success、Info、Warning、Error，通过颜色和图标传达不同语义 +- **图标显示** — 可选显示类型对应的语义图标，增强信息辨识度 +- **描述信息** — 支持标题 + 描述的双行展示模式 +- **可关闭** — 支持关闭按钮，用户可手动移除提示 +- **自定义操作** — 通过 ExtraAction 插入自定义按钮或操作区域 +- **文案轮播** — 消息过长时可启用跑马灯滚动效果 diff --git a/src/zh_CN/reference/controls/alert/with-icon.md b/src/zh_CN/reference/controls/alert/with-icon.md deleted file mode 100644 index 670aa931..00000000 --- a/src/zh_CN/reference/controls/alert/with-icon.md +++ /dev/null @@ -1,41 +0,0 @@ -# 图标 - -`Alert` 组件可以在显示文本与描述的同时，开启 `IsShowIcon` 特性打开图标功能，提供被用户感知的能力。 - -![AtomUI Alert图标](./images/description-with-icon.png) - -```xaml - - - - - - - - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/avatar/api.md b/src/zh_CN/reference/controls/avatar/api.md new file mode 100644 index 00000000..e47905c3 --- /dev/null +++ b/src/zh_CN/reference/controls/avatar/api.md @@ -0,0 +1,51 @@ +# Avatar API 参考 + +## Avatar + +`Avatar` 继承自 `TemplatedControl`，用于展示用户头像。 + +### 属性 + +| 属性名 | 类型 | 默认值 | 说明 | +|--------|------|--------|------| +| `Gap` | `double` | `4.0` | 文字头像距离左右两侧边界的像素值 | +| `Icon` | `PathIcon?` | `null` | 设置图标类型的头像图标 | +| `BitmapSrc` | `IImage?` | `null` | 设置位图类型的头像图片源 | +| `Src` | `string?` | `null` | 设置图片类型的头像资源路径（支持 SVG 等格式） | +| `Text` | `string?` | `null` | 设置文字类型的头像显示文本 | +| `SizeType` | `CustomizableSizeType` | `Middle` | 预设头像尺寸，可选值为 `Large`、`Middle`、`Small` | +| `Size` | `double` | `NaN` | 自定义头像尺寸（像素），设置后将覆盖 `SizeType` 的效果 | +| `Shape` | `AvatarShape` | `Circle` | 头像形状，可选值为 `Circle`（圆形）、`Square`（方形） | +| `IsMotionEnabled` | `bool` | - | 是否启用过渡动画 | + +### 枚举类型 + +#### AvatarShape + +| 值 | 说明 | +|----|------| +| `Circle` | 圆形头像 | +| `Square` | 方形头像 | + +#### CustomizableSizeType + +| 值 | 说明 | +|----|------| +| `Large` | 大尺寸 | +| `Middle` | 中等尺寸（默认） | +| `Small` | 小尺寸 | + +## AvatarGroup + +`AvatarGroup` 用于将多个 `Avatar` 组合展示为头像组。 + +### 常用属性 + +| 属性名 | 类型 | 说明 | +|--------|------|------| +| `MaxDisplayCount` | `int` | 最大显示头像数量，超出部分将折叠显示 | +| `SizeType` | `CustomizableSizeType` | 统一设置组内头像尺寸 | +| `Shape` | `AvatarShape` | 统一设置组内头像形状 | +| `FoldInfoAvatarForeground` | `IBrush` | 折叠提示头像的前景色 | +| `FoldInfoAvatarBackground` | `IBrush` | 折叠提示头像的背景色 | +| `FoldAvatarFlyoutTriggerType` | - | 折叠头像弹出层的触发方式（如 `Click`） | diff --git a/src/zh_CN/reference/controls/avatar/badge.md b/src/zh_CN/reference/controls/avatar/badge.md deleted file mode 100644 index c6c91fc8..00000000 --- a/src/zh_CN/reference/controls/avatar/badge.md +++ /dev/null @@ -1,16 +0,0 @@ -# 角标 - -头像组件支持数字角标功能，通常用于消息提示。 - -![AtomUI Avatar](./images/badge.png) - -```xaml - - - - - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/avatar/getting-started.md b/src/zh_CN/reference/controls/avatar/getting-started.md index 492a23f1..81789bd2 100644 --- a/src/zh_CN/reference/controls/avatar/getting-started.md +++ b/src/zh_CN/reference/controls/avatar/getting-started.md @@ -1,13 +1,13 @@ -# Avatar 快速入门 +# Avatar 快速入门 ### 基础配置条件 * Nuget安装Avalonia * Nuget安装AtomUI -### 初始化 +## 基本用法 -最基础最小配置化的头像组件功能，通过 `Icon` 属性传入 `AtomUI` 内置的图标库设定图标，通过 `Shape` 属性设置头像形状，通过 `Size` 或 `SizeType` 属性设置头像大小。 +最基础的头像组件用法。通过 `Icon` 属性传入 AtomUI 内置图标，通过 `Shape` 属性设置头像形状，通过 `Size` 或 `SizeType` 属性设置头像大小。 ```xaml @@ -29,4 +29,228 @@ ``` -![AtomUI Avatar组件](./images/basic.png) \ No newline at end of file +![Avatar 基本用法](./images/basic.png) + +## 头像类型 + +Avatar 组件支持图片、`Icon` 以及文字三种类型。其中 `Icon` 和文字类型可以自定义图标颜色及背景色。 + +```xaml + + + U + USER + + U + + +``` + +![Avatar 多类型](./images/type.png) + +## 文字内边距 + +对于文字类型的头像，当字符串较长时，字体大小会根据头像宽度自动调整。通过 `Gap` 属性可以设置文字距离左右两侧边界的像素值。 + +```xaml + + + + ChangeUser + + + ChangeGap + + +``` + +code-behind 文件： +```csharp +using AtomUIGallery.ShowCases.ViewModels; +using Avalonia.ReactiveUI; +using ReactiveUI; +namespace AtomUIGallery.ShowCases.Views; + +public partial class AvatarShowCase : ReactiveUserControl +{ + public AvatarShowCase() + { + InitializeComponent(); + this.WhenActivated(disposables => + { + if (DataContext is AvatarViewModel viewModel) + { + ChangeUserButton.Click += viewModel.HandleChangeUserClicked; + ChangeGapButton.Click += viewModel.HandleChangeGapClicked; + } + }); + } +} +``` + +ViewModel 文件： +```csharp +using System.Reactive.Disposables; +using ReactiveUI; + +namespace AtomUIGallery.ShowCases.ViewModels; + +public class AvatarViewModel : ReactiveObject, IRoutableViewModel, IActivatableViewModel +{ + public const string ID = "Avatar"; + public ViewModelActivator Activator { get; } + public IScreen HostScreen { get; } + + public string UrlPathSegment { get; } = ID; + + private string? _avatarText; + + public string? AvatarText + { + get => _avatarText; + set => this.RaiseAndSetIfChanged(ref _avatarText, value); + } + + private double? _avatarGap; + + public double? AvatarGap + { + get => _avatarGap; + set => this.RaiseAndSetIfChanged(ref _avatarGap, value); + } + + private string? _avatarBackground; + + public string? AvatarBackground + { + get => _avatarBackground; + set => this.RaiseAndSetIfChanged(ref _avatarBackground, value); + } + + private int _textCurrentIndex = 0; + private int _gapCurrentIndex = 0; + + private List _userList; + private List _colorList; + private List _gapList; + + public AvatarViewModel(IScreen screen) + { + Activator = new ViewModelActivator(); + HostScreen = screen; + _userList = ["U", "Lucy", "Tom", "Edward"]; + _colorList = ["#f56a00", "#7265e6", "#ffbf00", "#00a2ae"]; + _gapList = [4, 3, 2, 1]; + this.WhenActivated((CompositeDisposable disposables) => + { + SetupAvatarText(); + SetupAvatarGap(); + }); + } + + private void SetupAvatarText() + { + var index = (_textCurrentIndex++) % 4; + AvatarText = _userList[index]; + AvatarBackground = _colorList[index]; + } + + private void SetupAvatarGap() + { + var index = (_gapCurrentIndex++) % 4; + AvatarGap = _gapList[index]; + } + + public void HandleChangeUserClicked(object? sender, EventArgs e) + { + SetupAvatarText(); + } + + public void HandleChangeGapClicked(object? sender, EventArgs e) + { + SetupAvatarGap(); + } +} +``` + +![Avatar 内边距](./images/autoset.webp) + +## 角标 + +Avatar 组件支持与 `CountBadge` 和 `DotBadge` 配合使用，实现消息数量提示功能。 + +```xaml + + + + + + + + +``` + +![Avatar 角标](./images/badge.png) + +## 头像组 + +通过 `AvatarGroup` 组件实现多头像组合展示。可使用 `MaxDisplayCount` 属性控制最大显示数量，超出部分将自动折叠。 + +```xaml + + + + K + + + + + + + K + + + + + + + K + + + + + + + K + + + + + + A + K + + + + +``` + +![Avatar 头像组](./images/group.png) diff --git a/src/zh_CN/reference/controls/avatar/group.md b/src/zh_CN/reference/controls/avatar/group.md deleted file mode 100644 index c851db76..00000000 --- a/src/zh_CN/reference/controls/avatar/group.md +++ /dev/null @@ -1,53 +0,0 @@ -# 组头像 - -头像组件支持头像组合展现。 - -![AtomUI Avatar](./images/group.png) - -```xaml - - - - K - - - - - - - K - - - - - - - K - - - - - - - K - - - - - - A - K - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/avatar/overview.md b/src/zh_CN/reference/controls/avatar/overview.md index ecd4c9d9..d0a6a8d6 100644 --- a/src/zh_CN/reference/controls/avatar/overview.md +++ b/src/zh_CN/reference/controls/avatar/overview.md @@ -1,12 +1,24 @@ -# Avatar 概述 +# Avatar 概述 ### 简介 -提供丰富的头像功能，支持纯文字头像，支持数字角标，同时支持头像组。 +Avatar 是一个用于展示用户头像的组件，继承自 `TemplatedControl`。该组件提供了丰富的头像展示能力，支持图片、图标和文字三种头像类型，可满足多种业务场景下的用户标识需求。 ![AtomUI Avatar组件](./images/group.png) -### 主要功能 -* 多种头像类型，纯图、文字、自定义图标头像 -* 支持数字角标 -* 头像组 \ No newline at end of file +### 适用场景 + +- 需要展示用户头像或身份标识时 +- 用户列表、评论区、聊天界面等需要人物标识的场景 +- 需要以头像组形式展示多个用户时 +- 需要在头像上附加角标以提示消息数量时 + +### 核心功能 + +- **多种头像类型**：支持图片（`BitmapSrc`/`Src`）、图标（`Icon`）和文字（`Text`）三种展示方式 +- **灵活的尺寸控制**：通过 `SizeType` 预设尺寸或 `Size` 自定义精确尺寸 +- **多种形状**：支持圆形（`Circle`）和方形（`Square`）两种头像形状 +- **文字间距调节**：通过 `Gap` 属性控制文字头像的内边距 +- **头像组**：通过 `AvatarGroup` 组件实现多头像组合展示，支持 `MaxDisplayCount` 控制最大显示数量 +- **角标支持**：可与 `CountBadge`、`DotBadge` 组件配合使用，实现消息提示功能 +- **动画支持**：通过 `IsMotionEnabled` 属性控制是否启用过渡动画 diff --git a/src/zh_CN/reference/controls/avatar/set-gap.md b/src/zh_CN/reference/controls/avatar/set-gap.md deleted file mode 100644 index b36eee2e..00000000 --- a/src/zh_CN/reference/controls/avatar/set-gap.md +++ /dev/null @@ -1,136 +0,0 @@ -# 内边距 - -字符型的头像，当字符串较长时，字体大小可以根据头像宽度自动调整，也可使用通过事件来设置字符距离左右两侧边界单位像素。 - -![AtomUI Avatar](./images/autoset.webp) - -axaml文件： -```xaml - - - - ChangeUser - - - ChangeGap - - -``` - -code-behind文件： -```csharp -using AtomUIGallery.ShowCases.ViewModels; -using Avalonia.ReactiveUI; -using ReactiveUI; -namespace AtomUIGallery.ShowCases.Views; - -public partial class AvatarShowCase : ReactiveUserControl -{ - public AvatarShowCase() - { - InitializeComponent(); - this.WhenActivated(disposables => - { - if (DataContext is AvatarViewModel viewModel) - { - ChangeUserButton.Click += viewModel.HandleChangeUserClicked; - ChangeGapButton.Click += viewModel.HandleChangeGapClicked; - } - }); - } -} -``` - -view-model文件： -```csharp -using System.Reactive.Disposables; -using ReactiveUI; - -namespace AtomUIGallery.ShowCases.ViewModels; - -public class AvatarViewModel : ReactiveObject, IRoutableViewModel, IActivatableViewModel -{ - public const string ID = "Avatar"; - public ViewModelActivator Activator { get; } - public IScreen HostScreen { get; } - - public string UrlPathSegment { get; } = ID; - - private string? _avatarText; - - public string? AvatarText - { - get => _avatarText; - set => this.RaiseAndSetIfChanged(ref _avatarText, value); - } - - private double? _avatarGap; - - public double? AvatarGap - { - get => _avatarGap; - set => this.RaiseAndSetIfChanged(ref _avatarGap, value); - } - - private string? _avatarBackground; - - public string? AvatarBackground - { - get => _avatarBackground; - set => this.RaiseAndSetIfChanged(ref _avatarBackground, value); - } - - private int _textCurrentIndex = 0; - private int _gapCurrentIndex = 0; - - private List _userList; - private List _colorList; - private List _gapList; - - public AvatarViewModel(IScreen screen) - { - Activator = new ViewModelActivator(); - HostScreen = screen; - _userList = ["U", "Lucy", "Tom", "Edward"]; - _colorList = ["#f56a00", "#7265e6", "#ffbf00", "#00a2ae"]; - _gapList = [4, 3, 2, 1]; - this.WhenActivated((CompositeDisposable disposables) => - { - SetupAvatarText(); - SetupAvatarGap(); - }); - } - - private void SetupAvatarText() - { - var index = (_textCurrentIndex++) % 4; - AvatarText = _userList[index]; - AvatarBackground = _colorList[index]; - } - - private void SetupAvatarGap() - { - var index = (_gapCurrentIndex++) % 4; - AvatarGap = _gapList[index]; - } - - public void HandleChangeUserClicked(object? sender, EventArgs e) - { - SetupAvatarText(); - } - - public void HandleChangeGapClicked(object? sender, EventArgs e) - { - SetupAvatarGap(); - } -} -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/avatar/type.md b/src/zh_CN/reference/controls/avatar/type.md deleted file mode 100644 index d0b52b01..00000000 --- a/src/zh_CN/reference/controls/avatar/type.md +++ /dev/null @@ -1,16 +0,0 @@ -# 多类型 - -头像组件支持图片、 `Icon` 以及字符，其中 `Icon` 和字符型可以自定义图标颜色及背景色。 - -![AtomUI Avatar](./images/type.png) - -```xaml - - - U - USER - - U - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/badge/api.md b/src/zh_CN/reference/controls/badge/api.md new file mode 100644 index 00000000..cb3f4a8f --- /dev/null +++ b/src/zh_CN/reference/controls/badge/api.md @@ -0,0 +1,84 @@ +# Badge API 参考 + +## CountBadge + +计数徽标组件，继承自 `Control`，用于展示数字角标。 + +### 属性 + +| 属性名 | 类型 | 默认值 | 说明 | +|--------|------|--------|------| +| `BadgeColor` | `string?` | `null` | 自定义徽标背景颜色，支持预设颜色名称和自定义色值（HEX、RGB、HSL 等格式） | +| `Count` | `int` | `0` | 显示的计数数字 | +| `DecoratedTarget` | `Control?` | `null` | 被装饰的目标控件，也可通过将目标控件作为子元素传入 | +| `Offset` | `Point` | `0,0` | 徽标相对于默认位置的偏移量 | +| `OverflowCount` | `int` | `99` | 数字溢出上限，超出时显示为 `{OverflowCount}+` | +| `ShowZero` | `bool` | `false` | 当 `Count` 为 0 时是否仍然显示徽标 | +| `Size` | `CountBadgeSize` | `Default` | 徽标尺寸大小 | +| `BadgeIsVisible` | `bool` | `true` | 控制徽标是否可见 | +| `IsMotionEnabled` | `bool` | - | 是否启用动画效果 | + +### CountBadgeSize 枚举 + +| 值 | 说明 | +|----|------| +| `Default` | 默认尺寸 | +| `Small` | 小尺寸 | + +--- + +## DotBadge + +圆点徽标组件，继承自 `Control`，用于展示状态圆点或红点标记。 + +### 属性 + +| 属性名 | 类型 | 默认值 | 说明 | +|--------|------|--------|------| +| `DotColor` | `string?` | `null` | 自定义圆点颜色，支持预设颜色名称（如 Pink、Red、Cyan 等）和自定义色值 | +| `Status` | `DotBadgeStatus?` | `null` | 圆点状态类型，设置后将使用对应状态的预定义颜色 | +| `Text` | `string?` | `null` | 状态圆点旁显示的说明文字，独立使用模式下有效 | +| `DecoratedTarget` | `Control?` | `null` | 被装饰的目标控件，也可通过将目标控件作为子元素传入 | +| `Offset` | `Point` | `0,0` | 圆点相对于默认位置的偏移量 | +| `BadgeIsVisible` | `bool` | `false` | 控制圆点是否可见 | +| `IsMotionEnabled` | `bool` | - | 是否启用动画效果 | + +### DotBadgeStatus 枚举 + +| 值 | 说明 | +|----|------| +| `Default` | 默认状态（灰色） | +| `Success` | 成功状态（绿色） | +| `Processing` | 处理中状态（蓝色，带动画效果） | +| `Error` | 错误状态（红色） | +| `Warning` | 警告状态（黄色） | + +### 预设颜色名称 + +DotBadge 的 `DotColor` 属性支持以下预设颜色名称： + +`Pink`、`Red`、`Yellow`、`Orange`、`Cyan`、`Green`、`Blue`、`Purple`、`GeekBlue`、`Magenta`、`Volcano`、`Gold`、`Lime` + +--- + +## RibbonBadge + +缎带徽标组件，继承自 `Control`，用于在内容区域添加缎带样式的装饰标签。 + +### 属性 + +| 属性名 | 类型 | 默认值 | 说明 | +|--------|------|--------|------| +| `RibbonColor` | `string?` | `null` | 自定义缎带颜色，支持预设颜色名称和自定义色值 | +| `DecoratedTarget` | `Control?` | `null` | 被装饰的目标控件，也可通过将目标控件作为子元素传入 | +| `Offset` | `Point` | `0,0` | 缎带相对于默认位置的偏移量 | +| `Text` | `string?` | `null` | 缎带上显示的文字内容 | +| `Placement` | `RibbonBadgePlacement` | `End` | 缎带放置位置 | +| `BadgeIsVisible` | `bool` | `false` | 控制缎带是否可见 | + +### RibbonBadgePlacement 枚举 + +| 值 | 说明 | +|----|------| +| `Start` | 放置在左上角 | +| `End` | 放置在右上角（默认） | diff --git a/src/zh_CN/reference/controls/badge/dynamic.md b/src/zh_CN/reference/controls/badge/dynamic.md deleted file mode 100644 index 35746a89..00000000 --- a/src/zh_CN/reference/controls/badge/dynamic.md +++ /dev/null @@ -1,166 +0,0 @@ -# 动态模式 - -可以通过事件动态调整数字大小，也可以实现一键清除红点（强迫症福音）。 - -![AtomUI Badge](./images/dynamic.webp) - -axaml文件： -```xaml -// 下面代码中Binding的属性，请自行修改为实际项目中的属性名称 - - - - - - - Add - Sub - Random - - - - - - - - - - - - -``` - -code-behind文件： -```csharp -public partial class BadgeShowCase : ReactiveUserControl -{ - public BadgeShowCase() - { - InitializeComponent(); - } -} -``` - -view-model文件： -```csharp -using System.Reactive.Disposables; -using ReactiveUI; - -public class BadgeViewModel : ReactiveObject, IRoutableViewModel, IActivatableViewModel -{ - public ViewModelActivator Activator { get; } - - public const string ID = "Badge"; - - public IScreen HostScreen { get; } - - public string UrlPathSegment { get; } = ID; - - private double _dynamicBadgeCount = 5; - - public double DynamicBadgeCount - { - get => _dynamicBadgeCount; - set => this.RaiseAndSetIfChanged(ref _dynamicBadgeCount, value); - } - - private bool _dynamicDotBadgeVisible = true; - - public bool DynamicDotBadgeVisible - { - get => _dynamicDotBadgeVisible; - set => this.RaiseAndSetIfChanged(ref _dynamicDotBadgeVisible, value); - } - - private bool _standaloneSwitchChecked; - - public bool StandaloneSwitchChecked - { - get => _standaloneSwitchChecked; - set => this.RaiseAndSetIfChanged(ref _standaloneSwitchChecked, value); - } - - private double _standaloneBadgeCount1; - - public double StandaloneBadgeCount1 - { - get => _standaloneBadgeCount1; - set => this.RaiseAndSetIfChanged(ref _standaloneBadgeCount1, value); - } - - private double _standaloneBadgeCount2; - - public double StandaloneBadgeCount2 - { - get => _standaloneBadgeCount2; - set => this.RaiseAndSetIfChanged(ref _standaloneBadgeCount2, value); - } - - private double _standaloneBadgeCount3; - - public double StandaloneBadgeCount3 - { - get => _standaloneBadgeCount3; - set => this.RaiseAndSetIfChanged(ref _standaloneBadgeCount3, value); - } - - public BadgeViewModel(IScreen screen) - { - Activator = new ViewModelActivator(); - this.WhenActivated((CompositeDisposable disposables) => - { - this.WhenAnyValue(vm => vm.StandaloneSwitchChecked) - .Subscribe(HandleStandaloneSwitchChecked) - .DisposeWith(disposables); - }); - HostScreen = screen; - } - - private void HandleStandaloneSwitchChecked(bool value) - { - if (value) - { - StandaloneBadgeCount1 = 11; - StandaloneBadgeCount2 = 25; - StandaloneBadgeCount3 = 109; - } - else - { - StandaloneBadgeCount1 = 0; - StandaloneBadgeCount2 = 0; - StandaloneBadgeCount3 = 0; - } - } - - public void AddDynamicBadgeCount() - { - DynamicBadgeCount += 1; - } - - public void SubDynamicBadgeCount() - { - var value = DynamicBadgeCount; - value -= 1; - value = Math.Max(value, 0); - DynamicBadgeCount = value; - } - - public void RandomDynamicBadgeCount() - { - var random = new Random(); - DynamicBadgeCount = random.Next(0, 110); - } -} -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/badge/getting-started.md b/src/zh_CN/reference/controls/badge/getting-started.md index 0d8bdc0f..cfefd729 100644 --- a/src/zh_CN/reference/controls/badge/getting-started.md +++ b/src/zh_CN/reference/controls/badge/getting-started.md @@ -1,15 +1,19 @@ -# Badge快速入门 +# Badge 快速入门 -### 基础配置条件 +## 前置条件 -* Nuget安装Avalonia -* Nuget安装AtomUI +- Nuget 安装 Avalonia +- Nuget 安装 AtomUI + +--- + +## CountBadge 计数徽标 ### 基础用法 -最基础最小配置化的徽标组件功能，通过Border的 `Width` 与 `Height` 设定大小，通过 `Count` 属性设置数字，`ShowZero` 表示当数字为0时是否显示。 +最基础的计数徽标用法。通过 `Count` 属性设置显示的数字，`ShowZero` 属性控制计数为 0 时是否仍然显示徽标。 -![AtomUI Badge组件](./images/basic.png) +![AtomUI Badge 组件](./images/basic.png) ```xaml @@ -28,11 +32,11 @@ ``` -### 数字溢出设定 +### 溢出计数 -通过 `OverflowCount` 属性设置数字溢出显示的数字。 +通过 `OverflowCount` 属性设定数字溢出的上限值。当 `Count` 超过 `OverflowCount` 时，将显示为 `{OverflowCount}+` 的形式。默认溢出上限为 99。 -![AtomUI Badge组件](./images/overflow-counter.png) +![AtomUI Badge 组件](./images/overflow-counter.png) ```xaml @@ -63,15 +67,21 @@ ``` -### 数字角标偏移量 +### 角标大小控制 -通过 `Offset` 属性设置数字角标偏移量。 +通过 `Size` 属性设定计数角标的尺寸大小。支持 `Default` 和 `Small` 两种尺寸。 -![AtomUI Badge组件](./images/offset.png) +![AtomUI Badge 组件](./images/size.png) ```xaml - + + + + ``` -### 角标大小控制 +### 位置偏移 -通过 `Size` 属性设定数字角标大小。 +通过 `Offset` 属性设定计数角标相对于默认位置的偏移量。 -![AtomUI Badge组件](./images/size.png) +![AtomUI Badge 组件](./images/offset.png) ```xaml - - - - + -``` \ No newline at end of file +``` + +### 独立使用模式 + +不包裹任何子元素时，CountBadge 将直接显示数字角标本身，适用于需要在界面中独立展示计数的场景。 + +![AtomUI Badge 组件](./images/standalone.webp) + +```xaml +// 下面代码中 Binding 的属性，请自行修改为实际项目中的属性名称 + + + + + + +``` + +### 动态计数 + +通过数据绑定实现动态调整计数值，结合 `BadgeIsVisible` 属性可以实现徽标的显示和隐藏切换。 + +![AtomUI Badge 组件](./images/dynamic.webp) + +axaml 文件： +```xaml +// 下面代码中 Binding 的属性，请自行修改为实际项目中的属性名称 + + + + + + + Add + Sub + Random + + + + + + + + + + + + +``` + +ViewModel 文件： +```csharp +using System.Reactive.Disposables; +using ReactiveUI; + +public class BadgeViewModel : ReactiveObject, IRoutableViewModel, IActivatableViewModel +{ + public ViewModelActivator Activator { get; } + + public const string ID = "Badge"; + + public IScreen HostScreen { get; } + + public string UrlPathSegment { get; } = ID; + + private double _dynamicBadgeCount = 5; + + public double DynamicBadgeCount + { + get => _dynamicBadgeCount; + set => this.RaiseAndSetIfChanged(ref _dynamicBadgeCount, value); + } + + private bool _dynamicDotBadgeVisible = true; + + public bool DynamicDotBadgeVisible + { + get => _dynamicDotBadgeVisible; + set => this.RaiseAndSetIfChanged(ref _dynamicDotBadgeVisible, value); + } + + private bool _standaloneSwitchChecked; + + public bool StandaloneSwitchChecked + { + get => _standaloneSwitchChecked; + set => this.RaiseAndSetIfChanged(ref _standaloneSwitchChecked, value); + } + + private double _standaloneBadgeCount1; + + public double StandaloneBadgeCount1 + { + get => _standaloneBadgeCount1; + set => this.RaiseAndSetIfChanged(ref _standaloneBadgeCount1, value); + } + + private double _standaloneBadgeCount2; + + public double StandaloneBadgeCount2 + { + get => _standaloneBadgeCount2; + set => this.RaiseAndSetIfChanged(ref _standaloneBadgeCount2, value); + } + + private double _standaloneBadgeCount3; + + public double StandaloneBadgeCount3 + { + get => _standaloneBadgeCount3; + set => this.RaiseAndSetIfChanged(ref _standaloneBadgeCount3, value); + } + + public BadgeViewModel(IScreen screen) + { + Activator = new ViewModelActivator(); + this.WhenActivated((CompositeDisposable disposables) => + { + this.WhenAnyValue(vm => vm.StandaloneSwitchChecked) + .Subscribe(HandleStandaloneSwitchChecked) + .DisposeWith(disposables); + }); + HostScreen = screen; + } + + private void HandleStandaloneSwitchChecked(bool value) + { + if (value) + { + StandaloneBadgeCount1 = 11; + StandaloneBadgeCount2 = 25; + StandaloneBadgeCount3 = 109; + } + else + { + StandaloneBadgeCount1 = 0; + StandaloneBadgeCount2 = 0; + StandaloneBadgeCount3 = 0; + } + } + + public void AddDynamicBadgeCount() + { + DynamicBadgeCount += 1; + } + + public void SubDynamicBadgeCount() + { + var value = DynamicBadgeCount; + value -= 1; + value = Math.Max(value, 0); + DynamicBadgeCount = value; + } + + public void RandomDynamicBadgeCount() + { + var random = new Random(); + DynamicBadgeCount = random.Next(0, 110); + } +} +``` + +--- + +## DotBadge 圆点徽标 + +### 红点标记 + +最基础的红点标记用法，用于在图标或链接上添加未读提示。通过 `Offset` 属性调整红点的位置。 + +![AtomUI Badge 组件](./images/red-badge.png) + +```xaml + + + + + + + + + +``` + +### 状态标记 + +使用 `Status` 属性表达互联网业务中常见的五种状态。配合 `Text` 属性可以在状态圆点旁显示说明文字。此模式下无需包裹子元素，属于独立使用方式。 + +![AtomUI Badge 组件](./images/status.png) + +```xaml + + + + + + + + + + + + + + + + +``` + +### 预设颜色与自定义颜色 + +通过 `DotColor` 属性设置圆点颜色。AtomUI 内置了大量预设颜色名称，同时也支持直接传入 HEX、RGB、HSL 等格式的自定义色值。 + +![AtomUI Badge 组件](./images/presets.png) + +```xaml + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +--- + +## RibbonBadge 缎带徽标 + +### 基础用法与颜色设置 + +RibbonBadge 包裹子元素后可生成缎带样式的徽标。通过 `Text` 属性设置缎带上的文字内容，通过 `RibbonColor` 属性设置缎带颜色（支持预设颜色名称和自定义色值）。 + +### 位置控制 + +通过 `Placement` 属性控制缎带的位置，支持 `Start`（左侧）和 `End`（右侧，默认值）两种放置方式。 + +![AtomUI Badge 组件](./images/ribbon.png) + +```xaml + + + + + + Pushes open the window + + + and raises the spyglass. + + + + + + + + + Pushes open the window + + + and raises the spyglass. + + + + + + + + + Pushes open the window + + + and raises the spyglass. + + + + + + + + + Pushes open the window + + + and raises the spyglass. + + + + + + + + + Pushes open the window + + + and raises the spyglass. + + + + + + + + + Pushes open the window + + + and raises the spyglass. + + + + + + + + + Pushes open the window + + + and raises the spyglass. + + + + + +``` diff --git a/src/zh_CN/reference/controls/badge/overview.md b/src/zh_CN/reference/controls/badge/overview.md index 35862887..357b7f3b 100644 --- a/src/zh_CN/reference/controls/badge/overview.md +++ b/src/zh_CN/reference/controls/badge/overview.md @@ -1,12 +1,39 @@ -# Badge 概述 +# Badge 徽标 -### 简介 +## 组件简介 -提供多种多样、类型样式极其丰富的徽标组件，适用于各种场景。特性包括但不限于携带数字的常规徽标、红点徽标、自定义Ribbon等等。 +Badge 是一组用于在 UI 元素上展示状态标记、消息计数和装饰性标签的徽标组件。AtomUI 提供了三种不同类型的徽标子组件，分别适用于不同的业务场景，能够满足从简单的未读消息提示到复杂的状态展示等多种需求。 -![AtomUI Badge组件](./images/overflow-counter.png) +![AtomUI Badge 组件](./images/overflow-counter.png) -### 主要功能 -* 数字角标，设定数字溢出，设定数字角标的位置偏移量，支持动态改变数字 -* 红点状样式 -* 丝带样式 \ No newline at end of file +## 适用场景 + +- 展示未读消息数量或待处理事项的计数提醒 +- 在图标或按钮上添加红点标记，提示用户关注 +- 通过不同颜色和状态的圆点标识业务流程中的各类状态 +- 使用缎带样式的标签为卡片或内容区域添加醒目的装饰性标记 + +## 子组件概览 + +Badge 组件家族包含以下三个子组件： + +### CountBadge - 计数徽标 + +用于展示数字角标，支持溢出计数显示、大小控制、自定义颜色等功能。可作为装饰附加在其他控件上，也可独立使用直接展示数字。 + +### DotBadge - 圆点徽标 + +用于展示状态圆点或红点标记。内置五种业务状态（Success、Error、Default、Processing、Warning），同时支持丰富的预设颜色和自定义色值。可附加在控件上作为提示标记，也可独立使用配合文本展示状态信息。 + +### RibbonBadge - 缎带徽标 + +用于在内容区域的角落展示缎带样式的标签文本，视觉效果醒目，适合用于标注推荐、活动、新品等营销或分类信息。支持自定义颜色和位置控制。 + +## 核心特性 + +- 三种子组件覆盖计数、状态、装饰等主流徽标场景 +- 支持通过 `DecoratedTarget` 或子元素包裹目标控件 +- 提供 `Offset` 属性精确控制徽标位置偏移 +- 内置丰富的预设颜色，同时支持自定义色值 +- 支持 `BadgeIsVisible` 属性动态控制徽标的显示与隐藏 +- CountBadge 和 DotBadge 支持动画效果（`IsMotionEnabled`） diff --git a/src/zh_CN/reference/controls/badge/red-dot.md b/src/zh_CN/reference/controls/badge/red-dot.md deleted file mode 100644 index 5a5512cd..00000000 --- a/src/zh_CN/reference/controls/badge/red-dot.md +++ /dev/null @@ -1,17 +0,0 @@ -# 红点 - -最让强迫症讨厌且没有具体的数字的红点徽标。 - -![AtomUI Badge](./images/red-badge.png) - -```xaml - - - - - - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/badge/ribbon.md b/src/zh_CN/reference/controls/badge/ribbon.md deleted file mode 100644 index 062113ae..00000000 --- a/src/zh_CN/reference/controls/badge/ribbon.md +++ /dev/null @@ -1,142 +0,0 @@ -# 缎带 - -`RibbonBadge` 包裹子元素（强烈建议使用AtomUI组件），可以制作出非常精美的缎带样徽标。 - -![AtomUI Badge](./images/ribbon.png) - -```xaml - - - - - - Pushes open the window - - - and raises the spyglass. - - - - - - - - - Pushes open the window - - - and raises the spyglass. - - - - - - - - - Pushes open the window - - - and raises the spyglass. - - - - - - - - - Pushes open the window - - - and raises the spyglass. - - - - - - - - - Pushes open the window - - - and raises the spyglass. - - - - - - - - - Pushes open the window - - - and raises the spyglass. - - - - - - - - - Pushes open the window - - - and raises the spyglass. - - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/badge/standalone.md b/src/zh_CN/reference/controls/badge/standalone.md deleted file mode 100644 index 4a30637d..00000000 --- a/src/zh_CN/reference/controls/badge/standalone.md +++ /dev/null @@ -1,17 +0,0 @@ -# Standalone 模式 - -`Badge` 组件不包裹任何child子元素，直接使用即为独立使用模式（有别于其他案例中包裹一个child级的 `Border` 元素）。这种情况下，将会直接显示数字角标本身。 - -![AtomUI Badge](./images/standalone.webp) - -```xaml -// 下面代码中Binding的属性，请自行修改为实际项目中的属性名称 - - - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/badge/status.md b/src/zh_CN/reference/controls/badge/status.md deleted file mode 100644 index e0d4c16f..00000000 --- a/src/zh_CN/reference/controls/badge/status.md +++ /dev/null @@ -1,64 +0,0 @@ -# 状态 - -### 圆点状态 - -用于表示状态的小圆点，使用 `Status` 属性用来表达互联网业务中常见的状态，也是一种Standalone用法（即不包括子元素）。 - -![AtomUI Badge](./images/status.png) - -```xaml - - - - - - - - - - - - - - - - -``` - -### 预设圆点 - -我们内置了大量预设的、不同颜色的徽标样式用作不同场景使用。如果预设值不能满足你的需求，可以设置为具体的色值。 - -![AtomUI Badge](./images/presets.png) - -```xaml - - - - - - - - - - - - - - - - - - - - - - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/box-panel/api.md b/src/zh_CN/reference/controls/box-panel/api.md new file mode 100644 index 00000000..833d06d3 --- /dev/null +++ b/src/zh_CN/reference/controls/box-panel/api.md @@ -0,0 +1,92 @@ +# API 参考 + +### 类定义 + +``` +BoxPanel : Panel +``` + +`BoxPanel` 继承自 Avalonia 的 `Panel` 类，提供基于 Flexbox 模型的弹性布局能力。 + +--- + +### 属性 + +| 属性 | 类型 | 默认值 | 说明 | +| --- | --- | --- | --- | +| `Orientation` | `Orientation` | `Vertical` | 子元素的排列方向。`Vertical` 为垂直排列，`Horizontal` 为水平排列。 | +| `Spacing` | `double` | `0.0` | 子元素之间的统一间距。当设置了 `ColumnSpacing` 或 `RowSpacing` 时，对应方向的间距将被覆盖。 | +| `JustifyContent` | `JustifyContent` | `FlexStart` | 子元素在主轴方向上的分布方式。可选值：`FlexStart`、`FlexEnd`、`Center`、`SpaceBetween`、`SpaceAround`、`SpaceEvenly`。 | +| `AlignItems` | `AlignItems` | `Stretch` | 子元素在交叉轴方向上的默认对齐方式。可选值：`Stretch`、`FlexStart`、`FlexEnd`、`Center`。 | +| `AlignContent` | `AlignContent` | `FlexStart` | 多行内容在交叉轴方向上的分布方式（仅在 `Wrap` 启用时生效）。可选值：`FlexStart`、`FlexEnd`、`Center`、`SpaceBetween`、`SpaceAround`、`Stretch`。 | +| `Wrap` | `FlexWrap` | `NoWrap` | 子元素是否在空间不足时自动换行。可选值：`NoWrap`、`Wrap`、`WrapReverse`。 | +| `ColumnSpacing` | `double` | `NaN` | 列间距（水平方向的元素间距）。设置后覆盖 `Spacing` 在水平方向的值。`NaN` 表示使用 `Spacing` 的值。 | +| `RowSpacing` | `double` | `NaN` | 行间距（垂直方向的元素间距）。设置后覆盖 `Spacing` 在垂直方向的值。`NaN` 表示使用 `Spacing` 的值。 | + +--- + +### 附加属性 + +以下属性通过 `atom:BoxPanel.PropertyName` 的方式设置在子元素上。 + +| 附加属性 | 类型 | 默认值 | 说明 | +| --- | --- | --- | --- | +| `Flex` | `int` | `0` | 子元素的弹性比例。值为 `0` 时元素不参与弹性分配，使用自身尺寸；值大于 `0` 时按比例分配剩余空间。 | +| `Order` | `int` | `0` | 子元素的显示顺序。数值越小排列越靠前，默认按 XAML 中的声明顺序排列。 | +| `AlignSelf` | `AlignItems?` | `null` | 覆盖父容器 `AlignItems` 的对齐方式，为单个子元素指定独立的交叉轴对齐。值为 `null` 时使用父容器的 `AlignItems` 设置。 | + +--- + +### 用法示例 + +```xaml + + + + + + + + + + + + +``` + +--- + +### 便捷子类 + +| 类名 | 说明 | +| --- | --- | +| `HBoxPanel` | 预设 `Orientation="Horizontal"` 的 BoxPanel 便捷用法 | +| `VBoxPanel` | 预设 `Orientation="Vertical"` 的 BoxPanel 便捷用法 | + +--- + +### 实例方法 + +| 方法 | 说明 | +| --- | --- | +| `AddSpacing(double size)` | 向面板中动态添加一个指定大小的固定间距元素 | +| `AddFlex(int flex)` | 向面板中动态添加一个指定弹性比例的占位元素 | + +--- + +### 静态方法 + +| 方法 | 说明 | +| --- | --- | +| `SetFlex(Control control, int value)` | 设置指定子元素的 Flex 附加属性值 | +| `GetFlex(Control control)` | 获取指定子元素的 Flex 附加属性值 | +| `SetOrder(Control control, int value)` | 设置指定子元素的 Order 附加属性值 | +| `GetOrder(Control control)` | 获取指定子元素的 Order 附加属性值 | +| `SetAlignSelf(Control control, AlignItems? value)` | 设置指定子元素的 AlignSelf 附加属性值 | +| `GetAlignSelf(Control control)` | 获取指定子元素的 AlignSelf 附加属性值 | diff --git a/src/zh_CN/reference/controls/box-panel/getting-started.md b/src/zh_CN/reference/controls/box-panel/getting-started.md index b7926993..e20fe7d3 100644 --- a/src/zh_CN/reference/controls/box-panel/getting-started.md +++ b/src/zh_CN/reference/controls/box-panel/getting-started.md @@ -1,13 +1,15 @@ -# 快速入门 +# 快速入门 ### 基础配置条件 -* Nuget安装Avalonia -* Nuget安装AtomUI +* Nuget 安装 Avalonia +* Nuget 安装 AtomUI + +--- ### 基础用法 -这个示例中通过顶部按钮改变 `BoxPanel` 的方向，本质上是通过 `Orientation` 属性来改变 `BoxPanel` 的方向，具体修改逻辑位于文档尾部code-behind文件中。 +最基本的用法是将子元素放入 `BoxPanel` 中，通过 `Orientation` 属性控制排列方向。以下示例通过顶部单选按钮动态切换 `BoxPanel` 的方向。 ![AtomUI BoxPanel组件](./images/basic.webp) @@ -37,9 +39,11 @@ ``` -### Flex布局 +--- + +### Flex 弹性布局 -这个示例向开发者演示如何使用 `Flex` 布局，本质上是通过设定 `atom:BoxPanel.Flex` 属性的值来实现。 +通过设置附加属性 `atom:BoxPanel.Flex` 的值，可以让子元素按比例分配可用空间。例如，两个 `Flex="1"` 和一个 `Flex="2"` 的子元素将按 1:1:2 的比例分配空间。 ![AtomUI BoxPanel组件](./images/flex.webp) @@ -78,9 +82,11 @@ ``` -### Child alignment +--- -使用标准的 `VerticalAlignment` 属性控制子元素在交叉轴上的位置，支持Stretch、Top、Center、Bottom对齐方式；同时也可以混合布局，结合固定尺寸与 `Flex` 混合使用。 +### 子元素对齐 + +子元素可以通过 `VerticalAlignment` 属性控制在交叉轴上的位置，支持 Stretch、Top、Center、Bottom 四种对齐方式。同时也可以将固定尺寸元素与 Flex 弹性元素混合使用。 ![AtomUI BoxPanel组件](./images/child-alignment.png) @@ -116,9 +122,11 @@ ``` -### 调整距离 +--- + +### 间距调节 -这个示例中使用 `Slider` 控件控制 `BoxPanel` 的 `Spacing` 属性，本质上是使用 `ValueChanged="HandleSpaceSliderValueChanged"` 事件处理程序实现实时调整元素间距。 +通过 `Spacing` 属性可以统一设置子元素之间的间距。以下示例使用 `Slider` 控件实时调整间距大小，并演示了动态添加固定间距和修改 Flex 值的操作。 ![AtomUI BoxPanel组件](./images/space-flex.webp) @@ -169,7 +177,11 @@ ``` -这个示例中通过触发 `HandleAddFlexButtonClicked` 事件动态向 `BoxPanel` 中添加新的弹性占位元素、`Flex` 占位符功能，除了一些业务场景中有类似需求，同时这种占位符可以做为一种辅助调试UI的手段。 +--- + +### 动态 Flex 占位 + +在运行时可以通过 `AddFlex` 方法动态向 `BoxPanel` 添加弹性占位元素。这在需要动态调整布局或辅助调试 UI 时非常有用。 ![AtomUI BoxPanel组件](./images/ratio-child.webp) @@ -202,9 +214,11 @@ ``` +--- + ### 公用文件 -code-behind文件： +code-behind 文件： ```csharp using AtomUI.Controls; using AtomUIGallery.ShowCases.ViewModels; @@ -220,17 +234,17 @@ public partial class BoxPanelShowCase : ReactiveUserControl { this.WhenActivated(disposables => { }); InitializeComponent(); - + Vertical.IsCheckedChanged += HandleModeChecked; Horizontal.IsCheckedChanged += HandleModeChecked; - + Vertical1.IsCheckedChanged += HandleMode1Checked; Horizontal1.IsCheckedChanged += HandleMode1Checked; } - - + + private void HandleMode1Checked(object? sender, RoutedEventArgs e) { if (sender is RadioButton button) @@ -245,7 +259,7 @@ public partial class BoxPanelShowCase : ReactiveUserControl } } } - + private void HandleModeChecked(object? sender, RoutedEventArgs e) { if (sender is RadioButton button) @@ -301,16 +315,16 @@ public partial class BoxPanelShowCase : ReactiveUserControl } ``` -view-model文件： +view-model 文件： ```csharp using ReactiveUI; public class BoxPanelViewModel : ReactiveObject, IRoutableViewModel { public const string ID = "BoxPanelShowCase"; - + public IScreen HostScreen { get; } - + public string UrlPathSegment { get; } = ID; public BoxPanelViewModel(IScreen screen) @@ -318,4 +332,4 @@ public class BoxPanelViewModel : ReactiveObject, IRoutableViewModel HostScreen = screen; } } -``` \ No newline at end of file +``` diff --git a/src/zh_CN/reference/controls/box-panel/overview.md b/src/zh_CN/reference/controls/box-panel/overview.md index f2b44eaf..9c81327a 100644 --- a/src/zh_CN/reference/controls/box-panel/overview.md +++ b/src/zh_CN/reference/controls/box-panel/overview.md @@ -1,11 +1,27 @@ -# BoxPanel 概述 +# BoxPanel 概述 ### 简介 -`AtomUI` 尝试为开发者实现一种通用的Panel布局，如果你的应用比较简单，可以尝试一下快速起步。 +`BoxPanel` 是 AtomUI 提供的一种通用弹性布局面板，其设计灵感来源于 CSS Flexbox 布局模型。通过 `BoxPanel`，开发者可以轻松实现灵活的水平或垂直方向布局，支持子元素按比例分配空间、对齐控制以及间距调节等常见布局需求。 ![AtomUI BoxPanel组件](./images/basic.webp) +### 何时使用 + +- 需要在水平或垂直方向上排列子元素时 +- 需要子元素按比例弹性分配可用空间时 +- 需要精确控制子元素在主轴和交叉轴上的对齐方式时 +- 需要动态调整元素间距或换行排列时 +- 替代多层嵌套 `StackPanel` 实现复杂布局时 + ### 主要功能 -* 支持横竖两个方向 -* 支持flex布局 \ No newline at end of file + +* **双方向布局** — 通过 `Orientation` 属性支持水平（Horizontal）和垂直（Vertical）两种排列方向 +* **Flex 弹性布局** — 通过附加属性 `BoxPanel.Flex` 为子元素分配弹性比例，实现空间按比例分配 +* **主轴对齐** — 通过 `JustifyContent` 属性控制子元素在主轴方向上的分布方式（FlexStart、FlexEnd、Center、SpaceBetween、SpaceAround、SpaceEvenly） +* **交叉轴对齐** — 通过 `AlignItems` 属性控制子元素在交叉轴方向上的对齐方式（Stretch、FlexStart、FlexEnd、Center） +* **单独对齐** — 通过附加属性 `BoxPanel.AlignSelf` 为单个子元素覆盖默认的交叉轴对齐方式 +* **间距控制** — 通过 `Spacing`、`ColumnSpacing`、`RowSpacing` 属性精细控制元素之间的间距 +* **换行支持** — 通过 `Wrap` 属性控制子元素是否在空间不足时自动换行 +* **排序控制** — 通过附加属性 `BoxPanel.Order` 调整子元素的显示顺序而不改变 XAML 中的结构 +* **动态占位** — 支持在运行时动态添加或移除弹性占位元素 diff --git a/src/zh_CN/reference/controls/breadcrumb/api.md b/src/zh_CN/reference/controls/breadcrumb/api.md new file mode 100644 index 00000000..ca0c927e --- /dev/null +++ b/src/zh_CN/reference/controls/breadcrumb/api.md @@ -0,0 +1,53 @@ +# API 参考 + +## Breadcrumb + +`Breadcrumb` 继承自 `ItemsControl`，是面包屑导航的容器控件。 + +### 属性 + +| 属性名 | 类型 | 默认值 | 说明 | +|--------|------|--------|------| +| `Separator` | `object?` | `"/"` | 全局分隔符内容。设定后，所有子项的分隔符都将使用该值。支持字符串或控件对象。 | +| `SeparatorTemplate` | `IDataTemplate?` | `null` | 分隔符的数据模板。当 `Separator` 为非控件对象时，可通过此模板自定义分隔符的渲染方式。 | +| `IsMotionEnabled` | `bool` | `true` | 是否启用过渡动画效果。 | + +### 事件 + +| 事件名 | 类型 | 说明 | +|--------|------|------| +| `NavigateRequest` | `EventHandler` | 当用户点击面包屑路径节点时触发。事件参数中包含被点击的 `BreadcrumbItem` 实例，可通过其 `NavigateContext` 属性获取导航上下文数据。 | + +## BreadcrumbItem + +`BreadcrumbItem` 是面包屑导航中的单个路径节点控件。 + +### 属性 + +| 属性名 | 类型 | 默认值 | 说明 | +|--------|------|--------|------| +| `Icon` | `PathIcon?` | `null` | 路径节点的图标，使用 `{atom:IconProvider Kind=...}` 标记扩展设定。 | +| `Separator` | `object?` | `null` | 单项分隔符。设定后仅覆盖当前节点的分隔符，不影响其他节点。 | +| `NavigateContext` | `object?` | `null` | 导航上下文数据。用于在路径节点上携带自定义参数，点击时通过 `NavigateRequest` 事件传递给开发者。 | + +## BreadcrumbItemData + +`BreadcrumbItemData` 用于在 MVVM 模式下通过 `ItemsSource` 绑定动态生成面包屑导航条。 + +### 属性 + +| 属性名 | 类型 | 默认值 | 说明 | +|--------|------|--------|------| +| `Content` | `string` | `""` | 路径节点的显示文本。 | +| `Separator` | `object?` | `null` | 单项分隔符。 | +| `NavigateContext` | `object?` | `null` | 导航上下文数据。 | + +## BreadcrumbNavigateEventArgs + +导航事件的参数类型。 + +### 属性 + +| 属性名 | 类型 | 说明 | +|--------|------|------| +| `BreadcrumbItem` | `BreadcrumbItem` | 被点击的面包屑路径节点实例。可通过该实例访问 `NavigateContext` 等属性。 | diff --git a/src/zh_CN/reference/controls/breadcrumb/getting-started.md b/src/zh_CN/reference/controls/breadcrumb/getting-started.md index bc6d56cb..cad315ca 100644 --- a/src/zh_CN/reference/controls/breadcrumb/getting-started.md +++ b/src/zh_CN/reference/controls/breadcrumb/getting-started.md @@ -1,13 +1,13 @@ -# 快速入门 +# 快速入门 ### 基础配置条件 * Nuget安装Avalonia * Nuget安装AtomUI -### 基础用法 +### 基本用法 -最基础的使用方法，一眼懂，唯一需要留意的是 `NavigateContext` 属性，这个属性的作用是为了让路径上携带开发者自定义的一些用于扩展的数据。 +最基础的面包屑导航用法。通过声明多个 `atom:BreadcrumbItem` 构建路径层级。`NavigateContext` 属性用于在路径节点上携带开发者自定义的扩展数据，供导航事件使用。 ![AtomUI Breadcrumb组件](./images/basic.png) @@ -22,9 +22,9 @@ ``` -### 图标 +### 带图标的面包屑 -有时需要在路径中显示一些图标，此时便可以设定 `atom:BreadcrumbItem` 控件的 `Icon` 属性来设定需要的图标（图标来源于 `AtomUI` 的图标库）。 +通过设定 `atom:BreadcrumbItem` 的 `Icon` 属性可在路径节点中显示图标。图标来源于 AtomUI 的内置图标库，使用 `IconProvider` 标记扩展指定图标类型。 ![AtomUI Breadcrumb组件](./images/with-icon.png) @@ -38,24 +38,9 @@ ``` -### 路径参数 +### 自定义分隔符（全局） -在基础示例中曾经讲述过了，不再赘述。 - -![AtomUI Breadcrumb组件](./images/with-param.png) - -```xaml - - - Users - Param - - -``` - -### 分隔符 - -可以通过给 `atom:Breadcrumb` 组件的 `Separator` 属性设定一个值来改变分隔符，此时整个面包屑导航条中的分割符都将会被修改。 +通过给 `atom:Breadcrumb` 组件的 `Separator` 属性设定一个值，可以统一修改整个面包屑导航条中的分隔符样式。 ![AtomUI Breadcrumb组件](./images/configure-separator.png) @@ -70,7 +55,9 @@ ``` -有一些业务场景中仅仅需要修改面包屑导航条中某一项的分隔符，此时可以通过给 `atom:BreadcrumbItem` 控件的 `Separator` 属性设定一个值来改变分隔符。 +### 自定义分隔符（单项） + +在某些场景下仅需修改面包屑导航条中某一项的分隔符，此时可以通过给对应 `atom:BreadcrumbItem` 的 `Separator` 属性设定值来单独修改。 ![AtomUI Breadcrumb组件](./images/configuire-single-separator.png) @@ -85,12 +72,40 @@ ``` -### 模板生成 +### 路径参数与导航事件 -可以通过 `ItemTemplate` 属性来快速生成面包屑导航条。通过使用mvvm方式动态修改数据来动态修改面包屑导航条，这种使用方式应该是最常见的使用方式了。 +通过 `NavigateContext` 属性可以在路径节点上携带任意自定义参数。当用户点击路径节点时，`NavigateRequest` 事件会被触发，开发者可以在事件处理函数中获取被点击节点的 `NavigateContext` 值来执行相应的导航逻辑。 + +![AtomUI Breadcrumb组件](./images/with-param.png) + +```xaml + + + Users + Param + + +``` + +事件处理代码： + +```csharp +private void HandleNavigateRequest(object? sender, BreadcrumbNavigateEventArgs eventArgs) +{ + _messageManager?.Show(new Message( + $"Navigate context: {eventArgs.BreadcrumbItem.NavigateContext}" + )); +} +``` + +### 通过 ItemTemplate 动态生成 + +通过 `ItemTemplate` 属性配合 `ItemsSource` 绑定，可以以 MVVM 方式动态生成面包屑导航条。这是最常用的使用方式，便于通过数据驱动来动态修改导航路径。 ![AtomUI Breadcrumb组件](./images/generate.png) +XAML 文件： + ```xaml ``` -code-behind文件： +Code-behind 文件： + ```csharp using AtomUI.Controls; using AtomUI.Controls.Primitives; @@ -148,7 +164,7 @@ public partial class BreadcrumbShowCase : ReactiveUserControl _breadcrumbItems = []; - + public List BreadcrumbItems { get => _breadcrumbItems; set => this.RaiseAndSetIfChanged(ref _breadcrumbItems, value); } - + public BreadcrumbViewModel(IScreen screen) { HostScreen = screen; } } -``` \ No newline at end of file +``` diff --git a/src/zh_CN/reference/controls/breadcrumb/overview.md b/src/zh_CN/reference/controls/breadcrumb/overview.md index 81974a7b..9225f271 100644 --- a/src/zh_CN/reference/controls/breadcrumb/overview.md +++ b/src/zh_CN/reference/controls/breadcrumb/overview.md @@ -1,12 +1,23 @@ -# Breadcrumb 概述 +# Breadcrumb 面包屑 ### 简介 -面包屑导航条是现代应用设计中非常常见的一种组件，在一些需要用于向用户明确表示当前位置的场景下非常重要。 +面包屑导航（Breadcrumb）是一种辅助导航组件，用于显示当前页面在系统层级结构中的位置，并能向上回溯。它是现代应用设计中非常常见的导航模式，帮助用户理解当前所在位置以及页面之间的层级关系。 ![AtomUI Breadcrumb组件](./images/basic.png) +### 何时使用 + +- 当系统拥有两级以上的层级结构时。 +- 当需要告知用户当前所处位置时。 +- 当需要提供向上导航的能力时。 + ### 主要功能 -* 支持图标 -* 支持自定义分隔符，支持设定单个分隔符 -* 支持路径参数 \ No newline at end of file + +- **基础导航**：通过 `BreadcrumbItem` 声明路径节点，清晰展示层级关系。 +- **图标支持**：路径节点可配合 AtomUI 图标库设置图标，增强视觉识别度。 +- **自定义分隔符**：支持全局设定分隔符，也支持对单个路径节点设定独立的分隔符。 +- **导航上下文**：通过 `NavigateContext` 属性在路径节点上携带自定义数据，方便导航事件处理。 +- **事件驱动**：通过 `NavigateRequest` 事件响应用户的导航操作，获取点击的路径节点及其上下文。 +- **模板绑定**：支持通过 `ItemTemplate` 和 `ItemsSource` 以 MVVM 方式动态生成面包屑导航条。 +- **过渡动画**：内置动画效果，可通过 `IsMotionEnabled` 属性控制开关。 diff --git a/src/zh_CN/reference/controls/button-spinner/api.md b/src/zh_CN/reference/controls/button-spinner/api.md new file mode 100644 index 00000000..e954ec7a --- /dev/null +++ b/src/zh_CN/reference/controls/button-spinner/api.md @@ -0,0 +1,74 @@ +# ButtonSpinner API 参考 + +## 属性 + +| 属性 | 说明 | 类型 | 默认值 | +|---|---|---|---| +| `AllowSpin` | 是否允许通过 Spinner 按钮触发 Spin 事件 | `bool` | `true` | +| `ShowButtonSpinner` | 是否显示 Spinner 按钮 | `bool` | `true` | +| `ButtonSpinnerLocation` | Spinner 按钮的显示位置 | `ButtonSpinnerLocation` | `Right` | +| `LeftAddOn` | 组件左侧附加内容 | `object?` | `null` | +| `LeftAddOnTemplate` | 左侧附加内容的数据模板 | `IDataTemplate?` | `null` | +| `RightAddOn` | 组件右侧附加内容 | `object?` | `null` | +| `RightAddOnTemplate` | 右侧附加内容的数据模板 | `IDataTemplate?` | `null` | +| `InnerLeftContent` | 组件内部左侧前缀内容 | `object?` | `null` | +| `InnerLeftContentTemplate` | 内部左侧前缀内容的数据模板 | `IDataTemplate?` | `null` | +| `InnerRightContent` | 组件内部右侧后缀内容 | `object?` | `null` | +| `InnerRightContentTemplate` | 内部右侧后缀内容的数据模板 | `IDataTemplate?` | `null` | +| `SizeType` | 组件尺寸 | `SizeType` | `Middle` | +| `StyleVariant` | 样式变体 | `InputControlStyleVariant` | `Outline` | +| `Status` | 状态颜色 | `InputControlStatus` | `Default` | +| `IsButtonSpinnerFloatable` | Spinner 按钮是否可浮动 | `bool` | `false` | +| `IsMotionEnabled` | 是否启用过渡动画 | `bool` | `true` | +| `IsEnabled` | 是否启用（继承自基类） | `bool` | `true` | +| `Content` | 组件内容（继承自基类） | `object?` | `null` | + +## 事件 + +| 事件 | 说明 | 参数类型 | +|---|---|---| +| `Spin` | 用户点击递增/递减按钮时触发 | `SpinEventArgs` | + +## 枚举类型 + +### ButtonSpinnerLocation + +| 值 | 说明 | +|---|---| +| `Left` | Spinner 按钮显示在组件左侧 | +| `Right` | Spinner 按钮显示在组件右侧（默认） | + +### SizeType + +| 值 | 说明 | +|---|---| +| `Large` | 大尺寸 | +| `Middle` | 中等尺寸（默认） | +| `Small` | 小尺寸 | + +### InputControlStyleVariant + +| 值 | 说明 | +|---|---| +| `Outline` | 带边框样式（默认） | +| `Filled` | 填充背景样式 | +| `Borderless` | 无边框样式 | + +### InputControlStatus + +| 值 | 说明 | +|---|---| +| `Default` | 默认状态 | +| `Error` | 错误状态，红色系 | +| `Warning` | 警告状态，橙色系 | + +### SpinDirection + +| 值 | 说明 | +|---|---| +| `Increase` | 递增方向（点击上箭头） | +| `Decrease` | 递减方向（点击下箭头） | + +## 相关组件 + +- [Button](../button/overview.md) -- 基础按钮组件 diff --git a/src/zh_CN/reference/controls/button-spinner/getting-started.md b/src/zh_CN/reference/controls/button-spinner/getting-started.md index 97da470c..04548139 100644 --- a/src/zh_CN/reference/controls/button-spinner/getting-started.md +++ b/src/zh_CN/reference/controls/button-spinner/getting-started.md @@ -1,4 +1,4 @@ -# 快速入门 +# 快速入门 ### 基础配置条件 @@ -7,7 +7,7 @@ ### 基础用法 -`ButtonSpinner` 继承了 `Avalonia.Controls.ButtonSpinner` 类。 +`ButtonSpinner` 继承自 `Spinner` 类，通过 `Spin` 事件处理递增/递减逻辑。 下面示例中点击上下箭头时，会获取当前诗句在整体诗歌中的偏移量，然后将偏移量根据不同操作做加法或减法，再根据新的偏移量值获取响应的诗句并展示到UI中。 @@ -24,7 +24,7 @@ ### 大小尺寸 -通过 `SizeType` 属性设置组件大小，可选值有`Large`、`Middle`、`Small`。 +通过 `SizeType` 属性设置组件大小，可选值有 `Large`、`Middle`、`Small`。 ![AtomUI ButtonSpinner组件](./images/size.webp) @@ -53,7 +53,7 @@ ### 多种变体 -变体的作用在于更好的融于不同的UI设计风格，是视觉方向的属性。其属性名为 `StyleVariant`，可选值有Outline、Filled、Borderless。 +变体的作用在于更好地融入不同的 UI 设计风格，是视觉方向的属性。通过 `StyleVariant` 属性设置，可选值有 `Outline`、`Filled`、`Borderless`。 ![AtomUI ButtonSpinner组件](./images/variants.webp) @@ -80,9 +80,9 @@ ``` -### 禁用 +### 禁用状态 -老规矩，`IsEnabled` 设定为True直接一把禁用。 +将 `IsEnabled` 设为 `False` 即可禁用组件，禁用后用户无法与 Spinner 按钮交互。 ![AtomUI ButtonSpinner组件](./images/disabled.png) @@ -109,11 +109,14 @@ ``` -### Pre/Post tab +### LeftAddOn / RightAddOn 附加内容 -有时候需要在输入框的左侧或者右侧添加一些内容，这时就可以使用 `LeftAddOn` 和 `RightAddOn` 属性。 -* `LeftAddOn` 表示输入框左侧位置的Pre Tab，其值可以是一个图标，也可以是字符串。 -* `RightAddOn` 表示输入框右侧位置的Pre Tab，其值可以是一个图标，也可以是字符串。 +有时候需要在组件的左侧或者右侧添加附加内容，可以使用 `LeftAddOn` 和 `RightAddOn` 属性。 + +* `LeftAddOn` 表示组件左侧的附加区域，其值可以是一个图标，也可以是字符串。 +* `RightAddOn` 表示组件右侧的附加区域，其值可以是一个图标，也可以是字符串。 + +附加内容位于组件外部，与主体区域视觉上有明显的分隔。 ![AtomUI ButtonSpinner组件](./images/pre-post-tab.webp) @@ -153,14 +156,14 @@ ``` -### 前缀/后缀 +### InnerLeftContent / InnerRightContent 前缀与后缀 -前后缀和前面刚展示过的Pre/Post Tab略不太一样， +前后缀与上面的 LeftAddOn / RightAddOn 不同，它们位于组件内部，是输入区域的一部分。 -* `InnerLeftContent` 则作为内部内容，位于输入框内部的左侧，是输入框的一部分。 -* `InnerRightContent` 则作为内部内容，位于输入框内部的右侧，是输入框的一部分。 +* `InnerLeftContent` 位于组件内部的左侧，作为内部前缀。 +* `InnerRightContent` 位于组件内部的右侧，作为内部后缀。 -`InnerRightContent` 与 `RightAddOn` 区别是：前者更趋向于为输入框内部的补充，而后者更趋向于为输入框外部的装饰。 +两者的区别在于：`InnerLeftContent` / `InnerRightContent` 更趋向于输入框内部的补充信息，而 `LeftAddOn` / `RightAddOn` 更趋向于输入框外部的装饰。 ![AtomUI ButtonSpinner组件](./images/prefix-suffix.webp) @@ -202,9 +205,9 @@ ``` -### 状态色 +### 状态颜色 -`Status` 属性可以一键设定组件的状态色，用于向用户传达一种明确的意图。可选值有Default、Error、Warning。 +`Status` 属性可以设定组件的状态颜色，用于向用户传达明确的意图。可选值有 `Default`、`Error`、`Warning`。 ![AtomUI ButtonSpinner组件](./images/status.png) @@ -303,7 +306,9 @@ ``` -### 公共文件 +### Spin 事件处理 + +`ButtonSpinner` 通过 `Spin` 事件响应用户的递增/递减操作。以下是一个完整的事件处理示例。 code-behind文件： ```csharp @@ -367,7 +372,7 @@ public class ButtonSpinnerViewModel : ReactiveObject, IRoutableViewModel { HostScreen = screen; } - + public void HandleSpin(object? sender, SpinEventArgs e) { if (sender is ButtonSpinner buttonSpinner) @@ -406,4 +411,4 @@ public class ButtonSpinnerViewModel : ReactiveObject, IRoutableViewModel "低头思故乡" }; } -``` \ No newline at end of file +``` diff --git a/src/zh_CN/reference/controls/button-spinner/overview.md b/src/zh_CN/reference/controls/button-spinner/overview.md index 768ff1b7..7ef6772e 100644 --- a/src/zh_CN/reference/controls/button-spinner/overview.md +++ b/src/zh_CN/reference/controls/button-spinner/overview.md @@ -1,12 +1,25 @@ -# ButtonSpinner 概述 +# ButtonSpinner 概述 ### 简介 -`AtomUI` 提供了多种风格的按钮，用户可以按形状、尺寸、颜色、图标和文字等不同维度进行组合，生成最终满足自己需求的按钮。 +`ButtonSpinner` 是 AtomUI 提供的带递增/递减箭头按钮的微调器组件，继承自 `Spinner` 基类。用户可以通过点击上下箭头按钮来触发 Spin 事件，常用于数值调节、列表项切换等需要步进操作的场景。 ![AtomUI ButtonSpinner组件](./images/size.webp) +### 何时使用 + +- 需要在输入框旁提供递增/递减操作时 +- 需要在有限的选项列表中逐项切换时 +- 需要对数值进行步进调节时 + ### 主要功能 -* 支持多种尺寸、多种类型以及状态属性 -* 支持pre/post与前后缀 -* 支持disabled \ No newline at end of file + +- 支持多种尺寸（Large / Middle / Small） +- 支持多种样式变体（Outline / Filled / Borderless） +- 支持 LeftAddOn / RightAddOn 前后附加内容 +- 支持 InnerLeftContent / InnerRightContent 内部前后缀 +- 支持状态颜色（Default / Error / Warning） +- 支持禁用状态 +- 支持自定义 Spinner 按钮位置（左侧或右侧） +- 支持控制 Spinner 按钮的显示与隐藏 +- 支持过渡动画 diff --git a/src/zh_CN/reference/controls/button/api.md b/src/zh_CN/reference/controls/button/api.md new file mode 100644 index 00000000..3011944d --- /dev/null +++ b/src/zh_CN/reference/controls/button/api.md @@ -0,0 +1,75 @@ +# Button API 参考 + +## 属性 + +| 属性 | 说明 | 类型 | 默认值 | +|---|---|---|---| +| `ButtonType` | 按钮类型 | `ButtonType` | `Default` | +| `Shape` | 按钮形状 | `ButtonShape` | `Default` | +| `SizeType` | 按钮尺寸 | `SizeType` | `Middle` | +| `Icon` | 按钮图标 | `PathIcon?` | `null` | +| `IsDanger` | 是否为危险按钮（红色系） | `bool` | `false` | +| `IsGhost` | 是否为幽灵按钮（透明背景） | `bool` | `false` | +| `IsLoading` | 是否处于加载状态 | `bool` | `false` | +| `IsEnabled` | 是否启用（继承自基类） | `bool` | `true` | +| `IsMotionEnabled` | 是否启用过渡动画 | `bool` | `true` | +| `IsWaveSpiritEnabled` | 是否启用点击波纹效果 | `bool` | `true` | +| `Command` | 绑定的命令（继承自基类） | `ICommand?` | `null` | +| `CommandParameter` | 命令参数（继承自基类） | `object?` | `null` | +| `HotKey` | 快捷键（继承自基类） | `KeyGesture?` | `null` | +| `Content` | 按钮内容/文本（继承自基类） | `object?` | `null` | + +## 事件 + +| 事件 | 说明 | 参数类型 | +|---|---|---| +| `Click` | 按钮点击时触发 | `RoutedEventArgs` | + +## 枚举类型 + +### ButtonType + +| 值 | 说明 | +|---|---| +| `Default` | 默认按钮，带边框和白色背景 | +| `Primary` | 主要按钮，实心填充，用于强调主操作 | +| `Dashed` | 虚线边框按钮，常用于添加操作 | +| `Text` | 文本按钮，无边框无背景 | +| `Link` | 链接按钮，呈现为超链接样式 | + +### ButtonShape + +| 值 | 说明 | +|---|---| +| `Default` | 默认圆角矩形 | +| `Circle` | 圆形，适合纯图标按钮 | +| `Round` | 胶囊形（大圆角） | + +### SizeType + +| 值 | 说明 | +|---|---| +| `Large` | 大尺寸 | +| `Middle` | 中等尺寸（默认） | +| `Small` | 小尺寸 | + +## 伪类（Pseudo Classes） + +Button 支持以下伪类用于自定义样式： + +| 伪类 | 说明 | +|---|---| +| `:primary` | ButtonType 为 Primary 时 | +| `:default` | ButtonType 为 Default 时 | +| `:dashed` | ButtonType 为 Dashed 时 | +| `:text` | ButtonType 为 Text 时 | +| `:link` | ButtonType 为 Link 时 | +| `:danger` | IsDanger 为 true 时 | +| `:loading` | IsLoading 为 true 时 | +| `:icononly` | 按钮仅包含图标无文字时 | + +## 相关组件 + +- [DropdownButton](../dropdown-button/overview.md) — 带下拉菜单的按钮 +- [SplitButton](../split-button/overview.md) — 组合按钮，主按钮 + 下拉操作 +- [ButtonSpinner](../button-spinner/overview.md) — 带递增/递减按钮的输入框 diff --git a/src/zh_CN/reference/controls/button/block-button.md b/src/zh_CN/reference/controls/button/block-button.md deleted file mode 100644 index 31cadc09..00000000 --- a/src/zh_CN/reference/controls/button/block-button.md +++ /dev/null @@ -1,22 +0,0 @@ -# 块状按钮 - -定长的按钮，有些业务场景中相对来说更适合用这种类型的按钮。 - -![AtomUI Button组件](./images/block-button.webp) - -```xaml - - - Primary - - - Default - - - Text - - - Link - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/button/danger.md b/src/zh_CN/reference/controls/button/danger.md deleted file mode 100644 index 906d7722..00000000 --- a/src/zh_CN/reference/controls/button/danger.md +++ /dev/null @@ -1,22 +0,0 @@ -# 危险按钮 - -非常简单，一眼万年。`Danger`，就是这么从容。 - -![AtomUI Button组件](./images/danger-button.webp) - -```xaml - - - Primary - - - Default - - - Text - - - Link - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/button/disabled.md b/src/zh_CN/reference/controls/button/disabled.md deleted file mode 100644 index d86d9b04..00000000 --- a/src/zh_CN/reference/controls/button/disabled.md +++ /dev/null @@ -1,86 +0,0 @@ -# 禁用 - -用户对软件的使用方式总是千奇百怪，他们的好奇心也非常旺盛，使用 `IsEnabled` 属性，一键控制奇怪操作带来的奇怪后果。 - -![AtomUI Button组件](./images/disabled-button.webp) - -```xaml - - - - Primary - - - Primary(disabled) - - - - - Default - - - Default(disabled) - - - - - Text - - - Text(disabled) - - - - - Link - - - Link(disabled) - - - - - - Danger Primary - - - Danger Primary(disabled) - - - - - Danger Default - - - Danger Default(disabled) - - - - - Danger Text - - - Danger Text(disabled) - - - - - Danger Link - - - Danger Link(disabled) - - - - - - - Ghost - - - Ghost(disabled) - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/button/getting-started.md b/src/zh_CN/reference/controls/button/getting-started.md index 036407ad..8200b30f 100644 --- a/src/zh_CN/reference/controls/button/getting-started.md +++ b/src/zh_CN/reference/controls/button/getting-started.md @@ -1,188 +1,181 @@ -# 快速入门 +# Button 快速入门 -### 基础配置条件 +## 前置条件 -* Nuget安装Avalonia -* Nuget安装AtomUI +- NuGet 安装 `Avalonia` +- NuGet 安装 `AtomUI` -### 基础用法 +## 基础用法 -`ButtonType` 属性控制按钮的样式，可选值有Default、Dashed、Primary、Link、Text。 +通过 `ButtonType` 属性控制按钮的视觉风格。 -![AtomUI Button组件](./images/basic-button.webp) +![AtomUI Button 基础用法](./images/basic-button.webp) ```xaml Primary Button Default Button +Dashed Button Text Button Link Button ``` -### 按钮形状 +| ButtonType | 说明 | +|---|---| +| `Primary` | 主要操作按钮，页面中建议只有一个 | +| `Default` | 默认按钮，用于次要操作 | +| `Dashed` | 虚线边框按钮，常用于添加操作 | +| `Text` | 文本按钮，无边框无背景，用于最轻量的操作 | +| `Link` | 链接按钮，类似超链接的视觉效果 | -`Shape` 属性决定了按钮的形状，可选值有Default、Circle、Round。 +## 按钮形状 -![AtomUI Button组件](./images/button-shape.webp) +通过 `Shape` 属性设置按钮的几何形状。 + +![AtomUI Button 形状](./images/button-shape.webp) ```xaml - - Primary - Default - Text - Link - - - Primary - Default - Text - Link - - - AA - AA - AA - AA - + +Primary + + +Primary + + + ``` -### 大小尺寸 +## 按钮尺寸 -通过 `SizeType` 属性可以控制按钮的大小，本示例需要集合Code Behind与ViewModel共同实现。 +通过 `SizeType` 属性控制按钮大小，可选值为 `Large`、`Middle`（默认）、`Small`。 -![AtomUI Button组件](./images/button-size.webp) +![AtomUI Button 尺寸](./images/button-size.webp) -axaml文件： ```xaml - - Expand direction: - - Large - Default - Small - - +Large +Middle（默认） +Small +``` - - - Primary - Dashed - Default - Link - +配合数据绑定可实现动态切换尺寸： + +```xaml + + Primary + +``` + +## 图标按钮 + +通过 `Icon` 属性设置按钮图标，图标来源于 AtomUI 内置的 AntDesign 图标库。 + +![AtomUI Button 图标](./images/icon-button.webp) + +```xaml + + + Search + + + + + + + +``` + +## 危险按钮 + +设置 `IsDanger="True"` 标识破坏性或不可逆操作，按钮会以红色系呈现。 + +![AtomUI Button 危险](./images/danger-button.webp) + +```xaml +Delete +Remove +Delete +Delete +``` + +## 幽灵按钮 + +设置 `IsGhost="True"` 使按钮背景透明，适用于深色或彩色背景。 + +![AtomUI Button 幽灵](./images/ghost-button.webp) + +```xaml + - - - - - - Download - - - Download + Primary + Default + + Danger - + +``` + +## 加载状态 + +设置 `IsLoading="True"` 显示加载动画，按钮在加载期间会自动禁用交互。适用于提交表单、发起请求等需要等待的场景。 + +![AtomUI Button 加载](./images/load-button.webp) + +```xaml + +Loading + + + + Click me! + ``` -code-behind文件： +Code-behind 实现： + ```csharp -using AtomUI; -using AtomUI.Controls; -using AtomUIGallery.ShowCases.ViewModels; -using Avalonia.Interactivity; -using Avalonia.Threading; -using ReactiveUI; -using ReactiveUI.Avalonia; - -public partial class ButtonShowCase : ReactiveUserControl +public void HandleLoadingBtnClick(object? sender, RoutedEventArgs args) { - private ButtonViewModel? _viewModel; - public ButtonShowCase() + if (sender is Button button) { - this.WhenActivated(disposables => + button.IsLoading = true; + Dispatcher.UIThread.InvokeAsync(async () => { - _viewModel = DataContext as ButtonViewModel; + await Task.Delay(TimeSpan.FromSeconds(3)); + button.IsLoading = false; }); - InitializeComponent(); - } - - public void HandleButtonSizeTypeOptionCheckedChanged(object? sender, OptionCheckedChangedEventArgs args) - { - if (_viewModel != null) - { - if (args.Index == 0) - { - _viewModel.ButtonSizeType = SizeType.Large; - } - else if (args.Index == 1) - { - _viewModel.ButtonSizeType = SizeType.Middle; - } - else - { - _viewModel.ButtonSizeType = SizeType.Small; - } - } - - } - - public void HandleLoadingBtnClick(object? sender, RoutedEventArgs args) - { - if (sender is Button button) - { - button.IsLoading = true; - Dispatcher.UIThread.InvokeAsync(async () => - { - await Task.Delay(TimeSpan.FromSeconds(3)); - button.IsLoading = false; - }); - } } } ``` -view-model文件： -```csharp -using AtomUI; -using AtomUI.Controls; -using Avalonia.Interactivity; -using Avalonia.Threading; -using ReactiveUI; +## 禁用状态 -public class ButtonViewModel : ReactiveObject, IRoutableViewModel, IActivatableViewModel -{ - public static TreeNodeKey ID = "Button"; +设置 `IsEnabled="False"` 禁用按钮，所有按钮类型均支持禁用态。 - public IScreen HostScreen { get; } - public ViewModelActivator Activator { get; } +![AtomUI Button 禁用](./images/disabled-button.webp) - public string UrlPathSegment { get; } = ID.ToString(); +```xaml +Primary (disabled) +Default (disabled) +Text (disabled) +Link (disabled) +``` - private SizeType _buttonSizeType; +## 块状按钮 - public SizeType ButtonSizeType - { - get => _buttonSizeType; - set => this.RaiseAndSetIfChanged(ref _buttonSizeType, value); - } +设置 `HorizontalAlignment="Stretch"` 使按钮宽度撑满父容器，适用于移动端或表单场景。 - public ButtonViewModel(IScreen screen) - { - Activator = new ViewModelActivator(); - HostScreen = screen; - } -} -``` \ No newline at end of file +![AtomUI Button 块状](./images/block-button.webp) + +```xaml + + + Primary + + + Default + + +``` diff --git a/src/zh_CN/reference/controls/button/ghost.md b/src/zh_CN/reference/controls/button/ghost.md deleted file mode 100644 index 392543ef..00000000 --- a/src/zh_CN/reference/controls/button/ghost.md +++ /dev/null @@ -1,45 +0,0 @@ -# 幽灵按钮 - -对于绝大多数时候而言，幽灵按钮是为了解决在深色或彩色背景中，普通按钮可能不够突出或视觉效果不佳的难题。Ghost按钮具有透明背景，能够更好地融入各种背景颜色，同时保持良好的可读性和可见性。 - -![AtomUI Button组件](./images/ghost-button.webp) - -```xaml - - - - Primary - - - Default - - - Text - - - Link - - - Danger - - - - - Primary - - - Default - - - Text - - - Link - - - Danger - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/button/loading.md b/src/zh_CN/reference/controls/button/loading.md deleted file mode 100644 index ca4715b6..00000000 --- a/src/zh_CN/reference/controls/button/loading.md +++ /dev/null @@ -1,29 +0,0 @@ -# Loading状态 - -`Loading` 状态可以显著提升用户在等待时的体验与视觉感受，这个特性是由 `IsLoading` 属性来决定的，开发者可以重点参考下面示例中的点击事件与 `IsLoading` 的结合使用方式。 - -`HandleLoadingBtnClick` 事件可以参考快速入门中的Code Behind代码。 - -![AtomUI Button组件](./images/load-button.webp) - -```xaml - - - Loading - Loading - - - - - Click me! - - Click me! - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/button/overview.md b/src/zh_CN/reference/controls/button/overview.md index f27a08d2..97476fa3 100644 --- a/src/zh_CN/reference/controls/button/overview.md +++ b/src/zh_CN/reference/controls/button/overview.md @@ -1,12 +1,23 @@ -# Button 概述 +# Button 按钮 -### 简介 +## 简介 -`AtomUI` 提供了多种风格的按钮，用户可以按形状、尺寸、颜色、图标和文字等不同维度进行组合，生成最终满足自己需求的按钮。 +按钮用于触发一个操作或事件，例如提交表单、打开对话框、执行取消操作等。AtomUI 的 Button 组件遵循 Ant Design 设计规范，提供了丰富的类型、形状和状态组合，满足各类交互场景需求。 -![AtomUI Button组件](./images/button-size.webp) +![AtomUI Button 组件](./images/button-size.webp) -### 主要功能 -* 支持多种尺寸、多种类型以及状态属性 -* 支持loading状态/disabled状态 -* 支持图标 \ No newline at end of file +## 何时使用 + +- 需要用户主动触发某个操作时 +- 标记一个（或多个）操作命令，响应用户点击行为 +- 在表单、对话框、工具栏等场景中承载交互入口 + +## 主要特性 + +- **五种按钮类型** — Primary、Default、Dashed、Text、Link，覆盖主操作到辅助操作的完整层级 +- **三种形状** — Default（圆角矩形）、Round（胶囊形）、Circle（圆形） +- **三种尺寸** — Large、Middle、Small，适配不同密度的布局 +- **危险状态** — 用红色系标识删除、移除等破坏性操作 +- **幽灵模式** — 透明背景，适用于深色或彩色背景 +- **加载状态** — 内置 Loading 动画，操作等待期间自动禁用 +- **图标支持** — 内置 AntDesign 图标库，可在按钮中灵活搭配图标 diff --git a/src/zh_CN/reference/controls/button/with-icon.md b/src/zh_CN/reference/controls/button/with-icon.md deleted file mode 100644 index 20347e0f..00000000 --- a/src/zh_CN/reference/controls/button/with-icon.md +++ /dev/null @@ -1,53 +0,0 @@ -# 携带图标 - -通过 `Icon` 属性设置图标，图标来源于 `AtomUI` 内置的图标库。 - -![AtomUI Button组件](./images/icon-button.webp) - -```xaml - - - - Search - - - - - Search - - - - Search - - - - Search - - - - Search - - - - - - Search - - - - Search - - - - Search - - - - Search - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/calendar/api.md b/src/zh_CN/reference/controls/calendar/api.md new file mode 100644 index 00000000..d01210ab --- /dev/null +++ b/src/zh_CN/reference/controls/calendar/api.md @@ -0,0 +1,59 @@ +# Calendar API 参考 + +## 属性 + +| 属性 | 说明 | 类型 | 默认值 | +|---|---|---|---| +| `FirstDayOfWeek` | 每周的起始日 | `DayOfWeek` | `Sunday` | +| `IsTodayHighlighted` | 是否高亮显示今天的日期 | `bool` | `true` | +| `HeaderBackground` | 日历头部区域的背景色 | `IBrush?` | `null` | +| `DisplayMode` | 日历的显示模式（月/年/十年） | `CalendarMode` | `Month` | +| `SelectionMode` | 日期选择模式 | `CalendarSelectionMode` | `SingleDate` | +| `SelectedDate` | 当前选中的日期（支持双向绑定） | `DateTime?` | `null` | +| `DisplayDate` | 当前显示的日期/月份（支持双向绑定） | `DateTime` | `DateTime.Today` | +| `DisplayDateStart` | 可显示的最早日期（支持双向绑定） | `DateTime?` | `null` | +| `DisplayDateEnd` | 可显示的最晚日期（支持双向绑定） | `DateTime?` | `null` | +| `IsMotionEnabled` | 是否启用过渡动画 | `bool` | `true` | + +## 集合 + +| 属性 | 说明 | 类型 | 备注 | +|---|---|---|---| +| `SelectedDates` | 所有选中日期的集合 | `SelectedDatesCollection` | 只读 | + +## 事件 + +| 事件 | 说明 | 参数类型 | +|---|---|---| +| `DisplayDateChanged` | 显示日期发生变化时触发 | `CalendarDateChangedEventArgs` | +| `DisplayModeChanged` | 显示模式发生变化时触发 | `CalendarModeChangedEventArgs` | + +## 枚举类型 + +### CalendarMode + +| 值 | 说明 | +|---|---| +| `Month` | 月视图，按天显示（默认） | +| `Year` | 年视图，按月显示 | +| `Decade` | 十年视图，按年显示 | + +### CalendarSelectionMode + +| 值 | 说明 | +|---|---| +| `SingleDate` | 只能选择单个日期（默认） | +| `SingleRange` | 可选择一段连续的日期范围 | +| `MultipleRange` | 可选择多段不连续的日期范围 | +| `None` | 禁止选择，日历仅用于展示 | + +## 类继承关系 + +``` +TemplatedControl + └── Calendar +``` + +## 相关组件 + +- [DatePicker](../date-picker/overview.md) — 基于 Calendar 封装的弹出式日期选择器 diff --git a/src/zh_CN/reference/controls/calendar/getting-started.md b/src/zh_CN/reference/controls/calendar/getting-started.md index e5e2d613..0866c51f 100644 --- a/src/zh_CN/reference/controls/calendar/getting-started.md +++ b/src/zh_CN/reference/controls/calendar/getting-started.md @@ -1,13 +1,13 @@ -# Calendar 快速入门 +# Calendar 快速入门 -### 基础配置条件 +## 前置条件 -* Nuget安装Avalonia -* Nuget安装AtomUI +- NuGet 安装 `Avalonia` +- NuGet 安装 `AtomUI` -### 基础用法 +## 基础用法 -最基础最小配置化的日历组件。 +最基础最小配置化的日历组件，默认以月视图展示，选择模式为单选。 ![AtomUI Calendar组件](./images/basic.webp) @@ -15,4 +15,140 @@ -``` \ No newline at end of file +``` + +## 显示模式 + +通过 `DisplayMode` 属性控制日历的视图粒度，支持 `Month`（月视图）、`Year`（年视图）和 `Decade`（十年视图）。 + +```xaml + + + + + + + + +``` + +## 选择模式 + +通过 `SelectionMode` 属性控制日期选择行为。 + +```xaml + + + + + + + + + + + +``` + +| SelectionMode | 说明 | +|---|---| +| `SingleDate` | 只能选择单个日期（默认） | +| `SingleRange` | 可选择一段连续的日期范围 | +| `MultipleRange` | 可选择多段不连续的日期范围 | +| `None` | 禁止选择，日历仅用于展示 | + +## 绑定选中日期 + +通过 `SelectedDate` 属性绑定当前选中的日期，支持双向绑定。 + +```xaml + +``` + +对应的 ViewModel： + +```csharp +public class MyViewModel : ViewModelBase +{ + private DateTime? _mySelectedDate; + public DateTime? MySelectedDate + { + get => _mySelectedDate; + set => this.RaiseAndSetIfChanged(ref _mySelectedDate, value); + } +} +``` + +## 限制可选日期范围 + +通过 `DisplayDateStart` 和 `DisplayDateEnd` 属性约束用户可浏览和选择的日期范围。 + +```xaml + + +``` + +## 设置每周起始日 + +通过 `FirstDayOfWeek` 属性自定义每周的起始日。 + +```xaml + + +``` + +## 今日高亮 + +默认情况下日历会高亮显示当天日期，可通过 `IsTodayHighlighted` 属性关闭。 + +```xaml + + +``` + +## 控制显示日期 + +通过 `DisplayDate` 属性设置日历初始显示的月份，支持双向绑定。 + +```xaml + + +``` + +## 自定义头部背景 + +通过 `HeaderBackground` 属性自定义日历头部区域的背景色。 + +```xaml + +``` + +## 事件处理 + +监听 `DisplayDateChanged` 和 `DisplayModeChanged` 事件，响应用户的浏览操作。 + +```xaml + +``` + +Code-behind 实现： + +```csharp +private void OnDisplayDateChanged(object? sender, CalendarDateChangedEventArgs e) +{ + // e.AddedDate — 新的显示日期 + // e.RemovedDate — 旧的显示日期 +} + +private void OnDisplayModeChanged(object? sender, CalendarModeChangedEventArgs e) +{ + // e.NewMode — 新的显示模式 + // e.OldMode — 旧的显示模式 +} +``` + +## 作为 DatePicker 基础控件 + +`Calendar` 是 `DatePicker` 的核心子组件。在大多数业务场景中，推荐直接使用 [DatePicker](../date-picker/overview.md) 获得弹出式日期选择体验。如需完全自定义日期选择交互，则可以基于 `Calendar` 自行封装。 diff --git a/src/zh_CN/reference/controls/calendar/overview.md b/src/zh_CN/reference/controls/calendar/overview.md index 1306b666..bbc55c2b 100644 --- a/src/zh_CN/reference/controls/calendar/overview.md +++ b/src/zh_CN/reference/controls/calendar/overview.md @@ -1,7 +1,26 @@ -# Calendar 概述 +# Calendar 日历 -### 简介 +## 简介 -`AtomUI` 提供了一套功能强大的日历组件，一般说来直接使用 `Calender` 的场景可能较少一些，大多数时候业务上还是需要成型的日期选择器。但是为了满足灵活自由度，`AtomUI` 不仅提供了最基础原始的 `Calendar` 组件，同时也提供了基于 `Calendar` 组件的日期选择器控件（`DatePicker`）。 +日历组件用于按照日历形式展示数据或进行日期选择。AtomUI 的 Calendar 组件遵循 Ant Design 设计规范，支持月、年、十年三种视图模式，并提供单选、范围选择、多范围选择等多种选择模式，满足各类日期交互场景需求。 -![AtomUI Calendar组件](./images/basic.webp) \ No newline at end of file +一般来说直接使用 `Calendar` 的场景较少，大多数业务场景中更常使用基于 `Calendar` 封装的日期选择器（`DatePicker`）。但为了满足灵活自定义的需求，AtomUI 同时提供了最基础原始的 `Calendar` 组件。 + +![AtomUI Calendar组件](./images/basic.webp) + +## 何时使用 + +- 需要以日历面板形式直接展示日期信息时 +- 需要内联的日期选择交互（非弹出式）时 +- 作为自定义日期选择器的基础构建模块时 +- 需要同时选择多个日期或日期范围时 + +## 主要特性 + +- **三种显示模式** — Month（月视图）、Year（年视图）、Decade（十年视图），支持在不同粒度间自由切换 +- **四种选择模式** — SingleDate（单选）、SingleRange（单范围）、MultipleRange（多范围）、None（禁止选择） +- **今日高亮** — 默认高亮显示当天日期，便于用户快速定位 +- **日期范围约束** — 通过 DisplayDateStart / DisplayDateEnd 限制可选的日期范围 +- **首日定制** — 支持自定义每周的起始日（周一、周日等） +- **过渡动画** — 内置平滑的视图切换动画效果 +- **双向绑定** — SelectedDate、DisplayDate 等核心属性均支持 TwoWay 绑定，便于与 ViewModel 集成 diff --git a/src/zh_CN/reference/controls/card/api.md b/src/zh_CN/reference/controls/card/api.md new file mode 100644 index 00000000..f2ea341f --- /dev/null +++ b/src/zh_CN/reference/controls/card/api.md @@ -0,0 +1,57 @@ +# Card API + +### 类定义 + +```csharp +public class Card : HeaderedContentControl +``` + +### 样式变体枚举 + +```csharp +public enum CardStyleVariant +{ + Outline, + Borderless +} +``` + +### 属性 + +| 属性名 | 类型 | 默认值 | 说明 | +| --- | --- | --- | --- | +| BoxShadow | `BoxShadows` | - | 卡片阴影效果 | +| Extra | `object?` | `null` | 卡片右上角额外操作区域内容 | +| ExtraTemplate | `IDataTemplate?` | `null` | Extra 内容的数据模板 | +| StyleVariant | `CardStyleVariant` | `Outline` | 样式变体，`Outline` 为有边框样式，`Borderless` 为无边框样式 | +| SizeType | `SizeType` | - | 卡片尺寸，支持 `Large`、`Middle`、`Small` | +| IsLoading | `bool` | `false` | 是否显示加载状态，为 `true` 时在内容上方显示加载遮罩 | +| IsInnerMode | `bool` | `false` | 是否为内嵌卡片模式，用于在主卡片内部嵌套子卡片 | +| IsHoverable | `bool` | `false` | 是否启用鼠标悬停效果 | +| Cover | `object?` | `null` | 卡片封面内容，通常为图片 | +| CoverTemplate | `IDataTemplate?` | `null` | Cover 内容的数据模板 | +| IsMotionEnabled | `bool` | - | 是否启用动画效果 | + +### 集合 + +| 名称 | 类型 | 说明 | +| --- | --- | --- | +| Actions | `Controls` | 卡片底部操作按钮集合（只读），通过 `Card.Actions` 设置 | + +### 继承属性 + +`Card` 继承自 `HeaderedContentControl`，因此还支持以下常用属性： + +| 属性名 | 类型 | 说明 | +| --- | --- | --- | +| Header | `object?` | 卡片标题内容 | +| Content | `object?` | 卡片主体内容 | + +### 相关子组件 + +| 组件 | 说明 | +| --- | --- | +| `CardTabsContent` | Tab 标签页容器，放置于 Card 的 Content 中实现标签页切换 | +| `CardMetaContent` | 元数据内容组件，支持 Header、Content、Avatar 等属性，用于展示结构化信息 | +| `CardGridContent` | 网格布局容器，配合 `CardGridItem` 实现网格卡片 | +| `CardGridItem` | 网格卡片子项，支持 Row、Column 定位及 `IsHoverable` 属性 | diff --git a/src/zh_CN/reference/controls/card/card-in-column.md b/src/zh_CN/reference/controls/card/card-in-column.md deleted file mode 100644 index add5157b..00000000 --- a/src/zh_CN/reference/controls/card/card-in-column.md +++ /dev/null @@ -1,33 +0,0 @@ -# 栅格卡片 - -配合 `Grid` 栅格布局使用，可以达到非常不错的预览墙效果。 - -![AtomUI Card组件](./images/card-in-column.png) - -```xaml - - - - - Card content - Card content - Card content - - - - - Card content - Card content - Card content - - - - - Card content - Card content - Card content - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/card/complex-card.md b/src/zh_CN/reference/controls/card/complex-card.md deleted file mode 100644 index 4e3da616..00000000 --- a/src/zh_CN/reference/controls/card/complex-card.md +++ /dev/null @@ -1,25 +0,0 @@ -# 自定义卡片（二） - -通过组合 `Card` 组件的 `Cover` 、 `Actions` 等属性以及 `CardMetaContent` 子组件，可以创建一个具有封面、头像、内容、操作按钮的卡片。 - -![AtomUI Card组件](./images/complex-card.png) - -```xaml - - - - - - - - - - - - - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/card/custom.md b/src/zh_CN/reference/controls/card/custom.md deleted file mode 100644 index b1e8670d..00000000 --- a/src/zh_CN/reference/controls/card/custom.md +++ /dev/null @@ -1,15 +0,0 @@ -# 自定义卡片 - -通过 `CardMetaContent` 子组件可以实现内容更加丰富的展示样式。 - -![AtomUI Card组件](./images/custom-card.webp) - -```xaml - - - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/card/getting-started.md b/src/zh_CN/reference/controls/card/getting-started.md index 193e812c..522a3719 100644 --- a/src/zh_CN/reference/controls/card/getting-started.md +++ b/src/zh_CN/reference/controls/card/getting-started.md @@ -1,13 +1,13 @@ -# Card 快速入门 +# Card 快速入门 ### 基础配置条件 -* Nuget安装Avalonia -* Nuget安装AtomUI +- Nuget 安装 Avalonia +- Nuget 安装 AtomUI ### 基础用法 -最基础最小配置化的Card组件。 +最简单的卡片，仅包含内容区域，无标题。 ![AtomUI Card组件](./images/simple-card.png) @@ -21,9 +21,9 @@ ``` -### 大小尺寸 +### 多尺寸卡片 -通过 `SizeType` 属性设置大小尺寸，注意：同时设定Width="300"将会固定宽度。 +通过 `SizeType` 属性设置卡片尺寸，支持 `Large`、`Middle`（默认）、`Small` 三种规格。可通过 `Header` 设置标题，通过 `Extra` 插槽设置右上角额外操作。 ![AtomUI Card组件](./images/basic.png) @@ -62,4 +62,215 @@ -``` \ No newline at end of file +``` + +### 内嵌卡片 + +将 `IsInnerMode` 设置为 `True`，可在主卡片内部嵌套子卡片，用于展示层级关系。 + +![AtomUI Card组件](./images/inner-card.png) + +```xaml + + + + + More + + + Card content + Card content + Card content + + + + + + More + + + Card content + Card content + Card content + + + + +``` + +### Tab 卡片 + +通过 `CardTabsContent` 子组件创建标签页，可在单张卡片内切换展示不同内容。 + +![AtomUI Card组件](./images/tag-card.webp) + +```xaml + + + + More + + + content1 + content2 + + + + + + + More + + article content + app content + project content + + + +``` + +### 无边框卡片 + +将 `StyleVariant` 设置为 `Borderless`，可使用无边框样式。无边框卡片适合在有背景色的区域中使用，与背景融为一体。 + +![AtomUI Card组件](./images/noborder-card-with-gray-bg.png) + +```xaml + + + + More + + + Card content + Card content + Card content + + + +``` + +### 自定义封面卡片 + +通过 `Cover` 属性设置卡片封面图，结合 `CardMetaContent` 子组件展示标题与描述信息。设置 `IsHoverable` 可启用悬停效果。 + +![AtomUI Card组件](./images/custom-card.webp) + +```xaml + + + + + + +``` + +### 带操作栏的复杂卡片 + +通过组合 `Cover`、`Actions` 属性以及 `CardMetaContent` 子组件，可以创建包含封面、头像、内容描述和底部操作按钮的卡片。 + +![AtomUI Card组件](./images/complex-card.png) + +```xaml + + + + + + + + + + + + + + + + +``` + +### 加载状态 + +通过 `IsLoading` 属性控制卡片的加载状态。当值为 `True` 时，卡片内容上方会显示加载遮罩。 + +![AtomUI Card组件](./images/loading.webp) + +```xaml + + + + + + + + + This is the description + This is the description + + + + + + + + + +``` + +### 网格卡片 + +通过 `CardGridContent` 与 `CardGridItem` 子组件，实现网格布局的卡片。 + +![AtomUI Card组件](./images/grid-card.webp) + +```xaml + + + Content + Content + Content + Content + Content + Content + Content + + +``` + +### 栅格布局卡片 + +配合 `Grid` 栅格布局使用，可实现卡片预览墙效果。 + +![AtomUI Card组件](./images/card-in-column.png) + +```xaml + + + + + Card content + Card content + Card content + + + + + Card content + Card content + Card content + + + + + Card content + Card content + Card content + + + + +``` diff --git a/src/zh_CN/reference/controls/card/grid.md b/src/zh_CN/reference/controls/card/grid.md deleted file mode 100644 index 072f9c96..00000000 --- a/src/zh_CN/reference/controls/card/grid.md +++ /dev/null @@ -1,20 +0,0 @@ -# Grid卡片 - -通过 `CardGridContent` 与 `CardGridItem` 子组件配合，实现一个网格布局的卡片效果。 - -![AtomUI Card组件](./images/grid-card.webp) - -```xaml - - - Content - Content - Content - Content - Content - Content - Content - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/card/inner-card.md b/src/zh_CN/reference/controls/card/inner-card.md deleted file mode 100644 index 1049fd6d..00000000 --- a/src/zh_CN/reference/controls/card/inner-card.md +++ /dev/null @@ -1,33 +0,0 @@ -# 内部卡片 - -在一个主卡片内部嵌套多个子卡片，更好地展示层级关系。将 `IsInnerMode` 设定为True即可实现内部嵌套卡片。 - -![AtomUI Card组件](./images/inner-card.png) - -```xaml - - - - - More - - - Card content - Card content - Card content - - - - - - More - - - Card content - Card content - Card content - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/card/loading.md b/src/zh_CN/reference/controls/card/loading.md deleted file mode 100644 index 614530ea..00000000 --- a/src/zh_CN/reference/controls/card/loading.md +++ /dev/null @@ -1,45 +0,0 @@ -# loading状态 - -通过 `IsLoading` 属性，实现loading状态。当 `IsLoading` 为True时，会通过在正式内容的 `Card` 上方显示loading遮罩的方式实现loading状态。 - -![AtomUI Card组件](./images/loading.webp) - -```xaml -// 通过绑定IsLoading属性，实现loading状态 - - - - - - - - - This is the description - This is the description - - - - - - - - - - - - - - - - This is the description - This is the description - - - - - - - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/card/no-border.md b/src/zh_CN/reference/controls/card/no-border.md deleted file mode 100644 index 136c7705..00000000 --- a/src/zh_CN/reference/controls/card/no-border.md +++ /dev/null @@ -1,21 +0,0 @@ -# 无边框 - -无边框 `Card` 样式，将属性 `StyleVariant` 设定为Borderless即可。无边框 `Card` 更容易与背景色融为一体。 - -![AtomUI Card组件](./images/noborder-card-with-gray-bg.png) - -```xaml -// Binding BorderlessFrameBg请自行修改 - - - - More - - - Card content - Card content - Card content - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/card/overview.md b/src/zh_CN/reference/controls/card/overview.md index 8277e87a..30b6112b 100644 --- a/src/zh_CN/reference/controls/card/overview.md +++ b/src/zh_CN/reference/controls/card/overview.md @@ -1,13 +1,25 @@ -# Card 概述 +# Card 概述 ### 简介 -样式与规格多种多样的卡片组件，用于显示文字、图片、列表、段落等信息。 +通用卡片容器组件，用于承载文字、图片、列表、操作按钮等多种类型的信息。`Card` 继承自 `HeaderedContentControl`，支持多种尺寸、样式变体、内嵌模式、封面、操作栏等丰富功能。 ![AtomUI Card组件](./images/loading.webp) +### 何时使用 + +- 需要将信息聚合在卡片容器中进行展示时。 +- 需要一个具有标题、内容、操作区域的容器时。 +- 需要网格布局、Tab 切换等多种卡片组合形式时。 + ### 主要功能 -* 支持多种规格样式 -* 支持Tab形式、Grid形式 -* 支持loading特性 -* 支持自定义样式 \ No newline at end of file + +- 支持 Large / Middle / Small 三种尺寸（`SizeType`）。 +- 支持 Outline（有边框）和 Borderless（无边框）两种样式变体（`StyleVariant`）。 +- 支持内嵌卡片模式（`IsInnerMode`），便于展示层级关系。 +- 支持 Tab 卡片（`CardTabsContent`），在单张卡片内切换内容。 +- 支持封面（`Cover`）、头像、元数据（`CardMetaContent`）等自定义展示。 +- 支持加载状态（`IsLoading`），在内容上方显示加载遮罩。 +- 支持操作栏（`Actions`），在卡片底部放置操作按钮。 +- 支持网格布局（`CardGridContent` / `CardGridItem`）。 +- 支持悬停效果（`IsHoverable`）和阴影（`BoxShadow`）。 diff --git a/src/zh_CN/reference/controls/card/tab-card.md b/src/zh_CN/reference/controls/card/tab-card.md deleted file mode 100644 index 29cca52c..00000000 --- a/src/zh_CN/reference/controls/card/tab-card.md +++ /dev/null @@ -1,30 +0,0 @@ -# Tab卡片 - -通过 `CardTabsContent` 子组件创建标签页，可以容纳展示更多内容。 - -![AtomUI Card组件](./images/tag-card.webp) - -```xaml - - - - More - - - content1 - content2 - - - - - - - More - - article content - app content - project content - - - -``` \ No newline at end of file diff --git a/src/zh_CN/reference/controls/carousel/api.md b/src/zh_CN/reference/controls/carousel/api.md new file mode 100644 index 00000000..7297a171 --- /dev/null +++ b/src/zh_CN/reference/controls/carousel/api.md @@ -0,0 +1,55 @@ +# Carousel API 参考 + +## 属性 + +| 属性 | 说明 | 类型 | 默认值 | +|---|---|---|---| +| `IsShowNavButtons` | 是否显示左右导航箭头 | `bool` | `false` | +| `IsAutoPlay` | 是否开启自动轮播 | `bool` | `false` | +| `AutoPlaySpeed` | 自动轮播时每页的停留时间 | `TimeSpan` | `00:00:03`（3000ms） | +| `PaginationPosition` | 分页指示器的位置 | `CarouselPaginationPosition` | `Bottom` | +| `IsShowPagination` | 是否显示分页指示器 | `bool` | `true` | +| `IsShowTransitionProgress` | 是否在分页指示器上显示播放进度 | `bool` | `false` | +| `IsInfinite` | 是否无限循环播放 | `bool` | `true` | +| `PageTransitionDuration` | 页面切换过渡动画的持续时间 | `TimeSpan` | — | +| `PageInEasing` | 页面进入时的缓动函数 | `Easing` | — | +| `PageOutEasing` | 页面退出时的缓动函数 | `Easing` | — | +| `TransitionEffect` | 页面切换的过渡效果（Scroll / Fade） | `CarouselTransitionEffect` | — | +| `IsMotionEnabled` | 是否启用过渡动画 | `bool` | — | +| `IsSwipeEnabled` | 是否启用触摸/指针滑动切换 | `bool` | `false` | + +## 方法 + +| 方法 | 说明 | +|---|---| +| `Next()` | 切换到下一页 | +| `Previous()` | 切换到上一页 | + +## 枚举类型 + +### CarouselPaginationPosition + +| 值 | 说明 | +|---|---| +| `Bottom` | 分页指示器位于底部（默认） | +| `Top` | 分页指示器位于顶部 | +| `Left` | 分页指示器位于左侧 | +| `Right` | 分页指示器位于右侧 | + +### CarouselTransitionEffect + +| 值 | 说明 | +|---|---| +| `Scroll` | 滚动切换效果 | +| `Fade` | 淡入淡出切换效果 | + +## 类继承关系 + +``` +SelectingItemsControl + └── Carousel +``` + +## 相关组件 + +- [CarouselPage](./getting-started.md) — Carousel 的子项容器，用于包裹每一页的内容 diff --git a/src/zh_CN/reference/controls/carousel/getting-started.md b/src/zh_CN/reference/controls/carousel/getting-started.md index 766d238a..40eb1d7c 100644 --- a/src/zh_CN/reference/controls/carousel/getting-started.md +++ b/src/zh_CN/reference/controls/carousel/getting-started.md @@ -1,14 +1,14 @@ -# Carousel 快速入门 +# Carousel 快速入门 -### 基础配置条件 +## 前置条件 -* Nuget安装Avalonia -* Nuget安装AtomUI -* 本页文档末尾有公共样式代码与公共code-behind代码 +- NuGet 安装 `Avalonia` +- NuGet 安装 `AtomUI` +- 本页文档末尾有公共样式代码与公共 code-behind 代码 -### 基础用法 +## 基础用法 -一个最简单的示例，至于背景颜色，参考本页文档末尾的样式代码。 +最简单的轮播组件用法，使用 `CarouselPage` 作为每一页的容器。通过 `SelectedIndex` 属性可设置默认显示的页面。 ![AtomUI Carousel组件](./images/basic.webp) @@ -21,9 +21,9 @@ ``` -### 位置设定 +## 分页指示器位置 -通过 `PaginationPosition` 属性可以指定轮播图索引的位置，目前系统内置的可选值有：`Top`、`Bottom`、`Left`、`Right`。 +通过 `PaginationPosition` 属性指定分页指示器的位置，支持 `Top`、`Bottom`、`Left`、`Right` 四个方向。 ![AtomUI Carousel组件](./images/position.webp) @@ -49,9 +49,9 @@ ``` -### 自动轮播 +## 自动轮播 -将 `IsAutoPlay` 属性设定为 `True`，即可开启自动轮播功能；`IsInfinite` 默认为 `True`，即轮播到最后一张图片后，会自动跳转到第一张图片继续循环。 +将 `IsAutoPlay` 设为 `True` 即可开启自动轮播。`IsInfinite` 默认为 `True`，表示播放到最后一页后会自动跳转回第一页继续循环；设为 `False` 则在最后一页停止。通过 `AutoPlaySpeed` 属性可控制每页的停留时间，默认为 3000 毫秒。 ![AtomUI Carousel组件](./images/auto-play.webp) @@ -64,9 +64,9 @@ ``` -### 淡入 +## 淡入淡出效果 -`TransitionEffect` 属性可以设定轮播图片的淡入效果，目前系统内置的可选值有：`Scroll`、`Fade`。 +`TransitionEffect` 属性用于设置页面切换的过渡效果，支持 `Scroll`（滚动，默认）和 `Fade`（淡入淡出）两种效果。 ![AtomUI Result组件](./images/fade-in.webp) @@ -79,9 +79,9 @@ ``` -### 播放箭头 +## 导航箭头 -`IsShowNavButtons` 属性用于显示轮播图片的左右切换箭头。 +将 `IsShowNavButtons` 设为 `True`，可在轮播区域两侧显示左右切换箭头，方便用户手动翻页。 ![AtomUI Carousel组件](./images/with-arrow.webp) @@ -102,9 +102,9 @@ ``` -### 播放进度条 +## 播放进度展示 -假设开发者一定设定了4张轮播图，每张轮播图的展示时间长达5秒钟，那么 `IsShowTransitionProgress` 属性可以展示这5秒钟的进度，缓解用户等待焦虑。 +当自动轮播开启时，`IsShowTransitionProgress` 属性可以在分页指示器上展示当前页面的播放进度条，直观地告知用户页面切换的剩余时间。 ![AtomUI Carousel组件](./images/progress-dot.webp) @@ -119,7 +119,7 @@ ``` -### 公共文件 +## 公共文件 样式代码： ```xaml @@ -137,7 +137,7 @@ ``` -code-behind文件： +code-behind 文件： ```csharp using System.Reactive.Disposables; using AtomUI.Desktop.Controls; @@ -158,7 +158,7 @@ public partial class CarouselShowCase : ReactiveUserControl }); InitializeComponent(); } - + public void HandlePositionOptionChanged(object? sender, OptionCheckedChangedEventArgs args) { if (DataContext is CarouselViewModel viewModel) @@ -178,9 +178,9 @@ public partial class CarouselShowCase : ReactiveUserControl else { viewModel.PaginationPosition = CarouselPaginationPosition.Right; - } + } } - + } } -``` \ No newline at end of file +``` diff --git a/src/zh_CN/reference/controls/carousel/overview.md b/src/zh_CN/reference/controls/carousel/overview.md index af2506b1..db5c0082 100644 --- a/src/zh_CN/reference/controls/carousel/overview.md +++ b/src/zh_CN/reference/controls/carousel/overview.md @@ -1,12 +1,25 @@ -# Carousel 概述 +# Carousel 走马灯 -### 简介 +## 简介 -跑马灯、轮播图，非常实用且好用的图片轮播组件。 +旋转木马，一组轮播的区域。当有一组平级的内容需要依次展示时，可使用走马灯组件进行轮播展示。AtomUI 的 Carousel 组件遵循 Ant Design 设计规范，支持自动轮播、多种过渡效果、分页指示器位置自定义等丰富功能，满足图片轮播、内容卡片切换等常见场景需求。 ![AtomUI Carousel组件](./images/basic.webp) -### 主要功能 -* 内置常见success、info、warning与error等风格 -* 内置HTTP 403/404/500风格 -* 自定义图标 \ No newline at end of file +## 何时使用 + +- 当有一组平级的内容需要依次展示时 +- 首页或活动页面的 Banner 图片轮播 +- 产品展示、新闻公告等内容的循环播放 +- 需要在有限空间内展示多个内容项时 + +## 主要特性 + +- **自动轮播** — 通过 IsAutoPlay 开启自动播放，AutoPlaySpeed 控制播放速度 +- **无限循环** — IsInfinite 属性控制是否在最后一页后自动跳转回第一页 +- **分页指示器** — 支持 Top、Bottom、Left、Right 四个方向的分页器位置 +- **过渡效果** — 内置 Scroll（滚动）和 Fade（淡入淡出）两种切换效果 +- **导航箭头** — IsShowNavButtons 控制是否显示左右切换箭头 +- **进度展示** — IsShowTransitionProgress 展示当前页的播放进度 +- **编程控制** — 提供 Next() 和 Previous() 方法，支持代码控制翻页 +- **滑动支持** — IsSwipeEnabled 启用触摸/指针滑动切换 diff --git a/src/zh_CN/reference/controls/check-box/api.md b/src/zh_CN/reference/controls/check-box/api.md new file mode 100644 index 00000000..5330d531 --- /dev/null +++ b/src/zh_CN/reference/controls/check-box/api.md @@ -0,0 +1,61 @@ +# CheckBox API + +## 类定义 + +``` +AtomUI.Controls.CheckBox : Avalonia.Controls.CheckBox +``` + +`CheckBox` 继承自 Avalonia 原生的 `Avalonia.Controls.CheckBox`，在其基础上扩展了动效和波纹效果控制。 + +--- + +## AtomUI 扩展属性 + +以下属性由 `AtomUI.Controls.CheckBox` 新增： + +| 属性名 | 类型 | 默认值 | 说明 | +|--------|------|--------|------| +| `IsMotionEnabled` | `bool` | `true` | 是否启用状态切换动效 | +| `IsWaveSpiritEnabled` | `bool` | `true` | 是否启用点击时的波纹扩散效果 | + +--- + +## 继承属性（来自 Avalonia.Controls.CheckBox） + +以下为常用的继承属性： + +| 属性名 | 类型 | 默认值 | 说明 | +|--------|------|--------|------| +| `IsChecked` | `bool?` | `false` | 选中状态。`true` 为选中，`false` 为未选中，`null` 为不确定（半选）状态 | +| `IsEnabled` | `bool` | `true` | 是否启用控件。设为 `false` 时控件不可交互 | +| `Content` | `object?` | `null` | 复选框旁边显示的内容，通常为文本标签 | +| `IsThreeState` | `bool` | `false` | 是否允许三态切换。启用后用户点击可在选中、未选中、不确定三种状态间循环 | + +--- + +## 用法示例 + +### 基础绑定 + +```xaml +我已阅读并同意 +``` + +### 关闭动效 + +```xaml + + 无动效复选框 + +``` + +### 三态模式 + +```xaml + + 全选 + +``` diff --git a/src/zh_CN/reference/controls/check-box/check-all.md b/src/zh_CN/reference/controls/check-box/check-all.md deleted file mode 100644 index d4bd137b..00000000 --- a/src/zh_CN/reference/controls/check-box/check-all.md +++ /dev/null @@ -1,275 +0,0 @@ -# 全选/反选控制 - -如何通过mvvm方式与事件配合，实现全选/反选功能。 - -![AtomUI CheckBox组件](./images/check-all-checkbox.webp) - -axaml文件： -```xaml - - - - Check all - - - - - Apple - - - Pear - - - Orange - - - -``` - -code-behind文件： -```csharp -using AtomUIGallery.ShowCases.ViewModels; -using Avalonia.ReactiveUI; -using ReactiveUI; -public partial class CheckBoxShowCase : ReactiveUserControl -{ - public CheckBoxShowCase() - { - this.WhenActivated(disposables => { }); - InitializeComponent(); - } -} -``` - -view-model文件： -```csharp -using System.Reactive; -using System.Reactive.Disposables; -using System.Reactive.Linq; -using AtomUI.Controls; -using ReactiveUI; -public class CheckBoxViewModel : ReactiveObject, IRoutableViewModel, - IActivatableViewModel -{ - public const string ID = "CheckBox"; - - public IScreen HostScreen { get; } - public ViewModelActivator Activator { get; } - - public string UrlPathSegment { get; } = ID; - - public bool? _controlledCheckBoxCheckedStatus; - - public bool? ControlledCheckBoxCheckedStatus - { - get => _controlledCheckBoxCheckedStatus; - set => this.RaiseAndSetIfChanged(ref _controlledCheckBoxCheckedStatus, value); - } - - public bool _controlledCheckBoxEnabledStatus; - - public bool ControlledCheckBoxEnabledStatus - { - get => _controlledCheckBoxEnabledStatus; - set => this.RaiseAndSetIfChanged(ref _controlledCheckBoxEnabledStatus, value); - } - - private string? _checkStatusBtnText; - - public string? CheckStatusBtnText - { - get => _checkStatusBtnText; - set => this.RaiseAndSetIfChanged(ref _checkStatusBtnText, value); - } - - private string? _enableStatusBtnText; - - public string? EnableStatusBtnText - { - get => _enableStatusBtnText; - set => this.RaiseAndSetIfChanged(ref _enableStatusBtnText, value); - } - - private string? _controlledCheckBoxText; - - public string? ControlledCheckBoxText - { - get => _controlledCheckBoxText; - set => this.RaiseAndSetIfChanged(ref _controlledCheckBoxText, value); - } - - // CheckAll 例子 - private bool? _checkedAllStatus; - - public bool? CheckedAllStatus - { - get => _checkedAllStatus; - set => this.RaiseAndSetIfChanged(ref _checkedAllStatus, value); - } - - private bool _appleCheckedStatus; - - public bool AppleCheckedStatus - { - get => _appleCheckedStatus; - set => this.RaiseAndSetIfChanged(ref _appleCheckedStatus, value); - } - - private bool _pearCheckedStatus; - - public bool PearCheckedStatus - { - get => _pearCheckedStatus; - set => this.RaiseAndSetIfChanged(ref _pearCheckedStatus, value); - } - - private bool _orangeCheckedStatus; - - public bool OrangeCheckedStatus - { - get => _orangeCheckedStatus; - set => this.RaiseAndSetIfChanged(ref _orangeCheckedStatus, value); - } - - public ReactiveCommand CheckStatusCommand { get; } - public ReactiveCommand EnableStatusCommand { get; } - public ReactiveCommand CheckBoxCommand { get; } - public ReactiveCommand CheckedAllStatusCommand { get; } - public ReactiveCommand CheckedItemStatusCommand1 { get; } - public ReactiveCommand CheckedItemStatusCommand2 { get; } - public ReactiveCommand CheckedItemStatusCommand3 { get; } - - public CheckBoxViewModel(IScreen screen) - { - HostScreen = screen; - Activator = new ViewModelActivator(); - - CheckStatusBtnText = "UnCheck"; - EnableStatusBtnText = "Disable"; - ControlledCheckBoxCheckedStatus = true; - ControlledCheckBoxEnabledStatus = true; - SetupControlledCheckBoxText(); - - AppleCheckedStatus = false; - PearCheckedStatus = true; - OrangeCheckedStatus = true; - CheckedAllStatus = null; - - EnableStatusCommand = ReactiveCommand.Create