ਰੀਐਕਟ ਟੇਲਵਿੰਡ ਘਟਕ ਬਿਲਡਰ ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਅਤੇ ਕੋਡ ਐਕਸਪੋਰਟ ਨਾਲ
ਟੇਲਵਿੰਡ CSS ਨਾਲ ਕਸਟਮ ਰੀਐਕਟ ਘਟਕ ਬਣਾਓ। ਬਟਨ, ਇਨਪੁਟ, ਟੈਕਸਟਏਰੀਆ, ਚੋਣ ਡ੍ਰਾਪਡਾਊਨ ਅਤੇ ਬ੍ਰੈੱਡਕ੍ਰੰਬ ਬਣਾਓ ਜੋ ਤੁਹਾਡੇ ਪ੍ਰੋਜੈਕਟਾਂ ਵਿੱਚ ਵਰਤਣ ਲਈ ਤਿਆਰ ਹਨ।
ਟੇਲਵਿੰਡ CSS ਨਾਲ ਰੀਐਕਟ ਘਟਕ ਬਿਲਡਰ
ਟੇਲਵਿੰਡ CSS ਨਾਲ ਰੀਐਕਟ ਘਟਕ ਬਣਾਓ ਅਤੇ ਇੱਕ ਜੀਵੰਤ ਪੂਰਵ-ਝਲਕ ਦੇਖੋ
ਘਟਕ ਕਿਸਮ
ਗੁਣ
ਪ੍ਰਤੀਕ੍ਰਿਆਸ਼ੀਲ ਦ੍ਰਿਸ਼
ਸਥਿਤੀ ਪੂਰਵ-ਝਲਕ
ਜੀਵੰਤ ਪੂਰਵ-ਝਲਕ
ਜਨਰੇਟ ਕੀਤਾ ਕੋਡ
<button className="text-white bg-blue-500 py-2 px-4 m-0 border border-transparent rounded text-base font-medium hover:bg-opacity-90 focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 cursor-pointer" > Button </button>
ਦਸਤਾਵੇਜ਼ੀਕਰਣ
ਰੀਐਕਟ ਟੇਲਵਿੰਡ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ: ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਨਾਲ ਕਸਟਮ ਯੂਆਈ ਕੰਪੋਨੈਂਟ ਬਣਾਓ
ਵਿਜ਼ੁਅਲ ਐਡੀਟਰ ਨਾਲ ਤੁਰੰਤ ਰੀਐਕਟ ਟੇਲਵਿੰਡ ਕੰਪੋਨੈਂਟ ਬਣਾਓ
ਰੀਐਕਟ ਟੇਲਵਿੰਡ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਵਿਜ਼ੁਅਲ ਐਡੀਟਰ ਹੈ ਜੋ ਤੁਹਾਨੂੰ ਤੁਰੰਤ ਕਸਟਮ ਰੀਐਕਟ ਕੰਪੋਨੈਂਟ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ। ਇਹ ਮੁਫ਼ਤ ਆਨਲਾਈਨ ਰੀਐਕਟ ਟੇਲਵਿੰਡ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਡਿਵੈਲਪਰਾਂ ਅਤੇ ਡਿਜ਼ਾਈਨਰਾਂ ਨੂੰ ਸੀਐਸਐਸ ਕੋਡ ਲਿਖਣ ਤੋਂ ਬਿਨਾਂ ਉਤਪਾਦਨ-ਤਿਆਰ ਯੂਆਈ ਕੰਪੋਨੈਂਟ ਬਣਾਉਣ, ਕਸਟਮਾਈਜ਼ ਕਰਨ ਅਤੇ ਐਕਸਪੋਰਟ ਕਰਨ ਵਿੱਚ ਸਹਾਇਤਾ ਕਰਦਾ ਹੈ। ਸਾਡੇ ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਰੀਐਕਟ ਟੇਲਵਿੰਡ ਬਿਲਡਰ ਨਾਲ, ਤੁਸੀਂ ਬਟਨ, ਫਾਰਮ, ਇਨਪੁਟ ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਕੰਪੋਨੈਂਟ ਡਿਜ਼ਾਈਨ ਕਰਦੇ ਸਮੇਂ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਤਬਦੀਲੀਆਂ ਦੇਖ ਸਕਦੇ ਹੋ।
ਸਾਡਾ ਰੀਐਕਟ ਟੇਲਵਿੰਡ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਬਟਨ, ਟੈਕਸਟ ਇਨਪੁਟ, ਟੈਕਸਟਏਰੀਆ, ਚੋਣ ਮੀਨੂ ਅਤੇ ਬ੍ਰੈੱਡਕ੍ਰੰਬ ਨੈਵੀਗੇਸ਼ਨ ਸਮੇਤ ਜ਼ਰੂਰੀ ਯੂਆਈ ਤੱਤ ਬਣਾਉਣ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ। ਹਰੇਕ ਰੀਐਕਟ ਕੰਪੋਨੈਂਟ ਨੂੰ ਟੇਲਵਿੰਡ ਸੀਐਸਐਸ ਯੂਟੀਲਿਟੀ ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਰੰਗ, ਸਪੇਸ, ਟਾਈਪੋਗ੍ਰਾਫੀ, ਬਾਰਡਰ ਅਤੇ ਰੈਸਪੋਂਸਿਵ ਡਿਜ਼ਾਈਨ ਲਈ ਪੂਰੀ ਤਰ੍ਹਾਂ ਕਸਟਮਾਈਜ਼ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ - ਇੱਕ ਤੁਰੰਤ ਲਾਈਵ ਪ੍ਰੀਵਿਊ ਨਾਲ ਜੋ ਤੁਸੀਂ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸੋਧਦੇ ਹੋ ਤਾਂ ਡਾਇਨੇਮਿਕਲੀ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ। ਤੇਜ਼ ਪ੍ਰੋਟੋਟਾਈਪਿੰਗ ਅਤੇ ਕੰਪੋਨੈਂਟ ਵਿਕਾਸ ਲਈ ਇਹ ਸੰਪੂਰਨ ਹੈ।
ਰੀਐਕਟ ਟੇਲਵਿੰਡ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਦੀਆਂ ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ
- ਕਈ ਕੰਪੋਨੈਂਟ ਕਿਸਮਾਂ: ਬਟਨ, ਟੈਕਸਟ ਇਨਪੁਟ, ਟੈਕਸਟਏਰੀਆ, ਚੋਣ ਮੀਨੂ ਅਤੇ ਬ੍ਰੈੱਡਕ੍ਰੰਬ ਨੈਵੀਗੇਸ਼ਨ ਬਣਾਓ
- ਲਾਈਵ ਪ੍ਰੀਵਿਊ: ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ ਨੂੰ ਸੋਧਦੇ ਸਮੇਂ ਆਪਣੇ ਕੰਪੋਨੈਂਟ ਨੂੰ ਰੀਅਲ-ਟਾਈਮ ਵਿੱਚ ਅਪਡੇਟ ਕਰੋ
- ਰੈਸਪੋਂਸਿਵ ਟੈਸਟਿੰਗ: ਮੋਬਾਈਲ, ਟੈਬਲੇਟ ਅਤੇ ਡੈਸਕਟਾਪ ਦ੍ਰਿਸ਼ਾਂ ਵਿੱਚ ਆਪਣੇ ਕੰਪੋਨੈਂਟ ਦੀ ਝਲਕ ਦੇਖੋ
- ਸਟੇਟ ਵਿਜ਼ੁਅਲਾਈਜ਼ੇਸ਼ਨ: ਆਪਣੇ ਕੰਪੋਨੈਂਟ ਦੇ ਵੱਖ-ਵੱਖ ਸਟੇਟਾਂ (ਸਧਾਰਨ, ਹੋਵਰ, ਫੋਕਸ, ਐਕਟਿਵ) ਵਿੱਚ ਕਿਵੇਂ ਦਿਖਦੇ ਹਨ ਦੀ ਜਾਂਚ ਕਰੋ
- ਕੋਡ ਜਨਰੇਸ਼ਨ: ਟੇਲਵਿੰਡ ਸੀਐਸਐਸ ਕਲਾਸਾਂ ਨਾਲ ਸਾਫ਼, ਵਰਤੋਂ ਲਈ ਤਿਆਰ ਰੀਐਕਟ ਕੋਡ ਪ੍ਰਾਪਤ ਕਰੋ
- ਕਲਿੱਪਬੋਰਡ ਤੇ ਕਾਪੀ: ਇੱਕ ਕਲਿੱਕ ਨਾਲ ਜਨਰੇਟ ਕੀਤੇ ਕੋਡ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਕਾਪੀ ਕਰੋ
- ਕੋਈ ਨਿਰਭਰਤਾ ਨਹੀਂ: ਬਾਹਰੀ ਏਪੀਆਈ ਕਾਲਾਂ ਜਾਂ ਬੈਕਐਂਡ ਲੋੜਾਂ ਤੋਂ ਬਿਨਾਂ ਬ੍ਰਾਊਜ਼ਰ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ
ਰੀਐਕਟ ਟੇਲਵਿੰਡ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦਾ ਕਦਮ-ਦਰ-ਕਦਮ ਮਾਰਗ-ਦਰਸ਼ਨ
ਕਦਮ 1: ਆਪਣੇ ਰੀਐਕਟ ਕੰਪੋਨੈਂਟ ਕਿਸਮ ਦਾ ਚੋਣ ਕਰੋ
ਸ਼ੁਰੂ ਕਰਨ ਲਈ, ਉਪਲਬਧ ਵਿਕਲਪਾਂ ਵਿੱਚੋਂ ਉਹ ਕੰਪੋਨੈਂਟ ਕਿਸਮ ਚੁਣੋ ਜੋ ਤੁਸੀਂ ਬਣਾਉਣਾ ਚਾਹੁੰਦੇ ਹੋ:
- ਬਟਨ: ਕਾਲ-ਟੂ-ਐਕਸ਼ਨ ਬਟਨ, ਸਬਮਿਟ ਬਟਨ ਜਾਂ ਨੈਵੀਗੇਸ਼ਨ ਬਟਨ ਬਣਾਓ
- **ਟੈਕਸਟ
ਸਬੰਧਿਤ ਸੰਦਾਰਬਾਰਾਂ
ਆਪਣੇ ਕਾਰਜ ਦੇ ਲਈ ਵਰਤਣ ਯੋਗ ਹੋਣ ਵਾਲੇ ਹੋਰ ਸੰਦੇਸ਼ ਦੀ ਖੋਜ ਕਰੋ