ਰਿਐਕਟ ਟੇਲਵਿੰਡ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਨਾਲ ਜੀਵੰਤ ਪ੍ਰੀਵਿਊ

ਪਰੀਚਯ

ਰਿਐਕਟ ਟੇਲਵਿੰਡ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ, ਉਪਭੋਗਤਾ-ਮਿੱਤਰ ਟੂਲ ਹੈ ਜੋ ਵਿਕਾਸਕਾਂ ਨੂੰ ਟੇਲਵਿੰਡ CSS ਕਲਾਸਾਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਵਿਜ਼ੂਅਲ ਤੌਰ 'ਤੇ ਰਿਐਕਟ ਕੰਪੋਨੈਂਟ ਬਣਾਉਣ ਅਤੇ ਕਸਟਮਾਈਜ਼ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ। ਚਾਹੇ ਤੁਸੀਂ ਨਵੀਂ ਇੰਟਰਫੇਸ ਦਾ ਪ੍ਰੋਟੋਟਾਈਪ ਕਰ ਰਹੇ ਹੋ, ਟੇਲਵਿੰਡ CSS ਸਿੱਖ ਰਹੇ ਹੋ, ਜਾਂ ਸਿਰਫ਼ ਕੰਪੋਨੈਂਟ ਕੋਡ ਨੂੰ ਜਲਦੀ ਜਨਰੇਟ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇ, ਇਹ ਇੰਟਰੈਕਟਿਵ ਬਿਲਡਰ ਜੀਵੰਤ ਪ੍ਰੀਵਿਊ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਅਤੇ ਸਾਫ, ਉਤਪਾਦਨ-ਤਿਆਰ ਕੋਡ ਜਨਰੇਟ ਕਰਦਾ ਹੈ। ਰਿਐਕਟ ਦੀ ਲਚੀਲਾਪਣ ਨੂੰ ਟੇਲਵਿੰਡ CSS ਦੇ ਯੂਟਿਲਿਟੀ-ਪਹਿਲਾਂ ਦੇ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਨਾਲ ਜੋੜ ਕੇ, ਤੁਸੀਂ ਬਿਨਾਂ CSS ਲਿਖੇ ਸੁੰਦਰ, ਜਵਾਬਦੇਹ UI ਕੰਪੋਨੈਂਟ ਤੇਜ਼ੀ ਨਾਲ ਬਣਾਉਣ ਦੇ ਯੋਗ ਹੋ।

ਇਹ ਟੂਲ ਬੁਨਿਆਦੀ ਰਿਐਕਟ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਬਣਾਉਣ ਦਾ ਸਮਰਥਨ ਕਰਦਾ ਹੈ ਜਿਸ ਵਿੱਚ ਬਟਨ, ਟੈਕਸਟ ਇਨਪੁਟ, ਟੈਕਸਟਏਰਿਆ, ਚੋਣ ਡ੍ਰੌਪਡਾਊਨ, ਅਤੇ ਬ੍ਰੇਡਕ੍ਰੰਬ ਨੈਵੀਗੇਸ਼ਨ ਸ਼ਾਮਲ ਹਨ। ਹਰ ਕੰਪੋਨੈਂਟ ਨੂੰ ਟੇਲਵਿੰਡ CSS ਗੁਣਾਂ ਨਾਲ ਵਿਸਤਾਰਿਤ ਤੌਰ 'ਤੇ ਕਸਟਮਾਈਜ਼ ਕੀਤਾ ਜਾ ਸਕਦਾ ਹੈ, ਜਿਸ ਨਾਲ ਤੁਸੀਂ ਰੰਗ, ਖਾਲੀ ਥਾਂ, ਟਾਈਪੋਗ੍ਰਾਫੀ, ਸੀਮਾ, ਅਤੇ ਹੋਰ ਬਹੁਤ ਕੁਝ ਨੂੰ ਅਨੁਕੂਲਿਤ ਕਰ ਸਕਦੇ ਹੋ—ਸਭ ਕੁਝ ਜੀਵੰਤ ਪ੍ਰੀਵਿਊ ਨਾਲ ਜੋ ਤੁਹਾਡੇ ਬਦਲਾਅ ਦੇ ਨਾਲ ਅੱਪਡੇਟ ਹੁੰਦਾ ਹੈ।

ਮੁੱਖ ਵਿਸ਼ੇਸ਼ਤਾਵਾਂ

• ਬਹੁਤ ਸਾਰੇ ਕੰਪੋਨੈਂਟ ਕਿਸਮਾਂ: ਬਟਨ, ਟੈਕਸਟ ਇਨਪੁਟ, ਟੈਕਸਟਏਰਿਆ, ਚੋਣ ਮੈਨੂ, ਅਤੇ ਬ੍ਰੇਡਕ੍ਰੰਬ ਨੈਵੀਗੇਸ਼ਨ ਬਣਾਓ
• ਜੀਵੰਤ ਪ੍ਰੀਵਿਊ: ਜਦੋਂ ਤੁਸੀਂ ਗੁਣਾਂ ਨੂੰ ਬਦਲਦੇ ਹੋ, ਤਾਂ ਆਪਣੇ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਜੀਵੰਤ ਤੌਰ 'ਤੇ ਅਪਡੇਟ ਹੁੰਦੇ ਦੇਖੋ
• ਜਵਾਬਦੇਹ ਟੈਸਟਿੰਗ: ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡੇ ਕੰਪੋਨੈਂਟਾਂ ਦਾ ਦਿੱਖ ਮੋਬਾਈਲ, ਟੇਬਲਟ, ਅਤੇ ਡੈਸਕਟਾਪ ਦ੍ਰਿਸ਼ਾਂ ਵਿੱਚ ਚੰਗਾ ਹੈ
• ਸਟੇਟ ਵਿਜ਼ੂਅਲਾਈਜ਼ੇਸ਼ਨ: ਇਹ ਟੈਸਟ ਕਰੋ ਕਿ ਤੁਹਾਡੇ ਕੰਪੋਨੈਂਟ ਕਿਸ ਤਰ੍ਹਾਂ ਦੇਖਦੇ ਹਨ ਵੱਖ-ਵੱਖ ਸਟੇਟਾਂ (ਸਧਾਰਨ, ਹਵਰ, ਫੋਕਸ, ਐਕਟਿਵ) ਵਿੱਚ
• ਕੋਡ ਜਨਰੇਸ਼ਨ: ਟੇਲਵਿੰਡ CSS ਕਲਾਸਾਂ ਨਾਲ ਸਾਫ, ਤਿਆਰ-ਉਪਯੋਗ ਰਿਐਕਟ ਕੋਡ ਪ੍ਰਾਪਤ ਕਰੋ
• ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਨਕਲ ਕਰੋ: ਇੱਕ ਕਲਿਕ ਨਾਲ ਜਨਰੇਟ ਕੀਤੇ ਗਏ ਕੋਡ ਨੂੰ ਆਸਾਨੀ ਨਾਲ ਕਾਪੀ ਕਰੋ
• ਕੋਈ ਨਿਰਭਰਤਾ ਨਹੀਂ: ਬਿਨਾਂ ਕਿਸੇ ਬਾਹਰੀ API ਕਾਲਾਂ ਜਾਂ ਬੈਕਐਂਡ ਦੀਆਂ ਲੋੜਾਂ ਦੇ ਬਿਲਕੁਲ ਬ੍ਰਾਉਜ਼ਰ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ

ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਦੀ ਵਰਤੋਂ ਕਿਵੇਂ ਕਰੀਏ

ਕਦਮ 1: ਕੰਪੋਨੈਂਟ ਕਿਸਮ ਚੁਣੋ

