@cantinc/ui
v0.3.9
Published
UI components of innetjs
Downloads
149
Readme
@cantinc/ui
Abstract
CANT inc. UI based on innet.
This is a library of UI components you can use with @innet/dom application.
Usage
Start application
Create a new project with the next command in terminal console:
npx innetjs init my-app -t fe
change my-app
if you want to call it another way
Go into my-app and run:
npm start
Go to localhost:3000 in your browser, and you can see default application.
Install
Stop the server and install @cantinc/ui
npm i @cantinc/ui
Then start again.
In the docs, you can find examples of components, you can copy any example and put into src/index.tsx
file of your project (clear src
folder before).
Styles
A big part of the library components has a class
prop.
Provide the class
as a string to add one.
import innet from 'innet'
import dom from '@innet/dom'
import { Button } from '@cantinc/ui'
innet(
<Button class='test'>
Click me
</Button>,
dom,
)
Or provide an object of classes.
Keys are elements of a component or different states.
import innet from 'innet'
import dom from '@innet/dom'
import { Checkbox } from '@cantinc/ui'
innet(
<Checkbox
class={{
root: 'test-root',
disabled: 'test-disabled',
icon: 'test-icon',
}}
/>,
dom,
)
Values can be an array, string, or a function which returns them.
More information here html-classes.
import innet from 'innet'
import dom from '@innet/dom'
import { State } from 'watch-state'
import { Button } from '@cantinc/ui'
const state = new State('foo')
innet(
<>
<Button
onclick={() => { state.value = 'bar' }}
class={{
root: [
'test1-root',
'test2-root',
['test3-root'],
() => `${state.value}-root`,
],
content: () => ['test-content', `${state.value}-content`],
}}>
Click me
</Button>
<Button class={() => state.value} />
</>,
dom,
)
You can use style
prop to add inline styles.
import innet from 'innet'
import dom from '@innet/dom'
import { State } from 'watch-state'
import { Button } from '@cantinc/ui'
const color = new State('red')
const handleClick = () => {
color.value = 'blue'
}
innet(
<>
<Button
style={{
background: () => color.value,
}}
onclick={handleClick}>
Click me
</Button>
</>,
dom,
)
Issues
If you find a bug or have a suggestion, please file an issue on GitHub.