@_nu/css-input

| npm package | npm downloads | jsdelivr | github | | ------------------------------------ | ------------------------------------------ | ------------------------------------------- | ------------------------------- | | | | | |

English | 简体中文

Install

$ yarn add @_nu/css-input

Tree

@_nu/css-input/
lib
├── index.css                // base style
└── skins
    └── default
        ├── block.css        // block input
        ├── capsule.css      // capsule input 💊
        ├── disabeld.css     // disabeld
        ├── focus.css        // on focus
        ├── large.css        // large input
        ├── line.css         // line input
        └── small.css        // small input

Core API

| Selector | Function | | :-------------- | -----------------: | | input.nu_input | base selector | | .nu_input input | status of disabled |

<input class="nu_input" type="text" placeholder="Enter" />

<label class="nu_input">
  <input type="text" placeholder="Enter" />
</label>

For the sake of flexibility these two ways are equivalent.

Skins API

| Selector | Function | skin | | :------------- | ---------------- | -------------: | | input:disabled | disabled input | disabled.css | | input:focus | focus input | focus.css | | ._l | large input | large.css | | ._s | small input | small.css | | ._capsule | variant of input | capsule.css | | ._block | block input | block.css | | ._line | line of disabled | line.css |

All the skin api is base on the core api.

More

• @_nu/react-input