Margin considered harmful
We should ban margin from our components. Hear me out. Margin breaks component encapsulation. A well-built component should not affect anything outside itself. Margin makes reusability harder. Good components are usable in any context or layout. Margin conflicts with how designers think. Designers think about space in relation and context. They define how far a component should be from another com
GitHub - timolins/react-hot-toast: Smoking Hot React Notifications 🔥
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - mroderick/plete: Vanilla autocomplete component
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - xyflow/awesome-node-based-uis: A curated list with resources about node-based UIs
baklavajs - Graph/node editor for VueJs beautiful-react-diagrams - React components and hooks to build diagrams butterfly - Renderer for interactive diagrams and flowcharts cytoscape.js - Canvas based renderer with utilities and algorithms diagram-maker - Interactive editor for any graph-like data Flowy - Flowchart library flow-builder - React-based renderer for workflows and process diagrams GoJS
Build strongly typed polymorphic components with React and TypeScript - LogRocket Blog
In this detailed (and explanatory) guide, I’ll discuss how to build strongly typed polymorphic React components with TypeScript. We’ll cover the following sections: Real-world examples of polymorphic components Chakra UI’s as prop MUI’s component prop Building a simple polymorphic component Problems with this simple implementation The as prop can receive invalid HTML elements Wrong attributes can
今回は、Figmaでシンプルなボタン・コンポーネントを作る方法を紹介します。テキストのシンプルなボタンを、「Component」と「Variants」と「Auto layout」を使って丁寧に作成します。また、自由に使えるサンプルファイルも用意していますので、よかったらご活用ください。 この記事のターゲットFigmaの中級者〜上級者 Figmaでボタン・コンポーネントの作り方が知りたい方 Figmaの Component と Variants と Auto layout の使い方が知りたい方 1. ボタンの Component をつくる今回は、背景・枠線・テキストのみスタイルを設定した最もシンプルなボタンを作ってみようと思います。 まず、Textツールで適当なテキストを用意し、選択した状態で「Shift + Aキー」を押します。すると、テキストが「Frame」という Auto layout
Svelte UI components Flowbite Svelte is a free and open-source UI component library built using Svelte based on Flowbite and Tailwind CSS. By installing the package via NPM you will be able to build modern looking web applications fast by leveraging Svelte, Tailwind CSS and Flowbite using ready-made UI components like dropdowns, navbars, modals, and more. Huge collection of UI components Open-sour
Blocks UI
Blocks UI (alpha)⚠️ Currently under development A JSX-based page builder for creating beautiful websites without writing code. Blocks comes with built-in components that are carefully designed and implemented with Theme UI. The editor reads and writes production-ready React code, making it an innovative tool for teams. It's open source and MIT licensed. Try the demo →Read the docs → Stay in the lo
While Material UI is excellent for building sleek user interfaces that adhere closely to Material Design, it can become unwieldy when your design system diverges significantly from the defaults. We get it. We've all been there. That's why we're building an entirely new library of headless React UI components and hooks called Base UI—to give you complete control over the look and feel of your user
React Context and Provider Pattern with the Vue 3 Composition API
The React Context API provides a way to share properties that are required by many components (e.g., user settings, UI theme) without having to pass a prop through every level of the tree (aka prop drilling). Although Vue.js does not provide the same abstraction out of the box, in this article, we’ll see that in Vue 3, we have all the tools we need to replicate the same functionality quickly. User
【vue.js】コンポーネント間のメソッドの呼び出し｜親から子（ref）、子から親（emit） – カツオ ＠FirebaseとVue.jsとNode.jsでWebサービス開発中
Vue.jsで別コンポーネントに定義しているメソッドの呼び出し方についてメモしておきたいと思います。別コンポーネントの呼び出しは大きく2つ存在します。 親から子（ref） 子から親（emit） 最初にサンプルの動作イメージです。 親が子どもに小遣いをあげる。（親から子に金額を渡します：ref） 子が親の財布からお金を盗る笑。（子から親に金額を渡します：emit） ①親から子のコンポーネントの呼び出し（ref） 属性を渡すだけでしたらpropsが使えるのですが、子のコンポーネントに記述のあるメソッドを呼び出す場合はrefがとても便利です。親からすると、自分のコンポーネントに記載があるメソッドと同じような記述で子のコンポーネントを呼び出すことができます。 親コンポーネント「parent」 <template> <div> <h2>親</h2> <p><button @click="callCh
UI Playbook
The documented collection of UI componentsyes, there's a search for 10 components ✌️
After over 400 days of development and over 40 canary releases, we are excited to introduce MUI Core v5.0.0! This release features some major highlights: High-level goals for v5 A new brand Improved customizability Migration from JSS to emotion The sx prop Dynamic props Global class names Unstyled components (alpha) Improved DX Smaller demos in the docs Props descriptions in IntelliSense Migration
Design good practices
Learn everything you need to become a better designer standards, conventions and more.
GitHub - prabhuignoto/react-chrono: 🕑 Modern Timeline Component for React
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Introduce support for 3rd-party component frameworks by joelhawksley · Pull Request #36388 · rails/rails
Note: This PR initially was titled: Introduce support for ActionView::Component. I've updated the content to better reflect the changes we ended up shipping, to use the new name of GitHub's library, ViewComponent, and to remove mentions of validations, which we no longer use. - @joelhawksley, March 2020 Introduce support for 3rd-party component frameworks This PR introduces structural support for
Storybook の Component Story Format 3.0 では新機能として play() 関数が追加されました。 play() 関数は Storybook 上でユーザーのクリックやフォーム入力のようなインタラクションな操作を表現できます。 以前は composeStories() 関数により Storybook 上で作成したストーリーを Jest で再利用する方法を書いたのですが、どうやら Storybook のみで完結してテストを実行できるようですのでこちらを試してみます。 Vite プロジェクトの作成 まずは以下コマンドで Vite プロジェクトを作成します。 $ npm init vite@latest my-vue-app -- --template vue-ts $ cd my-vue-app $ npm install Storybook のインストール 続
はじめに 本記事は https://tech-blog.yoshikiohashi.dev/posts/start-gatsby-blog-add-tags のクロスポスト記事になります。 この記事はGatsbyというヘッドレスCMS技術で構成されています。今回は「エンジニア初心者でもできる」を前提に以下の構成で記事を作成していこうと思います。 Gatsby始めるまで GatsbyにShare機能、OGPタグをつける タグ機能、カテゴリ機能をつける（基礎編） タグ機能、カテゴリ機能をつける（応用編） GatsbyにTableOfContents（目次）をつける DarkModeをつける 内容 今回はWordPressのタグ機能、カテゴリ機能に当たる部分を実装していきます。標準で実装されてないの？！って突っ込みはあるかと思いますが、そうです。標準のテンプレートでは実装されておりません。なので
Swiper React components will likely be removed in future versions. It is recommended to migrate to Swiper Element instead. Installation Swiper React is available only via NPM as a part of the main Swiper library: npm i swiper Usage swiper/react exports 2 components: Swiper and SwiperSlide: // Import Swiper React components import { Swiper, SwiperSlide } from 'swiper/react'; // Import Swiper styles
Flexible Design System Components With "as/is" Props
The "as" prop causes a component to render using the specified element Background Implementing a high-quality design system requires clear goals, common shared values and a consistent approach that strikes a fine balance between flexibility and a constrained design. The components in a design system are built upon these patterns and standards. While a full discussion on building design systems is
Reactで親コンポーネントから子コンポーネントへ値を渡すのは以下のようすれば十分だったが、子コンポーネントから親コンポーネントに値を渡す方法がわからなかったので調べてみた。 import React from 'react'; const App = () => { const greeting = 'Hello Function Component!'; // 子コンポーネントにvalueをセット return <Headline value={greeting} />; } // valueをFunctionComponentの引数として使用する設定 const Headline:React.FunctionComponent<{value: any}> = ({ value }) => { // valueを表示 return <h1>{value}</h1>; } export
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Figmaでシンプルなボタン・コンポーネントを作る方法 | wentz-design.com
Flowbite Svelte - UI Component Library
Introducing Base UI: the headless alternative to Material UI - MUI
Introducing MUI Core v5 - MUI
Storybook 単体でインタラクションテストを実施する
Gatsbyにタグ機能、カテゴリ機能をつける（基礎編） - Qiita
Swiper - The Most Modern Mobile Touch Slider
Reactの関数コンポーネントで親子間のprops受け渡し - Qiita
comic-growl.com
www.yamakawa.co.jp
menhealer-namapo-ojisan.com
ameblo.jp/sadondesuu
kirrekablog.hatenablog.com
eigakansou.biz