@a-la/styles 中文文档教程

发布于 5年前 浏览 34 项目主页 更新于 3年前

@a-la/styles

npm version

@a-la/styles 是 JSX 的 CSS 属性。

CSS 样式 JSX 自动补全

yarn add -D @a-la/styles
npm i --save-dev @a-la/styles

Table Of Contents

Usage

通过安装此包,您将能够在使用 alamode< 时将标签和组件的样式指定为 JSX 属性/code>转译器。

要获得对自动完成的访问权限,您需要在源代码中导入 @a-la/styles 包:

import '@a-la/styles'
// or if using Preact 8:
import '@a-la/styles/preact'

export const Component = () => {
  return (<div border="1px solid green">Hello World!</div>)
}

实际导入不会执行任何操作,因为源文件是空白的。 只有 VSCode 需要它来获取分布式类型。

由于 VSCode 中的 错误,您将看不到带有连字符的属性,例如 margin-top 并且只会看到 marginTop,但实际上您可以同时使用两者。 添加驼峰案例是为了属性的可发现性。

Special Cases

一些 CSS 属性会干扰某些标签的属性。 /ignore.json 处有一个忽略映射,可防止以下情况的输出:

<hr    width color size>
<pre    width>
<img    width height alt>
<iframe    width height>
<embed    width height>
<object    width height border>
<video    width height>
<input    width height size alt>
<canvas    width height>
<table    border>
<body    background>
<meta    content>
<br    clear>
<select    size>
<area    alt>

Copyright & License

GNU Affero General Public License v3.0

数据来自 VS Code Web Custom Data :

Art Deco© Art Deco™ for À La Mode 2020

@a-la/styles

npm version

@a-la/styles is CSS Properties For JSX.

CSS styles JSX autocompletions

yarn add -D @a-la/styles
npm i --save-dev @a-la/styles

Table Of Contents

Usage

By installing this package, you will be able to specify styles on tags and components as JSX properties when using alamode transpiler.

To receive access to auto-completions, you'll need to import the @a-la/styles package in your source code:

import '@a-la/styles'
// or if using Preact 8:
import '@a-la/styles/preact'

export const Component = () => {
  return (<div border="1px solid green">Hello World!</div>)
}

The actual import doesn't do anything as the source file is blank. It is needed only for VSCode to pick up distributed typings.

Because of a bug in VSCode, you won't see properties with hyphens, e.g., margin-top and will only see marginTop, but you can actually use both. The camel cases are added for discoverability of properties.

Special Cases

Some CSS properties will interfere with attributes of certain tags. There's an ignore map at /ignore.json that prevents the output of the following cases:

<hr    width color size>
<pre    width>
<img    width height alt>
<iframe    width height>
<embed    width height>
<object    width height border>
<video    width height>
<input    width height size alt>
<canvas    width height>
<table    border>
<body    background>
<meta    content>
<br    clear>
<select    size>
<area    alt>

Copyright & License

GNU Affero General Public License v3.0

Data comes from VS Code Web Custom Data:

Art Deco© Art Deco™ for À La Mode 2020

    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
    原文