nuiButton ਡਾਇਰੈਕਟਿਵ ਕਿਸੇ ਨੇਟਿਵ <button> ਜਾਂ <a> ਨੂੰ ਸਟਾਈਲ ਕਰਦਾ ਹੈ। ਐਲੀਮੈਂਟ ਦੇ ਸਿਮੈਂਟਿਕਸ, ਕੀ-ਬੋਰਡ ਵਿਹਾਰ ਅਤੇ ਫ਼ਾਰਮ ਵਿੱਚ ਉਸ ਦੀ ਭੂਮਿਕਾ ਜਿਉਂ ਦੇ ਤਿਉਂ ਰਹਿੰਦੇ ਹਨ; ਡਾਇਰੈਕਟਿਵ ਸਿਰਫ਼ ਆਪਣੇ ਇਨਪੁੱਟਾਂ ਨੂੰ ਉਨ੍ਹਾਂ data ਐਟਰੀਬਿਊਟਾਂ ਵਿੱਚ ਦਰਸਾਉਂਦਾ ਹੈ ਜਿਨ੍ਹਾਂ ਨੂੰ ਸਟਾਈਲਸ਼ੀਟ ਨਿਸ਼ਾਨਾ ਬਣਾਉਂਦੀ ਹੈ।
ਕਾਰਵਾਈਆਂ ਲਈ <button> ਅਤੇ ਨੈਵੀਗੇਸ਼ਨ ਲਈ <a> ਵਰਤੋ। ਦੋਵੇਂ ਇੱਕੋ ਜਿਹੇ ਦਿਸਦੇ ਹਨ, ਅਤੇ ਦੋਵੇਂ disabled ਦਾ ਸਮਰਥਨ ਕਰਦੇ ਹਨ।
ਵੇਰੀਐਂਟ
ਚਾਰ ਫ਼ਿਲ ਸਟਾਈਲ, ਸਭ ਤੋਂ ਉੱਭਰਵੇਂ ਤੋਂ ਲੈ ਕੇ ਸਭ ਤੋਂ ਸਾਦੇ ਤੱਕ। ਹਰ ਵਿਊ ਵਿੱਚ ਮੁੱਖ ਕਾਰਵਾਈ ਲਈ ਇੱਕੋ solid ਬਟਨ ਰੱਖੋ।
ਟੋਨ
ਟੋਨ ਰੰਗਾਂ ਦਾ ਪੈਲੇਟ ਬਦਲਦੇ ਹਨ: ਮੁੱਖ ਰਾਹ ਲਈ accent, ਦੂਜੇ ਦਰਜੇ ਦੀਆਂ ਕਾਰਵਾਈਆਂ ਲਈ neutral ਅਤੇ ਜੋਖਮ ਭਰੀਆਂ ਕਾਰਵਾਈਆਂ ਲਈ danger।
ਸਾਈਜ਼
ਤਿੰਨ ਉਚਾਈਆਂ: 28, 36 ਅਤੇ 44 ਪਿਕਸਲ। ਸਭ ਤੋਂ ਛੋਟਾ ਸਾਈਜ਼ ਵੀ WCAG 2.2 ਦੇ ਘੱਟੋ-ਘੱਟ ਟਾਰਗੈੱਟ ਸਾਈਜ਼ ਤੋਂ ਵੱਡਾ ਹੈ।
ਲਿੰਕ ਅਤੇ ਅਯੋਗ ਬਟਨ
ਐਂਕਰਾਂ ਨੂੰ ਨੇਟਿਵ ਤਰੀਕੇ ਨਾਲ ਅਯੋਗ ਨਹੀਂ ਕੀਤਾ ਜਾ ਸਕਦਾ, ਇਸ ਲਈ ਅਯੋਗ ਲਿੰਕ ਨੂੰ aria-disabled="true" ਮਿਲਦਾ ਹੈ ਅਤੇ ਉਸ ਦੇ ਕਲਿੱਕ ਰੋਕ ਦਿੱਤੇ ਜਾਂਦੇ ਹਨ, routerLink ਹੋਣ ’ਤੇ ਵੀ।
ਦਬਾਉਣ ਦੇ ਇਫ਼ੈਕਟ
ਹਰ ਬਟਨ ਨੂੰ ਦਬਾ ਕੇ ਰੱਖੋ। press ਤੈਅ ਕਰਦਾ ਹੈ ਕਿ ਦਬਾ ਕੇ ਰੱਖਣ ’ਤੇ ਬਟਨ ਕੀ ਕਰੇ, ਅਤੇ motion ਇਹ ਕਿ ਉਹ ਕਿਸ ਸਪ੍ਰਿੰਗ ਨਾਲ ਵਾਪਸ ਆਵੇ। ਕਿਸੇ ਵੀ ਐਲੀਮੈਂਟ ’ਤੇ ਲੱਗਾ data-nui-press ਉਸ ਦੇ ਅੰਦਰ ਦੀ ਹਰ ਚੀਜ਼ ’ਤੇ ਲਾਗੂ ਹੁੰਦਾ ਹੈ।
ਕੋਨੇ, ਰੇਡੀਅਸ ਅਤੇ ਡੈਨਸਿਟੀ
corners ਕੋਨਿਆਂ ਦੀ ਸ਼ਕਲ ਬਦਲਦਾ ਹੈ, radius ਉਨ੍ਹਾਂ ਦਾ ਸਾਈਜ਼, ਅਤੇ density ਇਹ ਕਿ ਬਟਨ ਕਿੰਨੀ ਥਾਂ ਲਵੇ, ਪਰ ਇਹ ਥਾਂ ਕਦੇ ਵੀ 24px ਦੇ ਟਾਰਗੈੱਟ ਸਾਈਜ਼ ਤੋਂ ਘੱਟ ਨਹੀਂ ਹੁੰਦੀ। ਜੋ ਬ੍ਰਾਊਜ਼ਰ corner-shape ਦਾ ਸਮਰਥਨ ਨਹੀਂ ਕਰਦੇ, ਉਹ ਕੋਨੇ ਗੋਲ ਬਣਾਉਂਦੇ ਹਨ।