@hakit/components
Version:
A series of components to work with @hakit/core
27 lines • 2.59 kB
TypeScript
declare const columns: readonly [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
export type GridSpan = (typeof columns)[number];
export interface AvailableQueries {
/** For example, xs={12} sm={6} sizes a component to occupy half of the viewport width (6 columns) (50% width) when viewport width is activated `SM` breakpoint or more pixels. For smaller viewports, the component fills all 12 available columns (100% width). */
xxs?: GridSpan;
/** For example, xs={12} sm={6} sizes a component to occupy half of the viewport width (6 columns) (50% width) when viewport width is activated `SM` breakpoint or more pixels. For smaller viewports, the component fills all 12 available columns (100% width). */
xs?: GridSpan;
/** For example, xs={12} sm={6} sizes a component to occupy half of the viewport width (6 columns) (50% width) when viewport width is activated `SM` breakpoint or more pixels. For smaller viewports, the component fills all 12 available columns (100% width). */
sm?: GridSpan;
/** For example, xs={12} sm={6} sizes a component to occupy half of the viewport width (6 columns) (50% width) when viewport width is activated `SM` breakpoint or more pixels. For smaller viewports, the component fills all 12 available columns (100% width). */
md?: GridSpan;
/** For example, xs={12} sm={6} sizes a component to occupy half of the viewport width (6 columns) (50% width) when viewport width is activated `SM` breakpoint or more pixels. For smaller viewports, the component fills all 12 available columns (100% width). */
lg?: GridSpan;
/** For example, xs={12} sm={6} sizes a component to occupy half of the viewport width (6 columns) (50% width) when viewport width is activated `SM` breakpoint or more pixels. For smaller viewports, the component fills all 12 available columns (100% width). */
xlg?: GridSpan;
}
export declare const orderedBreakpoints: Exclude<BreakPoint, "xlg">[];
export declare const allBreakpoints: BreakPoint[];
export type BreakPoint = keyof AvailableQueries;
export type BreakPoints = Partial<Record<Exclude<BreakPoint, "xlg">, number>>;
export type BreakPointsWithXlg = Partial<Record<BreakPoint, number>>;
export declare const getBreakpoints: (breakpoints: BreakPoints) => Partial<Record<keyof AvailableQueries, string>>;
export declare const mq: (names: BreakPoint[], cssValues: string) => string;
export declare const getColumnSizeCSS: (column: GridSpan) => string;
export declare const generateColumnBreakpoints: (breakpoints: BreakPoints) => string;
export {};
//# sourceMappingURL=breakpoints.d.ts.map