svelte-flex - A simple and reusable flexbox component for Svelte

栏目: IT技术 · 发布时间: 5年前

内容简介:A simple and reusable flexbox component forThis package is available on NPM, and you can install it with

svelte-flex

:muscle: A simple and reusable flexbox component for Svelte.

A simple and reusable flexbox component for Svelte .

  • Sane defaults.
  • Simple API.
  • Reactive props.
  • Minimal size.

Try me on CodeSandbox!

Installation

This package is available on NPM, and you can install it with npm or yarn :

npm install svelte-flex

yarn add svelte-flex

Usage

Import the Flex component and use it in your Svelte project.

<script>
  import Flex from 'svelte-flex';
</script>

<Flex>
  <div>Flexbox child!</div>
  <div>Flexbox child!</div>
  <div>Flexbox child!</div>
</Flex>

Props

All props are optional (as they all have default values).

Prop Possible Values Default Value
direction 'row' | 'column' 'row'
align 'start' | 'center' | 'end' | 'stretch' 'center'
justify 'start' | 'center' | 'end' | 'around' | 'between' | 'evenly' 'center'
reverse true | false false

Check out the test suite if you're unsure what CSS styles are applied by these props.

The props are reactive, meaning that if they are dynamically updated, the component will update in response.

Contributing

Feel free to file an issue or open a pull request. Ensure that you add tests for any new functionality.

:ok_hand: Built by Dave Lunny .


以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

赢在用户

赢在用户

[美]Steve Mulder、[美]Zivv Yarr / 范晓燕 / 机械工业出版社 / 2007-08-01 / 29.00

您如何保证您的网站确实给予用户他们所需要的,并对您产生商业成果?您需要了解谁是您的用户,您的用户的目标、行为和观点是什么,还要把他们的需求当成您的第一要务。人物角色将用户研究带入了一个更高的境界,成为实施真正以用户为中心的在线商业策略最高效的工具。本书将伴随您走过创建人物角色的每一个步骤,包括进行定性、定量的用户研究,生成人物角色分类,使人物角色真实可信等。您也将学会如何有效地通过这个工具,来完成......一起来看看 《赢在用户》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具