Statut
-
Component checklist
Usage
Exemples d'intégration de l'accordéon sur différents framework:
<dsa-avatar-group>
<dsa-avatar label="Avatar 1 sur 4"> </dsa-avatar>
<dsa-avatar label="Avatar 2 sur 4">
<dsa-icon name="star" slot="icon"></dsa-icon>
</dsa-avatar>
<dsa-avatar initials="A3" label="Avatar 3 sur 4"></dsa-avatar>
<dsa-avatar label="Avatar 4 sur 4">
<dsa-icon name="star" slot="icon"></dsa-icon>
</dsa-avatar>
</dsa-avatar-group>
<script type="text/typescript">
import '@ds-autonomie/web-components/dist/components/avatar/avatar.js';
import '@ds-autonomie/web-components/dist/components/avatar-group/avatar-group.js';
import type { DSAAvatar, DSAAvatarGroup } from '@ds-autonomie/web-components';
</script>
Code HTML à implémenter pour utiliser le composant groupe d'avatar
import type { DSAAvatar, DSAAvatarGroup } from '@ds-autonomie/web-components';
import '@ds-autonomie/web-components/dist/components/avatar/avatar.js';
import '@ds-autonomie/web-components/dist/components/avatar-group/avatar-group.js';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {}
app.component.ts
<dsa-avatar-group>
<dsa-avatar label="Avatar 1 sur 4"> </dsa-avatar>
<dsa-avatar label="Avatar 2 sur 4">
<dsa-icon name="star" slot="icon"></dsa-icon>
</dsa-avatar>
<dsa-avatar initials="A3" label="Avatar 3 sur 4"></dsa-avatar>
<dsa-avatar label="Avatar 4 sur 4">
<dsa-icon name="star" slot="icon"></dsa-icon>
</dsa-avatar>
</dsa-avatar-group>
app.component.html
API