ਉਪਲਬਧ ਵਿਕਲਪਾਂ ਵਿੱਚੋਂ ਤੁਸੀਂ ਬਣਾਉਣ ਲਈ ਕੰਪੋਨੈਂਟ ਦੀ ਕਿਸਮ ਚੁਣ ਕੇ ਸ਼ੁਰੂ ਕਰੋ:

• ਬਟਨ: ਕਾਲ-ਟੂ-ਐਕਸ਼ਨ ਬਟਨ, ਜਮ੍ਹਾਂ ਕਰਨ ਵਾਲੇ ਬਟਨ, ਜਾਂ ਨੈਵੀਗੇਸ਼ਨ ਬਟਨ ਬਣਾਓ
• ਟੈਕਸਟ ਇਨਪੁਟ: ਇਕ-ਲਾਈਨ ਟੈਕਸਟ ਇਕੱਤਰ ਕਰਨ ਲਈ ਫਾਰਮ ਇਨਪੁਟ ਖੇਤਰ ਡਿਜ਼ਾਈਨ ਕਰੋ
• ਟੈਕਸਟਏਰਿਆ: ਲੰਬੇ ਸਮੱਗਰੀ ਲਈ ਬਹੁਤ-ਲਾਈਨ ਟੈਕਸਟ ਇਨਪੁਟ ਖੇਤਰ ਬਣਾਓ
• ਚੋਣ: ਕਸਟਮਾਈਜ਼ ਕਰਨ ਯੋਗ ਵਿਕਲਪਾਂ ਨਾਲ ਡ੍ਰੌਪਡਾਊਨ ਚੋਣ ਮੈਨੂ ਬਣਾਓ
• ਬ੍ਰੇਡਕ੍ਰੰਬ: ਪੇਜ ਹਾਇਰਾਰਕੀ ਦਿਖਾਉਣ ਲਈ ਨੈਵੀਗੇਸ਼ਨ ਬ੍ਰੇਡਕ੍ਰੰਬ ਡਿਜ਼ਾਈਨ ਕਰੋ

ਹਰ ਕੰਪੋਨੈਂਟ ਕਿਸਮ ਦੇ ਆਪਣੇ ਆਪਣੇ ਕਸਟਮਾਈਜ਼ ਕਰਨ ਯੋਗ ਗੁਣ ਹਨ ਜੋ ਗੁਣਾਂ ਦੇ ਪੈਨਲ ਵਿੱਚ ਦਿਖਾਈ ਦੇਣਗੇ।

ਕਦਮ 2: ਕੰਪੋਨੈਂਟ ਗੁਣਾਂ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰੋ

ਕੰਪੋਨੈਂਟ ਦੀ ਕਿਸਮ ਚੁਣਨ ਦੇ ਬਾਅਦ, ਤੁਸੀਂ ਗੁਣਾਂ ਦੇ ਪੈਨਲ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਸ ਦੀ ਦਿੱਖ ਅਤੇ ਵਿਹਾਰ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰ ਸਕਦੇ ਹੋ। ਆਮ ਗੁਣਾਂ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:

• ਟੈਕਸਟ ਸਮੱਗਰੀ: ਬਟਨਾਂ 'ਤੇ ਦਿਖਾਈ ਦੇਣ ਵਾਲਾ ਟੈਕਸਟ ਜਾਂ ਇਨਪੁਟ ਲਈ ਪਲੇਸਹੋਲਡਰ ਟੈਕਸਟ ਸੈੱਟ ਕਰੋ
• ਰੰਗ: ਟੇਲਵਿੰਡ ਦੇ ਰੰਗ ਪੈਲੇਟ ਵਿੱਚੋਂ ਟੈਕਸਟ ਅਤੇ ਪਿਛੋਕੜ ਦੇ ਰੰਗ ਚੁਣੋ
• ਪੈਡਿੰਗ: ਕੰਪੋਨੈਂਟ ਦੀ ਅੰਦਰੂਨੀ ਖਾਲੀ ਥਾਂ ਨੂੰ ਸਹੀ ਕਰੋ
• ਮਾਰਜਿਨ: ਕੰਪੋਨੈਂਟ ਦੇ ਆਸ-ਪਾਸ ਦੀ ਬਾਹਰੀ ਖਾਲੀ ਥਾਂ ਸੈੱਟ ਕਰੋ
• ਸੀਮਾ: ਵੱਖ-ਵੱਖ ਸ਼ੈਲੀਆਂ, ਚੌੜਾਈਆਂ, ਅਤੇ ਰੰਗਾਂ ਨਾਲ ਸੀਮਾਵਾਂ ਸ਼ਾਮਲ ਕਰੋ
• ਸੀਮਾ ਦਾ ਰੇਡੀਅਸ: ਆਪਣੇ ਕੰਪੋਨੈਂਟ ਦੇ ਕੋਨੇ ਗੋਲ ਕਰੋ
• ਚੌੜਾਈ: ਕੰਪੋਨੈਂਟ ਦੀ ਚੌੜਾਈ ਸੈੱਟ ਕਰੋ (ਆਟੋ, ਪੂਰਾ, ਜਾਂ ਪ੍ਰਤੀਸ਼ਤ-ਅਧਾਰਿਤ)
• ਟਾਈਪੋਗ੍ਰਾਫੀ: ਫੋਂਟ ਦੇ ਆਕਾਰ, ਭਾਰ, ਅਤੇ ਹੋਰ ਟੈਕਸਟ ਗੁਣਾਂ ਨੂੰ ਸਹੀ ਕਰੋ

ਖਾਸ ਕੰਪੋਨੈਂਟ ਕਿਸਮਾਂ ਲਈ, ਵਧੀਕ ਗੁਣ ਉਪਲਬਧ ਹਨ:

• ਟੈਕਸਟ ਇਨਪੁਟ / ਟੈਕਸਟਏਰਿਆ: ਪਲੇਸਹੋਲਡਰ ਟੈਕਸਟ, ਲੋੜੀਂਦਾ ਸਥਿਤੀ, ਅਤੇ ਨਿਸ਼ਕਾਸ਼ਿਤ ਸਥਿਤੀ ਸੈੱਟ ਕਰੋ
• ਟੈਕਸਟਏਰਿਆ: ਪੰਗਤਾਂ ਦੀ ਗਿਣਤੀ ਨੂੰ ਸਹੀ ਕਰੋ
• ਚੋਣ: ਵਿਕਲਪਾਂ ਨੂੰ ਸ਼ਾਮਲ, ਸੰਪਾਦਨ ਜਾਂ ਹਟਾਓ
• ਬ੍ਰੇਡਕ੍ਰੰਬ: ਨੈਵੀਗੇਸ਼ਨ ਆਈਟਮ ਅਤੇ ਲਿੰਕਾਂ ਨੂੰ ਸੰਰਚਨਾ ਕਰੋ

ਕਦਮ 3: ਆਪਣੇ ਕੰਪੋਨੈਂਟ ਦੀ ਪ੍ਰੀਵਿਊ ਕਰੋ

ਜਦੋਂ ਤੁਸੀਂ ਗੁਣਾਂ ਨੂੰ ਸਹੀ ਕਰਦੇ ਹੋ, ਤਾਂ ਜੀਵੰਤ ਪ੍ਰੀਵਿਊ ਤੁਰੰਤ ਅਪਡੇਟ ਹੁੰਦਾ ਹੈ, ਜੋ ਤੁਹਾਡੇ ਕੰਪੋਨੈਂਟ ਦੀ ਦਿੱਖ ਨੂੰ ਸਹੀ ਦਿਖਾਉਂਦਾ ਹੈ। ਤੁਸੀਂ ਵੀ:

