How to use the baseui.useStyletron function in baseui

To help you get started, we’ve selected a few baseui examples, based on popular ways it is used in public projects.

github uber / baseweb / documentation-site / examples / layer / layer-z-index.tsx View on Github external
function Wrapper(props: any) {
  const [css] = useStyletron();
  const {offset, color, children, forwardedRef} = props;
  return (
    <div
      className={css({
        position: 'absolute',
        top: offset || '50%',
        left: offset || '50%',
        width: '200px',
        paddingTop: '20px',
        paddingBottom: '20px',
        paddingLeft: '20px',
        paddingRight: '20px',
        backgroundColor: color,
        textAlign: 'center',
      })}
      ref={forwardedRef}
github uber / baseweb / documentation-site / examples / progress-steps / dotted.tsx View on Github external
function ProgressStepsContainer() {
  const [current, setCurrent] = React.useState(0);
  const [css, theme] = useStyletron();

  return (
    <ProgressSteps current={current}>
      <Step title="Create Account">
        <div className={css({...theme.typography.font300})}>
          Here is some step content
        </div>
        <StatefulSelect
          options={[
            {id: 'AliceBlue', color: '#F0F8FF'},
            {id: 'AntiqueWhite', color: '#FAEBD7'},
            {id: 'Aqua', color: '#00FFFF'},
            {id: 'Aquamarine', color: '#7FFFD4'},
            {id: 'Azure', color: '#F0FFFF'},
            {id: 'Beige', color: '#F5F5DC'},
          ]}
github uber / baseweb / documentation-site / examples / progress-steps / numbered.tsx View on Github external
function ProgressStepsContainer() {
  const [current, setCurrent] = React.useState(0);
  const [css, theme] = useStyletron();
  return (
    <ProgressSteps current={current}>
      <NumberedStep title="Create Account">
        <div className={css({...theme.typography.font300})}>
          Here is some step content
        </div>
        <SpacedButton disabled>Previous</SpacedButton>
        <SpacedButton onClick={() => setCurrent(1)}>
          Next
        </SpacedButton>
      </NumberedStep>
      <NumberedStep title="Verify Payment">
        <div className={css({...theme.typography.font300})}>
          Here is some more content
        </div>
        <SpacedButton onClick={() => setCurrent(0)}>
github uber / baseweb / documentation-site / examples / checkbox / indeterminate.tsx View on Github external
function GroupList() {
  const [css, theme] = useStyletron();
  const [checkboxes, setCheckboxes] = React.useState([true, false]);

  const allChecked = checkboxes.every(Boolean);
  const isIndeterminate = checkboxes.some(Boolean) && !allChecked;

  return (
    <div>
      <Checkbox
        onChange={e => {
          const target = e.target as HTMLInputElement;
          setCheckboxes([target.checked, target.checked]);
        }}
        isIndeterminate={isIndeterminate}
        checked={allChecked}
      >
        Indeterminate checkbox if not all subcheckboxes are checked
github uber / baseweb / documentation-site / examples / slider / custom-ticks.js View on Github external
function CustomTicks() {
  const [value, setValue] = React.useState([4500]);
  const [css, theme] = useStyletron();
  return (
    <Slider
      value={value}
      min={1000}
      max={8000}
      step={100}
      onChange={params => {
        if (params.value) {
          setValue(params.value);
        } else {
          setValue([]);
        }
      }}
      overrides={{
        ThumbValue: ({$value}) => (
          <div
github uber / baseweb / documentation-site / examples / table-grid / nested.js View on Github external
function Tasks(props) {
  const [css] = useStyletron();
  return (
    <div
      className={css({
        gridColumn: 'span 5',
        padding: '32px 24px',
      })}
    >
      <StyledTable $gridTemplateColumns="max-content auto auto auto">
        <StyledHeadCell $sticky={false}>Task</StyledHeadCell>
        <StyledHeadCell $sticky={false}>Status</StyledHeadCell>
        <StyledHeadCell $sticky={false}>Last Run</StyledHeadCell>
        <StyledHeadCell $sticky={false}>Details</StyledHeadCell>
        {props.tasks.map((task, index) => {
          return (
            <React.Fragment>
              <StyledBodyCell>{task[0]}</StyledBodyCell>
github uber / baseweb / documentation-site / examples / input / before-after.js View on Github external
function After() {
  const [css, theme] = useStyletron();
  return (
    <div
      className={css({
        display: 'flex',
        alignItems: 'center',
        paddingRight: theme.sizing.scale500,
      })}
    >
      <Search size="18px" />
    </div>
  );
}
github uber / baseweb / documentation-site / examples / form-control / validation.js View on Github external
function Negative() {
  const [css, theme] = useStyletron();
  return (
    <div
      className={css({
        display: 'flex',
        alignItems: 'center',
        paddingRight: theme.sizing.scale500,
        color: theme.colors.negative400,
      })}
    >
      <Alert size="18px" />
    </div>
  );
}
github uber / baseweb / documentation-site / examples / input / before-after.tsx View on Github external
function Negative() {
  const [css, theme] = useStyletron();
  return (
    <div
      className={css({
        display: 'flex',
        alignItems: 'center',
        paddingRight: theme.sizing.scale500,
        color: theme.colors.negative400,
      })}
    >
      <Alert size="18px" />
    </div>
  );
}
github uber / baseweb / documentation-site / examples / layer / basic.js View on Github external
function Wrapper(props: any) {
  const [css] = useStyletron();
  const {offset, color, children, forwardedRef} = props;
  return (
    <div
      className={css({
        position: 'fixed',
        top: offset || '46%',
        left: offset || '46%',
        width: '200px',
        paddingTop: '20px',
        paddingBottom: '20px',
        paddingLeft: '20px',
        paddingRight: '20px',
        backgroundColor: color,
        textAlign: 'center',
      })}
      ref={forwardedRef}