* kanban: support to set col title alignment.

easysoft · Jan 2, 2024 · 34b6de2 · 34b6de2
1 parent 07dfa00
commit 34b6de2
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 1 deletion.
diff --git a/lib/kanban/dev.ts b/lib/kanban/dev.ts
@@ -27,6 +27,7 @@ onPageLoad(() => {
         },
         editLinks: true,
         colProps: {
+            titleAlign: 'left',
             /* 通过 actions 自定义列操作按钮（actions 还可以为一个回调函数动态返回操作按钮设置）。 */
             actions: () => {
                 return [{

diff --git a/lib/kanban/src/component/kanban-header-col.tsx b/lib/kanban/src/component/kanban-header-col.tsx
@@ -35,6 +35,7 @@ export class KanbanHeaderCol extends HElement<KanbanColProps> {
             prefixClass,
             title,
             titleClass,
+            titleAlign = 'center',
             subtitle,
             subtitleClass,
             icon,
@@ -44,7 +45,7 @@ export class KanbanHeaderCol extends HElement<KanbanColProps> {
         } = props;
 
         return [
-            <div key="wrapper" className="kanban-header-col-wrapper">
+            <div key="wrapper" className={`kanban-header-col-wrapper is-align-${titleAlign}`}>
                 <div key="title" className="kanban-header-title">
                     {icon ? <Icon key="icon" className="as-leading-icon" icon={icon} /> : null}
                     {prefix ? <span key="prefix" className={classes('as-prefix', prefixClass)}><CustomContent content={prefix} /></span> : null}

diff --git a/lib/kanban/src/style/kanban.css b/lib/kanban/src/style/kanban.css
@@ -28,6 +28,12 @@
 .kanban-header-col-wrapper {
   @apply -bg-surface -relative -px-14 -w-full -flex-1 -flex -flex-row -items-center;
 }
+.kanban-header-col-wrapper.is-align-left {
+  @apply -justify-start -pl-2;
+}
+.kanban-header-col-wrapper.is-align-left > .kanban-header-title {
+  @apply -justify-start;
+}
 .kanban-header-title {
   @apply -flex -flex-row -items-center -flex-auto -justify-center -overflow-hidden;
 }

diff --git a/lib/kanban/src/types/kanban-col-options.ts b/lib/kanban/src/types/kanban-col-options.ts
@@ -20,6 +20,7 @@ export interface KanbanColOptions extends HElementProps {
     prefixClass?: ClassNameLike;
     title?: CustomContentType;
     titleClass?: ClassNameLike;
+    titleAlign?: 'left' | 'center',
     subtitle?: CustomContentType;
     subtitleClass?: ClassNameLike;
     icon?: IconType;