• ਜਵਾਬਦੇਹ ਵਿਹਾਰ ਦੀ ਟੈਸਟਿੰਗ ਕਰੋ: ਇਹ ਯਕੀਨੀ ਬਣਾਓ ਕਿ ਤੁਹਾਡੇ ਕੰਪੋਨੈਂਟਾਂ ਦਾ ਦਿੱਖ ਸਾਰੇ ਸਕਰੀਨ ਆਕਾਰਾਂ 'ਤੇ ਚੰਗਾ ਹੈ
• ਵੱਖ-ਵੱਖ ਸਟੇਟਾਂ ਦੀ ਜਾਂਚ ਕਰੋ: ਦੇਖੋ ਕਿ ਤੁਹਾਡੇ ਕੰਪੋਨੈਂਟ ਸਧਾਰਨ, ਹਵਰ, ਫੋਕਸ, ਅਤੇ ਐਕਟਿਵ ਸਟੇਟਾਂ ਵਿੱਚ ਕਿਵੇਂ ਦਿਖਦੇ ਹਨ

ਕਦਮ 4: ਕੋਡ ਪ੍ਰਾਪਤ ਕਰੋ

ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਕੰਪੋਨੈਂਟ ਨਾਲ ਸੰਤੁਸ਼ਟ ਹੋ ਜਾਂਦੇ ਹੋ, ਤਾਂ ਟੂਲ ਸਵੈਚਾਲਿਤ ਤੌਰ 'ਤੇ ਟੇਲਵਿੰਡ CSS ਕਲਾਸਾਂ ਨਾਲ ਸੰਬੰਧਿਤ ਰਿਐਕਟ ਕੋਡ ਜਨਰੇਟ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ:

• ਜਨਰੇਟ ਕੀਤੇ ਕੋਡ ਦੀ ਸਮੀਖਿਆ ਕਰੋ: ਲਾਗੂ ਕੀਤੀਆਂ ਟੇਲਵਿੰਡ ਕਲਾਸਾਂ ਨਾਲ ਸਹੀ ਰਿਐਕਟ JSX ਕੋਡ ਦੇਖੋ
• ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਨਕਲ ਕਰੋ: ਕੋਡ ਨੂੰ ਆਪਣੇ ਕਲਿੱਪਬੋਰਡ 'ਤੇ ਕਾਪੀ ਕਰਨ ਲਈ "ਕੋਡ ਨਕਲ ਕਰੋ" ਬਟਨ 'ਤੇ ਕਲਿਕ ਕਰੋ
• ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਵਰਤੋਂ ਕਰੋ: ਕੋਡ ਨੂੰ ਆਪਣੇ ਰਿਐਕਟ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸਿੱਧਾ ਪੇਸਟ ਕਰੋ

ਕੰਪੋਨੈਂਟ ਕਿਸਮਾਂ ਦੇ ਵਿਸਥਾਰ ਵਿੱਚ

ਬਟਨ

ਬਟਨ ਯੂਆਈ ਦੇ ਅਹੰਕਾਰਕ ਤੱਤ ਹਨ ਜੋ ਉਪਭੋਗਤਾ ਦੇ ਇੰਟਰੈਕਸ਼ਨ ਲਈ ਹਨ। ਸਾਡੇ ਬਿਲਡਰ ਨਾਲ, ਤੁਸੀਂ ਵੱਖ-ਵੱਖ ਬਟਨ ਸ਼ੈਲੀਆਂ ਬਣਾਉਣ ਦੇ ਯੋਗ ਹੋ:

• ਪ੍ਰਾਇਮਰੀ ਐਕਸ਼ਨ ਬਟਨ
• ਸੈਕੰਡਰੀ ਜਾਂ ਆਉਟਲਾਈਨ ਬਟਨ
• ਆਇਕਨ ਬਟਨ
• ਪੂਰੀ ਚੌੜਾਈ ਵਾਲੇ ਬਟਨ
• ਨਿਸ਼ਕਾਸ਼ਿਤ ਬਟਨ

ਮੁੱਖ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਵਿਕਲਪ:

• ਟੈਕਸਟ ਸਮੱਗਰੀ
• ਪਿਛੋਕੜ ਅਤੇ ਟੈਕਸਟ ਦੇ ਰੰਗ
• ਪੈਡਿੰਗ ਅਤੇ ਮਾਰਜਿਨ
• ਸੀਮਾ ਅਤੇ ਸੀਮਾ ਦਾ ਰੇਡੀਅਸ
• ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ
• ਫੋਂਟ ਦਾ ਆਕਾਰ ਅਤੇ ਭਾਰ
• ਹਵਰ, ਫੋਕਸ, ਅਤੇ ਐਕਟਿਵ ਸਟੇਟਾਂ

ਜਨਰੇਟ ਕੀਤੇ ਕੋਡ ਦਾ ਉਦਾਹਰਣ:

1<button 
2  className="bg-blue-500 text-white py-2 px-4 rounded hover:bg-blue-600 focus:ring-2 focus:ring-blue-300 focus:outline-none"
3>
4  ਜਮ੍ਹਾਂ ਕਰੋ
5</button>
6

ਟੈਕਸਟ ਇਨਪੁਟ

ਟੈਕਸਟ ਇਨਪੁਟ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਫਾਰਮਾਂ ਵਿੱਚ ਇਕ-ਲਾਈਨ ਟੈਕਸਟ ਦਰਜ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ। ਸਾਡਾ ਬਿਲਡਰ ਤੁਹਾਨੂੰ ਤੁਹਾਡੇ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਇਨਪੁਟ ਬਣਾਉਣ ਵਿੱਚ ਮਦਦ ਕਰਦਾ ਹੈ:

ਮੁੱਖ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਵਿਕਲਪ:

• ਪਲੇਸਹੋਲਡਰ ਟੈਕਸਟ
• ਸੀਮਾ ਦੀਆਂ ਸ਼ੈਲੀਆਂ ਅਤੇ ਰੰਗ
• ਪੈਡਿੰਗ ਅਤੇ ਚੌੜਾਈ
• ਲੋੜੀਂਦਾ ਅਤੇ ਨਿਸ਼ਕਾਸ਼ਿਤ ਸਥਿਤੀਆਂ
• ਫੋਕਸ ਸ਼ੈਲੀਆਂ

ਜਨਰੇਟ ਕੀਤੇ ਕੋਡ ਦਾ ਉਦਾਹਰਣ:

1<input
2  type="text"
3  className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
4  placeholder="ਆਪਣਾ ਨਾਮ ਦਰਜ ਕਰੋ"
5  required
6/>
7

ਟੈਕਸਟਏਰਿਆ

ਟੈਕਸਟਏਰਿਆ ਬਹੁਤ-ਲਾਈਨ ਟੈਕਸਟ ਦਰਜ ਕਰਨ ਲਈ ਵਰਤੀ ਜਾਂਦੀ ਹੈ, ਜਿਵੇਂ ਕਿ ਟਿੱਪਣੀਆਂ ਜਾਂ ਵੇਰਵੇ:

ਮੁੱਖ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਵਿਕਲਪ:

• ਪੰਗਤਾਂ ਦੀ ਗਿਣਤੀ
• ਪਲੇਸਹੋਲਡਰ ਟੈਕਸਟ
• ਦੁਬਾਰਾ ਆਕਾਰ
• ਸੀਮਾ ਅਤੇ ਪੈਡਿੰਗ
• ਲੋੜੀਂਦਾ ਅਤੇ ਨਿਸ਼ਕਾਸ਼ਿਤ ਸਥਿਤੀਆਂ

ਜਨਰੇਟ ਕੀਤੇ ਕੋਡ ਦਾ ਉਦਾਹਰਣ:

1<textarea
2  className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
3  placeholder="ਆਪਣਾ ਸੁਨੇਹਾ ਦਰਜ ਕਰੋ"
4  rows={4}
5></textarea>
6

