{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# 头像\n",
    "\n",
    "一个包装Quasar的[QAvatar](https://quasar.dev/vue-components/avatar)组件的头像元素。"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "- `icon`：图标的名称或带有\"img:\"前缀的图像路径（例如`\"map\"`, `\"img:path/to/image.png\"`）\n",
    "- `color`：背景颜色（可以是Quasar、Tailwind或CSS颜色，或者`None`，默认值：`\"primary\"`）\n",
    "- `text_color`：来自Quasar色彩调色板的颜色名称（例如`\"primary\"`, `\"teal-10\"`）\n",
    "- `size`：CSS单位中的大小，包括单位名称或标准大小名称（`xs|sm|md|lg|xl`）（例如`\"16px\"`, `\"2rem\"`）\n",
    "- `font_size`：内容（图标，文字）的CSS单位大小，包括单位名称（例如`\"18px\"`, `\"2rem\"`）\n",
    "- `square`：移除border-radius以使边框成方形（默认值：`False`）\n",
    "- `rounded`：为组件的方形形状应用一个小的标准 `border-radius`（默认值：`False`）"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "<nicegui.elements.avatar.Avatar at 0x22b82869a90>"
      ]
     },
     "execution_count": 1,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "ui.avatar('favorite_border', text_color='grey-11', square=True)\n",
    "ui.avatar('img:https://nicegui.io/logo_square.png', color='blue-2')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## 照片\n",
    "要使用照片作为头像，您可以在 `ui.avatar` 内使用 `ui.image`。"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [],
   "source": [
    "from nicegui import ui\n",
    "\n",
    "with ui.avatar():\n",
    "    ui.image('https://robohash.org/robot?bgset=bg2')\n",
    "\n",
    "# ui.run()"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "py311",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.11.7"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}