CapDriveMaterial
Нарисуйте поверхность из матового стекла, на которую можно наложить текст и графику, чтобы сформировать область содержимого. type в настоящее время поддерживает матовое покрытие, style контролирует толщину материала; видимый эффект зависит от содержания, стоящего за ним.
Пример
function main() {
return (
<ZStack>
<Material type="frosted" style="thin" />
<Text>CapDrive</Text>
</ZStack>
);
}
Использование
- Material — поверхность без children и padding. Текст накладывайте через ZStack; стекло зависит от фона. type пока frosted, style задаёт толщину, изображения-текстуры не принимаются.
- mask использует альфу: непрозрачное показывает, прозрачное скрывает. Чёрный и белый с одинаковой альфой равны. Маска не участвует в раскладке; задайте размер и отличайте от clipped.
Свойства
type"frosted"Тип материала; сейчас frosted рисует системное матовое стекло.
"frosted"style?"ultraThin" | "thin" | "regular" | "thick" | "ultraThick" | "bar"Материал от ultraThin до ultraThick; bar использует материал системных панелей.
"ultraThin"Общие свойства
width?number | "auto" | "fill"Ширина в пунктах, автоматический размер или заполнение родителя.
100height?number | "auto" | "fill"Высота в пунктах, автоматический размер или заполнение родителя.
80x?numberВизуальное смещение в пунктах: x вправо, y вниз. Место в раскладке не меняется.
0y?numberВизуальное смещение в пунктах: x вправо, y вниз. Место в раскладке не меняется.
0transform?ViewTransformПреобразование всего View без изменения раскладки. Сдвиг в пунктах, поворот/наклон в градусах, масштаб 1 без изменений, якоря 0–1.
{rotation: 0}background?PaintЦвет или градиент фона; clear означает прозрачность.
"clear"opacity?numberНепрозрачность всего View: 0 прозрачно, 1 непрозрачно.
1cornerRadius?numberРадиус скругления в пунктах.
0clipped?booleanОбрезать рисунок за границами View.
falseclip?boolean | "rectangle" | "ellipse"Форма обрезки rectangle или ellipse; Material также принимает false для отключения.
"rectangle"mask?View | nullView альфа-маски. По центру без влияния на компоновку; null отключает маску.
<Circle width="fill" height="fill" background="white"/>zIndex?numberПорядок среди соседей; большее значение выводится впереди.
0blur?numberРадиус размытия в пунктах; 0 отключает его.
4innerShadow?DrawingEffectЦвет, непрозрачность, радиус размытия и смещение x/y эффекта; расстояния в пунктах.
{color: HDR("black"), opacity: 0.5, radius: 4, x: 0, y: 2}glow?DrawingEffectЦвет, непрозрачность, радиус размытия и смещение x/y эффекта; расстояния в пунктах.
{color: HDR("cyan"), radius: 8, opacity: 0.8}shadowColor?ColorЦвет внешней тени.
HDR("black")shadowOpacity?numberНепрозрачность тени 0–1; 0 скрывает её.
0shadowRadius?numberРадиус размытия внешней тени в пунктах.
4shadowX?numberСмещение тени в пунктах: x вправо, y вниз.
0shadowY?numberСмещение тени в пунктах: x вправо, y вниз.
2animations?Animation[]Анимация изменения свойства. duration/delay в секундах; from/to — границы; repeat/autoreverse — повторы, wrap — период.
[{property: "opacity", duration: 0.25, curve: "easeInOut"}]key?string | numberСтабильный идентификатор среди соседних элементов.
Практический пример
function main() {
return (
<ZStack width={200} height={100}>
<HStack spacing={0} width="fill" height="fill">
<Rectangle width="fill" height="fill" background="blue" />
<Rectangle width="fill" height="fill" background="orange" />
</HStack>
<Material
width={160}
height={64}
type="frosted"
style="thin"
cornerRadius={16}
/>
<Text fontSize={28}>78 km/h</Text>
</ZStack>
);
}
Анимация
widthheightxyopacitybackgroundcornerRadiusblurshadowColorshadowOpacityshadowRadiusshadowXshadowYtransform.translateXtransform.translateYtransform.scaleXtransform.scaleYtransform.rotationtransform.skewXtransform.skewYtransform.anchorXtransform.anchorYПри пропуске
Таблица описывает проверенное поведение без свойства. Примеры не являются значениями по умолчанию. Фиксированный результат требует явных значений; размеры и цвета темы зависят от контекста.