ਚੋਣ ਡ੍ਰੌਪਡਾਊਨ

ਚੋਣ ਡ੍ਰੌਪਡਾਊਨ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਵਿਕਲਪਾਂ ਦੀ ਸੂਚੀ ਵਿੱਚੋਂ ਚੁਣਨ ਦੀ ਆਗਿਆ ਦਿੰਦੇ ਹਨ:

ਮੁੱਖ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਵਿਕਲਪ:

• ਵਿਕਲਪ ਆਈਟਮ (ਟੈਕਸਟ ਅਤੇ ਮੁੱਲ)
• ਸੀਮਾ ਅਤੇ ਪੈਡਿੰਗ
• ਚੌੜਾਈ ਅਤੇ ਦਿੱਖ
• ਲੋੜੀਂਦਾ ਅਤੇ ਨਿਸ਼ਕਾਸ਼ਿਤ ਸਥਿਤੀਆਂ

ਜਨਰੇਟ ਕੀਤੇ ਕੋਡ ਦਾ ਉਦਾਹਰਣ:

1<select
2  className="w-full border border-gray-300 rounded-md py-2 px-3 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
3  required
4>
5  <option value="option1">ਵਿਕਲਪ 1</option>
6  <option value="option2">ਵਿਕਲਪ 2</option>
7  <option value="option3">ਵਿਕਲਪ 3</option>
8</select>
9

ਬ੍ਰੇਡਕ੍ਰੰਬ ਨੈਵੀਗੇਸ਼ਨ

ਬ੍ਰੇਡਕ੍ਰੰਬ ਉਪਭੋਗਤਾਵਾਂ ਨੂੰ ਵੈਬਸਾਈਟ ਦੀ ਹਾਇਰਾਰਕੀ ਵਿੱਚ ਆਪਣੇ ਸਥਾਨ ਨੂੰ ਸਮਝਣ ਵਿੱਚ ਮਦਦ ਕਰਦੇ ਹਨ:

ਮੁੱਖ ਕਸਟਮਾਈਜ਼ੇਸ਼ਨ ਵਿਕਲਪ:

• ਨੈਵੀਗੇਸ਼ਨ ਆਈਟਮ ਅਤੇ ਲਿੰਕ
• ਵੱਖ-ਵੱਖ ਸ਼ੈਲੀਆਂ
• ਟੈਕਸਟ ਅਤੇ ਹਵਰ ਦੇ ਰੰਗ
• ਆਈਟਮਾਂ ਦੇ ਵਿਚਕਾਰ ਖਾਲੀ ਥਾਂ

ਜਨਰੇਟ ਕੀਤੇ ਕੋਡ ਦਾ ਉਦਾਹਰਣ:

1<nav className="flex" aria-label="Breadcrumb">
2  <ol className="flex space-x-2 text-gray-700">
3    <li className="flex items-center">
4      <a href="/" className="hover:text-blue-600">ਘਰ</a>
5    </li>
6    <li className="flex items-center">
7      <span className="mx-2 text-gray-400">/</span>
8      <a href="/products" className="hover:text-blue-600">ਉਤਪਾਦ</a>
9    </li>
10    <li className="flex items-center">
11      <span className="mx-2 text-gray-400">/</span>
12      <a href="/products/category" className="hover:text-blue-600">ਸ਼੍ਰੇਣੀ</a>
13    </li>
14  </ol>
15</nav>
16

ਟੇਲਵਿੰਡ CSS ਗੁਣਾਂ ਦੀ ਵਿਆਖਿਆ

ਸਾਡਾ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਟੇਲਵਿੰਡ CSS ਦੇ ਯੂਟਿਲਿਟੀ ਕਲਾਸਾਂ ਨੂੰ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਸ਼ੈਲੀ ਦੇਣ ਲਈ ਵਰਤਦਾ ਹੈ। ਇੱਥੇ ਸਭ ਤੋਂ ਆਮ ਵਰਤੋਂ ਕੀਤੀਆਂ ਗੁਣਾਂ ਲਈ ਇੱਕ ਤੇਜ਼ ਹਵਾਲਾ ਹੈ:

ਰੰਗ

ਟੇਲਵਿੰਡ ਇੱਕ ਵਿਆਪਕ ਰੰਗ ਪੈਲੇਟ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਕੁਝ ਉਦਾਹਰਣ:

• ਟੈਕਸਟ ਦੇ ਰੰਗ: text-{color}-{shade} (ਜਿਵੇਂ, text-blue-500, text-red-600)
• ਪਿਛੋਕੜ ਦੇ ਰੰਗ: bg-{color}-{shade} (ਜਿਵੇਂ, bg-green-500, bg-gray-100)
• ਸੀਮਾ ਦੇ ਰੰਗ: border-{color}-{shade} (ਜਿਵੇਂ, border-gray-300)

ਖਾਲੀ ਥਾਂ

ਪੈਡਿੰਗ ਅਤੇ ਮਾਰਜਿਨ ਨੂੰ ਨਿਯੰਤ੍ਰਿਤ ਕਰਨ ਲਈ ਇਹ ਕਲਾਸਾਂ ਵਰਤੋਂ ਕਰੋ:

• ਪੈਡਿੰਗ: p-{size}, px-{size}, py-{size} (ਜਿਵੇਂ, p-4, px-3 py-2)
• ਮਾਰਜਿਨ: m-{size}, mx-{size}, my-{size} (ਜਿਵੇਂ, m-2, mx-auto)

ਟਾਈਪੋਗ੍ਰਾਫੀ

ਟੈਕਸਟ ਦੀ ਦਿੱਖ ਨੂੰ ਸਹੀ ਕਰਨ ਲਈ:

• ਫੋਂਟ ਦਾ ਆਕਾਰ: text-{size} (ਜਿਵੇਂ, text-sm, text-lg)
• ਫੋਂਟ ਦਾ ਭਾਰ: font-{weight} (ਜਿਵੇਂ, font-bold, font-medium)
• ਟੈਕਸਟ ਦਾ ਅਨੁਕੂਲਤਾ: text-{alignment} (ਜਿਵੇਂ, text-center, text-right)

ਸੀਮਾਵਾਂ

ਸੀਮਾਵਾਂ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰਨ ਲਈ:

• ਸੀਮਾ ਦੀ ਚੌੜਾਈ: border, border-{width} (ਜਿਵੇਂ, border-2)
• ਸੀਮਾ ਦਾ ਰੇਡੀਅਸ: rounded, rounded-{size} (ਜਿਵੇਂ, rounded-md, rounded-full)

ਚੌੜਾਈ ਅਤੇ ਉਚਾਈ

ਅਕਾਰ ਸੈੱਟ ਕਰਨ ਲਈ:

• ਚੌੜਾਈ: w-{size} (ਜਿਵੇਂ, w-full, w-1/2)
• ਉਚਾਈ: h-{size} (ਜਿਵੇਂ, h-10, h-auto)

ਇੰਟਰੈਕਟਿਵ ਸਟੇਟ

ਵੱਖ-ਵੱਖ ਸਟੇਟਾਂ ਨੂੰ ਸ਼ੈਲੀ ਦੇਣ ਲਈ:

• ਹਵਰ: hover:{property} (ਜਿਵੇਂ, hover:bg-blue-600)
• ਫੋਕਸ: focus:{property} (ਜਿਵੇਂ, focus:ring-2)
• ਐਕਟਿਵ: active:{property} (ਜਿਵੇਂ, active:bg-blue-700)
• ਨਿਸ਼ਕਾਸ਼ਿਤ: disabled:{property} (ਜਿਵੇਂ, disabled:opacity-50)

ਵਰਤੋਂ ਦੇ ਕੇਸ

1. ਤੇਜ਼ ਪ੍ਰੋਟੋਟਾਈਪਿੰਗ

