CSS: context-view ​

.instui-context-view —Caret-ով բարձրացված կոչում, որը հնարավոր է տեղավորել ցանկացած կողմում; աշխատում է որպես տեղական [popover]։

Caret-ը կազմված է երկու առանցքից դրված ::before/::after եռանկյուններից (առանձնացնող գիծ, ապա լցնելով)՝ ճիշտ ընթեռնվող լինելու համար համապատասխան մակերևույթի վրա; որպես [popover] այն պահանջում է նույն open/popovertarget կապաթելը ինչ popover-ը, բայց, տարբերությունից tooltip-ի, այն փակվում է արտաքին կտտոցով կամ Escape-ով։

Source: context-view.css

Օգտագործում ​

css
@import "@pantoken/components/components.css";
@import "@pantoken/components/context-view.css";

Օրինակներ ​

html
<div class="instui-context-view -placement-bottom" id="cv-popover">A context view frames a callout with a caret. As a popover it rides the top layer and closes when you click away or press Esc.</div>

Մոդիֆիկատորներ ​

ՄոդիֆիկատորՆկարագիր
.-color-inverseՄութ (ապաշխարող) գույնի թեմա։
.-placement-bottomԿայանալու է anchor-ի տակ։
.-placement-endԿայանալու է anchor-ի վերջում (inline-end)।
.-placement-startԿայանալու է anchor-ի սկիզբում (inline-start)।
.-placement-topԿայանալու է anchor-ի վերևում։

Պսևդո-էլեմենտներ ​

Պսևդո-էլեմենտՆկարագիր
::afterՌենդերում է caret-ի ներքին լցնող եռանկյունը։
::beforeՌենդերում է caret-ի արտաքին պատնեշային եռանկյունը։

Փոփոխական վիճակներ ​

ՎիճակՆկարագիր
:state(open)—

Պայմաններ ​

ՏիպՀարցումՆկարագիր
supports(position-area: block-end)—

Ցուցիչներ սպառված ​

TokenՏիպԱրժեք
--instui-color-background-elevated-surface-base<color>LightDarklight-dark(#ffffff, #171B21)
--instui-color-background-inverse<color>LightDarklight-dark(#334450, #F2F4F5)
--instui-color-text-base<color>LightDarklight-dark(#273540, #F2F4F5)
--instui-color-text-inverse<color>LightDarklight-dark(#ffffff, #1C222B)
--instui-component-context-view-arrow-background-color<color>LightDarklight-dark(#ffffff, #171B21)
--instui-component-context-view-arrow-background-color-inverse<color>LightDarklight-dark(#334450, #F2F4F5)
--instui-component-context-view-arrow-border-color<color>LightDarklight-dark(#E8EAEC, #2D3D49)
--instui-component-context-view-arrow-border-color-inverse<color>#00000000
--instui-component-context-view-arrow-border-width<length>0.0625rem
--instui-component-context-view-arrow-size<length>0.5rem
--instui-component-context-view-border-radius<length>0.75rem
--instui-elevation-abovenone | <shadow>#—
--instui-spacing-space-lg<length>1rem
--instui-spacing-space-md<length>0.75rem

Բրաուզերի աջակցություն ​

  • Օգտվում է CSS anchor դիրքավորմանից (position-anchor, position-area, position-try-fallbacks) և բնիկ [popover] API-ից @supports պաշտպանաթաղի ետևում; պահանջում է վերջին үеի Chromium կամ Safari, այլ պայմաններում վերադառնում է UA-կենտրոնացված popover-ին։

Ավելին կապված ​

  • popover — Ընդհանուր վերին շերտի popover։
  • tooltip — Փոքր, անջատման կամ ֆոկուսի կոչում։