cardTemplate

설명

선택 사항입니다. 카드에 사용자 정의 HTML 템플릿을 생성하고 적용합니다.

사용법

function cardTemplate ({ cardFields, selected, dragging, cardShape }){
    return "카드의 HTML 템플릿";
};

매개변수

콜백 함수는 다음 속성을 가진 객체를 전달받습니다:

• cardFields - 카드의 데이터가 포함되어 있습니다
• selected - 카드가 선택되었는지 여부를 나타냅니다
• dragging - 카드가 드래그 중인지 여부를 나타냅니다
• cardShape - 카드의 구성 객체입니다

important

카드 템플릿에 컨텍스트 메뉴를 추가하려면, 마크업에 사용자 정의 아이콘을 포함하고 아래 예제처럼 data-menu-id=${cardFields.id} 속성을 사용하세요.

예제

const cardTemplate = ({ cardFields, selected, dragging, cardShape }) => {
    const { label, color, id } = cardFields;
    if (selected) {
        return `
            <div className="custom-card" style={{padding: '20px'}}>
                <div className="status-color" style={{background: '${color}'}}></div>
                <div data-menu-id=${id} >
                    <i className="wxi-dots-v"></i>
                </div>
                Selected:${label}
            </div>
        `;
    }
    return `
        <div className="custom-card" style={{padding: '20px'}}>
            <div className="status-color" style={{background: '${color}'}}></div>
            <div data-menu-id=${id} >
                <i className="wxi-dots-v"></i>
            </div>
            ${label}
        </div>
    `;
}

new kanban.Kanban("#root", {
    cards,
    columns,
    cardTemplate: kanban.template(card => cardTemplate(card)),
    // 기타 매개변수
});

변경 로그: 컨텍스트 메뉴 지원은 v1.4에 도입되었습니다.

관련 문서: 커스터마이징

관련 샘플: Kanban. Custom card