ਰਿਐਕਟ ਟੇਲਵਿੰਡ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ UI ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਪ੍ਰੋਟੋਟਾਈਪ ਕਰਨ ਲਈ ਬਹੁਤ ਚੰਗਾ ਹੈ ਜਿਸ ਤੋਂ ਪਹਿਲਾਂ ਤੁਸੀਂ ਆਪਣੇ ਅਸਲ ਕੋਡਬੇਸ ਵਿੱਚ ਲਾਗੂ ਕਰੋ। ਇਹ ਵੱਡੀ ਵਿਕਾਸ ਸਮੇਂ ਦੀ ਬਚਤ ਕਰ ਸਕਦਾ ਹੈ ਜੋ ਡਿਜ਼ਾਈਨਰਾਂ ਅਤੇ ਵਿਕਾਸਕਾਂ ਨੂੰ ਵੱਖ-ਵੱਖ ਸ਼ੈਲੀਆਂ ਅਤੇ ਸੰਰਚਨਾਵਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਬਿਨਾਂ ਕੋਡ ਲਿਖਣ ਦੇ।

ਉਦਾਹਰਣ ਵਰਕਫਲੋ:

1. ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇੱਕ ਬਟਨ ਸਿਸਟਮ ਡਿਜ਼ਾਈਨ ਕਰੋ
2. ਵੱਖ-ਵੱਖ ਰੰਗਾਂ, ਆਕਾਰਾਂ, ਅਤੇ ਸਟੇਟਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰੋ
3. ਸੰਤੁਸ਼ਟ ਹੋਣ 'ਤੇ ਜਨਰੇਟ ਕੀਤੇ ਕੋਡ ਨੂੰ ਕਾਪੀ ਕਰੋ
4. ਆਪਣੇ ਰਿਐਕਟ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਲਾਗੂ ਕਰੋ

2. ਟੇਲਵਿੰਡ CSS ਸਿੱਖਣਾ

ਟੇਲਵਿੰਡ CSS ਵਿੱਚ ਨਵੇਂ ਵਿਕਾਸਕਾਂ ਲਈ, ਇਹ ਟੂਲ ਇੱਕ ਸ਼ਾਨਦਾਰ ਸਿੱਖਣ ਵਾਲਾ ਸਰੋਤ ਹੈ। ਗੁਣਾਂ ਨੂੰ ਬਦਲ ਕੇ ਅਤੇ ਜੀਵੰਤ ਤੌਰ 'ਤੇ ਬਦਲਾਅ ਦੇਖ ਕੇ, ਤੁਸੀਂ ਬਿਹਤਰ ਸਮਝ ਸਕਦੇ ਹੋ ਕਿ ਟੇਲਵਿੰਡ ਦੇ ਯੂਟਿਲਿਟੀ ਕਲਾਸਾਂ ਇੱਕਠੇ ਹੋ ਕੇ ਕਿਵੇਂ ਸੰਗਠਿਤ ਡਿਜ਼ਾਈਨ ਬਣਾਉਂਦੀਆਂ ਹਨ।

ਸਿੱਖਣ ਦੇ ਫਾਇਦੇ:

• ਵੱਖ-ਵੱਖ ਟੇਲਵਿੰਡ ਕਲਾਸਾਂ ਦੇ ਪ੍ਰਭਾਵ ਨੂੰ ਵਿਜ਼ੂਅਲਾਈਜ਼ ਕਰੋ
• ਆਮ UI ਪੈਟਰਨਾਂ ਲਈ ਕਲਾਸਾਂ ਦੇ ਮਿਲਾਪਾਂ ਨੂੰ ਸਮਝੋ
• ਟੇਲਵਿੰਡ ਕਲਾਸਾਂ ਨੂੰ ਸੰਗਠਿਤ ਕਰਨ ਲਈ ਸਰਵੋਤਮ ਅਭਿਆਸ ਸਿੱਖੋ

3. ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਵਿਕਾਸ

ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਜਾਂ ਸੰਸਥਾ ਲਈ ਡਿਜ਼ਾਈਨ ਸਿਸਟਮ ਬਣਾਉਂਦੇ ਹੋ, ਤਾਂ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਤੁਹਾਡੇ ਬ੍ਰਾਂਡ ਦਿਸ਼ਾ-ਨਿਰਦੇਸ਼ਾਂ ਨਾਲ ਮੇਲ ਖਾਂਦੇ ਕੰਪੋਨੈਂਟ ਸ਼ੈਲੀਆਂ ਦੀ ਸਥਾਪਨਾ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰ ਸਕਦਾ ਹੈ।

ਪ੍ਰਕਿਰਿਆ:

1. ਆਪਣੇ ਰੰਗਾਂ ਦੇ ਪੈਲੇਟ ਅਤੇ ਟਾਈਪੋਗ੍ਰਾਫੀ ਨੂੰ ਪਰਿਭਾਸ਼ਿਤ ਕਰੋ
2. ਹਰ ਕਿਸਮ ਲਈ ਬੇਸ ਕੰਪੋਨੈਂਟ ਬਣਾਓ (ਬਟਨ, ਇਨਪੁਟ, ਆਦਿ)
3. ਆਪਣੇ ਟੀਮ ਲਈ ਜਨਰੇਟ ਕੀਤੇ ਕੋਡ ਨੂੰ ਦਸਤਾਵੇਜ਼ ਕਰੋ
4. ਆਪਣੇ ਐਪਲੀਕੇਸ਼ਨ ਵਿੱਚ ਸਥਿਰਤਾ ਯਕੀਨੀ ਬਣਾਓ

4. ਕਲਾਇੰਟ ਪ੍ਰਸਤੁਤੀ

ਜਦੋਂ ਤੁਸੀਂ ਕਲਾਇੰਟਾਂ ਨਾਲ ਕੰਮ ਕਰ ਰਹੇ ਹੋ ਜੋ ਸ਼ਾਇਦ ਤਕਨੀਕੀ ਨਹੀਂ ਹਨ, ਤਾਂ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਦੀ ਵਿਜ਼ੂਅਲ ਪ੍ਰਕਿਰਿਆ UI ਵਿਕਲਪਾਂ ਨੂੰ ਦਰਸਾਉਣ ਅਤੇ ਲਾਗੂ ਕਰਨ ਤੋਂ ਪਹਿਲਾਂ ਫੀਡਬੈਕ ਪ੍ਰਾਪਤ ਕਰਨ ਲਈ ਆਸਾਨ ਬਣਾਉਂਦੀ ਹੈ।

ਪ੍ਰਸਤੁਤੀ ਪਹੁੰਚ:

1. ਕਈ ਕੰਪੋਨੈਂਟ ਵੱਖਰੇ ਬਣਾਓ
2. ਕਲਾਇੰਟ ਮੀਟਿੰਗਾਂ ਦੌਰਾਨ ਜੀਵੰਤ ਪ੍ਰੀਵਿਊ ਦਿਖਾਓ
3. ਫੀਡਬੈਕ ਦੇ ਆਧਾਰ 'ਤੇ ਤੁਰੰਤ ਬਦਲਾਅ ਕਰੋ
4. ਮਨਜ਼ੂਰੀ ਮਿਲਣ 'ਤੇ ਅੰਤਿਮ ਕੋਡ ਨਿਕਾਸ ਕਰੋ

ਵਿਕਲਪ

ਜਦੋਂ ਕਿ ਸਾਡਾ ਰਿਐਕਟ ਟੇਲਵਿੰਡ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਵਿਅਕਤੀਗਤ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਬਣਾਉਣ ਲਈ ਇੱਕ ਸਹੀ ਅਨੁਭਵ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ, ਪਰ ਤੁਹਾਡੇ ਦੀਆਂ ਲੋੜਾਂ ਦੇ ਆਧਾਰ 'ਤੇ ਹੋਰ ਟੂਲਾਂ ਨੂੰ ਵਿਚਾਰਿਆ ਜਾ ਸਕਦਾ ਹੈ:

