0.2.2 ā€¢ Published 2 years ago

sito-mui-password-textfield v0.2.2

Weekly downloads
-
License
MIT
Repository
github
Last release
2 years ago

Sito MUI PasswordTextfield

Tabs make it easy to explore and switch between different views.

How to use it?

import { useState } from "react";
import SitoMUIPasswordTextfield from "sito-mui-password-textfield";

const [password, setPassword] = useState("");

const handlePassword = (e) => setPassword(e.target.value);

function App() {
    return {
        <SitoMUIPasswordTextfield
            value={password}
            onChange={handlePassword}
        />
    }
}

You can change the name of the tab view, if you don't like its name šŸ˜‚

import { useState } from "react";
import PasswordField from "sito-mui-password-textfield";

const [password, setPassword] = useState("");

const handlePassword = (e) => setPassword(e.target.value);

function App() {
    return {
        <PasswordField
            value={password}
            onChange={handlePassword}
        />
    }
}

You can add your css rules, like sx prop for styled-component, style prop like inline css styles and classNames from your css files

import { useState } from "react";
import SitoMUIPasswordTextfield from "sito-mui-password-textfield";

const [password, setPassword] = useState("");

const handlePassword = (e) => setPassword(e.target.value);

function App() {
    return {
        <SitoMUIPasswordTextfield
            sx={{ width:"305px" }}
            value={password}
            onChange={handlePassword}
        />
    }
}

Props

NameTypeDefaultDescription
idstringhtml identifier
namestringhtml name
classNamestringcss class name
colorstring"primary"color for the indicator and text of the tabs
tabsAtTopbooleantrueshow tabs row at top
tabsAtBottombooleanfalseshow tabs row at bottom
contentArray[]array of node children
tabsArray[]array of labels of tabs
valuenumbercurrent tab
onChangefunc (event, newTab)tab event handler when change the current tab
sxArray<func| object| bool>| func| objectThe system prop that allows defining system overrides as well as additional CSS styles.
tabsContainerSxArray<func| object| bool>| func| objectThe system prop that allows defining system overrides as well as additional CSS styles for tabs row.
tabsSxArray<func| object| bool>| func| objectThe system prop that allows defining system overrides as well as additional CSS styles for each tab.
contentSxArray<func| object| bool>| func| objectThe system prop that allows defining system overrides as well as additional CSS styles for each content.
styleArray<func| object| bool>| func| objectinline css

šŸ™Œ Good luck out there my friend šŸ™Œ