Fichiers joints

Le composant attach-file se compose d'une icone, du nom de fichier, du type de fichier et du poids du fichier.

Classes du composant

Modificateurs de tailles

.attach-file--sm : Small
.attach-file--md : Medium
.attach-file--lg : Large
.attach-file--xl : Extra-large

Exemples

<kuik:attach-file size="sm" title="Titre du fichier" link="/images/kuik-logo.svg" type="svg" filesize="3 Mo" />

Size

With type

With file size

With both

Icon

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true" %>
<%@ taglib prefix="kuik" uri="kuik" %>


<kuik:heading size="lg" skin="a" title="Size" level="3" />

<ul class="k-ul--reset">
    <li><kuik:attach-file size="sm" title="Titre du fichier" link="/images/kuik-logo.svg"/></li>
    <li><kuik:attach-file size="md" title="Titre du fichier" link="/images/kuik-logo.svg"/></li>
    <li><kuik:attach-file size="lg" title="Titre du fichier" link="/images/kuik-logo.svg"/></li>
    <li><kuik:attach-file size="xl" title="Titre du fichier" link="/images/kuik-logo.svg"/></li>
</ul>

<kuik:heading size="lg" skin="a" title="With type" level="3" />

<ul class="k-ul--reset">
    <li><kuik:attach-file size="sm" title="Titre du fichier" link="/images/kuik-logo.svg" type="svg"/></li>
    <li><kuik:attach-file size="md" title="Titre du fichier" link="/images/kuik-logo.svg" type="svg"/></li>
    <li><kuik:attach-file size="lg" title="Titre du fichier" link="/images/kuik-logo.svg" type="svg"/></li>
    <li><kuik:attach-file size="xl" title="Titre du fichier" link="/images/kuik-logo.svg" type="svg"/></li>
</ul>
<kuik:heading size="lg" skin="a" title="With file size" level="3" />

<ul class="k-ul--reset">
    <li><kuik:attach-file size="sm" title="Titre du fichier" link="/images/kuik-logo.svg" filesize="3 Mo"/></li>
    <li><kuik:attach-file size="md" title="Titre du fichier" link="/images/kuik-logo.svg" filesize="3 Mo"/></li>
    <li><kuik:attach-file size="lg" title="Titre du fichier" link="/images/kuik-logo.svg" filesize="3 Mo"/></li>
    <li><kuik:attach-file size="xl" title="Titre du fichier" link="/images/kuik-logo.svg" filesize="3 Mo"/></li>
</ul>

<kuik:heading size="lg" skin="a" title="With both" level="3" />
<ul class="k-ul--reset">
    <li><kuik:attach-file size="sm" title="Titre du fichier" link="/images/kuik-logo.svg" type="svg" filesize="3 Mo"/></li>
    <li><kuik:attach-file size="md" title="Titre du fichier" link="/images/kuik-logo.svg" type="svg" filesize="3 Mo"/></li>
    <li><kuik:attach-file size="lg" title="Titre du fichier" link="/images/kuik-logo.svg" type="svg" filesize="3 Mo"/></li>
    <li><kuik:attach-file size="xl" title="Titre du fichier" link="/images/kuik-logo.svg" type="svg" filesize="3 Mo"/></li>
</ul>

<kuik:heading size="lg" skin="a" title="Icon" level="3" />

<ul class="k-ul--reset">
    <li><kuik:attach-file title="Titre du fichier" link="/images/kuik-logo.svg"/></li>
    <li><kuik:attach-file title="Titre du fichier" link="/images/kuik-logo.svg" icon="icon://ui/pin"/></li>
    <li><kuik:attach-file title="Titre du fichier" link="/images/kuik-logo.svg" icon="icon://ui/pin-outline"/></li>
    <li><kuik:attach-file title="Titre du fichier" link="/images/kuik-logo.svg" icon="icon://ui/at-sign"/></li>
</ul>

Name	Type	Required	Description
link	java.lang.String	true	Lien vers le fichier à télécharger
title	java.lang.String	true	Titre du fichier à télécharger
type	java.lang.String	false	Type du fichier à télécharger
filesize	java.lang.String	false	Taille du fichier à télécharger
icon	java.lang.String	false	Icône (défaut : paperclip)
size	java.lang.String	false	Taille (défaut : sm)