1. ਟੇਲਵਿੰਡ UI: ਪ੍ਰੀ-ਬਣਾਏ ਗਏ ਕੰਪੋਨੈਂਟਾਂ ਨਾਲ ਇੱਕ ਪ੍ਰੀਮੀਅਮ ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀ। ਸਾਡੇ ਮੁਫ਼ਤ ਟੂਲ ਦੇ ਵਿਰੁੱਧ, ਟੇਲਵਿੰਡ UI ਪੂਰਨ, ਪੇਸ਼ੇਵਰ ਡਿਜ਼ਾਈਨ ਕੀਤੇ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ ਪਰ ਖਰੀਦ ਦੀ ਲੋੜ ਹੈ।

2. ਹੈਡਲੈੱਸ UI: ਹੋਰ ਜਟਿਲ ਇੰਟਰੈਕਟਿਵ ਕੰਪੋਨੈਂਟਾਂ ਲਈ ਜਿਨ੍ਹਾਂ ਵਿੱਚ ਬਣਿਆ ਹੋਇਆ ਪਹੁੰਚ ਅਤੇ ਵਿਹਾਰ ਤਰਕਸ਼ੀਲਤਾ ਹੈ। ਸਾਡਾ ਟੂਲ ਵਿਜ਼ੂਅਲ ਸ਼ੈਲੀ 'ਤੇ ਧਿਆਨ ਕੇਂਦਰਿਤ ਕਰਦਾ ਹੈ ਨਾ ਕਿ ਜਟਿਲ ਇੰਟਰੈਕਸ਼ਨਾਂ 'ਤੇ।

3. ਟੇਲਵਿੰਡ CSS ਪਲੇਗ੍ਰਾਊਂਡ: ਅਧਿਕਾਰਿਤ ਟੇਲਵਿੰਡ ਪਲੇਗ੍ਰਾਊਂਡ ਤੁਹਾਨੂੰ ਪੂਰੇ HTML ਪੰਨਿਆਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਨਾ ਕਿ ਵਿਅਕਤੀਗਤ ਕੰਪੋਨੈਂਟਾਂ ਨਾਲ।

4. ਫਿਗਮਾ/ਸਕੇਚ + ਪਲੱਗਇਨ: ਡਿਜ਼ਾਈਨ ਟੂਲਾਂ ਦੇ ਨਾਲ ਟੇਲਵਿੰਡ ਪਲੱਗਇਨ ਵਰਤ ਕੇ ਵਿਜ਼ੂਅਲ ਡਿਜ਼ਾਈਨ ਲਈ ਵਰਤਿਆ ਜਾ ਸਕਦਾ ਹੈ ਪਰ ਸਾਡੇ ਟੂਲ ਵਾਂਗ ਰਿਐਕਟ ਕੋਡ ਨਹੀਂ ਜਨਰੇਟ ਕਰਦਾ।

ਤਕਨੀਕੀ ਵਿਚਾਰ

ਬ੍ਰਾਉਜ਼ਰ ਦੀ ਸੰਗਤਤਾ

ਰਿਐਕਟ ਟੇਲਵਿੰਡ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਸਾਰੇ ਆਧੁਨਿਕ ਬ੍ਰਾਉਜ਼ਰਾਂ ਵਿੱਚ ਕੰਮ ਕਰਦਾ ਹੈ, ਜਿਸ ਵਿੱਚ ਸ਼ਾਮਲ ਹਨ:

• ਕ੍ਰੋਮ (ਸੰਸਕਰਣ 60+)
• ਫਾਇਰਫਾਕਸ (ਸੰਸਕਰਣ 55+)
• ਸਫਾਰੀ (ਸੰਸਕਰਣ 11+)
• ਐਜ (ਸੰਸਕਰਣ 79+)

ਸਭ ਤੋਂ ਵਧੀਆ ਅਨੁਭਵ ਲਈ, ਅਸੀਂ ਤੁਹਾਡੇ ਪਸੰਦੀਦਾ ਬ੍ਰਾਉਜ਼ਰ ਦੇ ਨਵੇਂ ਸੰਸਕਰਣ ਦੀ ਵਰਤੋਂ ਕਰਨ ਦੀ ਸਿਫਾਰਸ਼ ਕਰਦੇ ਹਾਂ।

ਪ੍ਰਦਰਸ਼ਨ ਦੀ ਸੁਧਾਰ

ਜਦੋਂ ਤੁਸੀਂ ਉਤਪਾਦਨ ਵਿੱਚ ਜਨਰੇਟ ਕੀਤੇ ਕੰਪੋਨੈਂਟਾਂ ਦੀ ਵਰਤੋਂ ਕਰਦੇ ਹੋ, ਤਾਂ ਇਹ ਪ੍ਰਦਰਸ਼ਨ ਦੀਆਂ ਸਿਫਾਰਸ਼ਾਂ 'ਤੇ ਧਿਆਨ ਦਿਓ:

1. ਬੇਵਜੂਦ ਸ਼ੈਲੀਆਂ ਨੂੰ ਪੁਰਜ ਕਰੋ: ਉਤਪਾਦਨ ਵਿੱਚ ਵਰਤੋਂ ਕਰਨ ਲਈ ਟੇਲਵਿੰਡ ਦੇ ਪੁਰਜਾ ਵਿਕਲਪ ਨੂੰ ਵਰਤੋਂ
2. ਕੰਪੋਨੈਂਟ ਨਿਕਾਸ: ਦੁਹਰਾਏ ਗਏ ਕੰਪੋਨੈਂਟਾਂ ਲਈ ਦੁਹਰਾਉਣਯੋਗ ਰਿਐਕਟ ਕੰਪੋਨੈਂਟ ਬਣਾਓ ਨਾ ਕਿ JSX ਨੂੰ ਦੁਹਰਾਉਣਾ
3. ਕਲਾਸਾਂ ਦਾ ਸੰਗਠਨ: ਕੋਡ ਦੀ ਬਿਹਤਰ ਰੱਖਰਖਾਵ ਲਈ ਸੰਬੰਧਿਤ ਟੇਲਵਿੰਡ ਕਲਾਸਾਂ ਨੂੰ ਗਰੁੱਪ ਕਰੋ

ਪਹੁੰਚ ਦੇ ਵਿਚਾਰ

ਸਾਡਾ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਪਹੁੰਚ ਦੇ ਸਰਵੋਤਮ ਅਭਿਆਸਾਂ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦਾ ਹੈ:

• ਟੈਕਸਟ ਇਨਪੁਟ ਅਤੇ ਟੈਕਸਟਏਰਿਆ ਵਿੱਚ ਢੁਕਵਾਂ ਲੇਬਲ ਸ਼ਾਮਲ ਹਨ
• ਬਟਨ ਵਿੱਚ ਉਚਿਤ ਵਿਰੋਧ ਅਨੁਪਾਤ ਹਨ
• ਫੋਕਸ ਸਟੇਟਾਂ ਨੂੰ ਸਾਫ਼ ਦਿਖਾਈ ਦਿੰਦਾ ਹੈ
• ਬ੍ਰੇਡਕ੍ਰੰਬਾਂ ਵਿੱਚ ARIA ਲੇਬਲ ਸ਼ਾਮਲ ਹਨ

ਤਥਾਪਿ, ਆਪਣੇ ਅੰਤਿਮ ਲਾਗੂ ਕਰਨ ਦੀ ਪੂਰੀ ਪਹੁੰਚ ਦੇ ਅਨੁਕੂਲਤਾ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਲਈ ਹਮੇਸ਼ਾ ਟੈਸਟ ਕਰੋ।

