@boxyhq/反应-ui

UI 组件来自 总部 用于插件和游戏的企业特性.

安装

npm install @boxyhq/react-ui --save

使用量

SSO 登录组件

使用SSO登录组件主要有两种方式,概述如下:

预设值 ssoIdentifier

如果一个值被传递到 ssoIdentifier中,它会生成一个按钮,在点击时用 ssoIdentifier 数值。 处理器然后可以启动重定向到SSO服务,转发求解器的值.

import { Login as SSOLogin } from '@boxyhq/react-ui/sso';

const onSSOSubmit = async (ssoIdentifier: string) => {
  // Below calls signIn from next-auth. Replace this with whatever auth lib that you are using.
  await signIn('boxyhq-saml', undefined, { client_id: ssoIdentifier });
};

<SSOLogin
  buttonText={'Login with SSO'}
  ssoIdentifier={`tenant=${tenant}&product=${product}`}
  onSubmit={onSSOSubmit}
  classNames={{
    container: 'mt-2',
    button: 'btn-primary btn-block btn rounded-md active:-scale-95',
  }}
/>;

接受用户输入 ssoIdentifier

如果一个值没有传递到 ssoIdentifier,它将为用户输入 ssoIdentifier 数值。 然后在提交时,数值被传递给处理者. 处理器然后可以启动重定向到SSO服务,转发求解器的值.

import { Login as SSOLogin } from '@boxyhq/react-ui/sso';

const onSSOSubmit = async (ssoIdentifier: string) => {
  // Below calls signIn from next-auth. Replace this with whatever auth lib that you are using.
  await signIn('boxyhq-saml', undefined, { client_id: ssoIdentifier });
};

<SSOLogin
  buttonText={'Login with SSO'}
  onSubmit={onSSOSubmit}
  classNames={{
    container: 'mt-2',
    label: 'text-gray-400',
    button: 'btn-primary btn-block btn rounded-md active:-scale-95',
    input: 'input-bordered input mb-5 mt-2 w-full rounded-md',
  }}
/>;

样式

如果类名道具被传入, 我们可以覆盖每个内元素的默认样式 。 如果在类名道具中省略出一个内在元素,则为该元素设置默认样式。 例如: 在下面的片段中,所有内元素的样式都是通过每个内元素在类名中的相传来来进行.

<SSOLogin
  buttonText={'Login with SSO'}
  onSubmit={onSSOSubmit}
  classNames={{
    container: 'mt-2',
    label: 'text-gray-400',
    button: 'btn-primary btn-block btn rounded-md active:-scale-95',
    input: 'input-bordered input mb-5 mt-2 w-full rounded-md',
  }}
/>

通过风格属性的造型也被支持每个内元素.