$prefix: 'attach-file';
$prefix-title: 'attach-file__title';
$prefix-content: 'attach-file__content';
$prefix-meta: 'attach-file__meta';
$prefix-extension: 'attach-file__extension';
$prefix-weight: 'attach-file__weight';

.attach-file {
    @include custom-space($prefix, true);
    @include custom-border($prefix, true);
    @include custom-color($prefix, true);
    @include custom-typo($prefix, true);

    align-items: center;
    display: var(--disp, inline) flex;
}

.attach-file__icon {
    @include custom-icon-color;

    flex-shrink: 0;
}

.attach-file__content {
    @include custom-space($prefix, true);

    display: flex;
    flex-direction: column;
}

.attach-file__title {
    @include custom-color($prefix-title, true);
    @include custom-typo($prefix-title, true);

    font-style: normal;
    overflow: hidden;
    text-decoration: none;
    text-overflow: ellipsis;
    word-break: break-word;
}

.attach-file__meta {
    @include custom-space($prefix-meta, true);

    font-size: var(--size-meta);
}

.attach-file__extension {
    @include custom-color($prefix-extension, true);
    @include custom-typo($prefix-extension, true);
}

.attach-file__weight {
    @include custom-color($prefix-weight, true);
    @include custom-typo($prefix-weight, true);

    color: var(--filesize);
}

.attach-file--sm, .attach-file--md, .attach-file--lg, .attach-file--xl {
    .attach-file__title {
        @include custom-typo($prefix-title);
    }

    .attach-file__extension {
        @include custom-typo($prefix-extension);
    }

    .attach-file__weight {
        @include custom-typo($prefix-weight);
    }
}

.attach-file--block {
    --disp: block;
}

<%@ tag pageEncoding="UTF-8" trimDirectiveWhitespaces="true" dynamic-attributes="dynattrs" %>

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="kuik" uri="kuik" %>

<%@ attribute name="link" required="true" type="java.lang.String" description="Lien vers le fichier à télécharger" %>
<%@ attribute name="title" required="true" type="java.lang.String" description="Titre du fichier à télécharger" %>
<%@ attribute name="type" required="false" type="java.lang.String" description="Type du fichier à télécharger" %>
<%@ attribute name="filesize" required="false" type="java.lang.String" description="Taille du fichier à télécharger" %>
<%@ attribute name="icon" required="false" type="java.lang.String" description="Icône (défaut : paperclip)" %>
<%@ attribute name="size" required="false" type="java.lang.String" description="Taille (défaut : sm)" %>

<c:if test="${empty pageScope.icon}">
    <c:set var="icon" value="icon://ui/paperclip" />
</c:if>

<c:if test="${empty pageScope.size}">
    <c:set var="size" value="sm" />
</c:if>
<c:set var="classesSize" value="attach-file--${pageScope.size}"/>

<c:set var="classes" value="attach-file  ${classesSize}"/>

<c:set var="attributes">
    <c:forEach items="${dynattrs}" var="a">
        <c:choose>
            <c:when test="${a.key == 'class'}">
                <c:set value="${classes} ${a.value}" var="classes"/>
            </c:when>
            <c:otherwise>${a.key}="${a.value}" </c:otherwise>
        </c:choose>
    </c:forEach>
</c:set>

<div class="${pageScope.classes}" ${pageScope.attributes}>
    <kuik:icon title="" class="attach-file__icon" source="${pageScope.icon}" size="${pageScope.size}" />
    <span class="attach-file__content">
        <a class="attach-file__title" href="${pageScope.link}" download>${pageScope.title}</a>
        <span class="attach-file__meta">
            <c:if test="${not empty pageScope.type}">
                <span class="attach-file__extension">${pageScope.type}</span>
            </c:if>
            <c:if test="${not empty pageScope.filesize}">
                <span class="attach-file__weight">${pageScope.filesize}</span>
            </c:if>
        </span>
    </span>
</div>