CSS: avatar ​

.instui-avatar · stable — एक उपयोगकर्ता अवतार जो प्राथमिक रूप से प्रारंभिक अक्षर या छवि दिखाता है, डिफ़ॉल्ट रूप से गोलाकार।

डिफ़ॉल्ट रूप से पैलेट रंग पारदर्शी सतह पर प्रारंभिक अक्षरों को टिंट करता है; -has-inverse-color सतह को रंग से भरता है और प्रारंभिक अक्षरों को उसी रंग पर रखता है। -color-ai वेरिएंट हमेशा वायलेट→सी ग्रेडिएंट से भरता है। पूरा प्रदर्शन नाम दिखाने के लिए, उसे content में रखें (ताकि यह पहुंच वृक्ष में बना रहे) और कॉम्पैक्ट दृश्य के लिए data-initials="XX" जोड़ें — असली टेक्स्ट वही है जिसे स्क्रीन रीडर घोषित करता है। data-initials के बिना, ओवरफ्लो सामग्री बस कड़ा-क्लिप होती है (कोई इलिप्सिस नहीं); सटीक एक-सिर-आधारित क्लिप के लिए इसे .name में लपेटें, या दो क्लिप किए गए अक्षरों के लिए इसे .first-name/.last-name में विभाजित करें (दोनों में से कोई भी आधा छोड़ा जा सकता है और दूसरा केंद्रित बना रहता है)।

Source: avatar.css

TIP

JS संवर्धन — यह कंपोनेंट का CSS स्वयं रेंडर और कार्य करता है; इंटरैक्टिव व्यवहार जोड़ने के लिए इसे @pantoken/interactions के साथ जोड़ें। विवरण के लिए modifier table below देखें।

एक्सेसिबिलिटी ​

छवि अवतार के लिए एक अर्थपूर्ण alt (व्यक्ति का नाम) दें, सामान्य "avatar" नहीं; केवल प्रारंभिक अक्षरों वाले अवतार के लिए, सहायक तकनीक वास्तविक नाम घोषित करे इसलिए वास्तविक नाम का कंटेंट (सादा टेक्स्ट, data-initials, .name, या .first-name/.last-name) पूर्व-संक्षेपित अक्षरों के बजाय प्राथमिकता दें।

उपयोग ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/avatar.css";

उदाहरण ​

html
<span class="instui-avatar --me-sm">LH</span>
<span class="instui-avatar -color-ai --me-sm">AI</span>
<span class="instui-avatar --me-sm" data-initials="NV">Dr. Nguyen Van Thoc</span>
<span class="instui-avatar"><span class="name">Miguel Sanchez</span></span>
<span class="instui-avatar"><span class="first-name">Miguel</span> <span class="last-name">Sanchez</span></span>

संरचना ​

अवतार में से एक दिखता है: एक <img>, सादा/data-initials टेक्स्ट, एक .name रैप, या एक .first-name/.last-name जोड़ी।

text
.instui-avatar
  img (0..1)
  .name (0..1)
  .first-name (0..1)
  .last-name (0..1)
flowchart TD n0[".instui-avatar"]:::cssdoc-root n1("img"):::cssdoc-part n2(".name"):::cssdoc-part n3(".first-name"):::cssdoc-part n4(".last-name"):::cssdoc-part n0 -.->|0..1| n1 n0 -.->|0..1| n2 n0 -.->|0..1| n3 n0 -.->|0..1| n4 classDef cssdoc-root stroke-width:1px; classDef cssdoc-part stroke-width:1px; classDef cssdoc-slot stroke-width:1px; classDef cssdoc-component stroke-width:1px;

मॉडिफायर ​

