响应式即时聊天布局方案
页面结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Telegram</title>
<link href="https://unpkg.com/tailwindcss/dist/tailwind.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js" integrity="sha256-KzZiKy0DWYsnwMF+X1DvQngQ2/FxF7MF3Ff72XcpuPs=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/gh/alpinejs/alpine@v2.x.x/dist/alpine.min.js" defer></script>
</head>
<body>
</body>
</html>
页面布局
页面布局
布局采用从左至右三栏布局，分别左侧区域、中间区域、右侧区域。
- 左侧区域：用户分组和成员列表以及搜索
- 中间区域：聊天对话
- 右侧区域：个人资料展示
<div class="relative flex w-full h-screen overflow-hidden bg-gray-100 antialiased">
<!--left-->
<div class="relative flex flex-col hidden h-full w-1/3 bg-white border-r border-gray-200 shadow-lg transform trasition-all duration-500 ease-in-out hidden md:block">left</div>
<!--content-->
<div class="flex-1 relative flex flex-col">content</div>
<!--right-->
<div class="w-1/3 right-0 pb-2 bg-white border-l border-gray-200 flex flex-col hidden xl:block">right</div>
</div>
左侧区域
左侧区域
左侧区域从上到下分为四个部分，分别是
- 搜索区域
- 切换控制区域
- 切换内容区域
- 固定按钮
<!--left-->
<div class="relative flex flex-col hidden h-full w-1/3 bg-white border-r border-gray-200 shadow-lg transform trasition-all duration-500 ease-in-out hidden md:block">
<!--search-->
<div class="px-3 pt-1 text-white flex justify-between"></div>
<!--tab control-->
<div class="border-b shadow-bot"></div>
<!--tab content-->
<div class="relative mt-2 mb-4 overflow-x-hidden overflow-y-auto scrolling-touch scrollbar-w-2 scrollbar-track-gray-lighter scrollbar-thumb-rounded scrollbar-thumb-gray lg:max-h-sm"></div>
<!--fixed button-->
<div class="fixed absolute right-0 bottom-0 z-40 mr-4 mb-6"></div>
</div>
搜索区域
搜索区域
搜索区域水平可划分为两部分分别是
- 侧边栏伸缩按钮
- 带搜索符号的搜索栏
<div class="px-3 pt-1 text-white flex justify-between">
<div class="py-2 w-full flex items-center">
<button class="p-2 rounded-full text-gray-700 focus:outline-none hover:bg-gray-200 hover:text-gray-600"></button>
<div class="relative pl-2 w-full overflow-hidden text-gray-600 flex items-center focus-within:text-gray-400"></div>
</div>
</div>
侧边栏伸缩按钮
<button class="p-2 rounded-full text-gray-700 focus:outline-none hover:bg-gray-200 hover:text-gray-600">
<i class="fas fa-bars w-6 h-6 fill-current text-gray-600" ></i>
</button>
左侧带搜索按钮的搜索栏
搜索栏
<div class="relative pl-2 w-full overflow-hidden text-gray-600 flex items-center focus-within:text-gray-400">
<span class="absolute inset-y-0 left-0 pl-4 flex items-center">
<button class="p-1 focus:outline-none focus:shadow-none">
<i class="fas fa-search w-6 h-6 fill-current"></i>
</button>
</span>
<input type="search"
class="w-full pl-12 py-2 bg-gray-200 border border-transparent rounded-tg appearance-none text-sm text-white focus:bg-white focus:outline-none focus:border-blue-500 focus:text-gray-900 focus:shadow-outline-blue" placeholder="请输入搜索关键字" autocomplete="off">
</div>
切换控制区域
切换控制区域
- 控制按钮采用
ul-li-a的形式 - 最后一个
li右边距为0 - 每个
li上移1px用于设置底边框2px
<!--tab control-->
<div class="border-b shadow-bot">
<ul class="list-none select-no inline-block px-2 flex flex-row items-center text-center">
<li class="flex-auto mx-1 last:mr-0 -mb-px px-1 rounded-t-lg cursor-pointer hover:bg-gray-200">
<a href=""
class="block py-2 leading-normal tracking-wide border-b-2 border-transparent hover:border-blue-500 text-xs font-semibold flex items-center justify-center">所有</a>
</li>
<li class="flex-auto mx-1 last:mr-0 -mb-px px-1 rounded-t-lg cursor-pointer hover:bg-gray-200">
<a href=""
class="block py-2 leading-normal tracking-wide border-b-2 border-transparent hover:border-blue-500 text-xs font-semibold flex items-center justify-center">工作</a>
</li>
<li class="flex-auto mx-1 last:mr-0 -mb-px px-1 rounded-t-lg cursor-pointer hover:bg-gray-200">
<a href=""
class="block py-2 leading-normal tracking-wide border-b-2 border-transparent hover:border-blue-500 text-xs font-semibold flex items-center justify-center">
私有
<span class="ml-1 w-5 h-5 bg-blue-500 rounded-full text-xs text-white flex items-center justify-center">2</span>
</a>
</li>
<li class="flex-auto mx-1 last:mr-0 -mb-px px-1 rounded-t-lg cursor-pointer hover:bg-gray-200">
<a href=""
class="block py-2 leading-normal tracking-wide border-b-2 border-transparent hover:border-blue-500 text-xs font-semibold flex items-center justify-center">群组</a>
</li>
<li class="flex-auto mx-1 last:mr-0 -mb-px px-1 rounded-t-lg cursor-pointer hover:bg-gray-200">
<a href=""
class="block py-2 leading-normal tracking-wide border-b-2 border-transparent hover:border-blue-500 text-xs font-semibold flex items-center justify-center">频道</a>
</li>
</ul>
</div>
切换内容区域
切换内容区域
<!--tab content-->
<div class="relative mt-2 mb-4 overflow-x-hidden overflow-y-auto scrolling-touch scrollbar-w-2 scrollbar-track-gray-lighter scrollbar-thumb-rounded scrollbar-thumb-gray lg:max-h-sm">
<ul class="select-none inline-block px-2 w-full h-screen flex flex-col text-black">
<li class="mt-200 py-65 pr-3 rounded-lg cursor-pointer flex flex-no-wrap items-center hover:bg-gray-200">
<div class="w-full flex justify-between focus:outline-none">
<div class="w-full flex justify-between">
<div class="relative ml-2 mr-3 w-12 h-12 bg-blue-500 rounded-full text-xl font-semibold text-white flex items-center justify-center flex-no-shrink">
<img src="http://source.unsplash.com/100x100/?avatar" class="w-12 h-12 rounded-full object-cover object-center">
<div class="absolute right-0 bottom-0 bg-white rounded-full flex items-center justify-center">
<div class="w-3 h-3 bg-green-500 rounded-full"></div>
</div>
</div>
<div class="min-w-0 flex-1 items-center">
<div class="mb-1 flex justify-between">
<h2 class="text-sm font-semibold">标题</h2>
<div class="flex">
<i class="fas fa-check w-4 h-4 fill-current text-green-500"></i>
<i class="fas fa-check w-4 h-4 fill-current text-transparent"></i>
<span class="ml-1 text-xs font-medium text-gray-600">12.52</span>
</div>
</div>
<div class="leading-none truncate text-sm flex justify-between">
<span>副标题</span>
<span class="w-5 h-5 bg-green-500 rounded-full text-xs text-white text-right flex items-center justify-center">2</span>
</div>
</div>
</div>
</div>
</li>
</ul>
</div>
固定按钮
固定按钮
<!--fixed button-->
<div class="fixed absolute right-0 bottom-0 z-40 mr-4 mb-6 text-white">
<button class="mr-3 w-12 h-12 bg-blue-500 rounded-full text-xl font-semibold flex items-center justify-center flex-no-shrink focus:outline-none">
<i class="fas fa-pen w-6 h-6 fill-current"></i>
</button>
</div>
中间区域
中间区域从上到下划分为两部分，头部标题栏与对话内容和输入框。
- 中间头部区域
- 中间内容区域
<!--center-->
<div class="flex-1 relative flex flex-col">
<!--header-->
<div class="flex-grow-0 flex-shrink-0 z-20 p-2 w-full bg-white border-b flex"></div>
<!--content-->
<div class="flex-1 inset-0 overflow-hidden bg-transparent bg-bottom bg-cover"></div>
</div>
中间头部区域
中间头部
<!--header-->
<div class="flex-grow-0 flex-shrink-0 z-20 p-2 w-full bg-white border-b flex items-center">
<!--avatar-->
<div class="mx-4 w-12 h-12 bg-cover bg-center bg-no-repeat rounded-full cursor-pointer" style="background-image:url('http://source.unsplash.com/100x100/?avatar')"></div>
<!--title-->
<div class="flex-1 flex flex-col justify-center overflow-hidden cursor-pointer text-gray-600 font-medium">
<div class="overflow-hidden leading-tight text-base whitespace-no-wrap">姓名</div>
<div class="overflow-hidden leading-tight text-sm whitespace-no-wrap">在线</div>
</div>
<!--message-->
<div class="relative pl-2 w-48 border-l-2 border-blue-500 cursor-pointer hidden lg:block">
<div class="text-base font-medium text-blue-500">固定邮件</div>
<div class="text-sm font-normal text-gray-800">今日明星赛</div>
</div>
<!--action-->
<button class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center">
<i class="fas fa-bell fill-current text-gray-600"></i>
</button>
<button class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center">
<i class="fas fa-search fill-current text-gray-600"></i>
</button>
<div class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center hidden md:block">
<i class="fas fa-search fill-current text-gray-600"></i>
</div>
<button class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center">
<i class="fas fa-bars fill-current text-gray-600"></i>
</button>
</div>
中间内容区域
image.png
中间区域是一个即时通讯的对话界面，这里从上到下划分为三栏。
<!--center-->
<div class="flex-1 relative flex flex-col">
<!--header-->
<div class="flex-grow-0 flex-shrink-0 z-20 p-2 w-full bg-white border-b flex items-center">
<!--avatar-->
<div class="mx-4 w-12 h-12 bg-cover bg-center bg-no-repeat rounded-full cursor-pointer" style="background-image:url('http://source.unsplash.com/100x100/?avatar')"></div>
<!--title-->
<div class="flex-1 flex flex-col justify-center overflow-hidden cursor-pointer text-gray-600 font-medium">
<div class="overflow-hidden leading-tight text-base whitespace-no-wrap">姓名</div>
<div class="overflow-hidden leading-tight text-sm whitespace-no-wrap">在线</div>
</div>
<!--message-->
<div class="flex-1 relative pl-2 border-l-2 border-blue-500 cursor-pointer hidden lg:block">
<div class="text-base font-medium text-blue-500">固定邮件</div>
<div class="text-sm font-normal text-gray-800">今日明星赛</div>
</div>
<!--action-->
<button class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center">
<i class="fas fa-bell fill-current text-gray-600"></i>
</button>
<button class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center">
<i class="fas fa-search fill-current text-gray-600"></i>
</button>
<div class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center hidden md:block">
<i class="fas fa-qrcode fill-current text-gray-600"></i>
</div>
<button class="ml-2 p-2 rounded-full text-gray-500 focus:outline-none hover:bg-gray-300 hover:text-gray-600 flex self-center">
<i class="fas fa-ellipsis-v fill-current text-gray-600"></i>
</button>
</div>
<!--content-->
<div class="flex-1 inset-0 overflow-hidden bg-transparent bg-bottom bg-cover flex flex-col">
<!--dialog-->
<div class="flex-1 w-full self-center">
<div class="relative px-3 py-1 m-auto flex flex-col">
<div class="mx-0 my-1 self-center text-xs text-gray-400">频道已创建</div>
<div class="mx-0 my-1 self-center text-xs text-gray-400">12:21 AM</div>
<div class="my-2 self-start flex items-center">
<img src="http://source.unsplash.com/100x100/?man" class="mr-2 w-12 h-12 rounded-full">
<div class="p-4 rounded-t-lg rounded-r-lg bg-white shadow text-sm">不要忘记检查所有的自适应情况</div>
</div>
<div class="my-2 self-end flex items-center flex-row flex-row-reverse">
<img src="http://source.unsplash.com/100x100/?woman" class="ml-2 w-12 h-12 rounded-full">
<div class="p-4 rounded-t-lg rounded-l-lg bg-white shadow text-sm">在编辑器使用按钮来检查</div>
</div>
</div>
</div>
</div>
<!--input-->
<div class="relative p-4 w-full overflow-hidden text-gray-600 focus-within:text-gray-400 flex items-center">
<span class="absolute inset-y-0 left-0 pl-6 flex items-center">
<button class="p-1 focus:items-center focus:shadow-none">
<i class="fas fa-smile w-6 h-6 fill-current"></i>
</button>
</span>
<input type="text" class="appearance-none pl-10 py-2 w-full bg-white border border-gray-300 rounded-full text-sm placeholder-gray-800 focus:outline-none focus:border-blue-500 focus:border-blue-500 focus:shadow-outline-blue" placeholder="" autocomplete="off">
<span class="absolute inset-y-0 right-0 pr-6 flex items-center">
<button class="p-1 focus:outline-none focus:shadow-none hover:text-blue-500 align-middle">
<i class="fas fa-paper-plane w-6 h-6 full-current"></i>
</button>
</span>
</div>
</div>
右侧区域
右侧区域
右侧区域为个人信息展示区域，从上到下分两部分，头部为控制区域，下面为信息内容区域。
头部控制按钮
头部控制区域
<!--header-->
<div class="p-3 w-full flex items-center justify-between text-gray-500">
<!--button-->
<button class="p-2 rounded-full focus:outline-none focus:text-gray-600 hover:bg-gray-200">
<i class="fas fa-times w-6 h-6 fill-current"></i>
</button>
<!--title-->
<div class="ml-4 mr-auto text-lg font-medium">用户资料</div>
<!--button-->
<button class="p-2 rounded-full focus:outline-none focus:text-gray-600 hover:bg-gray-200">
<i class="fas fa-pen w-6 h-6 fill-current"></i>
</button>
<!--button-->
<button class="ml-1 p-2 rounded-fill focus:outline-none focus:text-gray-600 hover:bg-gray-200">
<i class="fas fa-ellipsis-v w-6 h-6 fill-current"></i>
</button>
</div>
个人信息展示
<!--avatar-->
<div class="mb-4 flex justify-center">
<button class="content-center block p-1 w-32 h-32 overflow-hidden rounded-full text-center focus:outline-none">
<img src="http://source.unsplash.com/100x100/?lady"
class="content-center object-cover object-center rounded-full w-full h-full border-2 border-gray-200">
</button>
</div>
<!--name-->
<div class="text-lg text-center text-gray-800 font-semibold">姓名</div>
<!--online-->
<div class="text-sm text-center text-gray-500 font-medium">在线状态</div>
<!--contact-->
<div class="mt-6 px-3 w-full flex items-center">
<!--icon-->
<div class="px-2 rounded-full text-gray-600 hover:text-gray-600">
<i class="fas fa-university fa-2x fill-current"></i>
</div>
<!--text-->
<div class="ml-4">
<div class="mr-auto text-sm text-gray-800 font-semibold">毕业院校</div>
<div class="mt-1 mr-auto leading-none text-sm text-gray-600 font-semibold">专业名称</div>
</div>
</div>
<div class="mt-6 px-3 w-full flex items-center">
<!--icon-->
<div class="px-2 rounded-full text-gray-600 hover:text-gray-600">
<i class="fas fa-phone fa-2x fill-current"></i>
</div>
<!--text-->
<div class="ml-4">
<div class="mr-auto text-sm text-gray-800 font-semibold">0123456789</div>
<div class="mt-1 mr-auto leading-none text-sm text-gray-600 font-semibold">手机号码</div>
</div>
</div>
<div class="mt-6 px-3 w-full flex items-center">
<!--icon-->
<div class="px-2 rounded-full text-gray-600 hover:text-gray-600">
<i class="fas fa-envelope fa-2x fill-current"></i>
</div>
<!--text-->
<div class="ml-4">
<div class="mr-auto text-sm text-gray-800 font-semibold">junchow520@hotmail.com</div>
<div class="mt-1 mr-auto leading-none text-sm text-gray-600 font-semibold">电子邮箱</div>
</div>
</div>
<!--tab-->
<ul class="list-none select-none mt-4 px-3 border-b flex flex-row items-center justify-around">
<li class="flex-auto mx-1 last:mr-0 -mb-px px-4 rounded-t-lg text-center cursor-pointer hover:bg-gray-200">
<a href=""
class="block py-3 border-b-4 border-blue-500 leading-normal text-xs text-blue-500 font-bold uppercase">相片</a>
</li>
<li class="li flex-auto mx-1 last:mr-0 -mb-px px-4 rounded-t-lg text-center cursor-pointer hover:bg-gray-200">
<a href=""
class="block py-3 border-b-4 border-transparent leading-normal text-xs font-bold uppercase">文档</a>
</li>
</ul>
网友评论