Bulle de discussion
Affichage de messages conversationnels avec alignement par expéditeur, avatars et horodatages. Le style arrondi imite iMessage avec des bulles colorées et des coins en queue. Le style plat suit la disposition de Slack avec des noms en ligne, des horodatages et du texte indenté.
Arrondi
Bulles de discussion style iMessage avec arrière-plans colorés et coins arrondis
_chat_bubble.html.erb
███
████ ██████ █████████ █ ███████ █████ █████████
██████
███ ██████ █████████████████████████████████ █████████ █
█ ██████████ ████████ ████████ █████ █████ ██ ████████ ██████████ ██████ ████ █████ █████ ██
█ ██████████ ██████ ████████ ██████ ████████ ██████████ ██████ ████ █████ ████ █
█ ██
████████
chat_bubble_rounded_component.rb
█ ██████████████████████ ████
█████ ██████████████████████████ █ ███████████████████
█████████████ █ ███
██████████ █████████████ ████████████ ██████████████ ███████████
███████████ ██████████ ███████████ █████████████ █████████████
█████████████ ██████████████ ███████████ ███████████
████████
███ █████████████████████ █████████████ █████ ████████████████ █████ ████████ ██████ ████████████████
chat_bubble_rounded_component.html.erb
████ ██████████ █████████████████ ████
██ ████████████████████████ ██ █████████ ██████ ██
██ ████ █ ██████████████ ██
████ ██████████ ██████████████████ ████
██ ██ █████ ██ █████████████ ██
██ ██ █████████████████████ ██
████ ██████████ ███ ████████████ ████ ████████████ ██████████████ ████████ ███ █████████████████████████████████████ ████
█████ ██████████████ ███████████ ███████████████ █████████████████████████████████ █████████
██████
Plat
Messages plats style Slack avec noms en ligne et horodatages
_chat_bubble.html.erb
███
████ ██████ █████████ █ ████ █████ █████████
██████
███ ██████ ██████████████████████████████ █████████ █
█ ██████████ ████████ ████████ █████ █████ ██ ████████ ██████████ ██████ ████ █████ █████ ██
█ ██████████ ██████ ████████ ███████ █████ █████████ ██████████ ██████ ████ █████ █████ █
█ ██
████████
chat_bubble_flat_component.rb
█ ██████████████████████ ████
█████ ███████████████████████ █ ███████████████████
█████████████ █ ███
██████████ █████████████ ████████████ ██████████████ ███████████
███████████ ██████████ ███████████ █████████████ █████████████
█████████████ ██████████████ ███████████ ███████████
████████
███ █████████████████████ █████████████ █████ ████████████████ █████ ████████ ██████ ████████████████
chat_bubble_flat_component.html.erb
████ ██████████ █████████████████ ████
██ ████████████████████████ ██ █████████ ██████ ██
██ ██████ █ ███████████████████ ██
████ ██████████ ██████████████████ ████
██ ██ █████████████ ██
██ ██ ██████ ██
████ ███████████ ████ ██████████ ████ ████████████ ██████████████ ████████ ██████ ███ █████████████████████████████████████ ████
█████ ██████████████ ███████████ ███████████████ █████████████████████████████████ █████████
██████
Journal des modifications
- v1.0.0: Initial release with rounded and flat styles
Obtenir l'accès complet
Débloquez le code source de ce composant et de tous les autres. Paiement unique pour un accès à vie.
Obtenir l'accès maintenant