मॉडिफायरविवरण
.-color-accent1अप्रमाणित — use .-color-blue.
.-color-accent2अप्रमाणित — use .-color-green.
.-color-accent3अप्रमाणित — use .-color-red.
.-color-accent4अप्रमाणित — use .-color-orange.
.-color-accent5अप्रमाणित — use .-color-ash.
.-color-accent6अप्रमाणित — use .-color-grey.
.-color-aiAI-एक्सेंट पैलेट रंग।
.-color-ashAsh पैलेट रंग।
.-color-blueBlue पैलेट रंग।
.-color-greenGreen पैलेट रंग।
.-color-greyGrey पैलेट रंग।
.-color-orangeOrange पैलेट रंग।
.-color-redRed पैलेट रंग।
.-has-inverse-colorविपरीत (अँधेरे पर) टेक्स्ट रंग का उपयोग करें।
.-shape-rectangleगोल के बजाय चौकोर (आयताकार) आकृति।
.-show-borderAlias — maps to .-show-border-always.
.-show-border-alwaysछवि या विपरीत फिल के ऊपर भी, बॉर्डर रिंग को मजबूर रूप से चालू करें।
.-show-border-neverबॉर्डर रिंग को मजबूर रूप से बंद करें।
.-size-2xlदो आकार बड़े।
.-size-2xsदो आकार छोटे।
.-size-largeबड़ा। -size-lg का लंबा-फॉर्म उपनाम।
.-size-lgबड़ा।
.-size-mdमध्यम (डिफ़ॉल्ट)।
.-size-mediumमध्यम (डिफ़ॉल्ट)। -size-md का लंबा-फॉर्म उपनाम।
.-size-smछोटा।
.-size-smallछोटा। -size-sm का लंबा-फॉर्म उपनाम।
.-size-x-largeअतिरिक्‍त बड़ा। -size-xl का लंबा-फॉर्म उपनाम।
.-size-x-smallअतिरिक्‍त छोटा। -size-xs का लंबा-फॉर्म उपनाम।
.-size-xlअतिरिक्‍त बड़ा।
.-size-xsअतिरिक्‍त छोटा।
.-size-xx-largeदो आकार बड़े। -size-2xl का लंबा-फॉर्म उपनाम।
.-size-xx-smallदो आकार छोटे। -size-2xs का लंबा-फॉर्म उपनाम।

पार्ट्स ​

भागविवरण
.first-nameवैकल्पिक ( .last-name के साथ जोड़ी): दिए गए नाम को लपेटता है, इसे उसके अग्रणी अक्षर तक क्लिप करता है।
.last-nameवैकल्पिक ( .first-name के साथ जोड़ी): पारिवारिक नाम को लपेटता है, इसे उसके अग्रणी अक्षर तक क्लिप करता है।
.nameOptional: wrap the full name to clip it to a single leading letter without data-initials or JS.

स्यूडो-एलिमेंट्स ​

स्यूडो-एलिमेंटविवरण
::before—

उपयोग किये गए टोकन ​

Tokenप्रकारमान
--instui-component-avatar-ai-bottom-gradient-color<color>#00828E
--instui-component-avatar-ai-top-gradient-color<color>#9E58BD
--instui-component-avatar-ash-background-color<color>LightDarklight-dark(#273540, #1C222B)
--instui-component-avatar-ash-text-color<color>LightDarklight-dark(#273540, #C7CACD)
--instui-component-avatar-background-color<color>LightDarklight-dark(#ffffff, #10141A)
--instui-component-avatar-blue-background-color<color>#2B7ABC
--instui-component-avatar-blue-text-color<color>LightDarklight-dark(#2871AF, #7FB4F1)
--instui-component-avatar-border-color<color>LightDarklight-dark(#8D959F, #6A7883)
--instui-component-avatar-border-width-md<length>0.125rem
--instui-component-avatar-border-width-sm<length>0.0625rem
--instui-component-avatar-font-family[ <font-family-name> | <generic-font-family> ]#Atkinson Hyperlegible Next, "Helvetica Neue", Helvetica, Arial, sans-serif
--instui-component-avatar-font-size-lg<length>1.25rem
--instui-component-avatar-font-size-md<length>1rem
--instui-component-avatar-font-size-sm<length>0.875rem
--instui-component-avatar-font-size-xl<length>1.75rem
--instui-component-avatar-font-size-xs<length>0.75rem
--instui-component-avatar-font-size2xl<length>2.5rem
--instui-component-avatar-font-size2xs<length>0.75rem
--instui-component-avatar-font-weight<integer>600
--instui-component-avatar-green-background-color<color>#03893D
--instui-component-avatar-green-text-color<color>LightDarklight-dark(#037D37, #61C378)
--instui-component-avatar-grey-background-color<color>LightDarklight-dark(#4A5B68, #576773)
--instui-component-avatar-grey-text-color<color>LightDarklight-dark(#4A5B68, #F2F4F5)
--instui-component-avatar-orange-background-color<color>#CF4A00
--instui-component-avatar-orange-text-color<color>LightDarklight-dark(#BB4200, #FF905A)
--instui-component-avatar-rectangle-radius<length>0.25rem
--instui-component-avatar-red-background-color<color>#E62429
--instui-component-avatar-red-text-color<color>LightDarklight-dark(#CF1F24, #FA917F)
--instui-component-avatar-size-lg<length>3.5rem
--instui-component-avatar-size-md<length>3rem
--instui-component-avatar-size-sm<length>2.5rem
--instui-component-avatar-size-xl<length>4rem
--instui-component-avatar-size-xs<length>2rem
--instui-component-avatar-size2xl<length>5rem
--instui-component-avatar-size2xs<length>1.5rem
--instui-component-avatar-text-on-color<color>#ffffff

संबंधित ​

  • byline — अग्रणी हीरो फ़िगर के रूप में एक अवतार होस्ट कर सकता है।