首页 > 其他分享 >chakra-ui学习笔记(一)

chakra-ui学习笔记(一)

时间:2024-04-23 22:11:42浏览次数:24  
标签:Flex component 笔记 组件 ui chakra Stack

前言:发现chakra-ui也不错,虽然比起antd功能稍少一点。

 

1,Stack与Flex区别

Notes on Stack vs Flex#
The Stack component and the Flex component have their children spaced out evenly but the key difference is that the Stack won't span the entire width of the container whereas the Flex will. Another thing to note is that the items in both Stack and Flex are aligned in the center by default.

关于Stack与Flex的注意事项#
Stack组件和Flex组件的子级间隔均匀,但关键区别在于Stack不会跨越容器的整个宽度,而Flex会。另一件需要注意的事情是,默认情况下,Stack和Flex中的项目都在中心对齐。

 

2,文档模块

(1)styled system

 

Style props are a way to alter the style of a component by simply passing props to it. It helps to save time by providing helpful shorthand ways to style components.

样式属性是一种通过简单地将道具传递给组件来改变其样式的方法。它通过提供有用的速记方法来样式组件,从而有助于节省时间。

包含:margin和padding;color和bg(backgroundColor);gradient渐变;typography文字排版;layout,width和height;display;flexbox;grid layout;background;borders;border radius;position;shadow;filter过滤;as

 (2)Components

(3)Hooks

 

标签:Flex,component,笔记,组件,ui,chakra,Stack
From: https://www.cnblogs.com/zccst/p/18153883

相关文章

  • 开源项目tiny11builder对Windows11进行精简
    由于采用的是Powershell脚本,系统默认的策略是阻止运行的,需要以管理员身份运行Powershell后,输入以下命令:Set-ExecutionPolicyunrestricted将「tiny11builder」解压,在文件“tiny11maker.ps1”上鼠标右键→使用PowerShell运行。   提前下载好官方原版Windows11镜像,双击虚......
  • Android开发笔记[18]-使用本地模块
    摘要将摄像头预览页面封装到Android模块中并在app中使用这个本地模块.关键信息AndroidStudio:Iguana|2023.2.1Gradle:distributionUrl=https://services.gradle.org/distributions/gradle-8.4-bin.zipjvmTarget='1.8'minSdk26targetSdk34compileSdk34开发语言:K......
  • Java SE 笔记搬运
    本科过过两遍JavaSE,但是由于考研等不可抗力因素很久未接触代码,因工作需求这里将四年前的Java笔记重新整理搬运,方便Java学习。——————————————————————————————————————————————————————————————继承/*私有化的......
  • python爬虫—学习笔记-4
    课堂内容:删除原导出文件的venv,pycham打开此文夹,重新创建本地虚拟编译器。安装依赖库,打开pycham终端输入pipinstall-ryilaiku.txt,安装依赖库中的库。继续安装bs4、lxml库,命令为:pipinstallbs4和pipinstalllxml。安装好后,pycham来到spiders目录下,新建Python......
  • QT 程序使用 Framebuffer 显示 UI
    桌面版本的Linux都会带有类似xorg这样的图形服务,桌面程序和应用程序的UI都是通过图形服务渲染的。但是有些系统为了减少系统体积、提升性能,会把图像服务和没有用到的模块裁剪掉,如:嵌入式系统。没有图形服务程序就不能直接渲染显示UI,这时候我们可以使用Framebuffer进行渲......
  • [哈工大软件工程期末考试] 《软件过程与项目管理》复习笔记
    软件过程与项目管理复习第一章:软件及软件工程软件的概念什么是软件?软件是一组对象或项目所形成的一个“配置”,由程序、文档、数据等部分构成。软件的四大特性复杂性不可见性易变性一致性软件工程的发展软件的发展阶段第一阶段主要用于数值计算的需求完全依......
  • 5款开源、美观、强大的WPF UI组件库
    前言经常看到有小伙伴在DotNetGuide技术社区交流群里提问:WPF有什么好用或者好看的UI组件库?,今天大姚给大家分享5款开源、美观、强大、简单易用的WPFUI组件库。WPF介绍WPF是一个强大的桌面应用程序框架,用于构建具有丰富用户界面的Windows应用。它提供了灵活的布局、数据绑定......
  • 基于 ESPHome 的 3D 打印机舱内控制系统(2): FireBeetle 2 ESP32-C6 + Moonraker Sens
    前言前文配置好了开发环境,本文测试Moonraker的Sensor组件,通过MQTT读取FireBeetle2的DHT温湿度传感器数据并显示到Fluidd网页上。本文涉及的硬件:DFRoborFireBeetle2ESP32-C6迷你开发板DHT22温湿度传感器IICOLED单色显示屏本文涉及的软件:ESPHome2024.......
  • 《向上生长》读书笔记
    Title:《向上生长》Author:九边Genre:个人成长;情绪;心灵;Rating:❤️❤️❤️Date:2021-01-08总结《向上生长》卖的就是基于阅历的信息差像这种价值观输出的书籍,能让年轻人看得入迷的一个重要原因是:基于读者和作者之间阅历差距而产生的信息差,年轻读者一看到这些内容仿佛打开了新世界的......
  • 【编译原理】原理笔记
    随便记点防止期末烂掉语法分析直接左递归的消除实际就是左递归转右递归法1:直接替换\[A\rightarrowA\alpha|\beta\Rightarrow\begin{cases}A\rightarrow\betaA',\\A'\rightarrow\alphaA'|\epsilon\end{cases}\]法2:矩阵法前置知识:\[I=\begin{pmatrix}\epsilo......