Skip to content

Latest commit

 

History

History
117 lines (81 loc) · 2.67 KB

README.md

File metadata and controls

117 lines (81 loc) · 2.67 KB
Raw

Qwik Control Flow Components

Use semantic control flow components in your Qwik app.

@qwikifiers/qwik-flow npm MIT All Contributors

Table of Contents

Installation

npm install -D @qwikifers/qwik-flow

Usage

If component.

import { If } from '@qwikifers/qwik-flow';

const toogle = useSignal<boolean>(false);

<If condition={toogle.value}>
  {() => <Info message="Lorem ipsum dolores avec mi" />}
</If>

For component:

import { For } from '@qwikifers/qwik-flow';

<For each={people.value} fallback={() => (<div>No data found</div>)}>
  {(item, key) => <Card key={key} data={item} />}
</For>

Switch/Case components for more complex rendering logic.

import { Switch, Case } from '@qwikifers/qwik-flow';

const option = useSignal<string>('1');

<Switch default={() => <div>Invalid option</div>}>
  <Case when={option.value === '1'}>
    {() => <p>selected: 1 - Car</p>}
  </Case>
  <Case when={option.value === '2'}>
    {() => <p>selected: 2 - Airplane</p>}
  </Case>
  <Case when={option.value === '3'}>
    {() => <p>selected: 3 - Train</p>}
  </Case>
</Switch>

Contributing

Want to contribute? Yayy! 🎉

Please read and follow our Contributing Guidelines to learn what are the right steps to take before contributing your time, effort and code.

Thanks 🙏


Code Of Conduct

Be kind to each other and please read our code of conduct.


This project follows the all-contributors specification. Contributions of any kind welcome!


Related Links

License

MIT