ਅਕਸਰ ਪੁੱਛੇ ਜਾਣ ਵਾਲੇ ਸਵਾਲ

ਕੀ ਮੈਂ ਆਪਣੇ ਬਣਾਏ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਬਾਅਦ ਵਿੱਚ ਵਰਤਣ ਲਈ ਸੁਰੱਖਿਅਤ ਕਰ ਸਕਦਾ ਹਾਂ?

ਵਰਤਮਾਨ ਵਿੱਚ, ਟੂਲ ਵਿੱਚ ਸੁਰੱਖਿਅਤ ਕਰਨ ਦੀ ਵਿਸ਼ੇਸ਼ਤਾ ਨਹੀਂ ਹੈ। ਹਾਲਾਂਕਿ, ਤੁਸੀਂ ਜਨਰੇਟ ਕੀਤੇ ਕੋਡ ਨੂੰ ਕਾਪੀ ਕਰਕੇ ਆਪਣੇ ਫਾਈਲਾਂ ਵਿੱਚ ਸੁਰੱਖਿਅਤ ਕਰ ਸਕਦੇ ਹੋ। ਵਾਰੰ-ਵਾਰ ਵਰਤੋਂ ਲਈ, ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਕੰਪੋਨੈਂਟ ਲਾਇਬ੍ਰੇਰੀ ਬਣਾਉਣ 'ਤੇ ਵਿਚਾਰ ਕਰੋ।

ਕੀ ਟੂਲ ਟਾਈਪਸਕ੍ਰਿਪਟ ਕੋਡ ਜਨਰੇਟ ਕਰਦਾ ਹੈ?

ਮੌਜੂਦਾ ਸੰਸਕਰਣ ਜਾਵਾਸਕ੍ਰਿਪਟ ਰਿਐਕਟ ਕੋਡ ਜਨਰੇਟ ਕਰਦਾ ਹੈ। ਟਾਈਪਸਕ੍ਰਿਪਟ ਲਈ, ਤੁਹਾਨੂੰ ਹੱਥ ਨਾਲ ਕਿਸਮਾਂ ਦੀ ਪਰਿਭਾਸ਼ਾ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਲੋੜ ਹੋਵੇਗੀ। ਅਸੀਂ ਭਵਿੱਖ ਦੇ ਅੱਪਡੇਟਾਂ ਵਿੱਚ ਟਾਈਪਸਕ੍ਰਿਪਟ ਸਮਰਥਨ ਸ਼ਾਮਲ ਕਰਨ ਦੀ ਯੋਜਨਾ ਬਣਾ ਰਹੇ ਹਾਂ।

ਕੀ ਮੈਂ ਜਵਾਬਦੇਹ ਕੰਪੋਨੈਂਟ ਬਣਾਉਣ ਲਈ?

ਹਾਂ! ਟੂਲ ਤੁਹਾਨੂੰ ਵੱਖ-ਵੱਖ ਦ੍ਰਿਸ਼ਾਂ (ਮੋਬਾਈਲ, ਟੇਬਲਟ, ਡੈਸਕਟਾਪ) ਵਿੱਚ ਆਪਣੇ ਕੰਪੋਨੈਂਟਾਂ ਦੀ ਪ੍ਰੀਵਿਊ ਕਰਨ ਦੀ ਆਗਿਆ ਦਿੰਦਾ ਹੈ ਅਤੇ ਟੇਲਵਿੰਡ ਦੇ ਜਵਾਬਦੇਹ ਯੂਟਿਲਿਟੀ ਕਲਾਸਾਂ ਨੂੰ ਸ਼ਾਮਲ ਕਰਦਾ ਹੈ। ਤੁਸੀਂ ਜਵਾਬਦੇਹ ਪ੍ਰੀਵਿਊ ਵਿਸ਼ੇਸ਼ਤਾ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਇਹ ਯਕੀਨੀ ਬਣਾ ਸਕਦੇ ਹੋ ਕਿ ਤੁਹਾਡੇ ਕੰਪੋਨੈਂਟ ਸਾਰੇ ਡਿਵਾਈਸਾਂ 'ਤੇ ਚੰਗੇ ਦਿਖਾਈ ਦਿੰਦੇ ਹਨ।

ਮੈਂ ਆਪਣੇ ਕੰਪੋਨੈਂਟਾਂ ਵਿੱਚ ਟੇਲਵਿੰਡ ਪੈਲੇਟ ਵਿੱਚ ਨਾ ਹੋਣ ਵਾਲੇ ਕਸਟਮ ਰੰਗਾਂ ਨੂੰ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਾਂ?

ਜਦੋਂ ਕਿ ਟੂਲ ਟੇਲਵਿੰਡ ਦੇ ਡਿਫਾਲਟ ਰੰਗ ਪੈਲੇਟ ਦੀ ਵਰਤੋਂ ਕਰਦਾ ਹੈ, ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਟੇਲਵਿੰਡ ਸੰਰਚਨਾ ਨੂੰ ਵਧਾ ਕੇ ਆਪਣੇ ਰੰਗਾਂ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰ ਸਕਦੇ ਹੋ। ਜੇਕਰ ਉਹ ਟੇਲਵਿੰਡ ਦੇ ਨਾਂ ਦੇ ਅਨੁਕੂਲ ਹਨ ਤਾਂ ਜਨਰੇਟ ਕੀਤਾ ਗਿਆ ਕੋਡ ਤੁਹਾਡੇ ਕਸਟਮ ਰੰਗਾਂ ਨਾਲ ਕੰਮ ਕਰੇਗਾ।

ਕੀ ਮੈਂ ਆਪਣੇ ਕੰਪੋਨੈਂਟਾਂ ਦੇ ਡਾਰਕ ਮੋਡ ਵਰਜਨ ਬਣਾਉਣ ਲਈ?

ਮੌਜੂਦਾ ਸੰਸਕਰਣ ਵਿਸ਼ੇਸ਼ ਤੌਰ 'ਤੇ ਡਾਰਕ ਮੋਡ ਨੂੰ ਨਿਸ਼ਾਨਿਤ ਨਹੀਂ ਕਰਦਾ। ਹਾਲਾਂਕਿ, ਤੁਸੀਂ ਜਨਰੇਟ ਕੀਤੇ ਕੋਡ ਨੂੰ ਸ਼ੁਰੂਆਤੀ ਬਿੰਦੂ ਵਜੋਂ ਵਰਤ ਸਕਦੇ ਹੋ ਅਤੇ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਟੇਲਵਿੰਡ ਦੇ ਡਾਰਕ ਮੋਡ ਕਲਾਸਾਂ (dark:) ਨੂੰ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ।

ਕੀ ਜਨਰੇਟ ਕੀਤੇ ਕੰਪੋਨੈਂਟ ਪਹੁੰਚਯੋਗ ਹਨ?

ਟੂਲ ਪਹੁੰਚ ਦੇ ਸਰਵੋਤਮ ਅਭਿਆਸਾਂ ਨੂੰ ਉਤਸ਼ਾਹਿਤ ਕਰਦਾ ਹੈ, ਪਰ ਤੁਹਾਨੂੰ ਹਮੇਸ਼ਾਂ ਆਪਣੇ ਅੰਤਿਮ ਲਾਗੂ ਕਰਨ ਦੀ ਪੂਰੀ ਪਹੁੰਚ ਦੇ ਅਨੁਕੂਲਤਾ ਦੀ ਪੁਸ਼ਟੀ ਕਰਨ ਦੀ ਲੋੜ ਹੈ। ਰੰਗਾਂ ਦੇ ਵਿਰੋਧ, ਕੀਬੋਰਡ ਨੈਵੀਗੇਸ਼ਨ, ਅਤੇ ਸਕਰੀਨ ਰੀਡਰ ਦੀ ਸਮਰਥਾ 'ਤੇ ਖਾਸ ਧਿਆਨ ਦਿਓ।

