spring_raining (LINE株式会社) UIT meetup vol.11『フロントエンド紅白LT合戦』での発表資料です https://uit.connpass.com/event/197740/
タグ検索の該当結果が少ないため、タイトル検索結果を表示しています。
🐼 パンダが来た / Panda CSS Chakra UI から、新しい CSS フレームワークである Panda CSS がリリースされました。 2023 年 3 月に公開された Chakra UI の今後のロードマップに関するブログ内でもすでに言及されていましたが、今回それが正式にリリースされた形となります。 Panda CSS の特徴 リポジトリ内 README からの抜粋となりますが、次のような特徴があります。 ⚡️ Write style objects or style props, extract them at build time → Style 用のオブジェクトや Props を定義してビルドで抽出 ✨ Modern CSS output — cascade layers @layer, css variables and more → Cascade Layers
v2.4.2からChakraBaseProviderというものが追加されています。 これにはToastProviderが含まれており結果としてframer-motionがbundleされてしまうので、より軽量に使いたい方は本記事の内容を参考にしてみてください。 https://github.com/chakra-ui/chakra-ui/releases/tag/%40chakra-ui%2Freact%402.4.2 はじめに この記事で説明しているChakraProviderの使い方は公式ドキュメントで推奨されているものではありませんのでご了承ください。 概要 @chakra-ui/reactではなく@chakra-ui/providerのChakraProviderを使う themeはextendThemeを使わずcomponentsのthemeを外す @chakra-ui/cliで
EDIT: An additional project has been added as an example: Apartmentfy If you want to build an application or a website you need to take care of many things and in that sea of options which component library, css or ui framework will take a big role in the final version of your product. I have tried some component libraries like Material UI, Antd, React Boostrap and other CSS frameworks like styled
はじめに おはようございます、もきゅりんです。 月からの啓示を受けて、Chakra UI の学習していました。 遥か昔に学習した CSS がまるで記憶になかったので、CSS: カスケーディングスタイルシート | MDN でざっと復習しました。 そして、コンテンツ内にある CSS レイアウト料理帳を見て、これを Chakra UI で対応してみるときっと良い総まとめになるゾ!と思ってやってみました。 そして、ついでにブログにしました。 ソースは こちら です。 なお、自分は AWSのソリューションアーキテクトではあるのですが、フロントエンドは見様見真似のお猿さんなので、クオリティへの期待は禁物です。 生暖かい目で眺めて下さい。 ついでに「よく、がんばったな。でも、こうしたらもっと良くなるぞ? boy。」みたいなコメント貰えたら嬉しいです。 Chakra UI の使い方のベストプラクティスとか
I've been working on Chakra UI for the past five years, and I'm very proud of what we've achieved collectively. With our growing team, we've achieved over 1.9M downloads per month, 2M unique website visits per month, and over 31k Github stars; this has been one of my most rewarding projects to date. For a project that started with a single maintainer to become a multi-framework team, this has been
3 行まとめ css mixin を使うことで、複数のコンポーネントで使い回せるスタイルヘルパを作成できるcsstype を使って、Typography, Space, Color などの型付き props を作ることができる基礎コンポーネントに型付き props を混ぜて受けられるようにし、mixin で受けてスタイリングさせることで、Chakra UI のような型安全なスタイル記述ができるようになる何がしたかったかこういう Chakra UI みたいな書き方がしたかったので、styled-components でやれるかを試したのが今回の記事の主題です。 export default function App() { return ( <VStack spacing={4} w="100vw" h="100vh" px={4} py={8} bgColor={palette.white
UIをコンポーネント化(画面部品化)して、再利用性を高められるのは、Reactの大きな特徴のひとつです。この特徴を活かして、統一されたデザインを持ち、カスタマイズ性にも優れたUIライブラリが、数多く提供されています。本記事では、特に生産性とカスタマイズ性にフォーカスして作られた、Chakra UIというライブラリについて解説します。 対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Big Sur 11.4 Node.js 16.6.1/npm 7.20.3 React 17.0.2 react-scripts 4.0.3 @chakra-ui/react 1.6.6 スタイルに一貫性を持たせる難しさ 前回、前々回は、Material-UIについて解説し
Reactでフォームを作成する際に使いやすいライブラリ「React Hook Form」を使ったフォームを、最近流行りの「Chakra UI」を使って作成したいと思います。 DEMO React Hook Form 使いやすさに重点を置いた、React用の高性能なフォームバリデーションライブラリ。 同様のライブラリ「Formik」や「Redux-Form」に比べ、コンポーネントの再レンダリングが少なく、パフォーマンスに優れた作りとなっています。 Chakra UI 2021/01/05現在、スター数13.9kと、急成長中のReact UIコンポーネントライブラリ。 あらかじめ多くのデザインパーツが揃っているので、すぐにReactアプリに導入が可能です。 WAI-ARIA準拠の設計で、アクセシビリティにも配慮されています。 下記のように必要なコンポーネントを呼び出して使います。 import
背景 さまざまなCSS フレームワークが登場し、最近は Tailwind CSSが注目され話題になっていたのは認識していました。そんな中、一部でChakra UIなるものの名前も見るようになり、さらにTailwind CSSと比較される書き方をされることが多いように感じ気になっていました。 また、React Developer Roadmap2021の Stylingにあり、使ってみたいと思っていたのもあります。 参考: https://roadmap.sh/react 私はReact を使用する場面が業務でも個人開発でも多いのですが、個人的にReact UserはChakra UI推しが多いように感じたのも使ってみようと思った理由の一つです。 https://www.reddit.com/r/nextjs/comments/jznkit/tailwindcss_vs_chakra_ui_
はじめに こんにちは、開発事業部ソフトウェアエンジニアの柳澤です。 今年の春からキカガクにジョインしました。 前職ではWebエンジニアとしてプレーンな CSS を書いていましたが、キカガクではスタイリングのために Chakra UI(ReactのUIコンポーネントフレームワーク)を採用しています。 プレーン CSS ユーザーが、 Chakra UI を使う上で躓いたポイントがいくつかあったので、今回小技集としてまとめました。同じ境遇の方の助けになりますと幸いです。 Chakra UI を学ぶ際に、下記の本が大変参考になりました。 zenn.dev 今回はこちらを読んだ上で、特に難しかった項目をピックアップして書いていきたいと思います。 疑似要素・疑似クラス同士を組み合わせる まず最初に、疑似要素・疑似クラスを組み合わせる書き方です。 Chakra UI では &:hover は _hove
対象読者 JavaScriptとWeb開発の基礎に理解がある方 Reactを用いたJavaScriptアプリケーション開発の経験者 前提環境 筆者の検証環境は以下の通りです。 macOS Big Sur 11.5.2 Node.js 16.11.1/npm 8.0.0 React 17.0.2 react-scripts 4.0.3 @chakra-ui/react 1.6.10 Webアプリ制作時に嬉しいコンポーネントとHooks 前回に引き続き、今回もChakra UIについて解説します。Chakra UIは、React向けのUIライブラリとしては後発の部類ですが、Webアプリケーション制作で必要となるコンポーネントを多く備えていることからか、たくさんの採用事例が現れました。最近だとメルカリShopsのフロントエンド実装で採用されたのが記憶に新しいですね。 どんなコンポーネントやHoo
Hello. I'm Takuya Matsuyama from Osaka, Japan, an indie developer making a Markdown note-taking app called Inkdrop. In this video, I share how I built my portfolio website using Next.js, Chakra UI, Framer Motion, and Three.js. I hope you enjoy it! ▶ Check out my product: Inkdrop - Markdown note-taking app https://www.inkdrop.app/?utm_source=devaslife&utm_medium=youtube&utm_campaign=vlog&utm_conte
はじめに この記事は新しい技術にチャレンジし続けるpalanのアドベントカレンダーDay15の記事です! 昨日は「話題のノーコードツールを使ってみた」でした。 話題のノーコードツールを使ってみた 今回は、Chakra UIについてご紹介いたします。 Chakra UIとは、UIコンポーネントフレームワークの一つです。Reactのライブラリなので、エンジニアの方にとっては馴染み深い名前かもしれません。 スピード重視で0からデザインを作成する必要がある時に役立つと思います!一緒に学んでいきましょう! Chakra UIの概要 Chakra UIは、コンポーネントの一貫性を保つ原理に基づいて作られたものであり、シンプルで実際に起こるUIデザインの問題に貢献する構成可能なコンポーネントを目指すものです。 "Chakra UI is established on principles that ke
Chakra UIというのはReact向けに開発されているシンプルなUIコンポーネントです。Reactではコードの中にHTML構造が入り込んでいるので、デザイナーにとっては作業しづらいイメージがあります。 そこで使ってみたいのがOpenChakraです。ドラッグ&ドロップでChakra UIを使ったデザインを行えます。 OpenChakraの使い方 左側にあるパーツをドラッグ&ドロップしてデザインします。 プロパティを使って細かな調整も行えます。 作成したデザインはCodeSandboxで試せます。 OpenChakraを使えばChakra UIにあるUIコンポーネントを閲覧しつつ、デザインを進められます。コンポーネントも多数あるので、それが一覧になっていると分かりやすいでしょう。OpenChakraを使えばプログラマーであってもデザインがさくさく進められそうです。 OpenChakraは
概要 公式ドキュメントは現在準備中の模様ですが、"use client" なしで Chakra Ui Components が Next.js のServer Components 上で動くようになったことについて解説します。 Chakra UI って何? Chakra UI は UI component library の1つです。「Create accessible React apps with speed」 と謳っていて、爆速でデザイン・機能を構築できます。 また React, Typescriptと相性が良く、Next.js フレームワークを組み合わせた web アプリの開発体験がよく、多くのプロダクトで上記スタックが採用され使われているように感じます。 Next.js AppRouter との相性が悪かった しかし Next.13 以降で導入された App router では
このページではReact Hook Form(RHF)とChakra UIでフォームを作成していた際に、RHF側とChakra UI側のバリデーションが両方効いてしまったので、自分がどうやって解決したのかを記しておきます。 該当コード <> <Heading as="h1" mt={1 / 10} fontSize="3xl"> CONTACT </Heading> <form onSubmit={handleSubmit(onSubmit)} style={{ paddingTop: "15%" }}> <Flex justify="center" textAlign="center"> <Box w="lg" p={4} borderRadius="md" shadow="md" bg="gray.50"> <Stack spacing={4}> <FormControl id="na
Chakra UI Time Scroller: This is a clean time picker/scroller built for javascript and typescript with chakra-ui. Chakra UI Pro: Beautiful and responsive React components to build your application or marketing pages quicker. Created by the makers of Chakra UI. Chakra Templates: A growing collection of hand-crafted & responsive Chakra UI templates ready to drop into your React project. Choc UI: A s
# プロジェクトを作成する $ yarn create react-app --template typescript chakraui-tryout $ code !$ # プロジェクト内 $ yarn add @chakra-ui/react @emotion/react @emotion/styled framer-motion $ yarn start Chakra UI とは何か? React (DOM) 用の UI コンポーネントフレームワーク Material-UI みたいなスタイルの強制が行われるフレームワークではない ある程度自分でスタイルを定義したい人向け。汎用性が高い。 Tailwind CSS + emotion みたいな感じ 要するに、短いコードでたくさんのスタイルを定義できます (Tailwind) Tailwind CSS と違い、面倒なセットアップ無しでスタ
グローバルなスタイルとは、アプリケーション全体を通して設定する共通のスタイルのことです。 例えば文字の色や背景色などです。 CSSフレームワークであるChakra-uiを使うと、すごく簡単にグローバルスタイルが設定できます。 /* Theme.tsx */ import { extendTheme } from "@chakra-ui/react"; export const theme = extendTheme({ styles: { global: { body: { backgroundColor: "gray.100", color: "gray.800" } } } }); chakra-uiには、extendThemeというものがあり、 その中で styles->global->bodyと階層を作り、最終的にbodyの中でグローバルなスタイルに適用したいCSSを記入します。
Less code. More speedSpend less time writing UI code and more time building a great experience for your customers. import * as React from "react"; import { Box, Center, Image, Flex, Badge, Text } from "@chakra-ui/react"; import { MdStar } from "react-icons/md"; export default function Example() { return ( <Center h="100vh"> <Box p="5" maxW="320px" borderWidth="1px"> <Image borderRadius="md" src="h
The official Chakra UI Figma Kit ⚡️. Get access to simple, modular and accessible components you need to design and build your applications. What's Included Extensive styles for typography, color and effectsComponent variants including size and state, now also with interactionsDynamic layers po...
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く