ਕੀ ਮੈਂ ਇਸ ਟੂਲ ਨੂੰ Next.js ਜਾਂ Gatsby ਨਾਲ ਵਰਤ ਸਕਦਾ ਹਾਂ?

ਹਾਂ! ਜਨਰੇਟ ਕੀਤੇ ਰਿਐਕਟ ਕੰਪੋਨੈਂਟ ਫਰੇਮਵਰਕ-ਗੈਰ-ਨਿਰਭਰ ਹਨ ਅਤੇ ਇਹ ਕਿਸੇ ਵੀ ਰਿਐਕਟ-ਅਧਾਰਿਤ ਫਰੇਮਵਰਕ, ਜਿਵੇਂ ਕਿ Next.js, Gatsby, Create React App, ਅਤੇ ਹੋਰਾਂ ਨਾਲ ਕੰਮ ਕਰਨਗੇ।

ਮੈਂ ਆਪਣੇ ਕੰਪੋਨੈਂਟਾਂ ਵਿੱਚ ਆਇਕਨ ਕਿਵੇਂ ਸ਼ਾਮਲ ਕਰਾਂ?

ਜਦੋਂ ਕਿ ਟੂਲ ਸਿੱਧਾ ਆਇਕਨ ਚੋਣ ਨੂੰ ਸ਼ਾਮਲ ਨਹੀਂ ਕਰਦਾ, ਤੁਸੀਂ ਆਪਣੇ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ React Icons, Heroicons, ਜਾਂ Font Awesome ਵਰਗੀਆਂ ਲਾਇਬ੍ਰੇਰੀਆਂ ਦੀ ਵਰਤੋਂ ਕਰਕੇ ਜਨਰੇਟ ਕੀਤੇ ਕੰਪੋਨੈਂਟਾਂ ਵਿੱਚ ਆਸਾਨੀ ਨਾਲ ਆਇਕਨ ਸ਼ਾਮਲ ਕਰ ਸਕਦੇ ਹੋ।

ਕੀ ਇਹ ਟੂਲ ਵਰਤਣ ਲਈ ਮੁਫਤ ਹੈ?

ਹਾਂ, ਰਿਐਕਟ ਟੇਲਵਿੰਡ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਬਿਲਕੁਲ ਮੁਫਤ ਹੈ, ਬਿਨਾਂ ਕਿਸੇ ਖਾਤੇ ਦੀ ਲੋੜ।

ਕੀ ਮੈਂ ਇਸ ਟੂਲ ਨੂੰ ਸੁਧਾਰਣ ਵਿੱਚ ਯੋਗਦਾਨ ਦੇ ਸਕਦਾ ਹਾਂ?

ਅਸੀਂ ਯੋਗਦਾਨਾਂ ਦਾ ਸਵਾਗਤ ਕਰਦੇ ਹਾਂ! ਇਸ ਟੂਲ ਦੇ ਵਿਕਾਸ ਵਿੱਚ ਯੋਗਦਾਨ ਦੇਣ ਦੇ ਬਾਰੇ ਜਾਣਕਾਰੀ ਲਈ ਸਾਡੇ GitHub ਰਿਪੋਜ਼ਿਟਰੀ ਨੂੰ ਵੇਖੋ।

ਨਿਸ਼ਕਰਸ਼

ਰਿਐਕਟ ਟੇਲਵਿੰਡ ਕੰਪੋਨੈਂਟ ਬਿਲਡਰ ਨਾਲ ਜੀਵੰਤ ਪ੍ਰੀਵਿਊ ਸੁੰਦਰ, ਕਸਟਮਾਈਜ਼ ਕੀਤੇ ਗਏ UI ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਬਿਨਾਂ CSS ਲਿਖੇ ਬਣਾਉਣ ਦਾ ਇੱਕ ਸ਼ਕਤੀਸ਼ਾਲੀ ਪਰ ਸਧਾਰਨ ਤਰੀਕਾ ਪ੍ਰਦਾਨ ਕਰਦਾ ਹੈ। ਰਿਐਕਟ ਦੀ ਲਚੀਲਾਪਣ ਨੂੰ ਟੇਲਵਿੰਡ CSS ਦੇ ਯੂਟਿਲਿਟੀ-ਪਹਿਲਾਂ ਦੇ ਦ੍ਰਿਸ਼ਟੀਕੋਣ ਨਾਲ ਜੋੜ ਕੇ, ਤੁਸੀਂ ਆਪਣੇ ਸਹੀ ਡਿਜ਼ਾਈਨ ਦੀਆਂ ਲੋੜਾਂ ਨੂੰ ਮਿਲਾਉਣ ਵਾਲੇ ਕੰਪੋਨੈਂਟਾਂ ਨੂੰ ਤੇਜ਼ੀ ਨਾਲ ਪ੍ਰੋਟੋਟਾਈਪ ਅਤੇ ਬਣਾਉਣ ਦੇ ਯੋਗ ਹੋ।

ਵੱਖ-ਵੱਖ ਕੰਪੋਨੈਂਟ ਕਿਸਮਾਂ ਨਾਲ ਪ੍ਰਯੋਗ ਕਰਨ, ਉਹਨਾਂ ਦੇ ਗੁਣਾਂ ਨੂੰ ਕਸਟਮਾਈਜ਼ ਕਰਨ, ਅਤੇ ਜੀਵੰਤ ਪ੍ਰੀਵਿਊ ਵਿੱਚ ਬਦਲਾਅ ਦੇਖਣ ਲਈ ਸ਼ੁਰੂ ਕਰੋ। ਜਦੋਂ ਤੁਸੀਂ ਆਪਣੇ ਡਿਜ਼ਾਈਨ ਨਾਲ ਸੰਤੁਸ਼ਟ ਹੋ ਜਾਂਦੇ ਹੋ, ਤਾਂ ਸਿਰਫ਼ ਜਨਰੇਟ ਕੀਤੇ ਕੋਡ ਨੂੰ ਕਾਪੀ ਕਰੋ ਅਤੇ ਆਪਣੇ ਰਿਐਕਟ ਪ੍ਰੋਜੈਕਟ ਵਿੱਚ ਸ਼ਾਮਲ ਕਰੋ। ਚਾਹੇ ਤੁਸੀਂ ਇੱਕ ਅਨੁਭਵੀ ਵਿਕਾਸਕ ਹੋ ਜਾਂ ਰਿਐਕਟ ਅਤੇ ਟੇਲਵਿੰਡ ਨਾਲ ਸ਼ੁਰੂਆਤ ਕਰ ਰਹੇ ਹੋ, ਇਹ ਟੂਲ ਤੁਹਾਡੇ UI ਵਿਕਾਸ ਪ੍ਰਕਿਰਿਆ ਨੂੰ ਤੇਜ਼ ਕਰਨ ਵਿੱਚ ਮਦਦ ਕਰੇਗਾ।

ਕੀ ਤੁਸੀਂ ਆਪਣਾ ਪਹਿਲਾ ਕੰਪੋਨੈਂਟ ਬਣਾਉਣ ਲਈ ਤਿਆਰ ਹੋ? ਉੱਪਰ ਦਿੱਤੇ ਵਿਕਲਪਾਂ ਵਿੱਚੋਂ ਇੱਕ ਕੰਪੋਨੈਂਟ ਕਿਸਮ ਚੁਣੋ ਅਤੇ ਕਸਟਮਾਈਜ਼ ਕਰਨਾ ਸ਼ੁਰੂ ਕਰੋ!